/* ═══ 0 · DOCTRINE ═══════════════════════════════════════════════════════════
   Genba Studio — the public site. Design authority: docs/W1/DESIGN.md in the
   studio repo. The rules a future editor must not break:
     · No JavaScript anywhere. The CSP refuses it; do not fight the CSP.
     · No !important (one exception lives in §13, by intent).
     · Every colour/size/radius/duration is a token. Raw values are bugs.
     · Cards are parted by seams, never by shadows. Two shadows exist (§2),
       both reserved (media frames, the nav) — nothing else casts one.
     · Red is LIVE or DANGER, at most twice per page. Gold means act,
       amber means wait.
     · No pill radii. The only circle is the 7px status dot.
     · Responsive overrides live in §12 only. Preferences in §13 only.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══ 1 · @font-face ═══════════════════════════════════════════════════════ */
@font-face{
  font-family:'Archivo';
  src:url('/static/fonts/Archivo.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/static/fonts/Inter.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/static/fonts/JetBrainsMono.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'GenbaMark';
  src:url('/static/fonts/GenbaMark.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:block;
  unicode-range:U+73FE, U+5834;
}

/* ═══ 2 · TOKENS ═══════════════════════════════════════════════════════════
   Grounds, ink and the one accent are lifted verbatim from the application's
   own :root (the WS-G workstation skin) so that the site and the product are
   the same object. --ground is the only new value: one step below the app's
   --bg, so the app's surfaces read as recessed here.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* ── grounds + surfaces ───────────────────────────────────── */
  --ground:#08090b;  --surface:#101113;  --panel:#1b1d20;
  --panel-2:#232529; --panel-3:#2b2d31;
  --seam:#0a0b0c;    --line:#2e3134;     --line-strong:#43474c;

  /* ── ink ──────────────────────────────────────────────────── */
  --text-hi:#f2f4f7; --text:#d6d9dd; --text-2:#a6aab1;
  --text-3:#8f949d;  --text-4:#6d7178;          /* ≥24px or decoration ONLY */
  --ink-on-accent:#0c0d0f;

  /* ── signal ───────────────────────────────────────────────── */
  --accent:#c9a961;  --accent-hot:#dcbe78;
  --accent-line:rgba(201,169,97,.34);
  --accent-tint:rgba(201,169,97,.10);
  --accent-glow:rgba(201,169,97,.10);
  --live:#f85149;    --danger:#f85149;          /* LIVE ≤2× per page */
  --amber:#d29922;   --good:#2ea043;

  /* ── type ─────────────────────────────────────────────────── */
  --font-display:'Archivo','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --font-mark:'GenbaMark',"Noto Sans CJK JP","Yu Gothic UI","Meiryo","Hiragino Sans",sans-serif;

  --fs-display:clamp(2.5rem,1.53rem + 4.13vw,5.25rem);   /* 40 → 84 */
  --fs-h1:clamp(2.125rem,1.64rem + 2.07vw,3.5rem);       /* 34 → 56 */
  --fs-h2:clamp(1.75rem,1.49rem + 1.13vw,2.5rem);        /* 28 → 40 */
  --fs-h3:clamp(1.25rem,1.16rem + .38vw,1.5rem);         /* 20 → 24 */
  --fs-h4:1.0625rem;                                     /* 17      */
  --fs-lead:clamp(1.0625rem,.97rem + .38vw,1.3125rem);   /* 17 → 21 */
  --fs-body:1.0625rem;  --fs-sm:.9375rem;  --fs-xs:.8125rem;
  --fs-eyebrow:.6875rem; --fs-mono:.8125rem; --fs-mono-lg:1.0625rem;
  --fs-numeral:clamp(2.5rem,2.15rem + 1.5vw,3.5rem);     /* 40 → 56 */

  --lh-tight:1.06; --lh-head:1.2; --lh-body:1.65;
  --ls-display:-.022em; --ls-head:-.016em; --ls-eyebrow:.18em;

  /* ── space ────────────────────────────────────────────────── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;
  --band-y:clamp(4rem,2.59rem + 6.01vw,8rem);            /* 64 → 128 */
  --band-y-sm:clamp(2.5rem,1.85rem + 2.82vw,4rem);       /* 40 → 64  */

  /* ── layout ───────────────────────────────────────────────── */
  --wrap:1200px; --wrap-wide:1440px; --wrap-text:42rem;
  --gutter:clamp(1rem,4vw,2.5rem);
  --gap:clamp(1rem,2vw,1.5rem); --gap-l:clamp(2rem,4vw,4.5rem);
  --nav-h:64px; --nav-h-sm:56px;

  /* ── form ─────────────────────────────────────────────────── */
  --r-1:2px; --r:3px; --r-2:4px; --r-media:6px;
  --ctl-h:44px; --ctl-h-sm:36px; --ctl-h-xl:56px;

  /* ── depth + motion ───────────────────────────────────────── */
  --shadow-media:0 24px 60px -20px rgba(0,0,0,.85);
  --shadow-nav:0 8px 24px -16px rgba(0,0,0,.9);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:120ms; --dur:200ms;

  /* ── z ────────────────────────────────────────────────────── */
  --z-nav:100; --z-drawer:90; --z-skip:200;
}

/* ═══ 3 · RESET + BASE ═════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* "No horizontal page scroll ever" as a guarantee, not a hope: the hero
   glow's ::before deliberately bleeds past its box (inset -8%), and clip —
   unlike hidden — closes the scroll without creating a scroll container,
   so the sticky nav keeps sticking. */
html,body{overflow-x:clip}
body{
  margin:0; background:var(--ground); color:var(--text);
  font:400 var(--fs-body)/var(--lh-body) var(--font-body);
  font-variant-numeric:tabular-nums; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  margin:0; color:var(--text-hi); font-family:var(--font-display);
  font-weight:700; letter-spacing:var(--ls-head); text-wrap:balance;
}
p{margin:0; max-width:68ch}
ul,ol{margin:0; padding:0}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.18em}
a:hover{color:var(--accent-hot)}
::selection{background:var(--accent); color:var(--ink-on-accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-1)}
summary{cursor:pointer}
summary::-webkit-details-marker{display:none}
summary{list-style:none}

.skip{
  position:absolute; left:-9999px; top:var(--s2); z-index:var(--z-skip);
  height:var(--ctl-h); display:inline-flex; align-items:center;
  padding-inline:var(--s5); background:var(--accent); color:var(--ink-on-accent);
  border-radius:var(--r); font:600 var(--fs-sm)/1 var(--font-display);
  text-decoration:none;
}
.skip:focus-visible{left:var(--s2)}

/* ═══ 4 · UTILITIES ════════════════════════════════════════════════════════ */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--wide{max-width:var(--wrap-wide)}
.wrap--text{max-width:var(--wrap-text)}
.eyebrow{
  font:700 var(--fs-eyebrow)/1.1 var(--font-display);
  font-variation-settings:'wdth' 88; letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--text-3);
}
.lead{font-size:var(--fs-lead); line-height:1.55; color:var(--text-2); max-width:58ch}
.mono{font-family:var(--font-mono); font-size:var(--fs-mono); font-variant-numeric:tabular-nums}
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.tablescroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ═══ 5 · CHROME — nav + footer ════════════════════════════════════════════ */
.nav{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(8,9,11,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--seam);
  box-shadow:var(--shadow-nav);
}
.nav__inner{display:flex; align-items:center; gap:var(--s6); height:var(--nav-h-sm)}

.mark{
  display:inline-flex; align-items:baseline; text-decoration:none;
  color:var(--text-hi); gap:0; flex-shrink:0;
}
.mark:hover{color:var(--text-hi)}
.mark__cjk{font:600 19px/1 var(--font-mark)}
.mark__studio{
  font:600 19px/1 var(--font-display); font-variation-settings:'wdth' 100;
  letter-spacing:.02em; color:var(--text-hi);
}
.mark__gloss{
  display:none; margin-left:var(--s3);
  font:700 10px/1 var(--font-display); font-variation-settings:'wdth' 88;
  letter-spacing:.18em; color:var(--accent); text-transform:uppercase;
}

.nav__links{display:none; align-items:center; gap:var(--s5); margin-inline:auto}
.nav__link{
  font:600 .875rem/1 var(--font-display); color:var(--text-2);
  text-decoration:none; padding-block:21px;
  transition:color var(--dur-fast) var(--ease);
}
.nav__link:hover{color:var(--text-hi)}
.nav__link[aria-current="page"]{color:var(--text-hi); box-shadow:0 2px 0 var(--accent)}
.nav__spacer{margin-inline:auto}
.nav__auth{display:flex; align-items:center; gap:var(--s3); margin-left:auto}
.nav__auth .btn--primary{height:32px; padding-inline:var(--s4); font-size:.8125rem}
/* two classes on purpose: a bare .nav__signin{display:none} ties with
   .btn{display:inline-flex} on specificity and LOSES on file order, so the
   ghost button never hid and pushed the burger off every phone screen
   (W2-C finding #2 — scrollWidth 437 on a 390 viewport, measured live) */
.nav__auth .nav__signin{display:none}

.nav__cb{position:absolute; opacity:0; pointer-events:none}
.nav__burger{
  display:inline-flex; flex-direction:column; justify-content:center;
  gap:5px; width:44px; height:44px; padding:11px; cursor:pointer;
  flex-shrink:0;
}
.nav__burger span{display:block; width:20px; height:2px; background:var(--text-2)}
.nav__drawer{
  max-height:0; overflow:hidden; background:var(--panel);
  transition:max-height var(--dur) var(--ease);
}
.nav__cb:checked ~ .nav__drawer{max-height:26rem; border-top:1px solid var(--seam)}
.nav__drawer a{
  display:flex; align-items:center; height:52px;
  padding-inline:var(--gutter); text-decoration:none;
  font:600 var(--fs-sm)/1 var(--font-display); color:var(--text);
  border-bottom:1px solid var(--seam);
}
.nav__drawer a:hover{color:var(--accent)}

.footer{background:var(--ground); border-top:1px solid var(--seam); padding-block:var(--s8) var(--s6)}
.footer__cols{display:grid; gap:var(--s6)}
.footer__brand p{margin-top:var(--s3); font-size:var(--fs-sm); color:var(--text-2); max-width:22rem}
.footer__head{display:block; margin-bottom:var(--s3)}
.footer__col ul{list-style:none}
.footer__col a{
  display:inline-flex; align-items:center; min-height:32px;
  font-size:var(--fs-sm); color:var(--text-2); text-decoration:none;
}
.footer__col a:hover{color:var(--accent)}
.footer__base{
  margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--seam);
  display:flex; flex-direction:column; gap:var(--s3);
  font-size:var(--fs-xs); color:var(--text-3);
}
.footer__base p{max-width:46rem}
.footer__acc{border:0}
.footer__acc summary{padding-block:var(--s3)}

/* ═══ 6 · PRIMITIVES — buttons, chips, notices, shots, fields ═════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  height:var(--ctl-h); padding-inline:var(--s5);
  border:1px solid transparent; border-radius:var(--r);
  font:600 var(--fs-sm)/1 var(--font-display); letter-spacing:.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.btn--primary{background:var(--accent); color:var(--ink-on-accent); border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hot); border-color:var(--accent-hot); color:var(--ink-on-accent)}
.btn--quiet{background:transparent; color:var(--text); border-color:var(--line-strong)}
.btn--quiet:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-tint)}
.btn--amber{background:transparent; color:var(--amber); border-color:rgba(210,153,34,.55)}
.btn--amber:hover{border-color:var(--amber); background:rgba(210,153,34,.10); color:var(--amber)}
.btn--ghost{background:transparent; color:var(--text-2); border-color:transparent; padding-inline:var(--s3)}
.btn--ghost:hover{color:var(--text-hi)}
.btn--sm{height:var(--ctl-h-sm); padding-inline:var(--s4); font-size:var(--fs-xs)}

.btn--download{
  height:var(--ctl-h-xl); width:100%; max-width:26rem; padding-inline:var(--s6);
  font-size:var(--fs-h4);
  background:var(--accent); color:var(--ink-on-accent); border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--download:hover{background:var(--accent-hot); border-color:var(--accent-hot)}
.btn--download:active{background:var(--accent); box-shadow:inset 0 1px 3px rgba(0,0,0,.30); transform:translateY(1px)}
.btn--download svg{width:20px; height:20px}
.btn--download.btn--amber,
.btn--download.btn--locked{background:transparent; box-shadow:none}
.btn--download.btn--amber{color:var(--amber)}
.btn--download.btn--locked{color:var(--text); border-color:var(--line-strong)}
.btn--download.btn--locked:hover{border-color:var(--accent); color:var(--accent)}

.chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:3px 10px; border-radius:var(--r-1);
  font:600 var(--fs-eyebrow)/1.4 var(--font-display);
  font-variation-settings:'wdth' 88;
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--text-2);
}
.chip--amber{border-color:rgba(210,153,34,.55); color:var(--amber)}
.chip--good{border-color:rgba(46,160,67,.55); color:var(--good)}
.chip--accent{border-color:var(--accent-line); color:var(--accent); background:var(--accent-tint)}
.chip .mono{font-size:inherit; letter-spacing:.06em}

.dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--line-strong)}
.dot--live{background:var(--live)}

.notice{
  border-left:2px solid var(--text-3); background:var(--surface);
  padding:var(--s4) var(--s5); border-radius:0 var(--r) var(--r) 0;
  font-size:var(--fs-sm); color:var(--text);
}
.notice b,.notice strong{color:var(--text-hi)}
.notice--amber{border-left-color:var(--amber)}
.notice--amber b,.notice--amber strong{color:var(--amber)}
.notice--good{border-left-color:var(--good)}
.notice--good b,.notice--good strong{color:var(--good)}
.notice--danger{border-left-color:var(--danger)}
.notice--danger b,.notice--danger strong{color:var(--danger)}

.shot{
  border:1px solid var(--line); border-radius:var(--r-media);
  padding:4px; background:var(--seam); overflow:hidden;
  box-shadow:var(--shadow-media);
}
.shot img{border-radius:3px; width:100%; height:auto}
.shot--hero{box-shadow:inset 0 1px 0 var(--accent-line), var(--shadow-media)}
.shot__cap{
  margin-top:var(--s3); font-size:var(--fs-xs); color:var(--text-3);
  max-width:46ch; display:flex; align-items:center; gap:var(--s2);
  flex-wrap:wrap;
}
.shot__cap .eyebrow{color:var(--text-3)}

.field{margin-bottom:var(--s4)}
.field label{
  display:block; margin-bottom:6px;
  font:600 var(--fs-eyebrow)/1.2 var(--font-display);
  font-variation-settings:'wdth' 88;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text-3);
}
.field input[type=text],.field input[type=password],.field textarea{
  width:100%; min-height:var(--ctl-h); padding:10px 12px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r);
  font:400 1rem/1.4 var(--font-body);
}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent)}
.field .hint{margin-top:6px; font-size:var(--fs-xs); color:var(--text-3)}

/* ═══ 7 · LANDING ══════════════════════════════════════════════════════════ */
.hero{
  position:relative; padding-block:var(--band-y) var(--s8);
  background:var(--ground); border-bottom:1px solid var(--seam);
}
.hero__inner{display:flex; flex-direction:column; align-items:center; text-align:center}
.hero__eyebrow{margin-bottom:var(--s5)}
.hero__h1{
  max-width:18ch; font-size:var(--fs-display);
  font-variation-settings:'wdth' 112;
  line-height:var(--lh-tight); letter-spacing:var(--ls-display);
  margin-bottom:var(--s5);
}
.hero__lead{margin-bottom:var(--s6); margin-inline:auto}
.hero__cta{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3)}
.hero__note{
  margin-top:var(--s4); max-width:48ch;
  font-size:var(--fs-xs); font-style:italic; color:var(--text-3);
}
.hero__media{position:relative; width:100%; margin-top:var(--s8)}
.hero__media::before{
  content:''; position:absolute; inset:-14% -8% 40%;
  background:radial-gradient(58% 62% at 50% 0%, var(--accent-glow), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero__media > .shot{position:relative; z-index:1}
.hero__media > .shot__cap{position:relative; z-index:1; justify-content:center; margin-inline:auto}

.strip--trust{
  padding-block:var(--s5); border-bottom:1px solid var(--seam);
  background:var(--ground);
}
.strip--trust p{
  margin-inline:auto; max-width:none; text-align:center;
  font-size:var(--fs-sm); color:var(--text-2);
}
.strip--trust .sep{color:var(--text-4); padding-inline:var(--s2)}

.alphabar{background:var(--surface); padding-block:var(--s7)}
.alphabar__inner{
  border-left:2px solid var(--amber); padding-left:var(--s5);
  display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start;
}
.alphabar__label{color:var(--amber)}
.alphabar__h3{font-size:var(--fs-h3); font-weight:600}
.alphabar__body{font-size:var(--fs-sm); color:var(--text-2); max-width:62ch}

.band{padding-block:var(--band-y); background:var(--ground)}
.band--alt{background:var(--surface)}
.band__grid{display:grid; gap:var(--gap-l)}
.band__text{display:flex; flex-direction:column; align-items:flex-start; max-width:34rem}
.band__eyebrow{margin-bottom:var(--s4); color:var(--accent)}
.band__h2{
  font-size:var(--fs-h2); font-weight:650;
  font-variation-settings:'wdth' 104;
  line-height:1.12; margin-bottom:var(--s4);
}
.band__body{font-size:var(--fs-lead); line-height:1.55; color:var(--text-2)}
.band__media{min-width:0}

.also{padding-block:var(--band-y-sm) var(--band-y); background:var(--ground)}
.also__h2{margin-bottom:var(--s6)}
.also__grid{display:grid; gap:var(--s6)}
.also__item{display:grid; grid-template-columns:20px 1fr; gap:var(--s3); align-items:start}
.also__item svg{width:20px; height:20px; color:var(--accent); margin-top:2px}
.also__term{font:600 var(--fs-h4)/1.35 var(--font-display); color:var(--text-hi)}
.also__text{font-size:var(--fs-sm); color:var(--text-2); margin-top:2px}

.how{padding-block:var(--band-y); background:var(--ground); border-top:1px solid var(--seam)}
.how__h2{margin-bottom:var(--s7)}
.how__steps{display:grid; gap:var(--s6)}
.how__step{padding-inline:0}
.how__num{
  font:700 var(--fs-numeral)/1 var(--font-display);
  font-variation-settings:'wdth' 96;
  letter-spacing:-.02em; color:var(--text-4);
}
.how__title{font-size:var(--fs-h3); font-weight:600; margin-top:var(--s3)}
.how__body{font-size:var(--fs-sm); color:var(--text-2); margin-top:var(--s3)}
.how__footnote{margin-top:var(--s7); font-size:var(--fs-xs); font-style:italic; color:var(--text-3)}

.compat{padding-block:var(--band-y-sm); background:var(--surface); border-block:1px solid var(--seam)}
.compat__h2{text-align:center; font-size:var(--fs-h3); font-weight:600; margin-bottom:var(--s5)}
.compat__chips{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2)}
.compat__chip{
  font-family:var(--font-mono); font-size:var(--fs-mono); color:var(--text-2);
  border:1px solid var(--line); border-radius:var(--r-1);
  padding:6px 12px; background:var(--panel);
}

.spec{padding-block:var(--band-y); background:var(--surface)}
.spec__h2{margin-bottom:var(--s6)}
.spec__table{width:100%; border-collapse:collapse; max-width:56rem}
.spec__table th{
  text-align:left; vertical-align:top; width:34%;
  font:600 var(--fs-sm)/1.5 var(--font-display); color:var(--text-2);
  padding:var(--s4) var(--s4) var(--s4) 0;
  border-bottom:1px solid var(--seam);
}
.spec__table td{
  font-size:var(--fs-sm); color:var(--text);
  padding:var(--s4) 0; border-bottom:1px solid var(--seam);
}
.spec__note{margin-top:var(--s5); font-size:var(--fs-sm); color:var(--text-3); font-style:italic}

.cta-final{
  padding-block:var(--band-y); background:var(--ground);
  border-top:1px solid var(--accent-line); text-align:center;
}
.cta-final__h2{font-size:var(--fs-h1); margin-bottom:var(--s4)}
.cta-final__body{margin-inline:auto; max-width:52ch; margin-bottom:var(--s6)}
.cta-final__row{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3)}
.cta-final__note{margin-top:var(--s4); font-size:var(--fs-xs); font-style:italic; color:var(--text-3)}

/* ═══ 8 · FEATURES ═════════════════════════════════════════════════════════ */
.pagehead{padding-block:var(--band-y-sm); background:var(--ground); border-bottom:1px solid var(--seam)}
.pagehead__eyebrow{display:block; margin-bottom:var(--s4); color:var(--accent)}
.pagehead__h1{font-size:var(--fs-h1); margin-bottom:var(--s4)}

.subnav{
  position:sticky; top:var(--nav-h-sm); z-index:var(--z-drawer);
  background:var(--surface); border-block:1px solid var(--seam);
}
.subnav__scroll{display:flex; gap:var(--s6); overflow-x:auto; -webkit-overflow-scrolling:touch}
.subnav__scroll a{
  flex-shrink:0; display:inline-flex; align-items:center; height:48px;
  font:700 var(--fs-eyebrow)/1 var(--font-display);
  font-variation-settings:'wdth' 88;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--text-3); text-decoration:none;
}
.subnav__scroll a:hover{color:var(--accent)}

.fgroup{padding-block:var(--band-y-sm) var(--band-y); scroll-margin-top:116px; background:var(--ground)}
.fgroup--alt{background:var(--surface)}
.fgroup__head{margin-bottom:var(--s6)}
.fgroup__rule{display:block; width:32px; height:2px; background:var(--accent); margin-bottom:var(--s4)}
.fgroup__h2{font-size:var(--fs-h2); font-weight:650; font-variation-settings:'wdth' 104}
.fgroup__shot{margin-bottom:var(--s6)}
.fgrid{display:grid; gap:var(--gap); grid-auto-rows:1fr}
.fcard{
  background:var(--panel); border:1px solid var(--seam);
  border-radius:var(--r); padding:var(--s5);
  transition:border-color var(--dur-fast) var(--ease);
}
.fcard:hover{border-color:var(--line)}
.fcard svg{width:20px; height:20px; color:var(--accent); margin-bottom:var(--s4)}
.fcard__title{font-size:var(--fs-h4); font-weight:600; color:var(--text-hi)}
.fcard__body{font-size:var(--fs-sm); color:var(--text-2); margin-top:var(--s2)}

.secondary{padding-block:var(--band-y-sm); background:var(--ground)}
.secondary__grid{display:grid; gap:var(--s6)}
.secondary__cell{border-top:1px solid var(--seam); padding-top:var(--s5)}
.secondary__title{font-size:var(--fs-h4); font-weight:600; color:var(--text-hi)}
.secondary__body{font-size:var(--fs-sm); color:var(--text-2); margin-top:var(--s2)}

.closing{padding-block:var(--band-y); background:var(--ground); border-top:1px solid var(--seam)}
.closing__h2{font-size:var(--fs-h2); margin-bottom:var(--s4)}
.closing__body{margin-bottom:var(--s6)}
.closing__disclaimer{margin-top:var(--s5); font-size:var(--fs-xs); font-style:italic; color:var(--text-3)}

/* ═══ 9 · PRICING ══════════════════════════════════════════════════════════ */
.pricing-banner{padding-block:var(--s6) 0; background:var(--ground)}
.pricing-banner .notice{max-width:60rem}

.tiers-band{padding-block:var(--s7) var(--band-y); background:var(--ground)}
.tiers{display:grid; gap:var(--gap); align-items:start}
.tier{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--seam);
  border-radius:var(--r); overflow:hidden;
}
.tier--featured{border-top:2px solid var(--accent)}
.tier--featured .tier__head{background:var(--panel-2)}
.tier__head{padding:var(--s5); border-bottom:1px solid var(--seam)}
.tier__flag{display:block; color:var(--accent); margin-bottom:var(--s2)}
.tier__name{font-size:var(--fs-h3); font-weight:600; color:var(--text-hi)}
.tier__line{margin-top:var(--s2); font-size:var(--fs-xs); color:var(--text-3)}
.tier__price{
  display:flex; flex-direction:column; justify-content:center;
  min-height:84px; padding:var(--s5); border-bottom:1px solid var(--seam);
}
.tier__price-value{
  font:700 var(--fs-h2)/1 var(--font-display);
  font-variant-numeric:tabular-nums; color:var(--text-hi);
}
.tier__price--tba{font:600 var(--fs-h4)/1.3 var(--font-display); color:var(--text-3)}
.tier__cadence{margin-top:var(--s2); font-size:var(--fs-xs); color:var(--text-3)}
.tier__list{
  list-style:none; margin:0; padding:var(--s5);
  display:grid; gap:var(--s3); flex:1 1 auto;
}
.tier__list li{
  display:grid; grid-template-columns:16px 1fr; gap:var(--s3);
  align-items:start; font-size:var(--fs-sm); color:var(--text);
}
.tier__list svg{width:16px; height:16px; color:var(--accent); margin-top:3px}
.tier__foot{padding:var(--s5); border-top:1px solid var(--seam)}
.tier__note{margin-bottom:var(--s4); font-size:var(--fs-xs); color:var(--text-3)}
.tier__cta{width:100%}

.request{padding-block:var(--band-y-sm); background:var(--surface); scroll-margin-top:96px}
.request__inner{border-left:2px solid var(--amber); padding-left:var(--s5)}
.request__h2{font-size:var(--fs-h2); margin-bottom:var(--s4)}
.request__body{color:var(--text-2); margin-bottom:var(--s6); max-width:62ch}
.request__form{max-width:34rem}

.faq{padding-block:var(--band-y-sm) var(--band-y); background:var(--ground)}
.faq__h2{margin-bottom:var(--s6)}
.faq__item{border-bottom:1px solid var(--seam); max-width:52rem}
.faq__item summary{
  position:relative; min-height:56px; display:flex; align-items:center;
  padding-block:var(--s4); padding-right:var(--s7);
  font:600 var(--fs-h4)/1.4 var(--font-display); color:var(--text-hi);
}
.faq__item summary::before,
.faq__item summary::after{
  content:''; position:absolute; right:var(--s3); top:50%;
  width:12px; height:2px; background:var(--text-3);
  transition:transform var(--dur) var(--ease);
}
.faq__item summary::after{transform:rotate(90deg)}
.faq__item[open] summary::after{transform:scaleY(0)}
.faq__a{padding-bottom:var(--s5); font-size:var(--fs-sm); color:var(--text-2); max-width:64ch}

/* ═══ 10 · DOWNLOAD ════════════════════════════════════════════════════════ */
.dl{padding-block:var(--s7) var(--band-y-sm); background:var(--surface)}
.dl__wrap{max-width:60rem}
.dl__sell{margin-bottom:var(--s6); max-width:56ch; color:var(--text-2)}
.dl__gate{margin-bottom:var(--s5); max-width:44rem}
.dl__card{
  background:var(--panel); border:1px solid var(--seam); border-radius:var(--r-2);
  box-shadow:inset 0 1px 0 var(--accent-line);
  padding:var(--s6);
}
.dl__eyebrow{display:block; color:var(--accent); margin-bottom:var(--s3)}
.dl__version{
  font:700 var(--fs-h1)/1.05 var(--font-display);
  font-variation-settings:'wdth' 108;
  letter-spacing:var(--ls-head); color:var(--text-hi);
}
.dl__meta{margin-top:var(--s3); color:var(--text-2)}
.dl__action{margin-block:var(--s6)}
.dl__under{margin-top:var(--s3); font-size:var(--fs-xs); color:var(--text-3)}
.dl__hash summary{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--font-mono); font-size:var(--fs-mono); color:var(--text-3);
}
.dl__hash summary:hover{color:var(--text)}
.dl__hash-full{
  margin-top:var(--s3); padding:var(--s3) var(--s4);
  background:var(--surface); border:1px solid var(--seam); border-radius:var(--r);
  font-family:var(--font-mono); font-size:var(--fs-mono); color:var(--text-2);
  word-break:break-all; user-select:all;
}
.dl__linux{margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--seam);
  font-size:var(--fs-sm); color:var(--text-2)}

.next{padding-block:var(--band-y-sm); background:var(--ground)}
.next__h2{font-size:var(--fs-h2); margin-bottom:var(--s5)}
.next__body{color:var(--text-2); max-width:62ch}

.sysreq{padding-block:var(--band-y-sm); background:var(--ground); border-top:1px solid var(--seam)}
.sysreq__h2{font-size:var(--fs-h2); margin-bottom:var(--s6)}
.sysreq__table{width:100%; border-collapse:collapse; max-width:56rem}
.sysreq__table th{
  text-align:left; vertical-align:top; width:28%;
  font:600 var(--fs-sm)/1.5 var(--font-display); color:var(--text-2);
  padding:var(--s4) var(--s4) var(--s4) 0; border-bottom:1px solid var(--seam);
}
.sysreq__table td{
  font-size:var(--fs-sm); color:var(--text);
  padding:var(--s4) 0; border-bottom:1px solid var(--seam);
}
.sysreq__note{margin-top:var(--s5); font-size:var(--fs-sm); font-style:italic; color:var(--text-3)}

/* ═══ 11 · AUTH + PROSE ════════════════════════════════════════════════════ */
.prose{padding-block:var(--band-y-sm) var(--band-y); background:var(--ground)}
.prose h2{font-size:var(--fs-h3); margin-block:var(--s6) var(--s3)}
.prose p{margin-bottom:var(--s4); color:var(--text-2)}

/* ═══ 12 · RESPONSIVE ══════════════════════════════════════════════════════ */
@media (min-width:480px){
  .mark__gloss{display:inline}
}
@media (min-width:768px){
  .nav__inner{height:var(--nav-h)}
  .nav__links{display:flex}
  .nav__burger{display:none}
  .nav__drawer{display:none}
  .nav__auth .nav__signin{display:inline-flex}
  .nav__auth .btn--primary{height:36px}
  .footer__cols{grid-template-columns:2fr 1fr 1fr 1fr}
  .footer__base{flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--s5)}
  .footer__acc{display:block}
  .footer__acc summary{pointer-events:none; padding-block:0}
  .footer__acc summary::marker{content:''}
  .also__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how__steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .secondary__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .subnav{top:var(--nav-h)}
}
@media (min-width:1024px){
  .band__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); align-items:center}
  .band--reverse .band__media{order:-1}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .also__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .how__step{padding-inline:var(--s6)}
  .how__step:first-child{padding-left:0}
  .how__step + .how__step{border-left:1px solid var(--seam)}
}
@media (max-width:1023px){
  .band__media{order:-1}
}
@media (min-width:768px) and (max-width:1023px){
  .tiers{max-width:34rem; margin-inline:auto}
}
@media (min-width:1280px){
  .hero__media{max-width:var(--wrap-wide); margin-inline:auto}
}
@media (max-width:479px){
  .hero__cta .btn{width:100%}
  .hero{padding-block:var(--s8) var(--s7)}
  .cta-final__row .btn{width:100%}
}

/* ═══ 13 · PREFERENCES ═════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}
@media (prefers-contrast:more){
  :root{--line:#43474c; --text-2:#d6d9dd}
}
@media print{
  .nav,.footer,.hero__media,.cta-final{display:none}
  body{background:#fff; color:#000}
}