/* ============================================================
   Team Digital Brain Pro - website

   Colour, radius and shadow values are COPIED from the desktop app's
   app/apps/desktop/src/styles/tokens.css so the site and the app read as
   one product. Values introduced here (the neutral ramp steps the app
   does not define, and the dark band) are constructed in OKLCH off the
   same violet hue.

   Depth strategy: ONE. Surface-tint elevation, i.e. panels are lighter
   or darker than what sits behind them. Shadow appears on exactly two
   things, the sticky header and the primary button, because both float
   over content. Hairlines are used as dividers, never as card outlines.

   Radius: cards 14px, actions and chips pill. That pairing is the app's
   own component language (DESIGN-BRIEF.md) and is the stated exception
   to a single-radius system.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  /* surfaces, from tokens.css */
  --bg-app: #ececf0;
  --bg-surface: #ffffff;
  --bg-subtle: #f7f7f9;
  --bg-hover: #ececf1;
  --bg-active: #e4e4ea;

  /* the dark band. constructed: same violet hue, 14% lightness */
  --bg-inverse: oklch(0.19 0.018 288);
  --bg-inverse-2: oklch(0.24 0.02 288);
  --text-on-inverse: #f2f2f5;
  --text-on-inverse-muted: #b3b3c0;

  /* text, from tokens.css. --text-tertiary (#9a9aa5) is deliberately NOT
     used for any text: 2.9:1 on white fails the 4.5:1 floor. */
  --text-primary: #1a1a1e;
  --text-muted: #62626d;
  --text-on-accent: #ffffff;

  /* accent, from tokens.css */
  --accent: #7f73ff;
  --accent-hover: #6a5cf5;
  --accent-ink: #4c3fd4; /* accent as TEXT on light surfaces: 4.9:1 */
  --accent-soft: #efedff;
  --accent-soft-hover: #e4e0ff;
  --accent-gradient: linear-gradient(135deg, #9a8fff 0%, #7f73ff 100%);

  /* semantic, from tokens.css */
  --success: #2c8f5f;
  --warning-ink: #8a5800;
  --warning-soft: #fff4e0;

  /* borders, from tokens.css */
  --border: rgba(20, 20, 40, 0.09);
  --border-strong: rgba(20, 20, 40, 0.15);
  --focus-ring: 0 0 0 3px rgba(127, 115, 255, 0.35);

  /* radii, from tokens.css */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* shadows, from tokens.css */
  --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.05), 0 1px 6px rgba(20, 20, 40, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 20, 40, 0.08);

  /* 4pt spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* type. modular scale 1.25 */
  --font-display: "Archivo", "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.625rem;
  --step-3: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
  --step-4: clamp(2.125rem, 1.3rem + 3.2vw, 3rem);
  --step-5: clamp(2.75rem, 1.4rem + 5.4vw, 4.75rem);

  --measure: 62ch;
  --shell: 1180px;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: #101014;
  --bg-surface: #1d1d24;
  --bg-subtle: #17171c;
  --bg-hover: #26262e;
  --bg-active: #2f2f38;

  --bg-inverse: oklch(0.15 0.014 288);
  --bg-inverse-2: oklch(0.21 0.018 288);

  --text-primary: #f2f2f5;
  --text-muted: #a6a6b2;

  --accent: #8f84ff;
  --accent-hover: #a49bff;
  --accent-ink: #b0a6ff; /* accent as text on dark: 6.4:1 */
  --accent-soft: rgba(127, 115, 255, 0.18);
  --accent-soft-hover: rgba(127, 115, 255, 0.26);

  --success: #3cb883;
  --warning-ink: #f0b429;
  --warning-soft: rgba(240, 180, 41, 0.14);

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --focus-ring: 0 0 0 3px rgba(143, 132, 255, 0.45);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* OS preference until the toggle paints data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg-app: #101014;
    --bg-surface: #1d1d24;
    --bg-subtle: #17171c;
    --bg-hover: #26262e;
    --bg-active: #2f2f38;
    --bg-inverse: oklch(0.15 0.014 288);
    --bg-inverse-2: oklch(0.21 0.018 288);
    --text-primary: #f2f2f5;
    --text-muted: #a6a6b2;
    --accent: #8f84ff;
    --accent-hover: #a49bff;
    --accent-ink: #b0a6ff;
    --accent-soft: rgba(127, 115, 255, 0.18);
    --accent-soft-hover: rgba(127, 115, 255, 0.26);
    --success: #3cb883;
    --warning-ink: #f0b429;
    --warning-soft: rgba(240, 180, 41, 0.14);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[data-theme="dark"] body { line-height: 1.68; letter-spacing: 0.005em; }

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

/* ---------- layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.band { padding-block: var(--sp-24); }
.band--tight { padding-block: var(--sp-16); }

.band--inverse {
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
}
.band--inverse h2, .band--inverse h3 { color: var(--text-on-inverse); }
.band--inverse .lede, .band--inverse .muted { color: var(--text-on-inverse-muted); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 34ch;
}

.muted { color: var(--text-muted); }
.prose { max-width: var(--measure); }
.nums { font-variant-numeric: tabular-nums; }

.kicker {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 var(--sp-4);
}

.section-head { max-width: 52ch; margin-bottom: var(--sp-12); }
.section-head h2 { font-size: var(--step-4); }
.section-head p { margin-top: var(--sp-4); color: var(--text-muted); max-width: 50ch; }

/* The proof and tier heads carry a longer supporting line, so they get the
   full measure rather than the heading measure. */
.section-head--wide { max-width: 62ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-6);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms var(--ease-out-quart),
              background-color 200ms var(--ease-out-quart),
              color 200ms var(--ease-out-quart);
}

.btn--primary {
  background-image: var(--accent-gradient);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { color: var(--text-on-accent); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); transform: translateY(-2px); }
.btn--ghost:active { transform: translateY(1px); }

.band--inverse .btn--ghost {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-on-inverse);
}
.band--inverse .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-on-inverse);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* ---------- header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--bg-app) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.site-head__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.15;
}
.brand span { max-width: 11ch; }
.brand__mark { width: 30px; height: 30px; border-radius: var(--radius-sm); flex: none; }

.site-head__spacer { flex: 1 1 auto; }

.head-link {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--sp-2) 0;
}
.head-link:hover { color: var(--text-primary); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 200ms var(--ease-out-quart), color 200ms var(--ease-out-quart);
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
}

/* ---------- hero : asymmetric 7/5 ---------- */
.hero { padding-block: var(--sp-24) var(--sp-16); }

.hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-16);
  align-items: center;
}

.hero h1 {
  font-size: var(--step-5);
  max-width: 17ch;
}

.hero .lede { margin-top: var(--sp-6); max-width: 38ch; }

/* One honest line at the point of action. The full three-item disclosure moved
   further down the page, next to the price, because three caveats immediately
   after the hero spend attention before any of it has been earned. */
.hero__note {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 44ch;
}

/* the layer figure. a diagram, not a pretend screenshot */
.stack { display: grid; gap: var(--sp-3); }

.layer {
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  background: var(--bg-surface);
}
.layer__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.layer__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); margin-top: var(--sp-2); }
.layer__note { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--sp-1); }
.layer--live { background: var(--accent-soft); }
.layer--live .layer__label { color: var(--accent-ink); }
.layer--disk { background: var(--bg-subtle); }

.stack__arrow {
  justify-self: center;
  color: var(--text-muted);
  font-size: var(--step--1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.stack__arrow svg { width: 14px; height: 14px; }

/* ---------- disclosure strip : the honest three ---------- */
.disclose { border-block: 1px solid var(--border); background: var(--bg-subtle); }
.disclose__inner { padding-block: var(--sp-8); }
.disclose h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}
.disclose ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
.disclose li { display: grid; gap: var(--sp-2); }
.disclose b { font-family: var(--font-display); font-size: var(--step-0); font-weight: 700; }
.disclose span { font-size: var(--step--1); color: var(--text-muted); line-height: 1.55; }

/* ---------- cost band : editorial columns, hairline rules ---------- */
.cost__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--sp-16);
}
.cost__item { padding: 0 var(--sp-8); border-left: 1px solid rgba(255, 255, 255, 0.14); }
.cost__item:first-child { padding-left: 0; border-left: 0; }
.cost__item:last-child { padding-right: 0; }
.cost__item h3 { font-size: var(--step-2); max-width: 16ch; }
.cost__item p { margin-top: var(--sp-4); font-size: var(--step--1); line-height: 1.6; }

/* ---------- guess band : editorial two column + pull quote ---------- */
.guess__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-16);
  align-items: start;
}
.guess__rule { width: 1px; background: var(--border); align-self: stretch; }
.guess__grid h2 { font-size: var(--step-4); max-width: 26ch; }

/* The left column carries the argument plus the four AI gains, so it runs much
   longer than the quote. Sticky keeps the quote beside the text it comments on
   instead of stranding half the band empty. */
.guess__grid > div:last-child { position: sticky; top: 96px; }

.pull {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 22ch;
}
.pull em { font-style: normal; color: var(--accent-ink); }

/* ---------- permission wall ---------- */
.wall { display: grid; justify-items: center; gap: var(--sp-12); }
.wall__figure { width: 100%; max-width: 760px; overflow-x: auto; }
.wall__figure svg { width: 100%; min-width: 560px; height: auto; }
.wall__caption {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 56ch;
  text-align: center;
}
.wall__caption code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125em;
}

/* ---------- proof : full bleed image + thumbs ---------- */
/* A real capture. Full-bleed so the constellation gets the width it earns,
   with the window chrome kept: it is a desktop app and the screenshot says so. */
/* Wider than .shell but still a real container. Deliberately NOT a 100vw
   full-bleed: every vw-based bleed trick overflows by the scrollbar width,
   which shows up as a horizontal scrollbar on the whole page. 1420 against the
   shell's 1180 is already a visible step up in width. */
.bleed {
  width: 100%;
  max-width: 1420px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.bleed__inner { width: 100%; }

.capture {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}

.shot {
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-8);
  color: var(--text-muted);
  font-size: var(--step--1);
}
.shot--wide { aspect-ratio: 16 / 10; }
.shot--thumb { aspect-ratio: 4 / 3; }
.shot b { display: block; font-family: var(--font-display); color: var(--text-primary); font-size: var(--step-0); }
.shot code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; }

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  align-items: start;
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.shot-caption { margin-top: var(--sp-4); font-size: var(--step--1); color: var(--text-muted); }

/* ---------- decision band ----------
   Its own layout family: loose prose on one side against a record panel on the
   other, so the page shows the gap between what a person recalls and what the
   file holds instead of asserting it. Asymmetric 6/5 because the prose needs the
   room and the panel reads better tight. */
.decide {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--sp-16);
  align-items: start;
  margin-top: var(--sp-12);
}

.decide__story p {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 40ch;
}
.decide__story p + p { margin-top: var(--sp-6); }
.decide__story b { color: var(--text-primary); font-weight: 600; }

.record {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}
.record__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.record dl { margin: var(--sp-6) 0 0; display: grid; gap: 0; }
.record div {
  padding-block: var(--sp-4);
  border-top: 1px solid var(--border);
}
.record div:first-of-type { border-top: 0; padding-top: 0; }
.record dt { font-size: var(--step--1); color: var(--text-muted); }
.record dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--step-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.record__source {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.decide__close {
  margin-top: var(--sp-12);
  max-width: 62ch;
}
.decide__close p { font-size: var(--step-1); line-height: 1.5; }
.decide__close p + p { margin-top: var(--sp-4); color: var(--text-muted); }

/* ---------- before / after : the benefit section ----------
   A comparison band. Its own layout family: two columns of paired rows split by
   a single hairline, so the eye reads across rather than down a list. The claim
   in the heading is qualitative on purpose; the rows are what back it. */
.ba { display: grid; gap: 0; }

.ba__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-4);
}
.ba__head span {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ba__head span:last-child { color: var(--accent-ink); }

.ba__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
  align-items: start;
}
.ba__row:last-child { border-bottom: 1px solid var(--border); }

.ba__now { color: var(--text-muted); }
.ba__then { color: var(--text-primary); font-weight: 500; }
.ba__then b { font-weight: 700; }

/* ---------- ai benefit list ---------- */
.gains { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.gains li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-4);
  align-items: start;
  font-size: var(--step-0);
  line-height: 1.55;
}
.gains svg { width: 22px; height: 22px; margin-top: 2px; }

/* ---------- even image grid ----------
   Four tiles, same size, same aspect. The earlier layout had one hero image and
   smaller ones beside it, which read as a hierarchy that does not exist: all four
   screens matter equally. Source images are cropped to one size upstream, so the
   grid needs no object-fit trickery. */
.grid4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-6);
}

.shotcard { margin: 0; display: grid; gap: var(--sp-4); }
.shotcard .capture { aspect-ratio: 1440 / 820; object-fit: cover; }
.shotcard figcaption {
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- steps : ordered sequence ---------- */
.steps {
  counter-reset: s;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
.steps li { counter-increment: s; display: grid; gap: var(--sp-3); }
.steps li::before {
  content: counter(s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  color: var(--accent-ink);
  line-height: 1;
}
.steps h3 { font-size: var(--step-1); }
.steps p { font-size: var(--step--1); color: var(--text-muted); }

/* ---------- tiers : asymmetric 2fr 3fr ---------- */
.tiers { display: grid; grid-template-columns: 2fr 3fr; gap: var(--sp-6); align-items: start; }

.tier {
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  background: var(--bg-subtle);
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}
.tier--paid { background: var(--bg-surface); }
.tier__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); }
.tier__price { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--accent-ink); }
.tier__price small { display: block; font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; color: var(--text-muted); margin-top: var(--sp-1); }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.tier li { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-3); font-size: var(--step--1); line-height: 1.55; }
.tier li svg { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.tier li.no { color: var(--text-muted); }
.tier__term {
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  color: var(--text-primary);
}

/* ---------- ownership : hairline list, no boxes ---------- */
.own { display: grid; gap: 0; margin-top: var(--sp-12); }
.own__row {
  display: grid;
  grid-template-columns: 15ch 1fr;
  gap: var(--sp-8);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
  align-items: baseline;
}
.own__row:last-child { border-bottom: 1px solid var(--border); }
.own__row dt { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); }
.own__row dd { margin: 0; color: var(--text-muted); font-size: var(--step--1); max-width: 62ch; }

/* ---------- faq ---------- */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 220ms var(--ease-out-quart);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--accent-ink); }
.faq__body { padding-bottom: var(--sp-6); color: var(--text-muted); max-width: var(--measure); }
.faq__body p + p { margin-top: var(--sp-3); }

/* ---------- contact ---------- */
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-16); align-items: center; }
.contact h2 { font-size: var(--step-4); max-width: 20ch; }

.channels { display: grid; gap: var(--sp-3); }
.channel {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--bg-inverse-2);
  color: var(--text-on-inverse);
  text-decoration: none;
  min-height: 72px;
  transition: transform 160ms var(--ease-out-quart), background-color 200ms var(--ease-out-quart);
}
.channel:hover { transform: translateY(-2px); background: oklch(0.29 0.03 288); color: var(--text-on-inverse); }
.channel:active { transform: translateY(1px); }
.channel svg { width: 22px; height: 22px; }
.channel b { display: block; font-family: var(--font-display); font-size: var(--step-1); letter-spacing: -0.01em; }
.channel span { display: block; font-size: var(--step--1); color: var(--text-on-inverse-muted); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--border); padding-block: var(--sp-12); font-size: var(--step--1); }
.site-foot__inner { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-8); align-items: baseline; }
.site-foot p { color: var(--text-muted); max-width: 46ch; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.site-foot a { color: var(--text-muted); text-decoration: none; }
.site-foot a:hover { color: var(--text-primary); text-decoration: underline; }

/* ---------- download page ---------- */
.dl__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }

.dl-card {
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 160ms var(--ease-out-quart), background-color 200ms var(--ease-out-quart);
}
.dl-card:hover { transform: translateY(-3px); background: var(--bg-hover); color: var(--text-primary); }
.dl-card:active { transform: translateY(0); }
.dl-card__os { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); }
.dl-card__arch { font-size: var(--step--1); color: var(--text-muted); }
.dl-card__cta { font-size: var(--step--1); font-weight: 600; color: var(--accent-ink); display: flex; align-items: center; gap: var(--sp-2); }
.dl-card__cta svg { width: 14px; height: 14px; }

.alt-links { margin-top: var(--sp-6); font-size: var(--step--1); color: var(--text-muted); }
.alt-links a { margin-right: var(--sp-4); }

.notice {
  border-radius: var(--radius-lg);
  background: var(--warning-soft);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  max-width: var(--measure);
}
.notice h3 { font-family: var(--font-display); font-size: var(--step-1); color: var(--warning-ink); }
.notice p { font-size: var(--step--1); }

.table-wrap { overflow-x: auto; margin-top: var(--sp-8); }
table.hashes { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--step--1); }
table.hashes caption { text-align: left; color: var(--text-muted); padding-bottom: var(--sp-4); }
table.hashes th, table.hashes td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: top; }
table.hashes th { font-family: var(--font-body); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
table.hashes td.file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
table.hashes td.hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  word-break: break-all;
  color: var(--text-muted);
}

pre.cmd {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-md);
  background: var(--bg-inverse);
  color: var(--text-on-inverse);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
  overflow-x: auto;
}
pre.cmd .c { color: var(--text-on-inverse-muted); }

.steps--verify { grid-template-columns: 1fr; gap: var(--sp-8); max-width: 760px; }
.steps--verify li { grid-template-columns: 1fr; }

/* ---------- motion ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out-expo), transform 620ms var(--ease-out-expo);
}

.js .hero__grid > * { opacity: 0; transform: translateY(16px); }
.js .hero.ready .hero__grid > * {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo);
}
.js .hero.ready .hero__grid > *:nth-child(2) { transition-delay: 90ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal,
  .js .hero__grid > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero__grid,
  .guess__grid,
  .contact__grid { grid-template-columns: 1fr; gap: var(--sp-12); }
  .guess__rule { display: none; }
  .guess__grid > div:last-child { position: static; }
  .tiers { grid-template-columns: 1fr; }
  .cost__grid,
  .steps,
  .pair,
  .decide,
  .grid4,
  .disclose ol { grid-template-columns: 1fr; gap: var(--sp-8); }
  .ba__head { display: none; }
  .ba__row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ba__now::before { content: "Hôm nay: "; font-weight: 600; color: var(--text-primary); }
  .ba__then::before { content: "Từ nay: "; font-weight: 700; color: var(--accent-ink); }
  .cost__item { padding: 0; border-left: 0; padding-top: var(--sp-8); border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .cost__item:first-child { padding-top: 0; border-top: 0; }
}

@media (max-width: 640px) {
  :root { --sp-24: 64px; --sp-16: 48px; --shell: 100%; }
  .bleed { padding-inline: var(--sp-4); }
  .shell { padding-inline: var(--sp-4); }
  .hero { padding-block: var(--sp-16) var(--sp-12); }
  .own__row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .brand span { max-width: 15ch; font-size: 0.8125rem; }
  .site-head__inner { min-height: 60px; }
  .head-link--hide { display: none; }
  .btn { width: 100%; }
  .btn-row { gap: var(--sp-2); }
}