@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/assets/fonts/Bricolage/Bricolage.woff2") format("woff2-variations"),
         url("/assets/fonts/Bricolage/Bricolage.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
  }

  :root {
    color-scheme: light;
    --ink: #1E2125;
    --muted: #5A6271;
    --quiet: #616978;
    --paper: #F5F2EB;
    --paper-soft: #FAF8F1;
    --surface: #FEFDF9;
    --white: #FFFFFF;
    --line: #E2DBC9;
    --line-strong: #D0C6B2;
    --forest: #38664A;
    --forest-dark: #244735;
    --teal: #1E8B7F;
    --success: #387650;
    --retailer: #DBB11E;
    --card-protection: #3B8BC7;
    --insurance: #8163C7;
    --warning: #C8922A;
    --destructive: #C7473C;
    --gold: #C29C52;
    --note-sheen: rgba(255, 255, 255, .65);
    --shadow-soft: 0 16px 42px rgba(31, 33, 37, .10);
    --shadow-card: 0 8px 24px rgba(31, 33, 37, .08);
    /* Corner radii mirror the app's OmoraRadius scale:
       chip = tiny (9), control = sm/control/sheet (10), card = card/md (12). */
    --radius-chip: 9px;
    --radius-control: 10px;
    --radius-card: 12px;
    --max: 1160px;
    --font: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --ink: #F4F5F7;
      --muted: #C2C9D4;
      --quiet: #9EA6B2;
      --paper: #171A1D;
      --paper-soft: #1D211F;
      --surface: #222723;
      --white: #2A302B;
      --line: #384239;
      --line-strong: #465244;
      --forest: #8DDBAA;
      --forest-dark: #5EA87B;
      --teal: #5DB6A5;
      --success: #6BCA99;
      --retailer: #FFD764;
      --card-protection: #7AC4FB;
      --insurance: #BEA3F9;
      --warning: #F2C05B;
      --destructive: #FF746A;
      --gold: #E5C17C;
      --note-sheen: rgba(255, 255, 255, .32);
      --shadow-soft: 0 18px 54px rgba(0, 0, 0, .40);
      --shadow-card: 0 10px 28px rgba(0, 0, 0, .28);
    }
  }

  * { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    overflow-x: clip;
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    letter-spacing: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  img {
    display: block;
    max-width: 100%;
  }

  button,
  select,
  input {
    font: inherit;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .site-nav {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
  }

  .nav-inner {
    max-width: var(--max);
    min-height: 64px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .brand span {
    font-size: 19px;
    font-weight: 720;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
  }

  .nav-links a:not(.nav-cta) {
    font-size: 14px;
    color: var(--muted);
    font-weight: 610;
  }

  .nav-links a:not(.nav-cta):hover,
  .nav-links a:not(.nav-cta):focus-visible {
    color: var(--ink);
  }

  .lang-select {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    color: var(--muted);
    font-size: 12px;
    font-weight: 720;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .lang-select:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--forest) 42%, transparent);
    outline-offset: 3px;
  }

  .nav-cta,
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border-radius: var(--radius-card);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .nav-cta {
    min-height: 38px;
    padding: 0 15px;
    background: var(--forest);
    color: var(--paper);
    font-size: 13px;
  }

  .button.primary {
    padding: 0 20px;
    background: var(--forest-dark);
    color: #FFFFFF;
    box-shadow: 0 10px 22px rgba(36, 71, 53, .18);
  }

  @media (prefers-color-scheme: dark) {
    .button.primary,
    .nav-cta {
      color: #1F1E1A;
    }
  }

  .button.secondary {
    padding: 0 18px;
    color: var(--ink);
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--surface) 74%, transparent);
  }

  .button svg,
  .nav-cta svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
  }

  .cta-text-short {
    display: none;
  }

  main {
    position: relative;
  }

  .section {
    padding: 96px 22px;
  }

  .section[id],
  .final[id] {
    scroll-margin-top: 132px;
  }

  .section.compact {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section[data-phase="capture"] { background: color-mix(in srgb, var(--teal) 7%, var(--paper)); }
  .section[data-phase="keep"]    { background: color-mix(in srgb, var(--gold) 9%, var(--paper)); }
  .section[data-phase="claim"]   { background: color-mix(in srgb, var(--forest) 6%, var(--paper)); }

  #capture  { background: linear-gradient(to bottom, var(--paper) 0, color-mix(in srgb, var(--teal) 7%, var(--paper)) 80px); }
  #warranty { background: linear-gradient(to bottom, color-mix(in srgb, var(--teal) 7%, var(--paper)) 0, color-mix(in srgb, var(--gold) 9%, var(--paper)) 80px); }
  #claim    { background: linear-gradient(to bottom, color-mix(in srgb, var(--gold) 9%, var(--paper)) 0, color-mix(in srgb, var(--forest) 6%, var(--paper)) 80px); }

  #pricing { background: var(--surface); }

  .section-inner {
    max-width: var(--max);
    margin: 0 auto;
  }

  .eyebrow {
    margin: 0 0 13px;
    color: var(--forest);
    font-size: 13px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  h1,
  h2,
  h3,
  p {
    margin-top: 0;
  }

  h1 {
    margin-bottom: 22px;
    max-width: 760px;
    font-size: 68px;
    line-height: 1.02;
    font-weight: 760;
    letter-spacing: 0;
    font-variation-settings: "opsz" 54, "wdth" 100;
  }

  h2 {
    margin-bottom: 16px;
    font-size: 46px;
    line-height: 1.07;
    font-weight: 740;
    letter-spacing: 0;
    font-variation-settings: "opsz" 42, "wdth" 100;
  }

  h3 {
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 720;
  }

  .lede {
    max-width: 620px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 20px;
    line-height: 1.55;
  }

  .hero {
    padding: 84px 22px 16px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, transparent), transparent 55%),
      var(--paper);
  }

  .hero-grid {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 500px);
    gap: 44px;
    align-items: center;
  }

  .hero-copy { padding: 0; }

  .hero-copy .lede {
    margin-bottom: 18px;
  }

  /* Mobile-only phone mockup of the My Stuff / household library. Hidden by
     default — the desktop hero keeps its own phone + float-cards; the
     max-width:640px block turns this on above the eyebrow pills. */
  .hero-phone {
    display: none;
  }

  /* Differentiator line — quiet subtext in the site's muted colour, matching
     the lede. Two twins drive its responsive placement so exactly one shows
     at any width: .hero-diff sits below the CTAs on desktop/tablet;
     .hero-diff-mobile sits below the story rail on mobile (toggled in the
     max-width:640px block). */
  .hero-diff,
  .hero-diff-mobile {
    max-width: 580px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
  }
  .hero-diff { display: none; } /* relocated to the page bottom (.final-note) at every width */
  .hero-diff-mobile { display: none; margin: 4px 0 0; }

  /* The differentiator subtext, relocated to the very bottom of the page as
     quiet sub-text under the final green "get started" CTA (so it needs light
     ink on the dark-green .final bg, not --muted). Desktop/tablet show the
     fuller copy (.final-note-desktop → hero.differentiator); phones show the
     shorter twin (.final-note-mobile → hero.differentiator_short). Exactly
     one shows per width. */
  .final-note {
    max-width: 54ch;
    margin: 22px auto 0;
    color: rgba(255, 255, 255, .70);
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
  }
  .final-note-mobile { display: none; }
  .final-note-desktop { display: block; }

  /* Old static "Claim / Routes" explainer — hidden for now; the interactive
     #claim-live demo below it now covers the same ground. Re-enable by
     removing this rule. */
  #claim { display: none; }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
  }

  .hero-note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--quiet);
    font-size: 14px;
  }

  .hero-note span {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--muted);
    font-weight: 500;
    /* Faint on-brand fill (padding-box) inside a forest→teal→gold gradient
       edge (border-box) — the static "AI glimmer" resting state. The edge
       slides and a sheen sweeps across in the no-preference block below. */
    background:
      linear-gradient(color-mix(in srgb, var(--forest) 6%, var(--surface)),
                      color-mix(in srgb, var(--forest) 6%, var(--surface))) padding-box,
      linear-gradient(115deg, var(--forest), var(--teal), var(--gold), var(--forest)) border-box;
    background-size: auto, 220% 100%;
    background-repeat: no-repeat, repeat;
    background-position: 0 0, 0 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-note span {
      animation: hero-note-edge 7s linear infinite;
    }

    .hero-note span::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 35%, var(--note-sheen) 50%, transparent 65%);
      transform: translateX(-160%);
      animation: hero-note-sheen 5.5s ease-in-out infinite;
    }

    .hero-note span:nth-child(2)::after { animation-delay: .45s; }
    .hero-note span:nth-child(3)::after { animation-delay: .9s; }

    @keyframes hero-note-edge {
      to { background-position: 0 0, -220% 0; }
    }

    @keyframes hero-note-sheen {
      0%, 22% { transform: translateX(-160%); }
      60%, 100% { transform: translateX(160%); }
    }
  }

  .hero-stage {
    position: relative;
    min-height: 510px;
    isolation: isolate;
  }

  .device-cluster {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .phone {
    position: relative;
    width: 244px;
    border-radius: 44px;
    padding: 8px;
    background: #111315;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }

  .phone::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 50%;
    width: 72px;
    height: 21px;
    border-radius: 999px;
    background: #111315;
    transform: translateX(-50%);
  }

  .phone-screen {
    width: 100%;
    aspect-ratio: 900 / 1954;
    border-radius: 37px;
    overflow: hidden;
    background: var(--paper-soft);
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }

  .skel-cap {
    flex: 0 0 auto;
    height: 42cqw;
    padding: 15cqw 6cqw 0;
    display: flex;
    flex-direction: column;
    gap: 4cqw;
    background: linear-gradient(150deg,
      color-mix(in srgb, var(--forest) 20%, var(--surface)),
      color-mix(in srgb, var(--teal) 14%, var(--surface)));
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  }

  .skel-status {
    width: 22cqw;
    height: 2.4cqw;
    border-radius: 999px;
    background: color-mix(in srgb, var(--forest-dark) 30%, transparent);
  }

  .skel-title {
    width: 60cqw;
    height: 5cqw;
    border-radius: 3cqw;
    background: color-mix(in srgb, var(--forest-dark) 22%, transparent);
  }

  .skel-list {
    flex: 1 1 auto;
    padding: 6cqw;
    display: flex;
    flex-direction: column;
    gap: 5cqw;
  }

  .skel-row {
    display: flex;
    align-items: center;
    gap: 5cqw;
  }

  .skel-thumb {
    flex: 0 0 auto;
    width: 16cqw;
    height: 16cqw;
    border-radius: 4cqw;
    background: color-mix(in srgb, var(--line) 70%, var(--surface));
  }

  .skel-lines {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3cqw;
  }

  .skel-bar {
    height: 3cqw;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 62%, var(--surface));
  }

  .skel-bar.short {
    width: 55%;
    background: color-mix(in srgb, var(--line) 45%, var(--surface));
  }

  .skel-tick {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12cqw;
    height: 12cqw;
    border-radius: 50%;
    font-size: 7cqw;
    line-height: 1;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 16%, var(--surface));
  }

  .skel-mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12cqw;
    height: 12cqw;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mk) 16%, var(--surface));
  }

  .skel-mark::after {
    content: "";
    width: 4.6cqw;
    height: 4.6cqw;
    border-radius: 50%;
    background: var(--mk);
  }

  .skel-mark.purple { --mk: var(--insurance); }
  .skel-mark.orange { --mk: var(--gold); }

  .phone.primary {
    z-index: 3;
    transform: rotate(-3deg);
  }

  .float-card {
    position: absolute;
    z-index: 5;
    width: max-content;
    max-width: 190px;
    padding: 12px 13px;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }

  /* Desktop float-card typography. The mobile story cards (Concept C) own
     their own type scale via .sc-body below, so these are float-card only. */
  .float-card strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.15;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .float-card span {
    display: block;
    margin-top: 3px;
    color: var(--quiet);
    font-size: 13px;
  }

  /* Timeline chip: the cards tell ONE product's story, and this stage
     stamp is what makes the arc legible. Neutral by default; the colored
     beats (fault/claim/fixed) tint theirs below. */
  .float-card .float-stage {
    display: inline-block;
    margin: 0 0 7px;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--quiet);
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .float-card strong::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--accent, var(--forest));
  }

  /* One purchase, one story (Tag 1 → Monat 5): capture twice on day one,
     the pump fails in month 4 (still covered), the claim pack goes out,
     and month 5 ends on "repaired, free" — the shimmering payoff card.
     Positions follow the reading order (top-left → bottom-center). Bottom
     trio is cleared VERTICALLY for the tallest locale (de wraps title+sub;
     the stage chip adds ~24px): a band above the payoff card, because
     horizontal nudges can't survive the stage narrowing from ~500px
     (1280w) to ~460px (981w). */
  .float-card.receipt { --accent: var(--teal); left: 4px; top: 44px; }
  .float-card.coverage { --accent: var(--success); right: 0; top: 88px; }
  .float-card.fault { --accent: var(--destructive); left: 10px; bottom: 186px; }
  .float-card.claim { --accent: var(--insurance); right: 8px; bottom: 170px; }
  .float-card.fixed { --accent: var(--success); left: 96px; bottom: 20px; }

  /* Story escalation: the two capture cards stay plain, then the surfaces
     themselves take color — red problem, purple process, multicolored
     resolution. Tints stay soft washes (not solid alert fills) to match
     the site's pastel card language. */
  .float-card.fault {
    --accent: var(--destructive);
    background: color-mix(in srgb, var(--destructive) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--destructive) 38%, var(--line));
  }

  .float-card.claim {
    --accent: var(--insurance);
    background: color-mix(in srgb, var(--insurance) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--insurance) 38%, var(--line));
  }

  /* The payoff card borrows the hero-note "AI glimmer": a forest→teal→gold
     gradient edge (border-box layer) around a soft green fill (padding-box
     layer), plus the ::after sheen in the motion block. */
  .float-card.fixed {
    --accent: var(--success);
    border: 1px solid transparent;
    background:
      linear-gradient(color-mix(in srgb, var(--success) 5%, var(--surface)),
                      color-mix(in srgb, var(--success) 5%, var(--surface))) padding-box,
      linear-gradient(115deg, var(--forest), var(--teal), var(--gold), var(--forest)) border-box;
    background-size: auto, 220% 100%;
    background-repeat: no-repeat, repeat;
    /* Clips the ::after sheen sweep (mirrors .hero-note span). */
    overflow: hidden;
  }

  /* Desktop-only focus treatment: slightly scaled and shadow-lifted so the
     resolution is the focal card of the cluster; `scale` is an independent
     property, so the reveal's `translate` never fights it. The mobile
     story card is full-width — scaling it would just clip. */
  .float-card.fixed {
    scale: 1.04;
    box-shadow: var(--shadow-soft);
  }

  .float-card.fault .float-stage {
    color: color-mix(in srgb, var(--destructive) 72%, var(--ink));
    background: color-mix(in srgb, var(--destructive) 12%, transparent);
  }

  .float-card.claim .float-stage {
    color: color-mix(in srgb, var(--insurance) 72%, var(--ink));
    background: color-mix(in srgb, var(--insurance) 13%, transparent);
  }

  .float-card.fixed .float-stage {
    color: color-mix(in srgb, var(--success) 70%, var(--ink));
    background: color-mix(in srgb, var(--success) 14%, transparent);
  }

  /* ── Mobile hero: Concept C integrated timeline-rail ──────────────
     Mobile-only stand-in for the scattered desktop float-cards (see the
     ≤640 block, which hides .hero-stage and shows this). The same one-
     product story — buy → coverage → fault → claim → fixed — told as ONE
     morphing record card cross-fading through five beats, with a timeline
     rail underneath (line + fill + 5 stops + moving token + labels) that
     tracks the active beat. ~3.5s auto-advance + swipe (setupStoryCards()).
     Each beat carries its accent in --sc; the card stays on --surface, so
     the colour lives in the icon tile and status pill, not a card wash.
     Hidden everywhere else. */
  .story-cards {
    display: none;
    position: relative;
    /* Grid item of .hero-grid — min-width:0 lets it shrink to the cell so a
       card's nowrap subtitle ellipsises instead of forcing the whole deck
       (and the rail beneath it) wider than the viewport. */
    min-width: 0;
  }

  /* The active card is in-flow (position: relative) so the deck is as tall
     as it; inactive cards overlay it absolutely and cross-fade. min-height
     keeps the deck steady while a beat's single-line text ellipsises. */
  .story-deck {
    position: relative;
    min-height: 86px;
  }

  .story-card {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    opacity: 0;
    pointer-events: none;
    --sc: var(--forest);
  }

  .story-card.buy { --sc: var(--teal); }
  .story-card.coverage { --sc: var(--forest); }
  .story-card.fault { --sc: var(--destructive); }
  .story-card.claim { --sc: var(--insurance); }
  .story-card.fixed { --sc: var(--success); }

  .story-card.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
  }

  .sc-ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    color: var(--sc);
    background: color-mix(in srgb, var(--sc) 12%, var(--white));
    border: 1px solid color-mix(in srgb, var(--sc) 26%, transparent);
  }

  .sc-ic svg {
    width: 24px;
    height: 24px;
  }

  .sc-body {
    flex: 1;
    min-width: 0;
  }

  .sc-body .float-stage {
    display: block;
    font-family: "Courier Prime", "Courier New", monospace;
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--quiet);
  }

  .sc-body strong {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sc-body > span:last-child {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sc-pill {
    flex: none;
    align-self: flex-start;
    padding: 4px 8px;
    border-radius: 100px;
    font-family: "Courier Prime", "Courier New", monospace;
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: color-mix(in srgb, var(--sc) 80%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--sc) 32%, transparent);
    background: color-mix(in srgb, var(--sc) 8%, var(--white));
  }

  /* The rail (replaces the old segmented .story-progress). Pure CSS:
     positioned entirely by [data-beat] on .story-cards, which render()
     stamps each beat. Five stops → four gaps; the token/fill maths use
     (100% - 18px) to leave room for the 18px token at the ends. */
  .story-rail {
    position: relative;
    height: 54px;
    margin: 12px 8px 0;
  }

  .story-rail .rail-line {
    position: absolute;
    top: 22px;
    left: 9px;
    right: 9px;
    height: 2px;
    border-radius: 2px;
    background: var(--line-strong);
  }

  .story-rail .rail-fill {
    position: absolute;
    top: 22px;
    left: 9px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--forest);
  }

  .story-rail .rail-stops {
    position: absolute;
    top: 22px;
    left: 9px;
    right: 9px;
    display: flex;
    justify-content: space-between;
  }

  .story-rail .rail-stops i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line-strong);
    transform: translateY(-50%);
    transition: border-color .4s, background .4s;
  }

  .story-rail .rail-tok {
    position: absolute;
    top: 22px;
    left: 9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--forest);
    border: 3px solid var(--paper);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
    transform: translate(-50%, -50%);
    z-index: 3;
  }

  .story-rail .rail-labels {
    position: absolute;
    top: 35px;
    left: 9px;
    right: 9px;
    height: 14px;
    font-family: var(--font);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--quiet);
  }

  /* Each label is pinned under its stop (0/25/50/75/100% — the same positions
     as the fill/token), centred on it and sized to content, so labels never
     clip or push the rail past the viewport at any width or language. First +
     last clamp to the ends so they don't spill off the edges. */
  .story-rail .rail-labels span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    transition: color .4s;
  }

  .story-rail .rail-labels span:nth-child(1) { left: 0; transform: none; }
  .story-rail .rail-labels span:nth-child(2) { left: 25%; }
  .story-rail .rail-labels span:nth-child(3) { left: 50%; }
  .story-rail .rail-labels span:nth-child(4) { left: 75%; }
  .story-rail .rail-labels span:nth-child(5) { left: auto; right: 0; transform: none; }

  /* Token colour follows the active beat's accent. */
  .story-cards[data-beat="0"] .rail-tok { background: var(--teal); }
  .story-cards[data-beat="1"] .rail-tok { background: var(--forest); }
  .story-cards[data-beat="2"] .rail-tok { background: var(--destructive); }
  .story-cards[data-beat="3"] .rail-tok { background: var(--insurance); }
  .story-cards[data-beat="4"] .rail-tok { background: var(--success); }

  /* Fill width + token position per beat (5 stops → 4 quarter gaps). */
  .story-cards[data-beat="0"] .rail-fill { width: 0; }
  .story-cards[data-beat="1"] .rail-fill { width: calc((100% - 18px) * .25); }
  .story-cards[data-beat="2"] .rail-fill { width: calc((100% - 18px) * .5); }
  .story-cards[data-beat="3"] .rail-fill { width: calc((100% - 18px) * .75); }
  .story-cards[data-beat="4"] .rail-fill { width: calc(100% - 18px); }
  .story-cards[data-beat="0"] .rail-tok { left: 9px; }
  .story-cards[data-beat="1"] .rail-tok { left: calc(9px + (100% - 18px) * .25); }
  .story-cards[data-beat="2"] .rail-tok { left: calc(9px + (100% - 18px) * .5); }
  .story-cards[data-beat="3"] .rail-tok { left: calc(9px + (100% - 18px) * .75); }
  .story-cards[data-beat="4"] .rail-tok { left: calc(100% - 9px); }

  /* Completed stops fill in as the token passes them. */
  .story-cards[data-beat="1"] .rail-stops i:nth-child(-n+2),
  .story-cards[data-beat="2"] .rail-stops i:nth-child(-n+3),
  .story-cards[data-beat="3"] .rail-stops i:nth-child(-n+4),
  .story-cards[data-beat="4"] .rail-stops i:nth-child(-n+5),
  .story-cards[data-beat="0"] .rail-stops i:nth-child(1) {
    border-color: var(--forest);
    background: var(--forest);
  }

  /* The active beat's label is highlighted. */
  .story-cards[data-beat="0"] .rail-labels span:nth-child(1),
  .story-cards[data-beat="1"] .rail-labels span:nth-child(2),
  .story-cards[data-beat="2"] .rail-labels span:nth-child(3),
  .story-cards[data-beat="3"] .rail-labels span:nth-child(4),
  .story-cards[data-beat="4"] .rail-labels span:nth-child(5) {
    color: var(--ink);
    font-weight: 700;
  }

  /* Phone-screen story scenes (mobile only): while the story deck plays,
     the phone acts out each beat — camera snapping a receipt, shield
     (protected), smoking dishwasher, claim pack, repaired + sparkle.
     One .scene per story card, toggled by the same index in
     setupStoryCards(). Desktop keeps the skeleton screen. Sizes are cqw
     (the phone screen is an inline-size container), so scenes scale with
     the phone. Static fallbacks carry the meaning (red/green window,
     wrench badge); pure-motion garnish (smoke, sparkle, flash, ring)
     lives only in the reduced-motion-gated block. */
  .story-screen {
    display: none;
    position: absolute;
    inset: 0;
  }

  .scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
  }

  .scene.is-active {
    opacity: 1;
  }

  .scan-stage {
    position: relative;
    width: 58cqw;
    height: 72cqw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .scan-receipt {
    width: 34cqw;
    padding: 5cqw 4cqw;
    display: flex;
    flex-direction: column;
    gap: 3cqw;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 2.5cqw;
    rotate: -4deg;
    box-shadow: var(--shadow-card);
  }

  .scan-receipt i {
    height: 2.4cqw;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 16%, transparent);
  }

  .scan-receipt i:nth-child(2) { width: 72%; }
  .scan-receipt i:nth-child(4) { width: 50%; }

  .scan-frame {
    --b: 1.5cqw;
    --arm: 9cqw;
    --c: color-mix(in srgb, var(--forest) 70%, var(--ink));
    position: absolute;
    inset: 0;
    background:
      linear-gradient(var(--c) 0 0) left top / var(--arm) var(--b) no-repeat,
      linear-gradient(var(--c) 0 0) left top / var(--b) var(--arm) no-repeat,
      linear-gradient(var(--c) 0 0) right top / var(--arm) var(--b) no-repeat,
      linear-gradient(var(--c) 0 0) right top / var(--b) var(--arm) no-repeat,
      linear-gradient(var(--c) 0 0) left bottom / var(--arm) var(--b) no-repeat,
      linear-gradient(var(--c) 0 0) left bottom / var(--b) var(--arm) no-repeat,
      linear-gradient(var(--c) 0 0) right bottom / var(--arm) var(--b) no-repeat,
      linear-gradient(var(--c) 0 0) right bottom / var(--b) var(--arm) no-repeat;
  }

  .scan-flash {
    position: absolute;
    inset: -8cqw;
    background: #fff;
    opacity: 0;
    pointer-events: none;
  }

  .shield-stage {
    position: relative;
    width: 52cqw;
    height: 52cqw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shield-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1cqw solid color-mix(in srgb, var(--success) 55%, transparent);
    opacity: 0;
  }

  .scene-shield {
    width: 36cqw;
    height: 36cqw;
    color: var(--forest);
  }

  .scene-shield .shield-body {
    fill: color-mix(in srgb, var(--success) 12%, transparent);
  }

  .appliance {
    position: relative;
    width: 46cqw;
    height: 52cqw;
    border: 1.5cqw solid color-mix(in srgb, var(--ink) 55%, var(--surface));
    border-radius: 5cqw;
    background: var(--white);
  }

  .appliance::before {
    content: "";
    position: absolute;
    left: 4cqw;
    right: 4cqw;
    top: 8cqw;
    border-bottom: 1cqw solid color-mix(in srgb, var(--ink) 28%, transparent);
  }

  .app-dots {
    position: absolute;
    top: 3cqw;
    left: 4cqw;
    display: flex;
    gap: 2.2cqw;
  }

  .app-dots i {
    width: 2.6cqw;
    height: 2.6cqw;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 32%, transparent);
  }

  .app-window {
    position: absolute;
    left: 50%;
    top: 58%;
    translate: -50% -50%;
    width: 24cqw;
    height: 24cqw;
    border-radius: 50%;
    border: 1.5cqw solid color-mix(in srgb, var(--ink) 42%, transparent);
    background: color-mix(in srgb, var(--teal) 10%, transparent);
  }

  .scene.fault .app-window {
    border-color: color-mix(in srgb, var(--destructive) 60%, var(--line));
    background: color-mix(in srgb, var(--destructive) 12%, transparent);
  }

  .scene.fault .app-dots i:last-child {
    background: var(--destructive);
  }

  .smoke {
    position: absolute;
    top: -3cqw;
    width: 5cqw;
    height: 5cqw;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ink) 25%, transparent);
    filter: blur(1px);
    opacity: 0;
  }

  .smoke.s1 { left: 28%; }
  .smoke.s2 { left: 47%; }
  .smoke.s3 { left: 64%; }

  .pack-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4cqw;
  }

  .pack-docs {
    display: flex;
    gap: 2.5cqw;
  }

  .pack-docs i {
    position: relative;
    width: 12cqw;
    height: 15cqw;
    border-radius: 2cqw;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-card);
  }

  .pack-docs i::before {
    content: "";
    position: absolute;
    left: 2cqw;
    right: 2cqw;
    top: 2.6cqw;
    height: 1.8cqw;
    border-radius: 999px;
    background: var(--pd, var(--teal));
    opacity: .75;
  }

  .pack-docs i:nth-child(2) { --pd: var(--gold); }
  .pack-docs i:nth-child(3) { --pd: var(--insurance); }

  .pack-box {
    width: 28cqw;
    height: 28cqw;
    color: color-mix(in srgb, var(--insurance) 60%, var(--ink));
  }

  .scene.fixed .app-window {
    border-color: color-mix(in srgb, var(--success) 60%, var(--line));
    background: color-mix(in srgb, var(--success) 12%, transparent);
  }

  .sparkle {
    position: absolute;
    width: 6cqw;
    height: 6cqw;
    background: var(--gold);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
  }

  .sparkle.p1 { top: -5cqw; left: 12%; }
  .sparkle.p2 { top: 12%; right: -6cqw; }
  .sparkle.p3 { bottom: 6%; left: -6cqw; }

  .wrench-badge {
    position: absolute;
    right: -5cqw;
    bottom: -4cqw;
    width: 14cqw;
    height: 14cqw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--forest);
    color: #fff;
    box-shadow: var(--shadow-card);
  }

  .wrench-badge svg {
    width: 7.5cqw;
    height: 7.5cqw;
  }

  .trust-strip {
    max-width: var(--max);
    margin: 26px auto 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
  }

  .trust-pill {
    min-height: 66px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    color: var(--muted);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
  }

  .trust-pill:hover,
  .trust-pill:focus-visible {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
    background: color-mix(in srgb, var(--teal) 8%, var(--surface));
    transform: translateY(-2px);
  }

  .trust-pill:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal) 60%, transparent);
    outline-offset: 2px;
  }

  .trust-pill svg {
    width: 20px;
    height: 20px;
    color: var(--forest);
    flex: 0 0 auto;
  }

  .trust-pill span {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .trust-track {
    display: contents;
  }

  .trust-track-dupe {
    display: none;
  }

  .story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
    gap: 58px;
    align-items: center;
  }

  .story.reverse {
    grid-template-columns: minmax(360px, 500px) minmax(0, 1fr);
  }

  .story.reverse .story-copy {
    order: 2;
  }

  .story-copy .lede {
    margin-bottom: 22px;
  }

  .check-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--muted);
    font-size: 16px;
  }

  .check-list li::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--forest);
    flex: 0 0 auto;
  }

  .visual-panel {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background:
      linear-gradient(160deg, color-mix(in srgb, var(--surface) 86%, transparent), color-mix(in srgb, var(--paper-soft) 92%, transparent)),
      var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .receipt-flow {
    padding: 0;
    display: flex;
    align-items: center;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  /* thermal till receipt — fixed light "paper" ink, deliberately not theme-aware:
     a printed receipt doesn't invert in dark mode. */
  .rc-assembly {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 22px;
  }

  .rc-paper-wrap {
    position: relative;
    width: 38%;
    max-width: 210px;
    min-width: 150px;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 1px rgba(20, 22, 18, .10)) drop-shadow(0 14px 26px rgba(20, 22, 18, .12));
    transform: rotate(-1.1deg);
    transform-origin: 50% 40%;
  }

  .rc-paper-back {
    position: absolute;
    left: 7px;
    top: 12px;
    right: -7px;
    bottom: 5px;
    background: #F6F4EC;
    border-radius: 2px;
    opacity: .6;
    /* translateZ(0) composed onto the rotation promotes this masked layer so
       iOS doesn't re-rasterize (and pulse) the torn-edge mask during scroll.
       See .hero-phone. */
    transform: rotate(2.2deg) translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    --z: 10px;
    -webkit-mask:
      conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/var(--z) calc(var(--z) / 2) repeat-x,
      linear-gradient(#000 0 0) top/100% calc(100% - var(--z) / 2) no-repeat;
            mask:
      conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/var(--z) calc(var(--z) / 2) repeat-x,
      linear-gradient(#000 0 0) top/100% calc(100% - var(--z) / 2) no-repeat;
  }

  .rc-paper {
    position: relative;
    background:
      repeating-linear-gradient(90deg, rgba(20, 20, 16, .014) 0 1px, transparent 1px 3px),
      linear-gradient(178deg, #FDFCF7 0%, #FAF7EF 45%, #F3EFE4 100%);
    color: #2B2C28;
    font-family: "Courier Prime", "Courier New", monospace;
    font-size: 10px;
    line-height: 1.42;
    letter-spacing: -.1px;
    padding: 18px 13px 15px;
    font-variant-numeric: tabular-nums;
    --z: 10px;
    -webkit-mask:
      conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/var(--z) calc(var(--z) / 2) repeat-x,
      conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/var(--z) calc(var(--z) / 2) repeat-x,
      linear-gradient(#000 0 0) center/100% calc(100% - var(--z)) no-repeat;
            mask:
      conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/var(--z) calc(var(--z) / 2) repeat-x,
      conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/var(--z) calc(var(--z) / 2) repeat-x,
      linear-gradient(#000 0 0) center/100% calc(100% - var(--z)) no-repeat;
    /* Same iOS mask-repaint fix as .hero-phone — the perforated receipt edges
       re-raster and pulse during scroll without a stable compositing layer. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }

  .rc-brand {
    font-family: var(--font);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    color: #1F211D;
    line-height: 1.15;
    margin-bottom: 6px;
  }

  .rc-store {
    text-align: center;
    font-size: 8px;
    line-height: 1.5;
    color: #6A6C64;
    margin-bottom: 9px;
  }

  .rc-rule {
    height: 1px;
    margin: 8px 0;
    background: repeating-linear-gradient(90deg, rgba(20, 20, 16, .28) 0 3px, transparent 3px 6px);
  }

  .rc-row {
    display: flex;
    justify-content: space-between;
    gap: 6px;
  }

  .rc-row span:last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .rc-dim {
    color: #6A6C64;
    font-size: 9px;
  }

  .rc-strong {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .02em;
  }

  .rc-item-line {
    display: flex;
    gap: 7px;
    margin-bottom: 2px;
  }

  .rc-qty {
    color: #6A6C64;
  }

  .rc-name {
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.32;
  }

  .rc-footer {
    text-align: center;
    font-size: 8.5px;
    line-height: 1.5;
    color: #6A6C64;
    margin-top: 2px;
  }

  .rc-barcode {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1px;
    height: 26px;
    margin: 11px 0 4px;
  }

  .rc-barcode i {
    display: block;
    background: #33342F;
    border-radius: .5px;
  }

  .rc-code {
    text-align: center;
    font-size: 8px;
    letter-spacing: .18em;
    color: #6A6C64;
  }

  .rc-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .rc-wires path {
    fill: none;
    stroke: color-mix(in srgb, var(--ink) 26%, transparent);
    stroke-width: 1;
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    transition: stroke-dashoffset .42s cubic-bezier(.3, .7, .3, 1);
  }

  .rc-wires circle {
    fill: var(--quiet);
    opacity: 0;
    transition: opacity .25s ease;
  }

  .rc-rail {
    position: relative;
    flex: 1 1 auto;
    min-width: 120px;
  }

  .rc-anno {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    translate: -8px 0;
    transition: opacity .38s ease, translate .38s cubic-bezier(.2, .7, .3, 1);
  }

  .rc-anno-k {
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--quiet);
    margin-bottom: 2px;
  }

  .rc-anno-v {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--ink);
    overflow-wrap: anywhere;
  }

  .rc-derived {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    translate: 0 8px;
    scale: .97;
    transition: opacity .45s ease, translate .45s cubic-bezier(.2, .8, .3, 1), scale .45s cubic-bezier(.2, .8, .3, 1);
  }

  .rc-derived-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: color-mix(in srgb, var(--forest) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--forest) 32%, var(--line));
    border-radius: var(--radius-chip);
    padding: 9px 13px 9px 11px;
  }

  .rc-derived-chip svg {
    flex: none;
  }

  .rc-derived-chip span {
    font-size: 13.5px;
    font-weight: 720;
    color: var(--forest-dark);
    line-height: 1.28;
  }

  .rc-derived-note {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--quiet);
  }

  .receipt-flow.is-visible .rc-wires path {
    stroke-dashoffset: 0;
  }

  .receipt-flow.is-visible .rc-wires circle {
    opacity: .85;
  }

  .receipt-flow.is-visible .rc-anno {
    opacity: 1;
    translate: 0 0;
  }

  .receipt-flow.is-visible .rc-derived {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .rc-wires path,
    .rc-wires circle,
    .rc-anno,
    .rc-derived {
      transition: none !important;
    }
  }

  .warranty-panel {
    padding: 0;
    display: grid;
    align-content: center;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  .coverage-card {
    padding: 26px;
    border-radius: var(--radius-card);
    background: #3A5E4A;
    color: #FFFFFF;
    box-shadow: var(--shadow-soft);
  }

  .coverage-card h3 {
    margin-bottom: 6px;
    color: #FFFFFF;
  }

  .coverage-card-product {
    margin: 0 0 6px;
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
    font-weight: 700;
  }

  .coverage-card-label {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, .75);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .coverage-card-sub {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .76);
  }

  .coverage-track {
    position: relative;
    height: 8px;
    margin: 34px 0 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
  }

  .coverage-track-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 66%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--success), var(--warning));
  }

  .coverage-track::after {
    content: "";
    position: absolute;
    left: 66%;
    top: -4px;
    bottom: -4px;
    width: 2px;
    border-radius: 1px;
    background: #FFFFFF;
    transform: translateX(-50%);
  }

  .coverage-track-marker {
    position: absolute;
    top: -22px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .coverage-track-marker.start { left: 0; }
  .coverage-track-marker.end { right: 0; }

  .coverage-rows {
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .coverage-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .coverage-row:last-child {
    border-bottom: none;
  }

  .coverage-row-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-chip);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .82);
  }

  .coverage-row-icon svg {
    width: 16px;
    height: 16px;
  }

  .coverage-row-text {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .coverage-row-text strong {
    display: block;
    color: rgba(255, 255, 255, .90);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .coverage-row-text span {
    display: block;
    color: rgba(255, 255, 255, .75);
    font-size: 12.5px;
    line-height: 1.2;
  }

  .coverage-row-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
  }

  .coverage-row-status.is-active {
    color: #B6DED6;
  }

  .coverage-row-status.is-active .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #B6DED6;
    flex: 0 0 auto;
  }

  .coverage-row-status.is-add {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
  }

  .claim-visual {
    padding: 28px;
    display: grid;
    align-content: center;
    gap: 16px;
  }

  .claim-stack {
    display: grid;
    gap: 0;
  }

  .claim-doc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 0 4px;
    border-bottom: 1px solid var(--line);
  }

  .claim-doc:last-child {
    border-bottom: 0;
  }

  .claim-doc span {
    color: var(--muted);
    font-size: 14px;
    text-align: right;
  }

  .claim-doc b {
    font-size: 16px;
  }

  .claim-package-caption {
    margin-top: 4px;
  }

  /* Same "AI glimmer" technique as .hero-note span above — animated
     gradient edge plus a sweeping sheen — retoned green for a verified/
     ready status instead of the general-purpose brand shimmer. */
  .claim-ready {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background:
      linear-gradient(color-mix(in srgb, var(--success) 9%, var(--surface)),
                      color-mix(in srgb, var(--success) 9%, var(--surface))) padding-box,
      linear-gradient(115deg, var(--success), var(--teal), var(--success)) border-box;
    background-size: auto, 220% 100%;
    background-repeat: no-repeat, repeat;
    background-position: 0 0, 0 0;
  }

  .claim-ready-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--success);
  }

  .claim-ready strong {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 720;
  }

  .claim-ready-status {
    flex: 0 0 auto;
    color: var(--success);
    font-size: 12.5px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .02em;
  }

  @media (prefers-reduced-motion: no-preference) {
    .claim-ready {
      animation: hero-note-edge 7s linear infinite;
    }

    .claim-ready::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 35%, var(--note-sheen) 50%, transparent 65%);
      transform: translateX(-160%);
      animation: hero-note-sheen 5.5s ease-in-out infinite;
    }
  }

  .claim-send-cta {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 0 18px;
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--teal) 90%, var(--ink));
    color: #FFFFFF;
    font-weight: 760;
    box-shadow: 0 12px 26px color-mix(in srgb, var(--teal) 28%, transparent);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  }

  .claim-send-cta:hover,
  .claim-send-cta:focus-visible {
    background: color-mix(in srgb, var(--teal) 84%, var(--forest-dark));
    transform: translateY(-1px);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--teal) 34%, transparent);
  }

  @media (prefers-color-scheme: dark) {
    .claim-send-cta {
      color: #1F1E1A;
    }
  }

  .claim-send-cta svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .insight-panel {
    padding: 0;
    display: grid;
    align-content: center;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  .insight-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--white);
    box-shadow: var(--shadow-card);
  }

  .insight-card-label {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .insight-card h3 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 21px;
    line-height: 1.15;
    font-weight: 740;
  }

  .insight-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
  }

  .insight-stars {
    flex: 0 0 auto;
    color: var(--retailer);
    font-size: 15px;
    letter-spacing: 2px;
  }

  .insight-watch {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .insight-rows {
    display: grid;
    gap: 16px;
  }

  .insight-row {
    display: grid;
    gap: 7px;
  }

  .insight-row-label {
    color: var(--ink);
    font-size: 14px;
    font-weight: 620;
    line-height: 1.3;
  }

  .insight-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
  }

  .insight-bar-fill {
    display: block;
    width: var(--fill, 100%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--success), var(--warning));
  }

  .insight-row-pct {
    color: var(--muted);
    font-size: 12px;
  }

  .insight-foot {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
  }

  .transfer-visual {
    position: relative;
    padding: 30px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    border: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  .transfer-scene {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .transfer-party {
    position: absolute;
    top: 50%;
    margin-top: -27px;
    width: 54px;
    height: 54px;
    z-index: 3;
  }

  .transfer-party.sender { left: 2px; }
  .transfer-party.receiver { right: 2px; }

  .transfer-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
  }

  .transfer-party.sender .transfer-avatar {
    background: var(--forest);
    color: #FFFFFF;
  }

  .transfer-party.receiver .transfer-avatar {
    background: var(--white);
    color: var(--forest);
    border: 2px dashed color-mix(in srgb, var(--forest) 55%, var(--line));
  }

  .transfer-avatar svg {
    width: 26px;
    height: 26px;
  }

  .transfer-party-label {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 620;
    color: var(--muted);
  }

  .transfer-receive-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--success);
    color: #FFFFFF;
    display: grid;
    place-items: center;
    border: 2px solid var(--surface);
  }

  .transfer-receive-badge svg {
    width: 11px;
    height: 11px;
  }

  .transfer-wire {
    position: absolute;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    z-index: 1;
    background: repeating-linear-gradient(to right, color-mix(in srgb, var(--forest) 42%, var(--line)) 0 6px, transparent 6px 12px);
  }

  .transfer-wire.left { left: 58px; right: calc(50% + 155px); }
  .transfer-wire.right { left: calc(50% + 155px); right: 58px; }

  .transfer-arrow {
    position: absolute;
    top: 50%;
    right: 64px;
    margin-top: -7.5px;
    z-index: 1;
    color: var(--forest);
    display: grid;
  }

  .transfer-arrow svg {
    width: 15px;
    height: 15px;
  }

  .transfer-card {
    position: relative;
    z-index: 2;
    width: 310px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--white);
    box-shadow: var(--shadow-soft);
  }

  .transfer-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .transfer-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-control);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--forest), var(--success));
    color: #FFFFFF;
    flex: 0 0 auto;
  }

  .transfer-icon svg {
    width: 22px;
    height: 22px;
  }

  .transfer-head strong {
    display: block;
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 740;
    line-height: 1.15;
  }

  .transfer-status {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
  }

  .transfer-docs {
    display: grid;
    gap: 0;
  }

  .transfer-doc {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 2px;
    color: var(--ink);
    font-size: 13.5px;
  }

  .transfer-doc svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--success);
  }

  .transfer-link {
    margin: 13px 0 0;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px dashed color-mix(in srgb, var(--forest) 40%, var(--line));
    border-radius: var(--radius-control);
    color: var(--forest);
    font-size: 12.5px;
    font-weight: 620;
  }

  .transfer-link svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
  }

  .routes-panel {
    padding: 28px;
    display: grid;
    align-content: center;
  }

  .coverage-routes {
    display: grid;
    gap: 0;
  }

  .routes-product {
    border-bottom: 1px solid var(--line);
  }

  .routes-product,
  .route-row {
    border-bottom: 1px solid var(--line);
  }

  .route-row:last-child {
    border-bottom: 0;
  }

  .routes-product {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
  }

  .routes-product h3,
  .routes-product p {
    margin: 0;
  }

  .routes-product p {
    color: var(--muted);
    font-size: 14px;
  }

  .product-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--forest) 10%, var(--surface));
    color: var(--forest);
  }

  .product-icon svg {
    width: 30px;
    height: 30px;
  }

  .route-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 15px 16px;
    border-left: 3px solid var(--route-color);
  }

  .route-row strong,
  .route-row span {
    display: block;
  }

  .route-row strong {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.2;
  }

  .route-row span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.25;
  }

  .route-row .route-chip {
    height: 26px;
    margin-top: 0;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--route-color) 14%, var(--surface));
    color: color-mix(in srgb, var(--route-color) 45%, var(--ink));
    font-size: 12.5px;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
  }

  .record-panel {
    padding: 24px;
    display: block;
  }

  .rec-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
  }

  .rec-thumb {
    width: 56px;
    height: 56px;
    border: 1px solid color-mix(in srgb, var(--success) 26%, var(--line));
    border-radius: var(--radius-card);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--success) 13%, var(--surface));
    color: var(--success);
  }

  .rec-thumb svg {
    width: 30px;
    height: 30px;
  }

  .rec-title {
    min-width: 0;
  }

  .rec-title h3 {
    margin: 0;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.15;
    font-weight: 740;
    overflow-wrap: anywhere;
  }

  .rec-title .rec-sub {
    margin: 2px 0 0;
    color: var(--quiet);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .rec-status {
    align-self: flex-start;
    height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    color: color-mix(in srgb, var(--success) 70%, var(--ink));
    font-size: 12px;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
  }

  .rec-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
  }

  .rec-price {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 15px;
  }

  .rec-price b {
    color: var(--ink);
    font-weight: 740;
  }

  .rec-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }

  .rec-cap {
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 660;
    line-height: 1;
  }

  .rec-cap svg {
    width: 14px;
    height: 14px;
    color: var(--success);
  }

  .rec-rule {
    height: 1px;
    margin: 18px 0;
    border: 0;
    background: var(--line);
  }

  .rec-sec-label {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .rec-cov-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .rec-cov-head .rec-cov-lbl {
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 680;
  }

  .rec-cov-chip {
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    color: color-mix(in srgb, var(--success) 70%, var(--ink));
    font-size: 12px;
    font-weight: 760;
    line-height: 1;
  }

  .rec-cov-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
  }

  .rec-track {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 70%, var(--surface));
    overflow: hidden;
  }

  .rec-track .rec-fill {
    display: block;
    width: 64%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 55%, var(--gold)));
  }

  .rec-track-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    color: var(--quiet);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .rec-doc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 9px 0;
  }

  .rec-doc + .rec-doc {
    border-top: 1px solid var(--line);
  }

  .rec-doc-ic {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-chip);
    display: grid;
    place-items: center;
  }

  .rec-doc-ic svg {
    width: 18px;
    height: 18px;
  }

  .rec-doc-ic.pdf {
    background: color-mix(in srgb, var(--card-protection) 13%, var(--surface));
    color: var(--card-protection);
  }

  .rec-doc-ic.img {
    background: color-mix(in srgb, var(--forest) 12%, var(--surface));
    color: var(--forest);
  }

  .rec-doc-ic.pack {
    background: color-mix(in srgb, var(--teal) 14%, var(--surface));
    color: var(--teal);
  }

  .rec-doc .rec-name {
    min-width: 0;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 680;
  }

  .rec-doc .rec-meta {
    color: var(--quiet);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
  }

  .rec-doc .rec-meta.teal {
    color: var(--teal);
    font-weight: 740;
  }

  .rec-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 0;
    color: var(--quiet);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
  }

  .rec-foot svg {
    width: 13px;
    height: 13px;
    color: var(--quiet);
    flex: 0 0 auto;
  }

  .search-panel {
    padding: 26px;
  }

  .search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 62px;
    padding: 0 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--white);
    color: var(--quiet);
    font-size: 18px;
    font-weight: 650;
    overflow: hidden;
  }

  .search-box svg {
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    color: var(--forest);
  }

  /* Keep the placeholder / typed query on one line so long localized strings
     (e.g. German, Spanish) truncate with an ellipsis instead of wrapping and
     spilling out of the fixed-height box before the typing demo runs. */
  .search-hint,
  .search-typed {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .result-list {
    display: grid;
    gap: 0;
    margin-top: 10px;
  }

  .result-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
  }

  .result-row:last-child {
    border-bottom: 0;
  }

  .result-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-control);
    color: var(--forest);
    background: color-mix(in srgb, var(--forest) 10%, var(--surface));
  }

  .result-icon svg {
    width: 20px;
    height: 20px;
  }

  .result-row b {
    display: block;
  }

  .result-row span,
  .result-row small {
    color: var(--quiet);
  }

  .search-typed {
    display: none;
    align-items: center;
    color: var(--ink);
  }

  @media (prefers-reduced-motion: no-preference) {
    .search-panel.demo-typing .search-hint {
      display: none;
    }

    .search-panel.demo-typing .search-typed {
      display: inline-flex;
    }

    .search-typed::after {
      content: "";
      width: 2px;
      height: 1.15em;
      margin-left: 3px;
      border-radius: 1px;
      background: var(--forest);
      animation: search-caret 1.06s step-end infinite;
    }

    .search-panel.demo-armed .result-row {
      opacity: 0;
      transform: translateY(12px);
    }

    .search-panel.demo-armed .result-row.is-in {
      opacity: 1;
      transform: none;
      transition: opacity .34s ease, transform .42s cubic-bezier(.2, .9, .25, 1.08);
    }

    @keyframes search-caret {
      50% { opacity: 0; }
    }
  }

  .moment-forest {
    background: #2E5A41;
  }

  .moment-forest .story-copy .eyebrow,
  .moment-forest .story-copy h2 {
    color: #FFFFFF;
  }

  .moment-forest .story-copy .lede,
  .moment-forest .story-copy .check-list li {
    color: rgba(255, 255, 255, .84);
  }

  .moment-forest .story-copy .check-list li::before {
    background: #7FD1A2;
  }

  .privacy-band {
    background: linear-gradient(to bottom, #2E5A41 0, #244735 80px);
    color: #FFFFFF;
  }

  .privacy-band .eyebrow,
  .privacy-band h2,
  .privacy-band .lede {
    color: #FFFFFF;
  }

  .privacy-band .lede {
    color: rgba(255, 255, 255, .78);
  }

  .privacy-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 32px;
  }

  .privacy-card {
    padding: 20px;
    border-radius: var(--radius-card);
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .privacy-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-control);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .14);
    color: #FFFFFF;
    flex: 0 0 auto;
  }

  .privacy-card-icon svg {
    width: 22px;
    height: 22px;
  }

  .privacy-card h3 {
    margin: 0;
    font-size: 18px;
    color: #FFFFFF;
  }

  .privacy-foot {
    margin: 28px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .70);
    font-size: 13px;
  }

  .privacy-foot-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .55);
  }

  .privacy-foot-icons svg {
    width: 16px;
    height: 16px;
  }

  .pricing-head {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
  }

  .pricing-head .lede {
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-table {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .pricing-table th,
  .pricing-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }

  .pricing-table thead th {
    border-bottom: 1px solid var(--line-strong);
    vertical-align: bottom;
  }

  .pricing-table .col-feature {
    width: auto;
  }

  .pricing-table .col-mark {
    width: 92px;
    text-align: center;
  }

  .pricing-col-title {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 740;
    overflow-wrap: break-word;
  }

  .pricing-col-plus .pricing-col-title {
    color: var(--forest);
  }

  .pricing-col-sub {
    display: block;
    margin-top: 3px;
    color: var(--quiet);
    font-size: 11.5px;
    font-weight: 600;
  }

  .pricing-plus-price {
    max-width: 720px;
    margin: 18px auto 0;
    text-align: center;
    color: var(--forest);
    font-size: 14px;
    font-weight: 560;
  }

  .pricing-plus-star {
    margin-left: 1px;
    color: var(--forest);
    font-weight: 560;
  }

  .pricing-table tbody th {
    text-align: left;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 560;
    line-height: 1.35;
  }

  .pricing-table tbody tr:last-child th,
  .pricing-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .pricing-col-plus {
    background: color-mix(in srgb, var(--forest) 12%, var(--surface));
  }

  thead .pricing-col-plus {
    border-top-left-radius: var(--radius-control);
    border-top-right-radius: var(--radius-control);
  }

  tbody tr:last-child .pricing-col-plus {
    border-bottom-left-radius: var(--radius-control);
    border-bottom-right-radius: var(--radius-control);
  }

  .pricing-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pricing-mark svg {
    width: 18px;
    height: 18px;
    color: var(--forest);
  }

  .pricing-mark.is-no {
    color: var(--quiet);
    font-size: 16px;
    font-weight: 600;
  }

  .pricing-reassurance {
    max-width: 720px;
    margin: 20px auto 0;
    text-align: center;
    color: var(--quiet);
    font-size: 13px;
  }

  .final {
    padding: 86px 22px;
    background: #12695E;
    text-align: center;
  }

  .final .eyebrow,
  .final h2 {
    color: #FFFFFF;
  }

  .final .lede {
    color: rgba(255, 255, 255, .84);
  }

  .final .button.primary {
    background: #FFFFFF;
    color: #244735;
  }

  .final .button.primary:hover {
    background: color-mix(in srgb, #FFFFFF 90%, var(--teal));
    color: #244735;
  }

  .final h2,
  .final .lede {
    margin-left: auto;
    margin-right: auto;
  }

  .final .lede {
    margin-bottom: 26px;
  }

  footer {
    padding: 28px 22px 38px;
    background: var(--paper-soft);
    color: var(--quiet);
    border-top: 1px solid var(--line);
  }

  .footer-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }

  .footer-links a {
    color: var(--muted);
  }

  .reveal {
    opacity: 1;
  }

  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .55s ease, transform .55s ease;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: none;
    }

    .float-card {
      opacity: 0;
      translate: 0 14px;
      transition: opacity .55s ease, translate .55s ease;
    }

    .hero-stage.is-visible .float-card {
      opacity: 1;
      translate: 0 0;
    }

    /* Reveal order = timeline order (receipt → coverage → fault → claim →
       fixed), so the story plays out on entrance. */
    .hero-stage.is-visible .float-card.receipt { transition-delay: .12s; }
    .hero-stage.is-visible .float-card.coverage { transition-delay: .2s; }
    .hero-stage.is-visible .float-card.fault { transition-delay: .28s; }
    .hero-stage.is-visible .float-card.claim { transition-delay: .36s; }
    .hero-stage.is-visible .float-card.fixed { transition-delay: .44s; }

    /* The fault card's dot gets a soft ping (something just went wrong),
       and the card itself FLASHES twice once its reveal has landed
       (delay = its .28s reveal delay + .55s transition + a beat) — an
       alert that fires once, not a strobe. The "repaired" card gets the
       hero-note sheen sweep plus the slowly sliding gradient edge. All
       behind this reduced-motion gate. */
    .float-card.fault strong::before {
      animation: float-dot-ping 2.6s ease-out infinite;
    }

    .hero-stage.is-visible .float-card.fault {
      animation: float-fault-flash .7s ease-in-out 1.1s 2;
    }

    .float-card.fixed {
      animation: hero-note-edge 7s linear infinite;
    }

    .float-card.fixed::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 35%, var(--note-sheen) 50%, transparent 65%);
      transform: translateX(-160%);
      animation: hero-note-sheen 5.5s ease-in-out infinite;
      animation-delay: 1.1s;
    }

    /* Story deck (Concept C): cards cross-fade with a small vertical slide;
       the rail fill + token glide between beats (positioned by [data-beat]
       above, animated here). Motion-gated — reduced motion shows the first
       beat statically (no transition, no auto-advance in setupStoryCards()),
       while swipe still works. */
    .story-card {
      transform: translateY(6px);
      transition: opacity .45s cubic-bezier(.4, 0, .2, 1), transform .45s cubic-bezier(.4, 0, .2, 1);
    }

    .story-card.is-active {
      transform: none;
    }

    .story-rail .rail-fill {
      transition: width .55s cubic-bezier(.4, 0, .2, 1);
    }

    .story-rail .rail-tok {
      transition: left .55s cubic-bezier(.4, 0, .2, 1), background .55s;
    }

    /* Phone-screen scenes: every animation is selectored under
       .scene.is-active, so becoming the active beat restarts the whole
       scene from the top (and inactive scenes run nothing at all). */
    .scene {
      transition: opacity .45s ease;
    }

    .scene.is-active .scan-frame {
      animation: scene-frame 3.5s ease-in-out infinite;
    }

    .scene.is-active .scan-receipt {
      animation: scene-snap 3.5s ease-in-out infinite;
    }

    .scene.is-active .scan-flash {
      animation: scene-flash 3.5s linear infinite;
    }

    .scene.is-active .scene-shield {
      animation: scene-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
    }

    .scene.is-active .shield-ring {
      animation: scene-ring 1.6s ease-out infinite;
    }

    .scene.is-active .smoke {
      animation: scene-smoke 2.4s ease-out infinite;
    }

    .scene.is-active .smoke.s2 { animation-delay: .5s; }
    .scene.is-active .smoke.s3 { animation-delay: 1.1s; }

    .scene.is-active .pack-docs i {
      animation: scene-doc .55s ease both;
    }

    .scene.is-active .pack-docs i:nth-child(2) { animation-delay: .12s; }
    .scene.is-active .pack-docs i:nth-child(3) { animation-delay: .24s; }

    .scene.is-active .sparkle {
      animation: scene-sparkle 1.8s ease-in-out infinite;
    }

    .scene.is-active .sparkle.p2 { animation-delay: .4s; }
    .scene.is-active .sparkle.p3 { animation-delay: .9s; }

    .scene.is-active .wrench-badge {
      animation: scene-badge .55s cubic-bezier(.34, 1.56, .64, 1) .25s both;
    }

    @keyframes scene-frame {
      0%, 100% { scale: 1; }
      30% { scale: 1.05; }
      44%, 54% { scale: .99; }
    }

    @keyframes scene-snap {
      0%, 38% { scale: 1; rotate: -4deg; }
      46% { scale: .94; rotate: -2deg; }
      58%, 100% { scale: 1; rotate: -4deg; }
    }

    @keyframes scene-flash {
      0%, 38% { opacity: 0; }
      43% { opacity: .85; }
      54%, 100% { opacity: 0; }
    }

    @keyframes scene-pop {
      from { scale: .8; opacity: 0; }
      to { scale: 1; opacity: 1; }
    }

    @keyframes scene-ring {
      0% { opacity: .7; scale: .62; }
      80%, 100% { opacity: 0; scale: 1.12; }
    }

    @keyframes scene-smoke {
      0% { opacity: 0; translate: 0 0; scale: .8; }
      25% { opacity: .55; }
      100% { opacity: 0; translate: 2cqw -18cqw; scale: 1.9; }
    }

    @keyframes scene-doc {
      from { opacity: 0; translate: 0 6cqw; }
      to { opacity: 1; translate: 0 0; }
    }

    @keyframes scene-sparkle {
      0%, 100% { opacity: 0; scale: .3; rotate: 0deg; }
      45% { opacity: 1; scale: 1; rotate: 18deg; }
    }

    @keyframes scene-badge {
      from { scale: 0; }
      to { scale: 1; }
    }

    @keyframes float-dot-ping {
      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, var(--warning)) 45%, transparent); }
      70%, 100% { box-shadow: 0 0 0 7px transparent; }
    }

    @keyframes float-fault-flash {
      0%, 100% { box-shadow: var(--shadow-card); }
      50% {
        box-shadow: 0 0 0 7px color-mix(in srgb, var(--destructive) 20%, transparent), var(--shadow-card);
        background-color: color-mix(in srgb, var(--destructive) 14%, var(--surface));
      }
    }

    .coverage-track-fill,
    .coverage-row,
    .route-row,
    .claim-doc,
    .claim-package-caption,
    .claim-send-cta,
    .insight-row,
    .insight-bar-fill,
    .transfer-doc,
    .transfer-link {
      transition-duration: .6s;
      transition-timing-function: ease;
    }

    .coverage-track-fill {
      width: 0;
      transition-property: width;
    }

    .visual-panel.is-visible .coverage-track-fill {
      width: 66%;
      transition-delay: .2s;
    }

    .coverage-row {
      opacity: 0;
      translate: 0 10px;
      transition-property: opacity, translate;
    }

    .visual-panel.is-visible .coverage-row {
      opacity: 1;
      translate: 0 0;
    }

    .visual-panel.is-visible .coverage-row:nth-child(1) { transition-delay: .24s; }
    .visual-panel.is-visible .coverage-row:nth-child(2) { transition-delay: .32s; }
    .visual-panel.is-visible .coverage-row:nth-child(3) { transition-delay: .4s; }

    .route-row {
      opacity: 0;
      translate: 0 10px;
      transition-property: opacity, translate;
    }

    .routes-panel.is-visible .route-row {
      opacity: 1;
      translate: 0 0;
    }

    .routes-panel.is-visible .route-row:nth-child(2) { transition-delay: .12s; }
    .routes-panel.is-visible .route-row:nth-child(3) { transition-delay: .2s; }
    .routes-panel.is-visible .route-row:nth-child(4) { transition-delay: .28s; }
    .routes-panel.is-visible .route-row:nth-child(5) { transition-delay: .36s; }

    .claim-doc {
      opacity: 0;
      translate: 0 -12px;
      transition-property: opacity, translate;
    }

    .claim-visual.is-visible .claim-doc {
      opacity: 1;
      translate: 0 0;
    }

    .claim-visual.is-visible .claim-doc:nth-child(1) { transition-delay: .08s; }
    .claim-visual.is-visible .claim-doc:nth-child(2) { transition-delay: .14s; }
    .claim-visual.is-visible .claim-doc:nth-child(3) { transition-delay: .2s; }
    .claim-visual.is-visible .claim-doc:nth-child(4) { transition-delay: .26s; }

    .claim-package-caption,
    .claim-send-cta {
      opacity: 0;
      translate: 0 16px;
      transition-property: opacity, translate;
    }

    .claim-visual.is-visible .claim-package-caption,
    .claim-visual.is-visible .claim-send-cta {
      opacity: 1;
      translate: 0 0;
    }

    .claim-visual.is-visible .claim-package-caption {
      transition-delay: .42s;
    }

    .claim-visual.is-visible .claim-send-cta {
      transition-delay: .5s;
    }

    .insight-row {
      opacity: 0;
      translate: 0 10px;
      transition-property: opacity, translate;
    }

    .insight-panel.is-visible .insight-row {
      opacity: 1;
      translate: 0 0;
    }

    .insight-panel.is-visible .insight-row:nth-child(1) { transition-delay: .12s; }
    .insight-panel.is-visible .insight-row:nth-child(2) { transition-delay: .2s; }
    .insight-panel.is-visible .insight-row:nth-child(3) { transition-delay: .28s; }

    .insight-bar-fill {
      width: 0;
      transition-property: width;
    }

    .insight-panel.is-visible .insight-bar-fill {
      width: var(--fill, 0%);
    }

    .insight-panel.is-visible .insight-row:nth-child(1) .insight-bar-fill { transition-delay: .24s; }
    .insight-panel.is-visible .insight-row:nth-child(2) .insight-bar-fill { transition-delay: .34s; }
    .insight-panel.is-visible .insight-row:nth-child(3) .insight-bar-fill { transition-delay: .44s; }

    .transfer-party,
    .transfer-wire,
    .transfer-arrow,
    .transfer-card,
    .transfer-doc,
    .transfer-link {
      opacity: 0;
      transition-property: opacity, transform, translate;
      transition-duration: .6s;
      transition-timing-function: ease;
    }

    .transfer-party { transform: scale(.9); }
    .transfer-wire { transform: scaleX(0); transform-origin: left center; }
    .transfer-card { transform: translateX(-34px); }
    .transfer-doc { translate: 0 -8px; }
    .transfer-link { translate: 0 10px; }

    .transfer-receive-badge {
      opacity: 0;
      transform: scale(0);
      transition: opacity .4s ease, transform .4s ease;
    }

    .transfer-visual.is-visible .transfer-party {
      opacity: 1;
      transform: scale(1);
    }

    .transfer-visual.is-visible .transfer-party.sender { transition-delay: .05s; }
    .transfer-visual.is-visible .transfer-party.receiver { transition-delay: .12s; }

    .transfer-visual.is-visible .transfer-wire {
      opacity: 1;
      transform: scaleX(1);
    }

    .transfer-visual.is-visible .transfer-wire.left { transition-delay: .18s; }
    .transfer-visual.is-visible .transfer-wire.right { transition-delay: .26s; }

    .transfer-visual.is-visible .transfer-card {
      opacity: 1;
      transform: translateX(0);
      transition-delay: .22s;
      transition-duration: .7s;
    }

    .transfer-visual.is-visible .transfer-doc {
      opacity: 1;
      translate: 0 0;
    }

    .transfer-visual.is-visible .transfer-doc:nth-child(1) { transition-delay: .4s; }
    .transfer-visual.is-visible .transfer-doc:nth-child(2) { transition-delay: .46s; }
    .transfer-visual.is-visible .transfer-doc:nth-child(3) { transition-delay: .52s; }
    .transfer-visual.is-visible .transfer-doc:nth-child(4) { transition-delay: .58s; }

    .transfer-visual.is-visible .transfer-link {
      opacity: 1;
      translate: 0 0;
      transition-delay: .64s;
    }

    .transfer-visual.is-visible .transfer-arrow {
      opacity: 1;
      transition-delay: .5s;
      animation: transfer-arrow-pulse 1.8s ease-in-out .9s infinite;
    }

    .transfer-visual.is-visible .transfer-receive-badge {
      opacity: 1;
      transform: scale(1);
      transition-delay: .8s;
    }

    @keyframes transfer-arrow-pulse {
      0%, 100% { transform: translateX(-2px); opacity: .6; }
      50% { transform: translateX(3px); opacity: 1; }
    }

  }

  @media (max-width: 980px) {
    .nav-links a:not(.nav-cta) {
      display: none;
    }

    .hero-grid,
    .story,
    .story.reverse {
      grid-template-columns: 1fr;
      gap: 34px;
    }

    .story.reverse .story-copy {
      order: 0;
    }

    h1 {
      font-size: 50px;
    }

    h2 {
      font-size: 38px;
    }

    .hero-stage {
      min-height: 520px;
    }

    .trust-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trust-pill:last-child {
      grid-column: 1 / -1;
    }

    .privacy-grid {
      grid-template-columns: 1fr;
    }

    .pricing-table th,
    .pricing-table td {
      padding: 12px 6px;
    }

    .pricing-table tbody th {
      font-size: 14px;
    }

    .pricing-table .col-mark {
      width: 64px;
    }

    .pricing-col-title {
      font-size: 13.5px;
    }
  }

  @media (max-width: 640px) {
    .nav-inner {
      padding: 0 16px;
    }

    .nav-links {
      gap: 10px;
    }

    .lang-select {
      padding-left: 8px;
    }

    .brand span {
      font-size: 18px;
    }

    .nav-cta {
      padding: 0 13px;
      font-size: 12.5px;
    }

    .nav-cta svg {
      width: 15px;
      height: 15px;
    }

    .hero {
      padding: 76px 18px 16px;
    }

    .section {
      padding: 72px 18px;
    }

    .section.compact {
      padding-top: 48px;
      padding-bottom: 48px;
    }

    h1 {
      font-size: 36px;
      line-height: 1.06;
    }

    h2 {
      font-size: 28px;
      line-height: 1.1;
      font-variation-settings: "opsz" 28, "wdth" 100;
    }

    .lede {
      font-size: 17px;
    }

    .hero-copy {
      padding: 0;
    }

    .hero-grid {
      gap: 22px;
    }

    .hero-copy .lede {
      margin-bottom: 22px;
    }

    .hero-actions {
      display: grid;
      grid-template-columns: 1fr;
      margin-bottom: 20px;
    }

    /* Mobile: in-hero differentiator twins stay hidden (relocated to the page
       bottom). At the bottom, show the shorter phone copy, hide the fuller
       desktop one. Shared look comes from .final-note above. */
    .hero-diff,
    .hero-diff-mobile,
    .final-note-desktop {
      display: none;
    }

    .final-note-mobile {
      display: block;
      max-width: 40ch;
      font-size: 14px;
    }

    .button {
      width: 100%;
      white-space: normal;
      text-align: center;
      line-height: 1.15;
      padding-top: 12px;
      padding-bottom: 12px;
    }

    /* Crisp phone mockup of the household library, sat under the header above
       the eyebrow pills. The wrapper has a FIXED visible height and clips a
       deliberately TALLER frame (overflow:hidden), so the phone's rounded
       bottom is never rendered — only the straight rows of the list reach the
       lower edge. A bottom mask then dissolves that straight edge into the
       page's paper bg: no hard line, matches light + dark. Because the wrapper
       is clipped, layout height == the visible height, so the faded tail wastes
       no vertical space above the pills. */
    .hero-phone {
      display: block;
      position: relative;
      width: min(322px, 100%);
      height: 384px;
      margin: 4px auto 20px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 64%, transparent 100%);
              mask-image: linear-gradient(to bottom, #000 0, #000 64%, transparent 100%);
      pointer-events: none;
      /* iOS/WebKit re-rasterizes gradient-mask layers as the address bar
         collapses/expands during scroll, which visibly grows/shrinks this
         otherwise fixed-size mockup. Promoting it to its own compositing
         layer bakes the mask once and only translates it — no per-frame
         re-raster, no pulsing. */
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    /* Device bezel — mirrors the desktop .phone (#111315, r44, 8px bezel). Kept
       far taller than the wrapper on purpose: everything below the wrapper
       (incl. the rounded bottom) is clipped away, so only straight list rows
       fade out. overflow:hidden clips the screenshot to the rounded corners. */
    .hero-phone-frame {
      position: relative;
      height: 560px;
      padding: 8px;
      border-radius: 44px;
      background: #111315;
      overflow: hidden;
    }

    /* Slim dynamic-island pill, aligned with the capture's baked status-bar
       row (time left / battery right) so it reads like a modern iPhone rather
       than a notch jammed against the top bezel. */
    .hero-phone-frame::before {
      content: "";
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 50%;
      width: 62px;
      height: 18px;
      border-radius: 999px;
      background: #111315;
      transform: translateX(-50%);
    }

    .hero-phone-shot {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 36px;
      object-fit: cover;
      object-position: top center;
    }

    .hero-note {
      font-size: 13px;
    }

    .hero-note [data-i18n="hero.note_notracking"] {
      display: none;
    }

    .cta-text-full {
      display: none;
    }

    .cta-text-short {
      display: inline;
    }

    /* Mobile hero = the Concept-C story deck below. The desktop phone (and
       its scattered float-cards) is dropped entirely here: five overlapping
       cards and long compound words (de/da/nb/sv) never fit this width, so
       the integrated timeline-rail carries the whole story instead. */
    .hero-stage {
      display: none;
    }

    .story-cards {
      display: block;
      margin: 6px 0 22px;
    }

    .trust-strip {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      margin: 14px -18px 0;
      padding: 2px 18px 8px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 34px), transparent 100%);
              mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 34px), transparent 100%);
      /* Same iOS mask-repaint fix as .hero-phone — keep the faded scroll
         edges from pulsing during momentum scroll. */
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
    }

    .trust-strip::-webkit-scrollbar {
      display: none;
    }

    .trust-pill {
      flex: 0 0 auto;
      min-height: 46px;
      padding: 10px 14px;
      white-space: nowrap;
    }

    .trust-pill:hover {
      transform: none;
    }

    .trust-track {
      display: flex;
      flex-wrap: nowrap;
      flex: 0 0 auto;
      gap: 8px;
    }

    .receipt-flow,
    .claim-visual,
    .routes-panel,
    .warranty-panel,
    .record-panel,
    .search-panel,
    .insight-panel,
    .transfer-visual {
      padding: 18px;
    }

    .routes-panel,
    .record-panel,
    .search-panel,
    .claim-visual {
      margin: 0 18px;
    }

    .rc-assembly {
      flex-direction: column;
      align-items: center;
      gap: 20px;
      height: auto !important;
    }

    .rc-paper-wrap {
      width: 200px;
    }

    .rc-wires {
      display: none;
    }

    .rc-rail {
      position: static;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .rc-anno,
    .rc-derived {
      position: static !important;
      width: auto;
      opacity: 1;
      translate: 0 0;
      scale: 1;
      padding: 10px 12px;
      border-radius: var(--radius-control);
      background: var(--white);
      border: 1px solid var(--line);
      transition: none;
    }

    .rc-derived {
      grid-column: 1 / -1;
    }

    .rc-derived-chip {
      display: flex;
    }

    .coverage-card {
      padding: 20px;
    }

    .routes-panel,
    .warranty-panel,
    .insight-panel,
    .transfer-visual {
      min-height: auto;
    }

    .transfer-scene {
      flex-direction: column;
      gap: 18px;
      transform: none;
    }

    .transfer-party {
      position: static !important;
      top: auto;
      margin-top: 0;
      transform: none !important;
      translate: none !important;
      width: auto;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .transfer-party-label {
      position: static;
      transform: none;
    }

    .transfer-wire,
    .transfer-arrow,
    .transfer-receive-badge {
      display: none;
    }

    .transfer-card {
      width: min(300px, 100%);
      transform: none !important;
    }

    .route-row {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .route-chip {
      justify-self: end;
    }

    .result-row {
      grid-template-columns: 38px minmax(0, 1fr);
    }

    .result-row small {
      grid-column: 2;
    }

    .footer-inner {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    /* The strip stays a native horizontal scroller (overflow-x: auto, set in
       the block above). setupTrustStrip() gently auto-scrolls it a few passes
       via scrollLeft, then parks it at the start; the duplicate track keeps
       those passes seamless and the JS hides it the moment auto-scroll ends,
       so hand-scrolling shows one clean list. No transform marquee here — that
       is what used to block the visitor from scrolling it themselves. */
    .trust-track-dupe {
      display: flex;
      flex-wrap: nowrap;
      flex: 0 0 auto;
      gap: 8px;
    }
  }

  @media (max-width: 430px) {
    .coverage-row {
      grid-template-columns: 28px minmax(0, 1fr) auto;
      gap: 8px;
    }

    .coverage-row-icon {
      width: 28px;
      height: 28px;
    }

    .rec-head {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .rec-status {
      grid-column: 2;
      justify-self: start;
    }
  }

  @media (max-width: 360px) {
    .brand span {
      display: none;
    }
  }

  @media (max-width: 640px) and (max-height: 720px) {
    .hero {
      padding-top: 72px;
      padding-bottom: 10px;
    }

    h1 {
      font-size: 32px;
    }

    .hero-copy .lede {
      margin-bottom: 20px;
    }

    .hero-actions {
      margin-bottom: 16px;
    }

    /* Short viewports (small portrait phones, landscape) drop the hero-note
       and trust ticker for vertical space. The Concept-C story deck stays —
       it is the only hero visual now the phone is gone on mobile, and it is
       compact enough to fit. */
    .hero-note,
    .trust-strip {
      display: none;
    }

    .hero-grid {
      gap: 10px;
    }

    /* Shrink the phone mockup so the headline + primary CTA stay near the fold
       on short screens (e.g. iPhone SE 375x667). The frame stays tall (it is
       clipped by the wrapper); only the wrapper's visible box shrinks. */
    .hero-phone {
      width: min(300px, 82%);
      height: 296px;
      margin: 0 auto 14px;
    }
  }

  /* ── Market-lock "coming soon" splash (es/nb/sv only) ─────────── */
  .market-splash {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: color-mix(in srgb, #14120C 62%, transparent);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    opacity: 0;
    transition: opacity .22s ease;
  }

  .market-splash:not([hidden]) {
    display: flex;
  }

  .market-splash.is-open {
    opacity: 1;
  }

  .market-splash-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    padding: 34px 28px 28px;
    transform: translateY(10px) scale(.98);
    transition: transform .22s ease;
  }

  .market-splash.is-open .market-splash-card {
    transform: translateY(0) scale(1);
  }

  .market-splash-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper-soft);
    color: var(--muted);
    cursor: pointer;
  }

  .market-splash-close:hover {
    color: var(--ink);
  }

  .market-splash-close svg {
    width: 15px;
    height: 15px;
  }

  .market-splash-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 10px;
  }

  .market-splash-title {
    font-family: var(--font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.2px;
    margin: 0 0 10px;
  }

  .market-splash-lede {
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
    margin: 0 0 22px;
  }

  .market-splash-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .market-splash-field input {
    width: 100%;
    font: inherit;
    font-size: 15px;
    padding: 12px 14px;
    border-radius: var(--radius-control);
    border: 1px solid var(--line-strong);
    background: var(--white);
    color: var(--ink);
  }

  .market-splash-field input::placeholder {
    color: var(--quiet);
  }

  /* Honeypot — visually hidden, off-screen, untabbable. Bots fill it; people don't. */
  .market-splash .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .market-splash-field input:focus {
    outline: none;
    border-color: var(--forest);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 18%, transparent);
  }

  .market-splash-field-error {
    display: none;
    font-size: 12.5px;
    color: var(--destructive);
    margin-top: 6px;
  }

  .market-splash-field.invalid input {
    border-color: var(--destructive);
  }

  .market-splash-field.invalid .market-splash-field-error {
    display: block;
  }

  .market-splash-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border: 0;
    cursor: pointer;
  }

  .market-splash-submit:disabled {
    opacity: .65;
    cursor: default;
  }

  .market-splash-spinner {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    display: none;
    animation: market-splash-spin .7s linear infinite;
  }

  .is-sending .market-splash-spinner {
    display: inline-block;
  }

  @keyframes market-splash-spin {
    to { transform: rotate(360deg); }
  }

  .market-splash-banner {
    display: none;
    font-size: 13px;
    line-height: 1.4;
    border-radius: var(--radius-chip);
    padding: 10px 12px;
    margin: 0 0 12px;
    background: color-mix(in srgb, var(--destructive) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--destructive) 28%, transparent);
    color: var(--destructive);
  }

  .market-splash-banner.show {
    display: block;
  }

  .market-splash-fineprint {
    font-size: 12.5px;
    color: var(--quiet);
    margin: 14px 0 0;
    line-height: 1.5;
  }

  .market-splash-fineprint a {
    text-decoration: underline;
    color: var(--muted);
  }

  .market-splash-dismiss {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 14px;
    padding: 10px 0 0;
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
  }

  .market-splash-dismiss:hover {
    color: var(--ink);
  }

  /* Language-locked markets (es/nb/sv): no close/continue-in-this-language
     escape hatch (that content isn't launch-quality) — the only ways out
     are signing up or switching to the English site. That's offered as a
     real solid button (not a muted text link) so it doesn't read as a
     dead end — always dark-with-white-text regardless of light/dark theme,
     since it's an escape hatch, not a themed brand CTA. */
  .market-splash-continue-en {
    display: none;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius-card);
    background: #1E2125;
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .market-splash-continue-en:hover {
    background: #33383F;
  }

  .market-splash.market-splash-locked .market-splash-close,
  .market-splash.market-splash-locked .market-splash-dismiss {
    display: none;
  }

  .market-splash.market-splash-locked .market-splash-continue-en {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .market-splash-success h2 {
    font-family: var(--font);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
  }

  .market-splash-success p {
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
  }

  /* ── Email deep-link gate ─────────────────────────────────────
     Rides on the .market-splash backdrop/card/close chrome above (same
     element carries both classes); only what the splash has no equivalent
     for lives here. The [hidden] rules are load-bearing: .button and the
     flex row both set a display that would otherwise beat the attribute. */
  .applink-url-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 8px 8px 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--paper-soft);
  }

  .applink-url-row[hidden] {
    display: none;
  }

  .applink-url {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    color: var(--muted);
    user-select: all;
    -webkit-user-select: all;
  }

  .applink-copy {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }

  .applink-copy:hover {
    border-color: var(--forest);
    color: var(--forest);
  }

  .applink-open {
    width: 100%;
    margin-top: 18px;
  }

  .applink-open[hidden] {
    display: none;
  }

  .applink-store {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--forest);
    text-decoration: underline;
  }

  body.no-scroll {
    overflow: hidden;
  }

  @media (prefers-reduced-motion: reduce) {
    .market-splash,
    .market-splash-card {
      transition: none;
    }
  }

/* ---- Section styles (were inline <style> blocks in the page body) ---- */
    .proof { background: var(--paper); }
    .proof .proof-head { text-align: center; max-width: 720px; margin: 0 auto; }
    .proof-stat { max-width: 640px; margin: 22px auto 0; text-align: center; color: var(--muted); font-size: 18px; line-height: 1.62; }
    .proof-stat-num { color: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; }
    .proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--max); margin: 44px auto 0; }
    .proof-card { display: flex; flex-direction: column; gap: 16px; padding: 28px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
    .proof-quote { position: relative; margin: 0; color: var(--ink); font-size: 16px; line-height: 1.6; }
    .proof-quote::before { content: "\201C"; display: block; margin-bottom: 2px; color: var(--forest); font-size: 42px; line-height: .6; opacity: .5; }
    .proof-author { margin-top: auto; color: var(--muted); font-size: 15px; font-weight: 600; }
    .proof-author::before { content: "\2014\00A0"; }
    @media (prefers-color-scheme: dark) {
      .proof-quote::before { color: var(--teal); }
    }
    @media (max-width: 980px) {
      .proof-grid { grid-template-columns: 1fr; max-width: 560px; gap: 16px; }
    }

    .faq .faq-head { text-align: center; max-width: 720px; margin: 0 auto; }
    .faq-list { max-width: 780px; margin: 2.4rem auto 0; }
    .faq-item { border-top: 1px solid var(--line); }
    .faq-item:last-of-type { border-bottom: 1px solid var(--line); }
    .faq-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1.15rem 0; }
    .faq-q::-webkit-details-marker { display: none; }
    .faq-q h3 { margin: 0; font-size: 1.06rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
    .faq-chevron { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; color: var(--forest); transition: transform .22s ease; }
    .faq-item[open] .faq-chevron { transform: rotate(180deg); }
    .faq-a { margin: -.15rem 0 1.25rem; color: var(--muted); line-height: 1.65; max-width: 68ch; }
    .faq-sources { max-width: 780px; margin: 1.7rem auto 0; font-size: .92rem; color: var(--quiet); }
    .faq-source { color: var(--forest); font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--forest) 35%, transparent); }
    .faq-source:hover { border-bottom-color: var(--forest); }
    @media (prefers-color-scheme: dark) {
      .faq-source { color: var(--teal); border-bottom-color: color-mix(in srgb, var(--teal) 40%, transparent); }
      .faq-chevron { color: var(--teal); }
    }

    .footer-trust {
      max-width: var(--max);
      margin: 0 auto 22px;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--line);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 14px 24px;
    }
    .trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
    }
    a.trust-badge:hover { color: var(--ink); }
    .trust-badge .trust-glyph { font-size: 14px; line-height: 1; }
    .trust-appstore svg { height: 34px; width: auto; display: block; }
    .trust-w3c svg { height: 31px; width: auto; display: block; }
    @media (max-width: 640px) {
      .footer-trust { gap: 12px 18px; margin-bottom: 20px; padding-bottom: 20px; }
    }

  /* ============================================================
     CLAIM, LIVE — interactive visitor-driven claim demo (#claim-live)
     Self-contained .cl-* system. Every colour, radius, shadow and
     type step traces to the tokens in :root (see /* token map */ in
     the PR summary). Records-not-dashboard app UI inside an
     iPhone-framed stage; theme-aware via the same custom properties
     as the rest of the site.
     ============================================================ */

  #claim-live { overflow: hidden; }

  .cl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    grid-template-areas: "copy stage" "narrative stage";
    gap: 4px 56px;
    align-items: start;
  }

  .cl-copy { grid-area: copy; max-width: 560px; }
  .cl-copy .lede { margin-bottom: 0; }
  .cl-narrative { grid-area: narrative; margin-top: 26px; max-width: 560px; }

  /* Desktop vertical step tracker — mirrors OmoraStepProgress, teal claim-flow accent */
  .cl-tracker {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    position: relative;
  }

  .cl-tracker::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: var(--line);
  }

  .cl-tstep {
    position: relative;
    display: flex;
    gap: 15px;
    padding: 8px 0;
    align-items: flex-start;
  }

  .cl-tbullet {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line-strong);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 760;
    color: var(--quiet);
    transition: border-color .28s, background .28s, color .28s, transform .28s;
  }

  .cl-tbullet svg { width: 15px; height: 15px; }

  .cl-ttitle {
    padding-top: 5px;
    font-size: 15px;
    font-weight: 680;
    color: var(--quiet);
    transition: color .28s;
  }

  .cl-tstep[data-on] .cl-tbullet {
    border-color: var(--teal);
    color: var(--teal);
    background: color-mix(in srgb, var(--teal) 12%, var(--surface));
    transform: scale(1.06);
  }
  .cl-tstep[data-on] .cl-ttitle { color: var(--ink); }
  .cl-tstep[data-done] .cl-tbullet {
    border-color: var(--teal);
    background: var(--teal);
    color: var(--surface);
    transform: none;
  }
  .cl-tstep[data-done] .cl-ttitle { color: var(--muted); }

  /* Mobile compact step-progress bar */
  .cl-stepbar { display: none; }
  .cl-stepbar .cl-sb-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 9px;
  }
  .cl-sb-step {
    font-size: 12px;
    font-weight: 760;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--teal);
  }
  .cl-sb-title { font-size: 15px; font-weight: 700; color: var(--ink); }
  .cl-sb-track {
    height: 5px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
  }
  .cl-sb-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--forest), var(--teal));
    width: 20%;
    transition: width .42s cubic-bezier(.3, .7, .3, 1);
  }

  .cl-caption {
    margin: 22px 0 0;
    padding-left: 16px;
    border-left: 2px solid color-mix(in srgb, var(--teal) 40%, transparent);
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
    min-height: 45px;
    transition: opacity .3s;
  }

  .cl-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    flex-wrap: wrap;
  }

  .cl-restart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    color: var(--muted);
    font-size: 14px;
    font-weight: 680;
    cursor: pointer;
    transition: color .15s, border-color .15s;
  }
  .cl-restart:hover { color: var(--ink); border-color: var(--quiet); }
  .cl-restart svg { width: 15px; height: 15px; }

  .cl-demonote {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--quiet);
  }
  .cl-demonote .cl-spark {
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--teal) 14%, var(--surface));
    color: var(--teal);
  }
  .cl-demonote .cl-spark svg { width: 12px; height: 12px; }

  /* ---------- phone stage (mirrors .phone shell) ---------- */
  .cl-stage {
    grid-area: stage;
    position: relative;
    justify-self: center;
    align-self: center;
  }
  .cl-glow {
    position: absolute;
    inset: -12% -20%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--teal) 16%, transparent), transparent 72%);
    filter: blur(4px);
    pointer-events: none;
  }
  .cl-phone {
    position: relative;
    z-index: 1;
    width: 312px;
    max-width: 84vw;
    border-radius: 46px;
    padding: 9px;
    background: #111315;
    box-shadow: var(--shadow-soft);
  }
  .cl-phone::before {
    content: "";
    position: absolute;
    z-index: 6;
    top: 15px;
    left: 50%;
    width: 84px;
    height: 24px;
    border-radius: 999px;
    background: #000;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .cl-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 900 / 1954;
    border-radius: 38px;
    overflow: hidden;
    background: var(--paper-soft);
  }

  .cl-app {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--paper-soft);
  }

  .cl-statusbar {
    flex: 0 0 auto;
    height: 48px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 24px 7px;
    font-size: 14px;
    font-weight: 680;
    color: var(--ink);
  }
  .cl-statusbar .cl-sb-r { display: flex; align-items: center; gap: 6px; }
  .cl-statusbar svg { display: block; }

  .cl-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px 8px;
  }
  .cl-hbtn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  .cl-hbtn:hover { background: color-mix(in srgb, var(--line) 55%, transparent); }
  .cl-hbtn svg { width: 20px; height: 20px; }
  .cl-htitle {
    flex: 1;
    font-size: 16px;
    font-weight: 720;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cl-htitle.center { text-align: center; }
  .cl-hspacer { width: 34px; flex: 0 0 auto; }

  /* S0's content (hero + purchase card + coverage card) is deliberately taller
     than the visible window, so this used to be a real scroll area — but that
     left the Coverage card's top sliced off mid-card on first paint, reading
     as an unfinished/scrollable web page rather than a composed demo screen.
     overflow:hidden removes the scroll entirely, and a bottom mask fades the
     tail (ending just past the Purchase card, before Coverage) into the
     screen's own background so the crop looks intentional, not truncated. */
  .cl-scroll {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 2px 15px 16px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 94%);
            mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 94%);
    /* Same iOS mask-repaint fix as .hero-phone. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }

  .cl-foot {
    flex: 0 0 auto;
    padding: 11px 15px 15px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--paper-soft) 0%, transparent), var(--paper-soft) 30%);
    border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  }

  /* records section label — app sectionEyebrow (~11.5px medium, all-caps) */
  .cl-caps {
    margin: 17px 3px 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--quiet);
  }

  .cl-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 4px 14px;
  }

  /* item hero */
  .cl-hero {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 6px 3px 2px;
  }
  .cl-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--card-protection) 12%, var(--surface));
    color: var(--card-protection);
    overflow: hidden;
  }
  .cl-thumb > svg { width: 40px; height: 40px; }
  .cl-thumb .cl-crack { position: absolute; inset: 0; pointer-events: none; }
  .cl-thumb .cl-crack path {
    stroke: #20222b;
    stroke-width: 1.6;
    fill: none;
    opacity: 0;
    stroke-dasharray: 130;
    stroke-dashoffset: 130;
  }
  .cl-thumb.cracked .cl-crack path { opacity: .85; animation: cl-draw .5s ease forwards; }
  @keyframes cl-draw { to { stroke-dashoffset: 0; } }
  .cl-hname { font-size: 19px; font-weight: 720; letter-spacing: 0; color: var(--ink); }
  .cl-hsub { margin-top: 2px; font-size: 13px; color: var(--muted); }
  .cl-hmeta { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }

  /* signal capsules */
  .cl-caps-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 2px 2px; }
  .cl-cap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
  }
  .cl-cap svg { width: 13px; height: 13px; }
  .cl-cap.ok {
    border-color: transparent;
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    color: color-mix(in srgb, var(--success) 45%, var(--ink));
  }

  /* record rows (key / value) */
  .cl-rec {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    font-size: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  .cl-rec:last-child { border-bottom: 0; }
  .cl-rec .cl-k { color: var(--muted); }
  .cl-rec .cl-v { font-weight: 600; text-align: right; color: var(--ink); }
  .cl-rec .cl-v.good { color: var(--success); }
  .cl-rec .cl-v.quiet { color: var(--quiet); font-weight: 500; }

  /* defect option buttons (S1) */
  .cl-opt {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding: 13px;
    border-radius: var(--radius-card);
    border: 1.5px solid var(--line);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s, background .16s;
  }
  .cl-opt:hover { border-color: var(--line-strong); }
  .cl-opt .cl-oi {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--destructive) 12%, var(--surface));
    color: var(--destructive);
  }
  .cl-opt .cl-oi svg { width: 19px; height: 19px; }
  .cl-ot { display: block; font-size: 15px; font-weight: 680; color: var(--ink); }
  .cl-oh { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); }
  .cl-ocheck {
    margin-left: auto;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    position: relative;
  }
  .cl-opt[aria-pressed="true"] { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 9%, var(--surface)); }
  .cl-opt[aria-pressed="true"] .cl-ocheck { border-color: var(--teal); background: var(--teal); }
  .cl-opt[aria-pressed="true"] .cl-ocheck::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid var(--surface);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .cl-usechips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }

  /* AI preparing (S2) */
  .cl-prep {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 26px;
    text-align: center;
  }
  .cl-sparkbig {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(150deg, var(--teal), var(--forest));
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--teal) 60%, transparent);
  }
  .cl-sparkbig svg { width: 30px; height: 30px; animation: cl-spin 3.4s linear infinite; }
  @keyframes cl-spin { to { transform: rotate(360deg); } }
  .cl-prep h3 { margin: 0 0 4px; font-size: 19px; font-weight: 720; color: var(--ink); }
  .cl-prep .cl-psub { margin: 0 0 22px; font-size: 13.5px; color: var(--muted); }
  .cl-ticks { width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 13px; text-align: left; }
  .cl-tick { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--quiet); opacity: .5; transition: opacity .3s, color .3s; }
  .cl-tick .cl-tk {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    display: grid;
    place-items: center;
  }
  .cl-tick .cl-tk .cl-sp {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--teal) 22%, transparent);
    border-top-color: var(--teal);
    animation: cl-spin .7s linear infinite;
  }
  .cl-tick .cl-tk > svg { width: 12px; height: 12px; color: var(--surface); display: none; }
  .cl-tick.active, .cl-tick.done { opacity: 1; color: var(--ink); }
  .cl-tick.done .cl-tk { background: var(--teal); border-color: var(--teal); }
  .cl-tick.done .cl-tk .cl-sp { display: none; }
  .cl-tick.done .cl-tk > svg { display: block; }

  /* route cards (S3) — coverage identity edge + teal "best" selection layer */
  .cl-route {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 13px 13px 15px;
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    background: var(--surface);
    overflow: hidden;
  }
  .cl-route + .cl-route { margin-top: 9px; }
  .cl-redge { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--route-color, var(--line-strong)); }
  .cl-ricon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-control);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--route-color, var(--muted)) 14%, var(--surface));
    color: var(--route-color, var(--muted));
  }
  .cl-ricon svg { width: 19px; height: 19px; }
  .cl-rmain { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .cl-rt { font-size: 14.5px; font-weight: 700; color: var(--ink); }
  .cl-rd { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
  .cl-route.dim { opacity: .6; }
  .cl-route.best {
    --route-color: var(--insurance);
    border-color: color-mix(in srgb, var(--teal) 55%, var(--line));
    background: color-mix(in srgb, var(--teal) 7%, var(--surface));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 45%, transparent) inset;
  }
  .cl-rbadge {
    align-self: flex-start;
    margin-bottom: 3px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--teal);
    color: #fff;
    font-size: 10.5px;
    font-weight: 780;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  @media (prefers-color-scheme: dark) { .cl-rbadge { color: #12211E; } }
  .cl-rbadge svg { width: 11px; height: 11px; }

  /* claim document (S4) */
  .cl-dm {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    font-size: 13.5px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  .cl-dm:last-child { border-bottom: 0; }
  .cl-dk {
    flex: 0 0 auto;
    width: 58px;
    padding-top: 2px;
    color: var(--quiet);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .cl-dv { color: var(--ink); font-weight: 500; }
  .cl-dv .cl-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--insurance) 14%, var(--surface));
    color: color-mix(in srgb, var(--insurance) 42%, var(--ink));
    font-size: 11px;
    font-weight: 680;
  }
  .cl-body {
    margin: 12px 2px 0;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--ink);
  }

  .cl-att {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 10px;
    border-radius: var(--radius-control);
    border: 1px solid var(--line);
    background: var(--surface);
  }
  .cl-att + .cl-att { margin-top: 8px; }
  .cl-afi { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
  .cl-afi.pdf { background: color-mix(in srgb, var(--destructive) 12%, var(--surface)); color: var(--destructive); }
  .cl-afi.img { background: color-mix(in srgb, var(--card-protection) 14%, var(--surface)); color: var(--card-protection); }
  .cl-afi svg { width: 17px; height: 17px; }
  .cl-an { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
  .cl-as { display: block; font-size: 11.5px; color: var(--quiet); }
  .cl-aok { margin-left: auto; color: var(--success); }
  .cl-aok svg { width: 17px; height: 17px; }

  /* success (S5) */
  .cl-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 26px;
    text-align: center;
  }
  .cl-bigcheck {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--success) 15%, var(--surface));
    display: grid;
    place-items: center;
  }
  .cl-bigcheck::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--success);
    opacity: .28;
    animation: cl-ring 1.8s ease-out infinite;
  }
  @keyframes cl-ring { 0% { transform: scale(.9); opacity: .5; } 100% { transform: scale(1.35); opacity: 0; } }
  .cl-bigcheck svg { width: 38px; height: 38px; color: var(--success); }
  .cl-sent h3 { margin: 0 0 6px; font-size: 22px; font-weight: 740; color: var(--ink); }
  .cl-ssub { margin: 0 0 20px; max-width: 250px; font-size: 14px; color: var(--muted); }

  /* claim-history status card — neutral edge (outcome unknown), OmoraEdgeNeutral */
  .cl-statuscard {
    position: relative;
    width: 100%;
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 13px 13px 13px 15px;
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    text-align: left;
  }
  .cl-statuscard .cl-redge { background: var(--line-strong); }
  /* Lets the title/subtitle column shrink below its natural single-line width
     (icon and .cl-sc-b are both flex:0 0 auto — fixed) so a long localized
     card_sub wraps onto a 2nd line instead of pushing the "Sent" pill past
     the card's right edge, where overflow:hidden was clipping it. */
  .cl-sc-info { flex: 1 1 auto; min-width: 0; }
  .cl-sc-t { display: block; font-size: 14px; font-weight: 680; color: var(--ink); }
  .cl-sc-d { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
  .cl-sc-b {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 55%, var(--surface));
    color: var(--muted);
    font-size: 11px;
    font-weight: 680;
  }

  /* in-app buttons */
  .cl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    padding: 14px;
    border: 0;
    border-radius: var(--radius-card);
    font-size: 15px;
    font-weight: 720;
    letter-spacing: 0;
    cursor: pointer;
    transition: filter .15s, transform .12s;
  }
  .cl-btn:active { transform: scale(.985); }
  .cl-btn[disabled] { opacity: .45; pointer-events: none; }
  .cl-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .cl-btn-teal { background: var(--teal); color: #fff; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--teal) 70%, transparent); }
  .cl-btn-primary { background: var(--forest-dark); color: #fff; box-shadow: 0 10px 22px rgba(36, 71, 53, .18); }
  @media (prefers-color-scheme: dark) { .cl-btn-teal, .cl-btn-primary { color: #12211E; } }
  .cl-btn-teal:hover, .cl-btn-primary:hover { filter: brightness(1.05); }
  .cl-btn-sec {
    width: 100%;
    min-height: 44px;
    padding: 11px;
    border: 0;
    background: transparent;
    color: var(--forest);
    font-size: 14px;
    font-weight: 640;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .cl-btn-sec svg { width: 15px; height: 15px; }
  .cl-btn-report {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 11px;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
  }
  .cl-btn-report:hover { border-color: var(--line-strong); }
  .cl-btn-report .cl-lft { display: flex; align-items: center; gap: 11px; }
  .cl-btn-report .cl-ri {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-control);
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--warning) 15%, var(--surface));
    color: var(--warning);
  }
  .cl-btn-report .cl-ri svg { width: 18px; height: 18px; }
  .cl-rrt { display: block; font-size: 15px; font-weight: 700; }
  .cl-rrh { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
  .cl-btn-report .cl-chev { color: var(--quiet); flex: 0 0 auto; }

  /* S0-only "Try it now" nudge — a red bubble + hand-drawn arrow pointing at
     the Report-a-problem button. Absolutely placed over the phone screen
     (.cl-app is the positioned ancestor); pointer-events off so it never
     blocks the button. Only rendered in the S0 screen markup, so it clears
     itself once the demo advances. */
  .cl-tryhint {
    position: absolute;
    z-index: 5;
    right: 22px;
    bottom: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
  }
  .cl-tryhint-bubble {
    background: var(--destructive);
    color: #fff;
    font-size: 12.5px;
    font-weight: 750;
    letter-spacing: .1px;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--destructive) 55%, transparent);
  }
  .cl-tryhint-arrow {
    width: 40px;
    height: 38px;
    margin-top: 1px;
    margin-right: 34px;
    color: var(--destructive);
  }
  @media (prefers-reduced-motion: no-preference) {
    .cl-tryhint { animation: cl-tryhint-bob 1.7s ease-in-out infinite; }
    @keyframes cl-tryhint-bob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
  }
  .cl-sendspin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: cl-spin .7s linear infinite;
  }

  /* keyboard focus — WCAG 2.2 AA visible focus on every interactive control */
  .cl-app button:focus-visible,
  .cl-restart:focus-visible,
  .cl-hbtn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal) 60%, var(--ink));
    outline-offset: 2px;
  }

  /* entrance motion — staged opacity + small rise, settles < 1s */
  .cl-enter { animation: cl-enter .34s cubic-bezier(.22, .68, .35, 1); }
  @keyframes cl-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

  @media (max-width: 900px) {
    .cl-grid {
      grid-template-columns: 1fr;
      grid-template-areas: "copy" "stage" "narrative";
      gap: 30px;
      justify-items: center;
      text-align: center;
    }
    .cl-copy { max-width: 620px; }
    .cl-tracker { display: none; }
    .cl-narrative { margin-top: 0; width: 100%; max-width: 460px; text-align: left; }
    .cl-stepbar { display: block; }
    .cl-caption { text-align: left; }
    .cl-controls { justify-content: flex-start; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cl-enter { animation: none; }
    .cl-thumb.cracked .cl-crack path { animation: none; stroke-dashoffset: 0; opacity: .85; }
    .cl-sparkbig svg,
    .cl-tick .cl-tk .cl-sp,
    .cl-bigcheck::before,
    .cl-sendspin { animation: none; }
    .cl-sb-fill { transition: none; }
  }