/* WorldWise 合璧 — site styles
   One palette everywhere, the same as the logo and the poster: paper, ink, and one red.
   Layout follows the Wispr Flow pattern (see DESIGN.md): paper canvas, 2px ink borders on everything
   you can press, rounded dark "rooms", no shadows. The only gradient is the pale paper-colored light inside the subtitle screens.
   The dark "screens" and rooms are the only dark things on the page. They carry the subtitles: what someone said,
   the word-for-word subtitle, and a 注 note with what they actually meant.
   Type: one family, Hanken Grotesk, for headlines and text. Chinese uses the phone's own sans
   (PingFang, Microsoft YaHei), so it reads fine even where Google Fonts is blocked. */

@property --x1 { syntax: "<percentage>"; inherits: true; initial-value: 26%; }
@property --y1 { syntax: "<percentage>"; inherits: true; initial-value: 42%; }
@property --x2 { syntax: "<percentage>"; inherits: true; initial-value: 74%; }
@property --y2 { syntax: "<percentage>"; inherits: true; initial-value: 58%; }
@property --x3 { syntax: "<percentage>"; inherits: true; initial-value: 57%; }
@property --y3 { syntax: "<percentage>"; inherits: true; initial-value: 24%; }

:root {
  --paper: #F6F1E7;
  --paper-2: #EFE7D8;
  --card: #FBF8F2;
  --ink: #141210;
  --ink-2: #4A443C;
  --ink-3: #7A7064;
  --rule: #D8CDB8;
  --red: #B3123A;

  --screen: #141210;
  --on-screen-2: rgba(255, 255, 255, .6);
  --sub: rgba(246, 241, 231, .82);   /* the word-for-word subtitle line: paper at 82% */
  --glow: rgba(246, 241, 231, .22);  /* pale paper-colored light behind every subtitle */

  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;

  --w: 1200px;
  --border: 2px solid var(--ink);
  --r-btn: 12px;
  --r-card: 32px;
  --r-room: 40px;
  color-scheme: light;
}

/* ── base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
[lang|="zh"] { font-family: var(--cn); } /* only elements marked Chinese; their children inherit */
.page-cn { font-family: var(--cn); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ── type ─────────────────────────────────────────────── */
.eyebrow { font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--ink-3); }
.eyebrow:lang(zh), .eyebrow :lang(zh) { letter-spacing: .04em; }
.eyebrow [lang|="zh"] { white-space: nowrap; }
.h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 6.6vw, 100px); line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.h2 { font-family: var(--sans); font-weight: 700; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -.032em; text-wrap: balance; }
.h1 em, .pull em { font-style: normal; color: var(--red); }
.h2 em { font-style: normal; color: inherit; } /* red stays on one headline word per page, the h1 */
.h1:lang(zh), .h2:lang(zh) { font-family: var(--cn); font-weight: 600; letter-spacing: 0; line-height: 1.3; word-break: keep-all; overflow-wrap: break-word; }
.lede { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
.lede:lang(zh) { line-height: 1.85; }
h3 { text-wrap: balance; }

/* ── buttons & links ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px;
  border: var(--border); border-radius: var(--r-btn); background: var(--red); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.15; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { background: color-mix(in srgb, var(--red) 85%, var(--ink)); transform: translateY(-1px); } /* red, a little darker: the same red mixed with ink */
.btn:active { transform: none; }
.btn .zh { font-family: var(--cn); font-weight: 400; font-size: 13px; opacity: .72; }
.btn:lang(zh) { font-family: var(--cn); font-weight: 600; }
.btn-line { background: var(--paper); color: var(--ink); }
.btn-line:hover { background: var(--paper-2); }
.btn-sm { min-height: 44px; padding: 9px 18px; font-size: 15px; }
.arrow-link { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.arrow-link:hover { color: var(--red); }

/* ── nav ──────────────────────────────────────────────── */
/* a floating pill, lined up with the page content, that stays at the top */
.site-nav { position: sticky; top: 0; z-index: 40; padding: 12px 24px 0; }
.site-nav .nav-in {
  display: flex; align-items: center; gap: 30px; max-width: calc(var(--w) - 48px); min-height: 68px; padding: 10px 10px 10px 22px;
  border: var(--border); border-radius: 22px; background: var(--paper);
}
.brand { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; text-decoration: none; }
.brand .mark { width: 32px; height: 32px; color: var(--ink); --mark-red: var(--red); }
.brand b { font-family: var(--sans); font-weight: 700; font-size: 23px; line-height: 1; letter-spacing: -.03em; }
.brand span { font-family: var(--cn); font-weight: 600; font-size: 16px; line-height: 1; color: var(--red); }
.nav-links { display: flex; gap: 28px; font-size: 15px; }
.nav-links a { padding-block: 6px; color: var(--ink-2); text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--red); }
.nav-cta .short { display: none; }
.brand, .nav-links a, .nav-cta { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1080px) { .site-nav .nav-in { gap: 20px; } .nav-links { gap: 18px; } }
.menu-btn { display: none; }

/* ── the screen (signature component) ─────────────────── */
.screen {
  position: relative; isolation: isolate; container-type: inline-size;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; aspect-ratio: 16 / 9; padding: 3.4% 4.2% 4.4%;
  border-radius: 24px; background: var(--screen); color: #fff;
  transition: --x1 1.2s ease, --y1 1.2s ease, --x2 1.2s ease, --y2 1.2s ease, --x3 1.2s ease, --y3 1.2s ease;
}
.glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.glow::before {
  content: ""; position: absolute; inset: -18%; opacity: .5; filter: blur(26px);
  background:
    radial-gradient(34% 46% at var(--x1) var(--y1), var(--glow), transparent 70%),
    radial-gradient(28% 40% at var(--x2) var(--y2), var(--glow), transparent 70%),
    radial-gradient(17% 25% at var(--x3) var(--y3), rgba(246, 241, 231, .5), transparent 72%);
}
.glow::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 82% 72% at 50% 45%, transparent 38%, rgba(20, 18, 16, .6)); }
.scene {
  align-self: flex-start; font-family: var(--sans); font-weight: 600; font-size: 10.5px; font-size: clamp(9.5px, 2.1cqi, 12px);
  line-height: 1.2; color: var(--on-screen-2);
}
.note {
  margin-top: .8em; max-width: 90%; text-align: center; text-wrap: balance; color: #fff;
  font-family: var(--cn); font-weight: 500; font-size: 13px; font-size: clamp(11px, 2.9cqi, 16.5px); line-height: 1.55;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
.zhu { display: inline-block; margin-right: .4em; padding: 0 .34em; border-radius: 3px; background: var(--red); color: #fff; font-family: var(--cn); font-weight: 600; line-height: 1.45; text-shadow: none; }
.subs { margin-top: auto; display: grid; justify-items: center; gap: .3em; max-width: 94%; padding-top: .8em; text-align: center; }
.sub-en, .sub-cn { text-shadow: 0 0 1px #000, 0 1px 2px #000, 0 2px 8px rgba(0, 0, 0, .55); text-wrap: balance; }
.sub-en { font-family: var(--sans); font-weight: 700; font-size: 17px; font-size: clamp(14px, 4.4cqi, 30px); line-height: 1.25; color: #fff; }
.sub-cn { font-family: var(--cn); font-weight: 500; font-size: 15px; font-size: clamp(12.5px, 3.7cqi, 25px); line-height: 1.38; color: var(--sub); }
.sub-cn.heard { font-family: var(--sans); font-weight: 600; font-size: 14px; font-size: clamp(12px, 3.5cqi, 23px); }

/* the hero player: a screen with a progress bar */
.player { position: relative; }
.player .screen { padding-bottom: calc(4.4% + 34px); }
.player.js .note { transition: opacity .35s ease, transform .35s ease; }
.player.js .note:not(.show) { opacity: 0; transform: translateY(-4px); }
.ctrl { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 18px 8px; border-radius: 0 0 24px 24px; }
.play { all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; cursor: pointer; }
.play:hover { background: rgba(255, 255, 255, .12); }
.play:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.play svg { width: 13px; height: 13px; }
.play .i-play { display: none; }
.player.paused .play .i-play { display: block; }
.player.paused .play .i-pause { display: none; }
.ticks { flex: 1; display: flex; gap: 5px; }
.tick { all: unset; position: relative; flex: 1; height: 24px; cursor: pointer; }
.tick::before, .tick::after { content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.tick::before { right: 0; background: rgba(255, 255, 255, .22); }
.tick::after { width: 0; background: #fff; }
.tick.done::after { width: 100%; }
.tick.on::after { animation: fill var(--dur, 6.5s) linear forwards; }
.tick:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.player.paused .tick.on::after, .player.hold .tick.on::after { animation-play-state: paused; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
.player figcaption { margin-top: 14px; font-size: 14.5px; line-height: 1.7; color: var(--ink-3); }

/* legend under the hero screen: how to read every screen on the site */
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { position: relative; flex: none; width: 24px; height: 15px; border-radius: 3px; background: var(--screen); }
.legend i::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 5px; height: 2px; border-radius: 1px; background: #fff; }
.legend i.cn-bar::after { background: var(--sub); }
.legend .zhu { margin: 0; font-size: 11px; }

/* ── hero ─────────────────────────────────────────────── */
.hero { padding-block: clamp(40px, 5.4vw, 80px) clamp(48px, 5.4vw, 80px); }
.hero-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head head" "rest player"; gap: clamp(28px, 3.4vw, 44px) clamp(32px, 5vw, 72px);
}
.hero-head { grid-area: head; display: grid; gap: 18px; }
.hero .h1 { font-size: clamp(44px, 7vw, 104px); }
.hero .h1 em { display: block; } /* "Be understood." always gets its own line */
.hero .h1.two-tone { color: var(--ink-3); }
.hero .h1.two-tone em { color: var(--ink); }

/* waveform pill: the "someone is speaking" mark */
.wave {
  display: inline-flex; align-items: center; gap: 3px; height: 34px; padding: 0 14px;
  border: var(--border); border-radius: 999px; background: var(--paper);
}
.wave i { width: 3px; height: var(--h, 12px); border-radius: 2px; background: var(--ink); }
.stream.run .wave i { animation: talk .9s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes talk { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

/* "made for" tags */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: var(--border); border-radius: 999px; font-weight: 500; font-size: 14.5px; line-height: 1.2; }
.tags-label { align-self: center; margin-right: 4px; font-size: 14.5px; color: var(--ink-3); }
.hero-rest { grid-area: rest; display: grid; gap: 24px; align-content: center; }
.hero .player { grid-area: player; }
.punch:lang(zh) { font-family: var(--cn); font-weight: 500; letter-spacing: .06em; }
.punch {
  justify-self: start; padding: .16em .5em .2em; border-radius: 4px; background: var(--ink); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: clamp(19px, 2vw, 27px); line-height: 1.25;
  animation: pop 0s .55s both;
}
@keyframes pop { from { visibility: hidden; } to { visibility: visible; } }
.hero-body { max-width: 46ch; font-size: clamp(18px, 1.45vw, 19.5px); line-height: 1.65; color: var(--ink-2); }
.hero-body strong { color: var(--ink); font-weight: 600; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-rest .ctas .btn { flex: 1 1 auto; } /* if they wrap, both buttons take the full width */
.micro { font-size: 14.5px; color: var(--ink-3); }
.hero--flat .player .screen { padding-bottom: 4.4%; }

/* ── sections ─────────────────────────────────────────── */
.section { padding-block: clamp(36px, 4.2vw, 60px); }
.section.section-tight { padding-top: clamp(28px, 3.4vw, 44px); } /* content that belongs to the header above it */
.section-head { display: grid; gap: 18px; max-width: 820px; margin-bottom: clamp(32px, 4.2vw, 56px); }

/* this week / archive cards */
.week-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(32px, 4vw, 44px); }
.week-head .section-head { margin-bottom: 0; }
.week-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; font-size: 16px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 24px; }

.entry {
  display: flex; flex-direction: column; overflow: hidden; scroll-margin-top: 24px;
  background: var(--card); border: var(--border); border-radius: var(--r-card);
  transition: transform .15s ease;
}
.entry:hover { transform: translateY(-2px); }
.entry .screen { aspect-ratio: 16 / 10; border-radius: 0; }
.entry-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px 26px 20px; }
.meta > * { white-space: nowrap; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-weight: 500; font-size: 14px; color: var(--ink-3); }
.meta .type { color: var(--ink-2); font-weight: 600; }
.meta time { margin-left: auto; font-variant-numeric: tabular-nums; }
.means { font-weight: 700; font-size: 19px; line-height: 1.35; text-wrap: pretty; }
.more { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.more div { display: grid; gap: 1px; }
.more dt { font-weight: 600; font-size: 14px; color: var(--ink-3); }
.more dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.copy { all: unset; align-self: flex-start; margin-top: auto; padding: 4px 0; font-size: 13.5px; color: var(--ink-3); cursor: pointer; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.copy:hover { color: var(--ink); }
.copy:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.entry.is-target { outline: 2px solid var(--red); outline-offset: 4px; }

/* why */
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.why-grid .section-head { margin-bottom: 0; }
.why-copy { display: grid; gap: 18px; max-width: 56ch; font-size: clamp(18px, 1.5vw, 19.5px); color: var(--ink-2); }
.pull-solo { margin-top: 0 !important; }
.pull { margin-top: clamp(56px, 7vw, 104px); max-width: 22ch; font-family: var(--sans); font-weight: 700; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }

/* culture check */
.check-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4.5vw, 64px); align-items: center; }
.check-grid .note { transition: opacity .35s ease, transform .35s ease; }
.check-grid .note.wait { opacity: 0; transform: translateY(-4px); }
.panel { display: grid; gap: 18px; }
.q-top { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.q-dots { display: flex; gap: 6px; }
.q-dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--rule); }
.q-dots i.done { background: var(--ink); }
.q-dots i.now { background: var(--red); }
.q-text { font-family: var(--sans); font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.opts { display: grid; gap: 10px; }
.opt {
  all: unset; box-sizing: border-box; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px;
  min-height: 56px; padding: 11px 16px; border: var(--border); border-radius: var(--r-btn); background: var(--card);
  font-family: var(--sans); font-size: 17px; line-height: 1.35; color: var(--ink); cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s, opacity .15s;
}
.opt:hover:not([disabled]) { background: var(--paper-2); }
.opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.opt .k { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 50%; font-weight: 600; font-size: 13px; color: var(--ink-3); }
.opt[disabled] { cursor: default; }
.opt.right { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.opt.right .k { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.opt.wrong { border-color: var(--ink-3); color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--red); }
.opt.wrong .k { border-color: var(--red); color: var(--red); }
.opt.dim { opacity: .45; }
.why-box { display: grid; gap: 6px; padding: 16px 18px; border: var(--border); border-radius: 16px; background: var(--card); }
.why-box .v { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.why-box .v.ok { color: var(--ink); }
.why-box .v.no { color: var(--red); }
.why-box p { font-size: 16px; color: var(--ink-2); }
.why-box a { font-weight: 600; color: var(--ink); }
.q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.q-result { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink); max-width: 44ch; }
.q-note { font-size: 14px; color: var(--ink-3); }

/* coaching */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.pillar { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: var(--border); }
.pillar h3 { font-family: var(--sans); font-weight: 700; font-size: clamp(22px, 2vw, 26px); line-height: 1.2; letter-spacing: -.015em; }
.pillar p { font-size: 17px; color: var(--ink-2); }
.analysis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.analysis-copy { display: grid; gap: 16px; }
.analysis-copy h3 { font-family: var(--sans); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.analysis-copy p:not(.eyebrow) { color: var(--ink-2); max-width: 50ch; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); counter-reset: step; }
.step { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: var(--border); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.step h3 { font-weight: 700; font-size: 18px; line-height: 1.3; }
.step p { font-size: 16.5px; color: var(--ink-2); }

/* prices */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tier { display: flex; flex-direction: column; gap: 10px; padding: 32px; border: var(--border); border-radius: var(--r-card); background: var(--card); }
.tier-for { font-weight: 600; font-size: 15px; color: var(--ink-3); }
.tier-for:lang(zh) { letter-spacing: .04em; }
.tier h3 { font-family: var(--sans); font-weight: 700; font-size: clamp(22px, 2vw, 26px); line-height: 1.12; letter-spacing: -.02em; }
.tier h3:lang(zh) { font-family: var(--cn); font-weight: 600; font-size: clamp(24px, 2.1vw, 29px); line-height: 1.25; letter-spacing: 0; }
.tier-meta { font-weight: 500; font-size: 15px; color: var(--ink-3); }
.tier-meta:lang(zh) { letter-spacing: .02em; }
.tier-d { font-size: 16.5px; color: var(--ink-2); }
.price { margin-top: auto; padding-top: 22px; font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 4.4vw, 60px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.incl { margin-top: 26px; max-width: 78ch; font-size: 16.5px; color: var(--ink-2); }
.promise { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; margin-top: 40px; border-top: var(--border); }
.promise > div { display: grid; gap: 8px; align-content: start; padding: 24px 0; }
.promise::after { content: ""; position: absolute; left: 50%; top: 24px; bottom: 24px; width: 1px; background: var(--rule); } /* the divider sits dead center in the gap, inset equally top and bottom */
.promise h3 { font-weight: 700; font-size: 18px; }
.promise h3:lang(zh) { font-weight: 600; }
.promise p { font-size: 16.5px; color: var(--ink-2); }

/* parents callout */
.pb-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 56px; align-items: end; padding: clamp(28px, 4.5vw, 64px); border: var(--border); border-radius: var(--r-card); background: var(--card); }
.pb-in > div { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); } /* minmax(0, ...) lets the Chinese headline wrap at 320px */
.pb-in .h2 { font-size: clamp(32px, 4vw, 56px); }

/* community */
.comm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.comm .section-head { margin-bottom: 0; }
.comm .section-head .btn { justify-self: start; margin-top: 6px; }
.channels, .rows { border-top: var(--border); }
.channels li, .rows li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.channels b, .rows b { font-weight: 700; font-size: 15.5px; }
.channels span, .rows span { font-size: 16px; color: var(--ink-2); }
.rows-label { margin: 0 0 10px; font-weight: 600; font-size: 15px; color: var(--ink-3); }
.channels + .rows-label { margin-top: 30px; }
.wechat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 24px; padding: 20px; border: var(--border); border-radius: 24px; background: var(--card); }
.wechat p { font-size: 16px; color: var(--ink-2); }
.wechat p b { color: var(--ink); }
.qr {
  --c: var(--ink-3); --l: 22px;
  display: grid; place-items: center; width: 116px; height: 116px; padding: 10px; border-radius: 4px;
  text-align: center; font-weight: 600; font-size: 12px; line-height: 1.35; letter-spacing: .02em; color: var(--ink-3);
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 2px, linear-gradient(var(--c), var(--c)) left top / 2px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 2px, linear-gradient(var(--c), var(--c)) right top / 2px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 2px, linear-gradient(var(--c), var(--c)) left bottom / 2px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 2px, linear-gradient(var(--c), var(--c)) right bottom / 2px var(--l),
    var(--paper-2);
  background-repeat: no-repeat;
}
.qr.has-qr { padding: 0; border: 0; background: #fff; }
.qr img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.members { margin-top: 16px; font-size: 15.5px; color: var(--ink-2); }

/* faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid .section-head { margin-bottom: 0; }
.faq details { border-top: var(--border); }
.faq details:last-child { border-bottom: var(--border); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--sans); font-weight: 600; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.3; letter-spacing: -.01em; }
.faq summary:lang(zh) { font-family: var(--cn); font-weight: 600; font-size: clamp(18px, 1.7vw, 21px); letter-spacing: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--sans); font-size: 26px; line-height: 1; color: var(--ink); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { display: grid; gap: 10px; max-width: 64ch; padding-bottom: 24px; font-size: 17px; color: var(--ink-2); }
.faq .a:lang(zh) { line-height: 1.85; }

/* letter + final call */
.final-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.letter { display: grid; gap: 16px; max-width: 48ch; font-size: clamp(18px, 1.5vw, 19.5px); line-height: 1.65; color: var(--ink-2); }
.letter .hi { font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.sig { font-weight: 600; font-size: 19px; color: var(--ink); }
.final-cta { display: grid; gap: 22px; align-content: center; justify-items: start; }

/* the dark room: the closing "free call" block on every page */
.final-cta {
  padding: clamp(32px, 5.4vw, 80px); border-radius: var(--r-room); background: var(--ink); color: var(--paper);
}
.final-cta .eyebrow { color: rgba(246, 241, 231, .62); }
.final-cta .h2 em { color: inherit; }
.final-cta .lede { color: rgba(246, 241, 231, .78); }
.final-cta .btn-line { background: transparent; border-color: var(--paper); color: var(--paper); }
.final-cta .btn-line:hover { background: rgba(246, 241, 231, .1); }
.final-cta :focus-visible { outline-color: var(--paper); }

/* footer */
.site-foot { padding-block: 48px 56px; border-top: var(--border); font-size: 14px; color: var(--ink-3); }
.foot-in { display: grid; gap: 20px; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot-fine { display: grid; gap: 6px; max-width: 86ch; }
.site-foot .brand b { color: var(--ink); }

/* archive page */
.archive-head { padding-block: clamp(40px, 5.4vw, 80px) clamp(24px, 3vw, 40px); }
.archive-head .wrap { display: grid; gap: 20px; }
.archive-head .h1 { max-width: 16ch; }
.finder { display: grid; gap: 16px; max-width: 880px; margin-top: 12px; }
.search { position: relative; }
.search svg { position: absolute; left: 17px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ink-3); pointer-events: none; }
.search input {
  width: 100%; min-height: 58px; padding: 14px 18px 14px 48px; border: var(--border); border-radius: var(--r-btn);
  background: var(--card); color: var(--ink); font-size: 17px; -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 15px;
  border: var(--border); border-radius: 999px; font-family: var(--sans); font-weight: 500; font-size: 15px; color: var(--ink); cursor: pointer;
}
.filter .n { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.filter:hover { background: var(--paper-2); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter[aria-pressed="true"] .n { color: rgba(246, 241, 231, .65); }
.filter:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.results-line { margin-bottom: 22px; font-weight: 500; font-size: 15px; color: var(--ink-3); }
.empty { display: grid; gap: 10px; max-width: 60ch; padding-block: 24px 8px; font-size: 18px; color: var(--ink-2); }
.empty b { color: var(--ink); }
.ask-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.ask-in > div { display: grid; gap: 16px; }

/* parents page */
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dd { display: grid; gap: 14px; align-content: start; padding: 32px; border: var(--border); border-radius: var(--r-card); background: var(--card); }
.dd.dont { background: transparent; border-style: dashed; }
.dd h3 { font-family: var(--cn); font-weight: 600; font-size: 22px; }
.dd ul { display: grid; gap: 10px; }
.dd li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.dd li::before { content: "✓"; position: absolute; left: 0; top: 0; font-family: var(--sans); font-weight: 700; color: var(--ink); }
.dd.dont li::before { content: "×"; color: var(--ink-3); }
.dd li b { color: var(--ink); font-weight: 600; }
.contact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; max-width: 780px; }
.contact .qr { width: 148px; height: 148px; }
.contact-copy { display: grid; gap: 14px; justify-items: start; }
.contact-copy p:not(.eyebrow) { color: var(--ink-2); }

/* inner page header */
.page-head { padding-block: clamp(40px, 5.4vw, 80px) clamp(24px, 3vw, 40px); }
.page-head .wrap { display: grid; gap: 20px; }
.page-head .h1 { max-width: 20ch; font-size: clamp(40px, 5.4vw, 80px); }
.page-head .lede { max-width: 62ch; }
.page-head .ctas { margin-top: 6px; }


/* Chinese page: Chinese characters are wider, so display sizes come down and line height goes up */
.page-cn .h1 { font-size: clamp(31px, 5.2vw, 72px); }
.page-cn .h2 { font-size: clamp(30px, 3.8vw, 50px); }
.page-cn .hero-body, .page-cn .dd li, .page-cn .step p, .page-cn .tier-d, .page-cn .incl,
.page-cn .promise p, .page-cn .contact-copy p:not(.eyebrow), .page-cn .player figcaption { line-height: 1.85; }
.page-cn .step h3, .page-cn .promise h3 { font-weight: 600; }

/* inner pages read top to bottom, unlike the homepage: the title, then the words under it, then the content.
   No left/right splits (Victor, 2026-10-26). Grids of equal items (tiers, pillars, steps, promise) stay as rows. */
.page-head .ph-body { max-width: 680px; }
.page-head .h1 { font-size: clamp(40px, 5vw, 72px); }
.faq-grid, .comm { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); }
.faq-grid > *, .comm > * { max-width: 880px; }
}
.ph-body { display: grid; gap: 20px; }

/* price cards: name, details, description and price line up across the three cards */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .tiers { row-gap: 10px; }
    .tier { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  }
}

/* ── responsive ───────────────────────────────────────── */
@media (max-width: 1000px) {
  .cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(80%, 380px); align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
  .cards > * { scroll-snap-align: start; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .site-nav .nav-in { flex-wrap: wrap; gap: 0 10px; min-height: 0; padding: 8px 8px 8px 18px; }
  .nav-links { order: 3; width: 100%; gap: 22px; overflow-x: auto; padding-block: 8px 2px; scrollbar-width: none; } /* without JS: a scrolling row */
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
  .js .menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--border); border-radius: var(--r-btn); background: transparent; color: var(--ink); cursor: pointer; }
  .js .menu-btn svg { width: 20px; height: 20px; }
  .js .nav-links { display: none; }
  .js .nav-open .nav-links { display: flex; flex-direction: column; gap: 0; overflow: visible; padding-block: 10px 4px; padding-right: 10px; }
  .js .nav-open .nav-links a { padding-block: 13px; border-top: 1px solid var(--rule); font-size: 17px; color: var(--ink); box-shadow: none; }
  .js .nav-open .nav-links a[aria-current="page"] { color: var(--red); }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "player" "rest"; }
  .why-grid, .check-grid, .pillars, .analysis, .comm, .faq-grid, .final-in, .tiers, .promise, .do-dont { grid-template-columns: minmax(0, 1fr); }
  .promise::after { display: none; }
  .promise > div + div { border-top: 1px solid var(--rule); }
  .pb-in, .ask-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .site-nav { padding: 10px 12px 0; }
  .site-nav .nav-in { gap: 0 8px; padding-left: 14px; border-radius: 18px; }
  .final-cta { border-radius: 28px; }
  .entry, .tier, .way, .dd, .pb-in { border-radius: 24px; }
  .brand { gap: 7px; }
  .brand .mark { width: 26px; height: 26px; }
  .brand b { font-size: 20px; }
  .brand span { font-size: 14px; }
  .nav-in .btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .nav-cta .long { display: none; }
  .nav-cta .short { display: inline; }
  .nav-links { gap: 16px; font-size: 14.5px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .channels li, .rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .wechat, .contact { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .nav-in .btn, .comm .section-head .btn { width: auto; }
  .final-cta { justify-items: stretch; }
  .dd { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .punch { animation: none; }
  .tick.on::after { animation: none; width: 100%; }
  .play { display: none; }
  .entry:hover, .btn:hover { transform: none; }
  }

/* home hero: headline left, the words and the one button right, the stream underneath.
   Both columns run the same height: tops line up on the cap height of "Be understood.", bottoms on the Chinese line and the button. */
.hero--home { position: relative; overflow: hidden; min-height: calc(100svh - 70px); display: flex; flex-direction: column; justify-content: center; } /* fills the first screen under the 70px nav, so the next section never peeks in */
.hero--home .hero-in { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "head rest"; align-items: stretch; column-gap: clamp(40px, 6vw, 112px); }
.hero--home .hero-head { container-type: inline-size; }
.hero--home .h1 { font-size: clamp(40px, 15cqi, 92px); } /* sized to its column, so "Be understood." always fits on one line */
.hero--home .h1 > span, .hero--home .h1 > em { white-space: nowrap; }
.hero--home .hero-head { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 36px; }
.hero--home .h1, .hero--home .hero-body { text-box: trim-both cap alphabetic; }
.hero--home .hero-rest { display: flex; flex-direction: column; justify-content: flex-end; gap: 36px; } /* the text and buttons stay together at the bottom, level with the Chinese line */
.hero--home .hero-body { max-width: 40ch; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; }
.hero--home .hero-rest .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero--home .hero-rest .ctas .btn { flex: 0 0 auto; }
.hero--home .stream { position: relative; z-index: 1; }
@media (max-width: 980px) {
  /* below this the two columns get too narrow to line up, so the hero stacks */
  .hero--home .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rest"; row-gap: 28px; }
  .hero--home .hero-head, .hero--home .hero-rest { gap: 24px; }
}
@media (max-width: 900px) { .hero--home { min-height: calc(100svh - 62px); } } /* the phone nav is 62px */
.hero--home .punch { font-size: clamp(15px, 6cqi, 27px); } /* the Chinese line stays on one line, down to 320px */
@media (max-width: 360px) {
  .site-nav .nav-in { gap: 8px; }
  .brand { gap: 7px; }
  .brand b { font-size: 18px; }
  .nav-in .btn-sm { padding: 8px 10px; }
}

/* the accent layer: rows of words behind the hero */
.hero-sounds { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* a dark room: a big rounded dark panel for the showcase pieces */
.room { border-radius: var(--r-room); background: var(--ink); color: var(--paper); padding: clamp(28px, 4.5vw, 64px); }
.room .eyebrow { color: rgba(246, 241, 231, .62); }
.room .h2 { font-size: clamp(30px, 3.4vw, 50px); }
.room .lede { color: rgba(246, 241, 231, .78); }
.room .lede .zhu { font-size: .8em; vertical-align: .1em; }
.room .screen { outline: 1.5px solid rgba(246, 241, 231, .16); outline-offset: -1.5px; }
.room .legend { color: rgba(246, 241, 231, .7); }
.room .legend i { box-shadow: inset 0 0 0 1.5px rgba(246, 241, 231, .45); }
.reel-room { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.reel-room .h2 { font-size: clamp(32px, 3.3vw, 48px); text-wrap: balance; }
.room-copy { display: grid; gap: 18px; }

/* "hear it" button in the corner of a screen */
.say {
  all: unset; box-sizing: border-box; position: absolute; top: 3.2%; right: 3%; z-index: 2;
  display: none; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .15s;
}
.can-speak .say { display: grid; }
.say:hover { background: rgba(255, 255, 255, .24); }
.say:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.say svg { width: 17px; height: 17px; }
.say.speaking { background: var(--red); }

/* prices: one dot per session */
.tier-meta .dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 10px; }
.tier-meta .dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }

/* ── Hear the difference: the sound trainer ─────────────── */
.trainer {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); overflow: hidden;
  border: var(--border); border-radius: var(--r-card); background: var(--card);
}
.tr-side { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-right: var(--border); background: var(--paper); }
.tr-tabs { display: grid; gap: 6px; }
.tr-tab {
  all: unset; box-sizing: border-box; display: block; padding: 11px 14px; border-radius: var(--r-btn);
  font-weight: 600; font-size: 16px; line-height: 1.25; cursor: pointer; transition: background-color .15s, color .15s;
}
.tr-tab:hover { background: var(--paper-2); }
.tr-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tr-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tr-slow { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.tr-slow input { width: 18px; height: 18px; accent-color: var(--ink); }
.tr-panel { display: grid; gap: 26px; align-content: start; padding: clamp(24px, 3.4vw, 44px); }
.tr-head { display: grid; gap: 10px; }
.tr-title { font-weight: 700; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.025em; }
.tr-slip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 17px; }
.tr-slip-k { font-weight: 500; font-size: 14px; color: var(--ink-3); }
.tr-slip .ok { font-weight: 700; }
.tr-slip .arr { color: var(--ink-3); }
.tr-slip .bad { font-weight: 600; color: var(--red); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tr-why { max-width: 56ch; font-size: 16.5px; line-height: 1.8; color: var(--ink-2); }

/* word buttons: tap to hear */
.w {
  all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 18px 10px 14px;
  border: var(--border); border-radius: var(--r-btn); background: var(--paper); color: var(--ink);
  font-weight: 600; font-size: 19px; line-height: 1.2; cursor: pointer; transition: background-color .15s, color .15s;
}
.w:hover { background: var(--paper-2); }
.w:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.w svg { flex: none; width: 18px; height: 18px; color: var(--ink-3); }
.w .bars { display: none; align-items: center; gap: 2px; width: 18px; height: 18px; }
.w .bars i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; animation: talk .5s ease-in-out infinite alternate; }
.w .bars i:nth-child(2) { animation-delay: -.2s; } .w .bars i:nth-child(3) { animation-delay: -.35s; }
.w.speaking { background: var(--ink); color: var(--paper); }
.w.speaking svg { display: none; }
.w.speaking .bars { display: inline-flex; }
.w-target { border-color: var(--ink); }
.tr-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px 24px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.pair .w { width: 100%; justify-content: flex-start; }
.pair .vs { font-size: 13px; color: var(--ink-3); }
.tr-stress { display: flex; flex-wrap: wrap; gap: 10px; }
.w-stress .w-t { display: inline-flex; align-items: flex-end; gap: 2px; }
.syl { display: inline-block; padding: 2px 3px; border-radius: 5px; font-weight: 500; font-size: 16px; color: var(--ink-2); }
.syl.loud { padding: 2px 6px; background: var(--red); color: #fff; font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
.w.speaking .syl { color: inherit; }
.tr-line { display: grid; gap: 8px; justify-items: start; }
.tr-line-k, .tr-test-title { font-weight: 500; font-size: 14px; color: var(--ink-3); }
.w-line { font-weight: 500; font-size: 18px; }

/* the listening test */
.tr-test { display: grid; gap: 14px; justify-items: start; padding-top: 22px; border-top: 1.5px solid var(--rule); }
.tr-test-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; }
.tr-score { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.tr-q { display: grid; gap: 14px; justify-items: start; width: 100%; }
.tr-q-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.w-play { background: var(--red); border-color: var(--ink); color: #fff; }
.w-play svg { color: #fff; }
.w-play:hover { background: color-mix(in srgb, var(--red) 85%, var(--ink)); }
.tr-prompt { font-size: 17px; color: var(--ink-2); }
.tr-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.tr-opt {
  all: unset; box-sizing: border-box; min-width: 120px; min-height: 50px; padding: 10px 20px; text-align: center;
  border: var(--border); border-radius: var(--r-btn); font-weight: 600; font-size: 18px; cursor: pointer;
}
.tr-opts.syls .tr-opt { min-width: 64px; padding-inline: 14px; }
.tr-opt:hover { background: var(--paper-2); }
.tr-opt:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tr-opts.done .tr-opt { cursor: default; }
.tr-opt.right { background: var(--ink); color: var(--paper); }
.tr-opt.wrong { border-color: var(--red); color: var(--red); text-decoration: line-through; }
.tr-note { margin-top: 14px; font-size: 14.5px; color: var(--ink-3); }

/* ── motion ───────────────────────────────────────────── */

/* the gate under the hero: what people say slides in on the left, a gate decodes it, and what they mean slides out on the right */
.hero { padding-bottom: 0; }
.stream { overflow: hidden; margin-top: clamp(40px, 5.5vw, 80px); padding-bottom: 28px; }
.stream-in { position: relative; left: 50%; width: max(min(100%, 1200px), 760px); transform: translateX(-50%); height: 168px; display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: stretch; }
.lane { position: relative; overflow: hidden; }
.lane-in { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
.lane-out { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.lane > span { position: absolute; left: 0; width: max-content; top: 50%; margin-top: -24px; will-change: transform; white-space: nowrap; font-size: 19px; line-height: 1.25; }
.lane-in > span { color: var(--ink-2); }
.stack .said-line { padding: 10px 20px; border: var(--border); border-radius: 18px; background: var(--paper); color: var(--ink-2); font-weight: 500; font-size: 19px; line-height: 1.25; }
.lane > span.in, .lane > span.out { top: 0; bottom: 0; margin-top: 0; display: flex; align-items: center; padding: 0; border: 0; background: none; }
.stack { display: grid; justify-items: start; gap: 6px; }
.stack small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.stack .lit { padding: 8px 16px; border: 2px dashed var(--ink-3); border-radius: 14px; color: var(--ink-3); font-style: normal; font-weight: 500; font-size: 17px; line-height: 1.25; }
.stack .mean { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 18px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 19px; line-height: 1.25; }
.stack .mean .zhu { margin: 0; font-style: normal; font-size: 15px; }
.gate { position: relative; z-index: 1; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 46px; background: var(--ink); overflow: hidden; transition: border-color .25s ease; }
.gate .zhu { margin: 0; font-size: 22px; padding: 2px 9px; border-radius: 6px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.gate.busy { border-color: var(--red); }
.gate.busy .zhu { transform: scale(1.22); }

/* hero entrance */
@keyframes rise { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .hero .h1 > span, .js .hero .h1 > em { display: block; animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero .h1 > em { animation-delay: .14s; }
.js .hero .player, .js .hero-rest { animation: fade-up .9s .3s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero-rest { animation-delay: .42s; }
.js .stream { animation: fade-up 1s .5s ease both; }

/* content no longer fades or slides in on scroll (Victor, 2026-10-26: it read as decoration, not movement).
   .reveal and .in are still set, for the effects below that draw something: step rules and photo wipes. */

/* the nav pill tightens once you scroll */
.site-nav .nav-in { transition: min-height .25s ease, padding .25s ease; }
.site-nav.scrolled .nav-in { min-height: 58px; padding-block: 6px; }

/* screens play like subtitles when they reach the screen: the line, then the word-for-word subtitle, then the 注 note */
.js .cue .sub-en, .js .cue .sub-cn, .js .cue .note { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.js .cue.played .sub-en { opacity: 1; transform: none; transition-delay: .15s; }
.js .cue.played .sub-cn { opacity: 1; transform: none; transition-delay: .75s; }
.js .cue.played .note { opacity: 1; transform: none; transition-delay: 1.5s; }
.js .cue.played .note .zhu { animation: stamp .45s 1.5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes stamp { from { transform: scale(1.8); } to { transform: none; } }

/* how it works: a red line draws across the steps in order */
.step { position: relative; }
.js .step.reveal::after {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.6, 0, .3, 1);
  transition-delay: calc(.25s + var(--i, 0) * 350ms);
}
.js .step.reveal.in::after { transform: scaleX(1); }
.js .step.reveal { transition-delay: calc(var(--i, 0) * 350ms); }

/* FAQ answers slide open (browsers that support it; others just open) */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* Decoded filters: cards glide to their new places */
::view-transition-group(*) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

@media (max-width: 900px) {
  .trainer { grid-template-columns: minmax(0, 1fr); }
  .tr-side { flex-direction: column; border-right: 0; border-bottom: var(--border); padding: 16px; }
  .tr-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .tr-tab { flex: none; border: var(--border); border-radius: 999px; padding: 8px 14px; font-size: 15px; }
  .tr-slow { margin-top: 0; }
  .hero--home .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rest"; row-gap: 28px; }
  .hero--home .hero-head, .hero--home .hero-rest { gap: 24px; }
  .reel-room { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .stream-in { width: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero .h1 > span, .js .hero .h1 > em, .js .hero .player, .js .hero-rest, .js .stream { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .cue .sub-en, .js .cue .sub-cn, .js .cue .note { opacity: 1; transform: none; transition: none; }
  .js .cue .note .zhu { animation: none; }
  .faq details::details-content { transition: none; }
}

/* leave room for the "hear it" button */
.can-speak .screen:has(.say) .note { max-width: 76%; }

/* ── legal gate ───────────────────────────────────────────
   One flag in config.js (legalLive) picks the wording. [data-legal] is the final wording and the legal pages;
   [data-prelegal] is today's wording. Where a sentence changes, the two sit side by side as a pair. */
html:not(.legal-live) [data-legal] { display: none !important; }
html.legal-live [data-prelegal] { display: none !important; }

/* "opening soon" button while a link in config.js is still empty */
.btn.is-soon { background: transparent; color: var(--ink-3); border-style: dashed; border-color: var(--ink-3); cursor: default; }
.btn.is-soon:hover { background: transparent; transform: none; }

/* contact details (call page, parents page) */
.contact-list { display: grid; gap: 6px; font-size: 17px; color: var(--ink-2); }
.contact-list b { font-weight: 600; color: var(--ink); }
.contact-list a { font-weight: 600; color: var(--ink); }

/* legal pages: terms, privacy, refunds */
.legal-pending { display: grid; gap: 14px; justify-items: start; max-width: 640px; padding: clamp(24px, 4vw, 40px); border: var(--border); border-radius: var(--r-card); background: var(--card); }
.legal-pending h2 { font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.legal-pending p:not(.eyebrow) { color: var(--ink-2); }
.legal { display: grid; max-width: 760px; }
.legal-sec { display: grid; gap: 12px; align-content: start; padding-block: 28px; border-top: var(--border); }
.legal-sec:first-child { padding-top: 0; border-top: 0; }
.legal-sec h2 { font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.legal-sec p, .legal-sec .bullets li { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.legal-sec p b, .legal-sec .bullets li b { font-weight: 600; color: var(--ink); }
.legal-sec .bullets { display: grid; gap: 8px; padding-left: 22px; list-style: disc; }
.legal-sec .rows { margin-top: 4px; border-top: 1px solid var(--rule); }
.legal-sec a { font-weight: 500; }
.legal-sec:lang(zh) p { line-height: 1.85; }
.legal-note { font-size: 15px; color: var(--ink-3); }

/* ── photos ───────────────────────────────────────────── */
/* Drop files into /photos with the names used in the HTML. A slot with no file yet shows a labelled placeholder. */
.photo { position: relative; margin: 0; overflow: hidden; border: var(--border); border-radius: var(--r-card); background: var(--paper-2); aspect-ratio: var(--ar, 4 / 5); }
.photo img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; transform: translateY(var(--py, 0px)) scale(var(--zoom, 1)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.photo:hover { --zoom: 1.05; }
.photo.empty img { display: none; }
.photo.empty::before {
  content: attr(data-slot); position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center;
  font-weight: 500; font-size: 14px; color: var(--ink-3);
  background: repeating-linear-gradient(135deg, transparent 0 14px, var(--rule) 14px 15px);
}
.photo figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: var(--border); font-size: 13px; font-weight: 500; line-height: 1; }

.strip { display: grid; grid-template-columns: 1.1fr .9fr 1.2fr .9fr; gap: 20px; align-items: end; }
.strip .photo:nth-child(1) { --ar: 4 / 5; }
.strip .photo:nth-child(2) { --ar: 1 / 1; }
.strip .photo:nth-child(3) { --ar: 4 / 5; }
.strip .photo:nth-child(4) { --ar: 1 / 1; }
.way .photo { --ar: 16 / 9; margin-bottom: 20px; border-radius: 20px; }
@media (max-width: 760px) { .strip { grid-template-columns: 1fr 1fr; } }

/* photos wipe open when they arrive, then drift against the scroll */
.js .photo.reveal { opacity: 1; transform: none; clip-path: inset(0 100% 0 0 round 32px); transition: clip-path 1s cubic-bezier(.6, 0, .2, 1); transition-delay: calc(var(--i, 0) * 120ms); }
.js .photo.reveal.in { clip-path: inset(0 0 0 0 round 32px); }
.js .photo.reveal img { transform: scale(1.18) translateY(var(--py, 0px)); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 120ms); }
.js .photo.reveal.in img { transform: scale(var(--zoom, 1)) translateY(var(--py, 0px)); }
.js .strip .photo:nth-child(even) { margin-bottom: clamp(0px, 3vw, 40px); }

/* the way cards lift on hover */
.way { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.way:hover { transform: translateY(-4px); }

/* the red 注 stamp on the nav brand mark turns slowly */
.brand .mark { transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.brand:hover .mark { transform: rotate(60deg); }

@media (prefers-reduced-motion: reduce) {
  .photo img, .way, .brand .mark { transition: none; }
  .js .photo.reveal { clip-path: none; }
  .js .photo.reveal img { transform: none; }
}

/* the two of us, at the end of the letter */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 420px; margin-top: 8px; }
.duo .photo { --ar: 1 / 1; border-radius: 24px; }
.js .duo .photo.reveal { clip-path: inset(0 100% 0 0 round 24px); }
.js .duo .photo.reveal.in { clip-path: inset(0 0 0 0 round 24px); }

/* why we started: three numbered observations, then a closing note */
.origin { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.origin-card { position: relative; display: grid; gap: 12px; align-content: start; padding: 32px; border: var(--border); border-radius: var(--r-card); background: var(--card, var(--paper)); }
.origin-n { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 16px; }
.origin-card h3 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.origin-card p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.origin-close { display: grid; gap: 14px; max-width: 64ch; margin-top: 40px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-2); }
.origin-close p { margin: 0; }
.origin-close p:last-child { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .origin { grid-template-columns: 1fr; } }
.duo .photo img { inset: 0; height: 100%; }
.duo .photo:nth-child(2) img { object-position: 50% 0; }

.stack .mean .mt { display: grid; gap: 2px; }
.stack .mean .zh { font-size: 14px; font-weight: 500; color: rgba(246, 241, 231, .72); }
.stack .mean .mt { max-width: 300px; white-space: normal; }
.gate { display: flex; align-items: center; justify-content: center; }
.gate i { display: none; }

/* both sides are one box with a badge, an English line and a Chinese line; only the colors say which side is which */
.stack .said-box { background: var(--paper); color: var(--ink-2); border: var(--border); font-weight: 500; }
.stack .said-box .zhu.yi { background: var(--paper-2); color: var(--ink-3); border: 2px solid var(--ink-3); }
.stack .said-box .zh { color: var(--ink-3); }
.stack .mt { max-width: 300px; white-space: normal; }

/* the sounds behind the hero: small rows of words with their pronunciation, drifting in opposite directions */
.hero-rows { position: absolute; inset: 0; overflow: hidden; display: grid; align-content: start; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hrow { height: 38px; overflow: hidden; }
.hrow-track { display: flex; width: max-content; height: 38px; align-items: center; gap: 30px; animation: sound-left var(--dur, 90s) linear infinite; }
.hrow.rev .hrow-track { animation-name: sound-right; }
@keyframes sound-left { to { transform: translateX(-50%); } }
@keyframes sound-right { from { transform: translateX(-50%); } to { transform: none; } }
.hrow span { display: inline-flex; gap: 6px; align-items: baseline; font-size: 12px; line-height: 1; white-space: nowrap; color: var(--ink-3); opacity: .1; }
.hrow b { font-weight: 600; }
.hrow i { font-style: normal; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .hrow-track { animation: none; } }


/* the cursor lights up the words near it: a second copy of the rows, brighter, shown only in a soft circle around the pointer */
.hero-rows--lit { -webkit-mask-image: radial-gradient(circle 190px at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%); mask-image: radial-gradient(circle 190px at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%); }
.hero-rows--lit .hrow span { opacity: .4; color: var(--ink-2); }
.hero-rows--lit .hrow span i { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .hero-rows--lit { display: none; } }

/* ── home: the sections after the hero each get their own shape ─────────────── */

/* Decoded: a rail that runs off the edge of the page, so there is always another one to reach for */
.rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(24px, calc((100vw - var(--w)) / 2 + 24px));
  margin-inline: calc(50% - 50vw); padding: 4px max(24px, calc((100vw - var(--w)) / 2 + 24px)) 18px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > .entry { flex: 0 0 min(372px, 84vw); scroll-snap-align: start; }
.rail:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }


/* parents: a band between two rules, not a card */
.pb-band { padding: clamp(28px, 4vw, 52px) 0; border: 0; border-block: var(--border); border-radius: 0; background: none; }
.pb-band .h2 { font-size: clamp(34px, 4.6vw, 66px); }

/* the closing call, with what happens on it */
.final-cta--home { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.fc-main { display: grid; gap: 22px; justify-items: start; }
.fc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.fc-steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; row-gap: 2px; padding-bottom: 28px; }
.fc-steps li:last-child { padding-bottom: 0; }
.fc-steps li::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: rgba(246, 241, 231, .22); }
.fc-steps li:last-child::before { display: none; }
.fc-n { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(246, 241, 231, .5); color: var(--paper); font-weight: 700; }
.fc-steps b { font-size: 20px; font-weight: 600; align-self: end; }
.fc-steps li > span:last-child { color: rgba(246, 241, 231, .7); font-size: 16px; }
@media (max-width: 860px) { .final-cta--home { grid-template-columns: minmax(0, 1fr); } }
.final-cta--home { grid-template-rows: auto; align-content: normal; row-gap: 0; }

/* the nav runs across the whole top of the page: a paper bar with one ink rule under it */
.site-nav { padding: 0; background: var(--paper); border-bottom: var(--border); }
.site-nav .nav-in { max-width: var(--w); margin-inline: auto; border: 0; border-radius: 0; background: none; padding: 10px 24px; }
@media (max-width: 900px) { .site-nav .nav-in { padding: 8px 16px; } }
/* the three steps spread over the full height of the closing card */
.final-cta--home { align-items: stretch; }
.fc-steps { grid-template-rows: repeat(3, 1fr); align-content: stretch; }
.fc-steps li { align-content: start; padding-bottom: 0; }
.fc-steps li::before { bottom: 12px; }
.fc-steps li:last-child { align-content: start; }
.final-cta--home .fc-steps { align-self: stretch; }
.final-cta--home .fc-main { align-self: center; }
/* steps 1 and 2 stretch to fill the card, step 3 sits at the bottom, so nothing is left empty under it */
.final-cta--home .fc-steps { display: flex; flex-direction: column; grid-template-rows: none; }
.final-cta--home .fc-steps li { flex: 1 1 auto; align-content: start; }
.final-cta--home .fc-steps li:last-child { flex: 0 0 auto; }
.final-cta--home .fc-steps li::before { top: 48px; bottom: 4px; }
@media (max-width: 360px) { .site-nav .nav-in { padding-inline: 12px; } } /* logo, Free call and the menu button fit on one row at 320px */

/* homepage Decoded teasers: three in a row (a snap row on phones), each the screen, its label and the meaning, linking to the full entry */
.entry--teaser { position: relative; cursor: pointer; }
.entry--teaser .entry-body { gap: 10px; padding: 20px 24px 24px; }
.entry--teaser .means { font-size: 18px; }
.entry--teaser .means a { color: inherit; text-decoration: none; }
.entry--teaser .means a:focus-visible { outline: none; }
.entry--teaser:has(.means a:focus-visible) { outline: 2px solid var(--red); outline-offset: 4px; }
.entry--teaser:hover .means a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (max-width: 900px) { .cards.teasers { align-items: stretch; } }

/* inner pages: everything that used to sit side by side now runs down the page */
.why-grid, .check-grid, .analysis, .ask-in, .contact, .final-in { grid-template-columns: minmax(0, 1fr); }
.final-in { align-items: start; }
.analysis { align-items: start; }
.analysis-copy { order: -1; max-width: 680px; } /* the words first, then the screen */
.analysis > :not(.analysis-copy), .check-grid > * { max-width: 760px; }
.ask-in { align-items: start; }
.ask-in > div { max-width: 680px; }
.wrap > .final-cta:only-child .lede { max-width: 56ch; }

/* ── inner pages (body.page-inner): one centered column ─────────────────────
   Short text (titles, section heads, short ledes, buttons, the closing panel) is centered.
   Anything you read for more than a few lines (cards, FAQ, the letter) sits left-aligned inside a centered column. */
.page-inner { --col: 760px; }
.page-inner .page-head, .page-inner .archive-head { position: relative; overflow: hidden; text-align: center; padding-block: clamp(56px, 7vw, 112px) clamp(32px, 4vw, 56px); }
.page-inner .page-head .wrap { position: relative; z-index: 1; justify-items: center; gap: 24px; }
.page-inner .page-head .h1 { max-width: 16ch; margin-inline: auto; font-size: clamp(44px, 6.4vw, 96px); }
.page-inner .page-head .ph-body { display: grid; gap: 16px; justify-items: center; max-width: 640px; margin-inline: auto; }
.page-inner .page-head .lede { max-width: 54ch; margin-inline: auto; font-size: clamp(18px, 1.6vw, 21px); text-wrap: balance; }
.page-inner .ctas { justify-content: center; }
.page-inner .page-head .ctas { margin-top: 8px; }
.page-inner .page-head .micro { text-align: center; }

.page-inner .section-head { justify-items: center; max-width: 820px; margin-inline: auto; text-align: center; }
.page-inner .section-head .lede { margin-inline: auto; text-wrap: balance; }

/* cards keep their own left-aligned text */
.page-inner .pillars, .page-inner .steps { text-align: left; }
.page-inner .faq-grid { display: block; }
.page-inner .faq-grid > .section-head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.page-inner .faq { max-width: var(--col); margin-inline: auto; }

/* coaching: the copy, then the reel under it */
.page-inner .analysis { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(28px, 3.4vw, 44px); }
.page-inner .analysis-copy { order: 0; max-width: 620px; justify-items: center; text-align: center; }
.page-inner .analysis-copy p:not(.eyebrow) { max-width: 52ch; text-wrap: balance; }
.page-inner .analysis .player { width: 100%; max-width: 860px; margin: 0; }
.page-inner .trainer { max-width: 980px; margin-inline: auto; }
.page-inner .tr-note { text-align: center; }

/* prices */
.page-inner .incl { max-width: 64ch; margin: 28px auto 0; text-align: center; text-wrap: balance; }
.page-inner .tier { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) { .page-inner .tier:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--ink); } }
.js .page-inner .tier.reveal .dots i { transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.3s + var(--d, 0) * 60ms); }
.js .page-inner .tier.reveal.in .dots i { transform: none; }

/* decoded */
.page-inner .archive-head .wrap { justify-items: center; }
.page-inner .archive-head .h1 { max-width: 16ch; }
.page-inner .finder { width: 100%; max-width: var(--col); margin: clamp(20px, 2.6vw, 32px) auto 0; justify-items: center; }
.page-inner .finder .search { width: 100%; }
.page-inner .filters { justify-content: center; }
.page-inner .results-line { text-align: center; }
.page-inner .ask-in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 24px; }
.page-inner .ask-in > div { display: grid; gap: 18px; justify-items: center; max-width: 720px; }
.page-inner .ask-in .lede { margin-inline: auto; text-wrap: balance; }
.page-inner .empty { text-align: center; }

/* about */
.page-inner .pull { max-width: 24ch; margin-inline: auto; text-align: center; font-size: clamp(32px, 4.4vw, 60px); }
.page-inner .origin { text-align: left; }
.page-inner .origin-close { max-width: 62ch; margin: 40px auto 0; text-align: center; text-wrap: balance; }
.page-inner .final-in { display: block; }
.page-inner .letter { max-width: 600px; margin-inline: auto; padding: clamp(28px, 4vw, 48px); border: var(--border); border-radius: var(--r-card); background: var(--card); }
.page-inner .letter .duo { margin-top: 12px; }

/* check */
.page-inner .check-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.page-inner .check-grid > * { width: 100%; max-width: var(--col); }

/* community */
.page-inner .wechat { max-width: var(--col); margin: 0 auto; padding: 24px; }
.wechat-h { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -.01em; margin-bottom: 8px; color: var(--ink); }
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin-inline: auto; }
.group-card { display: grid; gap: 10px; align-content: start; padding: 32px; border: var(--border); border-radius: var(--r-card); background: var(--card); }
.group-card h3 { font-family: var(--sans); font-weight: 700; font-size: clamp(22px, 2vw, 26px); letter-spacing: -.015em; }
.group-card p:not(.tier-for) { font-size: 17px; color: var(--ink-2); }
@media (max-width: 760px) { .groups { grid-template-columns: minmax(0, 1fr); } }

/* the example chat */
.chat { max-width: 560px; margin: 0 auto; }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border: var(--border); border-bottom: 0; border-radius: 24px 24px 0 0; background: var(--ink); color: var(--paper); }
.chat-top .mark { width: 22px; height: 22px; color: var(--paper); }
.chat-top b { font-weight: 700; font-size: 16px; }
.chat-top b span { color: var(--red-soft, #E8667F); font-weight: 600; }
.chat-n { margin-left: auto; font-size: 13px; color: rgba(246, 241, 231, .62); }
.chat-log { list-style: none; margin: 0; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; height: 380px; overflow: hidden; border: var(--border); border-radius: 0 0 24px 24px; background: var(--card); text-align: left; }
.chat-log li { display: flex; gap: 10px; align-items: flex-end; max-width: 86%; animation: chat-in .35s cubic-bezier(.3, 1.3, .5, 1) both; }
.chat-log li.me { align-self: flex-end; flex-direction: row-reverse; }
.chat-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2, #E9E1D2); font-weight: 700; font-size: 13px; color: var(--ink-2); }
.chat-log li.me .chat-av { background: var(--ink); color: var(--paper); }
.chat-log li.me .chat-av svg { width: 18px; height: 18px; }
.chat-b { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #fff; border: 1.5px solid var(--rule); font-size: 16px; line-height: 1.45; color: var(--ink); }
.chat-log li.me .chat-b { border-radius: 18px 18px 6px 18px; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chat-b [lang|="zh"] { display: block; margin-top: 2px; font-size: 15px; opacity: .8; }
.chat-typing .chat-b { display: flex; gap: 4px; padding: 14px; }
.chat-typing .chat-b i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .4; animation: chat-dot 1s ease-in-out infinite; }
.chat-typing .chat-b i:nth-child(2) { animation-delay: .15s; }
.chat-typing .chat-b i:nth-child(3) { animation-delay: .3s; }
.chat figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--ink-3); }
@keyframes chat-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes chat-dot { 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .chat-log li, .chat-typing .chat-b i { animation: none; } }
@media (max-width: 520px) { .chat-log { height: 420px; padding: 14px; } .chat-b { font-size: 15px; } }

/* call: the steps light up in turn, like the call moving along */
.steps--live .step::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.steps--live .step.now::after { animation: walk var(--walk, 3.2s) linear both; }
.steps--live .step.done::after { transform: none; }
.steps--live .step::before { transition: color .3s ease; }
.steps--live .step.now::before { color: var(--red); }
@keyframes walk { to { transform: none; } }
.page-inner .contact { grid-template-columns: auto minmax(0, 1fr); max-width: var(--col); margin-inline: auto; padding: 28px; border: var(--border); border-radius: var(--r-card); background: var(--card); }
@media (max-width: 600px) { .page-inner .contact { grid-template-columns: minmax(0, 1fr); } }

/* the closing panel */
.page-inner .final-cta { justify-items: center; text-align: center; }
.page-inner .final-cta .lede { max-width: 48ch; margin-inline: auto; text-wrap: balance; }
@media (max-width: 900px) { .page-inner .final-cta { justify-items: center; } }
.js .steps--live .step.reveal::after, .js .steps--live .step.reveal.in::after { transform: scaleX(0); transition: none; }
.js .steps--live .step.reveal.done::after { transform: none; }
.page-inner .analysis .player { max-width: 760px; }
.page-inner .contact { align-items: center; }
.page-inner .contact .h2 { font-size: clamp(26px, 2.8vw, 36px); }
.page-inner .lede b { font-weight: 600; color: var(--ink); }