@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-500-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
    @font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
    @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
    @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
    @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
    @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
    @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
    @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
    @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
    @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
    @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-800-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
    :root {
      --accent: #e53935;
      --bg: #0d0d0d;
      --surface: #161616;
      --border: rgba(255, 255, 255, 0.10);
      --text: #f4f4f5;
      --text-sec: rgba(244, 244, 245, 0.62);
      --font-display: "Barlow Condensed", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      --font-body: "Barlow", "Noto Sans", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      --wrap: 1120px;
    }

    * { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.5;
      overflow-x: clip;
    }
    a { color: inherit; }
    img, svg { max-width: 100%; }

    .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-block;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 15px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-decoration: none;
      background: var(--accent);
      color: #fff;
      padding: 13px 20px;
      border-radius: 10px;
      line-height: 1;
      white-space: nowrap;
      transition: filter 0.15s ease, transform 0.15s ease;
    }
    .btn:hover { filter: brightness(1.08); }
    .btn:active { transform: translateY(1px); }
    .btn--sm { padding: 10px 14px; font-size: 13px; }

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

    /* ---------- Nav ---------- */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(13, 13, 13, 0.82);
      backdrop-filter: saturate(140%) blur(10px);
      border-bottom: 1px solid var(--border);
    }
    .nav__inner {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      padding: 12px 20px;
      max-width: var(--wrap);
      margin: 0 auto;
    }
    .logo {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 24px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--text);
      margin-right: auto;
    }
    .logo .accent { color: var(--accent); }
    .nav__actions { display: flex; align-items: center; gap: 12px; }
    .signin {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-sec);
      text-decoration: none;
    }
    .signin:hover { color: var(--text); }
    .navlink { font-size: 14px; font-weight: 600; color: var(--text-sec); text-decoration: none; }
    .navlink:hover { color: var(--text); }

    /* ---------- Moves Packs homepage block (S3, behind PACKS_LIVE) ---------- */
    .packshome { border-top: 3px solid var(--accent); }
    .packshome__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 6vw, 44px);
      letter-spacing: -0.01em;
      line-height: 1.05;
      margin: 0 0 14px;
    }
    .packshome__body {
      font-size: 17px;
      line-height: 1.55;
      color: var(--text-sec);
      max-width: 48ch;
      margin: 0 0 30px;
    }

    /* ---------- Language selector ---------- */
    .lang-select { position: relative; }
    .lang-select > summary {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      list-style: none;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 10px;
      user-select: none;
    }
    .lang-select > summary::-webkit-details-marker { display: none; }
    .lang-select > summary svg { flex: none; }
    .lang-select ul {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      margin: 0;
      padding: 6px;
      list-style: none;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
      min-width: 168px;
      max-height: min(70vh, 420px);
      overflow-y: auto;
      z-index: 60;
    }
    .lang-select ul a {
      display: block;
      padding: 9px 12px;
      border-radius: 8px;
      font-size: 15px;
      text-decoration: none;
      color: var(--text);
    }
    .lang-select ul a:hover { background: rgba(255, 255, 255, 0.06); }
    .lang-select ul a[aria-current="true"] { color: var(--accent); font-weight: 600; }

    /* ---------- Section rhythm ---------- */
    section { padding: 84px 0; }
    .eyebrow {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 20px;
    }

    /* ---------- Hero ---------- */
    .hero { padding-top: 56px; }
    .hero__grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: center;
    }
    .hero__headline {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(38px, 8.4vw, 60px);
      line-height: 1.0;
      letter-spacing: -0.02em;
      margin: 0 0 22px;
    }
    .hero__subline {
      font-size: clamp(17px, 2.4vw, 19px);
      line-height: 1.5;
      color: var(--text-sec);
      max-width: 40ch;
      margin: 0 0 30px;
    }
    .hero__cta-row { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
    .microline {
      font-size: 13px;
      color: var(--text-sec);
      letter-spacing: 0.01em;
    }
    /* Half-step down, for a microline stacked under another one so the two
       don't read as one grey wall. Steps the size and colour rather than
       opacity: .reveal animates opacity to 1 with fill-mode both, which wins
       over a declared opacity wherever animation-timeline: view() is live. */
    .microline--fine { font-size: 12.5px; color: rgba(244, 244, 245, 0.5); }
    .hero__media { display: flex; justify-content: center; }

    /* ---------- Canva mockups (transparent, self-framed) ---------- */
    .mb-mock { display: block; height: calc(min(280px, 74vw) * 19.5 / 9); width: auto; max-width: none; margin: 0 auto; }
    /* The mockup PNG carries a drop shadow, so it's wider than its column. Keep
       the copy above the overlap; let the media column overflow without clipping. */
    .hero__copy, .mirror__copy, .chapter__copy { position: relative; z-index: 2; }
    .hero__media, .mirror__media, .chapter__media { position: relative; z-index: 1; overflow: visible; }
    /* The hero mockup is the only thing that decides the hero's height (607px vs
       a 388px copy column), so on its own it pushes the fold past a laptop
       viewport — at 100% zoom browser chrome leaves ~600-640px, which is why the
       page only ever "fit" at 90%. Cap it against the height actually available
       (nav 64 + hero padding 56/84 ≈ 210). Taller viewports keep the full size,
       and a browser without svh just falls back to the base height above. */
    @media (min-width: 821px) {
      .hero .mb-mock { height: min(calc(min(280px, 74vw) * 19.5 / 9), calc(100svh - 210px)); }
    }

    /* ---------- Problem ---------- */
    .problem__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 6vw, 44px);
      letter-spacing: -0.01em;
      line-height: 1.05;
      margin: 0 0 44px;
    }
    .truths { display: grid; gap: 32px; max-width: 24ch; }
    .truth {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(22px, 4.4vw, 30px);
      line-height: 1.18;
      letter-spacing: -0.005em;
      margin: 0;
      max-width: 22ch;
    }
    .truths { max-width: none; }
    .truth em { color: var(--accent); font-style: normal; }
    .truth::before {
      content: counter(truth) " ";
      counter-increment: truth;
      color: var(--accent);
      font-size: 0.7em;
      vertical-align: 0.35em;
      margin-right: 10px;
    }
    .truths { counter-reset: truth; }

    /* ---------- Mirror ---------- */
    .mirror__grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 48px;
      align-items: center;
    }
    .mirror__body {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(21px, 3.6vw, 30px);
      line-height: 1.28;
      letter-spacing: -0.005em;
      margin: 0;
      max-width: 26ch;
    }
    .mirror__body strong { color: var(--accent); font-weight: 700; }
    .mirror__media { display: flex; justify-content: center; }

    /* ---------- Journey (§4.4) ---------- */
    .journey__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 6vw, 44px);
      letter-spacing: -0.01em;
      line-height: 1.05;
      margin: 0 0 40px;
    }
    .journey__scroller { max-width: var(--wrap); }
    .journey__strip {
      display: flex;
      gap: 18px;
      list-style: none;
      margin: 0;
      padding: 4px 4px 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
    .journey__strip::-webkit-scrollbar { height: 8px; }
    .journey__strip::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.18);
      border-radius: 8px;
    }
    .journey__stage {
      flex: 0 0 min(300px, 78vw);
      scroll-snap-align: start;
      background: var(--surface);
      border: 1px solid var(--border);
      border-top: 3px solid var(--accent);
      border-radius: 14px;
      padding: 22px 20px;
    }
    .journey__label {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 21px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 12px;
    }
    .journey__what {
      font-size: 16px;
      line-height: 1.45;
      margin: 0 0 14px;
    }
    .journey__features {
      font-size: 13px;
      line-height: 1.4;
      color: var(--text-sec);
      margin: 0;
    }
    .journey__foot {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 18px;
      margin-top: 34px;
    }
    .journey__closing {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(19px, 3vw, 26px);
      line-height: 1.25;
      margin: 0;
      max-width: 24ch;
    }

    /* ---------- Six chapters (§4.5–4.10) ---------- */
    .chapter { border-top: 3px solid var(--ch-accent); padding: 76px 0; }
    .chapter__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }
    .chapter--flip .chapter__media { order: -1; }
    .chapter__kicker {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--ch-accent);
      margin: 0 0 18px;
    }
    .chapter__num {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.08em;
      padding: 3px 9px;
      border: 1px solid var(--ch-accent);
      border-radius: 999px;
      opacity: 0.85;
    }
    .chapter__headline {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(28px, 5vw, 42px);
      line-height: 1.06;
      letter-spacing: -0.015em;
      margin: 0 0 22px;
    }
    .chapter__headline em { color: var(--ch-accent); font-style: italic; }
    .chapter__headline strong { color: var(--accent); font-weight: 800; }
    .chapter__body {
      font-size: 17px;
      line-height: 1.55;
      color: var(--text-sec);
      margin: 0 0 30px;
      max-width: 46ch;
    }
    .chapter__body strong { color: var(--text); font-weight: 700; }
    .chapter__body em { font-style: italic; }

    /* ---------- Toolbox (§4.11) ---------- */
    .toolbox__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 6vw, 44px);
      letter-spacing: -0.01em;
      line-height: 1.05;
      margin: 0 0 12px;
    }
    .toolbox__subtitle {
      font-size: clamp(15px, 2vw, 17px);
      line-height: 1.45;
      color: var(--text-sec);
      max-width: 48ch;
      margin: 0 0 36px;
    }
    .toolbox__groups { display: grid; gap: 20px; }
    .tb-group {
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      overflow: hidden;
    }
    .tb-group__head {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text);
      padding: 16px 20px;
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .tb-group__head::-webkit-details-marker { display: none; }
    .tb-count {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-sec);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 1px 8px;
    }
    .tb-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
      gap: 1px;
      background: var(--border);
      border-top: 1px solid var(--border);
    }
    .tb-card { background: var(--surface); padding: 14px 18px; }
    .tb-chip {
      display: inline-block;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--text-sec);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 1px 8px;
      margin: 0 0 8px;
    }
    .tb-feature {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.01em;
      margin: 0 0 4px;
    }
    .tb-benefit {
      font-size: 13.5px;
      line-height: 1.4;
      color: var(--text-sec);
      margin: 0;
    }
    .tb-benefit em { color: var(--text); font-style: italic; }
    .toolbox__foot { margin-top: 40px; }

    /* ---------- Advantages (§4.12) ---------- */
    .adv__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 6vw, 44px);
      letter-spacing: -0.01em;
      line-height: 1.05;
      margin: 0 0 8px;
    }
    .adv__subtitle {
      font-size: 17px;
      color: var(--text-sec);
      margin: 0 0 36px;
    }
    .adv__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
    }
    .adv-tile { background: var(--surface); padding: 26px 22px; }
    .adv-tile__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 0.005em;
      margin: 0 0 8px;
    }
    .adv-tile__body {
      font-size: 15px;
      line-height: 1.5;
      color: var(--text-sec);
      margin: 0;
    }

    /* ---------- Pricing (§4.13) ---------- */
    .pricing__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 6vw, 44px);
      letter-spacing: -0.01em;
      line-height: 1.05;
      margin: 0 0 36px;
    }
    .ptable {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      margin-bottom: 44px;
    }
    .ptable__cell { background: var(--surface); padding: 14px 18px; font-size: 14.5px; line-height: 1.4; }
    .ptable__head {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text);
    }
    .ptable__head--free { color: var(--accent); }
    /* Currency switcher (#610) — the label copies .tier__label, the control
       copies .wl-input so the pricing section introduces no new form idiom.
       min-height 44px is the tap target; auto width keeps it from spanning the
       card. It lives inside the Lifetime card, so .tier's 6px column gap sets
       the spacing above and below it — no margin of its own. */
    .ccy { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; flex-wrap: wrap; }
    .ccy__label {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-sec);
    }
    .ccy__select {
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      min-height: 44px;
      cursor: pointer;
    }
    .ccy__select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
    .tiers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 26px;
    }
    .tier {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .tier--lifetime { border-color: var(--accent); }
    .tier__label {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--text-sec);
      margin: 0;
    }
    .tier__price {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 40px;
      line-height: 1;
      letter-spacing: -0.01em;
      margin: 2px 0 0;
    }
    .tier__period { font-size: 14px; font-weight: 600; color: var(--text-sec); margin-left: 4px; }
    /* Founder pair (#610): the struck standing price sits small and muted ahead
       of the launch-month price, which keeps .tier__price's 40px display size. */
    .tier__was { font-size: 22px; font-weight: 700; color: var(--text-sec); margin-right: 4px; }
    /* Two prices in one <p> can push the period onto a second line — fine, but a
       CJK period has no spaces to break on and split mid-word (zh 一次/性) once
       the switcher reached the longest market. Only this tier is at risk. */
    .tier--lifetime .tier__period { white-space: nowrap; }
    .tier__founder { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--accent); margin: 6px 0 0; }
    .tier__line { font-size: 14px; color: var(--accent); margin: 6px 0 0; }
    .pricing__promo { margin: 0 0 30px; font-size: 15px; }
    .pricing__promo a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
    .pricing__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

    /* ---------- Social proof (§4.14, hidden until SHOW_SOCIAL) ---------- */
    .social__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 6vw, 44px);
      letter-spacing: -0.01em;
      margin: 0 0 36px;
    }
    .social__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 40px;
    }
    .quote {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 24px 22px;
    }
    .quote__text { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.35; margin: 0 0 16px; }
    .quote__author { font-weight: 700; font-size: 15px; margin: 0; }
    .quote__meta { font-size: 13px; color: var(--text-sec); margin: 2px 0 0; }
    .social__logos {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
    }
    .social__logo {
      width: 108px;
      height: 44px;
      border: 1px dashed var(--border);
      border-radius: 8px;
      opacity: 0.5;
    }

    /* ---------- FAQ (§4.15) ---------- */
    .faq__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 6vw, 44px);
      letter-spacing: -0.01em;
      margin: 0 0 32px;
    }
    .faq__list { display: grid; gap: 12px; max-width: 760px; }
    .faq-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }
    .faq-item > summary {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 19px;
      letter-spacing: 0.005em;
      padding: 18px 20px;
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .faq-item > summary::-webkit-details-marker { display: none; }
    .faq-item > summary::after {
      content: "+";
      margin-left: auto;
      font-weight: 400;
      color: var(--accent);
      font-size: 24px;
      line-height: 1;
    }
    .faq-item[open] > summary::after { content: "\2212"; }
    .faq-item__a {
      font-size: 15.5px;
      line-height: 1.6;
      color: var(--text-sec);
      margin: 0;
      padding: 0 20px 20px;
    }

    /* ---------- Final CTA (§4.16) ---------- */
    .finalcta {
      text-align: center;
      background:
        radial-gradient(120% 120% at 50% 0%, rgba(229, 57, 53, 0.14), transparent 60%),
        var(--bg);
      border-top: 1px solid var(--border);
    }
    .finalcta__headline {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(34px, 7vw, 60px);
      line-height: 1.02;
      letter-spacing: -0.02em;
      margin: 0 auto 30px;
      max-width: 18ch;
    }
    .finalcta__cta-row { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; }

    /* ---------- Sticky CTA bar (§8) ---------- */
    .ctabar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 80;
      display: none;
      align-items: center;
      gap: 14px;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      background: rgba(13, 13, 13, 0.94);
      backdrop-filter: saturate(140%) blur(10px);
      border-top: 1px solid var(--border);
    }
    .ctabar.is-visible { display: flex; }
    .ctabar__line {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.01em;
      margin: 0;
      margin-right: auto;
    }
    .ctabar__dismiss {
      flex: none;
      background: none;
      border: none;
      color: var(--text-sec);
      font-size: 22px;
      line-height: 1;
      padding: 6px 8px;
      cursor: pointer;
    }
    .ctabar__dismiss:hover { color: var(--text); }

    /* ---------- Footer ---------- */
    .footer {
      border-top: 1px solid var(--border);
      padding: 40px 0;
    }
    .footer__langs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 8px;
      font-size: 14px;
      color: var(--text-sec);
      margin-bottom: 18px;
    }
    .footer__langs a { color: var(--text-sec); text-decoration: none; }
    .footer__langs a:hover { color: var(--text); }
    .footer__copy { font-size: 13px; color: var(--text-sec); }

    /* ---------- Scroll reveal (CSS-only, progressive) ---------- */
    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {
        .reveal {
          opacity: 0;
          transform: translateY(24px);
          animation: reveal-in both linear;
          animation-timeline: view();
          animation-range: entry 8% cover 32%;
        }
        @keyframes reveal-in { to { opacity: 1; transform: none; } }
      }
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 820px) {
      .hero__grid, .mirror__grid, .chapter__grid { grid-template-columns: 1fr; gap: 40px; }
      .hero__media, .mirror__media { order: -1; }
      /* keep media below copy on every chapter regardless of flip */
      .chapter__media, .chapter--flip .chapter__media { order: 0; }
      section, .chapter { padding: 64px 0; }
      .hero { padding-top: 40px; }
      .adv__grid, .tiers, .social__grid { grid-template-columns: 1fr; }
      /* Stacked layout: size the mockup from its own aspect ratio and cap it to the
         column, so the shadow bleed can't push the grid past the viewport.
         width is 100% rather than auto: every mockup is far wider than the
         column, so the used width is identical either way, but a definite width
         is what lets the width/height attributes reserve the box before the file
         arrives. With both axes auto the img renders 0px tall until it loads,
         and six chapter mockups springing open is what pushed a #lifetime deep
         link off target. */
      .mb-mock { height: auto; width: 100%; max-width: 100%; }
    }
    @media (max-width: 560px) {
      .ctabar__line { display: none; }
    }

    /* Desktop: toolbox is a static grid — headers are labels, not toggles.
       Mobile keeps the native <details> accordion behaviour. */
    @media (min-width: 701px) {
      .tb-group__head { pointer-events: none; cursor: default; }
    }

    /* Journey: horizontal strip on desktop, vertical left-rail on mobile */
    @media (max-width: 700px) {
      .journey__strip {
        flex-direction: column;
        gap: 0;
        overflow: visible;
        scroll-snap-type: none;
        padding: 4px 0 0 6px;
        margin-left: 6px;
        border-left: 2px solid var(--border);
      }
      .journey__stage {
        flex: none;
        scroll-snap-align: none;
        position: relative;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0 0 30px 24px;
      }
      .journey__stage::before {
        content: "";
        position: absolute;
        left: -8px;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--accent);
        border: 2px solid var(--bg);
      }
      .journey__stage:last-child { padding-bottom: 0; }
    }
    @media (max-width: 420px) {
      .nav__inner { gap: 10px; }
      .signin { display: none; }
      .logo { font-size: 21px; }
      .btn { padding: 12px 15px; font-size: 13px; white-space: normal; }
    }

    /* ---------- Photos: credit chip, hero backdrop, breaker band, waitlist ---------- */
    html { scroll-behavior: smooth; }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

    .photo__credit {
      position: absolute;
      right: 12px;
      bottom: 12px;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.03em;
      color: rgba(255, 255, 255, 0.9);
      text-decoration: none;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      padding: 4px 10px;
      line-height: 1;
    }
    .photo__credit:hover { color: #fff; background: rgba(0, 0, 0, 0.72); }

    /* Hero atmospheric backdrop — decorative; content sits above via isolation */
    .hero { position: relative; overflow: hidden; isolation: isolate; }
    .hero__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
    .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(102deg, rgba(10, 10, 10, 0.94) 0%, rgba(10, 10, 10, 0.78) 48%, rgba(10, 10, 10, 0.56) 100%),
        linear-gradient(to bottom, rgba(10, 10, 10, 0.30), rgba(10, 10, 10, 0.55));
    }
    .hero .photo__credit { right: 16px; bottom: 14px; }
    @media (max-width: 820px) {
      .hero::before {
        background: linear-gradient(to bottom, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.86) 58%, rgba(10, 10, 10, 0.92) 100%);
      }
    }

    /* Made by a breaker — reuses the chapters' alternating-grid language */
    .breaker { border-top: 3px solid var(--accent); }
    .breaker__grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 48px;
      align-items: center;
    }
    .breaker__media { position: relative; }
    .breaker__photo {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      object-position: center;
      border-radius: 16px;
      border: 1px solid var(--border);
    }
    .breaker__label {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 18px;
    }
    .breaker__headline {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: clamp(26px, 4.6vw, 40px);
      line-height: 1.08;
      letter-spacing: -0.015em;
      margin: 0 0 22px;
    }
    .breaker__headline .accent { color: var(--accent); }
    .breaker__body {
      font-size: 17px;
      line-height: 1.55;
      color: var(--text-sec);
      margin: 0;
      max-width: 46ch;
    }
    .breaker__body strong { color: var(--text); font-weight: 700; }

    /* Waitlist — final conversion section */
    /* Every in-page anchor target has to clear the sticky nav (.nav is
       position: sticky; top: 0, and .nav__inner wraps taller on narrow
       screens), or the deep-linked heading lands underneath it. 76px was short:
       the nav measures 106px at 375px, where it wraps to two rows. */
    #waitlist, #pricing, #faq, #creators, #creatorForm { scroll-margin-top: 110px; }
    /* #lifetime (#610) is the only anchor that targets something mid-block: the
       email links land on the Lifetime card, but the founder price only reads as
       the third of three with the other two tiers above it. Below 820px .tiers
       is one column, so clearing the nav is not enough — the margin also has to
       swallow the 276px of monthly + yearly card that precede the Lifetime card,
       or they scroll up under the nav. 143 (the tallest nav: pt and vi wrap to
       three rows at 375px) + 276 = 419, so 420. The block is at most 571px tall,
       so it still ends at 715 — inside an 812px viewport. */
    #lifetime { scroll-margin-top: 420px; }
    .waitlist__form-title {
      font-family: var(--font-head, var(--font-body));
      font-size: 20px; font-weight: 700; color: var(--text);
      text-align: center; max-width: 420px; margin: 0 auto 4px;
    }
    .waitlist__form {
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-width: 420px;
      margin: 0 auto 16px;
      text-align: left;
    }
    .wl-field { display: flex; flex-direction: column; gap: 6px; }
    .wl-label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-sec); }
    .wl-input {
      font-family: var(--font-body);
      font-size: 16px;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 13px 14px;
      width: 100%;
    }
    .wl-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
    .wl-check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 14px;
      line-height: 1.4;
      color: var(--text-sec);
      text-align: left;
      cursor: pointer;
    }
    .wl-check input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
    /* Android note under the checkbox — same muted microline, no UA <p> margins
       on top of the form's flex gap. */
    .waitlist__form .microline { margin: 0; }
    /* The closing microlines are siblings of the form, not descendants, so the
       rule above never reaches them and both keep the UA's 1em block margins.
       Cap the measure (13px text would otherwise run the full 1120px wrap
       while the form is 420px), centre it under the form, and set the gap
       explicitly — a margin-top alone would collapse against the UA
       margin-bottom of the paragraph above it. */
    .waitlist .wrap > .microline { max-width: 46ch; margin: 0 auto; }
    .waitlist .wrap > .microline + .microline { margin-top: 10px; }
    .wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    /* The reward-carrying CTA copy is long in every language — let it wrap
       inside the button instead of escaping past the padding. */
    .wl-submit { width: 100%; text-align: center; border: none; cursor: pointer; font-family: var(--font-body); white-space: normal; line-height: 1.3; }
    .wl-submit[disabled] { opacity: 0.6; cursor: default; }
    .wl-status { font-size: 14.5px; line-height: 1.45; margin: 4px 0 0; min-height: 1.2em; }
    .wl-status--ok { color: #7bd88f; }
    .wl-status--err { color: #ff6b6b; }

    /* Hero copy of the waitlist form — compact, left-aligned, same components.
       The Android note stays hidden until the box is checked (CSS :has; browsers
       without :has simply never show the note — the checkbox still works). */
    .waitlist__form--hero { margin: 26px 0 0; max-width: 380px; gap: 10px; }
    .waitlist__form--hero .wl-check { font-size: 13px; }
    /* Android beta note collapses until the box is ticked — both forms.
       Browsers without :has simply always show the note (harmless). */
    .waitlist__form .wl-check-note { display: none; }
    .waitlist__form .wl-check:has(input:checked) + .wl-check-note { display: block; }
    @supports not selector(:has(input)) {
      .waitlist__form .wl-check-note { display: block; }
    }

    /* ---------- Creators (marketplace preview, #547) ---------- */
    .creators { border-top: 3px solid var(--accent); }
    .creators__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(28px, 6vw, 44px);
      letter-spacing: -0.01em;
      line-height: 1.05;
      margin: 0 0 14px;
    }
    .creators__body {
      font-size: 17px;
      line-height: 1.55;
      color: var(--text-sec);
      max-width: 48ch;
      margin: 0 0 30px;
    }
    .creators__body strong { color: var(--text); font-weight: 700; }
    /* Two body lines now (the deal one-liner, then "terms coming soon"); the
       30px bottom margin is the gap down to the form, not between them. */
    .creators__body + .creators__body { margin-top: -18px; }
    /* The section is left-aligned, so undo the waitlist form's auto centring. */
    .creators__form { margin: 0 0 16px; max-width: 380px; }

    /* Founder signature under the breaker body */
    .breaker__signature { margin: 18px 0 0; font-size: 15px; font-weight: 600; }
    .breaker__signature a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
    .breaker__signature a:hover { color: var(--accent); }

    /* Footer photo credit */
    .footer__credit { font-size: 13px; color: var(--text-sec); margin: 0 0 12px; }
    .footer__credit a { color: var(--text-sec); text-decoration: underline; text-underline-offset: 2px; }
    .footer__credit a:hover { color: var(--text); }

    @media (max-width: 820px) {
      .breaker__grid { grid-template-columns: 1fr; gap: 32px; }
      .breaker__media { order: -1; }
    }

    /* ---- Store badges (§launch switch, #512) ---- */
    .store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    .store-badge { display: inline-flex; text-decoration: none; }
    .store-badge img { display: block; height: 48px; width: auto; }
    .store-soon {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--text-sec);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 16px;
      line-height: 1;
    }
    .store-soon:hover, .store-soon:focus-visible { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
    .store-row--nav { gap: 8px; }
    .store-row--nav .store-badge img { height: 34px; }
    .store-row--nav .store-soon { font-size: 11px; padding: 9px 12px; }
    .store-row--final { justify-content: center; margin: 28px 0 18px; }
    .store-row--final .store-badge img { height: 56px; }