/* ==========================================================================
   CHIBBI CONSOLE
   The web port of the app's design system. Tokens, surface tiers and chrome
   mirror AppStyle.swift and PepliiBoyChrome.swift so the site and the apps
   read as one system.

   THE THREE DIALS (PixelPanel statics in the app):
     radiusScale 0.4   ->  every corner value below is already multiplied
     borderWidth 2     ->  --bw
     shadowOffset 4    ->  --sh

   THE THREE SURFACE TIERS, decided by ROLE not by call site:
     tier 0  .t0   fill only, no edge
     tier 1  .t1   fill + hard ink edge
     tier 2  .t2   fill + ink edge + solid offset block shadow (you PRESS it)

   THE INK-ISLAND RULE: dark surfaces are dark in every appearance, so they
   cannot inherit page text colours. Anything inside .ink reads its text from
   the on-ink token trio instead.

   THREE FACES, ONE JOB EACH (PRODUCT.md, and the rule this file is built on):
     Pixelify Sans   game personality. Display headings and console chrome ONLY.
     SF Pro          functional information. Everything a visitor actually READS:
                     body, leads, subheads, nav, questions, tables, legal copy.
     Press Start 2P  a rare retro readout. At most one instance per page.
   Pixelify is a bitmap display face with a small x-height. Below ~1rem, and
   anywhere a sentence needs to be read rather than glanced at, it is the wrong
   tool. Putting it on nav links, FAQ questions and table headers is what made
   the first pass of this site unreadable.

   Corners are CHAMFERED, never rounded, with one exception: the console
   bezel itself, which is the physical device.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* surfaces */
  --ink:            #20202A;   /* OutlineInk        */
  --page:           #E7E6E9;   /* PageBackground    */
  --card:           #E5E5E7;   /* CardSurface       */
  --shell:          #DBD8DB;   /* ConsoleShell      */
  --hud:            #D4D5BF;   /* HudSurface, cream */
  --ink-surface:    #1C1D23;   /* InkSurface        */
  --stage:          #F4F2FF;   /* StageTint         */
  --track:          #EFEFEF;   /* ProgressTrack     */

  /* text on light */
  --text:           #20202A;
  --text-soft:      #2A2A2A;   /* TextPrimarySoft   */
  /* The app's TextMuted (#63636B) measures 4.21:1 on the console shell, which
     fails AA for the nav and footer copy sitting on it. Darkened one step for
     web: 5.93 on page, 5.86 on card, 5.22 on shell. */
  --muted:          #55555E;

  /* text on ink islands */
  --on-ink:         #E8E8ED;   /* OnInkSurface  14.79:1 */
  --on-ink-muted:   #9A9AA8;   /* OnInkMuted     6.50:1 */
  --on-ink-accent:  #9E7BEB;   /* OnInkAccent    5.19:1 */

  /* brand + cta */
  --brand:          #5D55D7;   /* BrandPurple. SURFACES only: fills, meters, chips */
  /* BrandPurple as TEXT measures 4.46:1 on card and 3.76:1 on the cream HUD,
     so links get their own darker step: 5.54 page, 5.47 card, 4.61 cream. */
  --brand-text:     #4F47C6;
  --on-brand:       #FFFFFF;   /* OnBrandPurple: label colour ON a --brand fill */
  --brand-bright:   #6F45E8;
  --glow:           #B98CF0;
  --cta:            #7544C7;   /* CtaFill, white label 5.42:1 */
  --cta-bevel:      #8859D2;
  --cta-shade:      #402088;
  --on-cta:         #FFFFFF;

  /* status */
  --success:        #1B7439;
  --warn:           #B73455;
  --elite:          #895D00;

  /* dials */
  --bw: 2px;
  --sh: 4px;

  /* chamfer sizes, already scaled by 0.4 */
  --r-card: 8px;    /* AppRadius.card    20 */
  --r-tile: 6px;    /* AppRadius.tile    14 */
  --r-ctl:  5px;    /* AppRadius.control 12 */
  --r-chip: 3px;    /* AppRadius.chip     8 */

  /* faces: pixel = game personality, sans = functional, retro = rare readout */
  --pixel: "Pixelify Sans", "Courier New", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --retro: "Press Start 2P", "Pixelify Sans", monospace;

  /* panel defaults, overridden per element */
  --c: var(--r-tile);
  --fill: var(--card);

  /* A panel's edge follows its FILL, not the page. Light fill takes the ink
     edge; a panel filled with the ink surface takes the on-ink rule instead,
     or its border disappears into the island it is sitting on. */
  --edge: var(--ink);
}

/* NOTE ON THE CHAMFER AND THE EDGE
   Both are written out longhand in every rule that needs them, and that is
   deliberate. A var() inside a custom property is substituted against the
   element the property is DECLARED on, not the one that uses it, so hoisting
   `--chamfer` / `--edged` into :root silently freezes them at :root's --c and
   --fill and every panel comes out the same size and colour. Longhand here,
   resolved per element, is the working version.

   The edge is two background layers: the fill painted to the padding box, ink
   painted to the border box under a transparent border. clip-path then cuts
   the corners diagonally through both, which is what makes the chamfer read
   as a stroked edge rather than a notch. */

@media (prefers-color-scheme: dark) {
  :root {
    --ink:            #E8E8ED;
    --page:           #0A0A0C;
    --card:           #1C1C1E;
    --shell:          #26262B;
    --hud:            #26281F;
    --ink-surface:    #16171C;
    --stage:          #232138;
    --track:          #2C2C2E;

    --text:           #E8E8ED;
    --text-soft:      #E4E4EA;
    --muted:          #9A9AA5;

    --on-ink:         #F2F2F6;
    --on-ink-muted:   #A8A8B4;
    --on-ink-accent:  #B9A2FF;

    --brand:          #9C93FF;
    --brand-text:     #A79FFF;
    --on-brand:       #12101F;   /* dark mode's brand is light, so the label flips */
    --brand-bright:   #AB90FF;
    --glow:           #CBA6FF;
    --cta:            #A98CF0;
    --cta-bevel:      #C3ADFA;
    --cta-shade:      #6F4BB8;
    --on-cta:         #12101F;

    --success:        #46C46E;
    --warn:           #FF7089;
    --elite:          #E0B44A;
  }
}

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

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

body {
  font-family: var(--sans);
  font-size: 1.0625rem;          /* 17px. This is a reading surface. */
  line-height: 1.65;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--brand); color: #fff; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--page);
  padding: 12px 18px; font-family: var(--pixel);
}
.skip:focus { left: 12px; top: 12px; }

.wrap { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(820px, 100% - 2.5rem); margin-inline: auto; }

/* ----------------------------------------------------------- typography -- */

/* THE DISPLAY FACE. h1 and h2 only: the two sizes big enough for a bitmap
   face to be read at a glance. Lowercase is brand voice and stays. No
   negative tracking; a pixel face has no room to give back. */
h1, h2, .pixel {
  font-family: var(--pixel);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--text);
  text-wrap: balance;
}
h1, h2 { text-transform: lowercase; }

h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }

/* THE READING FACE. Subheads are information, not decoration, so they sit in
   SF where they can be scanned. Weight and size carry the hierarchy instead
   of a face change. */
h3, h4 {
  font-family: var(--sans);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--text);
  text-wrap: balance;
}
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { max-width: 68ch; text-wrap: pretty; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.6; color: var(--text-soft); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* THE RARE READOUT. Press Start 2P has no lowercase and a punishing x-height,
   so it appears once per page, at a size that survives it. */
.readout {
  font-family: var(--retro);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.9;
}

/* A single named kicker is voice. An eyebrow above every section is
   scaffolding, so this is used sparingly and set in the reading face. */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 650;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: .7rem;
}

/* ------------------------------------------------------- surface tiers --- */
.t0, .t1, .t2, .btn, .dlg-in, .xp, .xp span {
  clip-path: polygon(
    var(--c) 0%, calc(100% - var(--c)) 0%,
    100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%,
    0% calc(100% - var(--c)), 0% var(--c));
}

.t1, .t2, .btn, .dlg-in {
  border: var(--bw) solid transparent;
  background:
    linear-gradient(var(--fill), var(--fill)) padding-box,
    linear-gradient(var(--edge), var(--edge)) border-box;
}

.t0 { background: var(--fill); }

.t2 { filter: drop-shadow(var(--sh) var(--sh) 0 var(--edge)); }

/* Nesting degrades: a tier 1 inside a tier 1 loses its edge, exactly as the
   surfaceDepth environment key does in the app. Tier 2 never degrades. */
.t1 .t1:not(.keep-edge) { border-color: transparent; background: var(--fill); }

/* An ink island. Dark in EVERY appearance, so it cannot inherit the page's
   text colours: it re-declares the on-ink trio for everything inside it.
   .well and .sec--ink are ink islands by construction, so they are folded in
   here rather than each having to remember to also carry .ink. */
:is(.ink, .well, .sec--ink) {
  --fill: var(--ink-surface);
  --edge: var(--on-ink-muted);
  color: var(--on-ink);
}
.ink { background: var(--ink-surface); }

/* A light-filled panel keeps its dark edge even while sitting on an island:
   the edge follows the fill, and the dialogue box and HUD are cream. */
:is(.ink, .well, .sec--ink) :is(.dlg, .dlg-in, .hud, .tile, .btn--cta) { --edge: var(--ink); }

/* ...and so does its TEXT. Without this the island's on-ink trio leaks into
   the cream panels nested inside it and the dialogue box renders grey on
   cream at 1.86:1. Text colour follows the surface it sits on, not the
   surface that surface sits on. */
:is(.ink, .well, .sec--ink) :is(.dlg, .hud, .tile, .summary)
  :is(p, li, .lead, .muted, .small, strong, b, h1, h2, h3, h4) { color: var(--ink); }

:is(.ink, .well, .sec--ink) :is(h1, h2, h3, h4, strong, b) { color: var(--on-ink); }
:is(.ink, .well, .sec--ink) :is(p, li, .lead, .muted, .small) { color: var(--on-ink-muted); }
:is(.ink, .well, .sec--ink) :is(.eyebrow, .accent) { color: var(--on-ink-accent); }
:is(.ink, .well, .sec--ink) a:not(.btn) { color: var(--on-ink-accent); }

.accent { color: var(--brand-text); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  --c: var(--r-ctl);
  --fill: var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;              /* 44pt target, plus the border */
  padding: 0 22px;
  filter: drop-shadow(var(--sh) var(--sh) 0 var(--ink));
  font-family: var(--pixel);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: transform .08s steps(2), filter .08s steps(2);
}
.btn:hover { transform: translate(1px, 1px); filter: drop-shadow(3px 3px 0 var(--ink)); }
.btn:active { transform: translate(var(--sh), var(--sh)); filter: drop-shadow(0 0 0 var(--ink)); }

/* the primary CTA: chamfered purple block, white label, bevelled like the
   mockup's START button */
.btn--cta {
  --fill: var(--cta);
  color: var(--on-cta);
  box-shadow: inset 0 3px 0 var(--cta-bevel), inset 0 -3px 0 var(--cta-shade);
}

/* inside an ink island the CTA inverts to paper-on-ink */
:is(.ink, .well, .sec--ink) .btn--cta { --fill: var(--on-ink); color: var(--ink-surface); box-shadow: none; }

.btn--sm { min-height: 40px; padding: 0 15px; font-size: .88rem; --sh: 3px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1.15rem; align-items: center; }

/* --------------------------------------------------------- console frame -- */
/* ConsoleFrame: device bezel, wordmark bar, HUD, then the well.              */
.console {
  background: var(--shell);
  border: 5px solid var(--ink);
  border-radius: 44px;           /* the ONE rounded corner in the system */
  padding: clamp(12px, 2vw, 18px);
  max-width: 1000px;
  margin-inline: auto;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 14px;
  font-family: var(--pixel);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark .orb {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--glow), var(--brand) 62%);
  border: 2px solid var(--ink);
}

/* PlayerHUD: cream panel, avatar chip, level, xp meter, stat tiles */
.hud {
  --c: var(--r-tile);
  --fill: var(--hud);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 16px);
  padding: 12px 14px;
  margin-bottom: 12px;
  color: var(--ink);
}
.hud-face {
  --c: var(--r-chip);
  --fill: var(--stage);
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center;
  overflow: hidden;
}
.hud-face img { width: 44px; height: 44px; image-rendering: pixelated; }
.hud-id { min-width: 0; flex: 1; }
.hud-name {
  font-family: var(--pixel); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink);
}
/* the meter never runs the full width of the panel, same as the mockup */
.hud-meter { display: flex; align-items: center; gap: 8px; margin-top: 5px; max-width: 340px; }

/* Narrow: the stat tiles drop to their own row rather than squeezing the XP
   meter until it clips. The HUD is the first thing on the page; it does not
   get to be the thing that breaks. */
@media (max-width: 640px) {
  .hud { flex-wrap: wrap; row-gap: 12px; }
  .hud-id { flex: 1 1 auto; }
  .hud-meter { max-width: none; }
  .hud-stats { flex: 1 1 100%; }
  .hud-stats .tile { flex: 1 1 0; }
}
.lvl {
  --c: var(--r-chip); --fill: var(--brand);
  padding: 3px 9px;
  /* SF, not the pixel face: Pixelify's 2/8 and 3/9 are indistinguishable
     below about 1rem, and this chip renders a real number. */
  font-family: var(--sans); font-weight: 700; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--on-brand);
  flex: none;
}
.hud-stats { display: flex; gap: 8px; flex: none; }

/* PixelProgressBar */
.xp {
  --c: var(--r-chip); --fill: var(--track);
  position: relative; height: 16px; flex: 1; min-width: 70px;
}
.xp span { position: absolute; inset: 0 auto 0 0; background: var(--brand); }

/* statTile: bordered since v6, never borderless */
.tile {
  --c: var(--r-chip);
  --fill: var(--hud);
  padding: 5px 11px;
  text-align: center;
  color: var(--ink);
}
.tile b {
  display: block;
  font-family: var(--pixel); font-weight: 700; font-size: 1.1rem;
  line-height: 1.1;
}
.tile i {
  display: block; font-style: normal; margin-top: 1px;
  font-family: var(--sans); font-weight: 600; font-size: .68rem;
  letter-spacing: .07em; text-transform: uppercase; opacity: .8;
}

/* ScreenTitleBand: dark in both appearances, purple pixel title */
.band {
  background: var(--ink-surface);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 9px 16px;
  font-family: var(--pixel); font-weight: 700;
  font-size: clamp(1rem, 2.1vw, 1.18rem);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-ink-accent);
}
.band::before, .band::after {
  content: "◁▷"; letter-spacing: -.1em;
  color: var(--on-ink-muted); font-size: .7em;
}

/* SceneWell: the ink island. Square top so it merges with the band,
   chamfered bottom. Place full width, zero top gap. */
.well {
  --c: 10px;
  background: var(--ink-surface);
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    var(--c) 100%, 0% calc(100% - var(--c)));
  padding: clamp(22px, 4vw, 40px) clamp(18px, 3.5vw, 40px) clamp(18px, 3vw, 28px);
}

/* the deck below the well */
.deck { padding: 14px 6px 4px; }

/* DialogueBox: double ring, chamfered, with the ink caret */
.dlg {
  --c: var(--r-card);
  --fill: var(--hud);
  position: relative;
  padding: 5px;
  color: var(--ink);
}
.dlg-in {
  --c: var(--r-ctl);
  --fill: var(--hud);
  --bw: 1.5px;
  padding: 15px 40px 15px 18px;
}
.dlg p { color: var(--ink); max-width: none; }
.dlg .caret {
  position: absolute; right: 18px; bottom: 15px;
  width: 13px; height: 9px; background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ------------------------------------------------------------- sections -- */
.sec { padding: clamp(56px, 9vw, 104px) 0; }
.sec--tight { padding: clamp(38px, 6vw, 64px) 0; }
.sec--ink { background: var(--ink-surface); color: var(--on-ink); }

.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head p { margin-top: .85rem; }

/* SectionHeader: pixel 14 with a rule running off to the right */
.rule-head {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-weight: 650; font-size: .9rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.rule-head::after {
  content: ""; flex: 1; height: var(--bw); background: var(--ink); opacity: .3;
}
:is(.ink, .well, .sec--ink) .rule-head { color: var(--on-ink-muted); }
:is(.ink, .well, .sec--ink) .rule-head::after { background: var(--on-ink-muted); }

/* --------------------------------------------------------------- cards --- */
.grid { display: grid; gap: clamp(1.4rem, 2.6vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  --c: var(--r-card);
  padding: clamp(20px, 2.4vw, 26px);
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-soft); font-size: 1rem; }
:is(.ink, .well, .sec--ink) .card p { color: var(--on-ink-muted); }

/* numbered step card */
.step-n {
  --c: var(--r-chip); --fill: var(--brand);
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 1rem;
  font-family: var(--pixel); font-weight: 700; font-size: 1.05rem;
  color: var(--on-brand);
}

/* big stat readouts */
.stat-row { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2vw, 1.6rem); }
.stat {
  --c: var(--r-tile);
  flex: 1 1 150px;
  padding: 18px 16px;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--pixel); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1;
  color: var(--brand);
}
:is(.ink, .well, .sec--ink) .stat b { color: var(--on-ink-accent); }
.stat i {
  display: block; font-style: normal; margin-top: .6rem;
  font-family: var(--sans); font-weight: 600; font-size: .82rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
:is(.ink, .well, .sec--ink) .stat i { color: var(--on-ink-muted); }

/* --------------------------------------------------------------- ticker -- */
.ticker { overflow: hidden; border-block: var(--bw) solid var(--ink); padding: 11px 0; }
.ticker-track { display: flex; width: max-content; animation: slide 34s linear infinite; }
.ticker-track span {
  font-family: var(--pixel); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  padding: 0 1.5rem;
  white-space: nowrap;
}
.ticker-track span::after { content: "·"; margin-left: 3rem; color: var(--brand); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ----------------------------------------------------------------- nav --- */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: 12px clamp(1.25rem, 4vw, 2.5rem);
  background: var(--shell);
  border-bottom: var(--bw) solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 30px; height: 30px; image-rendering: pixelated; }
.brand span {
  font-family: var(--pixel); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.nav-links { display: flex; gap: .35rem; }
.nav-links a {
  font-family: var(--sans); font-weight: 550; font-size: .98rem;
  text-decoration: none; color: var(--text);
  padding: 10px 13px;
}
.nav-links a:hover { color: var(--brand-text); }
@media (max-width: 760px) { .nav-links { display: none; } }
@media (max-width: 560px) {
  .nav { padding-inline: 1rem; gap: .5rem; }
  .nav .btn { font-size: .88rem; padding: 0 13px; letter-spacing: .02em; }
  .brand span { font-size: .94rem; }
}
@media (max-width: 390px) { .brand span { display: none; } }

/* ----------------------------------------------------------------- faq --- */
.faq-item { --c: var(--r-tile); margin-bottom: .85rem; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 16px 18px; cursor: pointer; list-style: none;
  font-family: var(--sans); font-weight: 620; font-size: 1.05rem;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .15s steps(2);
}
.faq-item[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-item .ans { padding: 0 18px 18px; color: var(--text-soft); font-size: 1rem; max-width: 62ch; }
.faq-item .ans p + p { margin-top: .7rem; }

/* -------------------------------------------------------------- footer --- */
.footer { border-top: var(--bw) solid var(--ink); background: var(--shell); }
.foot-top {
  display: grid; gap: 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  padding: clamp(38px, 6vw, 60px) 0;
}
.foot-brand p { color: var(--text-soft); font-size: .98rem; margin-top: .9rem; }
.foot-col h4 {
  font-family: var(--sans); font-weight: 650; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .9rem;
}
.foot-col a {
  display: block; text-decoration: none; color: var(--text);
  font-size: .98rem; padding: 6px 0;
}
.foot-col a:hover { color: var(--brand-text); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  border-top: var(--bw) solid var(--ink);
  padding: 18px 0; font-size: .88rem; color: var(--muted);
}

/* --------------------------------------------------------------- motion -- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.reveal.in { opacity: 1; transform: none; }

/* Reduce Motion is honoured on every animation, same as the app. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
}