/* Self-hosted Geist + Geist Mono — offline-safe (no CDN inside the frozen app),
   FOUT-free on the landing. Paths are relative to this CSS file (gui/ or landing/). */
@font-face{font-family:"Geist";src:url("fonts/Geist-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/Geist-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/Geist-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/Geist-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist Mono";src:url("fonts/GeistMono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}

/* ============================================================
   TERMINAL REFINED — shared tokens (app GUI + marketing)
   :root = DARK (terminal-native, app default)
   [data-theme="light"] = light terminal (marketing landing)
   ============================================================ */
:root {
  /* ---- PRIMITIVE: NEUTRAL RAMP (cool near-black greys, hue ~200, low chroma) ---- */
  --neutral-950: oklch(0.180 0.006 200); /* #0a0c0d  page (dark)        */
  --neutral-900: oklch(0.215 0.006 200); /* #101314  surface-1          */
  --neutral-850: oklch(0.248 0.007 200); /* #161a1b  surface-2 / inset  */
  --neutral-800: oklch(0.285 0.008 200); /* #1c2122  surface-3 / hover   */
  --neutral-750: oklch(0.330 0.008 200); /* #242a2b  hairline            */
  --neutral-700: oklch(0.390 0.009 200); /* #313839  hairline-strong     */
  --neutral-600: oklch(0.500 0.010 200); /* #4a5452                      */
  --neutral-500: oklch(0.560 0.010 200); /* #5a635f  text-subtle         */
  --neutral-400: oklch(0.660 0.010 200); /* #7e8a87  text-muted          */
  --neutral-300: oklch(0.780 0.008 200); /* #aab4b1                      */
  --neutral-200: oklch(0.870 0.006 200); /* #cdd5d2  text-secondary(dk)  */
  --neutral-100: oklch(0.935 0.005 200); /* #e8edec  primary ink (dark)  */
  --neutral-50:  oklch(0.975 0.004 200); /* #f4f7f6                      */

  /* ---- PRIMITIVE: ACCENT RAMP (phosphor green, hue ~158, refined not neon) ----
     Rebrand to amber by shifting H -> ~75 and keeping L/C (contrast holds). */
  --accent-50:  oklch(0.965 0.030 158); /* #e9f9f0 */
  --accent-100: oklch(0.920 0.070 158); /* #c8f0da */
  --accent-200: oklch(0.860 0.110 158); /* #97e3bb */
  --accent-300: oklch(0.790 0.140 158); /* #5fd198 */
  --accent-400: oklch(0.745 0.150 158); /* #34c07d  accent on DARK / ring */
  --accent-500: oklch(0.690 0.150 159); /* #1fae6e  primary brand        */
  --accent-600: oklch(0.620 0.140 160); /* #18935c  hover                */
  --accent-700: oklch(0.530 0.120 161); /* #13784b  accent TEXT on light (AA ~4.8:1) */
  --accent-800: oklch(0.450 0.100 162); /* #105f3d */
  --accent-900: oklch(0.380 0.082 163); /* #0d4a30 */

  /* ---- PRIMITIVE: FUNCTIONAL (status only — never decoration) ----
     Phosphor green doubles as the "OK / activated / live" signal (terminal-true).
     Red + amber are the only other hues; strictly semantic. */
  --danger-400:  oklch(0.700 0.170 27);  /* #f08a82  danger on dark */
  --danger-500:  oklch(0.600 0.190 27);  /* #d24a40  invalid key/error */
  --danger-700:  oklch(0.500 0.155 27);  /* #a33327  danger text on light, AA */
  --warning-400: oklch(0.800 0.130 75);  /* #e3a52d  typo-rate caution, dark */
  --warning-700: oklch(0.560 0.110 64);  /* #8c5f10  caution text on light */
  --success-500: var(--accent-500);      /* OK = the phosphor green */

  /* ====== SEMANTIC: DARK (default — the app GUI) ====== */
  --bg:            var(--neutral-950);
  --surface-1:     var(--neutral-900);  /* panels, cards          */
  --surface-2:     var(--neutral-850);  /* inputs, textarea well  */
  --surface-3:     var(--neutral-800);  /* hover row, overlay chrome */
  --border:        var(--neutral-750);  /* the 1px workhorse      */
  --border-strong: var(--neutral-700);  /* emphasis / slider thumb */
  --text:          var(--neutral-100);  /* off-white, NOT #fff    */
  --text-secondary:var(--neutral-200);
  --text-muted:    var(--neutral-400);  /* labels, captions (AA on surfaces) */
  --text-subtle:   var(--neutral-500);  /* disabled, footnotes    */
  --accent:        var(--accent-400);   /* lifted L for vividness on dark */
  --accent-hover:  var(--accent-300);
  --accent-press:  var(--accent-500);
  --accent-text:   var(--accent-400);   /* accent used as text/link on dark */
  --accent-soft:   color-mix(in oklab, var(--accent-400) 14%, transparent); /* selected row wash */
  --on-accent:     var(--neutral-950);  /* DARK ink on green CTA (terminal inverse) */
  --ring:          var(--accent-400);
  /* dark uses NO drop shadow — depth = surface ladder + hairline */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-overlay: none;
  --caret: var(--accent-400);

  /* ====== TYPE ====== */
  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --text-display: clamp(2.75rem, 1.6rem + 5vw, 4.5rem); /* 44->72 hero */
  --text-h1:   clamp(2rem, 1.5rem + 2.2vw, 2.75rem);     /* 32->44 */
  --text-h2:   clamp(1.5rem, 1.2rem + 1.3vw, 2rem);      /* 24->32 section */
  --text-h3:   1.25rem;     /* 20 panel/card title */
  --text-lg:   1.0625rem;   /* 17 hero subcopy */
  --text-base: 1rem;        /* 16 UI base / body min */
  --text-sm:   0.875rem;    /* 14 helper */
  --text-eyebrow: 0.75rem;  /* 12 uppercase mono label */
  --text-count: clamp(5rem, 3rem + 9vw, 9rem); /* 80->144 overlay digit */

  --lh-display: 1.03; --lh-heading: 1.12; --lh-body: 1.6; --lh-ui: 1.35;
  --ls-display: -0.03em; --ls-heading: -0.02em; --ls-body: -0.006em;
  --ls-eyebrow: 0.10em;  /* UPPERCASE mono eyebrows + keycaps */
  --ls-key: 0.04em;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --num: tabular-nums lining-nums; /* every counter/stat/timer/key */

  /* ====== SPACING (4px grid) ====== */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;
  --section-y: clamp(64px, 8vw, 128px);
  --container: 1120px; --measure: 66ch;

  /* ====== RADII (restrained, consistent) ====== */
  --r-xs:4px; --r-input:8px; --r-button:8px; --r-card:12px;
  --r-panel:12px; --r-media:16px; --r-overlay:16px; --r-pill:9999px;
  --bw-thin:1px; --bw-thick:2px;

  /* ====== MOTION (transform/opacity only; interaction-only) ====== */
  --t-press:120ms; --t-hover:160ms; --t-panel:200ms; --t-overlay:400ms;
  --ease:      cubic-bezier(0.2,0,0,1);   /* general / arriving */
  --ease-out:  cubic-bezier(0,0,0.2,1);
  --ease-snap: cubic-bezier(0.2,0.8,0.2,1); /* confident Start / toggle */
}

/* ====== SEMANTIC: LIGHT (marketing landing = "light terminal") ====== */
[data-theme="light"] {
  --bg:            #f4f6f5;  /* cool off-white, not pure #fff */
  --surface-1:     #ffffff;  /* cards/panels */
  --surface-2:     #eef1f0;  /* inputs / textarea well */
  --surface-3:     #e7ebeA;  /* hover */
  --border:        #e0e5e3;  /* 1px hairline */
  --border-strong: #c6cdca;
  --text:          #121716;  /* near-black ink, not pure #000 */
  --text-secondary:#2e3633;
  --text-muted:    #586460;  /* AA body-secondary */
  --text-subtle:   #828e8a;  /* large/labels only */
  --accent:        var(--accent-500);
  --accent-hover:  var(--accent-600);
  --accent-press:  var(--accent-700);
  --accent-text:   var(--accent-700); /* accent as TEXT/link, AA on light */
  --accent-soft:   var(--accent-50);
  --on-accent:     #06170f;  /* dark ink on green CTA, AA-safe */
  --ring:          var(--accent-600);
  --caret:         var(--accent-600);
  /* light DOES get soft NEUTRAL cool shadows (no glow, no accent tint) */
  --shadow-color: 16 22 20;
  --shadow-1: 0 1px 2px rgb(var(--shadow-color)/0.06), 0 0 0 1px rgb(var(--shadow-color)/0.04) inset;
  --shadow-2: 0 2px 4px rgb(var(--shadow-color)/0.05), 0 8px 24px -8px rgb(var(--shadow-color)/0.12);
  --shadow-overlay: 0 8px 16px rgb(var(--shadow-color)/0.08), 0 24px 40px -8px rgb(var(--shadow-color)/0.14);
}

/* hairline fallback for engines without oklch */
@supports not (color: oklch(0 0 0)) {
  :root { --bg:#0a0c0d; --surface-1:#101314; --surface-2:#161a1b; --surface-3:#1c2122;
    --border:#242a2b; --border-strong:#313839; --text:#e8edec; --text-muted:#7e8a87;
    --accent:#34c07d; --accent-hover:#5fd198; --on-accent:#0a0c0d; --ring:#34c07d; }
}

/* universal visible focus (a11y, both themes) */
:where(a,button,input,textarea,select,[role="switch"],[role="slider"]):focus-visible{
  outline: var(--bw-thick) solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-input);
}

/* GPU-light motion gate — REQUIRED */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* ============================================================
   BASE
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:var(--text-base);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent-soft); color:var(--text); }

/* tabular numerics for any live/static number */
.num{ font-family:var(--font-mono); font-variant-numeric:var(--num); }

/* keycap chip — physical key feel */
kbd{
  font-family:var(--font-mono);
  font-size:0.82em;
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-key);
  color:var(--text-secondary);
  background:var(--surface-2);
  border:var(--bw-thin) solid var(--border);
  border-bottom:var(--bw-thick) solid var(--border-strong);
  border-radius:var(--r-xs);
  padding:2px 6px;
  line-height:1;
  font-feature-settings:'liga' 0,'calt' 0;
}

/* mono eyebrow — "▸ SECTION" */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--text-eyebrow);
  font-weight:var(--fw-medium);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--text-muted);
  margin-bottom:var(--s-4);
}
.tic{ color:var(--accent-text); }

/* live-status dot — the one pill, static (no pulse) */
.dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:var(--r-pill);
  background:var(--accent);
  flex:0 0 auto;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  font-family:var(--font-display);
  font-weight:var(--fw-semibold);
  font-size:var(--text-base);
  line-height:1;
  border:var(--bw-thin) solid transparent;
  border-radius:var(--r-button);
  padding:12px 18px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--t-press) var(--ease-snap),
             background-color var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),
             color var(--t-hover) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:14px 22px; font-size:var(--text-lg); }

.btn-primary{
  background:var(--accent);
  color:var(--on-accent);
  font-weight:var(--fw-bold);
  box-shadow:var(--shadow-1);
}
.btn-primary:hover{ background:var(--accent-hover); }
/* leading mono caret tic on the big primary CTAs */
.btn-lg.btn-primary::before{
  content:"▸";
  font-family:var(--font-mono);
  font-weight:var(--fw-medium);
  margin-right:2px;
}

.btn-ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--text-secondary);
}
.btn-ghost:hover{ background:var(--surface-3); border-color:var(--border-strong); }

.btn[disabled],.btn:disabled{
  background:var(--surface-3);
  color:var(--text-subtle);
  cursor:not-allowed;
  transform:none;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:var(--bw-thin) solid var(--border);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--container);
  margin:0 auto;
  padding:var(--s-4) var(--s-6);
}
.brand{
  display:inline-flex;
  align-items:baseline;
  gap:var(--s-2);
  font-family:var(--font-mono);
  font-weight:var(--fw-medium);
  font-size:1.0625rem;
  letter-spacing:var(--ls-key);
  color:var(--text);
}
.brand .tic{ font-size:0.95em; }
.nav-links{
  display:flex;
  align-items:center;
  gap:var(--s-6);
  font-size:var(--text-sm);
  color:var(--text-muted);
}
.nav-links a:not(.btn){ transition:color var(--t-hover) var(--ease); }
.nav-links a:not(.btn):hover{ color:var(--text); }
.nav-cta{ padding:9px 16px; }

/* ============================================================
   LAYOUT — sections
   ============================================================ */
.section{
  max-width:var(--container);
  margin:0 auto;
  padding:var(--section-y) var(--s-6);
}
.section-head{ max-width:var(--measure); margin-bottom:var(--s-10); }
.section-title{
  font-family:var(--font-display);
  font-size:var(--text-h2);
  font-weight:var(--fw-semibold);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
}
.section-sub{
  margin-top:var(--s-4);
  max-width:var(--measure);
  color:var(--text-muted);
  font-size:var(--text-lg);
}
.section-sub strong{ color:var(--text); font-weight:var(--fw-medium); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  max-width:var(--container);
  margin:0 auto;
  padding:clamp(56px,9vw,112px) var(--s-6) var(--s-12);
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  letter-spacing:var(--ls-key);
  color:var(--text-muted);
  margin-bottom:var(--s-6);
}
.hero-eyebrow .prompt{ color:var(--text-secondary); }
.hero-caret{
  color:var(--caret);
  font-weight:var(--fw-medium);
  margin-left:-2px;
}
.hero-eyebrow .sep{ color:var(--border-strong); }
.hero-eyebrow .label{
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  font-size:var(--text-eyebrow);
  color:var(--text-muted);
}
.hero-title{
  font-family:var(--font-display);
  font-size:var(--text-display);
  font-weight:var(--fw-bold);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  max-width:18ch;
}
.hero-sub{
  max-width:var(--measure);
  margin-top:var(--s-6);
  font-size:var(--text-lg);
  color:var(--text-muted);
}
.hero-sub strong{ color:var(--text); font-weight:var(--fw-medium); }
.hero-cta{
  display:flex;
  gap:var(--s-3);
  flex-wrap:wrap;
  margin-top:var(--s-8);
}
.hero-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s-2);
  margin-top:var(--s-8);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--text-muted);
}
.hero-meta .sep{ color:var(--border-strong); }
.hero-meta .num{ color:var(--text-secondary); }

/* ============================================================
   APP-WINDOW MOCKUP (hero) — live typing demo
   ============================================================ */
.mock{
  max-width:760px;
  margin:var(--s-16) auto 0;
  background:var(--surface-1);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-panel);
  overflow:hidden;
}
.mock-bar{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  background:var(--surface-2);
  border-bottom:var(--bw-thin) solid var(--border);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
}
.mock-brand{
  display:inline-flex;
  align-items:baseline;
  gap:var(--s-2);
  letter-spacing:var(--ls-key);
  color:var(--text-secondary);
  margin-right:auto;
}
.mock-status{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  color:var(--text-muted);
  font-size:var(--text-eyebrow);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
}
.mock-winctl{
  color:var(--text-subtle);
  letter-spacing:0.18em;
}
.mock-body{ padding:var(--s-6); }
.mock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--s-3);
}
.mock-head .path{
  font-family:var(--font-mono);
  font-size:var(--text-eyebrow);
  color:var(--text-subtle);
  letter-spacing:var(--ls-key);
}
.mock-type{
  min-height:3.6rem;
  font-family:var(--font-mono);
  font-size:var(--text-base);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--surface-2);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-input);
  padding:var(--s-4);
}
/* steady (non-blinking) accent caret — no looping animation */
.caret{
  color:var(--caret);
  font-weight:var(--fw-medium);
}
.mock-controls{
  display:flex;
  gap:var(--s-2);
  flex-wrap:wrap;
  margin-top:var(--s-5);
}
.chip{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-key);
  color:var(--text-muted);
  background:var(--surface-2);
  border:var(--bw-thin) solid var(--border);
  border-bottom:var(--bw-thick) solid var(--border-strong);
  border-radius:var(--r-xs);
  padding:4px 10px;
  font-variant-numeric:var(--num);
}
.chip.danger{ color:var(--danger-400); border-color:var(--danger-500); }

/* ============================================================
   FEATURES GRID
   ============================================================ */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-4);
}
.card{
  background:var(--surface-1);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-card);
  padding:var(--s-6);
  transition:border-color var(--t-hover) var(--ease),
             transform var(--t-hover) var(--ease);
}
.card:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.card-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  background:var(--surface-2);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-input);
  color:var(--text-secondary);
  margin-bottom:var(--s-4);
}
.card-ico svg{ width:20px; height:20px; }
.card h3{
  font-family:var(--font-display);
  font-size:var(--text-h3);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
  margin-bottom:var(--s-2);
}
.card p{ color:var(--text-muted); font-size:var(--text-base); }
.card kbd{ margin:0 1px; }

/* ============================================================
   STEPS
   ============================================================ */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s-4);
}
.step{
  background:var(--surface-1);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-card);
  padding:var(--s-6);
}
.step-n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  font-family:var(--font-mono);
  font-weight:var(--fw-medium);
  font-variant-numeric:var(--num);
  color:var(--accent-text);
  background:var(--surface-2);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-input);
  margin-bottom:var(--s-4);
}
.step h3{
  font-family:var(--font-display);
  font-size:var(--text-h3);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
  margin-bottom:var(--s-2);
}
.step p{ color:var(--text-muted); font-size:var(--text-base); }

/* ============================================================
   PRICING
   ============================================================ */
.price-card{
  max-width:480px;
  margin-top:var(--s-10);
  background:var(--surface-1);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-card);
  padding:var(--s-8);
}
.price-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  font-family:var(--font-mono);
  font-size:var(--text-eyebrow);
  font-weight:var(--fw-medium);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--text-secondary);
  background:var(--surface-2);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-pill);
  padding:6px 12px;
}
.price-badge::before{
  content:"";
  width:8px; height:8px;
  border-radius:var(--r-pill);
  background:var(--accent);
}
.price-amount{
  font-family:var(--font-mono);
  font-variant-numeric:var(--num);
  font-size:clamp(2.5rem,1.8rem+3vw,3.25rem);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
  margin-top:var(--s-5);
}
.price-once{
  font-family:var(--font-body);
  font-size:var(--text-lg);
  font-weight:var(--fw-medium);
  color:var(--text-muted);
}
.price-compare{ color:var(--text-muted); margin-top:var(--s-3); }
.price-compare strong{ color:var(--text); font-weight:var(--fw-medium); }
.price-list{
  list-style:none;
  margin:var(--s-6) 0 0;
  display:grid;
  gap:var(--s-3);
}
.price-list li{
  position:relative;
  padding-left:var(--s-6);
  color:var(--text-secondary);
}
.price-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  font-family:var(--font-mono);
  font-weight:var(--fw-medium);
  color:var(--accent-text);
}
.price-email{
  width:100%;
  margin-top:var(--s-6);
  font-family:var(--font-mono);
  font-size:var(--text-base);
  color:var(--text);
  background:var(--surface-2);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-input);
  padding:12px 14px;
  outline:none;
  transition:border-color var(--t-hover) var(--ease);
}
.price-email::placeholder{ color:var(--text-muted); }
.price-email:focus{ border-color:var(--border-strong); }
.price-email:focus-visible{ outline:var(--bw-thick) solid var(--ring); outline-offset:2px; }
.price-buy{ width:100%; margin-top:var(--s-3); }
.buy-msg{
  margin-top:var(--s-4);
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  line-height:var(--lh-ui);
  color:var(--accent-text);
}
.buy-msg.error{ color:var(--danger-400); }
.price-foot{
  margin-top:var(--s-4);
  color:var(--text-subtle);
  font-size:var(--text-sm);
}

/* ---- Team / volume seat picker (inside the price card) ---- */
.seat-pick{
  margin-top:var(--s-6);
  padding-top:var(--s-6);
  border-top:var(--bw-thin) solid var(--border);
}
.seat-pick-label{
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-key);
  color:var(--text);
}
.seat-pick-sub{
  margin-top:var(--s-2);
  color:var(--text-muted);
  font-size:var(--text-sm);
}
.seat-options{
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
  margin-top:var(--s-4);
}
.seat-opt{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  width:100%;
  text-align:left;
  padding:12px 14px;
  background:var(--surface-2);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-input);
  color:var(--text-secondary);
  cursor:pointer;
  font-family:var(--font-body);
  font-size:var(--text-base);
  transition:border-color var(--t-hover) var(--ease),
             background-color var(--t-hover) var(--ease),
             transform var(--t-press) var(--ease-snap);
}
.seat-opt:hover{ border-color:var(--border-strong); }
.seat-opt:active{ transform:translateY(1px); }
.seat-opt.is-active{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.seat-qty{
  flex:0 0 5rem;
  font-weight:var(--fw-semibold);
  color:var(--text);
}
.seat-per{
  flex:1 1 auto;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--text-muted);
}
.seat-per .num{ color:var(--text-secondary); }
.seat-total{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--text-secondary);
}
.seat-save{
  font-family:var(--font-mono);
  font-size:var(--text-eyebrow);
  letter-spacing:var(--ls-key);
  color:var(--accent-text);
}
.seat-note{
  margin-top:var(--s-3);
  color:var(--text-subtle);
  font-size:var(--text-sm);
}

/* ============================================================
   DOWNLOAD
   ============================================================ */
.dl-card{
  max-width:760px;
  margin:0 auto;
  background:var(--surface-1);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-card);
  padding:var(--s-8);
}
.dl-buttons{
  display:flex;
  gap:var(--s-3);
  flex-wrap:wrap;
  margin-top:var(--s-6);
}
.dl-alt{ margin-top:var(--s-4); color:var(--text-muted); font-size:var(--text-sm); }
.dl-notes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--s-4);
  margin-top:var(--s-8);
}
.dl-note{
  background:var(--surface-2);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-input);
  padding:var(--s-5);
  font-size:var(--text-sm);
  color:var(--text-muted);
}
.dl-note strong{
  display:block;
  color:var(--text);
  font-weight:var(--fw-semibold);
  margin-bottom:var(--s-2);
}
.dl-note em{ color:var(--text-secondary); font-style:normal; font-weight:var(--fw-medium); }
.dl-note ol.dl-steps{
  margin:var(--s-3) 0 0;
  padding-left:var(--s-5);
  display:flex;
  flex-direction:column;
  gap:var(--s-2);
}
.dl-note ol.dl-steps li{ color:var(--text-muted); }
.dl-note ol.dl-steps li::marker{ color:var(--text-subtle); font-family:var(--font-mono); }
.dl-tip{ display:block; margin-top:var(--s-4); font-size:var(--text-sm); color:var(--text-subtle); }
.dl-tip code{
  font-family:var(--font-mono);
  font-size:0.85em;
  background:var(--surface-1);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-xs);
  padding:2px 6px;
  word-break:break-all;
  font-feature-settings:'liga' 0,'calt' 0;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{
  max-width:760px;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
details{
  background:var(--surface-1);
  border:var(--bw-thin) solid var(--border);
  border-radius:var(--r-card);
  padding:0 var(--s-5);
  transition:border-color var(--t-hover) var(--ease);
}
details[open]{ border-color:var(--border-strong); }
summary{
  list-style:none;
  cursor:pointer;
  padding:var(--s-5) 0;
  font-weight:var(--fw-medium);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:1.2rem;
  line-height:1;
  color:var(--text-muted);
  transition:color var(--t-hover) var(--ease);
}
summary:hover::after{ color:var(--accent-text); }
details[open] summary::after{ content:"−"; color:var(--accent-text); }
details p{ color:var(--text-muted); padding-bottom:var(--s-5); }
details a{ color:var(--accent-text); }
details a:hover{ text-decoration:underline; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  max-width:var(--container);
  margin:0 auto;
  padding:var(--s-16) var(--s-6) var(--s-20);
  border-top:var(--bw-thin) solid var(--border);
}
.footer-brand{
  display:inline-flex;
  align-items:baseline;
  gap:var(--s-2);
  font-family:var(--font-mono);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-key);
  color:var(--text);
}
.footer-note{ max-width:var(--measure); margin-top:var(--s-4); color:var(--text-subtle); font-size:var(--text-sm); }
.footer-small{ margin-top:var(--s-4); color:var(--text-muted); font-size:var(--text-sm); }
.footer-small a{ color:var(--text-secondary); }
.footer-small a:hover{ color:var(--text); }
.footer-small .num{ color:var(--text-muted); }

.hidden{ display:none !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid,.steps,.dl-notes{ grid-template-columns:1fr; }
  .nav-links a:not(.btn){ display:none; }
}