/* ============================================================
   Tessera — marketing homepage, "Bold mosaic" (Option 2a)
   The app's own Mono Serious design language at poster scale:
   Instrument Sans ≤600 over IBM Plex Mono labels, Ocean blue-cool
   greys, one mint accent (always with dark ink on it), one rationed
   gold, tight radii, tabular numerals, full-bleed colour bands.
   Motion is rationed: a handful of product demonstrations animate
   once, on reveal, and only under prefers-reduced-motion: no-preference.
   This stylesheet is scoped to index.html — the other marketing
   pages stay on styles.css until they're redesigned.
   ============================================================ */

/* ---------- Tokens ----------
   The Ocean ramp, the accent, the mono stack, the easing, gold, the
   alpha triplets, the shared shadows and the z ladder come from the app's
   token files and the marketing bridge (see tokens.bridge.css). This
   block holds only what is genuinely the homepage's own: the poster type
   scale, its tracking, its radii below the app's smallest rung, the
   shadow recipes no other page uses, and its motion clock. */
:root {
  --sans: var(--font-sans);

  --fast: var(--dur);

  --gutter: 64px;

  /* Poster type scale — display steps the app's ladder stops short of.
     Named top-down; the app's --t-* rungs cover everything below 24px. */
  --t-poster-1: 120px;   /* hero figure */
  --t-poster-2:  80px;   /* hero h1 */
  --t-poster-3:  76px;   /* stat figures; hero figure on tablet */
  --t-poster-4:  64px;   /* security h2; hero h1 on tablet */
  --t-poster-5:  60px;   /* closing h2 */
  --t-poster-6:  56px;   /* section h2s; hero figure on phone */
  --t-poster-7:  52px;   /* price figure */
  --t-poster-8:  48px;   /* stat figure on phone */
  --t-poster-9:  46px;   /* gathered-picture figure */
  --t-poster-10: 44px;   /* section h2s on tablet; hero h1 on phone */
  --t-poster-11: 36px;   /* panel h2 */
  --t-poster-12: 34px;   /* section h2s on phone */
  /* Body steps between the app's rungs */
  --t-mk-0: 20px;        /* app-mock question + stat values */
  --t-mk-1: 19px;        /* account balance */
  --t-mk-2: 17px;        /* ledes, brand, price unit */
  --t-mk-3: 15.5px;      /* panel lede, testimonial */
  --t-mk-4: 14.5px;      /* breakdown rows, menu names */
  --t-mk-5: 9.5px;       /* mono micro-captions (badges, ledge labels) */

  /* Tracking beyond the app's ladders */
  --tk-poster-1: -0.025em;   /* the biggest display steps */
  --tk-poster-2: -0.015em;   /* panel h2 */
  --tk-mono-1: 0.07em;       /* mono captions */
  --tk-mono-2: 0.09em;       /* mono eyebrows */

  /* Radii below the app's smallest rung */
  --r-wire:  1px;        /* the dashed wire */

  /* Elevation — recipes only the homepage uses */
  --shadow-menu:   0 18px 44px rgba(var(--navy-rgb), 0.18);
  --shadow-mock:   0 24px 64px rgba(var(--navy-rgb), 0.12);
  --shadow-panel:  0 30px 70px -30px rgba(var(--black-rgb), 0.6);
  --shadow-tile:   0 8px 22px -10px rgba(var(--navy-rgb), 0.25);
  --shadow-thumb:  0 1px 3px rgba(var(--navy-rgb), 0.25);
  --shadow-packet: 0 0 0 4px rgba(var(--mint-rgb), 0.18);

  /* Motion clock — every animated demonstration reads one of these */
  --dur-reveal:  .7s;    /* scroll-reveal */
  --dur-rise:    .9s;    /* hero fade-up; insight bars */
  --dur-draw:   1.2s;    /* sparkline stroke */
  --dur-grow:     1s;    /* ledge bars */
  --dur-pulse:  1.8s;    /* live dot */
  --dur-line:   1.4s;    /* retirement curve */
  --dur-ring:   1.1s;    /* cover ring; typing dots */
  --dur-tile:    .5s;    /* gathered tiles fly in */
  --dur-resolve: .6s;    /* the one picture resolves */
  --dur-fill:   .45s;    /* its grid fills */
  --dur-word:   .25s;    /* streamed reply, per word */
  --dur-packet: 2.6s;    /* packet crosses the wire */
  --stagger:     .06s;   /* per-sibling delay step */
  --beat:        .2s;    /* hold before a bar or ring fills */
  --word-stagger: 45ms;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--grey-0);
  color: var(--grey-950);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--mint); color: var(--mint-ink); }
img, svg { max-width: 100%; }
h1, h2, h3, p { margin: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--grey-950); color: var(--grey-0); padding: 10px 16px;
  border-radius: 0 0 var(--r-4) 0; z-index: var(--z-skip);
}
.skip-link:focus { left: 0; }

/* Full-bleed band + centred 1440 content column */
.band__inner { max-width: 1440px; margin: 0 auto; padding: 96px var(--gutter); }

/* Mono eyebrow (recurring) */
.eyebrow {
  margin: 0 0 18px;
  font: var(--fw-medium) var(--t-meta) var(--mono);
  letter-spacing: var(--tk-mono-2);
  text-transform: uppercase;
  color: var(--mint);
}

/* Buttons — hovers only, app-token timing */
.btn {
  display: inline-block;
  font-family: inherit; font-weight: var(--fw-semibold); font-size: var(--t-h2);
  padding: 15px 28px; border-radius: var(--r-2); border: 0; cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.btn--mint { background: var(--mint); color: var(--mint-ink); }
.btn--mint:hover { background: var(--mint-press); }
.btn--outline-light {
  background: transparent; border: 1px solid var(--grey-600);
  color: var(--grey-50); font-weight: var(--fw-medium); padding: 14px 27px;
}
.btn--outline-light:hover { border-color: var(--grey-500); }
.btn--ink { background: var(--mint-ink); color: var(--mint); }
.btn--ink:hover { background: var(--grey-950); }
.btn--outline-ink {
  background: transparent; border: 1.5px solid var(--mint-ink);
  color: var(--mint-ink); padding: 13.5px 26.5px;
}
.btn--outline-ink:hover { background: rgba(var(--ink-solid-rgb), 0.08); }

/* Try-the-demo persona menu — the CTA opens a two-persona chooser
   instead of routing to a dedicated page (issue #221). */
.demo-menu { position: relative; display: inline-block; }
.demo-menu__toggle { font-family: inherit; cursor: pointer; }
.demo-menu__caret { font-size: var(--ts-caret); opacity: .85; }
.demo-menu__panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: var(--z-menu);
  width: 320px; padding: 6px;
  background: var(--grey-0);
  border: 1px solid var(--grey-200);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-menu);
  text-align: left;
}
.demo-menu--right .demo-menu__panel { left: auto; right: 0; }
.demo-menu__hint {
  margin: 6px 12px 4px;
  font-family: var(--mono);
  font-size: var(--t-dense-4); font-weight: var(--fw-medium);
  letter-spacing: var(--tk-caps-4); text-transform: uppercase;
  color: var(--grey-500);
}
.demo-menu__panel a {
  display: block; padding: 10px 12px; border-radius: var(--r-1);
  transition: background var(--fast) var(--ease);
}
.demo-menu__panel a:hover { background: var(--grey-50); }
.demo-menu__name { display: block; font-size: var(--t-mk-4); font-weight: var(--fw-semibold); color: var(--grey-950); }
.demo-menu__blurb { display: block; margin-top: 2px; font-size: var(--t-body); line-height: 1.45; color: var(--grey-600); }

/* ---------- 1. Header (dark) ---------- */
.mk-header { background: var(--grey-950); }
.mk-header__inner {
  max-width: 1440px; margin: 0 auto; padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: var(--fw-semibold); font-size: var(--t-mk-2); color: var(--grey-0);
}
.nav { display: flex; align-items: center; gap: 26px; font-size: var(--t-h3); }
.nav > a { color: var(--grey-400); transition: color var(--fast) var(--ease); }
.nav > a:hover { color: var(--grey-0); }
.nav__cta {
  background: var(--mint); font-weight: var(--fw-semibold);
  padding: 10px 18px; border-radius: var(--r-1);
  transition: background var(--fast) var(--ease);
}
.nav > a.nav__cta { color: var(--mint-ink); }
.nav > a.nav__cta:hover { background: var(--mint-press); color: var(--mint-ink); }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer; padding: 8px;
  color: var(--grey-400);
}
.mobile-nav {
  display: none;
  background: var(--grey-950);
  border-top: 1px solid var(--grey-800);
  padding: 12px var(--gutter) 20px;
}
.mobile-nav.open { display: flex; flex-direction: column; }
.mobile-nav a {
  padding: 11px 0; font-size: var(--t-dense-1); color: var(--grey-400);
  border-bottom: 1px solid var(--grey-800);
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a:hover { color: var(--grey-0); }

/* ---------- 2. Hero (dark, poster) ---------- */
.hero { background: var(--grey-950); position: relative; overflow: hidden; }
.hero__inner {
  max-width: 1440px; margin: 0 auto;
  padding: 88px var(--gutter) 0;
  position: relative;
}
/* z-index keeps the demo-menu panel above the ledge — the hero fade
   animation gives both siblings stacking contexts, and the ledge is
   later in the DOM. */
.hero__content { position: relative; z-index: var(--z-raise); }
.hero h1 {
  margin: 0 0 28px;
  line-height: 0.98; font-weight: var(--fw-semibold); letter-spacing: var(--tk-poster-1);
  color: var(--grey-0); max-width: 14ch; text-wrap: pretty;
}
.hero h1 em { font-style: normal; color: var(--mint); }
.hero__row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 64px;
}
.hero__lede {
  font-size: var(--t-lead); line-height: 1.6; color: var(--grey-500); max-width: 48ch;
}
.hero__ctas { display: flex; gap: 12px; flex: none; }
.hero__ledge {
  position: relative;
  margin-top: 64px; border-top: 1px solid var(--grey-700);
  padding: 28px 0 44px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.hero__ledge-label {
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: var(--tk-caps-4);
  color: var(--grey-600); margin-bottom: 10px;
}
.hero__figure {
  font-size: var(--t-poster-1); line-height: 0.95; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-4);
  color: var(--grey-0); font-variant-numeric: tabular-nums;
}
.hero__breakdown { flex: none; min-width: 300px; }
.hero__breakdown-row {
  display: flex; justify-content: space-between; gap: 32px;
  font-size: var(--t-mk-4); padding: 9px 0; color: var(--grey-500);
  border-bottom: 1px solid var(--grey-800);
}
.hero__breakdown-row:last-child { border-bottom: 0; }
.hero__breakdown-row .v {
  color: var(--grey-50); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;
}

/* Hero fade-up (the accounts panel joins in below) */
@media (prefers-reduced-motion: no-preference) {
  .hero__content, .hero__ledge {
    animation: heroFade var(--dur-rise) var(--ease) both;
  }
  .hero__ledge { animation-delay: calc(var(--stagger) * 2); }
  @keyframes heroFade {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- 3. Trust strip (mint block) ---------- */
.trust { background: var(--mint); }
.trust__inner {
  max-width: 1440px; margin: 0 auto; padding: 30px var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  color: var(--mint-ink);
}
.trust h3 {
  margin: 0 0 5px;
  font: var(--fw-medium) var(--t-eyebrow) var(--mono); letter-spacing: var(--tk-mono-1); text-transform: uppercase;
}
.trust p { font-size: var(--t-dense-2); line-height: 1.5; opacity: 0.75; }

/* ---------- 4. Problem (white, poster stats) ---------- */
.problem h2 {
  margin: 0 0 18px;
  font-size: var(--t-poster-6); line-height: 1.04; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-3);
  max-width: 20ch; text-wrap: pretty;
}
.problem__lede {
  margin: 0 0 64px;
  font-size: var(--t-lead); line-height: 1.65; color: var(--grey-600); max-width: 62ch;
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
.stat__num {
  font-size: var(--t-poster-3); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-4);
  font-variant-numeric: tabular-nums;
}
.stat__rule { height: 4px; width: 56px; background: var(--mint); margin: 18px 0 14px; }
.stat p { font-size: var(--t-h3); line-height: 1.55; color: var(--grey-600); }

/* ---------- 5. Product (wash) ---------- */
.product { background: var(--grey-100); }
.product__intro {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 64px;
  margin-bottom: 48px;
}
.product__intro h2 {
  font-size: var(--t-poster-6); line-height: 1.04; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-3);
  max-width: 18ch; text-wrap: pretty;
}
.product__lede {
  margin: 0 0 6px;
  font-size: var(--t-mk-2); line-height: 1.6; color: var(--grey-600); max-width: 42ch;
}

/* App mock */
.app-mock {
  background: var(--grey-0); border-radius: var(--r-4); overflow: hidden;
  box-shadow: var(--shadow-mock);
}
.app-mock__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; background: var(--grey-50);
  border-bottom: 1px solid var(--grey-150);
}
.app-mock__dots { display: flex; gap: 5px; }
.app-mock__dots span {
  width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--grey-200);
}
.app-mock__url { font-family: var(--mono); font-size: var(--t-meta); color: var(--grey-500); }
.app-mock__body { display: grid; grid-template-columns: 180px 1fr; }
.app-mock__side {
  border-right: 1px solid var(--grey-150); padding: 22px 0;
  display: flex; flex-direction: column;
  font-size: var(--t-dense-2); color: var(--grey-600);
}
.app-mock__side span { padding: 9px 22px; }
.app-mock__side .active {
  background: var(--grey-100); color: var(--grey-950); font-weight: var(--fw-medium);
  border-right: 2px solid var(--mint);
}
.app-mock__main { padding: 26px 32px; }
.app-mock__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.app-mock__q { font-size: var(--t-mk-0); font-weight: var(--fw-semibold); }
.app-mock__tag {
  font-family: var(--mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-3);
  color: var(--grey-500); border: 1px solid var(--grey-200);
  border-radius: var(--r-1); padding: 4px 9px;
}
.app-mock__chart { display: block; }
.app-mock__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px;
}
.app-mock__stats > div {
  border: 1px solid var(--grey-150); border-radius: var(--r-3); padding: 12px 16px;
}
.app-mock__stats .k {
  font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-3); color: var(--grey-500);
}
.app-mock__stats .v {
  font-size: var(--t-mk-0); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.app-mock__stats .v--mint { color: var(--mint-press); }

/* Insight cards */
.insights {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px;
}
.insight { background: var(--grey-950); border-radius: var(--r-4); padding: 26px 28px; }
.insight__label {
  margin: 0 0 12px;
  font: var(--fw-regular) var(--t-eyebrow) var(--mono); letter-spacing: var(--tk-mono-1); text-transform: uppercase;
  color: var(--mint);
}
.insight__label--gold { color: var(--gold); }
.insight__figure {
  font-size: var(--t-hero); font-weight: var(--fw-semibold); color: var(--grey-0); font-variant-numeric: tabular-nums;
}
.insight__figure .unit { font-size: var(--t-h2); color: var(--grey-600); font-weight: var(--fw-regular); }
.insight p { margin: 12px 0 0; font-size: var(--t-h3); line-height: 1.55; color: var(--grey-500); }

/* ---------- 6. AI + Advisers (white, twin panels) ---------- */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel {
  border: 1px solid var(--grey-200); border-radius: var(--r-4); padding: 40px;
  display: flex; flex-direction: column;
}
.panel .eyebrow {
  margin: 0 0 16px; font-size: var(--t-eyebrow); letter-spacing: var(--tk-caps-4); color: var(--mint-press);
}
.panel h2 {
  margin: 0 0 16px;
  font-size: var(--t-poster-11); line-height: 1.1; font-weight: var(--fw-semibold); letter-spacing: var(--tk-poster-2);
  text-wrap: pretty;
}
.panel__lede {
  margin: 0 0 24px;
  font-size: var(--t-mk-3); line-height: 1.65; color: var(--grey-600);
}
.panel__inlay {
  background: var(--grey-50); border-radius: var(--r-3); padding: 18px; margin-top: auto;
}

/* Mini chat inlay */
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat__msg--user {
  align-self: flex-end; background: var(--grey-950); color: var(--grey-50);
  border-radius: var(--r-3); padding: 9px 13px; font-size: var(--t-dense-2);
}
.chat__msg--ai {
  align-self: flex-start; background: var(--grey-0);
  border: 1px solid var(--grey-150); border-radius: var(--r-3);
  padding: 9px 13px; font-size: var(--t-dense-2); line-height: 1.55; color: var(--grey-700);
}
.chat__msg--ai .hl { color: var(--mint-press); font-weight: var(--fw-semibold); }
.chat__foot {
  display: flex; justify-content: space-between;
  font-size: var(--t-dense-3); color: var(--grey-500); padding-top: 4px;
}
.chat__foot .revoke { color: var(--gold-text); }

/* Adviser card inlay */
.adviser__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.adviser__who { display: flex; align-items: center; gap: 10px; }
.adviser__avatar {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--grey-200); color: var(--grey-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-semibold); font-size: var(--t-meta);
}
.adviser__name { font-weight: var(--fw-semibold); font-size: var(--t-dense-2); }
.adviser__role { font-size: var(--t-dense-3); color: var(--grey-500); }
.adviser__badge {
  font-size: var(--t-mk-5); letter-spacing: var(--tk-eyebrow); font-weight: var(--fw-semibold);
  color: var(--mint-press); background: rgba(var(--mint-rgb), 0.14);
  border-radius: var(--r-1); padding: 3px 7px;
}
.share-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-top: 1px solid var(--grey-150);
  font-size: var(--t-small); color: var(--grey-700);
}
.share-row .state {
  font-size: var(--t-mk-5); letter-spacing: var(--tk-eyebrow); font-weight: var(--fw-semibold); color: var(--mint-press);
}
.share-row--private, .share-row--private .state { color: var(--grey-500); }

/* ---------- 7. Security (dark poster) ---------- */
.security { background: var(--grey-950); }
.security h2 {
  margin: 0 0 20px;
  font-size: var(--t-poster-4); line-height: 1.02; font-weight: var(--fw-semibold); letter-spacing: var(--tk-poster-1);
  color: var(--grey-0); max-width: 16ch; text-wrap: pretty;
}
.security h2 em { font-style: normal; color: var(--mint); }
.security__lede {
  margin: 0 0 56px;
  font-size: var(--t-mk-2); line-height: 1.65; color: var(--grey-500); max-width: 58ch;
}
.security__lede a { color: var(--mint); font-weight: var(--fw-medium); }
.security__lede a:hover { text-decoration: underline; }
.sec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--grey-700);
}
.sec-cell { padding: 24px 28px 0; border-right: 1px solid var(--grey-700); }
.sec-cell:first-child { padding-left: 0; }
.sec-cell:last-child { padding-right: 0; border-right: 0; }
.sec-cell h3 {
  margin: 0 0 10px;
  font: var(--fw-medium) var(--t-eyebrow) var(--mono); letter-spacing: var(--tk-mono-1); text-transform: uppercase;
  color: var(--grey-50);
}
.sec-cell p { font-size: var(--t-dense-2); line-height: 1.6; color: var(--grey-500); }
.sec-cell strong { font-weight: var(--fw-semibold); color: var(--grey-400); }

/* ---------- 8. Pricing + proof (white) ---------- */
.pricing { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
.pricing h2 {
  margin: 0 0 16px;
  font-size: var(--t-poster-6); line-height: 1.04; font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-3);
}
.pricing__lede {
  margin: 0 0 32px;
  font-size: var(--t-mk-2); line-height: 1.65; color: var(--grey-600); max-width: 44ch;
}
.compare__row {
  display: flex; justify-content: space-between;
  font-size: var(--t-body); color: var(--grey-600); margin-bottom: 5px;
}
.compare__row span:last-child { font-variant-numeric: tabular-nums; }
.compare__row--us { color: var(--grey-950); font-weight: var(--fw-semibold); }
.compare__bar { height: 10px; border-radius: var(--r-2); background: var(--grey-100); }
.compare__bar + .compare__row { margin-top: 16px; }
.compare__fill { height: 10px; border-radius: var(--r-2); background: var(--grey-400); width: 100%; }
.compare__fill--mint { background: var(--mint); width: 7%; }
.compare__note {
  margin: 16px 0 32px;
  font-size: var(--t-small); line-height: 1.55; color: var(--grey-500);
}
.testimonial { margin: 0; border-left: 3px solid var(--mint); padding: 4px 0 4px 20px; }
.testimonial p {
  margin: 0 0 10px;
  font-size: var(--t-mk-3); line-height: 1.6; color: var(--grey-600); font-style: italic;
}
.testimonial cite {
  font-family: var(--mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-eyebrow);
  color: var(--grey-500); font-style: normal;
}
.price-card { background: var(--grey-950); border-radius: var(--r-4); padding: 36px; }
.price-card__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 24px;
}
.price-figure {
  font-size: var(--t-poster-7); font-weight: var(--fw-semibold); color: var(--grey-0); font-variant-numeric: tabular-nums;
}
.price-figure .per { font-size: var(--t-mk-2); color: var(--grey-600); font-weight: var(--fw-regular); }
.price-sub { margin: 4px 0 0; font-size: var(--t-h3); color: var(--grey-500); }
.price-card__cta {
  flex: none; font-size: var(--t-dense-1); padding: 13px 24px;
}
.price-feats { display: flex; flex-direction: column; font-size: var(--t-mk-4); color: var(--grey-400); }
.price-feats div { padding: 11px 0; border-top: 1px solid var(--grey-800); }
.price-foot { margin: 16px 0 0; font-size: var(--t-meta); color: var(--grey-600); }

/* ---------- 9. Closing (mint block) ---------- */
.closing { background: var(--mint); }
.closing__inner {
  max-width: 1440px; margin: 0 auto; padding: 88px var(--gutter);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 64px;
}
.closing h2 {
  margin: 0 0 14px;
  font-size: var(--t-poster-5); line-height: 1.02; font-weight: var(--fw-semibold); letter-spacing: var(--tk-poster-1);
  color: var(--mint-ink); max-width: 18ch; text-wrap: pretty;
}
.closing__sub { font-size: var(--t-mk-2); color: var(--mint-ink); opacity: 0.7; }
.closing__ctas { display: flex; gap: 12px; flex: none; }

/* ---------- 10. Footer (dark) ---------- */
.footer { background: var(--grey-950); }
.footer__inner { max-width: 1440px; margin: 0 auto; padding: 56px var(--gutter) 40px; }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.footer .brand { font-size: var(--t-h2); margin-bottom: 10px; }
.footer__tag { font-size: var(--t-dense-2); line-height: 1.55; color: var(--grey-500); max-width: 32ch; }
.footer__col { display: flex; flex-direction: column; gap: 9px; font-size: var(--t-dense-2); }
.footer__col h3 {
  margin: 0 0 4px;
  font: var(--fw-medium) var(--t-dense-4) var(--mono); letter-spacing: var(--tk-mono-1); text-transform: uppercase;
  color: var(--grey-600);
}
.footer__col a { color: var(--grey-400); transition: color var(--fast) var(--ease); }
.footer__col a:hover { color: var(--grey-0); }
.footer__legal {
  display: flex; justify-content: space-between; gap: 24px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--grey-800);
  font-size: var(--t-meta); color: var(--grey-600);
}

/* ============================================================
   Product-UI demonstrations (issue #303)
   Each marketing claim below gets a small, faithful slice of real UI
   instead of prose. Motion is rationed and every animated state is
   gated behind prefers-reduced-motion: no-preference — reduced-motion
   readers get the resolved state straight away. home.js drives the
   count-ups, the streamed chat reply and the live retirement model.
   ============================================================ */

/* ---------- Hero: gathered-accounts panel ---------- */
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 440px;
  column-gap: 64px; align-items: center;
}
.hero__content { grid-column: 1; grid-row: 1; }
.hero__accounts { grid-column: 2; grid-row: 1; }
.hero__ledge { grid-column: 1 / -1; }
.hero h1 { font-size: var(--t-poster-2); max-width: 16ch; }
.hero__row { flex-direction: column; align-items: flex-start; gap: 28px; }

.hero__accounts {
  position: relative; z-index: var(--z-raise);
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px; border-radius: var(--r-5);
  background: var(--grey-800); border: 1px solid var(--grey-700);
  box-shadow: var(--shadow-panel);
}
.acct {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  min-height: 104px; padding: 12px 14px; border-radius: var(--r-4);
  background: var(--grey-950); border: 1px solid var(--grey-800);
}
.acct__prov { font-size: var(--t-dense-2); font-weight: var(--fw-semibold); color: var(--grey-50); }
.acct__kind {
  font-family: var(--mono); font-size: var(--t-dense-5); letter-spacing: var(--tk-caps-2);
  color: var(--grey-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct__bal {
  margin-top: auto; font-size: var(--t-mk-1); font-weight: var(--fw-semibold); color: var(--grey-0);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tk-tight-2);
}
.acct--neg .acct__bal { color: var(--grey-400); }
.acct__spark {
  position: absolute; right: 12px; bottom: 14px; width: 56px; height: 18px;
  fill: none; stroke: var(--mint); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.9;
}
.acct--neg .acct__spark { stroke: var(--grey-600); }
.acct__flag {
  position: absolute; right: 12px; bottom: 16px;
  font-family: var(--mono); font-size: var(--t-mk-5); letter-spacing: var(--tk-caps-3);
  color: var(--gold); border: 1px solid rgba(var(--gold-rgb), 0.4);
  border-radius: var(--r-xs); padding: 2px 6px;
}
.acct__more {
  grid-column: 1 / -1; padding: 6px 4px 0;
  font-family: var(--mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-3);
  color: var(--grey-600);
}

/* Ledge breakdown bars */
.hero__breakdown-row { position: relative; flex-wrap: wrap; padding-bottom: 14px; }
.hero__breakdown-row .bar {
  position: absolute; left: 0; bottom: 6px; height: 3px; width: var(--w, 0);
  background: var(--mint); border-radius: var(--r-micro); opacity: 0.8;
}

/* ---------- Problem: ten places → one picture ---------- */
.gather {
  display: grid; grid-template-columns: 1fr 48px 1fr; column-gap: 32px;
  align-items: center; margin-bottom: 72px;
}
.gather__before { position: relative; height: 260px; }
.pt {
  /* Tiles are placed by their LEFT edge, so a right-hand one runs past the
     container by its own width — "Zoopla" at --x:84% put 6px of itself
     outside a 390px viewport and gave the home page a horizontal scrollbar.
     --pt-inset pulls each tile back by a share of its own width equal to its
     --x, so a tile at 100% would sit flush inside the right edge and the
     scatter can never overflow. Off (0) above the phone breakpoint, where
     there is room for the composition as drawn. */
  --pt-inset: 0px;
  position: absolute; left: var(--x); top: var(--y);
  transform: rotate(var(--rot, 0deg)) translateX(var(--pt-inset));
  padding: 10px 14px; border-radius: var(--r-3);
  background: var(--grey-0); border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-tile);
  font-size: var(--t-body); font-weight: var(--fw-medium); color: var(--grey-700); white-space: nowrap;
}
.pt::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px;
  border-radius: var(--r-micro); background: var(--grey-200);
  vertical-align: 0;
}
.gather__arrow { color: var(--grey-400); display: flex; justify-content: center; }
.gather__after { display: flex; justify-content: center; }
.gather__one {
  width: min(100%, 360px); padding: 24px 26px; border-radius: var(--r-5);
  background: var(--grey-950); color: var(--grey-0);
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-mock-dark);
}
.gather__one-label {
  font-family: var(--mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-mono-2); color: var(--grey-600);
}
.gather__one-fig {
  font-size: var(--t-poster-9); font-weight: var(--fw-semibold); letter-spacing: var(--tk-tight-4); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gather__one-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 10px; }
.gather__one-grid i { height: 18px; border-radius: var(--r-xs); background: var(--mint); }
.gather__one-grid i:nth-child(odd) { opacity: 0.72; }
.gather__one-grid i:nth-child(3n) { opacity: 0.5; }
.gather__cap {
  margin-top: 14px;
  font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: var(--tk-mono-1); text-transform: uppercase;
  color: var(--grey-500);
}
.gather__cap--before { grid-column: 1; }
.gather__cap--after { grid-column: 3; text-align: center; color: var(--mint-press); }

/* ---------- Product: live retirement model ---------- */
.app-mock__tag { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.live-dot {
  width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--mint); display: inline-block;
}
.app-mock__grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.app-mock__chartwrap { min-width: 0; }
.model {
  margin: 0; padding: 18px 18px 14px;
  border: 1px solid var(--grey-150); border-radius: var(--r-4); background: var(--grey-50);
}
.model__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--t-body); color: var(--grey-600); margin-bottom: 6px;
}
.model__row output { font-weight: var(--fw-semibold); color: var(--grey-950); font-variant-numeric: tabular-nums; }
.model input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; margin: 0 0 14px; cursor: pointer;
}
.model input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: var(--r-pill); background: var(--grey-200);
}
.model input[type="range"]::-moz-range-track {
  height: 5px; border-radius: var(--r-pill); background: var(--grey-200);
}
.model input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -5.5px; border-radius: var(--r-pill);
  background: var(--grey-0); border: 2px solid var(--mint-press);
  box-shadow: var(--shadow-thumb);
}
.model input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: var(--r-pill);
  background: var(--grey-0); border: 2px solid var(--mint-press);
}
.model input[type="range"]:focus-visible { outline: 2px solid var(--mint-press); outline-offset: 4px; border-radius: var(--r-pill); }
.model__result {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--grey-150);
  font-size: var(--t-body); color: var(--grey-600);
}
.model__result strong { font-size: var(--t-mk-2); font-weight: var(--fw-semibold); color: var(--grey-950); font-variant-numeric: tabular-nums; }
.model__result strong.v--mint { color: var(--mint-press); }
.model__result strong.v--warn { color: var(--gold-text); }
.model__foot { margin: 8px 0 0; font-size: var(--t-dense-3); line-height: 1.5; color: var(--grey-500); }

/* Insight mini-UI rows */
.mini { margin: 16px 0 0; display: flex; flex-direction: column; gap: 7px; }
.mini__row {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center;
  font-size: var(--t-meta); color: var(--grey-500);
}
.mini__row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini__row b { font-weight: var(--fw-semibold); color: var(--grey-50); font-variant-numeric: tabular-nums; font-size: var(--t-meta); }
.mini__bar {
  display: block; height: 6px; border-radius: var(--r-xs); background: var(--grey-800); position: relative; overflow: hidden;
}
.mini__bar::after {
  content: ""; position: absolute; inset: 0; width: var(--w, 0);
  background: var(--mint); border-radius: var(--r-xs);
}
.mini__bar--hot::after { background: var(--gold); }
.mini__row--sum { grid-template-columns: 1fr auto; padding-top: 6px; border-top: 1px solid var(--grey-800); }
.mini__loss { color: var(--gold) !important; }
.mini--ring { flex-direction: row; align-items: center; gap: 14px; }
.mini__ring-txt { font-size: var(--t-small); line-height: 1.5; color: var(--grey-400); }
.mini__ring-txt b { color: var(--grey-0); font-variant-numeric: tabular-nums; }
.mini__ring-txt span { display: block; font-size: var(--t-eyebrow); color: var(--grey-600); }

/* ---------- AI chat: tool call + streamed reply ---------- */
.chat__tool {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-caps-1); color: var(--grey-500);
  padding: 4px 9px; border: 1px dashed var(--grey-200); border-radius: var(--r-1);
}
.chat__tool b { font-weight: var(--fw-medium); color: var(--mint-press); }
.chat__tool-dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--mint); }
.chat__typing { display: none; gap: 4px; align-items: center; height: 1.55em; }
.chat__typing i { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--grey-400); }
.chat__text .w { display: inline; }

/* ---------- Security: device → wire → server ---------- */
.flow {
  display: grid; grid-template-columns: 1fr 0.8fr 1fr; gap: 24px;
  margin-bottom: 56px; align-items: start;
}
.flow__head {
  font-family: var(--mono); font-size: var(--t-dense-4); letter-spacing: var(--tk-mono-2);
  color: var(--grey-600); margin-bottom: 12px;
}
.flow__card {
  padding: 16px 18px; border-radius: var(--r-4);
  background: var(--grey-800); border: 1px solid var(--grey-700);
  display: flex; flex-direction: column; gap: 6px; min-height: 96px;
}
.flow__k { font-family: var(--mono); font-size: var(--t-dense-5); letter-spacing: var(--tk-mono-1); color: var(--grey-500); }
.flow__plain { font-size: var(--t-dense-1); font-weight: var(--fw-medium); color: var(--grey-0); font-variant-numeric: tabular-nums; }
.flow__card--cipher { background: var(--grey-950); border-color: var(--grey-700); }
.flow__cipher {
  font-family: var(--mono); font-size: var(--t-meta); line-height: 1.8; color: var(--mint);
  word-break: break-all;
}
.flow__note {
  margin-top: 12px; font-size: var(--t-small); line-height: 1.5; color: var(--grey-500);
}
.flow__note b { font-weight: var(--fw-semibold); color: var(--grey-50); }
.flow__note--c { text-align: center; }
.flow__op { font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--mint); }
.flow__col--net { align-self: stretch; display: flex; flex-direction: column; }
.flow__wire {
  position: relative; height: 2px; margin: 48px 0 0; border-radius: var(--r-wire);
  background: repeating-linear-gradient(90deg, var(--grey-700) 0 6px, transparent 6px 12px);
}
.flow__packet {
  position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: var(--r-xs);
  background: var(--mint); box-shadow: var(--shadow-packet);
  transform: translateX(0);
}

/* ---------- SVG paint (index.html) ----------
   The inline SVGs paint with classes rather than fill="" literals. */
.brand-mark rect { fill: var(--mint); }
.rc-area   { fill: var(--mint); }
.rc-line   { stroke: var(--mint); }
.rc-axis   { stroke: var(--grey-200); }
.rc-ret    { stroke: var(--grey-400); }
.rc-label  { fill: var(--grey-500); }
.rc-marker { stroke: var(--gold-line); }
.rc-dot    { fill: var(--gold-line); }
.rc-answer { fill: var(--gold-text); }
.ring__track { stroke: var(--grey-800); }
.ring__fill  { stroke: var(--gold); }

/* ---------- Motion (all gated) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll-reveal: home.js flips data-reveal → .is-in when in view */
  [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
  [data-reveal].is-in { opacity: 1; transform: none; }

  .hero__accounts { animation: heroFade var(--dur-rise) var(--ease) both; animation-delay: calc(var(--stagger) * 4); }
  .acct__spark polyline { stroke-dasharray: 200; stroke-dashoffset: 200; animation: sparkDraw var(--dur-draw) var(--ease) var(--dur-rise) forwards; }
  @keyframes sparkDraw { to { stroke-dashoffset: 0; } }

  .hero__breakdown-row .bar { animation: barGrow var(--dur-grow) var(--ease) var(--dur-reveal) both; }
  @keyframes barGrow { from { width: 0; } to { width: var(--w, 0); } }

  .live-dot { animation: pulse var(--dur-pulse) ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

  #rcLine { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .app-mock.is-in #rcLine { animation: lineDraw var(--dur-line) var(--ease) forwards; }
  @keyframes lineDraw { to { stroke-dashoffset: 0; } }

  .mini__bar::after { width: 0; transition: width var(--dur-rise) var(--ease) var(--beat); }
  .insight.is-in .mini__bar::after { width: var(--w, 0); }
  .ring__fill { stroke-dasharray: 0 100; transition: stroke-dasharray var(--dur-ring) var(--ease) var(--beat); }
  .insight.is-in .ring__fill { stroke-dasharray: 43 100; }

  /* Ten tiles fly in, then the one picture resolves */
  .gather .pt { opacity: 0; transform: rotate(var(--rot, 0deg)) translateX(var(--pt-inset)) translateY(10px) scale(.96); transition: opacity var(--dur-tile) var(--ease), transform var(--dur-tile) var(--ease); }
  .gather.is-in .pt { opacity: 1; transform: rotate(var(--rot, 0deg)) translateX(var(--pt-inset)); }
  .gather .pt:nth-child(2)  { transition-delay: calc(var(--stagger) * 1); }
  .gather .pt:nth-child(3)  { transition-delay: calc(var(--stagger) * 2); }
  .gather .pt:nth-child(4)  { transition-delay: calc(var(--stagger) * 3); }
  .gather .pt:nth-child(5)  { transition-delay: calc(var(--stagger) * 4); }
  .gather .pt:nth-child(6)  { transition-delay: calc(var(--stagger) * 5); }
  .gather .pt:nth-child(7)  { transition-delay: calc(var(--stagger) * 6); }
  .gather .pt:nth-child(8)  { transition-delay: calc(var(--stagger) * 7); }
  .gather .pt:nth-child(9)  { transition-delay: calc(var(--stagger) * 8); }
  .gather .pt:nth-child(10) { transition-delay: calc(var(--stagger) * 9); }
  .gather .gather__one { opacity: 0; transform: scale(.96); transition: opacity var(--dur-resolve) var(--ease) var(--dur-reveal), transform var(--dur-resolve) var(--ease) var(--dur-reveal); }
  .gather.is-in .gather__one { opacity: 1; transform: none; }
  .gather .gather__one-grid i { transform: scaleY(0); transform-origin: bottom; transition: transform var(--dur-fill) var(--ease) var(--dur-ring); }
  .gather.is-in .gather__one-grid i { transform: none; }

  /* Chat: typing dots, then the reply streams in word by word */
  .chat.is-armed .chat__text { display: none; }
  .chat.is-typing .chat__typing { display: inline-flex; }
  .chat.is-typing .chat__text { display: none; }
  .chat__typing i { animation: blink var(--dur-ring) ease-in-out infinite; }
  .chat__typing i:nth-child(2) { animation-delay: calc(var(--stagger) * 3); }
  .chat__typing i:nth-child(3) { animation-delay: calc(var(--stagger) * 6); }
  @keyframes blink { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
  .chat.is-streaming .chat__text .w { opacity: 0; animation: wordIn var(--dur-word) var(--ease) forwards; animation-delay: calc(var(--i) * var(--word-stagger)); }
  @keyframes wordIn { to { opacity: 1; } }

  /* Packet crosses the wire — only once the band is in view */
  .flow.is-in .flow__packet { animation: packet var(--dur-packet) var(--ease) calc(var(--stagger) * 5) infinite; }
  @keyframes packet {
    0%   { left: 0; opacity: 0; }
    10%  { opacity: 1; }
    85%  { left: calc(100% - 12px); opacity: 1; }
    100% { left: calc(100% - 12px); opacity: 0; }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; row-gap: 40px; }
  .hero__content { grid-row: 1; }
  .hero__accounts { grid-column: 1; grid-row: 2; max-width: 560px; }
  .hero h1 { font-size: var(--t-poster-4); }
  .gather { grid-template-columns: 1fr; row-gap: 16px; margin-bottom: 56px; }
  .gather__arrow { transform: rotate(90deg); }
  .gather__cap--before { grid-column: 1; grid-row: 2; margin-top: 0; }
  .gather__arrow { grid-row: 3; }
  .gather__after { grid-row: 4; }
  .gather__cap--after { grid-column: 1; grid-row: 5; }
  .app-mock__grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .flow__col--net { display: none; }
  .hero__figure { font-size: var(--t-poster-3); }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero__ledge { flex-direction: column; align-items: flex-start; gap: 28px; }
  .trust__inner { grid-template-columns: 1fr 1fr; gap: 24px 40px; }
  .problem h2, .product__intro h2, .pricing h2 { font-size: var(--t-poster-10); }
  .security h2 { font-size: var(--t-poster-8); }
  .closing h2 { font-size: var(--t-poster-10); }
  .stats { grid-template-columns: 1fr 1fr; }
  .product__intro { flex-direction: column; align-items: flex-start; gap: 20px; }
  .insights { grid-template-columns: 1fr; }
  .panels { grid-template-columns: 1fr; }
  .sec-grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .sec-cell { padding-left: 0; padding-right: 28px; }
  .sec-cell:nth-child(even) { border-right: 0; padding-left: 28px; }
  .pricing { grid-template-columns: 1fr; gap: 48px; }
  .closing__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
}

@media (max-width: 920px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
}

@media (max-width: 720px) {
  :root { --gutter: 24px; }
  .band__inner { padding-top: 64px; padding-bottom: 64px; }
  .hero__inner { padding-top: 56px; }
  .hero h1 { font-size: var(--t-poster-10); }
  .hero__figure { font-size: var(--t-poster-6); }
  .hero__accounts { gap: 8px; padding: 8px; }
  .acct { min-height: 88px; padding: 10px 12px; }
  .acct__bal { font-size: var(--t-h2); }
  .acct__spark { width: 40px; right: 10px; }
  .acct__flag { position: static; align-self: flex-start; margin-top: 4px; }
  .app-mock__chart text { display: none; }
  .app-mock__chart #rcLine { stroke-width: 5; }
  .gather__before { height: 300px; }
  /* Pull the scatter in by each tile's own offset (see .pt) so the
     right-hand tiles stay inside the container instead of pushing the page
     6px wider than the viewport. */
  .pt { --pt-inset: calc(-1 * var(--x)); }
  .mini__row { grid-template-columns: 104px 1fr auto; gap: 8px; font-size: var(--t-dense-3); }
  .hero__breakdown { min-width: 0; width: 100%; }
  .hero__ctas { flex-wrap: wrap; }
  .trust__inner { grid-template-columns: 1fr; gap: 20px; }
  .problem h2, .product__intro h2, .pricing h2, .security h2, .closing h2 { font-size: var(--t-poster-12); }
  .problem__lede { margin-bottom: 40px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .stat__num { font-size: var(--t-poster-8); }
  .app-mock__body { grid-template-columns: 1fr; }
  .app-mock__side { display: none; }
  .app-mock__main { padding: 18px 20px; }
  .app-mock__stats { grid-template-columns: 1fr; gap: 10px; }
  .panel { padding: 24px; }
  .sec-grid { grid-template-columns: 1fr; }
  .sec-cell, .sec-cell:nth-child(even) { padding-left: 0; padding-right: 0; border-right: 0; }
  .price-card { padding: 24px; }
  .price-card__head { flex-direction: column; }
  .price-figure { font-size: var(--t-hero); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__legal { flex-direction: column; gap: 10px; }
}