/* ── Tokens: lifted from lib/core/theme/toll_colors.dart ─────────────── */
  :root {
    --bg: #EEEBFA;
    --mesh-a: #E4DDFB;
    --mesh-b: #D6E6FC;
    --mesh-c: #FBDFF0;
    --ink: #2E2F4A;
    --ink-muted: #63658A;
    --ink-faint: #9092AE;
    --violet: #6D5DF6;
    --violet-deep: #9B5BF0;
    --violet-text: #5847D8;
    --mint: #35D0A5;
    --mint-text: #1E785F;
    --coral: #FF6B85;
    --coral-text: #AE495B;
    --amber: #F5A524;
    --amber-text: #8A5A0A;
    --glass-white: 255 255 255;
    --glass-base: rgb(var(--glass-white) / .42);
    --glass-raised: rgb(var(--glass-white) / .56);
    --glass-overlay: rgb(var(--glass-white) / .72);
    --glass-border: rgb(var(--glass-white) / .72);
    --glass-shadow: 0 18px 40px -20px rgb(46 47 74 / .35);
    --hairline: rgb(46 47 74 / .10);
    --on-inverse: #FFFFFF;
    --receipt: rgb(255 255 255 / .78);
    --nav-fill: rgb(238 235 250 / .72);
    --shadow-phone: 0 40px 90px -30px rgb(46 47 74 / .45);
    --hero-light: block; --hero-dark: none;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #171526;
      --mesh-a: #241F3A;
      --mesh-b: #1A2440;
      --mesh-c: #2E1B2C;
      --ink: #ECEAF6;
      --ink-muted: #D8D6EA;
      --ink-faint: #8E8CA8;
      --violet: #8B7CFF;
      --violet-deep: #A97BFF;
      --violet-text: #CBC3FF;
      --mint-text: #5FE3BE;
      --coral-text: #FFB4C1;
      --amber-text: #F8C46A;
      --glass-base: rgb(var(--glass-white) / .07);
      --glass-raised: rgb(var(--glass-white) / .12);
      --glass-overlay: rgb(var(--glass-white) / .16);
      --glass-border: rgb(var(--glass-white) / .16);
      --glass-shadow: 0 18px 40px -20px rgb(0 0 0 / .6);
      --hairline: rgb(236 234 246 / .10);
      --on-inverse: #171526;
      --receipt: rgb(255 255 255 / .09);
      --nav-fill: rgb(23 21 38 / .72);
      --shadow-phone: 0 40px 90px -30px rgb(0 0 0 / .8);
      --hero-light: none; --hero-dark: block;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #171526;
    --mesh-a: #241F3A;
    --mesh-b: #1A2440;
    --mesh-c: #2E1B2C;
    --ink: #ECEAF6;
    --ink-muted: #D8D6EA;
    --ink-faint: #8E8CA8;
    --violet: #8B7CFF;
    --violet-deep: #A97BFF;
    --violet-text: #CBC3FF;
    --mint-text: #5FE3BE;
    --coral-text: #FFB4C1;
    --amber-text: #F8C46A;
    --glass-base: rgb(var(--glass-white) / .07);
    --glass-raised: rgb(var(--glass-white) / .12);
    --glass-overlay: rgb(var(--glass-white) / .16);
    --glass-border: rgb(var(--glass-white) / .16);
    --glass-shadow: 0 18px 40px -20px rgb(0 0 0 / .6);
    --hairline: rgb(236 234 246 / .10);
    --on-inverse: #171526;
    --receipt: rgb(255 255 255 / .09);
    --nav-fill: rgb(23 21 38 / .72);
    --shadow-phone: 0 40px 90px -30px rgb(0 0 0 / .8);
    --hero-light: none; --hero-dark: block;
    color-scheme: dark;
  }

  /* ── Base ────────────────────────────────────────────────────────────── */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  .mono {
    font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.02em; line-height: 1.1; }
  h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 800; letter-spacing: -0.035em; }
  h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; }
  h3 { font-size: 1.15rem; font-weight: 700; }
  p { margin: 0; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
  .lede { color: var(--ink-muted); font-size: 1.15rem; max-width: 34em; }
  .eyebrow {
    font-size: 0.72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--violet-text);
  }
  .wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
  section { padding-block: clamp(56px, 7vw, 96px); position: relative; }
  .section-head { display: grid; gap: 14px; max-width: 40em; margin-bottom: clamp(28px, 4vw, 44px); }

  /* ── Mesh background: three blobs, never a hard edge ────────────────── */
  .mesh { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); }
  .mesh i {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: .95;
    width: 62vw; height: 62vw; min-width: 520px; min-height: 520px;
    animation: drift 34s ease-in-out infinite alternate;
  }
  .mesh i:nth-child(1) { background: var(--mesh-a); top: -18vw; left: -14vw; }
  .mesh i:nth-child(2) { background: var(--mesh-b); top: 22vh; right: -22vw; animation-duration: 41s; animation-delay: -12s; }
  .mesh i:nth-child(3) { background: var(--mesh-c); bottom: -26vw; left: 18vw; animation-duration: 47s; animation-delay: -25s; }
  @keyframes drift {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(6vw, 4vh, 0) scale(1.12); }
  }

  /* ── Glass levels: one blur, one fill, one border, one shadow each ──── */
  .glass { background: var(--glass-raised); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--glass-shadow); }
  .glass.overlay { background: var(--glass-overlay); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
  .glass.base { background: var(--glass-base); box-shadow: none; border-radius: 16px; }

  /* ── Nav ─────────────────────────────────────────────────────────────── */
  .nav {
    position: sticky; top: 0; z-index: 10;
    background: var(--nav-fill); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hairline);
  }
  .nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; font-size: 1.1rem; letter-spacing: -0.02em; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .nav nav { display: flex; gap: 22px; margin-left: auto; }
  .nav nav a { text-decoration: none; color: var(--ink-muted); font-weight: 600; font-size: .95rem; }
  .nav nav a:hover { color: var(--ink); }
  @media (max-width: 760px) { .nav nav { display: none; } .nav .wrap > .btn { margin-left: auto; } }

  /* ── Buttons ─────────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: 18px;
    font-weight: 700; font-size: .98rem; text-decoration: none; border: 1px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    font-family: inherit;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn-primary {
    color: #fff; background: linear-gradient(135deg, var(--violet), var(--violet-deep));
    box-shadow: 0 12px 28px -12px rgb(109 93 246 / .7);
  }
  .btn-primary:hover { box-shadow: 0 16px 32px -12px rgb(109 93 246 / .8); }
  .btn-ghost { color: var(--ink); background: var(--glass-raised); border-color: var(--glass-border); }
  .btn-ghost:hover { background: var(--glass-overlay); }
  .btn svg { width: 20px; height: 20px; flex: none; }
  .btn small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .02em; opacity: .85; line-height: 1; margin-bottom: 2px; }
  .btn .stack { display: grid; text-align: left; line-height: 1.05; }

  /* ── Hero ────────────────────────────────────────────────────────────── */
  .hero { padding-block: clamp(56px, 7vw, 96px) clamp(40px, 6vw, 80px); }
  .hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
  .hero-copy { display: grid; gap: 22px; }
  .hero-copy .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
  .hero-copy .fine { display: flex; gap: 18px; flex-wrap: wrap; color: var(--ink-faint); font-size: .85rem; font-weight: 600; }
  .hero-copy .fine span::before { content: "·"; margin-right: 8px; color: var(--ink-faint); }
  .hero-copy .fine span:first-child::before { content: none; }
  @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

  /* Phone + working Home mock ------------------------------------------ */
  .stage { position: relative; display: grid; align-items: center; justify-items: end; min-height: 640px; padding-right: clamp(0px, 3vw, 24px); }
  .phone {
    width: 300px; aspect-ratio: 1320 / 2868; border-radius: 46px; padding: 10px;
    background: linear-gradient(160deg, #3a3956, #1a1930); box-shadow: var(--shadow-phone);
    position: relative; z-index: 1;
  }
  .phone .island { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 96px; height: 28px; border-radius: 16px; background: #0b0a14; z-index: 3; }
  .screen {
    width: 100%; height: 100%; border-radius: 38px; overflow: hidden; position: relative;
    background: var(--bg); color: var(--ink); font-size: 11px; line-height: 1.35;
    display: flex; flex-direction: column;
  }
  .screen::before { content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(closest-side at 22% 18%, var(--mesh-a), transparent 70%),
      radial-gradient(closest-side at 85% 40%, var(--mesh-b), transparent 70%),
      radial-gradient(closest-side at 40% 90%, var(--mesh-c), transparent 70%);
    animation: drift 30s ease-in-out infinite alternate; }
  .screen > * { position: relative; z-index: 1; }
  .status { display: flex; justify-content: space-between; padding: 14px 24px 0; font-weight: 700; font-size: 12px; }
  .status svg { width: 42px; height: 12px; }
  .appbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 8px; }
  .appbar b { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
  .pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px;
          background: var(--glass-raised); border: 1px solid var(--glass-border); font-weight: 700; font-size: 10.5px; color: var(--ink-muted); }
  .pill .gate { width: 22px; height: 22px; }
  .content { padding: 0 10px; display: grid; gap: 7px; flex: 1; align-content: start; min-height: 0; }
  .panel { background: var(--glass-raised); border: 1px solid var(--glass-border); border-radius: 16px; padding: 10px 12px; }
  .k { font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
  .bal { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
  .bal .n { font-size: 34px; font-weight: 800; letter-spacing: -0.05em; line-height: 1;
            background: linear-gradient(135deg, var(--violet), var(--violet-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .bal .u { font-weight: 700; color: var(--ink-muted); }
  .bal .chip { margin-left: auto; font-size: 9.5px; font-weight: 700; color: var(--mint-text); background: rgb(53 208 165 / .16); padding: 3px 7px; border-radius: 999px; }
  .sub { color: var(--ink-muted); margin-top: 4px; font-size: 10.5px; }
  .rungs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
  .rung { text-align: center; padding: 6px 0 5px; border-radius: 10px; background: var(--glass-base); border: 1px solid var(--glass-border); }
  .rung .k { font-size: 7.5px; letter-spacing: .08em; }
  .rung .v { font-weight: 700; font-size: 12px; }
  .rung.on { background: linear-gradient(135deg, var(--violet), var(--violet-deep)); border-color: transparent; color: #fff; }
  .rung.on .k { color: rgb(255 255 255 / .8); }
  .today { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 0; }
  .today span { font-size: 9.5px; color: var(--ink-faint); font-weight: 600; }
  .task { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 7px 12px; }
  .task .box { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-faint); display: grid; place-items: center; }
  .task .box.done { background: var(--mint); border-color: var(--mint); }
  .task .box svg { width: 10px; height: 10px; }
  .task .t { font-weight: 700; font-size: 11px; }
  .task .m { font-size: 9px; color: var(--ink-faint); font-weight: 600; }
  .task .a { font-weight: 700; color: var(--mint-text); font-size: 11px; }
  .task .a.pending { color: var(--ink-faint); }
  .sheet { margin: auto 6px 6px; padding: 10px; border-radius: 22px; background: var(--glass-overlay); border: 1px solid var(--glass-border);
           box-shadow: var(--glass-shadow); display: grid; gap: 10px; }
  .sheet .row { display: flex; justify-content: space-between; align-items: baseline; }
  .sheet .row b { font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; }
  .sheet .row span { font-size: 9.5px; color: var(--ink-faint); font-weight: 600; }
  .mins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .mins button { height: 36px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-base); color: var(--ink); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; display: grid; line-height: 1.15; }
  .mins button small { font-size: 8.5px; color: var(--ink-faint); font-weight: 600; }
  .mins button[aria-pressed="true"] { background: rgb(109 93 246 / .16); border-color: rgb(109 93 246 / .5); }
  .pay { height: 40px; border: 0; border-radius: 14px; color: #fff; font: inherit; font-weight: 800; font-size: 12px; cursor: pointer; position: relative; overflow: hidden;
         background: linear-gradient(135deg, var(--violet), var(--violet-deep)); box-shadow: 0 10px 22px -10px rgb(109 93 246 / .8); transition: transform .12s; }
  .pay:active { transform: scale(.98); }
  .pay .shine { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .4), transparent); transform: translateX(-120%); }
  .pay.busy .shine { animation: sweep1 .9s ease-in-out; }
  .pay[disabled] { cursor: default; }
  @keyframes sweep1 { to { transform: translateX(120%); } }
  .buy { display: grid; gap: 10px; }
  .session { display: none; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
  .session .left { color: var(--ink-muted); font-size: 12px; }
  .session .clock { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
  .session .close { font: inherit; font-size: 10.5px; font-weight: 700; color: var(--ink); background: var(--glass-raised); border: 1px solid var(--glass-border); border-radius: 12px; height: 34px; padding: 0 12px; cursor: pointer; }
  .screen[data-state="open"] .session { display: grid; }
  .screen[data-state="open"] .buy { display: none; }
  .home-ind { width: 110px; height: 4px; border-radius: 2px; background: var(--ink); opacity: .35; margin: 4px auto 7px; flex: none; }

  /* The mascot, drawn from the app's 64-grid spec. Tint carries state; the boom angle carries it too. */
  .gate { color: var(--coral); display: block; overflow: visible; }
  .gate .boom { transform-box: view-box; transform-origin: 34px 28px; transform: rotate(0deg); transition: transform var(--gate-ms, .4s) cubic-bezier(.33,1,.68,1); }
  .gate.lifting { color: var(--amber); }
  .gate.lifting .boom { transform: rotate(-20deg); }
  .gate.open { color: var(--mint); }
  .gate.open .boom { transform: rotate(-42deg); }
  .gate { transition: color var(--gate-ms, .4s) linear; }

  .mascot { position: absolute; z-index: 2; left: 0; bottom: 8%; width: 190px; display: grid; gap: 8px; justify-items: start; }
  .mascot .gate { width: 168px; height: 168px; filter: drop-shadow(0 16px 30px rgb(46 47 74 / .25)); }
  .mascot .state { font-size: .82rem; font-weight: 700; color: var(--ink-muted); display: flex; align-items: center; gap: 8px; }
  .mascot .state i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); transition: background .4s; }
  .mascot .state[data-state="lifting"] i { background: var(--amber); }
  .mascot .state[data-state="open"] i { background: var(--mint); }

  .hint { position: absolute; z-index: 2; left: 0; top: 8%; padding: 10px 14px; border-radius: 16px; display: grid; gap: 2px; width: 190px; animation: floaty 7s ease-in-out infinite; }
  .hint b { font-size: .85rem; font-weight: 800; }
  .hint span { font-size: .8rem; color: var(--ink-muted); }
  .hint button { margin-top: 8px; justify-self: start; font: inherit; font-size: .78rem; font-weight: 700; color: var(--violet-text); background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

  @media (max-width: 900px) {
    .stage { min-height: 700px; justify-items: center; padding-right: 0; }
    .hint { top: 0; }
    .mascot { bottom: 0; }
  }
  @media (max-width: 520px) {
    .phone { width: 262px; }
    .hint { width: 160px; }
    .mascot { width: 140px; } .mascot .gate { width: 120px; height: 120px; }
  }

  /* ── Thesis strip ────────────────────────────────────────────────────── */
  .thesis { padding-block: 0 clamp(40px, 5vw, 72px); }
  .screens.tight { padding-top: clamp(24px, 3vw, 40px); }
  .thesis .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .thesis .glass { padding: 22px 22px 24px; display: grid; gap: 10px; }
  .thesis .glass h3 { font-size: 1.25rem; }
  .thesis .glass p { color: var(--ink-muted); font-size: .98rem; }
  @media (max-width: 760px) { .thesis .grid { grid-template-columns: 1fr; } }

  /* ── How it works ────────────────────────────────────────────────────── */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
  .step { padding: 22px; display: grid; gap: 12px; align-content: start; position: relative; }
  .step::before {
    counter-increment: step; content: counter(step);
    width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
    font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: .9rem;
    color: var(--violet-text); background: rgb(109 93 246 / .12); border: 1px solid rgb(109 93 246 / .25);
  }
  .step h3 { font-size: 1.1rem; }
  .step p { color: var(--ink-muted); font-size: .95rem; }
  .step .fact { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--hairline); font-size: .85rem; color: var(--ink-faint); }
  .step .fact b { color: var(--ink); font-weight: 600; }
  @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

  /* ── Ladder: the price calculator ────────────────────────────────────── */
  .ladder .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
  .ladder .section-head { margin-bottom: 24px; }
  .ladder .facts { display: grid; gap: 10px; margin-top: 24px; }
  .ladder .facts li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-muted); font-size: .95rem; }
  .ladder .facts li:last-child { border-bottom: 0; }
  .ladder .facts b { color: var(--ink); font-weight: 600; white-space: nowrap; }
  .ladder ul { list-style: none; margin: 0; padding: 0; }
  .calc { padding: 24px; display: grid; gap: 22px; }
  .calc .controls { display: grid; gap: 18px; }
  .calc label { display: grid; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--ink-muted); }
  .calc label span { display: flex; justify-content: space-between; }
  .calc label span b { color: var(--ink); font-weight: 600; }
  .calc input[type=range] { width: 100%; accent-color: var(--violet); height: 28px; }
  .seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px; border-radius: 14px; background: var(--glass-base); border: 1px solid var(--glass-border); }
  .seg button { height: 38px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-muted); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; transition: background .15s, color .15s; }
  .seg button[aria-pressed="true"] { background: var(--glass-overlay); color: var(--ink); box-shadow: 0 4px 12px -6px rgb(46 47 74 / .35); }
  .bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; height: 190px; padding-top: 8px; }
  .bar { display: grid; gap: 8px; align-content: end; height: 100%; text-align: center; }
  .bar .col { position: relative; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, var(--violet), var(--violet-deep)); opacity: .45; transform-origin: bottom; transition: opacity .25s, transform .7s cubic-bezier(.2,.8,.2,1); }
  .bar[data-active="true"] .col { opacity: 1; }
  .bars.pre .col { transform: scaleY(.08); }
  .bar .x { font-size: .82rem; font-weight: 600; color: var(--ink-muted); }
  .bar[data-active="true"] .x { color: var(--ink); }
  .bar .n { font-size: .72rem; color: var(--ink-faint); font-weight: 600; }
  .result { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; padding-top: 18px; border-top: 1px solid var(--hairline); }
  .result .big { font-size: 3rem; font-weight: 600; line-height: 1; color: var(--ink); }
  .result .big em { font-style: normal; font-size: 1rem; color: var(--ink-muted); font-weight: 500; margin-left: 6px; }
  .result .note { color: var(--ink-muted); font-size: .9rem; margin-top: 8px; }
  .result .ceiling { text-align: right; font-size: .85rem; color: var(--ink-faint); }
  .result .ceiling b { display: block; color: var(--amber-text); font-weight: 700; font-size: 1rem; }
  @media (max-width: 900px) { .ladder .wrap { grid-template-columns: 1fr; } }

  /* ── Proof ───────────────────────────────────────────────────────────── */
  .proof .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .proof .card { padding: 22px; display: grid; gap: 12px; align-content: start; }
  .proof .card svg { width: 40px; height: 40px; }
  .proof .card h3 { font-size: 1.1rem; }
  .proof .card p { color: var(--ink-muted); font-size: .95rem; }
  .proof .pays { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--ink-faint); padding-top: 10px; }
  .proof .pays i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
  .proof .pays i.on { background: var(--mint); }
  .proof .tag { justify-self: start; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; }
  .tag.free { background: rgb(53 208 165 / .15); color: var(--mint-text); }
  .tag.premium { background: rgb(109 93 246 / .14); color: var(--violet-text); }
  .tag.amber { background: rgb(245 165 36 / .18); color: var(--amber-text); }
  @media (max-width: 900px) { .proof .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .proof .grid { grid-template-columns: 1fr; } }

  /* ── Ledger + receipt ────────────────────────────────────────────────── */
  .ledger .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
  .receipt {
    background: var(--receipt); border: 1px solid var(--glass-border); border-radius: 22px; padding: 26px 26px 28px;
    box-shadow: var(--glass-shadow); max-width: 440px; margin-inline: auto; width: 100%; position: relative;
  }
  .receipt::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 10px;
    background: radial-gradient(circle at 6px -2px, transparent 6px, var(--receipt) 6.5px) 0 0 / 14px 10px repeat-x; }
  .receipt .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
  .receipt .head b { font-weight: 800; letter-spacing: -0.02em; font-size: 1.15rem; font-family: "Plus Jakarta Sans", sans-serif; }
  .receipt .head span { color: var(--ink-faint); font-size: .8rem; }
  .receipt .line { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--hairline); font-size: .92rem; }
  .receipt .line span:first-child { color: var(--ink-muted); }
  .receipt .line .plus { color: var(--mint-text); }
  .receipt .line .minus { color: var(--coral-text); }
  .receipt .line .exp { color: var(--ink-faint); }
  .receipt .total { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding-top: 14px; font-weight: 600; font-size: 1.05rem; }
  .receipt .total small { display: block; font-weight: 500; color: var(--ink-faint); font-size: .78rem; margin-top: 4px; }
  .ledger .copy { display: grid; gap: 16px; }
  .ledger .copy p { color: var(--ink-muted); }
  @media (max-width: 900px) { .ledger .wrap { grid-template-columns: 1fr; } }

  /* ── Privacy ─────────────────────────────────────────────────────────── */
  .privacy .grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
  .nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .nots li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
  .nots li:last-child { border-bottom: 0; }
  .nots li svg { width: 24px; height: 24px; margin-top: 2px; }
  .nots li b { display: block; font-weight: 700; }
  .nots li span { color: var(--ink-muted); font-size: .95rem; }
  .label-table { padding: 22px; display: grid; gap: 14px; }
  .label-table h3 { display: flex; justify-content: space-between; align-items: baseline; }
  .label-table h3 span { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
  .label-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  .label-table th { text-align: left; color: var(--ink-faint); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 0 0 8px; font-weight: 800; }
  .label-table td { padding: 10px 0; border-top: 1px solid var(--hairline); vertical-align: top; }
  .label-table td:last-child { text-align: right; white-space: nowrap; }
  .label-table .events { color: var(--ink-muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 6px; }
  .label-table .events code { font-family: "IBM Plex Mono", monospace; font-size: .8rem; padding: 2px 8px; border-radius: 8px; background: var(--glass-base); border: 1px solid var(--glass-border); color: var(--ink); }
  @media (max-width: 900px) { .privacy .grid { grid-template-columns: 1fr; } }

  /* ── Screens gallery ─────────────────────────────────────────────────── */
  .screens .section-head { display: flex; justify-content: space-between; align-items: end; max-width: none; gap: 24px; flex-wrap: wrap; }
  .screens .section-head > div { display: grid; gap: 14px; max-width: 40em; }
  .toggle { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--glass-base); border: 1px solid var(--glass-border); }
  .toggle button { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-muted); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
  .toggle button[aria-pressed="true"] { background: var(--glass-overlay); color: var(--ink); box-shadow: 0 4px 12px -6px rgb(46 47 74 / .35); }
  .rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(440px, 84vw); gap: 24px; overflow-x: auto; padding: 8px 4px 28px; scroll-snap-type: x mandatory; scrollbar-width: thin; scroll-padding-inline: 4px; }
  .shot { scroll-snap-align: start; display: grid; gap: 14px; }
  .shot .frame { border-radius: 28px; overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); background: var(--glass-base); }
  .shot img { display: block; width: 100%; height: auto; aspect-ratio: 1320 / 2868; object-fit: cover; }
  /* height:auto is load-bearing: the <img> carries width/height attributes so
     the rail reserves space before the file loads, and without it the 1434px
     height attribute wins over aspect-ratio and stretches every frame. */
  .shot figcaption { font-size: 1rem; color: var(--ink); font-weight: 700; padding-left: 6px; }
  .shot figcaption span { display: block; color: var(--ink-muted); font-weight: 500; font-size: .9rem; margin-top: 2px; }
  .rail-hint { color: var(--ink-faint); font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-top: -12px; }
  .rail-hint svg { width: 18px; height: 18px; }
  .screens[data-shots="dark"] .light-only, .screens[data-shots="light"] .dark-only { display: none; }
  figure { margin: 0; }

  /* ── Premium ─────────────────────────────────────────────────────────── */
  .premium .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
  .tier { padding: 26px; display: grid; gap: 18px; align-content: start; }
  .tier.paid { border-color: rgb(109 93 246 / .4); background: linear-gradient(180deg, rgb(109 93 246 / .10), transparent 60%), var(--glass-raised); }
  .tier .name { display: flex; justify-content: space-between; align-items: baseline; }
  .tier .name h3 { font-size: 1.4rem; }
  .tier .name span { color: var(--ink-faint); font-size: .85rem; font-weight: 600; }
  .tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .tier li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .95rem; color: var(--ink-muted); }
  .tier li svg { width: 20px; height: 20px; margin-top: 1px; }
  .tier li b { color: var(--ink); font-weight: 600; }
  .prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .price-card { padding: 20px 22px; display: grid; gap: 6px; }
  .price-card .k { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
  .price-card .v { font-size: 1.9rem; font-weight: 600; color: var(--ink); line-height: 1.1; }
  .price-card .v em { font-style: normal; font-size: .9rem; color: var(--ink-muted); font-weight: 500; }
  .price-card .d { font-size: .88rem; color: var(--ink-muted); }
  .price-card.best { border-color: rgb(109 93 246 / .4); }
  .trial { margin-top: 20px; padding: 18px 22px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
  .trial svg { width: 32px; height: 32px; }
  .trial p { color: var(--ink-muted); font-size: .95rem; }
  .trial b { color: var(--ink); }
  .premium .disclaimer { margin-top: 14px; font-size: .8rem; color: var(--ink-faint); max-width: 60em; }
  @media (max-width: 900px) { .premium .compare, .prices { grid-template-columns: 1fr; } }

  /* ── FAQ ─────────────────────────────────────────────────────────────── */
  .faq .list { display: grid; gap: 10px; max-width: 760px; }
  details { border-radius: 16px; padding: 0 20px; }
  details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 700; }
  details summary::-webkit-details-marker { display: none; }
  details summary::after { content: "+"; font-family: "IBM Plex Mono", monospace; font-size: 1.2rem; color: var(--violet-text); transition: transform .2s; }
  details[open] summary::after { transform: rotate(45deg); }
  details p { padding: 0 0 18px; color: var(--ink-muted); max-width: 60ch; }

  /* ── Final CTA + footer ──────────────────────────────────────────────── */
  .final { text-align: center; }
  .final .glass { padding: clamp(40px, 6vw, 72px) 24px; display: grid; gap: 20px; justify-items: center; }
  .final h2 { max-width: 20ch; }
  .final .lede { text-align: center; }
  .final .cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
  footer { border-top: 1px solid var(--hairline); padding: 36px 0 48px; color: var(--ink-faint); font-size: .88rem; }
  footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
  footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
  footer a { color: var(--ink-muted); text-decoration: none; font-weight: 600; }
  footer a:hover { color: var(--ink); }

  /* ── Reveal: from a visible resting state, transform only ───────────── */
  .reveal { transition: transform .7s cubic-bezier(.2,.8,.2,1); }
  .reveal.pre { transform: translateY(18px); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .bars.pre .col, .reveal.pre { transform: none; }
  }

.doc article{background:var(--glass); border:1px solid var(--border); border-radius:24px; padding:clamp(24px,5vw,48px);}
.doc h1{font-size:clamp(2rem,5vw,2.8rem); font-weight:800; letter-spacing:-0.03em; line-height:1.1; margin:0 0 8px; text-wrap:balance;}
.doc .meta{color:var(--ink-faint); font-size:.9rem; font-weight:600; margin-bottom:32px; display:flex; gap:16px; flex-wrap:wrap;}
.doc h2{font-size:1.35rem; font-weight:800; letter-spacing:-0.02em; margin:40px 0 12px;}
.doc h3{font-size:1.05rem; font-weight:700; margin:28px 0 8px;}
.doc p, .doc li{color:var(--ink-muted);}
.doc p{margin:0 0 14px; max-width:68ch;}
.doc strong{color:var(--ink); font-weight:700;}
.doc ul, .doc ol{padding-left:22px;}
.doc li{margin:6px 0;}
.doc hr{border:0; border-top:1px solid var(--hairline); margin:36px 0;}
.doc table{width:100%; border-collapse:collapse; font-size:.95rem; margin:16px 0 24px;}
.doc th{text-align:left; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); padding:0 0 8px;}
.doc td{padding:10px 8px 10px 0; border-top:1px solid var(--hairline); vertical-align:top; color:var(--ink-muted);}
.doc code{font-family:"IBM Plex Mono",monospace; font-size:.88em; background:rgb(109 93 246/.12); padding:2px 6px; border-radius:6px; color:var(--ink);}
.doc blockquote p{margin:0;}
.doc .lead p:first-child{color:var(--ink); font-size:1.15rem;}

/* ── Added for the multi-page build ───────────────────────────────────── */
/* Clip rather than park it at left:-9999px. Off-screen positioning extends the
   scrollable area inline-start, which under dir="rtl" shifts the whole document
   out of the viewport and renders a blank page. */
.skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:99;width:auto;height:auto;margin:0;padding:10px 16px;overflow:visible;clip-path:none;background:var(--violet);color:#fff;border-end-end-radius:10px;font-weight:700;text-decoration:none}
.nav .langs{display:flex;gap:2px;margin-inline-start:auto;padding-inline-end:10px}
.nav .langs a{font-size:.78rem;font-weight:700;letter-spacing:.02em;padding:5px 7px;border-radius:8px;color:var(--ink-faint);text-decoration:none}
.nav .langs a:hover{color:var(--ink)}
.nav .langs a[aria-current="true"]{color:var(--violet-text);background:rgb(109 93 246 / 12%)}
.nav nav a[aria-current="page"]{color:var(--violet-text)}
.page-lead .wrap{display:block}
.page-lead .hero-copy{max-width:52rem}
.calc .calc-k{font-size:.85rem;font-weight:700;color:var(--ink-muted);margin-bottom:8px}
/* The ladder columns size themselves with an inline height:%, which resolves
   against their grid row. With auto rows that row is the column's own (empty)
   content, so the percentage computed to zero and no bar was ever drawn.
   A definite 1fr track gives the percentage something to resolve against. */
.bars .bar{grid-template-rows:1fr auto auto}
.sheet .gate-note{font-size:9.5px;color:var(--ink-faint);font-weight:600;margin-top:2px}
.sheet .close small{font-weight:600;color:var(--ink-faint)}
.label-table h3 span{font-weight:500;color:var(--ink-muted)}
footer .made{margin:0}
footer .copy{margin:0;color:var(--ink-faint);font-size:.82rem}

/* Documents */
.doc{padding:72px 0 40px}
.doc .wrap{max-width:46rem}
.doc article{font-size:1rem;line-height:1.75;color:var(--ink)}
.doc h1{font-size:clamp(1.9rem,4vw,2.6rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 10px}
.doc h2{font-size:1.18rem;margin:34px 0 10px;letter-spacing:-.01em}
.doc h3{font-size:1rem;margin:22px 0 8px}
.doc p,.doc li{color:var(--ink-muted)}
.doc a{color:var(--violet-text)}
.doc .table-wrap,.doc .doc-table{overflow-x:auto}

/* Right-to-left.
   The stage lays the phone out with justify-items:end, which flips on its own,
   so the floating hint and mascot must flip with it or they land on top of the
   phone instead of in the free space beside it. */
[dir="rtl"] .stage{padding-right:0;padding-inline-end:clamp(0px,3vw,24px)}
[dir="rtl"] .hint{left:auto;right:0}
[dir="rtl"] .mascot{left:auto;right:0;justify-items:end}
[dir="rtl"] .hint button{justify-self:end}
[dir="rtl"] .hero-copy .fine span::before{transform:scaleX(-1)}
[dir="rtl"] .receipt,[dir="rtl"] .bars,[dir="rtl"] .rungs,[dir="rtl"] .mins{direction:rtl}
[dir="rtl"] .mono{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .rail{direction:rtl}
[dir="rtl"] .doc article{text-align:right}