/* LingoClipper website — tokens, layout, type, controls, header and footer.
   Colors follow docs/design/README.md: the brand teal comes from AccentColor, and
   --accent-strong is the website-only text accent that keeps AA contrast on white. */

:root {
  --accent: #1A9B85;
  --accent-strong: #12786A;
  --accent-strong-hover: #0F6A5D;
  --on-accent: #FFFFFF;
  --accent-fill: rgba(26, 155, 133, .08);
  --accent-fill-2: rgba(26, 155, 133, .14);
  --accent-line: rgba(26, 155, 133, .30);
  --canvas: #FFFFFF;
  --canvas-2: #F5F5F7;
  --surface: #FFFFFF;
  --elevated: #FFFFFF;
  --chrome: #F7F7F7;
  --text: #1D1D1F;
  --text-2: #6E6E73;
  --text-3: #AEAEB2;
  --border: rgba(0, 0, 0, .06);
  --border-strong: rgba(0, 0, 0, .10);
  --fill: rgba(0, 0, 0, .03);
  --fill-hover: rgba(0, 0, 0, .05);
  --green: #1EA85A;
  --green-fill: rgba(30, 168, 90, .08);
  --green-text: #15803D;
  --red: #D44033;
  --amber: #D49B0E;
  --immersive-top: #133430;
  --immersive-bottom: #0B2320;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-2: 0 2px 12px rgba(0, 0, 0, .08);
  --shadow-3: 0 1px 3px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .12);
  --r-ctl: 6px;
  --r-card: 12px;
  --r-panel: 16px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #22B89A;
    --accent-strong: #22B89A;
    --accent-strong-hover: #3BC9AA;
    --on-accent: #0B2320;
    --accent-fill: rgba(34, 184, 154, .12);
    --accent-fill-2: rgba(34, 184, 154, .20);
    --accent-line: rgba(34, 184, 154, .36);
    --canvas: #1C1C1E;
    --canvas-2: #161618;
    --surface: #2C2C2E;
    --elevated: #3A3A3C;
    --chrome: #2C2C2E;
    --text: #F5F5F7;
    --text-2: #AEAEB2;
    --text-3: #636366;
    --border: rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .12);
    --fill: rgba(255, 255, 255, .04);
    --fill-hover: rgba(255, 255, 255, .07);
    --green: #34D26A;
    --green-fill: rgba(52, 210, 106, .12);
    --green-text: #34D26A;
    --red: #F25C4F;
    --amber: #F0B429;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 2px 12px rgba(0, 0, 0, .35);
    --shadow-3: 0 1px 3px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .45);
  }
}

/* Each script prefers its own system font. Every element that declares a lang re-reads
   --font, so a Japanese sample on an English page still uses Japanese glyphs. */
:lang(zh-Hant) { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang TC", "Heiti TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif; }
:lang(ja) { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Yu Gothic", "Meiryo", sans-serif; line-break: strict; }
:lang(ko) { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Malgun Gothic", sans-serif; word-break: keep-all; overflow-wrap: break-word; }
[lang] { font-family: var(--font); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg.i .fill { fill: currentColor; stroke: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: 16px; top: -48px; z-index: 50; padding: 8px 14px; border-radius: var(--r-ctl); background: var(--accent-strong); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.preview-banner { padding: 8px 20px; background: #FFF4D6; color: #6B4A00; font-size: 13px; font-weight: 600; text-align: center; }
mark.ph { padding: 1px 6px; border-radius: 999px; background: #FFF4D6; color: #6B4A00; font: 600 12px/1.6 var(--font); white-space: nowrap; }

/* layout */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.section { padding: 104px 0; }
.section.tight { padding: 72px 0; }
.band { background: var(--canvas-2); }
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-gap { margin-top: 40px; }
.wide-gap { gap: 64px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.top { align-items: start; }
.center { text-align: center; }
.center .lede, .center .measure { margin-left: auto; margin-right: auto; }
.measure { max-width: 62ch; }

/* type */
.display { font-size: 76px; line-height: 1.02; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.display-page { font-size: 60px; line-height: 1.05; }
:is(:lang(zh), :lang(ja), :lang(ko)) .display, :is(:lang(zh), :lang(ja), :lang(ko)).display { font-size: 64px; line-height: 1.14; letter-spacing: -.01em; }
:is(:lang(zh), :lang(ja), :lang(ko)) .display-page { font-size: 52px; }
.h2 { font-size: 44px; line-height: 1.08; letter-spacing: -.028em; font-weight: 700; text-wrap: balance; }
.h2-small { font-size: 32px; }
:is(:lang(zh), :lang(ja), :lang(ko)) .h2 { font-size: 38px; line-height: 1.22; letter-spacing: 0; }
:is(:lang(zh), :lang(ja), :lang(ko)) .h2-small { font-size: 28px; }
.h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.012em; font-weight: 600; }
.lede { margin-top: 24px; font-size: 21px; line-height: 1.48; color: var(--text-2); letter-spacing: -.006em; max-width: 38ch; text-wrap: pretty; }
:is(:lang(zh), :lang(ja), :lang(ko)) .lede { font-size: 19px; line-height: 1.7; max-width: 34em; letter-spacing: 0; }
.body { font-size: 17px; line-height: 1.6; color: var(--text-2); }
.h2 + .body, .h2 + .lede { margin-top: 20px; }
.small { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.strong { font-weight: 600; color: var(--text); }
.eyebrow { margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--accent-strong); }
.meta { margin-top: 20px; font-size: 14px; color: var(--text-2); }
.note { margin-top: 16px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 0; border-radius: var(--r-card); font-size: 16px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background-color .15s ease-out; }
.btn-primary { background: var(--accent-strong); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong-hover); }
.btn-secondary { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-secondary:hover { background: var(--fill-hover); }
.btn-small { height: 36px; padding: 0 14px; font-size: 14px; border-radius: var(--r-ctl); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.cta-row.centered { justify-content: center; margin: 28px 0 16px; }
.soon { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border-radius: var(--r-card); background: var(--accent-fill); color: var(--accent-strong); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent-line); }
.link { color: var(--accent-strong); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.token { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: var(--r-ctl); font: 600 14px/1 var(--mono); color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong), 0 2px 0 var(--border-strong); }
.token svg.i { width: 16px; height: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text-2); background: var(--fill); box-shadow: inset 0 0 0 1px var(--border); }
.chip.on { color: var(--accent-strong); background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.card { padding: 28px; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-1); }
.card .h3 + .small { margin-top: 10px; }
.list { display: grid; gap: 14px; margin-top: 20px; list-style: none; }
.list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 1.5; }
.list svg { margin-top: 2px; color: var(--accent-strong); }

/* header */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: var(--canvas); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: color-mix(in srgb, var(--canvas) 84%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.header-row { display: flex; align-items: center; gap: 36px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 650; letter-spacing: -.012em; text-decoration: none; color: var(--text); }
.brand img { border-radius: 7px; }
.nav { display: flex; align-items: baseline; gap: 28px; }
.nav > a, .nav-menu summary { font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; }
.nav > a:hover, .nav > a[aria-current="page"], .nav-menu summary:hover, .nav-menu[open] summary, .nav-menu.current summary { color: var(--text); }
/* Product menu: a <details> like the language menu; site.js adds hover opening. */
.nav-menu { position: relative; }
.nav-menu summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary svg.i { width: 14px; height: 14px; transition: transform .15s ease-out; }
.nav-menu[open] summary svg.i { transform: rotate(180deg); }
.nav-panel { position: absolute; left: -12px; top: calc(100% + 14px); z-index: 30; display: grid; min-width: 180px; padding: 6px; border-radius: var(--r-card); background: var(--elevated); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-3); }
/* Bridges the gap under the trigger so the pointer can reach the panel without closing it. */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-panel a { padding: 9px 12px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; }
.nav-panel a:hover { background: var(--fill-hover); }
.nav-panel a[aria-current="page"] { color: var(--accent-strong); font-weight: 600; }
.header-end { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.lang-menu { position: relative; }
.lang-menu summary { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px 0 10px; border-radius: var(--r-ctl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-1); font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; list-style: none; transition: background-color .15s ease-out; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--text); background: var(--fill-hover); }
.lang-menu summary svg.i { width: 16px; height: 16px; color: var(--text-2); }
.lang-menu summary svg.i:last-child { width: 14px; height: 14px; transition: transform .15s ease-out; }
.lang-menu[open] summary svg.i:last-child { transform: rotate(180deg); }
.lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 168px; padding: 6px; border-radius: var(--r-card); background: var(--elevated); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-3); }
.lang-list a { padding: 8px 12px; border-radius: var(--r-ctl); font-size: 14px; color: var(--text); text-decoration: none; }
.lang-list a:hover { background: var(--fill-hover); }
.lang-list a[aria-current="true"] { color: var(--accent-strong); font-weight: 600; }
.menu-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-ctl); background: transparent; cursor: pointer; }
.mobile-menu { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; padding: 8px 20px 20px; border-top: 1px solid var(--border); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 17px; font-weight: 500; text-decoration: none; }
.mobile-group { border-bottom: 1px solid var(--border); }
.mobile-label { padding-top: 12px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.mobile-menu .mobile-group a { padding: 8px 0 12px; border-bottom: 0; }
.mobile-langs { display: flex; flex-wrap: wrap; gap: 2px 18px; padding-top: 12px; }
.mobile-menu .mobile-langs a { padding: 6px 0; border-bottom: 0; font-size: 15px; color: var(--text-2); }
.mobile-menu .mobile-langs a[aria-current="true"] { color: var(--text); font-weight: 600; }

/* footer */
.site-footer { padding: 64px 0 40px; border-top: 1px solid var(--border); background: var(--canvas-2); font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
.foot-grid a:not(.brand) { display: block; margin-bottom: 10px; color: var(--text-2); text-decoration: none; }
.foot-grid a:not(.brand):hover { color: var(--text); }
.foot-h { margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.foot-tagline { max-width: 30ch; margin-top: 14px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 13px; }

/* LingoClipper website — page sections, illustrations and responsive rules. */

/* waveform bar heights (b1–b20 → 5%–100%) */
.b1{height:5%}.b2{height:10%}.b3{height:15%}.b4{height:20%}.b5{height:25%}.b6{height:30%}.b7{height:35%}.b8{height:40%}.b9{height:45%}.b10{height:50%}
.b11{height:55%}.b12{height:60%}.b13{height:65%}.b14{height:70%}.b15{height:75%}.b16{height:80%}.b17{height:85%}.b18{height:90%}.b19{height:95%}.b20{height:100%}

/* hero and Quick Clip demonstration */
.hero { padding-top: 96px; }
.hero-page { padding-bottom: 96px; }
/* Choosing the app comes first: its heading beside the menu bar, lined up with the two columns below. */
.source { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: center; margin-top: 72px; }
.source .menu-card { width: 100%; max-width: 460px; }
/* Quick Clip and whole recordings, side by side under the hero */
.ways { position: relative; margin-top: 72px; padding-bottom: 112px; }
.ways::before { content: ""; position: absolute; left: 0; right: 0; top: 34%; bottom: 0; background: var(--canvas-2); }
.ways > .wrap { position: relative; }
.ways-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 40px; align-items: start; }
/* A subgrid lines up both headings and both illustrations, whatever the caption lengths. */
.way { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 20px; }
.way-head { display: flex; align-items: flex-start; gap: 14px; }
.way-head .token { flex: none; margin-top: 2px; }
.way-title { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.012em; }
.way-head .small { margin-top: 6px; }
.win { position: relative; overflow: hidden; border-radius: var(--r-panel); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-3); }
.win-bar { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--chrome); font-size: 13px; font-weight: 600; color: var(--text-2); }
.dots { display: inline-flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.dots i:nth-child(2) { background: #FEBC2E; }
.dots i:nth-child(3) { background: #28C840; }
.status { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--green-fill); color: var(--green-text); font-size: 12px; font-weight: 600; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.frozen .status { background: var(--accent-fill); color: var(--accent-strong); }
.frozen .status::before { animation: none; }
@keyframes pulse { 50% { opacity: .35; } }
.strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 30px 22px; }
.tc { font: 500 12px/1 var(--mono); color: var(--text-2); letter-spacing: .02em; }
.wave { position: relative; height: 104px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
/* The track holds the same speech twice. It rests with the first copy ending at NOW and scrolls
   one copy to the left, so new audio always arrives from the right. */
.wave-track { position: absolute; top: 0; left: 100%; display: flex; align-items: center; gap: 3px; width: max-content; height: 100%; transform: translateX(-50%); animation: scroll 28s linear infinite; }
.burst { display: contents; }
.wave-track i, .mini-wave i, .seg-wave i { display: block; flex: none; border-radius: 1px; }
.wave-track i { width: 2px; background: var(--text-3); transition: background-color .2s ease-out; }
.wave-track i.hot { background: var(--accent); }
.frozen .wave-track { animation-play-state: paused; }
@keyframes scroll { from { transform: translateX(-50%); } to { transform: translateX(-100%); } }
/* At rest the selection covers the track's last sentence; site.js moves it onto the latest
   complete sentence after each capture. */
.sel { position: absolute; top: 6px; bottom: 6px; right: 36px; width: 117px; border-radius: var(--r-ctl); background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-line); opacity: 0; transform: scaleX(.94); transform-origin: right; transition: opacity .25s ease-out, transform .25s ease-out; }
/* The label sits on a chip so the sentence's tallest bars never run through it. */
.sel-label { position: absolute; top: 5px; left: 5px; padding: 3px 5px; border-radius: 4px; background: var(--surface); font: 600 11px/1 var(--mono); color: var(--accent-strong); letter-spacing: .02em; }
.captured .sel { opacity: 1; transform: none; }
.win-foot { display: flex; align-items: center; gap: 14px; padding: 16px 28px; border-top: 1px solid var(--border); background: var(--fill); font-size: 14px; color: var(--text-2); }
.keycap { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-ctl); cursor: pointer; font: 600 15px/1 var(--mono); color: var(--text); background: linear-gradient(var(--surface), var(--canvas-2)); box-shadow: inset 0 0 0 1px var(--border-strong), 0 2px 0 var(--border-strong), 0 4px 10px rgba(0, 0, 0, .06); transition: transform .15s ease-out, box-shadow .15s ease-out; }
.keycap:hover { box-shadow: inset 0 0 0 1px var(--accent-line), 0 2px 0 var(--border-strong), 0 0 0 4px var(--accent-fill); }
.keycap.pressed { transform: translateY(2px); box-shadow: inset 0 0 0 1px var(--accent-line), 0 0 0 var(--border-strong), 0 0 0 6px var(--accent-fill-2); }
.clip-card { position: relative; margin: 16px 0 0 36px; padding: 22px 24px; border-radius: var(--r-panel); background: var(--elevated); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-3); opacity: 0; transform: translateY(18px); transition: opacity .4s ease-out, transform .4s ease-out; }
.captured .clip-card { opacity: 1; transform: none; }
.clip-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.clip-text { margin-top: 12px; font-size: 19px; line-height: 1.38; font-weight: 600; letter-spacing: -.01em; }
.clip-trans { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.clip-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.play { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-strong); color: var(--on-accent); }
.play svg.i { width: 14px; height: 14px; }
.mini-wave { flex: 1; height: 24px; }
.mini-wave i { background: var(--accent); opacity: .8; }
/* Bars that fill their box: one equal column per bar, so a box placed at a fraction of the bar
   count lands on exactly those bars at any width. */
.mini-wave, .seg-wave { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: 100%; align-items: center; }
.mini-wave i, .seg-wave i { justify-self: center; width: min(2px, 70%); }
.saved { font-size: 12px; font-weight: 600; color: var(--green-text); white-space: nowrap; }
.illustration-note { margin-top: 28px; font-size: 12px; color: var(--text-2); }

/* steps */
.steps, .steps-list { list-style: none; }
.steps-list { display: grid; gap: 18px; margin-top: 24px; }
.step { padding-top: 20px; border-top: 2px solid var(--border-strong); }
.step:first-child { border-top-color: var(--accent); }
.step .num { font: 600 13px/1 var(--mono); color: var(--accent-strong); }
.step .h3 { margin: 14px 0 8px; }
.steps-list .small { margin-top: 8px; }

/* practice tools and sentence illustration */
.tools { display: grid; gap: 22px; margin-top: 40px; }
.tool { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.tool .token { justify-self: start; }
.uses .card .token { margin-bottom: 18px; }
.tool h3 { font-size: 17px; font-weight: 600; }
.tool p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
/* Review screen in miniature: same parts, order and grade colors as the Mac app. */
.rv { display: grid; gap: 14px; }
.rv-bar { display: flex; align-items: center; gap: 12px; }
.rv-back { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 6px; border-radius: var(--r-ctl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); font-size: 12.5px; font-weight: 500; }
.rv-back svg.i { width: 14px; height: 14px; }
.rv-count { font: 500 12px/1 var(--mono); color: var(--text-2); }
.rv-progress { flex: 1; height: 4px; border-radius: 2px; background: var(--fill-hover); overflow: hidden; }
.rv-progress i { display: block; width: 25%; height: 100%; background: var(--accent); }
.rv-eye { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-ctl); color: var(--accent-strong); background: var(--accent-fill); }
.rv-eye svg.i { width: 16px; height: 16px; }
.rv-card { padding: 22px; }
.rv-meta { display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.rv-meta svg.i { width: 13px; height: 13px; }
.rv-meta b { font-weight: 400; color: var(--text-3); }
.rv-player { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.rv-player .play { width: 30px; height: 30px; background: var(--accent); }
.rv-wave { height: 28px; }
.rv-wave i { background: var(--text-3); opacity: 1; }
.rv-wave .burst i:nth-child(-n+15) { background: var(--accent); }
.rv-time, .rv-rate { font: 500 12px/1 var(--mono); color: var(--text-2); white-space: nowrap; }
.rv-rule { flex: none; width: 1px; height: 20px; background: var(--border-strong); }
.rv-rate { padding: 6px 7px; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 1px var(--border-strong); }
.rv-loop { display: inline-flex; padding: 5px; border-radius: var(--r-ctl); color: var(--accent-strong); background: var(--accent-fill); }
.rv-loop svg.i { width: 16px; height: 16px; }
.rv-label { display: flex; justify-content: space-between; margin-top: 20px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.rv-text { margin-top: 6px; font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.rv-trans { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.rv-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 22px; overflow: hidden; border-radius: var(--r-card); background: var(--border-strong); box-shadow: 0 0 0 1px var(--border-strong); }
.rv-grade { position: relative; display: grid; justify-items: center; gap: 3px; padding: 15px 4px 12px; background: linear-gradient(var(--surface), var(--canvas)); }
.rv-grade::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: currentColor; }
.rv-grade b { font-size: 14px; font-weight: 600; }
.rv-grade small { font-size: 11.5px; color: var(--text-2); }
.rv-grade kbd { position: absolute; top: 6px; right: 6px; min-width: 0; padding: 1px 4px; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1px var(--border-strong); font: 600 10px/1.3 var(--mono); color: var(--text-2); }
.rv-grade.again { color: var(--red); }
.rv-grade.hard { color: var(--amber); }
.rv-grade.easy { color: var(--green); }
.rv-grade.good { color: var(--on-accent); background: var(--accent); }
.rv-grade.good::before { background: rgba(255, 255, 255, .55); }
.rv-grade.good small, .rv-grade.good kbd { color: rgba(255, 255, 255, .85); }
.rv-grade.good kbd { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.seg-card { padding: 0; overflow: hidden; }
.seg-wave { position: relative; height: 120px; margin: 24px 24px 0; }
.seg-wave i { background: var(--text-3); }
.seg-box { position: absolute; top: 8px; bottom: 8px; border-radius: var(--r-ctl); background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-line); }
.seg-box b { position: absolute; top: 6px; left: 6px; font: 600 10px/1 var(--mono); color: var(--accent-strong); }
.seg-box.on { background: var(--accent-fill-2); box-shadow: inset 0 0 0 2px var(--accent); }
/* Each box spans one sentence's bars plus a bar of pause on either side: EPISODE (140 bars) in
   components.mjs for p1–p4, the iPhone card's 70 bars for m1–m3. */
.seg-box.p1 { left: calc(100% * 5 / 140); width: calc(100% * 29 / 140); }
.seg-box.p2 { left: calc(100% * 41 / 140); width: calc(100% * 31 / 140); }
.seg-box.p3 { left: calc(100% * 77 / 140); width: calc(100% * 24 / 140); }
.seg-box.p4 { left: calc(100% * 106 / 140); width: calc(100% * 29 / 140); }
.seg-box.m1 { left: calc(100% * 3 / 70); width: calc(100% * 15 / 70); }
.seg-box.m2 { left: calc(100% * 24 / 70); width: calc(100% * 20 / 70); }
.seg-box.m3 { left: calc(100% * 49 / 70); width: calc(100% * 17 / 70); }
.seg-list { margin-top: 20px; border-top: 1px solid var(--border); }
.seg-row { display: grid; grid-template-columns: 28px 100px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 24px; border-bottom: 1px solid var(--border); font-size: 14px; }
.seg-row:last-child { border-bottom: 0; }
.seg-row.on { background: var(--accent-fill); }
.seg-row .n { font: 600 12px/1 var(--mono); color: var(--accent-strong); }
.seg-row .tm { font: 500 12px/1 var(--mono); color: var(--text-2); }
.seg-row small { display: block; margin-top: 4px; font-size: 13px; color: var(--text-2); }

/* follow-along band */
.immersive { color: #FFFFFF; background: linear-gradient(180deg, var(--immersive-top), var(--immersive-bottom)); }
.immersive .eyebrow { color: #5FD4BA; }
.immersive .body { max-width: 40ch; color: rgba(255, 255, 255, .7); }
.player { border-radius: var(--r-panel); background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ladder { min-height: 360px; padding: 36px 32px 28px; }
.line { padding: 10px 0; transition: opacity .35s ease-out; }
.line .src { font-size: 22px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
.line .tr { margin-top: 4px; font-size: 15px; color: rgba(255, 255, 255, .64); }
.line[data-d="0"] { opacity: 1; } .line[data-d="1"] { opacity: .62; } .line[data-d="2"] { opacity: .38; } .line[data-d="3"] { opacity: .22; } .line[data-d="4"] { opacity: .12; }
.transport { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0 0 var(--r-panel) var(--r-panel); background: rgba(0, 0, 0, .2); }
.transport button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #FFFFFF; cursor: pointer; }
.transport button:hover { background: rgba(255, 255, 255, .16); }
.transport :focus-visible { outline-color: #5FD4BA; }
.track { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.track .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 2px; background: #22B89A; transition: width .35s ease-out; }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: var(--r-ctl); font: 600 12px/1 var(--mono); color: #FFFFFF; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pill svg.i { width: 14px; height: 14px; }

/* devices and review cards */
.devices { display: flex; align-items: flex-end; justify-content: center; gap: 40px; margin-top: 56px; text-align: left; }
.mac-win { width: min(560px, 100%); }
.today { padding: 28px; }
.today-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.today-num { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.phone { flex: none; width: 220px; padding: 10px; border-radius: 36px; background: #1C1C1E; box-shadow: var(--shadow-3); }
.phone-large { width: 270px; }
.phone-stage { display: flex; justify-content: center; }
.phone-screen { min-height: 400px; padding: 44px 16px 16px; border-radius: 28px; overflow: hidden; background: var(--canvas); color: var(--text); }
.phone-large .phone-screen { min-height: 480px; }
.phone-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.seg-wave-mini { height: 84px; margin: 18px 0 0; }
.review-mini, .mini-card { margin-top: 14px; padding: 14px; }
.mini-card { padding: 12px 14px; margin-top: 8px; }
.mini-card.on { box-shadow: inset 0 0 0 2px var(--accent); }
.review-src { font-size: 16px; font-weight: 600; line-height: 1.4; }
.review-card .review-src { margin-top: 18px; font-size: 22px; }
.review-card .small:last-of-type { margin-top: 8px; }
.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.rate span { display: flex; align-items: center; justify-content: center; height: 32px; border-radius: var(--r-ctl); background: var(--fill); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; font-weight: 600; }
.rate span.on { background: var(--accent-strong); color: var(--on-accent); box-shadow: none; }
.menu-card { padding: 0; overflow: hidden; }
.menu-body { display: grid; gap: 16px; padding: 28px; }
.mc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-row.fabs { justify-content: flex-start; margin-top: 8px; }
.fab { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; }
.fab-clip { background: var(--accent-strong); color: var(--on-accent); }
.fab-rec { background: var(--surface); box-shadow: inset 0 0 0 2px var(--red); }
.fab-rec i { width: 14px; height: 14px; border-radius: 50%; background: var(--red); }

/* plans, tables, FAQ */
.plan .price { margin: 14px 0 6px; font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.plan.pro { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-2); }
.offer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; padding: 18px 22px; border-radius: var(--r-card); background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-line); }
.offer strong { color: var(--accent-strong); }
.details-list .list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 56px; margin-top: 28px; }
.table-wrap { margin-top: 24px; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 16px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table thead th { font-size: 13px; font-weight: 600; color: var(--text-2); }
.table tbody th { font-weight: 500; }
.table td { color: var(--text-2); }
.table .c { text-align: center; }
.table .yes { color: var(--accent-strong); font-weight: 600; }
.specs tbody th { white-space: nowrap; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { margin-top: 3px; color: var(--text-2); transition: transform .25s ease-out; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--text-2); line-height: 1.6; }
.closing-icon { margin: 0 auto 24px; border-radius: 15px; }

/* fact sheet */
.facts { max-width: 860px; }
.facts .small { margin-top: 12px; }
.fact-list { margin-top: 40px; border-top: 1px solid var(--border); }
.fact { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.fact dt { font-size: 14px; font-weight: 600; }
.fact dd { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.fact dd ul { display: grid; gap: 6px; padding-left: 18px; }
.fact dd a { color: var(--accent-strong); }
.copy-title { margin-top: 56px; }
.copy-box { display: flex; align-items: flex-start; gap: 20px; margin-top: 16px; padding: 20px 22px; border-radius: var(--r-card); background: var(--canvas-2); font-size: 15px; line-height: 1.6; }
.copy-box p { flex: 1; }
.notices-intro { margin-top: 16px; }
.notices-title { margin-top: 48px; }
.notices { margin-top: 16px; padding: 24px; overflow-x: auto; border-radius: var(--r-card); background: var(--canvas-2); font: 12px/1.6 var(--mono); color: var(--text-2); white-space: pre-wrap; }

/* help center and privacy policy */
.prose { max-width: 720px; }
.prose .lede { max-width: none; }
.prose .h2 + .small { margin-top: 14px; }
.breadcrumb { margin-bottom: 18px; font-size: 14px; font-weight: 600; }
.breadcrumb a { color: var(--accent-strong); text-decoration: none; }
.breadcrumb a::before { content: "‹ "; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose-section { margin-top: 44px; }
.prose-section > * + * { margin-top: 14px; }
.prose-section > .h3 + * { margin-top: 10px; }
.prose-section p, .prose-section li { font-size: 17px; line-height: 1.65; }
.prose-section strong { font-weight: 600; }
.prose-section ul, .prose-section ol { display: grid; gap: 10px; padding-left: 22px; }
.prose-section li::marker { color: var(--text-2); }
.prose-section ol > li::marker { color: var(--accent-strong); font-weight: 600; }
.prose-note { margin-top: 20px; padding: 14px 18px; border-radius: var(--r-ctl); background: var(--accent-fill); box-shadow: inset 3px 0 0 var(--accent); font-size: 15px; line-height: 1.6; }
.ui { font-weight: 600; }
kbd { display: inline-block; min-width: 1.7em; padding: 0 6px; border-radius: 5px; font: 600 14px/1.6 var(--font); text-align: center; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong), 0 1px 0 var(--border-strong); }
/* Help center index: guides, then questions, with jump links to each part. */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.jump a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; transition: background-color .15s ease-out; }
.jump a:hover { background: var(--fill-hover); }
.help-part { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--border); }
.help-part + .help-group { margin-top: 20px; }
.help-group + .faq { margin-top: 4px; }
/* Contact page */
.contact .contact-box, .contact .grid { max-width: 880px; }
.contact-box { align-items: center; margin-top: 32px; }
.contact-box > div:first-child { flex: 1; }
.contact-address { margin-top: 2px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.contact-link { color: var(--text); text-decoration: none; }
.contact-link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; }
.contact-box .cta-row { flex: none; margin-top: 0; }
.avoid .list svg { color: var(--text-2); }
.more-link { display: inline-block; margin-top: 20px; }
.help-contact { margin-top: 56px; padding: 24px 28px; border-radius: var(--r-card); background: var(--canvas-2); }
.help-contact p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.help-group { margin-top: 48px; }
.help-cards { margin-top: 16px; }
.help-card { display: block; color: var(--text); text-decoration: none; transition: box-shadow .15s ease-out; }
.help-card:hover { box-shadow: inset 0 0 0 1px var(--accent-line), var(--shadow-2); }

/* responsive */
@media (max-width: 960px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split.flip { grid-template-columns: 1fr; gap: 40px; }
  .display { font-size: 60px; }
  /* CJK home title lines (about eleven characters) keep their phrase break and shrink with the column. */
  :is(:lang(zh), :lang(ja), :lang(ko)) .display:not(.display-page) { font-size: min(64px, (100vw - 80px) / 11.5); }
  .source { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .ways-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 56px; }
  .way { display: block; }
  .way-head { margin-bottom: 20px; }
  /* Seven languages and a language menu no longer fit one row on tablets. */
  .nav, .header-end .lang-menu { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .section { padding: 72px 0; }
  .section.tight { padding: 56px 0; }
  .header-end .btn { display: none; }
  .hero { padding-top: 56px; }
  .hero-page { padding-bottom: 64px; }
  .display, .display-page { font-size: 44px; letter-spacing: -.03em; }
  .display:not(:lang(zh), :lang(ja), :lang(ko)) br { display: none; }
  :is(:lang(zh), :lang(ja), :lang(ko)) .display, :is(:lang(zh), :lang(ja), :lang(ko)) .display-page { font-size: 38px; }
  :is(:lang(zh), :lang(ja), :lang(ko)) .display:not(.display-page) { font-size: min(38px, (100vw - 40px) / 11.5); }
  .h2 { font-size: 32px; }
  :is(:lang(zh), :lang(ja), :lang(ko)) .h2 { font-size: 28px; }
  .lede { font-size: 18px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .wide-gap { gap: 48px; }
  .cta-row .btn, .cta-row .soon { width: 100%; }
  .source, .ways { margin-top: 48px; }
  .ways { padding-bottom: 72px; }
  .strip { grid-template-columns: 1fr; gap: 10px; padding: 24px 16px; }
  .strip .tc { display: none; }
  .wave { height: 80px; }
  .win-foot { flex-wrap: wrap; padding: 14px 16px; }
  .clip-card { margin: 12px 0 0 12px; }
  .illustration-note { margin-top: 16px; }
  .tool { grid-template-columns: 1fr; gap: 8px; }
  .devices { flex-direction: column; align-items: center; }
  .fact { grid-template-columns: 1fr; gap: 6px; }
  .copy-box { flex-direction: column; }
  .contact-box { align-items: stretch; }
  .help-contact { padding: 20px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .ladder { min-height: 300px; padding: 24px 20px; }
  .line .src { font-size: 18px; }
  .details-list .list { grid-template-columns: 1fr; }
  .rv-card { padding: 18px 16px; }
  .rv-time, .rv-rule { display: none; }
  .seg-row { grid-template-columns: 24px minmax(0, 1fr); }
  .seg-row .tm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* iOS policy: an independent reading surface using the existing website tokens. */
.ios-policy .prose { max-width: 740px; }
.ios-policy-toc { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 32px 0 48px; padding: 24px 0; border-block: 1px solid var(--border-strong); font-size: 14px; }
.ios-policy-toc a { color: var(--accent-strong); text-decoration: none; }
.ios-policy-toc a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ios-policy .prose-section { scroll-margin-top: 96px; }
.ios-policy-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
@media (max-width: 600px) {
  .ios-policy-toc { gap: 12px 20px; margin-bottom: 32px; }
  .ios-policy-footer { flex-direction: column; }
}

.ios-policy-header .header-end .lang-menu { display: block; }

/* Keep support contact prominent while sharing the established iOS reading surface. */
.ios-support-contact { margin: 32px 0 40px; padding: 24px; border-radius: var(--r-card); background: var(--canvas-2); }
.ios-support-contact .contact-address { margin-top: 0; font-size: clamp(18px, 4vw, 28px); }
.ios-support-contact .small { margin-bottom: 0; }