/* ============================================================
   LEGION COFOUNDER - shared chrome for product pages
   Token system + nav (with Product dropdown) + footer + buttons,
   lifted verbatim from index.html so product pages match the home.
   Home stays self-contained/inline; product pages link this file.
   ============================================================ */
/* ---------- real self-hosted cofounder fonts (woff2) ---------- */
@font-face{
  font-family:'Hanken Grotesk';
  src:url('fonts/hanken-grotesk-variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'departureMono';
  src:url('fonts/departure-mono.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
:root,:root[data-theme="light"]{
  --bg:#fefffc;--surface-1:#ffffff;--surface-2:#f9faf7;--surface-3:#f2f4ef;
  --text-strong:#2c2c2c;--text:#444141;--text-muted:#5e5e5e;--text-faint:#8a8a86;
  --border:#dee2de;--border-2:#e7eae5;--border-strong:#282834;
  --accent:#41a1cf;--accent-ink:#2f7fa6;--accent-surface:#0081c0;--accent-surface-2:#0091d6;
  --success:#2e9e58;
  --btn-fill-bg:#1f1f29;--btn-fill-fg:#ffffff;--btn-fill-bg-hover:#2c2c3a;--on-accent:#ffffff;
  --shadow-card:0 1px 1px rgba(0,0,0,0.05),0 4px 14px rgba(20,25,40,0.05);
  --shadow-nav:0 2px 10px rgba(20,25,40,0.10);
  --shadow-lift:0 10px 30px rgba(20,25,40,0.10);
  --hero-scrim:rgba(18,20,28,0.60);--hero-scrim-2:rgba(18,20,28,0.34);
  --font-serif:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'departureMono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --maxw:1200px;
}
:root[data-theme="dark"]{
  --bg:#161513;--surface-1:#1e1c19;--surface-2:#232019;--surface-3:#282419;
  --text-strong:#ece9e2;--text:#c3bfb4;--text-muted:#948f83;--text-faint:#726d63;
  --border:#38352f;--border-2:#302d28;--border-strong:#565149;
  --accent:#5bb8e0;--accent-ink:#7cc8ea;--success:#54c483;
  --accent-surface:#0a5c86;--accent-surface-2:#0b6c9d;
  --btn-fill-bg:#ece9e2;--btn-fill-fg:#1b1a17;--btn-fill-bg-hover:#ffffff;--on-accent:#eaf6fc;
  --shadow-card:0 1px 2px rgba(0,0,0,0.4),0 8px 24px rgba(0,0,0,0.35);
  --shadow-nav:0 4px 18px rgba(0,0,0,0.5);
  --shadow-lift:0 14px 40px rgba(0,0,0,0.5);
  --hero-scrim:rgba(8,9,12,0.66);--hero-scrim-2:rgba(8,9,12,0.40);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);background:var(--bg);color:var(--text);
  letter-spacing:-0.011em;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
  transition:background .4s ease,color .4s ease;
}
.wrap{overflow-x:hidden;width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container--narrow{max-width:940px}

.label{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:0.14em;
  line-height:1;text-transform:uppercase;color:var(--text-muted);display:inline-block}
.label--accent{color:var(--accent-ink)}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:400;color:var(--text-strong)}
em{font-style:italic}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-sans);font-size:15px;font-weight:500;letter-spacing:-0.01em;
  border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;line-height:1;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.btn--fill{background:var(--btn-fill-bg);color:var(--btn-fill-fg);padding:15px 26px;border:1px solid var(--border-strong)}
.btn--fill:hover{background:var(--btn-fill-bg-hover);transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn--outline{background:transparent;color:var(--accent-ink);padding:14px 22px;border:1px solid var(--accent)}
.btn--outline:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-1px)}
.btn--outline .arr{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;border:1px solid currentColor;font-size:11px}
.btn--ghost{background:transparent;color:var(--text-strong);padding:14px 22px;border:1px solid var(--border-strong)}
.btn--ghost:hover{background:var(--text-strong);color:var(--bg);transform:translateY(-1px)}
.btn--sm{padding:10px 18px;font-size:14px}

/* ---------- theme toggle ---------- */
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--text);
  cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.themebtn:hover{border-color:var(--border-strong);color:var(--text-strong)}
.themebtn svg{width:17px;height:17px;display:block}
.themebtn .i-moon{display:none}
:root[data-theme="dark"] .themebtn .i-sun{display:none}
:root[data-theme="dark"] .themebtn .i-moon{display:block}

/* ---------- nav (frosted pill) + Product dropdown ---------- */
.nav{position:sticky;top:18px;z-index:60;padding:0 24px;margin-top:18px}
.nav__inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;padding:9px 12px 9px 22px;
  background:color-mix(in srgb,var(--surface-1) 72%,transparent);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--border);border-radius:50px;box-shadow:var(--shadow-nav)}
.nav__links{display:flex;gap:26px;align-items:center}
.nav__links>a{font-size:15px;font-weight:500;color:var(--text);text-decoration:none;transition:color .2s}
.nav__links>a:hover{color:var(--text-strong)}
.brand{display:flex;align-items:center;gap:9px;justify-self:center;font-family:var(--font-serif);
  font-weight:500;font-size:21px;letter-spacing:-0.02em;color:var(--text-strong);text-decoration:none}
.brand__slash{width:29px;height:29px;border-radius:8px;background:var(--btn-fill-bg);color:var(--btn-fill-fg);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:17px}
.nav__cta{display:flex;gap:10px;align-items:center;justify-self:end}
.nav__cta .nav-ghost{font-size:15px;font-weight:500;color:var(--text);text-decoration:none;transition:color .2s}
.nav__cta .nav-ghost:hover{color:var(--text-strong)}

/* dropdown */
.navdd{position:relative}
.navdd__btn{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;
  color:var(--text);background:none;border:none;cursor:pointer;font-family:var(--font-sans);
  letter-spacing:-0.011em;padding:0;transition:color .2s}
.navdd__btn:hover,.navdd[data-open="true"] .navdd__btn{color:var(--text-strong)}
.navdd__btn .chev{width:11px;height:11px;transition:transform .25s ease;opacity:.7}
.navdd[data-open="true"] .navdd__btn .chev{transform:rotate(180deg)}
.navdd__panel{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:360px;background:color-mix(in srgb,var(--surface-1) 92%,transparent);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lift);
  padding:8px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:70}
.navdd[data-open="true"] .navdd__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.navdd__panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.dditem{display:flex;gap:13px;align-items:flex-start;padding:11px 13px;border-radius:12px;
  text-decoration:none;transition:background .18s ease}
.dditem:hover{background:var(--surface-2)}
.dditem__ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-content:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-ink);
  font-family:var(--font-mono);font-size:15px}
.dditem__ic svg{width:17px;height:17px}
.dditem__tt{font-size:14.5px;font-weight:600;color:var(--text-strong);line-height:1.2}
.dditem__ds{margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--text-muted)}
.dditem[aria-current="page"]{background:var(--surface-2)}

/* ---------- generic sections ---------- */
.section{padding:104px 0}
.section--band{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section__head{max-width:760px;margin:0 auto 56px}
.section__head--center{text-align:center}
.section__head .label{margin-bottom:20px}
.section__title{font-size:clamp(2rem,3.4vw,2.7rem);line-height:1.1;letter-spacing:-0.025em;color:var(--text-strong)}
.section__title em{font-style:italic;color:var(--accent-ink)}
.section__lead{margin-top:22px;font-size:1.1rem;line-height:1.55;color:var(--text-muted)}

/* ---------- product hero ---------- */
.phero{position:relative;padding:64px 24px 0;margin-top:30px}
.phero__inner{max-width:960px;margin:0 auto;text-align:center}
.phero__crumb{font-family:var(--font-mono);font-size:12px;letter-spacing:0.02em;color:var(--text-muted);margin-bottom:26px}
.phero__crumb a{color:var(--accent-ink);text-decoration:none}
.phero__crumb a:hover{text-decoration:underline}
.phero h1{font-size:clamp(2.5rem,5vw,3.9rem);line-height:1.05;letter-spacing:-0.03em;
  color:var(--text-strong);margin:0 auto 22px;max-width:18ch;text-wrap:balance}
.phero h1 em{font-style:italic;color:var(--accent-ink)}
.phero__sub{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;color:var(--text-muted);
  max-width:56ch;margin:0 auto 34px}
.phero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.phero__tag{display:inline-block;font-family:var(--font-mono);font-size:12px;letter-spacing:0.01em;
  color:var(--accent-ink);border:1px solid var(--accent);border-radius:9999px;padding:5px 14px;margin-bottom:26px}

/* product terminal / visual band */
.pvisual{max-width:900px;margin:52px auto 0;background:var(--surface-1);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden}
.pvisual__bar{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.pvisual__bar .dot{width:10px;height:10px;border-radius:50%;background:var(--border-strong);opacity:0.9}
.pvisual__bar .dot:nth-child(1){background:#f5675a}
.pvisual__bar .dot:nth-child(2){background:#f5bd4f}
.pvisual__bar .dot:nth-child(3){background:#5bc772}
.pvisual__bar .tlabel{margin-left:8px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.pvisual__body{padding:24px 26px;font-family:var(--font-mono);font-size:13.5px;line-height:1.95}
.pvisual__body .pr{color:var(--accent-ink)}
.pvisual__body .cm{color:var(--text-strong)}
.pvisual__body .ot{color:var(--text-muted)}
.pvisual__body .ok{color:var(--success)}
.pvisual__body .ln{display:block;white-space:pre-wrap}

/* ---------- feature grid ---------- */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{background:var(--surface-1);border:1px solid var(--border);border-radius:16px;padding:30px;
  box-shadow:var(--shadow-card);transition:transform .3s ease,border-color .3s ease}
.fcard:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.fcard__ic{width:38px;height:38px;border-radius:10px;display:grid;place-content:center;margin-bottom:18px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-ink);font-family:var(--font-mono);font-size:16px}
.fcard h3{font-size:1.28rem;letter-spacing:-0.02em;line-height:1.15;margin-bottom:11px;color:var(--text-strong)}
.fcard p{font-size:1rem;line-height:1.55;color:var(--text-muted)}
.fcard p b{color:var(--text-strong);font-weight:600}

/* ---------- steps / how ---------- */
.steps{display:flex;flex-direction:column;gap:14px}
.pstep{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:24px;
  background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:26px 30px;
  transition:border-color .25s ease,box-shadow .25s ease}
.pstep:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card)}
.pstep__n{font-family:var(--font-mono);font-size:13px;color:var(--accent-ink);white-space:nowrap}
.pstep h4{font-family:var(--font-serif);font-weight:400;font-size:1.2rem;letter-spacing:-0.02em;margin-bottom:7px;color:var(--text-strong)}
.pstep p{font-size:1rem;line-height:1.5;color:var(--text-muted)}

/* ---------- spec list ---------- */
.speclist{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;max-width:900px;margin:0 auto}
.specrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.specrow span:first-child{font-size:1rem;color:var(--text)}
.specrow .val{font-family:var(--font-mono);font-size:13px;letter-spacing:0.01em;color:var(--accent-ink);white-space:nowrap}

/* ---------- cross-sell strip ---------- */
.xsell{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.xtile{display:flex;flex-direction:column;gap:8px;background:var(--surface-1);border:1px solid var(--border);
  border-radius:14px;padding:22px;text-decoration:none;transition:transform .25s ease,border-color .25s ease}
.xtile:hover{transform:translateY(-3px);border-color:var(--border-strong)}
.xtile__ic{font-family:var(--font-mono);font-size:15px;color:var(--accent-ink)}
.xtile h4{font-size:1.02rem;letter-spacing:-0.01em;color:var(--text-strong)}
.xtile p{font-size:0.9rem;line-height:1.45;color:var(--text-muted)}

/* ---------- final cta ---------- */
.final{text-align:center;padding:112px 0}
.final h2{font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.1;letter-spacing:-0.025em;max-width:18ch;margin:0 auto 22px;color:var(--text-strong)}
.final h2 em{font-style:italic;color:var(--accent-ink)}
.final p{font-size:1.1rem;color:var(--text-muted);max-width:46ch;margin:0 auto 34px}
.final__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--border);background:var(--surface-2);padding:72px 0 44px}
.footer__inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer__brand .brand{justify-self:start;margin-bottom:16px}
.footer__brand p{font-size:0.98rem;line-height:1.55;color:var(--text-muted);max-width:30ch}
.footer__col h5{font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px}
.footer__col a{display:block;font-size:0.95rem;color:var(--text);text-decoration:none;margin-bottom:12px;transition:color .2s}
.footer__col a:hover{color:var(--text-strong)}
.footer__base{max-width:var(--maxw);margin:56px auto 0;padding:24px 24px 0;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer__base p{font-family:var(--font-mono);font-size:12px;letter-spacing:0.01em;color:var(--text-muted)}

/* flagged/invented content marker - visible only in a debug pass, invisible normally */
.tv{border-bottom:1px dotted transparent}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .nav__links{display:none}
  .nav__inner{grid-template-columns:1fr auto;max-width:640px}
  .brand{justify-self:start}
  .fgrid{grid-template-columns:1fr}
  .speclist{grid-template-columns:1fr}
  .xsell{grid-template-columns:1fr 1fr}
  .pstep{grid-template-columns:1fr;gap:8px}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .xsell{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
  .phero h1{font-size:2.3rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .navdd__panel{transition:none}
}