/* ================================================================
   Skilset — site styles, built on brand guidelines v1.0
   Palette: Ink / Paper / Marker · Type: Schibsted Grotesk + IBM Plex Mono
   ================================================================ */

:root{
  --ink:#0E1116;
  --graphite:#1A1F27;
  --hairline:#2A313C;
  --paper:#F4F5F2;
  --paper-dim:#E8EAE5;
  --text-hi:#F4F5F2;
  --text-lo:#98A1AD;
  --text-ink:#14181F;
  --text-ink-lo:#4B5563;
  --marker:#E8963F;
  --marker-dim:#8A5A28;
  --font-display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono',Consolas,monospace;
  --max:1080px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}*{transition:none!important;animation:none!important;}}
body{background:var(--ink);color:var(--text-hi);font-family:var(--font-display);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
a{color:inherit;}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--marker);outline-offset:3px;border-radius:4px;}

/* ---------- type ---------- */
h1{font-size:clamp(40px,6.5vw,76px);font-weight:900;line-height:1.04;letter-spacing:-0.025em;}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:-0.02em;}
h3{font-size:19px;font-weight:700;}
.lede{font-size:19px;color:var(--text-lo);max-width:620px;}
.body{color:var(--text-lo);max-width:640px;}
.mono-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--marker);display:block;margin-bottom:14px;}
.mono{font-family:var(--font-mono);}

/* ---------- frontmatter device ---------- */
.fm{font-family:var(--font-mono);font-size:13px;color:var(--text-lo);border-left:2px solid var(--marker);padding:8px 0 8px 16px;white-space:pre-line;}
.fm .k{color:var(--marker);}
.fm .dash{color:var(--hairline);}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:15px;border-radius:8px;padding:12px 22px;cursor:pointer;border:none;text-decoration:none;text-align:center;}
.btn-primary{background:var(--marker);color:var(--text-ink);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;color:var(--text-hi);border:1px solid var(--hairline);}
.btn-ghost:hover{border-color:var(--text-lo);}
.btn-paper{background:var(--text-ink);color:var(--paper);}
.btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed;}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(14,17,22,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:19px;letter-spacing:-.02em;}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;}
.nav-links a{text-decoration:none;font-size:14.5px;color:var(--text-lo);font-weight:500;}
.nav-links a:hover{color:var(--text-hi);}
.nav-links .btn{padding:9px 16px;font-size:14px;}
.nav-toggle{display:none;background:none;border:1px solid var(--hairline);border-radius:6px;color:var(--text-hi);font-family:var(--font-mono);font-size:12px;padding:7px 12px;cursor:pointer;}
@media(max-width:760px){
  .nav-toggle{display:block;}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--graphite);flex-direction:column;align-items:flex-start;padding:20px 28px;gap:18px;border-bottom:1px solid var(--hairline);}
  .nav-links.open{display:flex;}
}

/* ---------- sections ---------- */
section{padding:84px 0;}
section.hairline-top{border-top:1px solid var(--hairline);}
.hero{padding:108px 0 92px;}
.hero .lede{margin:22px 0 30px;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

/* ---------- file card (signature) ---------- */
.file-card{background:var(--paper);color:var(--text-ink);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden;display:flex;flex-direction:column;}
.fc-head{font-family:var(--font-mono);font-size:12.5px;padding:13px 20px;border-bottom:1px solid var(--paper-dim);color:#6B7280;display:flex;justify-content:space-between;gap:10px;}
.fc-body{padding:20px;flex:1;}
.fc-fm{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--text-ink-lo);}
.fc-fm .k{color:var(--marker-dim);}
.fc-body h4{font-size:20px;font-weight:900;letter-spacing:-.01em;margin:14px 0 6px;}
.fc-desc{font-size:14px;color:var(--text-ink-lo);line-height:1.55;}
.fc-foot{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-top:1px solid var(--paper-dim);}
.fc-foot .price{font-family:var(--font-mono);font-weight:500;font-size:17px;}
.fc-foot .btn{padding:9px 16px;font-size:13.5px;}
.fc-status{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;}
.fc-status.live{background:#1f3a23;color:#8FD49B;}
.fc-status.soon{background:#EDE3D2;color:var(--marker-dim);}

/* ---------- grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr;}}

/* ---------- steps ---------- */
.step{border:1px solid var(--hairline);border-radius:10px;padding:26px;background:var(--graphite);}
.step .mono-label{margin-bottom:10px;}
.step p{color:var(--text-lo);font-size:14.5px;margin-top:8px;}

/* ---------- panels / misc ---------- */
.panel{border:1px solid var(--hairline);border-radius:12px;padding:32px;background:var(--graphite);}
.stat{font-family:var(--font-mono);}
.stat .n{font-size:34px;font-weight:500;color:var(--text-hi);display:block;letter-spacing:-.02em;}
.stat .l{font-size:12.5px;color:var(--text-lo);}
.checklist{list-style:none;margin-top:18px;}
.checklist li{padding:10px 0 10px 28px;position:relative;color:var(--text-lo);font-size:15px;border-bottom:1px solid var(--hairline);}
.checklist li:last-child{border-bottom:none;}
.checklist li::before{content:"—";position:absolute;left:0;color:var(--marker);font-weight:700;}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--hairline);padding:18px 0;max-width:720px;}
details summary{cursor:pointer;font-weight:700;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;}
details summary::after{content:"+";font-family:var(--font-mono);color:var(--marker);}
details[open] summary::after{content:"–";}
details p{color:var(--text-lo);margin-top:12px;font-size:15px;max-width:640px;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hairline);padding:48px 0;margin-top:40px;}
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:center;}
.foot-inner .mono{font-size:12.5px;color:var(--text-lo);}
.foot-links{display:flex;gap:20px;list-style:none;}
.foot-links a{font-size:13.5px;color:var(--text-lo);text-decoration:none;}
.foot-links a:hover{color:var(--text-hi);}

/* ---------- product page ---------- */
.crumb{font-family:var(--font-mono);font-size:12.5px;color:var(--text-lo);padding-top:28px;}
.crumb a{color:var(--text-lo);text-decoration:none;}
.crumb a:hover{color:var(--text-hi);}
.product-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;padding:48px 0 80px;}
@media(max-width:860px){.product-hero{grid-template-columns:1fr;}}
.domain-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
.domain-tags span{font-family:var(--font-mono);font-size:12px;border:1px solid var(--hairline);border-radius:99px;padding:5px 13px;color:var(--text-lo);}
.qa{border:1px solid var(--hairline);border-radius:10px;overflow:hidden;margin-top:14px;}
.qa .q{font-family:var(--font-mono);font-size:13.5px;padding:14px 20px;background:var(--graphite);color:var(--text-hi);}
.qa .a{padding:16px 20px;font-size:14.5px;color:var(--text-lo);border-top:1px solid var(--hairline);}
.qa .a b{color:var(--text-hi);}

/* ---------- dashboard / auth ---------- */
.auth-card{background:var(--paper);color:var(--text-ink);border-radius:12px;max-width:420px;margin:64px auto;padding:34px;box-shadow:0 18px 50px rgba(0,0,0,.45);}
.auth-card h2{color:var(--text-ink);font-size:24px;margin:10px 0 4px;}
.auth-card .hint{font-size:13.5px;color:var(--text-ink-lo);margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-ink-lo);margin-bottom:6px;}
.field input{width:100%;padding:11px 13px;border:1px solid #C9CDC6;border-radius:8px;font-family:var(--font-mono);font-size:14px;background:#fff;color:var(--text-ink);}
.field input:focus{outline:2px solid var(--marker);border-color:var(--marker);}
.auth-note{font-family:var(--font-mono);font-size:11.5px;color:var(--text-ink-lo);margin-top:16px;line-height:1.6;}
.dash-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:48px 0 8px;}
.dash-head .who{font-family:var(--font-mono);font-size:13px;color:var(--text-lo);}
.dl-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px;border:1px solid var(--hairline);border-radius:10px;background:var(--graphite);margin-top:12px;flex-wrap:wrap;}
.dl-row .f{font-family:var(--font-mono);font-size:13.5px;}
.dl-row .v{font-family:var(--font-mono);font-size:12px;color:var(--text-lo);}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--paper);color:var(--text-ink);font-family:var(--font-mono);font-size:13px;padding:12px 20px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s;}
.toast.show{opacity:1;}
.hidden{display:none!important;}

/* ================================================================
   v2 additions — demo terminal, categories, search, compare, forms
   ================================================================ */

/* ---------- hero demo (typing) ---------- */
.demo-card{background:var(--paper);color:var(--text-ink);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.45);overflow:hidden;max-width:520px;}
.demo-head{font-family:var(--font-mono);font-size:12.5px;padding:13px 20px;border-bottom:1px solid var(--paper-dim);color:#6B7280;display:flex;justify-content:space-between;}
.demo-body{padding:20px;min-height:240px;}
.demo-q{font-family:var(--font-mono);font-size:14px;color:var(--text-ink);background:#EAECE7;border-radius:8px;padding:12px 14px;}
.demo-q .at{color:var(--marker-dim);font-weight:500;}
.demo-a{font-size:14px;line-height:1.6;color:var(--text-ink-lo);margin-top:14px;opacity:0;transition:opacity .5s;}
.demo-a.show{opacity:1;}
.demo-a b{color:var(--text-ink);}
.caret{display:inline-block;width:8px;height:15px;background:var(--marker-dim);vertical-align:-2px;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){.demo-a{opacity:1;}.caret{display:none;}}

/* ---------- category cards ---------- */
.cat-card{border:1px solid var(--hairline);border-radius:12px;background:var(--graphite);padding:26px;text-decoration:none;display:block;transition:border-color .2s;}
.cat-card:hover{border-color:var(--text-lo);}
.cat-card .cc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.cat-card .cc-count{font-family:var(--font-mono);font-size:11.5px;color:var(--text-lo);}
.cat-card h3{font-size:20px;letter-spacing:-.01em;}
.cat-card p{color:var(--text-lo);font-size:14px;margin-top:8px;line-height:1.55;}
.cat-card .cc-link{font-family:var(--font-mono);font-size:12.5px;color:var(--marker);margin-top:16px;display:inline-block;}

/* ---------- creator rows (category browse) ---------- */
.search-bar{display:flex;gap:12px;margin:30px 0 8px;max-width:560px;}
.search-bar input{flex:1;padding:12px 16px;border:1px solid var(--hairline);border-radius:8px;background:var(--graphite);color:var(--text-hi);font-family:var(--font-mono);font-size:14px;}
.search-bar input::placeholder{color:var(--text-lo);}
.search-bar input:focus{outline:2px solid var(--marker);}
.result-count{font-family:var(--font-mono);font-size:12px;color:var(--text-lo);margin-bottom:18px;}
.creator-row{display:flex;justify-content:space-between;align-items:center;gap:18px;border:1px solid var(--hairline);border-radius:12px;background:var(--graphite);padding:22px 26px;margin-bottom:14px;flex-wrap:wrap;}
.creator-row .cr-name{font-size:19px;font-weight:700;letter-spacing:-.01em;}
.creator-row .cr-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-lo);margin-top:5px;}
.creator-row .cr-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.creator-row .cr-tags span{font-family:var(--font-mono);font-size:11px;border:1px solid var(--hairline);border-radius:99px;padding:3px 10px;color:var(--text-lo);}
.creator-row .cr-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.creator-row.empty{border-style:dashed;color:var(--text-lo);}

/* ---------- notify capture ---------- */
.notify{display:flex;gap:10px;max-width:480px;flex-wrap:wrap;}
.notify input{flex:1;min-width:220px;padding:12px 15px;border:1px solid var(--hairline);border-radius:8px;background:var(--graphite);color:var(--text-hi);font-family:var(--font-mono);font-size:13.5px;}
.notify input:focus{outline:2px solid var(--marker);}

/* ---------- skill vs generic compare ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px;}
@media(max-width:780px){.compare{grid-template-columns:1fr;}}
.compare .col{border:1px solid var(--hairline);border-radius:12px;overflow:hidden;}
.compare .col-head{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:11px 18px;border-bottom:1px solid var(--hairline);}
.compare .generic .col-head{background:var(--graphite);color:var(--text-lo);}
.compare .skill .col-head{background:var(--marker);color:var(--text-ink);}
.compare .col-body{padding:18px;font-size:14px;line-height:1.65;color:var(--text-lo);}
.compare .skill{background:var(--paper);}
.compare .skill .col-body{color:var(--text-ink-lo);}
.compare .skill .col-body b{color:var(--text-ink);}

/* ---------- apply form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px;margin-top:28px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
.form-grid .field.full{grid-column:1/-1;}
.form-grid label{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-lo);margin-bottom:6px;}
.form-grid input,.form-grid textarea,.form-grid select{width:100%;padding:11px 13px;border:1px solid var(--hairline);border-radius:8px;font-family:var(--font-mono);font-size:13.5px;background:var(--graphite);color:var(--text-hi);}
.form-grid textarea{min-height:110px;resize:vertical;}
.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus{outline:2px solid var(--marker);}

/* ---------- dashboard v2 ---------- */
.skill-block{border:1px solid var(--hairline);border-radius:12px;background:var(--graphite);padding:26px;margin-top:20px;}
.skill-block .sb-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;}
.skill-block .sb-head h3{font-size:20px;}
.skill-block .sb-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-lo);}
.changelog{margin-top:18px;border-top:1px solid var(--hairline);}
.changelog .cl-row{display:flex;gap:18px;padding:12px 0;border-bottom:1px solid var(--hairline);font-size:14px;flex-wrap:wrap;}
.changelog .cl-v{font-family:var(--font-mono);font-size:12.5px;color:var(--marker);min-width:52px;}
.changelog .cl-d{font-family:var(--font-mono);font-size:12px;color:var(--text-lo);min-width:86px;}
.changelog .cl-t{color:var(--text-lo);flex:1;min-width:200px;}
.callout{border:1px solid var(--hairline);border-left:3px solid var(--marker);border-radius:0 10px 10px 0;padding:18px 22px;background:var(--graphite);max-width:720px;}
.callout p{color:var(--text-lo);font-size:14.5px;}
.callout b{color:var(--text-hi);}