/*
 * 26Keys component styles
 *
 * Order is intentional: base → navigation → type/hero → product sections →
 * proof/pricing/FAQ → accessibility → responsive overrides.
 * Design primitives live in theme.css; no global values should be redefined here.
 *
 * Table of contents. Search "§N" to jump to a section:
 *   §1  Base & shell
 *   §2  Buttons
 *   §3  Navigation (desktop + mobile)
 *   §4  Reveal animations
 *   §5  Type
 *   §6  Hero
 *   §7  Hero compare card
 *   §8  Sections & full-screen chapters
 *   §9  Hope (dark)
 *   §10 How it works & interactive keyboard
 *   §11 Outcome (dark)
 *   §12 Adapts-to-your-level
 *   §13 Features
 *   §14 Feature card mockups
 *   §15 Privacy
 *   §16 Testimonials (dark)
 *   §17 FAQ
 *   §18 Closure (dark)
 *   §19 Footer
 *   §20 Your English profile
 *   §21 Payoff moments
 *   §22 Pricing
 *   §23 Example-data tags
 *   §24 Visible keyboard focus
 *   §25 Responsive overrides
 */

  /* ---------- §1 · Base & shell ---------- */
  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }
  /* Links take the surrounding text color; accent styling is per component. */
  a { color: inherit; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .shell {
    width: min(var(--content-max), calc(100% - var(--page-gutter)));
    margin: 0 auto;
  }

  /* ---------- §2 · Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: var(--radius-pill);
    font-weight: var(--weight-bold);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .btn svg { display: block; flex: 0 0 auto; }
  .btn:active { transform: scale(.97); }

  .btn-primary {
    background: var(--ink);
    color: var(--white);
    border: 1px solid var(--ink);
    border-radius: var(--radius-18);
    padding: 11px 20px;
    font-size: var(--fs-14);
  }
  .btn-primary:hover {
    background: var(--black);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-2px) scale(1.02);
  }
  .btn-primary svg {
    width: 17px; height: 17px; fill: var(--white);
    transition: transform .35s var(--ease-spring);
  }
  .btn-primary:hover svg { transform: scale(1.18) rotate(-10deg); }

  .btn-primary.inverse {
    background: var(--white);
    color: var(--ink);
    border-color: var(--white);
  }
  .btn-primary.inverse svg { fill: var(--ink); }
  .btn-primary.inverse:hover {
    background: var(--white);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-2px) scale(1.02);
  }

  .btn-ghost {
    background: transparent;
    color: var(--ink);
    border: var(--border-subtle);
    padding: 17px 28px;
    font-size: var(--fs-17);
  }
  .btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }
  .btn-ghost .arrow { transition: transform .22s ease; }
  .btn-ghost:hover .arrow { transform: translateX(4px); }

  .btn-primary.big { padding: 18px 32px; font-size: var(--fs-17); }
  .btn-primary.big svg { width: 20px; height: 20px; }

  /* ---------- §3 · Navigation (desktop + mobile) ---------- */
  nav {
    position: sticky;
    top: 16px;
    z-index: 50;
    width: min(640px, calc(100% - 48px));
    margin: 22px auto 0;
  }
  .navbar {
    /* One curve for the whole reveal: fast start, long soft landing —
       the sheet-like ease Apple leans on for nav chrome. */
    --ease-push: cubic-bezier(.32, .72, 0, 1);
    background: rgba(244,244,242,.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: var(--radius-22);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: box-shadow .4s ease, background .4s ease;
  }
  .navbar.scrolled {
    background: rgba(244,244,242,.96);
    box-shadow: 0 12px 32px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
  }
  .logo { display: flex; align-items: center; }
  .logo svg { width: 36px; height: 36px; border-radius: var(--radius-12); }
  .nav-right {
    display: flex;
    align-items: center;
    /* The Download pill is ALWAYS in the layout (it only fades); the row never
       re-flows, so the reveal can run entirely on the compositor. */
    padding-right: 0;
  }
  .nav-link + .nav-link { margin-left: 28px; }
  /* Hidden state: the links slide right over the pill's reserved slot, landing
     14px from the pill edge — the same spot they occupied before. transform
     only: no layout, no jitter, GPU-composited like Apple's nav reveals. */
  .nav-link {
    transform: translateX(162px);
    /* will-change keeps these on their own compositor layers permanently, so the
       first frame of the slide never stalls on rasterisation — the "frame cut".
       (The transition itself lives on the typography .nav-link rule below.) */
    will-change: transform;
  }
  .nav-right:has(.nav-download.show) .nav-link {
    transform: none;
    transition-delay: 0s, 0s;   /* show: the slide leads; colour keeps its timing */
  }
  .nav-download {
    border-radius: var(--radius-12);
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 24px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    /* HIDE: the pill fades first (.14s), and only then do the links start sliding
       back over its slot (their .1s delay) — no moment of overlapping text.
       transform is listed only so the hover lift keeps animating. */
    transition: opacity .14s ease, transform .25s var(--ease-standard);
  }
  .nav-download.show {
    opacity: 1;
    pointer-events: auto;
    /* SHOW: links lead. The ease-push curve covers ~70% of their travel in the
       first 220ms, so the fade starting at .22s lands on an already-clear slot. */
    transition: opacity .3s ease .22s, transform .25s var(--ease-standard);
  }
  .nav-download.show:hover { transform: translateY(-2px) scale(1.02); }
  .nav-link {
    color: #1d1d1f;
    text-decoration: none;
    font-size: var(--fs-16);
    font-weight: var(--weight-semibold);
    /* colour hover + the reveal slide in ONE declaration — a second transition
       anywhere on .nav-link silently clobbers the slide. */
    transition: color .18s ease, transform .5s var(--ease-push) .1s;
  }
  .nav-link:hover { color: #6b6b6b; }

  /* ---------- Mobile nav (Mobbin-style) ---------- */
  .nav-toggle {
    display: none;                 /* shown only on mobile */
    position: relative;
    z-index: 6;                    /* above the panel, so it stays as a morphing X */
    flex-direction: column;        /* stack the two bars */
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-right: 2px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-12);
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .34s var(--ease-standard);
  }
  /* Hamburger morphs into an X when the menu is open */
  .nav-toggle.open span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { transform: translateY(-4.25px) rotate(-45deg); }

  /* The menu is the navbar pill itself expanding downward — anchored to
     <nav>, no dimming backdrop. It "falls" open with a clip-path reveal on
     an OPAQUE panel: no opacity/backdrop-filter cross-fade over the pill
     underneath, so there's no flicker — the mask simply wipes down. */
  .mobile-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: none;
    clip-path: inset(0 0 100% 0 round 22px);
    transition: clip-path .3s var(--ease-standard);
    will-change: clip-path;
  }
  .mobile-menu.open {
    pointer-events: auto;
    clip-path: inset(0 0 0 0 round 22px);
  }
  .mobile-menu-panel {
    background: #f4f4f2;              /* fully opaque — hides the pill behind it */
    border-radius: var(--radius-22);
    padding: 14px 14px 16px;
    box-shadow: 0 18px 44px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.05);
  }
  .mobile-menu-head {
    display: flex;
    align-items: center;
    min-height: 44px;              /* match the collapsed navbar row so the logo lines up */
    padding: 0;
  }
  .mobile-menu-links { padding: 6px 0 2px; }
  /* Items rise + fade in with a quick stagger as the menu opens */
  .mobile-menu-links a,
  .mobile-menu-cta {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .24s ease, transform .28s var(--ease-standard);
  }
  .mobile-menu.open .mobile-menu-links a,
  .mobile-menu.open .mobile-menu-cta {
    opacity: 1;
    transform: none;
  }
  .mobile-menu.open .mobile-menu-links a:nth-child(1) { transition-delay: .04s; }
  .mobile-menu.open .mobile-menu-links a:nth-child(2) { transition-delay: .08s; }
  .mobile-menu.open .mobile-menu-links a:nth-child(3) { transition-delay: .12s; }
  .mobile-menu.open .mobile-menu-links a:nth-child(4) { transition-delay: .16s; }
  .mobile-menu.open .mobile-menu-cta { transition-delay: .2s; }
  .mobile-menu-links a {
    display: block;
    color: var(--ink);
    text-decoration: none;
    font-size: var(--fs-21);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-subtle);
    padding: 11px 0;
  }
  .mobile-menu-cta {
    width: 100%;
    margin-top: 12px;
    height: 52px;
    border-radius: 16px;
    font-size: var(--fs-16);
  }

  /* ---------- §4 · Reveal animations ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: rise .9s var(--ease-out) forwards;
  }
  .d1 { animation-delay: .05s; }
  .d2 { animation-delay: .16s; }
  .d3 { animation-delay: .27s; }
  .d4 { animation-delay: .38s; }
  @keyframes rise { to { opacity: 1; transform: translateY(0); } }

  .sr {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity .8s var(--ease-out),
      transform .8s var(--ease-out);
    transition-delay: var(--sr-delay, 0ms);
    will-change: opacity, transform;
  }
  .sr.in { opacity: 1; transform: none; }

  /* Scale-in variant: large visuals ease from slightly smaller */
  .sr-scale { transform: translateY(26px) scale(.965); transform-origin: center bottom; }
  .sr-scale.in { transform: none; }

  /* Card variant: a touch more travel for grid items */
  .sr-card { transform: translateY(34px); }
  .sr-card.in { transform: none; }

  /* ---------- §5 · Type ---------- */
  .label {
    display: block;
    margin-bottom: 20px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    font-size: var(--fs-12);
    font-weight: var(--weight-bold);
  }
  /* One shared style for every section title; only the hero goes bigger.
     Size, line height, and tracking are identical page-wide, and the
     weight is the same display 640 as the hero and feature card headings. */
  h2 {
    max-width: 14ch;
    width: 100%;
    font-size: var(--fs-h2);
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-display);
    font-weight: var(--weight-display);
    overflow-wrap: break-word;
  }
  .intro {
    max-width: 560px;
    margin-top: 24px;
    color: var(--text-body);
    font-size: var(--fs-19);
    line-height: var(--leading-body);
  }
  /* ---------- §6 · Hero ---------- */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    padding: 0 0 96px;
  }
  .hero > div:first-child {
    width: 100%;
    min-height: calc(100svh - 260px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 42px 0 34px;
  }
  .hero .compare-col { margin-top: 12px; }
  h1 {
    max-width: none;
    margin: 0 0 26px;
    font-size: var(--fs-hero);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-display);
  }
  .hl {
    background: linear-gradient(180deg, transparent 62%, rgba(0,106,219,.22) 62%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 3px;
    padding: 0 .04em;
  }

  /* Headline underlines sweep in: write first, then speak */
  h1.lyric .hl {
    background-size: 0% 100%;
    transition: background-size .55s var(--ease-standard);
  }
  h1.lyric .hl.lit { background-size: 100% 100%; }

  /* Keep "write" and its icon together so they never wrap apart */
  .write-unit { white-space: nowrap; }
  .hero-first-line { white-space: nowrap; }
  /* Rotating app icon above "write", like a superscript: wherever you write, it counts */
  .write-app {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .92em;
    height: .92em;
    margin-left: .06em;
    border-radius: 26%;
    background: var(--white);
    border: 2px solid var(--line);
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    position: relative;
    top: -.38em;
    opacity: 0;
    transform: scale(.35) rotate(-12deg);
    transition: transform .5s var(--ease-spring), opacity .35s ease;
  }
  .write-app.in {
    opacity: 1;
    transform: none;
  }
  .write-app.in.swap {
    transform: scale(.5) rotate(-10deg);
    transition: transform .2s cubic-bezier(.55,0,.68,.19);
  }
  .write-app svg { width: 64%; height: 64%; }
  .hero-copy {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    font-size: var(--fs-19);
    line-height: var(--leading-body);
    color: var(--text-body-strong);
  }
  .hero-copy strong { color: var(--ink); }
  .hero-copy + .hero-copy { margin-top: 14px; }
  .hero-copy.lead { font-size: var(--fs-22); max-width: none; white-space: nowrap; }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--wash, #f4f4f2);
    border-radius: var(--radius-pill);
    padding: 8px 16px 8px 14px;
    font-size: var(--fs-14);
    font-weight: var(--weight-semibold);
    color: #4a4a48;
    margin-bottom: 22px;
  }
  .pill .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: var(--ring-accent);
    flex: none;
    animation: dotBreath 2.8s ease-in-out infinite;
  }
  @keyframes dotBreath {
    0%, 100% { box-shadow: var(--ring-accent); }
    50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 9%, transparent); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pill .dot { animation: none; }
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
    margin-top: 36px;
  }
  .hero-req {
    margin-top: 13px;
    text-align: center;
    color: var(--muted);
    font-size: var(--fs-13);
    font-weight: var(--weight-semibold);
    letter-spacing: .01em;
  }
  .hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 14px 6px;
    font-size: var(--fs-15);
    font-weight: var(--weight-semibold);
    color: var(--muted);
    text-decoration: none;
    transition: color .18s ease;
  }
  .hero-secondary:hover { color: var(--ink); }
  .hero-secondary svg { width: 14px; height: 14px; }
  .trust {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px 24px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: var(--fs-14);
  }
  .trust-item { display: inline-flex; align-items: center; gap: 8px; }
  .check {
    width: 18px; height: 18px;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  /* ---------- §7 · Hero compare: you today vs you in a few months ---------- */
  .compare-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .compare {
    position: relative;
    width: 100%;
    max-width: 660px;
    text-align: left;
    background: var(--white);
    border: var(--border-subtle);
    border-radius: var(--radius-30);
    padding: 44px 46px 42px;
    box-shadow: 0 24px 60px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.04);
  }
  .cmp-io { transition: opacity .5s ease; }
  .compare.out .cmp-io .cmp-after { opacity: 0; }
  .cmp-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-13);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-subtle);
  }
  .cmp-after .cmp-tag { color: var(--accent); }
  .cmp-chip {
    white-space: nowrap;
    font-size: var(--fs-11);
    font-weight: var(--weight-bold);
    letter-spacing: .06em;
    color: #8a8a8a;
    background: var(--surface-chip);
    border-radius: 6px;
    padding: 3.5px 8px;
    line-height: var(--leading-none);
  }
  .cmp-chip.hi {
    color: var(--accent);
    background: #dcecfc;
  }
  .cmp-text {
    margin-top: 14px;
    font-size: var(--fs-20);
    line-height: 1.62;
    color: var(--ink);
  }
  .cmp-before { padding: 2px 2px 0; }
  .cmp-after {
    margin-top: 30px;
    background: #ecf5fe;
    border: 1px solid #b9dcf9;
    border-radius: var(--radius-20);
    padding: 25px 28px 24px;
    box-shadow: 0 6px 18px rgba(0,106,219,.08);
    opacity: 0;
    transform: translateY(10px) scale(.985);
    transition: opacity .55s ease, transform .55s var(--ease-standard);
  }
  .cmp-after.on { opacity: 1; transform: none; }
  .cmp-after .cmp-text {
    color: var(--ink);
    font-size: var(--fs-22);
    line-height: 1.58;
  }
  .cmp-text mark {
    color: inherit;
    background-color: transparent;
    border-radius: 3px;
    padding: 0 .04em;
    background-image: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--accent) 26%, transparent) 62%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size .45s var(--ease-standard);
  }
  .cmp-after .cmp-text mark.w {
    transition: opacity .3s ease, transform .3s ease, background-size .45s var(--ease-standard);
  }
  .cmp-text mark.lit { background-size: 100% 100%; }
  .cmp-caption {
    display: block;
    margin-top: 20px;
    font-size: var(--fs-13);
    font-weight: var(--weight-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .cmp-note {
    margin-top: 56px;
    text-align: center;
    font-size: var(--fs-compare-note);
    font-weight: var(--weight-display);
    line-height: 1.14;
    letter-spacing: var(--tracking-heading);
    color: var(--muted);
  }
  .cmp-note-lead {
    display: block;
    font-size: var(--fs-relative-small);
    letter-spacing: var(--tracking-tight);
  }
  .cmp-note strong {
    display: block;
    font-weight: var(--weight-display);
    color: var(--ink);
  }
  /* Dia-style color sweep across the closing line */
  .cmp-note .shch { transition: color .28s ease; }
  /* animated entrances (the note below the card stays put) */
  .cmp-tag, .cmp-before .cmp-text, .cmp-caption {
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .cmp-after .cmp-text .w {
    opacity: 0;
    transform: translateY(4px);
    display: inline-block;
    transition: opacity .3s ease, transform .3s ease;
  }
  .cmp-tag.on, .cmp-before .cmp-text.on, .cmp-caption.on,
  .cmp-after .cmp-text .w.on {
    opacity: 1;
    transform: none;
  }
  /* The current writing is the starting state, not part of the reveal. */
  .cmp-before .cmp-tag,
  .cmp-before .cmp-text {
    opacity: 1;
    transform: none;
  }
  /* static fallback: no motion */
  .compare.static .cmp-tag, .compare.static .cmp-text, .compare.static .cmp-caption,
  .compare.static ~ .cmp-note, .compare.static .cmp-text .w, .compare.static .cmp-after {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .compare.static .cmp-text mark { background-size: 100% 100%; transition: none; }

  /* Cross-fade between mother-tongue pairs: the card frame and the two tags
     hold perfectly still while both messages and the caption breathe out
     together, swap, and breathe back in. */
  .cmp-after .cmp-text { transition: opacity .55s ease; }
  .compare.swap .cmp-before .cmp-text,
  .compare.swap .cmp-after .cmp-text,
  .compare.swap .cmp-caption { opacity: 0; }

  /* Instant reset between loops (avoids a half-faded flash) */
  .compare.resetting .cmp-io,
  .compare.resetting .cmp-tag, .compare.resetting .cmp-before .cmp-text,
  .compare.resetting .cmp-after, .compare.resetting .cmp-caption,
  .compare.resetting .cmp-text .w, .compare.resetting .cmp-text mark {
    transition: none !important;
  }

  /* ---------- §8 · Sections & full-screen chapters ---------- */
  section { padding: var(--section-space) 0; }

  /* Full-screen chapters: each section owns the viewport, content centered.
     .hope, .outcome, and .close stay compact by design; content taller than one screen
     (FAQ, comparison) simply scrolls on. Desktop only — on phones a forced
     100svh leaves awkward gaps. */
  @media (min-width: 800px) {
    main > section:not(.hope):not(.close):not(.outcome) {
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: var(--section-space-viewport) 0;
    }
    /* .features and .privacy keep their top padding on the shell; the chapter
       selector above is repeated so these outrank its heavy specificity. */
    main > section:not(.hope):not(.close):not(.outcome).features,
    main > section:not(.hope):not(.close):not(.outcome).privacy { padding-top: 0; }
    .hero {
      min-height: calc(100vh - 110px);
      min-height: calc(100svh - 110px);
      justify-content: center;
    }
  }

  /* ---------- §9 · Hope (dark) ---------- */
  .hope {
    background: var(--ink);
    color: var(--white);
  }
  .hope .label { color: var(--text-on-dark-muted); }
  .hope h2 { max-width: 26ch; color: var(--white); }
  .hope .intro { color: var(--text-on-dark-soft); max-width: none; }
  @media (min-width: 800px) { .hope .intro { white-space: nowrap; } }
  .hope-em {
    display: block;
    margin-top: 36px;
    font-size: var(--fs-compare-note);
    letter-spacing: var(--tracking-heading);
    font-weight: var(--weight-bold);
    color: var(--white);
  }
  /* Same underline sweep as the hero headline, brightened to read on dark.
     Triggers off the .sr .in class the section already gets in view. */
  .hope-em .hl,
  .outcome-close .hl {
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    border-radius: 2px;
    padding: 0 0 .22em;
    transition: background-size .6s var(--ease-standard) .25s;
  }
  .hope-em.in .hl,
  .outcome-close.in .hl { background-size: 100% 2px; }

  /* Supporting visual: a live-speaking moment where the words fumble */
  .hope-scene { margin: 40px 0 0; max-width: 440px; }
  .hs-card {
    background: #191919;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    padding: 22px 22px 20px;
    text-align: left;
    box-shadow: 0 18px 44px rgba(0,0,0,.35);
  }
  .hs-head { display: flex; align-items: center; margin-bottom: 14px; }
  .hs-live {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: var(--fs-12); font-weight: var(--weight-bold);
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.45);
  }
  .hs-live i {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: #ff5a5a;
    animation: hsPulse 2s ease-out infinite;
  }
  @keyframes hsPulse {
    0%       { box-shadow: 0 0 0 0 rgba(255,90,90,.45); }
    70%,100% { box-shadow: 0 0 0 7px rgba(255,90,90,0); }
  }
  .hs-bubble {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: var(--fs-17);
    line-height: 1.55;
    color: rgba(255,255,255,.9);
  }
  .hs-bubble .um { color: rgba(255,255,255,.38); }

  /* Closing couplet: the crux (dimmed), then the solution (bright, underlined) */
  .hope-setup {
    margin-top: 40px;
    font-size: var(--fs-compare-note);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-heading);
    line-height: 1.16;
    color: var(--text-on-dark-soft);
  }
  .hope-setup + .hope-em { margin-top: 8px; }

  /* ---------- §10 · How it works & interactive keyboard ---------- */
  #how { overflow: hidden; }          /* clip the keyboard that bleeds off-screen */
  .how-layout {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 64px;
    align-items: center;
  }
  .how-right { min-width: 0; position: relative; }
  @media (min-width: 1041px) {
    .how-right { transform: translateY(30px); }
  }
  .how-h2 {
    max-width: 560px;
  }
  .how-points {
    margin-top: 44px;
    border-top: 1px solid var(--line);
  }
  .how-point {
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
  }
  .how-point h3 {
    margin: 0 0 8px;
    font-size: var(--fs-24);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-bold);
  }
  .how-point p {
    max-width: 44ch;
    color: var(--text-body-soft);
    line-height: var(--leading-relaxed);
    font-size: var(--fs-16);
  }
  .kbd-wrap {
    width: 70vw;
    max-width: 990px;
    margin: 0;
    container-type: inline-size;
  }
  .kbd-img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Interactive keyboard (replaces static image).
     Every dimension derives from the container width (cqw),
     so the board keeps a fixed aspect ratio at any size. */
  .kb26 {
    --kb-line: rgba(0,0,0,.14);
    --kb-line-hover: rgba(0,0,0,.42);
    --kb-fill-hover: rgba(0,0,0,.05);
    /* vw fallbacks for browsers without container query units */
    --kb-gap: .9vw;
    --kb-pad: 1.2vw;
    --kb-keyh: 4.4vw;
    --kb-radius: .9vw;
    --kb-frame-radius: 1.9vw;
    --kb-border: 2px;
    display: flex;
    flex-direction: column;
    gap: var(--kb-gap);
    padding: var(--kb-pad);
    border: var(--kb-border) solid var(--kb-line);
    border-radius: var(--kb-frame-radius);
    background: var(--white);
    position: relative;
  }
  @supports (width: 1cqw) {
    .kb26 {
      --kb-gap: 1.1cqw;
      --kb-pad: 1.5cqw;
      --kb-keyh: 5.45cqw;
      --kb-radius: 1.15cqw;
      --kb-frame-radius: 2.4cqw;
      --kb-border: max(1px, .26cqw);
    }
  }
  .kb26-row {
    display: flex;
    gap: var(--kb-gap);
  }
  .kb26-key {
    flex: 1 1 0;
    height: var(--kb-keyh);
    border: var(--kb-border) solid var(--kb-line);
    border-radius: var(--kb-radius);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background .18s ease, border-color .18s ease,
                transform .18s ease, box-shadow .25s ease;
    opacity: 0;
    transform: scale(.85);
    cursor: default;
  }
  .kb26.kb26-in .kb26-key {
    animation: kb26KeyIn .5s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes kb26KeyIn { to { opacity: 1; transform: scale(1); } }
  .kb26 .kb26-key.kb26-settled { animation: none; opacity: 1; transform: none; }
  .kb26.kb26-in .kb26-key:hover {
    background: var(--kb-fill-hover);
    border-color: var(--kb-line-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }
  .kb26.kb26-in .kb26-key:active {
    transform: translateY(0) scale(.96);
    box-shadow: none;
  }
  .kb26-key .kb26-ch {
    font-size: var(--fs-key);
    font-weight: var(--weight-semibold);
    letter-spacing: .02em;
    color: var(--ink);
    opacity: 0;
    transform: scale(.6) translateY(4px);
    transition: opacity .18s ease, transform .22s var(--ease-spring);
    pointer-events: none;
    user-select: none;
  }
  .kb26-key:hover .kb26-ch {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  .kb26-key.kb26-app {
    background: var(--white);
    opacity: 0;
    transform: scale(.5);
    cursor: pointer;
  }
  .kb26.kb26-in .kb26-key.kb26-app {
    animation: kb26AppIn .55s var(--ease-spring) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes kb26AppIn { to { opacity: 1; transform: scale(1); } }
  .kb26-key.kb26-app svg {
    width: 58%;
    height: 58%;
    display: block;
    transition: transform .22s var(--ease-spring);
  }
  .kb26.kb26-in .kb26-key.kb26-app:hover {
    background: var(--white);
    border-color: rgba(0,0,0,.55);
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,.14);
  }
  .kb26.kb26-in .kb26-key.kb26-app:hover svg { transform: scale(1.14); }
  .kb26 .kb26-key.kb26-press {
    background: var(--kb-fill-hover);
    border-color: rgba(0,0,0,.55);
    transform: translateY(2px) scale(.95);
    box-shadow: none;
  }
  .kb26 .kb26-key.kb26-press svg { transform: scale(.9); }

  /* Floating toast above an app key.
     Smoothness recipe: each layer animates ONE property with ONE
     continuous curve — the outer div rises, the inner pill pops,
     opacity ramps linearly. No mid-flight keyframe joints, so the
     easing never restarts and there is nothing to hitch or flicker. */
  .kb26-toast {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transform: translate3d(-50%, 12px, 0);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  .kb26-toast-inner {
    display: block;
    background: var(--ink);
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    border-radius: var(--radius-pill);
    padding: clamp(5px, 1cqw, 9px) clamp(11px, 1.9cqw, 18px);
    font-size: var(--fs-key-toast);
    font-weight: var(--weight-semibold);
    color: var(--white);
    white-space: nowrap;
    will-change: transform;
    backface-visibility: hidden;
  }
  .kb26-toast.kb26-run {
    animation: kb26ToastRise 1.8s cubic-bezier(.16,1,.3,1) forwards,
               kb26ToastFade 1.8s linear forwards;
  }
  .kb26-toast.kb26-run .kb26-toast-inner {
    animation: kb26ToastPop .6s cubic-bezier(.26,1.45,.42,1) forwards;
  }
  @keyframes kb26ToastRise {
    from { transform: translate3d(-50%, 12px, 0); }
    to   { transform: translate3d(-50%, -26px, 0); }
  }
  @keyframes kb26ToastPop {
    from { transform: scale(.85); }
    to   { transform: scale(1); }
  }
  @keyframes kb26ToastFade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    72%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Easter egg keys: hovering peeks the brand logo, tapping confirms */
  .kb26-key.kb26-egg { cursor: pointer; }
  .kb26-egg-peek {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.4) rotate(-10deg);
    transition: opacity .16s ease, transform .26s var(--ease-spring);
    pointer-events: none;
  }
  .kb26-egg-peek svg { width: 56%; height: 56%; display: block; }
  .kb26.kb26-in .kb26-egg:hover .kb26-egg-peek,
  .kb26-egg.kb26-egg-on .kb26-egg-peek {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  .kb26.kb26-in .kb26-egg:hover .kb26-ch,
  .kb26-egg.kb26-egg-on .kb26-ch {
    opacity: 0;
    transform: scale(.6) translateY(4px);
  }

  /* The 26Keys "K" — blank at rest like every key, the mark on hover, no toast. */
  .kb26-key.kb26-keys { cursor: pointer; }
  .kb26-key.kb26-keys .kb26-egg-peek svg {
    border-radius: 22%;
    transition: transform .22s var(--ease-spring);
  }
  .kb26-key.kb26-keys.kb26-loved .kb26-egg-peek svg {
    animation: kb26KeyPop .5s var(--ease-spring);
  }
  @keyframes kb26KeyPop {
    0% { transform: scale(1); }
    35% { transform: scale(1.22); }
    100% { transform: scale(1); }
  }
  /* Distinct hover — a soft blue glow that foreshadows the heart */
  .kb26.kb26-in .kb26-key.kb26-keys:hover {
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  /* Keep the K steady while the heart launches; the generic active press scale
     would otherwise tug the heart down at the start of its flight. */
  .kb26.kb26-in .kb26-key.kb26-keys:active {
    transform: translateY(-3px);
  }
  /* Blue heart that floats up above the K key.
     Same recipe as the toast: outer div = one continuous rise,
     inner svg = one spring pop (overshoot lives in the curve, not in
     keyframes), opacity = one monotonic linear ramp. Nothing pulses. */
  .kb26-heart {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(18px, 3cqw, 30px);
    height: clamp(18px, 3cqw, 30px);
    pointer-events: none;
    z-index: 7;
    opacity: 0;
    transform: translate3d(-50%, 6px, 0);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  .kb26-heart svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: var(--accent);
    will-change: transform;
    backface-visibility: hidden;
  }
  /* The heart keeps moving for its WHOLE flight (gentle ease-out, never
     parking at the apex) and fades continuously on the way up, so rapid
     presses trail behind each other instead of stacking at the top.
     Per-heart flight is randomized via --hx/--hy/--hd set inline in JS. */
  .kb26-heart.kb26-run {
    animation: kb26HeartRise var(--hd, 1.45s) cubic-bezier(.25,.46,.45,.94) forwards,
               kb26HeartFade var(--hd, 1.45s) linear forwards;
  }
  .kb26-heart.kb26-run svg {
    animation: kb26HeartPop .55s cubic-bezier(.3,1.6,.4,1) forwards;
  }
  @keyframes kb26HeartRise {
    from { transform: translate3d(-50%, 6px, 0); }
    to   { transform: translate3d(calc(-50% + var(--hx, 0px)), var(--hy, -70px), 0); }
  }
  @keyframes kb26HeartPop {
    from { transform: scale(.4); }
    to   { transform: scale(1); }
  }
  @keyframes kb26HeartFade {
    0%   { opacity: 0; }
    7%   { opacity: 1; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Physical typing feedback: briefly light up the character */
  .kb26-key.kb26-typed .kb26-ch {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  .kbd-hint {
    margin-top: 18px;
    text-align: left;
    font-size: var(--fs-13);
    color: #b3b3b3;
    transition: opacity .3s ease, color .3s ease;
  }
  .kbd-hint.kbd-hint-swap { opacity: 0; }
  .kbd-hint.kbd-hint-active { color: #6a6a6a; }   /* once you start finding */
  .kbd-hint-count { color: var(--accent); font-weight: var(--weight-bold); }
  .kbd-keyline {
    margin-top: 6px;
    text-align: left;
    font-size: var(--fs-13);
    font-weight: var(--weight-bold);
    color: var(--accent);
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
  }
  .kbd-keyline.show { opacity: 1; transform: none; }
  .kbd-keyline-heart {
    width: 1.05em;
    height: 1.05em;
    margin-right: .28em;
    vertical-align: -.16em;
    fill: currentColor;
  }

  /* Stacked up/down arrow key on the bottom row */
  .kb26-key.kb26-split::after {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 50%;
    border-top: var(--kb-border) solid var(--kb-line);
    transition: border-color .18s ease;
  }
  .kb26.kb26-in .kb26-key.kb26-split:hover::after {
    border-color: var(--kb-line-hover);
  }

  .how-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
  }
  .how-card {
    min-height: 270px;
    padding: 28px 28px 20px 0;
    border-right: 1px solid var(--line);
  }
  .how-card + .how-card { padding-left: 28px; }
  .how-card:last-child { border-right: 0; padding-right: 0; }
  .number { color: var(--muted); font-size: var(--fs-14); font-weight: var(--weight-bold); }
  .how-card h3 {
    margin: 0 0 14px;
    font-size: var(--fs-25);
    letter-spacing: -.04em;
    font-weight: var(--weight-bold);
  }
  .how-card p, .feature p {
    max-width: 31ch;
    color: var(--text-body-soft);
    line-height: var(--leading-relaxed);
    font-size: var(--fs-16);
  }

  /* ---------- §11 · Outcome (dark, compact transition, left-aligned) ---------- */
  .outcome {
    background: var(--ink);
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(96px, 12vw, 160px) 0;
  }
  .outcome .label { margin-bottom: 22px; color: var(--text-on-dark-muted); }
  .outcome h2 {
    max-width: none;
    margin: 0;
    color: var(--white);
    text-wrap: balance;
  }
  .outcome-lead {
    max-width: 540px;
    margin: 0 0 26px;
    color: #c9c9c9;
    font-size: var(--fs-19);
    line-height: var(--leading-relaxed);
  }
  .outcome-lead strong { color: var(--white); font-size: var(--fs-21); }
  .outcome p {
    max-width: 540px;
    margin: 26px 0 0;
    color: var(--text-on-dark-muted-2);
    font-size: var(--fs-19);
    line-height: var(--leading-relaxed);
  }
  .outcome p.outcome-support {
    max-width: none;
    color: var(--text-on-dark-soft);
  }
  @media (min-width: 800px) {
    .outcome p.outcome-support { white-space: nowrap; }
  }
  .outcome p.outcome-close {
    max-width: none;
    margin-top: 36px;
    color: var(--white);
    font-size: var(--fs-compare-note);
    letter-spacing: var(--tracking-heading);
    line-height: 1.4;
    font-weight: var(--weight-bold);
  }
  /* Draw-on underline under the payoff phrase */
  .ul-draw {
    position: relative;
    color: var(--white);
    white-space: nowrap;
  }
  .ul-draw::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .7s var(--ease-out);
    transition-delay: .45s;
  }
  .outcome p.sr.in .ul-draw::after { transform: scaleX(1); }

  /* ---------- §12 · Adapts-to-your-level ---------- */
  .adapt {
    background: var(--wash);
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .adapt-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 80px;
    align-items: center;
  }
  .adapt-copy .label { margin-bottom: 22px; }
  .adapt-copy h2 { max-width: 560px; }
  /* "improve" underline sweeps in like the hero, once the heading reveals */
  .adapt-copy h2 .hl {
    background-size: 0% 100%;
    transition: background-size .6s var(--ease-standard) .25s;
  }
  .adapt-copy h2.in .hl { background-size: 100% 100%; }
  .adapt-lead {
    margin-top: 24px;
    font-size: var(--fs-22);
    font-weight: var(--weight-semibold);
    letter-spacing: -.015em;
    color: var(--ink);
  }
  .adapt-body {
    margin-top: 14px;
    max-width: 44ch;
    color: var(--text-body-strong);
    font-size: var(--fs-18);
    line-height: var(--leading-loose);
  }
  .adapt-body strong { color: var(--ink); }

  /* The staircase: your level to headed, four gradient bars rising to a climb */
  .stairs {
    position: relative;
    height: 380px;
  }
  /* A ground line the bars sit on, with a soft reflection falling below it. */
  .stairs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: linear-gradient(to right, transparent, rgba(30,80,150,.18) 9%, rgba(30,80,150,.18) 91%, transparent);
    opacity: 0;
    transition: opacity .5s ease .2s;
    z-index: 2;
  }
  .stairs.in::after { opacity: 1; }
  .stair-blocks {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    /* a soft blue reflection below the floor line — like water, dissolving gently */
    -webkit-box-reflect: below 2px linear-gradient(rgba(22,66,138,.16) 0%, rgba(22,66,138,.06) 6%, rgba(22,66,138,.015) 11%, transparent 15%);
  }
  .step {
    flex: 1;
    position: relative;
    opacity: 0;
    transform: translateY(48px);
    transition: opacity .6s ease, transform .85s var(--ease-overshoot);
  }
  /* Vertical gradient, lighter toward the floor, so the bars lift off the line. */
  .step.s1 { height: 28%; transition-delay: .05s; background: linear-gradient(180deg, #a9cdf4 0%, #d6e8fb 100%); border-radius: var(--radius-12) 12px 0 0; }
  .step.s2 { height: 46%; transition-delay: .16s; background: linear-gradient(180deg, #6ea8e9 0%, #a9ccf2 100%); border-radius: var(--radius-12) 12px 0 0; }
  .step.s3 { height: 64%; transition-delay: .27s; background: linear-gradient(180deg, #2f7cd6 0%, #6ba4e8 100%); border-radius: var(--radius-12) 12px 0 0; }
  .step.s4 { height: 82%; transition-delay: .38s; background: linear-gradient(180deg, #0860ca 0%, #3f83e0 100%); border-radius: var(--radius-12) 12px 0 0; }
  .stairs.in .step { opacity: 1; transform: none; }

  /* Faded pillars: the staircase continues off both edges. Half-width so the
     four real pillars keep the room. */
  .ghost-pillar {
    flex: 0.5;
    align-self: flex-end;
    opacity: 0;
    transform: translateY(48px);
    transition: opacity .6s ease, transform .85s var(--ease-overshoot);
  }
  .ghost-before {
    height: 16%;
    background: linear-gradient(165deg, #e0edfc 0%, #c2ddf8 100%);
    border-radius: 11px 11px 0 0;
    transition-delay: 0s;
    -webkit-mask-image: linear-gradient(to left, var(--black) 60%, transparent 100%);
    mask-image: linear-gradient(to left, var(--black) 60%, transparent 100%);
  }
  .stairs.in .ghost-pillar { transform: none; }
  .stairs.in .ghost-before { opacity: .9; }

  /* "Your level today" + legend as one left-aligned block below the first pillar. */
  .pillar-note {
    position: absolute;
    left: calc(22% - 3px);
    top: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease .55s;
  }
  .stairs.in .pillar-note { opacity: 1; }
  .note-dot { width: 6px; height: 6px; border-radius: 50%; background: #3a4a63; }
  .note-stem { width: 0; height: 22px; margin-left: 2.5px; border-left: 1.5px dashed #9db1cd; }
  .note-text {
    margin-top: 13px;
    font-size: var(--fs-15);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-subtle);
    color: #1f3a5f;
    white-space: nowrap;
  }
  .note-legend {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: var(--fs-14);
    color: #777;
  }
  .legend-item { display: flex; align-items: center; }
  .legend-sw {
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 3px;
    margin-right: 7px;
    vertical-align: -1px;
  }
  .legend-sw.coach-sw { background: #2f2f2f; }
  .legend-sw.user-sw { background: var(--white); border: 1.5px solid rgba(20,45,80,.32); }

  /* The two climbers: coach leads, you follow one beat behind */
  .cube {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 24%;
    pointer-events: none;
    opacity: 0;
    will-change: transform;
  }
  .cube.coach {
    background: linear-gradient(145deg, #4a4a4a 0%, #1c1c1c 100%);
  }
  .cube.user {
    background: linear-gradient(145deg, #ffffff 0%, #e9f0f8 100%);
    border: 1.5px solid rgba(20,45,80,.22);
  }

  @media (prefers-reduced-motion: reduce) {
    .step { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ghost-pillar { transform: none !important; transition: none !important; }
    .ghost-before { opacity: .9 !important; }
    .pillar-note { opacity: 1 !important; transition: none !important; }
  }
  @media (max-width: 1040px) {
    .adapt { min-height: auto; }
    .adapt-grid { grid-template-columns: 1fr; gap: 56px; }
    .adapt-copy h2 { max-width: 16ch; }
    .stairs { height: 300px; max-width: 620px; }
    /* the "Your level today" + legend block is absolute and overflows below the
       chart; reserve room so it can't collide with the next section */
    .adapt-visual { padding-bottom: 104px; }
  }
  @media (max-width: 600px) {
    .adapt-lead { font-size: var(--fs-20); }
    .stairs { height: 230px; }
    .step.s1, .step.s2, .step.s3, .step.s4 { border-radius: var(--radius-12) 12px 0 0; }
    .ghost-before { border-radius: var(--radius-12) 12px 0 0; }
    .note-text { font-size: var(--fs-13); }
    .note-stem { height: 18px; }
    .note-legend { font-size: var(--fs-12); }
  }

  /* ---------- §13 · Features ---------- */
  /* Top padding lives on the shell, not the section (was inline in the HTML). */
  .features { padding-top: 0; }
  .features > .shell { padding-top: 96px; }
  .features h2 { max-width: 500px; }
  .feature-grid {
    margin-top: 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .feature {
    min-height: 320px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: var(--border-subtle);
    border-radius: var(--radius-18);
    background: var(--white);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0,0,0,.06);
  }
  .feature-mark {
    color: #b4b4b4;
    font-size: var(--fs-13);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label-compact);
    text-transform: uppercase;
  }
  .feature h3 {
    margin-bottom: 14px;
    font-size: var(--fs-22);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-display);
    white-space: nowrap;
  }
  .feature-cta { margin-top: 44px; }

  /* ---------- §14 · Feature card mockups ---------- */
  .feature-visual {
    background: #FAFAF9;
    border: 1px solid transparent;
    border-radius: var(--radius-14);
    padding: 20px 18px;
    margin: 24px 0 28px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 268px;
    position: relative;
    overflow: hidden;
  }
  .clarity-mock { justify-content: center; }

  /* Clarity mock: draft gets proofread, finding screen opens into choices */
  .clarity-writer {
    position: absolute;
    left: 18px; right: 18px;
    top: 50%;
    transform: translateY(-50%);
    transition:
      opacity .35s ease,
      transform .4s var(--ease-out);
  }
  .clarity-mock.found .clarity-writer,
  .clarity-mock.scene-toast .clarity-writer {
    opacity: 0;
    transform: translateY(calc(-50% - 10px)) scale(.97);
    pointer-events: none;
  }
  .writer-sheet {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    padding: 18px;
    text-align: left;
    box-shadow:
      0 12px 30px rgba(15,23,42,.08),
      0 2px 6px rgba(15,23,42,.04);
  }
  .writer-text {
    margin: 0;
    font-size: var(--fs-14);
    line-height: var(--leading-loose);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-subtle);
    color: var(--ink);
  }
  /* The hidden full sentence reserves the sheet's final height,
     so the sheet never grows while the visible copy types over it. */
  .writer-ghost { visibility: hidden; }
  .writer-live {
    position: absolute;
    top: 18px; left: 18px; right: 18px;
  }
  .writer-caret {
    display: inline-block;
    width: 1.5px;
    height: 1.05em;
    margin-left: 1px;
    background: var(--ink);
    vertical-align: -.15em;
    animation: caret-blink 1.06s steps(1, end) infinite;
  }
  @keyframes caret-blink { 50% { opacity: 0; } }
  .writer-btn {
    position: relative;
    margin-top: 16px;
  }
  .writer-btn .btn-label { transition: opacity .2s ease; }
  .writer-btn.loading .btn-label { opacity: 0; }
  .btn-dots {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .btn-dots span {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--white);
    animation: dot-pulse 1.05s ease-in-out infinite;
  }
  .btn-dots span:nth-child(2) { animation-delay: .16s; }
  .btn-dots span:nth-child(3) { animation-delay: .32s; }
  .writer-btn.loading .btn-dots { opacity: 1; }
  @keyframes dot-pulse {
    0%, 100% { opacity: .35; transform: none; }
    40%      { opacity: 1; transform: translateY(-3px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .writer-caret, .btn-dots span { animation: none; }
  }
  .clarity-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(14px) scale(.97);
    pointer-events: none;
    transition:
      opacity .4s ease,
      transform .45s var(--ease-out);
  }
  /* The draft leaves first; the finding rises in after a beat */
  .clarity-mock.found .clarity-intro {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: .38s;
  }
  .intro-title {
    font-size: var(--fs-21);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin: 0 0 8px;
  }
  .intro-sub {
    font-size: var(--fs-13);
    font-weight: var(--weight-medium);
    color: #6c6c6c;
    margin: 0 0 18px;
  }
  .intro-btn {
    width: 100%;
    background: var(--ink);
    color: var(--white);
    border-radius: var(--radius-12);
    padding: 12px 0;
    text-align: center;
    font-size: var(--fs-14);
    font-weight: var(--weight-semibold);
    transition: transform .25s var(--ease-out);
  }
  .intro-btn.pressing { transform: scale(.97); }
  .clarity-mock.open .clarity-intro {
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
    transition-delay: 0s;
  }

  .clarity-panel {
    position: absolute;
    left: 18px; right: 18px;
    top: 50%;
    transform: translateY(-50%) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity .4s ease,
      transform .45s var(--ease-out);
  }
  /* Dark toast scene, shared by cards */
  .mock-toast {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(.8);
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--ink);
    color: var(--white);
    border-radius: var(--radius-pill);
    padding: 11px 20px 11px 11px;
    font-size: var(--fs-14);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    box-shadow: var(--shadow-floating);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition:
      opacity .35s ease,
      transform .55s var(--ease-spring);
  }
  .toast-check {
    width: 28px; height: 28px;
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .toast-check svg { width: 13px; height: 13px; }
  @keyframes toast-pop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .scene-toast .mock-toast {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: toast-pop .5s var(--ease-out) backwards;
  }
  /* On selection, remove the answer scene immediately; only the toast animates. */
  .clarity-mock.instant-toast .clarity-panel {
    opacity: 0;
    transform: translateY(-50%) scale(.96);
    transition: none !important;
  }
  .clarity-mock.scene-toast .clarity-intro {
    opacity: 0;
    transform: scale(.94);
    transition: opacity .28s ease, transform .3s ease;
  }
  .clarity-mock.scene-toast .clarity-panel {
    opacity: 0;
    transform: translateY(-50%) scale(.96);
    transition: opacity .28s ease, transform .3s ease;
  }
  #progressMock .mock-stat-top,
  #progressMock .mock-spark {
    transition: opacity .4s ease, transform .45s var(--ease-out);
  }
  /* Progress mock: accuracy gauge opens into the accuracy trend */
  .prog-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transition:
      opacity .4s ease,
      transform .45s var(--ease-out);
  }
  .prog-intro .intro-sub { margin-bottom: 10px; }
  .gauge-wrap {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 4px;
  }
  .gauge { width: 172px; height: 95px; overflow: visible; }
  .prog-intro .intro-btn { margin-top: 14px; }
  .gauge path {
    fill: none;
    stroke-width: 13;
    stroke-linecap: round;
  }
  .gauge-track { stroke: #e9e9e6; }
  /* The arc starts hidden; the demo script animates the offset. */
  .gauge-fill { stroke: var(--accent); stroke-dasharray: 267; stroke-dashoffset: 267; }
  .gauge-num {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-15);
    font-weight: var(--weight-semibold);
    color: var(--text-subtle);
    letter-spacing: .02em;
  }
  #progressMock.open .prog-intro {
    opacity: 0;
    transform: scale(.94);
    pointer-events: none;
  }
  .prog-panel {
    position: absolute;
    left: 18px; right: 18px;
    top: 50%;
    transform: translateY(-50%) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity .4s ease,
      transform .45s var(--ease-out);
  }
  #progressMock.open .prog-panel {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 14px;
    margin-top: 8px;
    height: 184px;
    padding-top: 24px;
  }
  .bar-col {
    flex: 1;
    max-width: 72px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .bar-grow {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  /* Static column heights; the script animates the inner .bar's scaleY. */
  .bar-grow.a2 { height: 72%; }
  .bar-grow.b1 { height: 79%; }
  .bar-grow.b2 { height: 85%; }
  .bar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-10) 10px 4px 4px;
    transform: scaleY(0);
    transform-origin: bottom;
    overflow: hidden;
  }
  .bar-tag {
    padding-bottom: 8px;
    font-size: var(--fs-11);
    font-weight: var(--weight-black);
    letter-spacing: .08em;
    color: var(--white);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .bar.grown .bar-tag { opacity: 1; }
  .bar-grow.a2 .bar {
    background: linear-gradient(180deg, #c8c8c5 0%, #b3b3af 100%);
    box-shadow: 0 8px 18px rgba(120,120,120,.18);
  }
  .bar-grow.b1 .bar {
    background: linear-gradient(180deg, #5a8dff 0%, var(--accent) 100%);
    box-shadow: 0 12px 26px rgba(37,99,235,.28);
  }
  .bar-grow.b2 .bar {
    background: linear-gradient(180deg, #2fb069 0%, #1f9d55 100%);
    box-shadow: 0 8px 18px rgba(31,157,85,.22);
  }
  .now-tag {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, 6px) scale(.82);
    margin-bottom: 13px;
    padding: 5px 10px;
    border: 1px solid rgba(31,157,85,.14);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.96);
    color: #16884a;
    box-shadow: 0 5px 14px rgba(31,157,85,.18), 0 1px 3px rgba(0,0,0,.06);
    font-size: var(--fs-10);
    font-weight: var(--weight-black);
    letter-spacing: .04em;
    line-height: var(--leading-none);
    opacity: 0;
  }
  .now-tag::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 8px;
    background: rgba(31,157,85,.4);
  }
  .now-tag::before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(31,157,85,.34);
    border-radius: inherit;
    opacity: 0;
    transform: scale(.75);
  }
  @keyframes now-pop {
    0% { opacity: 0; transform: translate(-50%, 12px) scale(.55); }
    58% { opacity: 1; transform: translate(-50%, -3px) scale(1.14); }
    78% { transform: translate(-50%, 1px) scale(.96); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  }
  @keyframes now-halo {
    0% { opacity: .7; transform: scale(.75); }
    100% { opacity: 0; transform: scale(1.65); }
  }
  @keyframes now-float {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    50% { transform: translate(-50%, -3px) scale(1.035); }
  }
  .bar.grown + .now-tag {
    animation:
      now-pop .68s cubic-bezier(.22,.9,.28,1.25) both,
      now-float 1.9s ease-in-out .76s infinite;
  }
  .bar.grown + .now-tag::before { animation: now-halo 1.8s ease-out .82s infinite; }

  #progressMock.scene-toast .mock-stat-top,
  #progressMock.scene-toast .mock-spark {
    opacity: 0;
    transform: scale(.96);
    transition: opacity .16s ease, transform .2s ease;
  }
  .clarity-mock.open .clarity-panel {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  @keyframes flow-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
  .clarity-mock.open .mock-q      { animation: flow-in .5s var(--ease-out) .12s backwards; }
  .clarity-mock.open #clarityOptA { animation: flow-in .5s var(--ease-out) .32s backwards; }
  .clarity-mock.open #clarityOptB { animation: flow-in .5s var(--ease-out) .52s backwards; }
  .mock-q {
    font-size: var(--fs-22);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    margin: 2px 0 12px;
    color: var(--ink);
  }
  .mock-opt {
    border-radius: 11px;
    padding: 12px 14px;
    font-size: var(--fs-13);
    font-weight: var(--weight-semibold);
    text-align: center;
    border: 1px solid transparent;
    transition:
      background .35s ease,
      color .35s ease,
      border-color .3s ease,
      transform .3s var(--ease-out),
      box-shadow .3s ease;
  }
  .mock-opt + .mock-opt { margin-top: 9px; }
  .mock-opt.neutral {
    background: var(--white);
    border-color: var(--line);
    color: var(--ink);
  }
  .mock-opt.hovering {
    transform: translateY(-2px);
    border-color: #c9c9c9;
    box-shadow: 0 8px 18px rgba(0,0,0,.07);
  }
  .mock-opt.pressing { transform: scale(.97); }
  .mock-opt.faded {
    background: var(--surface-chip);
    color: #9a9a9a;
  }
  .mock-opt.picked {
    background: var(--ink);
    color: var(--white);
  }
  .clarity-mock { position: relative; }
  .mock-cursor {
    position: absolute;
    left: 0; top: 0;
    width: 19px; height: 19px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: transform .75s cubic-bezier(.3,.75,.25,1), opacity .35s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
  }

  /* Vocabulary mock: one word's journey */
  .vocab-mock { position: relative; }
  .vocab-card {
    position: relative;
    background: var(--white);
    border: 1px solid transparent;
    box-shadow: 0 8px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05);
    border-radius: var(--radius-18);
    padding: 34px 18px 30px;
    transition:
      border-color .4s ease,
      background .4s ease,
      box-shadow .4s ease,
      opacity .4s ease,
      transform .45s var(--ease-out);
  }
  /* During the time scene the card steps offstage */
  .vocab-mock.scene-time .vocab-card {
    opacity: 0;
    transform: scale(.94);
  }
  .vocab-pair {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding-right: 12px;
  }
  .pair-item { display: flex; flex-direction: column; min-width: 0; }
  .mock-word-label {
    display: block;
    font-size: var(--fs-10);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label-compact);
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 7px;
    white-space: nowrap;
  }
  .cefr-chip {
    font-size: var(--fs-9);
    font-weight: var(--weight-bold);
    letter-spacing: .06em;
    color: #8a8a8a;
    background: var(--surface-chip);
    border-radius: var(--radius-5);
    padding: 2px 5px;
    line-height: var(--leading-none);
    /* the big word centers optically on its lowercase body, which sits
       ~2px below the line-box center the chip would flex-align to; nudge
       the chip down so it reads centered on the word, not on cap height */
    transform: translateY(2px);
  }
  .cefr-chip.hi {
    color: var(--accent);
    background: #e3f0fd;
  }
  .word-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
  }
  .mock-word-text {
    font-size: var(--fs-21);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    color: var(--ink);
    white-space: nowrap;
  }
  .mock-word-text.suggest { color: var(--accent); }
  .pair-arrow {
    font-size: var(--fs-17);
    color: var(--ink);
    padding-bottom: 2px;
    flex: none;
  }
  .heart-wrap {
    position: absolute;
    top: 15px; right: 15px;
    display: inline-flex;
    flex: none;
  }
  .mock-heart {
    width: 19px; height: 19px;
    flex-shrink: 0;
    fill: transparent;
    stroke: #bdbdbd;
    stroke-width: 2;
    transform-origin: center;
    transition: fill .25s ease, stroke .25s ease;
  }
  .pp {
    position: absolute;
    left: 50%; top: 50%;
    width: 5px; height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    pointer-events: none;
  }
  .pp:nth-of-type(even) { width: 4px; height: 4px; margin: -2px 0 0 -2px; opacity: 0; }
  .pp:nth-of-type(1) { --px: 0px;    --py: -19px; }
  .pp:nth-of-type(2) { --px: 14px;   --py: -14px; }
  .pp:nth-of-type(3) { --px: 19px;   --py: 0px; }
  .pp:nth-of-type(4) { --px: 14px;   --py: 14px; }
  .pp:nth-of-type(5) { --px: 0px;    --py: 19px; }
  .pp:nth-of-type(6) { --px: -14px;  --py: 14px; }
  .pp:nth-of-type(7) { --px: -19px;  --py: 0px; }
  .pp:nth-of-type(8) { --px: -14px;  --py: -14px; }
  @keyframes particle {
    0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(1); }
  }
  .vocab-mock.saved .pp { animation: particle .7s ease-out .08s forwards; }
  @keyframes heart-pop {
    0% { transform: scale(1); }
    30% { transform: scale(1.35); }
    60% { transform: scale(.9); }
    100% { transform: scale(1); }
  }
  .vocab-mock.saved .vocab-card {
    border-color: transparent;
    background: var(--white);
    box-shadow: 0 12px 30px rgba(15,23,42,.13), 0 3px 8px rgba(15,23,42,.06);
  }
  .vocab-mock.saved .mock-heart {
    fill: var(--accent);
    stroke: var(--accent);
    animation: heart-pop .55s var(--ease-spring);
  }
  .vocab-saved-note {
    position: absolute;
    top: -15px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border: 1px solid #cfe5fb;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,.94);
    color: var(--accent);
    box-shadow: 0 4px 12px rgba(37,99,235,.1);
    font-size: var(--fs-9);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px) scale(.94);
    transition: opacity .28s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .vocab-saved-note svg { width: 10px; height: 10px; }
  .vocab-mock.saved .vocab-saved-note { opacity: 1; transform: none; }
  .vocab-mock.scene-time .vocab-saved-note { opacity: 0; transform: translateY(4px) scale(.94); }

  /* Usage builds after the saved word returns in real writing. */
  .vocab-usage {
    position: absolute;
    left: 0; right: 0;
    top: calc(50% + 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #1f9d55;
    font-size: var(--fs-13);
    font-weight: var(--weight-semibold);
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity .4s ease,
      transform .45s var(--ease-out),
      color .4s ease;
  }
  .vocab-mock.used .vocab-usage { opacity: 1; transform: none; }
  .vocab-mock.scene-time .vocab-usage { opacity: 0; transform: translateY(8px); }
  .vocab-check { width: 14px; height: 14px; flex-shrink: 0; }
  @keyframes usage-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.14); }
    100% { transform: scale(1); }
  }
  #vocabUsageText.bump {
    display: inline-block;
    transform-origin: left center;
    animation: usage-bump .45s var(--ease-spring);
  }
  /* Time scene: a lone pill on an empty stage */
  .vocab-time {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(.8);
    background: var(--ink);
    color: var(--white);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    font-size: var(--fs-13);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    box-shadow: var(--shadow-floating);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition:
      opacity .35s ease,
      transform .55s var(--ease-spring);
  }
  .vocab-mock.scene-time .vocab-time {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  /* Progress mock */
  .mock-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .mock-stat-label {
    font-size: var(--fs-12);
    font-weight: var(--weight-semibold);
    color: #8a8a8a;
  }
  #progressMock .mock-stat-label {
    font-size: var(--fs-17);
    font-weight: var(--weight-bold);
    color: var(--ink);
    letter-spacing: var(--tracking-tight);
  }
  .prog-sub {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-12);
    font-weight: var(--weight-medium);
    color: #8a8a8a;
  }
  .mock-stat-num {
    margin-top: 4px;
    font-size: var(--fs-34);
    font-weight: var(--weight-bold);
    letter-spacing: -.04em;
    color: var(--ink);
    line-height: var(--leading-none);
  }
  .mock-stat-num small { font-size: var(--fs-18); font-weight: var(--weight-bold); }
  .mock-badge {
    background: var(--ink);
    color: var(--white);
    border-radius: var(--radius-10);
    padding: 7px 11px;
    font-size: var(--fs-11);
    font-weight: var(--weight-semibold);
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
    transform-origin: center;
    transition:
      transform .55s var(--ease-spring),
      opacity .3s ease;
  }
  .mock-badge.pop-hidden { opacity: 0; transform: scale(.6) translateY(4px); }
  .mock-badge strong {
    display: block;
    font-size: var(--fs-15);
    font-weight: var(--weight-bold);
  }
  .mock-badge .up { color: var(--accent); }
  .mock-spark { margin-top: 14px; width: 100%; height: 58px; display: block; }

  /* ---------- §15 · Privacy ---------- */
  /* Flush with the section above it (was inline in the HTML). */
  .privacy { padding-top: 0; }
  .privacy h2 { max-width: 500px; }
  .privacy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding-top: 96px;
  }
  .privacy-copy h2 { margin-bottom: 34px; }

  /* Supporting visual: a product-style window — your writing sitting on your
     Mac, with a secure-processing footer. Matches the site's other mocks. */
  .privacy-visual { display: flex; flex-direction: column; align-items: center; }
  .pv-caption {
    width: 100%;
    max-width: 512px;
    margin-top: 17px;
    padding: 0 4px;
    font-size: var(--fs-13);
    line-height: 1.5;
    color: var(--muted);
  }
  .pv-win {
    width: 100%;
    max-width: 512px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 34px 80px rgba(0,0,0,.11);
  }
  .pv-win-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    background: var(--wash-2, #fafaf9);
    border-bottom: 1px solid var(--line);
  }
  .pv-dots { display: inline-flex; gap: 8px; }
  .pv-dots i { width: 12px; height: 12px; border-radius: 50%; background: #e2e2df; }
  .pv-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: var(--fs-13); font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-subtle);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    padding: 6px 13px 6px 11px; border-radius: 999px;
  }
  .pv-chip svg { width: 14px; height: 14px; }
  .pv-win-body { padding: 28px; }
  .pv-doc {
    display: flex; align-items: center; gap: 15px;
    padding: 17px 18px; border: 1px solid var(--line); border-radius: 16px;
  }
  .pv-doc-icon {
    flex: none; width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 9%, #fff);
    color: var(--accent);
  }
  .pv-doc-icon svg { width: 24px; height: 24px; }
  .pv-doc-meta { display: flex; flex-direction: column; }
  .pv-doc-title { font-size: var(--fs-17); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--ink); }
  .pv-doc-sub { margin-top: 3px; font-size: var(--fs-14); color: var(--muted); }
  .pv-lines { margin: 20px 4px 0; display: grid; gap: 11px; }
  .pv-lines span { height: 10px; border-radius: 5px; background: #eeeeec; }
  .pv-lines span:nth-child(2) { width: 92%; }
  .pv-lines span.short { width: 56%; }
  .pv-secure {
    display: flex; gap: 13px; align-items: flex-start;
    margin-top: 24px; padding: 17px 18px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  }
  .pv-secure-ic { flex: none; color: var(--accent); margin-top: 1px; }
  .pv-secure-ic svg { width: 22px; height: 22px; }
  .pv-secure p { font-size: var(--fs-15); line-height: 1.5; color: #33536f; }
  .pv-secure b { color: var(--accent); font-weight: var(--weight-bold); }
  .privacy-list { list-style: none; margin-bottom: 30px; }
  .privacy-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: var(--fs-list-large);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-tight);
    padding: 12px 0;
  }
  .privacy-list .check { width: 26px; height: 26px; stroke-width: 1.8; }
  /* Ticks reveal one by one when the block scrolls in: the row slides up,
     then its check-circle sweeps and the tick draws itself */
  .privacy-list li { --d: 0ms; opacity: 0; transform: translateY(10px); }
  .privacy-list li:nth-child(1) { --d: 120ms; }
  .privacy-list li:nth-child(2) { --d: 300ms; }
  .privacy-list li:nth-child(3) { --d: 480ms; }
  .privacy-list .check circle,
  .privacy-list .check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .sr.in .privacy-list li { animation: tickRowIn .5s var(--ease-out) var(--d) both; }
  .sr.in .privacy-list li .check circle { animation: tickDraw .42s ease var(--d) forwards; }
  .sr.in .privacy-list li .check path   { animation: tickDraw .3s ease calc(var(--d) + 240ms) forwards; }
  @keyframes tickRowIn { to { opacity: 1; transform: none; } }
  @keyframes tickDraw  { to { stroke-dashoffset: 0; } }
  .privacy-note {
    color: var(--text-body);
    font-size: var(--fs-17);
    line-height: var(--leading-loose);
    max-width: 46ch;
  }
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
    color: var(--ink);
    font-weight: var(--weight-bold);
    font-size: var(--fs-16);
    text-decoration: none;
    border-bottom: 1.5px solid var(--ink);
    padding-bottom: 2px;
  }
  .text-link .arrow { transition: transform .22s ease; }
  .text-link:hover .arrow { transform: translateX(4px); }

  /* ---------- §16 · Early reactions (testimonials, dark) ---------- */
  .tst { background: var(--ink); color: var(--white); }
  .tst .label { color: var(--text-on-dark-muted-2); }
  .tst h2 { max-width: 560px; color: var(--white); }
  .tst-note { margin: 16px 0 0; max-width: 46ch; color: rgba(255,255,255,.5); font-size: var(--fs-17); line-height: var(--leading-body); }
  /* auto side-scrolling marquee — also grabbable/swipeable (see testimonialMarquee JS) */
  .tst-marquee {
    margin-top: 34px;
    /* vertical padding gives the hover lift + shadow room INSIDE the clip box,
       so they aren't cut off while the scroll stays clipped */
    padding: 22px 0;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scrollbar-width: none;            /* Firefox: keep scrolling, hide the bar */
    -ms-overflow-style: none;         /* old Edge */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 5%, var(--black) 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, var(--black) 5%, var(--black) 95%, transparent);
  }
  .tst-marquee::-webkit-scrollbar { display: none; }   /* Chrome/Safari: hide the bar */
  .tst-marquee.is-dragging { cursor: grabbing; user-select: none; }
  .tst-track {
    display: flex;
    width: max-content;
  }
  .tst-card {
    margin: 0 16px 0 0;
    flex: 0 0 auto;
    width: 360px;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 26px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-20);
    background: var(--surface-dark-card);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .tst-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.24);
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
  }
  .tst-quote-mark {
    font-family: var(--font-serif);
    font-size: var(--fs-44);
    line-height: var(--leading-none);
    height: 26px;
    color: var(--accent-bright);
  }
  .tst-card blockquote {
    margin: 16px 0 0;
    flex: 1;
    font-size: var(--fs-18);
    line-height: 1.52;
    letter-spacing: var(--tracking-subtle);
    color: #f4f4f4;
  }
  .tst-card blockquote em { font-style: italic; }
  .tst-card figcaption {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--fs-13);
    color: rgba(255,255,255,.5);
  }
  .tst-src { font-weight: var(--weight-bold); color: rgba(255,255,255,.78); letter-spacing: .01em; }
  .tst-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.3); }

  /* ---------- §17 · FAQ ---------- */
  .faq-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 90px;
    align-items: start;
  }
  details {
    border-top: 1px solid var(--line);
    padding: 22px 0;
  }
  details:last-of-type { border-bottom: 1px solid var(--line); }
  summary {
    cursor: pointer;
    list-style: none;
    padding-right: 44px;
    position: relative;
    font-size: var(--fs-19);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    transition: color .25s ease;
  }
  /* Font-weight changes reflow wrapped questions, which makes the hover jump. */
  summary:hover,
  details.is-open summary { color: var(--accent); }
  summary::-webkit-details-marker { display: none; }
  summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: -4px;
    font-size: var(--fs-26);
    font-weight: var(--weight-regular);
    transition: transform .3s var(--ease-out);
  }
  details.is-open summary::after { transform: rotate(45deg); }
  .answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .42s var(--ease-standard),
                opacity .3s ease;
    will-change: grid-template-rows;
  }
  details.is-open .answer {
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows .42s var(--ease-standard),
                opacity .34s ease .06s;
  }
  .answer-inner {
    min-height: 0;
    overflow: hidden;
    max-width: 640px;
    padding: 16px 36px 4px 0;
    color: #606060;
    font-size: var(--fs-16);
    line-height: var(--leading-loose);
  }
  /* Collapse the padding in step with the row so it fully closes — no end-snap. */
  .answer-inner { padding-top: 0; padding-bottom: 0; transition: padding .42s var(--ease-standard); }
  details.is-open .answer-inner { padding-top: 16px; padding-bottom: 4px; }
  .answer-inner p:first-child { margin-top: 0; }
  .answer p + p { margin-top: 12px; }
  .answer ul { margin: 12px 0 12px 20px; }
  .answer li { margin-top: 6px; }
  .faq-more { margin-top: 14px !important; }
  .faq-more a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: var(--weight-bold);
    font-size: var(--fs-15);
    text-decoration: none;
    transition: gap .18s ease;
  }
  .faq-more a:hover { gap: 9px; }
  .faq-more a svg { width: 15px; height: 15px; }
  .contact {
    margin-top: 56px;
    color: var(--text-body);
    font-size: var(--fs-16);
    line-height: var(--leading-loose);
  }
  .contact a { color: var(--ink); font-weight: var(--weight-semibold); }

  /* ---------- §18 · Closure (dark) ---------- */
  .close {
    min-height: 60svh;
    /* extra top padding keeps "OWN YOUR ENGLISH" clear of the sticky nav pill */
    padding: 108px 0 72px;
    background: var(--ink);
    color: var(--white);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .close .label { color: var(--text-on-dark-muted); }
  .close h2 { max-width: 20ch; margin: 0 auto 44px; color: var(--white); }
  .close .label { font-size: var(--fs-16); }
  /* "that mistake" gets the Grammarly treatment — red highlight + solid underline */
  .strike-draw {
    position: relative;
    white-space: nowrap;
    padding: 0 .06em;
    border-radius: 4px;
  }
  /* pale red highlight box behind the text */
  .strike-draw::before {
    content: "";
    position: absolute;
    inset: .17em 0 .05em;
    z-index: -1;
    background: rgba(229, 72, 77, .24);
    border-radius: 4px;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .5s cubic-bezier(.4,0,.2,1);
    transition-delay: .5s;
  }
  /* solid straight red underline */
  .strike-draw::after {
    content: "";
    position: absolute;
    left: .06em;
    right: .06em;
    bottom: -.04em;
    height: 3px;
    border-radius: 3px;
    background: var(--error);
    clip-path: inset(0 100% 0 0);
    transition: clip-path .55s cubic-bezier(.4,0,.2,1);
    transition-delay: .72s;
  }
  .close h2.sr.in .strike-draw::before,
  .close h2.sr.in .strike-draw::after { clip-path: inset(0 0 0 0); }

  /* ---------- §19 · Footer ---------- */
  footer {
    position: relative;
    overflow: hidden;
    min-height: 40svh;
    padding: 72px 0 48px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
  }
  footer > .shell {
    display: flex;
    flex-direction: column;
  }
  .footer-ghost {
    display: none;
    position: absolute;
    left: -55px;
    bottom: 20px;
    width: 290px;
    height: auto;
    pointer-events: none;
    will-change: transform;
  }
  .footer-ghost path { fill: #f2f2f0; }
  .footer-inner {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 64px;
    flex-wrap: wrap;
    z-index: 1;
  }
  .footer-brand {
    position: absolute;
    left: -.06em;
    bottom: .08em;
    font-size: var(--fs-footer);
    font-weight: var(--weight-bold);
    letter-spacing: -.05em;
    color: #f3f3f1;
    line-height: .8;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }
  .footer-cols {
    display: flex;
    gap: 110px;
    flex-wrap: wrap;
  }
  .footer-col h4 {
    font-size: var(--fs-19);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 22px;
    color: var(--ink);
  }
  .footer-col a {
    display: block;
    color: #a8a8a8;
    text-decoration: none;
    font-size: var(--fs-17);
    line-height: 2;
    transition: color .18s ease;
  }
  .footer-col a:hover { color: var(--ink); }
  .footer-legal {
    position: relative;
    margin-top: 42px;
    text-align: right;
    color: #c0c0c0;
    font-size: var(--fs-13);
  }

  /* ---------- §20 · Your English profile (progress, promoted to a section) ---------- */
  .profile { background: var(--wash); }
  .profile-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 80px;
    align-items: center;
  }
  .profile h2 { max-width: 560px; }
  @media (min-width: 1041px) {
    .profile-title-line { white-space: nowrap; }
  }
  .profile-visual { width: 100%; max-width: 620px; }
  .profile-privacy {
    margin-top: 28px;
    color: var(--ink-soft);
    font-size: var(--fs-16);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-subtle);
    line-height: var(--leading-body);
  }
  .profile-cta { margin-top: 34px; }
  .profile-cta-mobile { display: none; }
  .pf-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }
  .pf-title { display: block; font-size: var(--fs-19); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
  .pf-sub { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-14); }
  /* CEFR trend row: segmented track showing where your sentences sit
     today (A2 / B1 / B2), with the growing B2 tip in full accent. */
  .pf-cefr { position: relative; padding-bottom: 22px; }
  .pf-cefr-track { display: flex; gap: 3px; height: 10px; margin-top: 10px; }
  .pf-seg { display: block; height: 100%; border-radius: 99px; }
  .pf-seg-a2 { width: 20%; background: #dcecff; }
  .pf-seg-b1 { width: 70%; background: #8fc0f2; }
  .pf-seg-b2 { width: 10%; background: var(--accent); }
  .pf-tile-label { font-size: var(--fs-13); font-weight: var(--weight-bold); letter-spacing: var(--tracking-subtle); color: var(--ink); }
  .pf-tile-cefr { padding-top: 34px; padding-bottom: 40px; }
  .pf-cefr-kicker { display: block; margin-bottom: 13px; }
  .pf-tile-cefr .pf-cefr { padding-bottom: 0; }
  .pf-cefr-showcase {
    gap: 0;
    height: 118px;
    margin-top: 0;
    overflow: hidden;
    border-radius: 0;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.3s var(--ease-standard);
  }
  .pf-cefr-showcase .pf-seg {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 14px 15px;
    color: var(--white);
    font-size: var(--fs-13);
    font-style: normal;
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-subtle);
    white-space: nowrap;
    border-radius: 0;
  }
  .pf-cefr-showcase .pf-seg span {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .pf-cefr-showcase .pf-seg-a2 { background: #d6e8fb; color: #315d8b; }
  .pf-cefr-showcase .pf-seg-b1 { background: #89b9ea; }
  .pf-cefr-showcase .pf-seg-b2 { background: #086bd5; padding-left: 7px; padding-right: 9px; }
  .pf-tile-cefr.in .pf-cefr-showcase { clip-path: inset(0 0 0 0); }
  .pf-tile-cefr.in .pf-seg span { opacity: 1; transform: none; transition-delay: 1420ms; }
  .pf-tile-cefr.in .pf-seg-b1 span { transition-delay: 1520ms; }
  .pf-tile-cefr.in .pf-seg-b2 span { transition-delay: 1620ms; }
  @media (max-width: 600px) {
    .pf-tile-label { font-size: var(--fs-12); }
    .pf-cefr-showcase { height: 94px; border-radius: 0; }
    .pf-cefr-showcase .pf-seg { padding: 11px 9px; font-size: var(--fs-11); }
  }
  @media (max-width: 1040px) {
    .profile-grid { grid-template-columns: 1fr; gap: 44px; }
    .profile-cta-desktop { display: none; }
    .profile-cta-mobile { display: block; }
    .profile-cta-mobile { display: inline-flex; width: 100%; max-width: 465px; margin-top: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pf-cefr-showcase { clip-path: none; transition: none; }
    .pf-cefr-showcase .pf-seg span { opacity: 1; transform: none; transition: none; }
  }
  /* Hybrid profile card: app-style header + one hero stat + CEFR trend +
     today's-focus footer, in a single surface. */
  .pf-hybrid {
    background: var(--white);
    border: var(--border-subtle);
    border-radius: var(--radius-24);
    padding: 40px 34px 34px;
    width: 100%;
    max-width: 620px;
    box-shadow: 0 24px 60px rgba(15,23,42,.07), 0 4px 14px rgba(15,23,42,.03);
  }
  .pf-hybrid .pf-title { font-size: var(--fs-21); }
  .pf-hybrid .pf-sub { font-size: var(--fs-15); }
  /* minmax(0,1fr) lets the tiles shrink below their text's min-content width
     on narrow phones; plain 1fr can't, and pushed the card past the shell. */
  .pf-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 30px; }
  .pf-stat {
    border: var(--border-subtle);
    border-radius: 16px;
    padding: 20px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .pf-stat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .pf-stat .pf-tile-label { font-size: var(--fs-13); }
  .pf-stat-delta { font-size: var(--fs-13); font-weight: var(--weight-bold); color: var(--accent); white-space: nowrap; }
  .pf-stat-big { font-size: var(--fs-46); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); line-height: var(--leading-none); }
  .pf-stat-sub { margin-top: auto; font-size: var(--fs-13); color: var(--muted); }
  .pf-dots { display: grid; grid-template-columns: repeat(5, 15px); gap: 10px; }
  .pf-dot { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); }
  .pf-dot.off { background: #dcecff; }
  .pf-hybrid .pf-tile-cefr { padding: 30px 0 8px; }
  .pf-hybrid .pf-cefr {
    margin-top: 0;
    overflow: hidden;
    border-radius: var(--radius-14);
    background: #eef1f4;
  }
  .pf-hybrid .pf-cefr-showcase { height: 112px; border-radius: var(--radius-14); }
  .pf-hybrid.profile-animating .pf-vocab-delta,
  .pf-hybrid.profile-animating .pf-accuracy-delta {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .28s ease, transform .28s ease;
  }
  .pf-hybrid.profile-animating.vocab-done .pf-vocab-delta,
  .pf-hybrid.profile-animating.accuracy-done .pf-accuracy-delta {
    opacity: 1;
    transform: none;
  }
  .pf-hybrid.profile-animating .pf-dot { transition: background-color .3s ease, transform .3s var(--ease-smooth); }
  .pf-hybrid.profile-animating .pf-dot.dot-added { animation: pfDotFill .42s var(--ease-smooth) both; }
  @keyframes pfDotFill {
    0% { transform: scale(.55); }
    65% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }
  .pf-hybrid.profile-animating .pf-cefr-showcase { clip-path: inset(0 100% 0 0); transition: none; }
  .pf-hybrid.profile-animating .pf-cefr-showcase .pf-seg span {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .pf-hybrid.profile-animating.cefr-go .pf-cefr-showcase {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.05s var(--ease-standard);
  }
  .pf-hybrid.profile-animating.cefr-go .pf-cefr-showcase .pf-seg span {
    opacity: 1;
    transform: none;
    transition-delay: 1.05s;
  }
  .pf-hybrid.profile-animating.cefr-go .pf-cefr-showcase .pf-seg-b1 span { transition-delay: 1.14s; }
  .pf-hybrid.profile-animating.cefr-go .pf-cefr-showcase .pf-seg-b2 span { transition-delay: 1.23s; }
  .pf-hybrid.profile-animating.b2-settle .pf-seg-b2 { animation: pfB2Settle .55s ease-out both; }
  @keyframes pfB2Settle {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    45% { filter: brightness(1.12); transform: scale(1.025); }
  }
  .pf-arrow-window {
    display: inline-block;
    width: .9em;
    height: 1em;
    overflow: hidden;
    vertical-align: -.12em;
  }
  .pf-arrow-stack { display: flex; flex-direction: column; }
  .pf-arrow-glyph { display: block; height: 1em; line-height: 1em; font-style: normal; }
  .pf-hybrid.idle-arrow .pf-arrow-stack { animation: pfArrowRoll .58s var(--ease-standard) both; }
  @keyframes pfArrowRoll { to { transform: translateY(-1em); } }
  .pf-hybrid.idle-dots .pf-dot:nth-child(1),
  .pf-hybrid.idle-dots .pf-dot:nth-child(4),
  .pf-hybrid.idle-dots .pf-dot:nth-child(8) { animation: pfDotIdle .62s ease-in-out both; }
  .pf-hybrid.idle-dots .pf-dot:nth-child(4) { animation-delay: .14s; }
  .pf-hybrid.idle-dots .pf-dot:nth-child(8) { animation-delay: .28s; }
  @keyframes pfDotIdle {
    0%, 100% { background-color: var(--accent); }
    50% { background-color: #69aef2; }
  }
  .pf-hybrid .pf-seg-b2 { transform-origin: 100% 50%; }
  .pf-hybrid.idle-b2 .pf-seg-b2 { animation: pfB2Settle .62s ease-out both; }
  @media (max-width: 600px) {
    .pf-hybrid { border-radius: var(--radius-20); padding: 22px 20px 18px; }
    .pf-hybrid .pf-title { font-size: var(--fs-19); }
    .pf-hybrid .pf-sub { font-size: var(--fs-14); }
    .pf-stats { gap: 10px; margin-top: 20px; }
    .pf-stat { padding: 14px 14px 12px; border-radius: var(--radius-14); gap: 12px; }
    .pf-stat .pf-tile-label, .pf-stat-delta { font-size: var(--fs-11); }
    .pf-stat-big { font-size: var(--fs-30); }
    .pf-stat-sub { font-size: var(--fs-11); }
    .pf-dots { grid-template-columns: repeat(5, 11px); gap: 7px; }
    .pf-dot { width: 11px; height: 11px; }
    .pf-hybrid .pf-tile-cefr { padding-top: 22px; }
    .pf-hybrid .pf-cefr { border-radius: var(--radius-12); }
    .pf-hybrid .pf-cefr-showcase { height: 74px; border-radius: var(--radius-12); }
  }

  /* ---------- §21 · Payoff moments (inside the dark What-changes section) ---------- */
  .out-moments {
    margin: 64px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 56px;
  }
  .out-mom {
    padding: 26px 0 0;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .out-mom h3 {
    margin: 0 0 10px;
    font-size: var(--fs-21);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-bold);
    color: var(--white);
  }
  .outcome .out-mom p {
    max-width: none;
    margin: 0;
    color: rgba(255,255,255,.6);
    font-size: var(--fs-16);
    line-height: var(--leading-relaxed);
  }
  .outcome p.out-kick { margin-top: 56px; }
  @media (max-width: 800px) {
    .out-moments { grid-template-columns: 1fr; gap: 0; }
    .out-mom { padding: 22px 0 22px; }
    .outcome p.out-kick { margin-top: 40px; }
  }

  /* ---------- §22 · Pricing ---------- */
  .pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 64px;
    align-items: center;
    padding-top: 96px;
  }
  /* Left column grouped so it can be vertically centred against the taller card. */
  .pricing-left { display: flex; flex-direction: column; gap: 34px; max-width: 540px; }
  .pricing { background: var(--wash); }
  .pricing h2 { max-width: 560px; }
  .pricing-title-line { display: block; }
  .pricing-title-nowrap { white-space: nowrap; }
  .price-card-wrap {
    width: 100%;
    max-width: 430px;
    justify-self: center;
  }
  .price-region-note {
    margin-top: 14px;
    padding: 0 4px;
    font-size: var(--fs-13);
    line-height: 1.5;
    color: var(--muted);
    text-align: center;
  }
  .price-card {
    width: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
      #fff;
    border: var(--border-subtle);
    border-radius: var(--radius-24);
    padding: 30px 30px 28px;
  }
  .price-card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .price-plan-label { color: var(--ink); font-size: var(--fs-21); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
  .price-save-badge {
    border-radius: var(--radius-pill);
    padding: 5px 9px;
    background: color-mix(in srgb, var(--accent) 10%, #fff);
    color: var(--accent);
    font-size: var(--fs-10);
    font-weight: var(--weight-black);
    letter-spacing: .06em;
    line-height: var(--leading-none);
    white-space: nowrap;
    text-transform: uppercase;
  }
  .price-badge {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    background: color-mix(in srgb, var(--accent) 7%, #fff);
    color: var(--accent);
    border-radius: var(--radius-pill);
    padding: 7px 14px;
    font-size: var(--fs-12);
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .price-badge-icon { width: 15px; height: 15px; flex: 0 0 auto; }
  .price-card-wrap.in .price-badge { animation: priceBadgeIn .55s cubic-bezier(.34, 1.56, .64, 1) .7s both; }
  @keyframes priceBadgeIn {
    0% { opacity: 0; transform: scale(.7); }
    60% { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
  }
  .price-badge-text { position: relative; }
  .price-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%);
    transform: translateX(-100%);
  }
  .price-card-wrap.in .price-badge::after { animation: priceBadgeSheen 1.8s linear 1.4s infinite; }
  @keyframes priceBadgeSheen {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
  }
  .price-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px 20px;
    text-align: center;
  }
  .price-hero-line {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 7px;
    margin-top: 0;
  }
  .price-currency {
    align-self: flex-start;
    margin-top: 8px;
    font-size: var(--fs-32);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
  }
  .price-main {
    display: inline-block;
    font-size: var(--fs-price);
    font-weight: var(--weight-bold);
    letter-spacing: -.055em;
    line-height: .92;
  }
  .price-card-wrap.in .price-main { animation: priceNumberIn .55s var(--ease-smooth) .18s both; }
  @keyframes priceNumberIn {
    from { opacity: 0; filter: blur(3px); transform: translateY(9px) scale(.985); }
    to { opacity: 1; filter: blur(0); transform: none; }
  }
  .price-unit { color: var(--muted); font-size: var(--fs-16); font-weight: var(--weight-semibold); }
  .price-equivalent { margin-top: 20px; color: var(--text-body-strong); font-size: var(--fs-15); line-height: 1.45; }
  .price-monthly {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-top: 1px solid var(--line);
    padding: 28px 4px 22px;
  }
  .price-monthly-copy { display: flex; flex-direction: column; gap: 4px; }
  .price-monthly-label { color: var(--ink); font-size: var(--fs-15); font-weight: var(--weight-bold); }
  .price-monthly-trial { color: var(--muted); font-size: var(--fs-12); font-weight: var(--weight-semibold); }
  .price-monthly-price { color: var(--ink); font-size: var(--fs-26); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); white-space: nowrap; }
  .price-monthly-price span { color: var(--muted); font-size: var(--fs-13); font-weight: var(--weight-semibold); letter-spacing: 0; }
  .price-list {
    list-style: none;
    margin: 0;
    max-width: 540px;
  }
  .price-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 0;
    color: var(--ink);
    font-size: var(--fs-19);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: 1.4;
  }
  .price-list .check { width: 26px; height: 26px; flex: 0 0 26px; stroke-width: 1.8; margin-top: 2px; }
  .price-item-title {
    display: block;
    color: var(--ink);
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
  }
  .price-item-sub { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-14); font-weight: var(--weight-medium); }
  .pricing-trial {
    max-width: 34ch;
    margin: 0;
    color: var(--text-body);
    font-size: var(--fs-17);
    line-height: var(--leading-loose);
  }
  .pricing-trial-lead { color: var(--ink); font-weight: var(--weight-bold); font-size: var(--fs-20); }
  .pricing-trial-sub { display: block; margin-top: 6px; }

  .price-list li { --d: 0ms; opacity: 0; transform: translateY(10px); }
  .price-list li:nth-child(1) { --d: 120ms; }
  .price-list li:nth-child(2) { --d: 300ms; }
  .price-list li:nth-child(3) { --d: 480ms; }
  .price-list li:nth-child(4) { --d: 660ms; }
  .price-list li:nth-child(5) { --d: 840ms; }
  .price-list .check circle,
  .price-list .check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .price-list.sr.in li { animation: tickRowIn .5s var(--ease-out) var(--d) both; }
  .price-list.sr.in li .check circle { animation: tickDraw .42s ease var(--d) forwards; }
  .price-list.sr.in li .check path { animation: tickDraw .3s ease calc(var(--d) + 240ms) forwards; }
  .btn-primary.big.price-cta { width: 100%; margin-top: 22px; padding: 13px 24px; font-size: var(--fs-16); }
  @media (max-width: 1040px) {
    .pricing-grid {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 38px;
      padding-top: 72px;
    }
    .pricing-left { max-width: none; gap: 30px; }
    .price-card-wrap { max-width: 430px; }
    .pricing-grid .price-list { margin: 0; max-width: 620px; }
    .price-card { padding: 26px 22px 24px; }
    .price-display { padding: 28px 8px 18px; }
  }
  @media (max-width: 600px) {
    .price-card { min-height: 480px; }
    .price-plan-label { font-size: var(--fs-19); }
    .price-main { font-size: var(--fs-price-mobile); }
  }

  /* ---------- §23 · "Example data" tags on illustrative visuals ---------- */
  .ex-tag {
    display: inline-block;
    font-size: var(--fs-10);
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9a9a9a;
    background: var(--surface-chip);
    border-radius: var(--radius-5);
    padding: 3.5px 7px;
    line-height: var(--leading-none);
    white-space: nowrap;
  }
  .ex-abs {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 4;
  }

  /* ---------- §24 · Visible keyboard focus ---------- */
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  .btn:focus-visible { outline-offset: 4px; }
  .hope a:focus-visible, .outcome a:focus-visible, .tst a:focus-visible,
  .close a:focus-visible, .hope button:focus-visible, .outcome button:focus-visible {
    outline-color: #7ab5f5;
  }

  /* ---------- §25 · Responsive overrides ---------- */
  /* Phones and tablets use slightly tighter bottom spacing. */
  @media (max-width: 1366px) {
    .hero { padding-bottom: 76px; }
  }
  @media (min-width: 1041px) and (max-width: 1366px) {
    .how-layout {
      grid-template-columns: 1.08fr .92fr;
      gap: 48px;
    }
  }
  @media (min-width: 1367px) {
    .hero > div:first-child { transform: translateY(48px); }
    .hero .compare-col { margin-top: -10px; }
  }
  @media (max-width: 1040px) {
    .shell { width: calc(100% - var(--page-gutter-tablet)); }
    .hero-copy.lead { white-space: normal; font-size: var(--fs-20); }
    .trust { justify-content: center; }
    .nav-link { display: none; }
    /* Menu lives behind the hamburger; the scroll-reveal Download pill
       slides in beside it once the hero CTA scrolls out of view */
    .nav-right { margin-left: auto; padding-right: 0; }
    /* Links are hidden at this width, so the pill simply fades in place. */
    .nav-download { height: 38px; padding-left: 16px; padding-right: 16px; margin-left: 0; }
    .nav-toggle { display: flex; margin-left: 14px; }
    section { padding: var(--section-space-viewport) 0; }
    .how-layout { grid-template-columns: 1fr; gap: 0; }
    /* let the left block's children flow into the grid so the keyboard
       can sit between the heading and the points */
    .how-left { display: contents; }
    .how-right { margin: 32px 0 0; }        /* keyboard: after heading */
    .how-points { order: 1; margin-top: 40px; }   /* points: after keyboard */
    #how { overflow: visible; }
    .kbd-wrap { width: 100%; max-width: none; }
    .feature-grid { grid-template-columns: 1fr; }
    .tst-card { width: 300px; padding: 26px 26px 22px; }
    /* min-width:0 lets the single 1fr track shrink to the shell width —
       without it a mock's min-content blows the card out and the page
       scrolls sideways on mobile */
    .feature { min-height: auto; min-width: 0; }
    .feature h3 { white-space: normal; font-size: var(--fs-25); }
    .privacy-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 72px; }
    .faq-grid { grid-template-columns: 1fr; gap: 44px; }
    /* footer: compact — left-align columns; keep the corner watermark in its
       base style (it scales down via clamp/vw, so it stays consistent everywhere) */
    footer { padding: 64px 0 48px; }
    .footer-ghost { width: 250px; left: -55px; bottom: -24px; }
    .footer-inner { justify-content: flex-start; gap: 64px; }
  }
  @media (max-width: 600px) {
    .shell { width: calc(100% - var(--page-gutter-mobile)); }
    h1 { font-size: var(--fs-hero-mobile); }
    /* hero compare: slightly smaller message text and a tighter bubble,
       so the highlighted phrases wrap whole instead of breaking mid-phrase */
    .cmp-text { font-size: var(--fs-18); }
    .cmp-after { padding: 22px 23px 21px; }
    .cmp-after .cmp-text { font-size: var(--fs-19); }
    /* Label + level chip stay on one line now that the chip is just "B1"/"B2" */
    .cmp-tag { font-size: var(--fs-12); letter-spacing: .1em; }
    .cmp-tag-label { white-space: nowrap; }
    /* Vocabulary mock: on phones the one-line pair is always cramped —
       stack it instead: you-wrote, a down arrow, then the suggestion. */
    .vocab-card { padding: 26px 16px 24px; }
    .vocab-pair { flex-direction: column; align-items: center; gap: 9px; padding-right: 0; }
    .pair-item { align-items: center; }
    .mock-word-label { margin-bottom: 4px; }
    .mock-word-text { font-size: var(--fs-19); }
    .pair-arrow { transform: rotate(90deg); font-size: var(--fs-15); padding-bottom: 0; line-height: var(--leading-none); }
    /* The stacked card is taller than the desktop one, so the pinned
       "Used n times" line lands on the card's bottom edge — let it flow
       below the card instead of hanging at a fixed offset. */
    .vocab-usage { position: static; margin-top: 16px; }
    h1 { letter-spacing: var(--tracking-display); }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
    section { padding: var(--section-space-mobile) 0; }
    .outcome-lead { margin-bottom: 20px; font-size: var(--fs-17); line-height: 1.45; }
    .outcome-lead strong { font-size: var(--fs-18); }
    .price-list { margin: 28px 0; }
    .price-list li { padding: 12px 0; }
    .close { padding: 110px 0; }
    footer { padding: 56px 0 44px; }
    .footer-ghost { width: 200px; left: -45px; bottom: -20px; }
    .footer-legal { text-align: left; }
    /* smaller corner watermark: sized to fit inside the footer's bottom
       padding so it can never ride up into the link columns */
    .footer-brand { font-size: var(--fs-footer-mobile); }
    .footer-cols { flex-direction: column; gap: 34px; }   /* single-column stack, left-aligned */
  }
  @media (max-width: 440px) {
    h2 { max-width: 12ch; }
  }

  /* Below 360px the hero compare card's min-content width (355px) no longer
     fits the viewport; size its column to the shell so the page never
     side-scrolls, and tighten the scene tag to fit the narrower card.
     Wider phones keep the current edge-to-edge card. */
  @media (max-width: 359px) {
    .hero .compare-col { width: 100%; min-width: 0; }
    .compare { max-width: 100%; }
    .cmp-tag { font-size: var(--fs-11); letter-spacing: .08em; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { animation: none; opacity: 1; transform: none; }
    .sr, .sr-scale, .sr-card { opacity: 1; transform: none; transition: none; }
    .price-main { animation: none !important; }
    .price-badge { animation: none !important; }
    .price-badge::after { animation: none !important; }
    .ul-draw::after { transition: none; transform: scaleX(1); }
    .hope-em .hl, .outcome-close .hl { background-size: 100% 2px !important; transition: none !important; }
    .hs-live i { animation: none; }
    .strike-draw::before, .strike-draw::after { transition: none; clip-path: inset(0 0 0 0); }
    .privacy-list li { opacity: 1; transform: none; animation: none; }
    .privacy-list .check circle, .privacy-list .check path { stroke-dashoffset: 0; animation: none; }
    .price-list li { opacity: 1; transform: none; animation: none; }
    .price-list .check circle, .price-list .check path { stroke-dashoffset: 0; animation: none; }
    .tst-track { animation: none; }
    .tst-marquee { overflow-x: auto; }
    .kb26 .kb26-key, .kb26 .kb26-key.kb26-app { animation: none; opacity: 1; transform: none; }
    .kb26-key, .kb26-key .kb26-ch, .kb26-key.kb26-app svg { transition: none; }
    .kb26-toast, .kb26-heart { animation: none !important; opacity: 1; }
    .kb26-toast { transform: translate3d(-50%, 0, 0); }
    .kb26-heart { transform: translate3d(-50%, -4px, 0); }
    .kb26-toast .kb26-toast-inner, .kb26-heart svg { animation: none !important; transform: none; }
    .answer, .answer-inner, .navbar { transition: none !important; }
    .cmp-tag, .cmp-text, .cmp-caption, .cmp-note, .cmp-text .w, .cmp-before, .cmp-after, .cmp-io {
      opacity: 1 !important; transform: none !important; transition: none !important;
    }
    .cmp-text mark { background-size: 100% 100% !important; transition: none !important; }
    h1.lyric .hl { background-size: 100% 100% !important; transition: none !important; }
    .adapt-copy h2 .hl { background-size: 100% 100% !important; transition: none !important; }
    .write-app { opacity: 1 !important; transform: none !important; transition: none !important; }
    .bar { transform: scaleY(1) !important; }
    .bar-tag { opacity: 1 !important; }
    .now-tag { opacity: 1 !important; transform: translate(-50%, 0) scale(1) !important; }
    #progressMock .prog-intro { display: none; }
    #progressMock .prog-panel { position: static; opacity: 1; transform: none; pointer-events: auto; }
    .vocab-mock.saved .mock-heart, .vocab-mock.saved .pp, #vocabUsageText.bump { animation: none !important; }
    .footer-ghost { transform: none !important; }
  }

  /* ---------- §26 · Phone hero: message first, proof on the next screen ---------- */
  /* Home hero only (other pages reuse .hero with a different inner structure).
     The sticky nav takes 94px of flow above the hero, so filling the rest of the
     small viewport centres the message between the nav and the fold and starts
     the compare card on the following screen. svh keeps this true while Safari's
     toolbars are expanded, which is the tightest case.
     Capped at 743px so every phone gets this, while every iPad — the smallest
     being the mini at 744pt wide — keeps the card peeking inside the hero. */
  @media (max-width: 743px) {
    .hero.hero-home > div:first-child {
      min-height: calc(100svh - 94px);
      /* Bottom padding equal to the nav's flow height pulls the centred message
         back up, so it sits on the true middle of the screen rather than the
         middle of the space under the nav. */
      padding-top: 0;
      padding-bottom: 94px;
    }
    .hero.hero-home .compare-col { margin-top: 28px; }
    /* Break the lead at the sentence, so the positioning line always lands
       whole on its own line instead of wrapping mid-phrase. */
    .hero.hero-home .hero-copy.lead strong { display: block; }
  }


  /* ---------- §28 · Trial lines: one look for both plans ---------- */
  /* The two trial lines must read as a matched pair, so colour and weight are
     declared once for both. Size is deliberately left out — each may size to
     its own context. */
  .price-annual-trial,
  .price-monthly-trial {
    color: var(--muted);
    font-weight: var(--weight-semibold);
  }

  /* ---------- §29 · Annual trial line placement ---------- */
  /* Home pricing card only. Matches .price-monthly-trial so the two plans read
     as a parallel pair (14-day vs 3-day) instead of competing with the savings
     badge above the price. */
  .price-annual-trial {
    margin-top: 10px;
    color: var(--muted);
    font-size: var(--fs-12);
    font-weight: var(--weight-semibold);
  }

  /* ---------- §30 · Emphasis lines match the headline weight ---------- */
  /* Home only (.hope-setup / .hope-em / .outcome-close appear on no other page).
     These closing lines were 700 while the H2 above them is 600, which read as a
     heavier line under a lighter one. Aligning them to --weight-display keeps one
     display weight across the page; size still separates the two tiers. */
  .hope-setup,
  .hope-em,
  .outcome p.outcome-close {
    font-weight: var(--weight-display);
  }

  /* ---------- §31 · Display type stops growing past the 1280 proportions ---------- */
  /* Home only, per the home-page-only brief: promote by moving these three lines
     into theme.css :root if the rest of the site should match.
     The desktop display tokens are clamp(min, vw, max) and every ceiling binds
     somewhere between 1333px and 1462px, so screens wider than a 1280 laptop
     render the type at its maximum instead of in proportion. Each ceiling below
     is the size that token already renders at 1280px, which caps the growth
     without changing anything at 1280 or below — body copy is untouched. */
  body.home {
    --fs-hero: clamp(42px, 5vw, 64px);          /* was 72px */
    --fs-h2: clamp(34px, 3.9vw, 48px);          /* was 56px */
    --fs-compare-note: clamp(26px, 3vw, 32px);  /* was 40px */
    --fs-list-large: clamp(24px, 2.4vw, 31px);  /* was 32px */
    --fs-price: clamp(58px, 5.2vw, 67px);       /* was 70px */
    --fs-footer: clamp(88px, 13vw, 166px);      /* was 190px */
  }

  /* ---------- §32 · Nav download reveal under reduced motion ---------- */
  /* The slide is exactly the motion these users opt out of: links snap to
     place, only the fade remains. Both pill states listed — .show's own
     transition would otherwise out-rank a bare override here. */
  @media (prefers-reduced-motion: reduce) {
    .nav-download,
    .nav-download.show { transition: opacity .2s ease; }
    .nav-link, .nav-right:has(.nav-download.show) .nav-link { transition: none; }
  }