/* ============================================================
   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"]{
  /* cool near-white gray family (cofounder #f5f5f2), not warm parchment */
  --bg:#f5f5f2;--surface-1:#fcfcfa;--surface-2:#f0f0ec;--surface-3:#e9e9e4;
  --text-strong:#171717;--text:#3d3d3b;--text-muted:#5c5c5a;--text-faint:#8a8a87;
  --border:#dedfda;--border-2:#e7e7e2;--border-strong:#282834;
  --accent:#41a1cf;--accent-ink:#2f7fa6;--accent-surface:#0081c0;--accent-surface-2:#0091d6;
  --success:#2e9e58;--warning:#f5bd4f;
  --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.04),0 3px 10px rgba(20,25,40,0.04);
  --shadow-fcard:0 1px 2px rgba(0,0,0,0.05),0 6px 16px rgba(20,25,40,0.07);   /* tight elevation (de-slopped from 0 18px 40px per triage 01) */
  --shadow-nav:0 2px 8px rgba(20,25,40,0.07);
  --shadow-lift:0 6px 20px rgba(20,25,40,0.09);
  --shadow-float:0 1px 2px rgba(20,25,40,0.05),0 8px 22px rgba(20,25,40,0.10),inset 0 1px 0 rgba(255,255,255,0.5);
  --shadow-chip:0 1px 2px rgba(20,25,40,0.08),0 8px 18px rgba(20,25,40,0.12),inset 0 1px 0 rgba(255,255,255,0.65);
  --edge-light:rgba(255,255,255,0.9);   /* top-edge light catch for depth */
  --bevel:inset 0 1.5px 0 rgba(255,255,255,0.95),inset 0 -1.5px 0 rgba(20,25,40,0.09),inset 1px 0 0 rgba(255,255,255,0.45),inset -1px 0 0 rgba(20,25,40,0.05);   /* two-tone bevel rim - scale-legible depth cue independent of shadow blur */
  --hero-scrim:rgba(18,20,28,0.60);--hero-scrim-2:rgba(18,20,28,0.34);
  /* flat sections (de-slopped - atmospheric wash removed per triage 01; depth comes from hairline
     borders + card elevation, matching the flat cofounder reference canvas). */
  --section-atmos:none;
  --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;--warning:#f5c866;
  --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.35),0 5px 16px rgba(0,0,0,0.28);
  --shadow-fcard:0 1px 2px rgba(0,0,0,0.35),0 6px 16px rgba(0,0,0,0.32);
  --shadow-nav:0 3px 12px rgba(0,0,0,0.4);
  --shadow-lift:0 8px 24px rgba(0,0,0,0.4);
  --shadow-float:0 1px 2px rgba(0,0,0,0.3),0 8px 22px rgba(0,0,0,0.34),inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-chip:0 1px 2px rgba(0,0,0,0.3),0 8px 18px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.06);
  --edge-light:rgba(255,255,255,0.06);   /* top-edge light catch for depth */
  --bevel:inset 0 1.5px 0 rgba(255,255,255,0.11),inset 0 -1.5px 0 rgba(0,0,0,0.5),inset 1px 0 0 rgba(255,255,255,0.05),inset -1px 0 0 rgba(0,0,0,0.32);   /* two-tone bevel rim - scale-legible depth cue independent of shadow blur */
  --hero-scrim:rgba(8,9,12,0.66);--hero-scrim-2:rgba(8,9,12,0.40);
  /* flat sections in dark too (de-slopped - wash removed per triage 01). */
  --section-atmos:none;
}
*{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: cofounder register ----------
   primary = Signal-Blue outlined CTA, transparent fill, chromatic border,
   arrow-in-a-circle at the right edge. secondary = Twilight outline. */
.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:10px;
  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:transparent;color:var(--accent-ink);padding:12px 15px 12px 20px;border:1px solid var(--accent);
  box-shadow:0 1px 2px rgba(20,25,40,0.05),inset 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent)}
.btn--fill::after{content:"\2192";flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;border:1px solid currentColor;font-size:11px;line-height:1;
  transition:transform .22s ease,background .22s ease}
.btn--fill:has(.arr)::after{content:none}
.btn--fill:hover{color:var(--accent-surface-2);border-color:var(--accent-surface-2);
  background:color-mix(in srgb,var(--accent) 8%,transparent);transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn--fill:hover::after{transform:translateX(2px)}
.btn--outline{background:transparent;color:var(--accent-ink);padding:12px 20px;border:1px solid var(--accent)}
.btn--outline:hover{color:var(--accent-surface-2);border-color:var(--accent-surface-2);
  background:color-mix(in srgb,var(--accent) 8%,transparent);transform:translateY(-1px)}
.btn .arr{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;border:1px solid currentColor;font-size:11px;line-height:1;transition:transform .22s ease}
.btn:hover .arr{transform:translateX(2px)}
.btn--ghost{background:transparent;color:var(--text-strong);padding:12px 20px;border:1px solid var(--border-strong)}
.btn--ghost:hover{background:color-mix(in srgb,var(--border-strong) 8%,transparent);border-color:var(--text-strong);transform:translateY(-1px)}
.btn--sm{padding:9px 15px;font-size:14px}
.btn--sm.btn--fill::after,.btn--sm .arr{width:18px;height:18px}

/* ---------- 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) 90%,transparent);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  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) 97%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  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 ---------- */
/* spacing rhythm: airy narrative sections breathe, dense --band shelves (product grids, proof,
   pricing) run tighter - a deliberate generous<->compact cadence, not one metronomic value */
.section{padding:124px 0}
.section--band{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:84px 0}
.section__head{max-width:760px;margin:0 auto 56px}
.section--band .section__head{margin-bottom:42px}
.section__head--center{text-align:center}
.section__head .label{margin-bottom:18px}
.section__head .label::before{content:"";display:inline-block;width:16px;height:2px;margin-right:9px;vertical-align:middle;background:var(--accent);border-radius:2px;opacity:.9}
.section__title{font-size:clamp(2.05rem,4vw,3.2rem);line-height:1.05;letter-spacing:-0.033em;color:var(--text-strong);text-wrap:balance}
.section__title em{font-style:italic;color:var(--accent-ink)}
.section__lead{margin-top:22px;font-size:1.18rem;line-height:1.62;color:var(--text-muted);text-wrap:pretty}
/* atmospheric depth behind card-grid sections so opaque cards float over it (z-depth), matching the scene bar.
   No overflow:hidden - the ::before is inset:0 so it can't bleed, and card hover shadows stay unclipped. */
.section:has(.fgrid),.section:has(.steps),.section:has(.xsell){position:relative;isolation:isolate}
.section:has(.fgrid)::before,.section:has(.steps)::before,.section:has(.xsell)::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--section-atmos)}

/* ---------- product hero ---------- */
.phero{position:relative;isolation:isolate;padding:64px 24px 0;margin-top:30px}
/* real atmospheric illustration behind the product hero so the terminal panel floats over genuine illustrated depth - the confirmed scene-bar z-depth composition (floating UI over the ridge scene), not just a quiet radial wash */
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 58%,transparent) 58%,color-mix(in srgb,var(--bg) 72%,transparent) 82%,var(--bg) 100%),
    url(scene-bg.webp);
  background-size:cover,cover;background-position:center top,50% 82%;background-repeat:no-repeat,no-repeat;
  image-rendering:pixelated}
:root[data-theme="dark"] .phero::before{
  background-image:
    linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,color-mix(in srgb,var(--bg) 60%,transparent) 58%,color-mix(in srgb,var(--bg) 74%,transparent) 82%,var(--bg) 100%),
    url(scene-bg-dark.webp);
  background-size:cover,cover;background-position:center top,50% 82%}
.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{position:relative;isolation:isolate;max-width:900px;margin:52px auto 0;background:linear-gradient(180deg,var(--surface-1),var(--surface-2));
  border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-fcard),var(--bevel);overflow:hidden}
/* de-slopped - signal-glow radial removed per triage 01; the panel reads as a clean bordered surface */
.pvisual__bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
/* on-brand /command chip - replaces macOS traffic-light chrome (we don't run from Mac) */
/* on-brand /command chip - glass tile treatment (border ring + inset top highlight) matching the confirmed .fcard__ic cue */
.slash{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:6px;background:linear-gradient(155deg,color-mix(in srgb,#ffffff 14%,var(--btn-fill-bg)) 0%,var(--btn-fill-bg) 100%);
  color:var(--btn-fill-fg);font-family:var(--font-mono);font-size:14px;line-height:1;
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 1px 3px rgba(20,25,40,0.28)}
.pvisual__bar .tlabel{margin-left:2px;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:linear-gradient(180deg,var(--surface-1) 0%,var(--surface-2) 100%);border:1px solid var(--border);border-radius:16px;padding:30px;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:var(--shadow-fcard),var(--bevel);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}
/* de-slopped - top-corner signal glow removed per triage 01; cards are flat bordered surfaces */
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift),var(--bevel);border-color:var(--border-strong)}
@media (prefers-reduced-motion:reduce){
  .fcard{transition:none}
  .fcard:hover{transform:none}
}
.fcard__ic svg{width:21px;height:21px;stroke:currentColor;fill:none}
.xtile__ic svg{width:18px;height:18px;stroke:currentColor;fill:none}
.fcard--feature .fcard__ic svg{width:26px;height:26px}
.fcard__ic{width:38px;height:38px;border-radius:10px;display:grid;place-content:center;margin-bottom:18px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 24%,var(--surface-1)) 0%,color-mix(in srgb,var(--accent) 9%,var(--surface-2)) 100%);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 2px 6px rgba(20,25,40,0.12);
  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}
/* fgrid structural variants - break the one-template-x5 stamp; each product page's WHAT grid reads distinct */
/* bento: a 2x2 spotlight feature card anchors the grid (gtm-studio, gtm-mcp).
   asymmetric gap (wider rows than columns) gives the spotlight vertical breathing room -
   a deliberate composition, not an even metronomic grid */
.fgrid--bento{column-gap:20px;row-gap:28px}
.fgrid--bento .fcard--feature{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;padding:38px}
.fgrid--bento .fcard--feature .fcard__ic{width:48px;height:48px;font-size:21px;margin-bottom:22px}
.fgrid--bento .fcard--feature h3{font-size:1.9rem;line-height:1.08;margin-bottom:15px}
.fgrid--bento .fcard--feature p{font-size:1.1rem;max-width:34ch}
/* pairs: a calmer, wider two-up rhythm distinct from the default three-up (masterinbox, mail-legion) */
.fgrid--pairs{grid-template-columns:repeat(2,1fr);column-gap:34px;row-gap:24px}

/* ---------- steps / how ---------- */
.steps{display:flex;flex-direction:column;gap:14px}
/* grid variant - 2x2 how-it-works, so the step section is not one identical vertical stack across every product page */
.steps--grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.steps--grid .pstep{height:100%}
.pstep{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:22px;
  background:linear-gradient(165deg,var(--surface-1) 0%,var(--surface-2) 100%);border:1px solid var(--border);border-radius:14px;padding:26px 30px;
  box-shadow:var(--shadow-fcard),var(--bevel);
  transition:border-color .25s ease,box-shadow .25s ease}
.pstep:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lift),var(--bevel)}
/* glass number tile - same confirmed-legible glass recipe as .fcard__ic, applied uniformly */
.pstep__n{width:40px;height:40px;border-radius:11px;display:grid;place-content:center;
  background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 24%,var(--surface-1)) 0%,color-mix(in srgb,var(--accent) 9%,var(--surface-2)) 100%);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 2px 6px rgba(20,25,40,0.12);
  font-family:var(--font-mono);font-size:14px;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)}
/* flow variant - a chrome-free connected timeline (round nodes on a vertical rail), NOT boxed cards.
   Structurally distinct from .steps / .steps--grid in BOTH themes AND at mobile, where the boxed
   families all collapse to identical single-column cards but this keeps its rail+node timeline. */
.steps--flow{display:flex;flex-direction:column;gap:0;position:relative}
.steps--flow::before{content:"";position:absolute;left:19px;top:34px;bottom:34px;width:2px;
  background:linear-gradient(180deg,transparent,var(--border-strong) 12%,var(--border-strong) 88%,transparent);z-index:0}
.steps--flow .pstep{background:none;border:none;border-radius:0;box-shadow:none;padding:20px 4px;position:relative;z-index:1}
.steps--flow .pstep:hover{border-color:transparent;box-shadow:none}
.steps--flow .pstep__n{border-radius:50%;position:relative;z-index:1}

/* ---------- 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:linear-gradient(180deg,var(--surface-1) 0%,var(--surface-2) 100%);
  border:1px solid var(--border);border-radius:14px;padding:22px;text-decoration:none;
  box-shadow:var(--shadow-fcard),var(--bevel);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.xtile:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-lift),var(--bevel)}
@media(prefers-reduced-motion:reduce){.xtile{transition:none}.xtile:hover{transform:none}}
/* glass icon tile - same confirmed-legible glass recipe as .fcard__ic, applied uniformly */
.xtile__ic{width:34px;height:34px;border-radius:9px;display:grid;place-content:center;
  background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 24%,var(--surface-1)) 0%,color-mix(in srgb,var(--accent) 9%,var(--surface-2)) 100%);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 2px 6px rgba(20,25,40,0.12);
  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}

/* ============================================================
   COFOUNDER-PARITY UPGRADES (design-cofounder-parity loop)
   ============================================================ */

/* ---------- FIX 2: dark dual-gradient primary CTA (.cta-btn-dark) ----------
   dual gradient + inset top highlight -> glassy dark chip; hover inverts to a light chip.
   Composes on .btn (keeps flex/gap). Reads identically in BOTH themes. Ships its own arrow. */
.cta-btn-dark{
  color:#fff;padding:12px 16px 12px 20px;border:1px solid #383838;border-radius:8px;
  background:linear-gradient(#2020201a 0% 100%),linear-gradient(#4f4f4f 0%,#202020d9 100%);
  box-shadow:0 0 0 1px #4040401f,inset 0 2px #ffffff3d,inset 0 -.5px 2px #00000040,0 2px 8px #00000008,0 3px 4px #00000029}
.cta-btn-dark::after{content:"\2192";flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;border:1px solid #ffffffbf;color:#fff;font-size:11px;line-height:1;
  transition:transform .22s ease,border-color .22s ease,color .22s ease}
.cta-btn-dark:has(.arr)::after{content:none}
.cta-btn-dark .arr{border-color:#ffffffbf;color:#fff}
.cta-btn-dark:hover{color:#171717;background:#e7e7e1;border:1px solid #2020201a;
  box-shadow:inset 0 0 .357px 1.5px #ffffff59,0 4px 12px #00000014;transform:translateY(-1px)}
.cta-btn-dark:hover::after,.cta-btn-dark:hover .arr{border-color:#1717174d;color:#171717}
.cta-btn-dark:hover::after{transform:translateX(2px)}
.cta-btn-dark.btn--sm{padding:9px 15px;font-size:14px}
.cta-btn-dark.btn--sm::after,.cta-btn-dark.btn--sm .arr{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.cta-btn-dark{transition:none}.cta-btn-dark:hover{transform:none}}

/* Display headings: SOLID ink (de-slopped - gradient-clip headline removed per triage 01).
   Accent phrase stays one restrained blue by weight/color, no clip. */
.grad-text{color:var(--text-strong)}
.grad-text em{color:var(--accent-ink)}

/* ---------- FIX 4: scroll reveal + overscroll + richer hovers ---------- */
html{overscroll-behavior-y:none}
/* staggered reveal - opacity + rise + a short blur defocus (matches cofounder's task-row-in
   blur reveal); the blur makes the in-flight state read as genuine motion, not a jump */
/* opacity-only cascade: a vertical rise staggered across a ROW of sibling cards leaves them
   at different heights mid-transition (a staircase) - fade-only keeps every row aligned. */
.reveal{opacity:0;transition:opacity .55s ease;
  transition-delay:calc(var(--reveal-i,0)*70ms);will-change:opacity}
.reveal.is-visible{opacity:1}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none;transition-delay:0s}}
/* nav link underline sweep */
.nav__links>a{position:relative}
.nav__links>a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;
  background:var(--accent);opacity:.85;transition:right .3s cubic-bezier(.2,.7,.2,1)}
.nav__links>a:hover::after{right:0}
@media(prefers-reduced-motion:reduce){.nav__links>a::after{transition:none}}

/* ---------- FIX 5: vanilla component upgrades (shadcn-shaped, ported) ---------- */
/* badge - pill with optional status dot */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:9999px;
  font-size:12px;font-weight:600;letter-spacing:0.01em;line-height:1;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-ink);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.badge--muted{background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}
.badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* kbd - keycap */
kbd,.kbd{font-family:var(--font-mono);font-size:12px;line-height:1;padding:3px 6px;border-radius:6px;
  background:var(--surface-1);border:1px solid var(--border);box-shadow:0 1px 0 var(--border);color:var(--text-strong)}
/* tooltip - hover popover */
.tip{position:relative;display:inline-flex}
.tip__pop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--btn-fill-bg);color:var(--btn-fill-fg);font-size:12px;line-height:1.3;white-space:nowrap;
  padding:6px 10px;border-radius:8px;box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;z-index:80}
.tip:hover .tip__pop,.tip:focus-within .tip__pop{opacity:1;transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){.tip__pop{transition:none}}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .nav__links{display:none}
  .nav__inner{grid-template-columns:1fr auto;max-width:640px}
  .brand{justify-self:start}
  .section{padding:78px 0}
  .section--band{padding:60px 0}
  .fgrid{grid-template-columns:1fr}
  .fgrid--bento .fcard--feature{grid-column:auto;grid-row:auto}
  .steps--grid{grid-template-columns:1fr}
  .speclist{grid-template-columns:1fr}
  .xsell{grid-template-columns:1fr 1fr}
  .pstep{grid-template-columns:1fr;gap:8px}
  /* flow keeps its two-column node+text timeline at mobile so it stays distinct from the
     boxed families, which all collapse to identical single-column cards below 980px */
  .steps--flow .pstep{grid-template-columns:auto 1fr;gap:16px}
  .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}
}