/* ==========================================================================
   Zach's ReSkate: site styles
   Order: reset > base > layout > components (by section) > utilities
   Signature: "the carve". A smooth ribbon follows the pointer; colour is revealed only where it passes
   (spotlight borders, lit grit, ink text). Static look = tinted neutrals + big condensed italic type.
   ========================================================================== */

/* ---------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  *:not(dialog) { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  @media (prefers-reduced-motion: no-preference) { :root { interpolate-size: allow-keywords; } }
  body { min-block-size: 100svh; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }
  input, button, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  ul, ol { padding: 0; list-style: none; }
  :where(h1, h2, h3, h4) { text-wrap: balance; font-weight: inherit; }
  :where(p) { text-wrap: pretty; }
  a { color: inherit; }
  summary { cursor: pointer; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }
}

/* ---------------------------------------------------------------- base */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--nav-offset) + 28px); background: var(--bg); }
  body {
    background: var(--bg); color: var(--text);
    font: 400 var(--fs-base)/1.6 var(--font-body); letter-spacing: -0.008em;
    --grit-invert: 0;
  }
  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body { --grit-invert: 1; } }
  :root[data-theme="light"] body { --grit-invert: 1; }
  ::selection { background: color-mix(in oklab, var(--blue) 35%, transparent); color: inherit; }
  b, strong { font-weight: 600; }
  /* the game's name is "skate.", period included: set it apart so it doesn't read as a sentence end */
  .game { font-weight: 600; letter-spacing: -0.012em; color: var(--text); white-space: nowrap; }
  .together__cap .game, .screen__bar .game { color: inherit; }   /* captions on photos keep their own fixed light ink in both themes */
  em { font-style: normal; }
  q { quotes: "\201C" "\201D"; }
  a { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
  :focus:not(:focus-visible) { outline: none; }
  main:focus { outline: none; }
  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
  .nowrap { white-space: nowrap; }
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fx-off .trail { display: none; }
  .fx-off [data-spot] { --spot: 0 !important; }
  .fx-off .btn::before { display: none; }
  html:not(.js) .mod__row { pointer-events: none; cursor: default; }
  @media (pointer: coarse) { .try-hint { display: none; } }
  .trail { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; z-index: 60; pointer-events: none; }
  .skip {
    position: fixed; inset-inline-start: 12px; inset-block-start: 12px; z-index: 100;
    padding: 0.8rem 1.1rem; border-radius: var(--r-pill); background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none;
  }
  .skip:not(:focus) { clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; padding: 0; white-space: nowrap; }

  /* ambient grip-tape grit over the whole page; sits above content, never takes clicks */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
    background: url("../img/grit.png") 0 0 / 256px; opacity: 0.05; filter: invert(var(--grit-invert));
  }
}

/* ---------------------------------------------------------------- layout */
@layer layout {
  .wrap { inline-size: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .section { position: relative; padding-block: var(--section-y); }

  /* Everything below the first screen skips layout and paint until it nears the viewport. On a 4x-throttled phone this took
     first paint from ~1.2 s to ~0.4 s. The estimates (measured at each breakpoint) keep the scrollbar honest; "auto" makes the
     browser remember the real height once a section has rendered. Unsupported browsers just render everything. */
  #features, #mods, #install, #controls, #safe, #faq, .cta, .footer { content-visibility: auto; contain-intrinsic-block-size: auto var(--cis, 1200px); }
  #features { --cis: 1900px; } #mods { --cis: 1550px; } #install { --cis: 2300px; } #controls { --cis: 1520px; }
  #safe { --cis: 1750px; } #faq { --cis: 1280px; } .cta { --cis: 870px; } .footer { --cis: 730px; }
  @media (max-width: 999px) {
    #features { --cis: 2600px; } #mods { --cis: 2010px; } #install { --cis: 3020px; } #controls { --cis: 2200px; }
    #safe { --cis: 2000px; } #faq { --cis: 1630px; } .cta { --cis: 800px; } .footer { --cis: 655px; }
  }
  @media (max-width: 699px) {
    #features { --cis: 3100px; } #mods { --cis: 2450px; } #install { --cis: 3250px; } #controls { --cis: 2100px; }
    #safe { --cis: 3000px; } #faq { --cis: 1630px; } .cta { --cis: 900px; } .footer { --cis: 950px; }
  }
  .section--tint { background: var(--bg-sunk); }

  /* engineered hairlines at the container edges (Stripe-style frame) */
  .frame { position: fixed; inset: 0; z-index: 1; pointer-events: none; display: flex; justify-content: center;
    -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
  .frame__in { inline-size: min(100% - 2 * var(--gutter), var(--container)); border-inline: 1px solid var(--line); }
  @media (max-width: 1100px) { .frame { display: none; } }

  .sec-head { max-inline-size: 58rem; margin-block-end: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
  .sec-head--wide { max-inline-size: 72rem; }
  .sec-head__lede { font-size: var(--fs-lg); line-height: 1.5; color: var(--text-2); max-inline-size: 40rem; margin-block-start: var(--s-4); }
}

/* ---------------------------------------------------------------- components */
@layer components {

  /* ===== icons ===== */
  .i { inline-size: 1.25em; block-size: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .i--lg { inline-size: 28px; block-size: 28px; stroke-width: 1.5; }

  /* ===== type helpers ===== */
  .h2 {
    font: italic 900 var(--fs-h2)/0.92 var(--font-display); text-transform: uppercase;
    letter-spacing: -0.004em; word-spacing: 0.06em; margin-block-start: var(--s-4);
  }
  .h3 {
    font: italic 800 clamp(1.75rem, 1.35rem + 1.4vw, 2.6rem)/0.95 var(--font-display-md); text-transform: uppercase;
    letter-spacing: 0; word-spacing: 0.05em;
  }
  .h4 { font: 600 var(--fs-h4)/1.2 var(--font-body); letter-spacing: -0.022em; }
  .eyebrow {
    display: flex; align-items: center; gap: 0.75rem;
    font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  }
  .eyebrow::after { content: ""; flex: 0 1 3.5rem; block-size: 1px; background: var(--line-2); }
  .eyebrow--plain::after { display: none; }
  .eyebrow__n { color: var(--blue-text); }
  .mono-note { font: 500 0.75rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
  .path {
    font: 500 max(0.82em, 0.75rem)/1 var(--font-mono); letter-spacing: 0; padding: 0.22em 0.5em; border-radius: 6px;
    background: color-mix(in oklab, var(--text) 7%, transparent); box-shadow: 0 0 0 1px var(--line); white-space: nowrap; overflow-wrap: anywhere;
  }
  .tag {
    display: inline-flex; align-items: center; align-self: flex-start; gap: 0.5em; padding: 0.42em 0.8em; border-radius: var(--r-pill);
    font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  }
  .tag--violet { background: var(--violet-soft); color: color-mix(in oklab, var(--violet-text) 82%, black); }
  :root[data-theme="dark"] .tag--violet { color: var(--violet-text); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag--violet { color: var(--violet-text); } }
  .tag--blue { background: var(--blue-soft); color: var(--blue-text); }

  /* the logo's white label, used as a sticker */
  .pill-sticker {
    display: inline-flex; align-items: center; gap: 0.55em; padding: 0.5em 1em 0.5em 0.85em; border-radius: var(--r-pill);
    background: var(--pill); color: var(--violet);
    font: italic 800 0.9rem/1 var(--font-badge); letter-spacing: 0.04em; text-transform: uppercase;
    box-shadow: 0 0 0 1px oklch(0.2 0.03 270 / 0.1), 0 8px 18px -8px oklch(0.4 0.2 293 / 0.55); rotate: -2deg;
  }
  .pill-sticker::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 28%, transparent); }

  /* ===== buttons ===== */
  .btn {
    --btn-h: 48px; position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-block-size: var(--btn-h); padding-inline: 1.4em;
    border-radius: var(--r-pill); font: 600 1rem/1.15 var(--font-body); letter-spacing: -0.012em; text-decoration: none; text-align: center; padding-block: 0.55em;
    transition: transform var(--dur-2) var(--ease-ui), background-color var(--dur-2), box-shadow var(--dur-2), color var(--dur-2);
  }
  .btn:active { transform: scale(0.97); }
  .btn--sm { --btn-h: 44px; padding-inline: 1.15em; font-size: 0.9375rem; white-space: nowrap; }
  .btn--md { --btn-h: 48px; }
  .btn--lg { --btn-h: 56px; padding-inline: 1.35em; font-size: 1rem; }
  .btn--xl { --btn-h: 66px; padding-inline: 2.1em; font-size: 1.1875rem; }
  .btn::before {   /* pointer glow: colour only where the pointer is */
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--dur-3);
    background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), var(--glow, oklch(0.62 0.24 293 / 0.55)), transparent 70%);
  }
  .btn:hover::before, .btn:focus-visible::before { opacity: 1; }
  .btn--primary { background: var(--blue); color: var(--on-blue); box-shadow: 0 10px 30px -12px color-mix(in oklab, var(--blue) 75%, transparent); }
  .btn--primary:hover { background: color-mix(in oklab, var(--blue) 90%, oklch(0.85 0.1 240)); }
  .btn--primary { --glow: oklch(0.7 0.2 285 / 0.7); }
  .btn--ghost { color: var(--text); box-shadow: 0 0 0 1px var(--line-2); --glow: color-mix(in oklab, var(--blue) 30%, transparent); }
  .btn--ghost:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--blue) 60%, var(--line-2)); }
  .btn--ink { background: oklch(0.17 0.03 262); color: oklch(0.97 0.005 262); --glow: color-mix(in oklab, var(--blue) 65%, transparent); box-shadow: 0 18px 40px -18px oklch(0.1 0.05 262 / 0.7); }
  .btn--ink:hover { background: oklch(0.22 0.04 262); }

  .icon-btn {
    display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; color: var(--text-2);
    transition: background-color var(--dur-1), color var(--dur-1), transform var(--dur-2) var(--ease-ui);
  }
  .icon-btn:hover { background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text); }
  .icon-btn:active { transform: scale(0.94); }
  .icon-btn .i--sun { display: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-btn .i--moon { display: none; } :root:not([data-theme="light"]) .icon-btn .i--sun { display: block; } }
  :root[data-theme="dark"] .icon-btn .i--moon { display: none; }
  :root[data-theme="dark"] .icon-btn .i--sun { display: block; }

  .pill-btn {
    display: inline-flex; align-items: center; gap: 0.55em; min-block-size: 44px; padding: 0 1.1em 0 0.95em; border-radius: var(--r-pill);
    background: oklch(0.12 0.02 268 / 0.58); color: oklch(0.97 0.005 268); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 0 0 1px oklch(1 0 0 / 0.16); font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase;
    transition: background-color var(--dur-1), transform var(--dur-2) var(--ease-ui);
  }
  .pill-btn:hover { background: oklch(0.12 0.02 268 / 0.8); }
  .pill-btn:active { transform: scale(0.96); }
  .pill-btn .i--play { display: none; }
  .pill-btn[aria-pressed="true"] .i--pause { display: none; }
  .pill-btn[aria-pressed="true"] .i--play { display: block; }

  /* ===== pointer reveal (spotlight border + wash + lit grit) ===== */
  @property --spot { syntax: "<number>"; inherits: true; initial-value: 0; }
  [data-spot] { --mx: 50%; --my: -30%; position: relative; isolation: isolate; transition: --spot var(--dur-4) var(--ease-out); }
  [data-spot]:hover, [data-spot]:focus-within, [data-spot].is-lit { --spot: 1; transition-duration: 60ms; }
  [data-spot]::before {   /* 1px ring that glows only near the pointer */
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none; opacity: var(--spot);
    background: radial-gradient(340px circle at var(--mx) var(--my), var(--blue), var(--violet) 40%, transparent 74%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude;
  }
  [data-spot]::after {    /* grit that only exists in the pointer's light */
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: calc(var(--spot) * 0.85);
    background: linear-gradient(135deg, var(--blue), var(--violet));
    -webkit-mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 72%), var(--grit-mask);
    mask-image: radial-gradient(260px circle at var(--mx) var(--my), #000, transparent 72%), var(--grit-mask);
    -webkit-mask-size: auto, 144px; mask-size: auto, 144px; -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  :is(.card, .mod, .spec) {
    background-image: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in oklab, var(--blue) calc(var(--spot) * 9%), transparent), transparent 70%);
  }
  @media (hover: none) { [data-spot]:hover { --spot: 0; } [data-spot].is-lit { --spot: 1; } }

  /* ink: neutral text that takes colour where the pointer passes */
  .ink {
    --mx: -999px; --my: -999px; --ink-base: linear-gradient(var(--text), var(--text));
    background-image: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), var(--blue) 0%, var(--violet-display) 46%, transparent 78%), var(--ink-base);
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
  @media (forced-colors: active) { .ink { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } }
  /* Touch screens have no pointer to follow: text stays solid (the radial wash read as a pale blotch mid-sweep and tinted
     neighbouring numbers on a tap), and a tapped card gets only its soft glowing ring, not the grit fill box. */
  @media (hover: none), (pointer: coarse) {
    .ink { background-image: var(--ink-base); }
    [data-spot]::after { display: none; }
    .spec::before { display: none; }   /* stats are square, edge-to-edge cells and not tappable: a ring there read as a selection box */
    :is(.card, .mod, .spec) { background-image: none; }
  }
  html { -webkit-tap-highlight-color: transparent; }   /* Android/iOS grey tap box; every control has its own :active press */

  /* ===== cards ===== */
  .card {
    position: relative; isolation: isolate; background-color: var(--surface); border-radius: var(--r-3);
    box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 var(--hair-hi), var(--shadow-2);
  }

  /* ===== nav ===== */
  .site-header { position: sticky; top: var(--nav-offset); z-index: 50; margin-block-start: var(--nav-offset); block-size: var(--nav-h); pointer-events: none; }
  .nav {
    position: relative; pointer-events: auto; display: flex; align-items: center; gap: var(--s-2);
    inline-size: min(100% - 2 * var(--gutter), 1120px); block-size: var(--nav-h); margin-inline: auto; padding: 6px 6px 6px 12px; border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--bg) 68%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 var(--hair-hi), var(--shadow-2);
  }
  .nav__brand { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; min-inline-size: 44px; text-decoration: none; border-radius: var(--r-pill); }
  .nav__brand img { border-radius: 9px; }
  .nav__word { font: italic 900 1.3rem/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.005em; white-space: nowrap; }
  .nav__links { display: flex; gap: 2px; margin-inline: auto; }
  .nav__links + .nav__end { margin-inline-start: 0; }
  .nav__links a {
    position: relative; display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 14px; border-radius: var(--r-pill);
    font-size: 0.9375rem; font-weight: 500; color: var(--text-2); text-decoration: none; letter-spacing: -0.01em;
    transition: color var(--dur-1), background-color var(--dur-1);
  }
  .nav__links a:hover { color: var(--text); background: color-mix(in oklab, var(--text) 7%, transparent); }
  .nav__links a[aria-current="true"] { color: var(--text); background: color-mix(in oklab, var(--text) 9%, transparent); }
  .nav__links a[aria-current="true"]::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--blue); margin-inline-end: 8px; }
  .nav__end { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
  .nav__menu { display: none; }
  @media (max-width: 1020px) {
    .nav__links { display: none; }
    .nav .nav__end { margin-inline-start: auto; }
    .nav__menu { display: inline-flex; }
  }
  @media (max-width: 480px) {
    .nav__word { font-size: 1.1rem; }
    .nav__cta span { display: none; }
    .nav__cta { padding-inline: 0; inline-size: 44px; }
    .nav { padding-left: 8px; }
  }
  @media (max-width: 360px) { .nav__word { display: none; } }

  /* mobile menu sheet */
  .menu {
    inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; margin: 0; padding: 0; border: 0;
    background: var(--bg); color: var(--text); overflow: hidden;
  }
  .menu[open] { display: flex; flex-direction: column; animation: menu-in var(--dur-3) var(--ease-out); }
  .menu::backdrop { background: oklch(0.1 0.02 268 / 0.5); }
  html:has(dialog[open]) { overflow: hidden; }
  .menu__bar { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) var(--gutter) 8px; min-block-size: 68px; }
  .menu__title { font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
  .menu__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) var(--gutter); }
  .menu__nav ol { display: grid; }
  .menu__nav a {
    display: flex; align-items: baseline; gap: 1rem; padding-block: 0.5rem; text-decoration: none; min-block-size: 56px;
    font: italic 900 clamp(2.4rem, 1.4rem + 6vw, 3.6rem)/1 var(--font-display); text-transform: uppercase; border-bottom: 1px solid var(--line);
  }
  .menu__n { font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--blue-text); }
  .menu__nav a:hover { color: var(--blue-text); }
  .menu__foot { padding: var(--s-4) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom)); display: grid; gap: var(--s-3); }
  .menu__foot .btn { inline-size: 100%; }
  .menu__note { text-align: center; font: 500 0.75rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } }
  @media (min-width: 1021px) { .menu { display: none !important; } }

  /* ===== hero ===== */
  .hero { position: relative; padding-block: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem) clamp(3.5rem, 2rem + 5vw, 7rem); }
  .hero__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); margin-block-end: clamp(1rem, 0.6rem + 1vw, 1.5rem); }
  .hero { --h1-size: var(--fs-h1); }
  @media (max-width: 560px) { .hero__eyebrow { flex-direction: column; align-items: flex-start; } }   /* two rows in every font state, so the swap can't re-wrap it */
  .hero__title {
    font: italic 900 var(--h1-size)/0.88 var(--font-display); text-transform: uppercase;
    letter-spacing: -0.004em; word-spacing: 0.07em;
  }
  .hero__line { display: block; text-wrap: balance; }
  .hero__line > * { display: inline-block; }
  .w--blue { color: var(--blue-display); }
  .w--violet { color: var(--violet-display); }
  .hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--gap); margin-block-start: clamp(1.5rem, 0.9rem + 1.2vw, 2.25rem); align-items: start; }
  .hero__copy { grid-column: 1 / span 5; padding-block-start: 0.4rem; }
  .hero__screen { grid-column: 6 / -1; }
  .hero__sub { font-size: var(--fs-lg); line-height: 1.5; color: var(--text-2); max-inline-size: 30rem; }
  .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-6); }
  @media (max-width: 560px) { .hero__cta .btn { flex: 1 1 100%; } }
  .hero__facts { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); max-inline-size: 30rem; }
  /* On desktop the headline and the video frame follow the viewport height, so the whole video (and its Pause button) sits
     above the fold on 1280x720 up to 1920x1080. 12rem = nav + hero padding + eyebrow + gaps; the frame never gets flatter than ~1.8:1. */
  @media (min-width: 961px) {
    .hero { --h1-size: min(var(--fs-h1), 12.4svh); }
    .hero__screen { container-type: inline-size; }
    .hero__screen .screen__frame { inline-size: 100%; max-block-size: max(calc(100svh - 12rem - 1.76 * var(--h1-size) - 1.25rem), 56cqw); }
  }
  .hero__facts li { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.9375rem; line-height: 1.45; color: var(--text-3); }
  .hero__facts .i { margin-block-start: 0.1rem; color: var(--text-2); }
  @media (max-width: 960px) {
    .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-5); }
    .hero__copy { display: contents; }
    .hero__sub { order: 1; }
    .hero__cta { order: 2; margin-block-start: 0; }
    .hero__screen { order: 3; margin-block-start: var(--s-3); }
    .hero__facts { order: 4; margin-block-start: 0; }
  }

  .screen { position: relative; margin: 0; }
  .screen__frame {
    position: relative; isolation: isolate; aspect-ratio: 4 / 3; border-radius: var(--r-4); overflow: hidden; background: var(--bg-sunk);
    box-shadow: 0 0 0 1px var(--line-2), var(--shadow-3), 0 50px 110px -50px var(--underglow);
  }
  .screen__frame[data-spot]::after { z-index: 2; opacity: calc(var(--spot) * 0.3); }
  .screen__poster { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  /* The loops are 4:3 and the frame is 4:3 or wider, so the video gets its own 4:3 box, centred, and the frame clips the overflow.
     That is "cover" without object-fit, which some engines mishandle on <video>. */
  .screen__video { position: absolute; inset-inline: 0; inset-block-start: 50%; translate: 0 -50%; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; opacity: 0; transition: opacity var(--dur-4) var(--ease-quint); }
  .screen__video.is-on { opacity: 1; }
  .screen__shade { position: absolute; inset: auto 0 0 0; block-size: 38%; background: linear-gradient(to top, oklch(0.1 0.02 268 / 0.7), transparent); pointer-events: none; }
  .screen__bar { position: absolute; inset: auto 12px 12px 12px; z-index: 4; display: flex; align-items: center; gap: var(--s-3); color: oklch(0.97 0.005 268); }
  .screen__cap { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: oklch(0.97 0.005 268 / 0.85); text-shadow: 0 1px 8px oklch(0.1 0.02 268 / 0.8); white-space: nowrap; }
  .screen__progress { flex: 1; block-size: 3px; border-radius: 3px; background: oklch(1 0 0 / 0.22); overflow: hidden; min-inline-size: 24px; }
  .screen__progress i { display: block; block-size: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  @media (max-width: 440px) { .screen__cap { display: none; } }
  .sticker {
    position: absolute; z-index: 5; inline-size: clamp(74px, 8.4vw, 112px); aspect-ratio: 1; block-size: auto;
    inset-block-start: calc(-1 * clamp(22px, 3vw, 38px)); inset-inline-start: calc(-1 * clamp(10px, 2.2vw, 32px));
    border: clamp(3px, 0.4vw, 5px) solid var(--pill); border-radius: 24%; background: var(--pill);
    box-shadow: 0 0 0 1px oklch(0.2 0.03 270 / 0.12), 0 16px 30px -10px oklch(0.15 0.1 270 / 0.6);
    rotate: -9deg; transition: rotate var(--dur-4) var(--ease-out), scale var(--dur-4) var(--ease-out); translate: var(--sx, 0) var(--sy, 0);
  }
  .screen:hover .sticker { rotate: -3deg; scale: 1.05; }
  @media (max-width: 960px) { .sticker { inset-inline-start: -6px; inset-block-start: -26px; } }

  /* hero entrance: lines rise out of a mask, the screen settles. Skipped for reduced motion and always ends visible. */
  @media (prefers-reduced-motion: no-preference) {
    .hero__line { overflow: hidden; padding-block: 0.08em; margin-block: -0.08em; }
    .hero__line > * { animation: line-up 1000ms var(--ease-out) both; }
    .hero__line:nth-child(2) > * { animation-delay: 110ms; }
    .hero__eyebrow { animation: fade-in 700ms var(--ease-out) both; }
    .hero__copy > * { animation: fade-up 800ms var(--ease-out) both; }
    .hero__copy > :nth-child(1) { animation-delay: 240ms; } .hero__copy > :nth-child(2) { animation-delay: 320ms; } .hero__copy > :nth-child(3) { animation-delay: 400ms; }
    .screen__frame { animation: screen-in 1100ms var(--ease-out) 160ms both; }
    .sticker { animation: sticker-in 900ms var(--ease-out) 650ms both; }
  }
  @keyframes line-up { from { transform: translateY(108%); } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
  @keyframes screen-in { from { transform: translateY(28px) scale(0.975); clip-path: inset(0 0 12% 0 round 16px); } to { clip-path: inset(0 round 16px); } }
  @keyframes sticker-in { from { scale: 0.4; rotate: 14deg; opacity: 0; } }

  /* ===== numbers ===== */
  .specs { position: relative; }
  .specs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
  .spec { display: flex; flex-direction: column; padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem) clamp(1rem, 0.6rem + 1.4vw, 2rem); border-inline-start: 1px solid var(--line); overflow: hidden; border-radius: 0; }
  .spec:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .spec .num { order: -1; font: italic 900 var(--fs-num)/0.9 var(--font-display); letter-spacing: -0.004em; padding-inline-end: 0.1em; }
  .num small { font-size: 0.34em; margin-inline-start: 0.14em; letter-spacing: 0.04em; }
  .spec dt { margin-block: var(--s-3) var(--s-1); font: 600 0.8125rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
  .spec__note { font-size: 0.9375rem; line-height: 1.45; color: var(--text-3); max-inline-size: 22ch; }
  @media (max-width: 760px) {
    .specs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spec:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
    .spec:nth-child(n+3) { border-top: 1px solid var(--line); }
  }

  /* ===== bento ===== */
  .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
  .cell { display: flex; flex-direction: column; gap: var(--s-5); padding: clamp(1.25rem, 1rem + 1vw, 2rem); overflow: hidden; min-inline-size: 0; }
  .cell p { color: var(--text-2); }
  .cell__text { display: flex; flex-direction: column; gap: var(--s-3); position: relative; z-index: 2; }
  .cell__fine { font-size: 0.875rem; line-height: 1.5; color: var(--text-3) !important; }
  .cell--teleport { grid-column: span 7; grid-row: span 2; }
  .cell--teleport .h3 { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.6rem); }
  .cell--unlock { grid-column: span 5; }
  .cell--guard { grid-column: span 5; justify-content: flex-end; min-block-size: 22rem; }
  .cell--loadouts { grid-column: span 7; }
  .cell--shortcuts { grid-column: span 5; }
  @media (max-width: 960px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cell--teleport, .cell--loadouts, .cell--shortcuts { grid-column: 1 / -1; grid-row: auto; }
    .cell--unlock, .cell--guard { grid-column: span 1; grid-row: auto; }
    .cell--guard { min-block-size: 26rem; }
    .cell--shortcuts { flex-direction: row; align-items: stretch; }
    .cell--shortcuts .cell__text { flex: 1 1 40%; }
    .cell--shortcuts .icons { flex: 1 1 60%; }
  }
  @media (max-width: 640px) {
    .bento { grid-template-columns: 1fr; }
    .cell--unlock, .cell--guard { grid-column: 1 / -1; }
    .cell--guard { min-block-size: 22rem; }
    .cell--shortcuts { flex-direction: column; }
  }

  .chain { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: c; margin-block: var(--s-1); }
  .chain li { counter-increment: c; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em 0.85em 0.5em 0.5em; border-radius: var(--r-pill); font-size: 0.8125rem; line-height: 1.1; font-weight: 500; color: var(--text-2); box-shadow: 0 0 0 1px var(--line-2); }
  .chain li::before { content: counter(c); display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; font: 600 0.75rem/1 var(--font-mono); background: var(--blue-soft); color: var(--blue-text); }

  .map-fig { margin: 0; margin-block-start: auto; display: grid; gap: var(--s-3); }
  .map-fig figcaption { font-size: 0.8125rem; line-height: 1.45; color: var(--text-3); max-inline-size: 46rem; }
  .map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-2); overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); background: var(--bg-sunk); }
  .map picture, .map img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .map__path { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
  .map__path path { fill: none; stroke: var(--blue); stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 2 9; filter: drop-shadow(0 0 5px color-mix(in oklab, var(--blue) 80%, transparent)); }
  .map__pin { position: absolute; inset-inline-start: 70%; inset-block-start: 50%; translate: -50% -100%; display: grid; justify-items: center; }
  .map__pin .i { inline-size: 40px; block-size: 40px; fill: var(--blue); stroke: oklch(0.99 0.005 262); stroke-width: 1.6; filter: drop-shadow(0 6px 10px oklch(0.1 0.05 262 / 0.5)); }
  .map__pin b, .map__you { font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
  .map__pin b { position: absolute; inset-block-end: calc(100% + 4px); padding: 0.55em 0.85em; border-radius: var(--r-pill); background: oklch(0.14 0.02 268 / 0.86); color: oklch(0.98 0.004 268); white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .map__pin::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 26px; block-size: 10px; border-radius: 50%; background: color-mix(in oklab, var(--blue) 55%, transparent); filter: blur(3px); }
  .map__you { position: absolute; inset-inline-start: 27%; inset-block-start: 42%; translate: -50% 30px; display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: oklch(0.14 0.02 268 / 0.86); color: oklch(0.98 0.004 268); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .pad { display: inline-grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--blue); color: var(--on-blue); font: 700 0.75rem/1 var(--font-body); }
  .pad--sq { background: oklch(0.98 0.004 268); color: oklch(0.2 0.03 268); }
  .pad--sq i { display: block; inline-size: 9px; block-size: 9px; border: 2px solid currentColor; border-radius: 2px; }
  @media (prefers-reduced-motion: no-preference) {
    .map__path path { animation: dash-flow 3s linear 3; }
    .map__pin .i { animation: pin-drop 900ms var(--ease-out) both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
  }
  @keyframes dash-flow { to { stroke-dashoffset: -88; } }
  @keyframes pin-drop { from { translate: 0 -30px; opacity: 0; } }

  /* everything unlocked */
  .unlock { display: grid; gap: var(--s-4); margin-block-start: auto; }
  .switch { display: inline-flex; align-items: center; gap: var(--s-3); min-block-size: 44px; align-self: flex-start; border-radius: var(--r-pill); }
  .switch__track { position: relative; inline-size: 56px; block-size: 32px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--text) 16%, transparent); transition: background-color var(--dur-3) var(--ease-out); }
  .switch__thumb { position: absolute; inset: 4px auto 4px 4px; inline-size: 24px; border-radius: 50%; background: oklch(0.99 0.004 268); box-shadow: 0 2px 6px oklch(0.1 0.05 268 / 0.4); transition: translate var(--dur-3) var(--ease-out); }
  .switch[aria-checked="true"] .switch__track { background: var(--blue); }
  .switch[aria-checked="true"] .switch__thumb { translate: 24px 0; }
  .switch__label { font-weight: 600; letter-spacing: -0.012em; }
  .shelves { display: grid; gap: 8px; }
  .shelves li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-2); background: color-mix(in oklab, var(--text) 4%, transparent); font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
  .shelves li > span { flex: 1; }
  .shelves .i { color: var(--blue-text); }
  .shelves i { inline-size: 26px; block-size: 26px; border-radius: 7px; background: var(--blue); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3); transition: opacity var(--dur-3), filter var(--dur-3), scale var(--dur-3) var(--ease-out); }
  .shelves i:nth-of-type(2n) { background: var(--violet-display); }
  .unlock[data-unlocked="false"] .shelves i { opacity: 0.35; filter: grayscale(1); scale: 0.88; background: var(--line-2); box-shadow: none; }
  .unlock[data-unlocked="false"] .shelves .i { color: var(--text-3); }

  /* fall-through guard: text sits on the empty dark rooftop at the right; the dashed guard line runs under the skater's board */
  .cell--guard { --guard-y: 84%; padding: 0; gap: 0; min-block-size: 22rem; justify-content: flex-end; }
  .guard-shot { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
  .guard-shot picture, .guard-shot img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 30% 50%; }
  .guard-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, oklch(0.1 0.03 268 / 0.95) 26%, oklch(0.1 0.03 268 / 0.72) 52%, oklch(0.1 0.03 268 / 0) 84%); }
  .guard-line { position: absolute; z-index: 1; inset-inline: 0; inset-block-start: var(--guard-y); block-size: 0; }
  .guard-line::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -1px; block-size: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 14px, transparent 14px 22px); box-shadow: 0 0 14px 2px color-mix(in oklab, var(--blue) 70%, transparent); -webkit-mask-image: linear-gradient(to right, #000 0 34%, transparent 58%); mask-image: linear-gradient(to right, #000 0 34%, transparent 58%); }   /* the mask lives on the dashes only: on the container it would also clip the label */
  .guard-line b { position: absolute; inset-inline-start: 14px; inset-block-end: 9px; padding: 0.5em 0.8em; border-radius: var(--r-pill); background: oklch(0.1 0.03 268 / 0.86); color: oklch(0.97 0.005 268); font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
  .cell--guard .cell__text { position: relative; z-index: 2; margin-inline-start: auto; max-inline-size: 58%; padding: clamp(1.25rem, 1rem + 1vw, 2rem); color: oklch(0.97 0.005 268); }
  .cell--guard .h3 { font-size: clamp(1.6rem, 1.15rem + 1.05vw, 2.15rem); }
  .cell--guard .cell__text p { color: oklch(0.88 0.01 268); }
  .cell--guard .tag--blue { background: oklch(0.1 0.03 268 / 0.55); color: oklch(0.82 0.12 250); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  @media (max-width: 960px) {
    .cell--guard { --guard-y: 89%; min-block-size: 0; justify-content: flex-start; }
    .guard-shot { position: relative; inset: auto; aspect-ratio: 16 / 10; border-radius: var(--r-3) var(--r-3) 0 0; }
    .guard-shot::after { display: none; }
    .guard-line::before { -webkit-mask-image: none; mask-image: none; }
    .cell--guard .cell__text { max-inline-size: none; margin-inline-start: 0; color: inherit; }
    .cell--guard .cell__text p { color: var(--text-2); }
    .cell--guard .tag--blue { background: var(--blue-soft); color: var(--blue-text); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  /* loadouts */
  .cell--loadouts { position: relative; }
  .cell--loadouts .cell__text { max-inline-size: 22rem; }
  .look { position: absolute; inset: 0 0 0 auto; inline-size: 44%; z-index: 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 38%); mask-image: linear-gradient(to right, transparent, #000 38%); }
  .look img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
  .verbs { display: flex; flex-wrap: wrap; gap: 8px; margin-block: var(--s-2); }
  .verbs li { display: inline-flex; align-items: center; gap: 0.55em; min-block-size: 40px; padding: 0 1em 0 0.8em; border-radius: var(--r-pill); font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
  .verbs .i { color: var(--blue-text); }
  @media (max-width: 640px) {
    .look { position: relative; inset: auto; inline-size: auto; aspect-ratio: 16 / 10; border-radius: var(--r-2); overflow: hidden; -webkit-mask-image: none; mask-image: none; order: -1; }
    .cell--loadouts .cell__text { max-inline-size: none; }
  }
  @media (min-width: 641px) and (max-width: 960px) { .cell--loadouts .cell__text { max-inline-size: 58%; } .look { inline-size: 40%; } }

  /* shortcuts */
  .icons { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-4) var(--s-5); padding: var(--s-5); border-radius: var(--r-2); background: var(--bg-sunk); box-shadow: inset 0 0 0 1px var(--line); min-block-size: 11rem; }
  .icons li { display: grid; justify-items: center; align-content: start; gap: 10px; inline-size: 104px; text-align: center; font-size: 0.8125rem; line-height: 1.25; color: var(--text-2); padding: 12px 6px; border-radius: var(--r-2); transition: background-color var(--dur-1); }
  .icons li:hover { background: var(--blue-soft); }
  .icons img { inline-size: 64px; block-size: 64px; border-radius: 15px; box-shadow: 0 6px 14px -6px oklch(0.2 0.1 260 / 0.45); }

  /* ===== mods ===== */
  .mods { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
  .mods__side { align-self: start; }
  @media (min-width: 1001px) and (min-height: 780px) { .mods__side { position: sticky; top: calc(var(--nav-h) + var(--nav-offset) + 24px); } }
  .mods__side .sec-head { margin-block-end: var(--s-6); }
  .planner { padding: var(--s-5); display: grid; gap: var(--s-3); }
  .planner__total { display: flex; align-items: baseline; gap: 0.25em; }
  .planner__big { font: italic 900 clamp(4.25rem, 3rem + 4.4vw, 7rem)/0.82 var(--font-display); letter-spacing: -0.004em; font-variant-numeric: tabular-nums; }
  .planner__unit { font: italic 800 clamp(1.5rem, 1.2rem + 1vw, 2.25rem)/1 var(--font-display-md); color: var(--blue-text); }
  .planner__count { font: 500 0.8125rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
  .planner__bar { display: flex; gap: 2px; block-size: 16px; border-radius: var(--r-pill); overflow: hidden; background: color-mix(in oklab, var(--text) 8%, transparent); margin-block: var(--s-2); }
  .seg { display: block; flex: 0 0 calc(var(--w) * 1%); min-inline-size: 4px; transition: flex-basis var(--dur-4) var(--ease-out), opacity var(--dur-3); }
  .seg.is-off { flex-basis: 0; min-inline-size: 0; opacity: 0; }
  .seg--map { background: var(--blue); }
  .seg--deck { background: var(--violet-display); }
  .seg--skater { background: color-mix(in oklab, var(--blue) 45%, var(--violet)); }
  .planner__legend { display: flex; gap: var(--s-4); font-size: 0.8125rem; color: var(--text-2); }
  .planner__legend li { display: inline-flex; align-items: center; gap: 0.5em; }
  .dot { inline-size: 10px; block-size: 10px; border-radius: 50%; }
  .dot--map { background: var(--blue); } .dot--deck { background: var(--violet-display); } .dot--skater { background: color-mix(in oklab, var(--blue) 45%, var(--violet)); }
  .planner__note { font-size: 0.875rem; color: var(--text-3); }

  .mods__list { min-inline-size: 0; }
  .group { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-block: var(--s-7) var(--s-4); padding-block-end: var(--s-3); border-bottom: 1px solid var(--line-2); font: 600 0.8125rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
  .group:first-child { margin-block-start: 0; }
  .group__n { color: var(--text-3); }
  .group--sm { margin-block-start: var(--s-6); }
  .modlist { display: grid; gap: var(--s-3); }
  .mod { border-radius: var(--r-3); background-color: var(--surface); box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 var(--hair-hi), var(--shadow-1); transition: opacity var(--dur-3), filter var(--dur-3); }
  .mod__row { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-4); cursor: pointer; border-radius: inherit; }
  .mod__check { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
  .mod__row:has(.mod__check:focus-visible) { outline: 2px solid var(--ring); outline-offset: 3px; }
  .mod__box { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--line-2); color: var(--on-blue); transition: background-color var(--dur-2), box-shadow var(--dur-2); }
  .mod__box .i { inline-size: 18px; block-size: 18px; stroke-width: 2.6; opacity: 0; scale: 0.5; transition: opacity var(--dur-2), scale var(--dur-2) var(--ease-out); }
  .mod__check:checked ~ .mod__box { background: var(--blue); box-shadow: none; }
  .mod__check:checked ~ .mod__box .i { opacity: 1; scale: 1; }
  .mod__icon { --rot: -3deg; display: block; inline-size: 88px; aspect-ratio: 1; border-radius: 20px; overflow: hidden; border: 3px solid var(--pill); background: var(--pill); box-shadow: 0 0 0 1px oklch(0.2 0.03 270 / 0.12), 0 10px 20px -8px oklch(0.15 0.1 270 / 0.5); rotate: var(--rot); transition: rotate var(--dur-4) var(--ease-out), scale var(--dur-4) var(--ease-out), filter var(--dur-3), opacity var(--dur-3); }
  .mod__icon img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .modlist .mod:nth-child(2n) .mod__icon { --rot: 2.5deg; }
  .modlist .mod:nth-child(3n) .mod__icon { --rot: -1.5deg; }
  .mod:hover .mod__icon { rotate: 0deg; scale: 1.06; }
  .mod__icon--face img { scale: 1.5; transform-origin: 36% 26%; }
  .mod__main { display: grid; gap: 6px; min-inline-size: 0; }
  .mod__name { font: italic 800 clamp(1.5rem, 1.15rem + 1.1vw, 2.15rem)/0.98 var(--font-display-md); text-transform: uppercase; letter-spacing: 0; word-spacing: 0.05em; }
  .mod__name em { font-size: 0.56em; letter-spacing: 0.05em; color: var(--violet-text); margin-inline-start: 0.5em; white-space: nowrap; }
  .mod__by { font: 500 0.75rem/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-3); }
  .mod__desc { font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); max-inline-size: 52ch; }
  .mod__size { align-self: start; text-align: end; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; color: var(--text-3); white-space: nowrap; }
  .mod__opt { display: block; margin-block-start: 8px; font: 500 0.75rem/1 var(--font-mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
  .mod__size b { font: italic 900 clamp(1.7rem, 1.4rem + 1vw, 2.3rem)/1 var(--font-display); color: var(--text); margin-inline-end: 0.15em; letter-spacing: 0; }
  .mod:has(.mod__check:not(:checked)) { opacity: 0.58; }
  .mod:has(.mod__check:not(:checked)) .mod__icon { filter: grayscale(1); }
  .mods__foot { margin-block-start: var(--s-5); font-size: 0.8125rem; color: var(--text-3); }
  html:not(.js) .mod__box, html:not(.js) .planner__note { display: none; }
  @media (max-width: 1000px) { .mods { grid-template-columns: 1fr; } .mods__side { position: static; } }
  @media (max-width: 640px) {
    .mod__row { grid-template-columns: auto auto minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3); align-items: start; }
    .mod__icon { inline-size: 64px; border-radius: 16px; }
    .mod__box { margin-block-start: 0.4rem; }
    .mod__size { grid-column: 3; text-align: start; margin-block-start: -2px; }
    .mod__desc { font-size: 0.875rem; }
  }

  /* ===== install ===== */
  .install-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); margin-block-end: var(--s-8); }
  .checklist { padding: var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
  .checklist ol { display: grid; margin-block-start: var(--s-2); }
  .checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding-block: 0.85rem; border-top: 1px solid var(--line); color: var(--text-2); font-size: 0.9688rem; line-height: 1.45; }
  .check { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: color-mix(in oklab, var(--ok) 16%, transparent); color: var(--ok); }
  .check .i { inline-size: 16px; block-size: 16px; stroke-width: 2.5; }
  .callout { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-3); background: var(--warn-bg); box-shadow: 0 0 0 1px color-mix(in oklab, var(--warn) 38%, transparent); }
  .callout__icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: color-mix(in oklab, var(--warn) 20%, transparent); color: var(--warn); }
  .callout p { color: var(--text-2); margin-block-start: var(--s-2); font-size: 0.9688rem; line-height: 1.55; max-inline-size: 46rem; }
  .callout__steps { display: inline-flex !important; align-items: center; gap: 10px; margin-block-start: var(--s-4) !important; font: 600 0.75rem/1 var(--font-mono) !important; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn) !important; }
  .callout__steps span { padding: 0.65em 0.95em; border-radius: var(--r-pill); box-shadow: 0 0 0 1px color-mix(in oklab, var(--warn) 45%, transparent); }
  @media (max-width: 960px) { .install-top { grid-template-columns: 1fr; } }
  @media (max-width: 480px) { .callout { grid-template-columns: 1fr; } }

  .steps { display: grid; }
  .step { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5) var(--gap); padding-block: var(--s-7); border-top: 1px solid var(--line-2); align-items: start; }
  .step:last-child { border-bottom: 1px solid var(--line-2); }
  .step__n { grid-column: 1 / span 3; font: italic 900 clamp(4.5rem, 3rem + 6vw, 9rem)/0.8 var(--font-display-xl); color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--text) 34%, transparent); transition: color var(--dur-4) var(--ease-out), -webkit-text-stroke-color var(--dur-4); }
  .step.is-in .step__n { color: var(--blue-display); -webkit-text-stroke-color: transparent; }
  .step__text { grid-column: 4 / span 4; display: grid; gap: var(--s-3); align-content: start; }
  .step__text p { color: var(--text-2); }
  .step__aside { font-size: 0.9375rem; color: var(--text-3) !important; padding-inline-start: var(--s-4); border-inline-start: 2px solid var(--blue); }
  .step__vis { grid-column: 8 / span 5; }
  .steps__fine { margin-block-start: var(--s-4); font-size: 0.8125rem; color: var(--text-3); }
  .step__screen { margin: 0; align-self: start; }
  .step__screen .screen__frame { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); }
  @media (max-width: 960px) {
    .step { grid-template-columns: auto 1fr; padding-block: var(--s-6); }
    .step__n { grid-column: 1; grid-row: 1; font-size: 4.5rem; }
    .step__text { grid-column: 2; }
    .step__vis { grid-column: 1 / -1; }
  }

  .mini { display: grid; gap: 8px; padding: var(--s-4); border-radius: var(--r-3); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
  .mini__row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); font-size: 0.875rem; }
  .mini__row b { display: block; font-weight: 600; letter-spacing: -0.01em; }
  .mini__row small { display: block; color: var(--text-3); font-size: 0.75rem; word-break: break-all; }
  .mini__dot { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; font: 700 0.75rem/1 var(--font-body); font-style: normal; }
  .mini__row--ok .mini__dot { background: color-mix(in oklab, var(--ok) 18%, transparent); color: color-mix(in oklab, var(--ok) 50%, var(--text)); }
  .mini__row--info .mini__dot { background: var(--blue-soft); color: var(--blue-text); }
  .mini__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block-end: 10px; margin-block-end: 2px; border-bottom: 1px solid var(--line); font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
  .mini--grid .mini__top { grid-column: 1 / -1; }
  .pips { display: flex; gap: 5px; }
  .pips li { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; font: 600 0.75rem/1 var(--font-mono); box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--text-3); }
  .pips li.on { background: var(--blue); color: var(--on-blue); box-shadow: none; }
  .pips li.done { background: color-mix(in oklab, var(--ok) 20%, transparent); color: color-mix(in oklab, var(--ok) 50%, var(--text)); box-shadow: none; }
  .mini--grid { grid-template-columns: 1fr 1fr; }
  .mini__chip { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-3); }
  .mini__chip i { inline-size: 18px; block-size: 18px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--line-2); flex: none; }
  .mini__chip.is-on { color: var(--text); box-shadow: 0 0 0 1px color-mix(in oklab, var(--blue) 50%, transparent); background: var(--blue-soft); }
  .mini__chip.is-on i { background: var(--blue); box-shadow: none; }
  .mini__btn { display: grid; place-items: center; min-block-size: 44px; padding-inline: 1em; border-radius: var(--r-pill); font-size: 0.875rem; font-weight: 600; box-shadow: 0 0 0 1px var(--line-2); color: var(--text-2); }
  .mini--grid .mini__btn { grid-column: 1 / -1; background: var(--blue); color: var(--on-blue); box-shadow: none; }
  .mini__tasks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mini__tasks span { padding: 10px 6px; text-align: center; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); font-size: 0.75rem; font-weight: 600; color: var(--text-3); }
  .mini__tasks .is-done { color: var(--text); box-shadow: 0 0 0 1px color-mix(in oklab, var(--ok) 45%, transparent); }
  .mini__tasks .is-active { color: var(--text); box-shadow: 0 0 0 1px color-mix(in oklab, var(--blue) 55%, transparent); background: var(--blue-soft); }
  .mini__bar { block-size: 12px; border-radius: 12px; background: color-mix(in oklab, var(--text) 8%, transparent); overflow: hidden; margin-block-start: 6px; }
  .mini__bar i { display: block; block-size: 100%; inline-size: 68%; border-radius: inherit; background: var(--blue); transform-origin: 0 50%; }
  @media (prefers-reduced-motion: no-preference) {
    .step.is-in .mini__bar i { animation: fill 2.4s var(--ease-out) both; }
  }
  @keyframes fill { from { transform: scaleX(0.04); } }

  /* ===== controls ===== */
  .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .control { padding: var(--s-6) var(--s-6) var(--s-5); display: grid; gap: var(--s-3); align-content: start; overflow: hidden; }
  .control p { color: var(--text-2); max-inline-size: 36rem; }
  .control--wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-4) var(--s-7); align-items: center; }
  .control--wide .keys { grid-row: 1 / span 2; }
  .control--wide h3, .control--wide p { grid-column: 2; }
  .try-hint { color: var(--text-3); }
  .keys { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); min-block-size: 112px; padding-block-end: 10px; }
  .keys--seq { gap: var(--s-3); }
  .keys--seq > .i { color: var(--text-3); }
  .step-chip { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 1.1em; border-radius: var(--r-pill); font: 600 0.8125rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 0 0 1px var(--line-2); color: var(--text-2); }
  .slash { font: 600 1.5rem/1 var(--font-mono); color: var(--text-3); }

  /* keycaps: real depth, they press down when you press the real key */
  .key {
    --depth: 9px; --kt1: light-dark(oklch(0.995 0.003 268), oklch(0.36 0.025 268)); --kt2: light-dark(oklch(0.955 0.008 268), oklch(0.29 0.025 268));
    --ks: light-dark(oklch(0.82 0.015 268), oklch(0.17 0.02 268)); --ke: light-dark(oklch(0.2 0.03 268 / 0.16), oklch(0.9 0.03 268 / 0.16));
    position: relative; display: inline-grid; place-items: center; min-inline-size: 96px; block-size: 96px; padding-inline: 22px; border-radius: 16px;
    font: 600 1.3rem/1 var(--font-mono); letter-spacing: 0.02em; color: var(--text); user-select: none;
    background: linear-gradient(180deg, var(--kt1), var(--kt2));
    box-shadow: 0 0 0 1px var(--ke), 0 var(--depth) 0 0 var(--ks), 0 calc(var(--depth) + 1px) 0 1px var(--ke), 0 calc(var(--depth) + 14px) 22px -8px oklch(0.2 0.05 268 / 0.4), inset 0 1px 0 oklch(1 0 0 / 0.55);
    transition: translate 80ms var(--ease-out), box-shadow 80ms var(--ease-out), background-color var(--dur-2);
    translate: 0 0;
  }
  .key > span { display: grid; place-items: center; }
  .key--wide { min-inline-size: 168px; font-size: 1.15rem; text-transform: capitalize; }
  .key--round { border-radius: 50%; min-inline-size: 84px; inline-size: 84px; block-size: 84px; padding: 0; font: 700 1.9rem/1 var(--font-body); }
  .key--tilde > span { font-size: 3.6rem; line-height: 1; translate: 0 0.14em; font-weight: 500; }
  .key--square .sq { display: block; inline-size: 26px; block-size: 26px; border: 3.5px solid currentColor; border-radius: 6px; }
  .key.is-pressed, .key:active { translate: 0 calc(var(--depth) - 2px); box-shadow: 0 0 0 1px var(--ke), 0 2px 0 0 var(--ks), 0 3px 0 1px var(--ke), 0 6px 10px -6px oklch(0.2 0.05 268 / 0.5), inset 0 1px 0 oklch(1 0 0 / 0.4); }
  .key.is-pressed { color: var(--blue-text); }
  .control:hover .key { translate: 0 2px; }
  .peek { margin-block-start: var(--s-3); }
  .peek__menu, .peek__term { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-2); background: var(--bg-sunk); box-shadow: inset 0 0 0 1px var(--line); font: 500 0.75rem/1.2 var(--font-mono); letter-spacing: 0.05em; color: var(--text-3); text-transform: uppercase; }
  .peek__menu b { color: var(--text); font-weight: 600; margin-block-end: 2px; }
  .peek__menu span { padding: 6px 8px; border-radius: 6px; background: color-mix(in oklab, var(--text) 5%, transparent); }
  .peek__term { display: flex; gap: 8px; color: var(--blue-text); font-size: 0.9375rem; }
  .peek__term i { font-style: normal; animation: blink 1.1s steps(2, start) 6; }
  @keyframes blink { to { visibility: hidden; } }
  @media (max-width: 800px) {
    .controls { grid-template-columns: 1fr; }
    .control--wide { grid-template-columns: 1fr; }
    .control--wide .keys, .control--wide h3, .control--wide p { grid-column: 1; grid-row: auto; }
    .key--wide { min-inline-size: 140px; }
  }

  .together { margin-block-start: var(--gap); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; }
  .together__shot { position: relative; margin: 0; min-block-size: 22rem; background: var(--bg-sunk); }
  .together__shot picture, .together__shot img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 38% 50%; }
  .together__cap { position: absolute; inset: auto auto 12px 12px; padding: 0.6em 0.95em; border-radius: var(--r-pill); background: oklch(0.12 0.02 268 / 0.62); color: oklch(0.97 0.005 268); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px oklch(1 0 0 / 0.14); font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; }
  .together__body { display: grid; gap: var(--s-4); align-content: center; justify-items: start; padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
  .together__body p { color: var(--text-2); max-inline-size: 30rem; }
  .together__ver { display: grid; gap: 4px; margin-block-start: var(--s-2); }
  .together__code { font: italic 900 clamp(2.4rem, 1.8rem + 2.2vw, 3.6rem)/0.95 var(--font-display); color: var(--blue-display); letter-spacing: 0; }
  @media (max-width: 800px) {
    .together { grid-template-columns: 1fr; }
    .together__shot { min-block-size: 0; aspect-ratio: 16 / 10; }
  }

  /* ===== safe by design ===== */
  .undo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-6) var(--s-5); border-radius: var(--r-3); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
  .undo__node { display: grid; gap: 6px; justify-items: center; text-align: center; }
  .undo__node b { font: 600 1rem/1.2 var(--font-body); letter-spacing: -0.015em; }
  .undo__node > span { font-size: 0.8125rem; color: var(--text-3); line-height: 1.35; max-inline-size: 22ch; }
  .fp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; inline-size: clamp(96px, 12vw, 132px); aspect-ratio: 1; padding: 8px; border-radius: 14px; background: var(--bg-sunk); box-shadow: inset 0 0 0 1px var(--line); margin-block-end: var(--s-2); }
  .fp i { border-radius: 3px; background: color-mix(in oklab, var(--text) 8%, transparent); }
  .fp i.on { background: var(--blue); }
  .fp i.on.v { background: var(--violet-display); }
  .undo__node--mid .fp { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 1px color-mix(in oklab, var(--violet) 40%, transparent); }
  .undo__node--end .fp { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 2px color-mix(in oklab, var(--ok) 70%, transparent); }
  .undo__arrow { display: grid; justify-items: center; gap: 6px; inline-size: clamp(60px, 9vw, 130px); font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
  .undo__arrow i { position: relative; display: block; inline-size: 100%; block-size: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px); }
  .undo__arrow i::after { content: ""; position: absolute; inset-inline-end: -1px; inset-block-start: -4px; inline-size: 10px; block-size: 10px; border-top: 2px solid var(--text-3); border-right: 2px solid var(--text-3); rotate: 45deg; }
  .undo__arrow--back { color: var(--violet-text); }
  .undo__arrow--back i { background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--violet-display) 80%, transparent) 0 8px, transparent 8px 14px); }
  .undo__arrow--back i::after { inset-inline-end: auto; inset-inline-start: -1px; rotate: -135deg; border-color: var(--violet-display); }
  .undo__fine { margin-block-start: var(--s-3); font-size: 0.8125rem; color: var(--text-3); text-align: center; }
  @media (max-width: 800px) and (min-width: 641px) { .undo { padding-inline: var(--s-4); gap: var(--s-3); } .fp { inline-size: 92px; } .undo__arrow { inline-size: 52px; } }
  @media (max-width: 640px) {
    .undo { grid-template-columns: 1fr; gap: var(--s-2); justify-items: center; padding-block: var(--s-5); }
    .undo__arrow { inline-size: auto; min-block-size: 56px; grid-template-columns: auto; align-content: center; }
    .undo__arrow i { inline-size: 2px; block-size: 36px; background: repeating-linear-gradient(180deg, var(--line-2) 0 6px, transparent 6px 11px); }
    .undo__arrow i::after { inset-inline-end: -4px; inset-block-start: auto; inset-block-end: -1px; rotate: 135deg; }
    .undo__arrow--back i { background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--violet-display) 80%, transparent) 0 6px, transparent 6px 11px); }
    .undo__arrow--back i::after { inset-inline-start: -4px; inset-block-start: -1px; inset-block-end: auto; rotate: -45deg; }
  }

  .pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-block-start: var(--s-8); }
  .pillars li { padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
  .pillars .i--lg { color: var(--blue-text); margin-block-end: var(--s-2); }
  .pillars p { color: var(--text-2); font-size: 0.9688rem; line-height: 1.55; }
  @media (max-width: 960px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .pillars { grid-template-columns: 1fr; } }

  .uninstall { margin-block-start: var(--gap); padding: var(--s-6); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; }
  .uninstall p { color: var(--text-2); margin-block-start: var(--s-3); }
  .path-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin-block: var(--s-4) var(--s-3); }
  .path-chips li { display: inline-flex; align-items: center; }
  .path-chips li > span { display: inline-flex; align-items: center; min-block-size: 36px; padding-inline: 0.95em; border-radius: var(--r-pill); font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.02em; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
  .path-chips li:not(:last-child)::after { content: ""; flex: none; inline-size: 7px; block-size: 7px; margin-inline: 11px 9px; border-top: 1.5px solid var(--text-3); border-right: 1.5px solid var(--text-3); rotate: 45deg; }
  .path-chips .is-end > span { background: var(--blue); color: var(--on-blue); box-shadow: none; font-weight: 600; }
  .where__h { font: 600 0.8125rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); margin-block-end: var(--s-3); }
  .where__h span { color: var(--text-3); font-weight: 400; }
  .where ul { display: grid; }
  .where li { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); gap: var(--s-3); align-items: center; padding-block: 6px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--text-3); }
  .copy { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-block-size: 44px; padding: 0 12px; border-radius: var(--r-2); text-align: start; min-inline-size: 0; transition: background-color var(--dur-1); }
  .copy:hover { background: color-mix(in oklab, var(--text) 6%, transparent); }
  .copy code { font: 500 0.8125rem/1.3 var(--font-mono); color: var(--text); overflow-wrap: anywhere; letter-spacing: 0; }
  .copy .i { color: var(--text-3); }
  .copy.is-done .i { color: var(--ok); }
  @media (max-width: 960px) { .uninstall { grid-template-columns: 1fr; padding: var(--s-5); gap: var(--s-5); } }
  @media (max-width: 560px) { .where li { grid-template-columns: 1fr; gap: 0; } .where li > span { padding-inline: 12px; padding-block-start: 6px; font-size: 0.75rem; } }

  /* ===== FAQ ===== */
  .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
  .faq__head { margin-block-end: 0; }
  @media (min-width: 1001px) and (min-height: 700px) { .faq__head { position: sticky; top: calc(var(--nav-h) + var(--nav-offset) + 24px); } }
  .faq__list { min-inline-size: 0; }
  .faq__help { margin-block-start: var(--s-6); padding: var(--s-5); display: grid; gap: var(--s-3); max-inline-size: 30rem; }
  .faq__help p { color: var(--text-2); font-size: 0.9688rem; }
  .faq__help .copy { box-shadow: inset 0 0 0 1px var(--line-2); }
  .qa { border-top: 1px solid var(--line-2); }
  .qa:last-child { border-bottom: 1px solid var(--line-2); }
  .qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-block-size: 64px; padding-block: var(--s-3); list-style: none; font: 600 1.125rem/1.3 var(--font-body); letter-spacing: -0.018em; border-radius: 6px; transition: color var(--dur-1); }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary:hover { color: var(--blue-text); }
  .qa summary .i { color: var(--text-3); transition: rotate var(--dur-3) var(--ease-out), color var(--dur-2); }
  .qa[open] summary .i { rotate: 135deg; color: var(--blue-text); }
  .qa__a { padding-block-end: var(--s-5); color: var(--text-2); max-inline-size: 38rem; line-height: 1.6; }
  .qa__a p + p { margin-block-start: var(--s-3); }
  @supports selector(details::details-content) {
    @media (prefers-reduced-motion: no-preference) {
      .qa::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete; }
      .qa[open]::details-content { block-size: auto; }
    }
  }
  @media (max-width: 1000px) { .faq { grid-template-columns: 1fr; } .faq__head { margin-block-end: var(--s-6); } }

  /* ===== download band ===== */
  .cta { position: relative; background: var(--blue); color: var(--on-blue); overflow: hidden; padding-block: var(--section-y); }
  .cta__grit { position: absolute; inset: 0; z-index: 3; background: url("../img/grit.png") 0 0 / 256px; filter: invert(1); opacity: 0.3; pointer-events: none; }
  .cta__in { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--gap); align-items: center; }
  .cta__text { grid-column: 1 / span 7; }
  .cta__logo { grid-column: 9 / -1; justify-self: center; }
  .eyebrow--onblue { color: color-mix(in oklab, var(--on-blue) 80%, transparent); }
  .eyebrow--onblue::after { background: color-mix(in oklab, var(--on-blue) 35%, transparent); }
  .cta__title { font: italic 900 clamp(4.5rem, 2rem + 11vw, 11.5rem)/0.8 var(--font-display-xl); text-transform: uppercase; letter-spacing: -0.006em; margin-block: var(--s-5); }
  .cta__sub { font-size: var(--fs-lg); line-height: 1.5; max-inline-size: 32rem; color: color-mix(in oklab, var(--on-blue) 88%, transparent); }
  .cta__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4) var(--s-5); margin-block-start: var(--s-6); }
  .cta__note { font: 500 0.8125rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
  .files { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: var(--s-6); }
  .files li { display: inline-flex; align-items: center; gap: 0.6em; min-block-size: 44px; padding: 0 1em 0 0.85em; border-radius: var(--r-pill); background: oklch(1 0 0 / 0.16); box-shadow: inset 0 0 0 1px oklch(0.16 0.03 262 / 0.24); font-size: 0.875rem; font-weight: 600; }
  .files small { font-weight: 500; font-size: max(0.75rem, 0.8em); opacity: 0.75; }
  .cta__logo img { inline-size: clamp(220px, 28vw, 420px); aspect-ratio: 1; rotate: 5deg; translate: var(--sx, 0) var(--sy, 0); transition: rotate var(--dur-4) var(--ease-out), scale var(--dur-4) var(--ease-out); }
  .cta__logo img:hover { rotate: 0deg; scale: 1.03; }
  @media (max-width: 960px) {
    .cta__text { grid-column: 1 / -1; }
    .cta__logo { grid-column: 1 / -1; justify-self: start; order: -1; }
    .cta__logo img { inline-size: 168px; }
  }

  /* ===== footer ===== */
  .footer { position: relative; z-index: 2; background: var(--bg); padding-block-start: var(--s-9); overflow: hidden; }
  .footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--gap); }
  .footer__brand { grid-column: 1 / span 3; display: grid; gap: var(--s-4); align-content: start; }
  .footer__brand p { font-size: 0.9375rem; color: var(--text-3); max-inline-size: 22rem; }
  .footer__nav { grid-column: 4 / span 2; }
  .footer__credits { grid-column: 6 / span 4; }
  .footer__legal { grid-column: 10 / span 3; }
  /* the 12-column footer only works on wide screens: tablets get brand on top + two rows, phones stack it all */
  @media (max-width: 960px) {
    .footer__brand { grid-column: 1 / -1; }
    .footer__brand p { max-inline-size: 34rem; }
    .footer__nav { grid-column: 1 / span 4; }
    .footer__credits { grid-column: 5 / span 8; }
    .footer__legal { grid-column: 1 / -1; }
  }
  @media (max-width: 600px) {
    .footer__nav, .footer__credits, .footer__legal { grid-column: 1 / -1; }
    .footer__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  }
  .footer__h { font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); margin-block-end: var(--s-4); }
  .footer ul { display: grid; gap: 2px; }
  .footer__nav a { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; color: var(--text-2); text-decoration: none; font-size: 0.9375rem; }
  .footer__nav a:hover { color: var(--blue-text); text-decoration: underline; }
  .footer__credits li, .footer__legal p { font-size: 0.875rem; line-height: 1.55; color: var(--text-3); padding-block: 4px; }
  .footer__credits a { color: var(--text-2); }
  .footer__credits a:hover { color: var(--blue-text); }
  .fx-toggle { display: inline-flex; align-items: center; gap: 0.7em; min-block-size: 44px; margin-block-start: var(--s-3); font-size: 0.875rem; color: var(--text-2); cursor: pointer; }
  .fx-toggle input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
  .fx-toggle__box { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--line-2); transition: background-color var(--dur-2); }
  .fx-toggle input:checked + .fx-toggle__box { background: var(--blue); box-shadow: none; }
  .fx-toggle input:checked + .fx-toggle__box::after { content: ""; inline-size: 10px; block-size: 6px; border-left: 2.5px solid var(--on-blue); border-bottom: 2.5px solid var(--on-blue); rotate: -45deg; translate: 0 -1px; }
  .fx-toggle:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 8px; }
  .footer__word { container-type: inline-size; margin-block-start: clamp(3rem, 2rem + 4vw, 6rem); text-align: center; line-height: 0.8; overflow: hidden; padding-block-end: clamp(1.5rem, 1rem + 2vw, 3rem); }
  .footer__word .ink {
    --ink-base: linear-gradient(transparent, transparent); display: inline-block;
    font: italic 900 calc(100cqw / 6.9)/0.8 var(--font-display-xl); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
    -webkit-text-stroke: 1.5px var(--line-2);
  }
}

/* ---------------------------------------------------------------- utilities + scroll reveals */
@layer utilities {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (pointer: fine) {
      .sec-head, .cell, .step, .pillars > li, .control, .together, .uninstall, .undo, .checklist, .callout, .planner, .mod {
        animation: rise linear both; animation-timeline: view(); animation-range: entry 2% entry 36%;
      }
    }
  }
  @keyframes rise { from { opacity: 0; translate: 0 32px; } }
  /* touch screens: a timed one-shot rise, triggered by main.js (.rv → .rv-in), never tied to the thumb */
  @media (prefers-reduced-motion: no-preference) {
    .rv:not(.rv-in) { opacity: 0; translate: 0 22px; }
    .rv-in { animation: rv-rise 650ms var(--ease-out) var(--rv-d, 0ms) both; }
  }
  @keyframes rv-rise { from { opacity: 0; translate: 0 22px; } }
  .no-theme-transition * { transition: none !important; }
}

@media (forced-colors: active) {
  .card, .mod, .planner, .callout, .undo, .mini, .screen__frame, .nav, .key, .btn, .chain li, .step-chip, .pill-btn, .copy, .icon-btn, .verbs li, .files li, .pillars li, .qa { border: 1px solid CanvasText; }
  .switch__track { border: 2px solid CanvasText; }
  .mod__box, .fx-toggle__box, .pips li, .mini__chip i, .check, .fp { border: 1px solid CanvasText; }
  .mod__check:checked ~ .mod__box, .fx-toggle input:checked + .fx-toggle__box { background: Highlight; }
  .seg, .dot { forced-color-adjust: none; }
  .key { forced-color-adjust: auto; }
}

/* ---------------------------------------------------------------- polish layer */
@layer utilities {
  .nav__progress { display: none; }   /* shown only where scroll-driven animation exists (below) */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      /* reading progress: a 2px line ON the pill's bottom edge, clipped by the pill's own rounded shape so it hugs the curve
         at both ends (it used to float 26px in from each side, starting under the logo). Transform-only, so it stays on the
         compositor while a phone scrolls. */
      .nav__progress { display: block; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
      .nav__progress i {
        position: absolute; inset: auto 0 0 0; block-size: 2px;
        background: linear-gradient(90deg, var(--blue), var(--violet-display)); transform-origin: 0 50%; transform: scaleX(0);
        animation: read-progress linear both; animation-timeline: scroll(root);
      }
    }
  }
  @keyframes read-progress { to { transform: scaleX(1); } }

  /* the theme switch reveals outward from the toggle (View Transitions, Chromium/Safari/Firefox 144+; others just swap) */
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
    ::view-transition-old(root) { z-index: 1; }
    ::view-transition-new(root) { z-index: 2; animation: theme-reveal 720ms var(--ease-out) both; }
  }
  @keyframes theme-reveal {
    from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
    to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); }
  }

  /* browsers without light-dark(): serve the dark look as-is and hide the toggle */
  @supports not (color: light-dark(red, blue)) {
    :root {
      color-scheme: dark;
      --bg: oklch(0.145 0.016 268); --bg-sunk: oklch(0.115 0.014 268); --surface: oklch(0.185 0.018 268);
      --line: oklch(0.9 0.03 268 / 0.10); --line-2: oklch(0.9 0.03 268 / 0.20); --hair-hi: oklch(0.85 0.06 255 / 0.09);
      --text: oklch(0.965 0.006 268); --text-2: oklch(0.820 0.012 268); --text-3: oklch(0.700 0.014 268);
      --blue-text: oklch(0.76 0.14 250); --violet-text: oklch(0.80 0.12 295); --blue-display: var(--blue); --violet-display: oklch(0.66 0.21 293);
      --ring: oklch(0.76 0.14 250); --ok: oklch(0.78 0.15 155); --warn: oklch(0.84 0.14 85); --warn-bg: oklch(0.24 0.05 80);
      --sh-a: transparent; --sh-b: transparent; --underglow: color-mix(in oklab, var(--blue) 42%, transparent);
    }
    body { --grit-invert: 0 !important; }
    .key { --kt1: oklch(0.36 0.025 268); --kt2: oklch(0.29 0.025 268); --ks: oklch(0.17 0.02 268); --ke: oklch(0.9 0.03 268 / 0.16); }
    [data-theme-toggle] { display: none; }
  }
}