/* Smooth AI — dark, warm, playful-through-objects. One file. */
:root {
  color-scheme: dark;
  /* canvas + lifted surfaces + hairlines */
  --bg: #0d0d0c; --s1: #171715; --s2: #22221f; --s3: #31312c; --card: #262622; --card-hi: #2c2c28;
  --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.16); --ring: rgba(255,255,255,.09);
  /* ink: light, secondary (7.7:1 on --bg), tertiary (>=4.6:1 on --s2) */
  --ink: #f3f2ee; --ink2: #b0ada5; --ink3: #9e9b93;
  --y: #fccd45; --y2: #ffd966; --ysoft: rgba(252,205,69,.17); --on-y: #141412;
  --band: var(--s1);
  --f: "Schibsted Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* crisp 1px rings; the soft dark drop only separates cards from the call underneath */
  --sh: inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 1px rgba(255,255,255,.1), 0 26px 50px -26px rgba(0,0,0,.95);
  --sh-lift: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.24), 0 30px 56px -24px rgba(0,0,0,.95);
  --ease: cubic-bezier(.2,.7,.2,1);
  --navh: 68px;
  /* motion tokens: durations + three easings (soft ease-out, spring, gentle in-out) */
  --t1: .25s; --t2: .5s; --t3: .8s; --t4: 1.2s;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --e-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 20.3%, 1.043 24.8%, 1.035 29.4%, 1.007 38.2%, 0.996 51.3%, 1); }
}
html[data-lang="ko"] { --f: "Schibsted Grotesk", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; }
html[data-lang="ja"] { --f: "Schibsted Grotesk", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; }
html[data-lang="zh"] { --f: "Schibsted Grotesk", "Noto Sans SC", "PingFang SC", sans-serif; }
html[data-lang="th"] { --f: "Schibsted Grotesk", Anuphan, "Thonburi", sans-serif; }
html[data-lang="ru"] { --f: "Golos Text", "Schibsted Grotesk", -apple-system, sans-serif; }
html[data-lang="vi"] { --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--navh) + 16px); background: var(--bg); }
html.rm { scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; text-rendering: optimizeLegibility; }
html[data-lang="ko"] body { word-break: keep-all; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--y); color: var(--on-y); }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
.ink { color: var(--ink); font-weight: 600; }

/* ---------- type ---------- */
.h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -.034em; font-weight: 640; text-wrap: balance; }
.h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; letter-spacing: -.026em; font-weight: 620; text-wrap: balance; }
.h2-big { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.06; letter-spacing: -.032em; }
html[data-lang="ko"] .h1, html[data-lang="ja"] .h1, html[data-lang="zh"] .h1 { letter-spacing: -.02em; line-height: 1.16; }
html[data-lang="ko"] .h2, html[data-lang="ja"] .h2, html[data-lang="zh"] .h2 { letter-spacing: -.015em; line-height: 1.25; }
.lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--ink2); max-width: 34em; text-wrap: pretty; }
.body { font-size: 17.5px; line-height: 1.65; color: var(--ink2); max-width: 34em; text-wrap: pretty; }
.label { font-size: 15px; font-weight: 560; color: var(--ink); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--y); flex: none; }
.micro { font-size: 14px; color: var(--ink2); line-height: 1.5; }
/* highlight = a yellow marker stroke under the words (light text stays fully legible on the dark canvas) */
.mk { background: linear-gradient(transparent 82%, var(--y) 82%, var(--y) 96%, transparent 96%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em; }
.new { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink); line-height: 1.2; }

/* ---------- layout ---------- */
.col { width: min(100% - 40px, 860px); margin: 0 auto; text-align: center; }
.col-n { width: min(100% - 40px, 720px); }
.col .lede, .col .body { margin-left: auto; margin-right: auto; }
.band { background: var(--band); }
/* nothing a card does (tilt, parallax, playheads) can widen the page */
main { overflow-x: clip; }

/* ---------- buttons ---------- */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-size: 16.5px; font-weight: 600; text-decoration: none; letter-spacing: -.005em; border: 0; cursor: pointer; transition: background-color .25s, box-shadow .25s, transform .35s var(--ease); }
.btn-y { background: var(--y); color: var(--on-y); }
.btn-y:hover { background: var(--y2); transform: translateY(-1px); }
.btn-o { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
.btn-o:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); transition: box-shadow .3s; }
html.is-scrolled .nav { box-shadow: 0 1px 0 var(--line); }
.nav-in { height: var(--navh); width: min(100% - 40px, 1200px); margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.brand { white-space: nowrap; flex: none; min-width: 44px; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 650; font-size: 17px; letter-spacing: -.01em; min-height: 44px; color: var(--ink); }
/* the mascot alone is the mark: no tile, no box */
.brand img { width: 30px; height: 28px; margin-top: -2px; }
.nav-links { display: flex; gap: 6px; margin-left: 20px; }
.nav-links a { text-decoration: none; color: var(--ink2); font-size: 15px; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: transparent; border: 1px solid var(--line2); font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .2s; }
.lang-btn:hover { border-color: rgba(255,255,255,.34); }
.lang-btn #lang-v { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-btn .chev { transition: transform .25s; }
.lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 220px; max-height: min(70vh, 560px); overflow: auto; background: var(--s1); border-radius: 16px; box-shadow: var(--sh); padding: 6px; }
.lang-pop button { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border: 0; background: none; border-radius: 10px; font-size: 15px; cursor: pointer; text-align: left; color: var(--ink); }
.lang-pop button:hover, .lang-pop button:focus-visible { background: var(--s3); outline: none; }
.lang-pop button[aria-selected="true"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--y); }

/* ---------- objects (cards that float) ---------- */
.stage { position: relative; margin: 0 auto; }
.obj { position: absolute; }
.tilt { transform-style: flat; will-change: transform; }
.float { position: relative; }
.mo .float { animation: fl 7.2s var(--e-io) infinite; --fa: -6px; --fra: .35deg; }
.mo .f2 { animation-duration: 8.4s; animation-delay: -2.2s; --fa: -5px; --fra: -.3deg; }
.mo .f3 { animation-duration: 6.3s; animation-delay: -4.1s; --fa: -7px; --fra: .45deg; }
.mo .f4 { animation-duration: 9s; animation-delay: -1.3s; --fa: -4px; --fra: -.25deg; }
@keyframes fl { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, var(--fa), 0) rotate(var(--fra)); } }
/* dark product UI, like the real app */
.card { position: relative; background: var(--card); color: var(--ink); border-radius: 18px; box-shadow: var(--sh); font-size: 15px; line-height: 1.5; text-align: left; }
.card::after, .tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--sh-lift); opacity: 0; transition: opacity .5s; pointer-events: none; }
.obj.lift .card::after, .obj.lift .tile::before { opacity: 1; }

.tile { position: relative; border-radius: 22px; box-shadow: var(--sh); background: var(--s2); }
.tile img { width: 100%; height: auto; border-radius: inherit; }
.tile figcaption { position: absolute; left: 12px; bottom: 12px; background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; line-height: 1.3; }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--y); opacity: 0; transition: opacity .4s; }
.tile.on::after { opacity: 1; }
.bars { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--y); opacity: 0; transition: opacity .4s; }
.bars i { width: 3px; height: 12px; border-radius: 2px; background: var(--on-y); transform-origin: 50% 50%; }
.tile.on .bars { opacity: 1; }
.mo .tile.on .bars i { animation: bar .9s ease-in-out infinite; }
.mo .tile.on .bars i:nth-child(2) { animation-delay: -.3s; }
.mo .tile.on .bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

.chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 14px; border-radius: 999px; font-size: 14px; white-space: nowrap; color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--y); flex: none; box-shadow: 0 0 0 3px var(--ysoft); }
.mo .dot { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.7); } }
.who { font-size: 13px; font-weight: 600; color: var(--ink); }
.meta { font-size: 12.5px; color: var(--ink3); }
.trl { color: var(--ink2); font-size: 14px; line-height: 1.55; margin-top: 4px; }
.pill-y { display: inline-flex; align-items: center; gap: 6px; background: var(--y); color: var(--on-y); font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; line-height: 1.3; }
.pill-y .dot { background: var(--on-y); box-shadow: none; }
.pill-l { display: inline-flex; align-items: center; gap: 7px; background: var(--s3); color: var(--ink2); font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; line-height: 1.3; }

/* mascot */
.mascot { width: 100%; height: auto; overflow: visible; }
.peek { position: absolute; top: -50px; right: 44px; width: 70px; z-index: 0; }
.peek .mascot { transform: translate3d(0, 0, 0) rotate(8deg); }
.mo .peek .mascot { transform: translate3d(0, 46px, 0) rotate(8deg); transition: transform 1s cubic-bezier(.3,1.35,.5,1) .9s; }
.mo.ready .peek .mascot { transform: translate3d(0, 0, 0) rotate(8deg); }
.cap { z-index: 1; }

/* ---------- 1 · hero: the real call, with Smooth AI floating on top ---------- */
.hero { padding: clamp(28px, 4vh, 52px) 0 clamp(36px, 5vh, 56px); }
.hero-copy .h1 { max-width: 13em; margin: 0 auto; }
.hero-copy .lede { margin-top: 18px; }
.hero-cta { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stage-hero { width: min(100% - 40px, 1140px); height: 540px; margin-top: clamp(24px, 3.4vh, 36px); }
.call { position: absolute; left: 11%; top: 0; width: 78%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--ring); }
.call video { width: 100%; height: 100%; object-fit: cover; }
.o-sarah { left: 1.5%; top: 252px; width: 19%; z-index: 2; }
.o-me { right: 2%; top: 46px; width: 16.5%; z-index: 2; }
.o-topic { left: 16.5%; top: 48px; z-index: 2; }
.o-cap { left: calc(50% - 265px); top: 238px; width: 530px; z-index: 3; }
.cap { padding: 22px 24px 24px; min-height: 176px; }
.cap-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cap-b, .cap-h .who { transition: opacity var(--t2) var(--e-out), transform var(--t2) var(--e-out); }
.cap.out .cap-b, .cap.out .cap-h .who { opacity: 0; transform: translate3d(0, 6px, 0); }
.cap-en { font-size: 20px; line-height: 1.42; font-weight: 520; letter-spacing: -.01em; color: var(--ink); }
.cap .trl { font-size: 15.5px; margin-top: 8px; }

/* ---------- 2 · proof strip ---------- */
.strip { width: min(100% - 40px, 1140px); margin: 0 auto; padding: 0 0 clamp(8px, 2vh, 24px); }
.facts { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr) minmax(0, 1.3fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts li { padding: 20px 28px; font-size: 16px; line-height: 1.45; color: var(--ink2); display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 92px; }
.facts li + li { border-left: 1px solid var(--line); }
.facts li > span { min-width: 0; }
/* the figure itself, set large inside its own (verbatim) sentence */
.facts b { color: var(--ink); font-size: 28px; font-weight: 640; letter-spacing: -.03em; line-height: 1; padding: 0 .08em; }
.facts li > b { flex: none; padding: 0; }
.fx-l { font-size: 13.5px; line-height: 1.6; }
.fx-l i { font-style: normal; opacity: .5; }
.logos { margin: 30px auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 60px; }
.logos img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .8; }
.logos li.keep img { height: 32px; }

/* ---------- 3 · pain ---------- */
.pain { padding: clamp(54px, 8vh, 90px) 0 clamp(42px, 6vh, 72px); }
.pain .h2 { font-size: clamp(26px, 2.8vw, 36px); color: var(--ink); }
.pain-l { margin-top: 30px; text-align: left; }
.pain-l li { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.45; padding: 20px 0; border-top: 1px solid var(--line); letter-spacing: -.01em; display: flex; gap: 18px; }
.pain-l li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink2); margin-top: .62em; flex: none; }
.pain-l li:last-child { border-bottom: 1px solid var(--line); }
.pain-end { margin-top: 30px; font-size: clamp(20px, 2vw, 24px); font-weight: 560; letter-spacing: -.01em; }

/* ---------- 4 · features ---------- */
.feat { display: flex; align-items: center; padding: clamp(40px, 6vh, 72px) 0; }
.feat-in { width: min(100% - 40px, 1280px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(32px, 4.4vw, 72px); align-items: center; }
.feat-r .feat-copy { order: 2; }
.feat-r .feat-in { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); }
.feat-copy .body { margin-top: 20px; }
.feat .h2 { font-size: clamp(30px, 3.1vw, 42px); }
.stage-f1, .stage-f2, .stage-f3 { width: 100%; height: 640px; }
/* f1: Sarah speaks, the transcript streams, the recap builds alongside */
.stage-f1 .o-a { left: 0; top: 26px; width: 27%; z-index: 1; }
.stage-f1 .o-c { right: 0; top: 0; width: 60%; z-index: 1; }
.stage-f1 .o-b { left: 13%; top: 196px; width: 83%; z-index: 2; }
/* f2: Sarah asks, the question is caught, a reply appears, the ghost says read it */
.stage-f2 .o-d { right: 1%; top: 0; width: 31%; z-index: 1; }
.stage-f2 .o-a { left: 0; top: 58px; width: 60%; z-index: 2; }
.stage-f2 .o-b { left: 17%; top: 268px; width: 79%; z-index: 3; }
.stage-f2 .o-c { left: 0; top: 508px; z-index: 4; }
/* f3: the question you answer, you speak your language, English comes out in your voice */
.stage-f3 .o-d { left: 0; top: 6px; width: 56%; z-index: 1; }
.stage-f3 .o-a { right: 0; top: 34px; width: 27%; z-index: 1; }
.stage-f3 .o-b { left: 5%; top: 170px; width: 80%; z-index: 2; }
.stage-f3 .o-c { left: 46%; top: 548px; z-index: 3; }

/* transcript */
.tx { padding: 8px 0 10px; }
.tabs { display: flex; gap: 18px; padding: 10px 22px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink3); }
.tabs span:first-child { color: var(--ink); font-weight: 600; box-shadow: 0 2px 0 var(--y); }
.tx-top { padding: 14px 22px 4px; font-size: 13px; color: var(--ink3); }
.row { padding: 12px 22px; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
.row .who { padding-top: 2px; }
.row .en { color: var(--ink); font-size: 15px; line-height: 1.5; }
.row.now { position: relative; }
.row.now::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--y); }

/* live recap */
.recap { padding: 18px 22px 20px; }
.rc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rc-t { font-size: 16px; font-weight: 620; letter-spacing: -.01em; line-height: 1.35; }
.rc-l { margin-top: 8px; display: grid; gap: 6px; }
.rc-l li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.rc-l li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink3); margin-top: .62em; flex: none; }

/* question + suggestion */
.q { padding: 20px 22px 20px; }
.q-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.q-h .meta { margin-left: auto; }
.av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.q-t { font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.q .pill-y { position: absolute; top: -13px; right: 20px; box-shadow: 0 0 0 3px var(--bg); }
.q-sm { padding: 16px 20px 18px; }
.q-sm .q-t { font-size: 15.5px; }
.sug { padding: 20px 22px 18px; }
.sug-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.sug-h .meta { font-weight: 600; color: var(--ink2); font-size: 13px; }
.sug-t { font-size: 18.5px; line-height: 1.45; font-weight: 520; letter-spacing: -.01em; }
.sug-f { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink2); }
.say { display: flex; align-items: flex-end; gap: 10px; }
.say-g { width: 60px; flex: none; }
.say-b { position: relative; background: var(--s2); color: var(--ink); border-radius: 16px 16px 16px 4px; box-shadow: var(--sh); padding: 11px 16px; font-size: 15px; font-weight: 560; max-width: 11.5em; line-height: 1.4; margin-bottom: 26px; }

/* voice interpretation */
.vc { padding: 18px 22px 20px; overflow: hidden; }
.vc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vc-h .st { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.vc-h .tm { font-size: 13px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.vc-dir { font-size: 13px; color: var(--ink2); margin: 4px 0 16px; }
.vc-said { font-size: 17px; line-height: 1.5; color: var(--ink); }
.wave { position: relative; display: flex; align-items: center; gap: 3px; height: 40px; margin: 14px 0; }
.wave i { flex: 1; display: flex; height: var(--h); max-height: 100%; min-height: 3px; transform-origin: 50% 50%; }
.wave i b { flex: 1; border-radius: 2px; background: var(--y); transform-origin: 50% 50%; }
@keyframes wv { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
.vc-out { font-size: 18px; line-height: 1.45; font-weight: 540; letter-spacing: -.01em; }
.vc-f { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--ink2); }
.vc-f .ck { color: var(--y); }
.ck { width: 16px; height: 16px; flex: none; }

/* ---------- 5 · after ---------- */
.after { padding: clamp(54px, 8vh, 90px) 0 clamp(36px, 6vh, 72px); }
.after .label, .pricing .label, .see .label { justify-content: center; }
.after .body { margin-top: 20px; }
.stage-after { width: min(100% - 40px, 1160px); height: 620px; margin-top: 48px; }
.stage-after .o-a { left: 2%; top: 30px; width: 40%; }
.stage-after .o-b { left: 39%; top: 236px; width: 38.5%; z-index: 3; }
.stage-after .o-c { right: 0; top: -24px; width: 23%; }
.notes { padding: 22px 24px; }
.notes-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.notes-h b { font-size: 17px; font-weight: 640; letter-spacing: -.01em; }
.notes h4, .pol h4 { margin: 14px 0 4px; font-size: 13.5px; font-weight: 640; }
.notes p { font-size: 14px; color: var(--ink2); line-height: 1.5; }
.act { display: flex; gap: 10px; align-items: baseline; margin-top: 6px; font-size: 14px; color: var(--ink2); }
.act .pill-l { flex: none; color: var(--ink); }
.pol { padding: 20px 24px 22px; }
.pol .msg { font-size: 15px; line-height: 1.5; margin-top: 3px; }
.pol .mine { color: var(--ink2); }
.pol .sep { height: 1px; background: var(--line); margin: 14px 0; }
.pol .nat-l { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.pol .nat { font-size: 18.5px; line-height: 1.5; font-weight: 540; letter-spacing: -.01em; }
.pol .nat span { background: var(--ysoft); box-shadow: 0 0 0 3px var(--ysoft); border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pol .coach { margin-top: 14px; font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
.pol .coach b { color: var(--ink); font-weight: 600; }
.score { padding: 18px 20px 20px; }
.score .meta { margin-bottom: 2px; }
.score-t { font-size: 13.5px; font-weight: 600; }
.ring { position: relative; width: 104px; height: 104px; margin: 14px auto 8px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; font-weight: 680; letter-spacing: -.03em; }
.score-d { text-align: center; font-size: 12.5px; color: var(--ink2); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.stats b { display: block; font-size: 16px; font-weight: 640; }
.stats span { font-size: 12px; color: var(--ink3); }

/* ---------- 5b · see it live ---------- */
.see { padding: clamp(36px, 6vh, 72px) 0 clamp(54px, 8vh, 90px); }
.see .body { margin-top: 20px; }
.clips { width: min(100% - 40px, 1000px); margin: 36px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.clip { min-width: 0; }
.clip-f { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--s2); box-shadow: 0 0 0 1px var(--ring); }
.clip-f video { width: 100%; height: 100%; object-fit: cover; }
.clip-f::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--y); opacity: 0; transition: opacity .4s; pointer-events: none; }
.clip.on .clip-f::after { opacity: 1; }
.clip-b { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: inherit; }
.clip-b:focus-visible { outline-offset: -4px; border-radius: 22px; }
.pb { width: 60px; height: 60px; border-radius: 50%; background: var(--y); color: var(--on-y); display: grid; place-items: center; transition: opacity var(--t1) var(--e-out), transform var(--t3) var(--e-spring); }
.pb svg { grid-area: 1 / 1; }
.pb .i-pa, .clip.on .pb .i-pl { display: none; }
.clip.on .pb .i-pa { display: block; }
.clip.on .pb { opacity: 0; transform: scale(.82); }
.clip.on .clip-b:hover .pb, .clip.on .clip-b:focus-visible .pb { opacity: 1; transform: none; }
.clip-b:hover .pb { transform: scale(1.06); }
.clip-c { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 560; line-height: 1.4; color: var(--ink); text-align: left; }
.clip-c::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s3); flex: none; transition: background-color .3s; }
.clip.on .clip-c::before { background: var(--y); }

/* ---------- 6 · proof ---------- */
.proof { padding: clamp(54px, 8vh, 90px) 0; }
.proof .body { margin-top: 20px; }
.quote-w { margin-top: clamp(36px, 5vh, 60px); }
.quote { min-height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.quote blockquote { font-size: clamp(20px, 2vw, 24px); line-height: 1.5; letter-spacing: -.012em; font-weight: 460; text-wrap: pretty; }
.quote blockquote p + p { margin-top: .7em; }
.quote figcaption { margin-top: 28px; display: flex; align-items: center; gap: 12px; text-align: left; }
.quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote figcaption b { display: block; font-size: 15px; font-weight: 620; }
.quote figcaption span { font-size: 14px; color: var(--ink2); }
.people { margin-top: 32px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.people button { width: 48px; height: 48px; padding: 3px; border-radius: 50%; border: 0; background: none; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .25s, opacity .25s; opacity: .55; }
.people button img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.people button:hover { opacity: .9; }
.people button[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--y); }

/* ---------- 7 · pricing ---------- */
.pricing { padding: clamp(54px, 8vh, 90px) 0 clamp(42px, 6vh, 72px); }
.pricing .body { margin-top: 20px; }
.tgl { display: inline-flex; gap: 2px; padding: 4px; margin-top: 32px; border-radius: 999px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.tgl button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: none; cursor: pointer; font-size: 15px; font-weight: 560; color: var(--ink2); display: inline-flex; align-items: center; gap: 8px; transition: background-color .25s, color .25s; }
.tgl button[aria-pressed="true"] { background: var(--s3); color: var(--ink); }
.save { font-size: 12px; font-weight: 650; background: var(--y); color: var(--on-y); padding: 2px 8px; border-radius: 999px; }
.plans { width: min(100% - 40px, 1200px); margin: 52px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; align-items: stretch; }
.plan { position: relative; border-radius: 22px; padding: 28px 24px 26px; margin-bottom: 16px; background: var(--s1); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px var(--line); display: flex; flex-direction: column; text-align: left; }
@supports (grid-template-rows: subgrid) {
  /* one shrinkable column: a long localized CTA can never widen the card's track past its padding */
  .plan { display: grid; grid-row: span 8; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; align-content: start; }
}
.plan > * { min-width: 0; }
.plan.hot { background: var(--s2); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(252,205,69,.6); }
.plan-n { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 640; }
.plan-n .pill-y, .plan-n .new { font-size: 11.5px; }
.plan-t { font-size: 14px; color: var(--ink2); margin-top: 4px; min-height: 2.9em; line-height: 1.45; }
.plan-p { margin-top: 18px; display: flex; align-items: baseline; flex-wrap: nowrap; gap: 10px; white-space: nowrap; }
.plan-p b { font-size: 40px; font-weight: 660; letter-spacing: -.03em; line-height: 1; font-variant-numeric: proportional-nums; }
.plan-p s { color: var(--ink3); font-size: 16px; transition: opacity .3s var(--e-out), transform .6s var(--e-out); }
[data-bill="m"] .plan-p s { opacity: 0; transform: translate3d(0, -6px, 0); }
.plan-u { font-size: 13px; color: var(--ink2); margin-top: 8px; }
.plan-note { font-size: 13px; color: var(--ink); margin-top: 2px; min-height: 1.5em; }
.plan .btn { margin-top: 22px; width: 100%; min-height: 46px; font-size: 15px; white-space: normal; text-align: center; line-height: 1.2; padding: 8px 16px; }
.plan-l { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink2); }
.plan ul { margin-top: 10px; display: grid; gap: 8px; }
.plan-f { min-width: 0; }
.plan-f .plan-inh { margin-top: 8px; }
.plan-inh li { color: var(--ink3); }
.plan .plan-inh li svg { color: var(--ink3); }
/* both billing variants share one cell: the cell is always as big as the larger one, so nothing reflows */
.sw2 { display: grid; }
.sw2 > span { grid-area: 1 / 1; transition: opacity .35s var(--e-out) .12s, transform .6s var(--e-out) .12s, visibility 0s; }
[data-bill="y"] .sw2 > .sm, [data-bill="m"] .sw2 > .sa { opacity: 0; visibility: hidden; transform: translate3d(0, -5px, 0); transition: opacity .16s ease-in, transform .25s ease-in, visibility 0s .16s; }
.rm .sw2 > span { transition: none; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.plan li svg { flex: none; margin-top: 3px; color: var(--y); }
.plans-x { width: min(100% - 40px, 1200px); margin: 16px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.planx { border-radius: 22px; padding: 22px 24px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; text-align: left; }
.planx .plan-n { font-size: 16.5px; }
.planx p { font-size: 14px; color: var(--ink2); }
.planx .btn { grid-row: 1 / span 2; grid-column: 2; min-height: 44px; font-size: 14.5px; padding: 0 18px; }

/* ---------- 8 · faq ---------- */
.faq { padding: clamp(48px, 7.5vh, 84px) 0; }
.faq .body { margin-top: 20px; }
.faq .body a { color: var(--ink); text-underline-offset: 3px; }
.faq-l { margin-top: 40px; text-align: left; border-top: 1px solid var(--line); }
.faq-l details { border-bottom: 1px solid var(--line); }
.faq-l summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 14px 0; font-size: 18px; font-weight: 560; letter-spacing: -.01em; line-height: 1.4; }
.faq-l summary::-webkit-details-marker { display: none; }
.pm { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -.8px 0 0 -5.5px; background: var(--ink); border-radius: 1px; transition: transform .35s var(--ease); }
.pm::after { transform: rotate(90deg); }
details[open] .pm { background: var(--y); }
details[open] .pm::before, details[open] .pm::after { background: var(--on-y); }
details[open] .pm::after { transform: rotate(0deg); }
.faq-g { display: grid; grid-template-rows: 1fr; }
.faq-c { min-height: 0; overflow: hidden; }
.faq-a { padding: 0 48px 26px 0; color: var(--ink2); font-size: 16px; line-height: 1.7; }
.faq-a p + p { margin-top: .8em; }

/* ---------- 9 · close + footer ---------- */
.close { padding: clamp(66px, 10vh, 112px) 0 clamp(60px, 8vh, 90px); }
.close-g { width: 132px; margin: 0 auto 26px; }
.close-g .mascot { transform-origin: 50% 90%; }
.close .h2 { max-width: 14em; margin: 0 auto; }
.foot { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--bg); }
.foot-in { width: min(100% - 40px, 1200px); margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-brand .micro { margin-top: 10px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(120px, auto)); gap: 24px 64px; }
.foot-cols h3 { font-size: 14px; font-weight: 620; margin-bottom: 6px; }
.foot-cols a { display: flex; align-items: center; min-height: 36px; font-size: 14.5px; color: var(--ink2); text-decoration: none; }
.foot-cols a:hover { color: var(--ink); }
.foot-note { width: min(100% - 40px, 1200px); margin: 40px auto 0; font-size: 12.5px; color: var(--ink3); }

/* ---------- reveal ---------- */
.mo .rv { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--t3) var(--e-out) calc(var(--d, 0) * 90ms), transform var(--t4) var(--e-out) calc(var(--d, 0) * 90ms); }
.mo .rv.in { opacity: 1; transform: none; }
.mo .nav { opacity: 0; transition: opacity .7s var(--ease) .1s, box-shadow .3s; }
.mo.ready .nav { opacity: 1; }

/* ---------- opening ---------- */
.intro { display: none; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.is-intro .intro { display: block; pointer-events: auto; }
.is-intro, .is-intro body { overflow: hidden; }
.intro-bg { position: absolute; inset: 0; background: var(--bg); transition: opacity .7s var(--ease); }
.intro.go .intro-bg { opacity: 0; }
.intro-c { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: flex-end; gap: 12px; }
.intro-g { width: 76px; flex: none; transform: scale(.6); opacity: 0; transition: transform .6s cubic-bezier(.3,1.4,.5,1), opacity .3s; }
.intro.on .intro-g { transform: none; opacity: 1; }
.intro-b { position: relative; width: 290px; height: 82px; margin-bottom: 52px; border-radius: 20px 20px 20px 6px; background: var(--s2); color: var(--ink); box-shadow: var(--sh); display: grid; place-items: center; transform-origin: 50% 50%; opacity: 0; transform: translate3d(0, 8px, 0) scale(.92); transition: opacity .3s, transform .5s cubic-bezier(.3,1.4,.5,1) .08s; }
.intro.on .intro-b { opacity: 1; transform: none; }
.intro-t { font-size: 28px; font-weight: 620; letter-spacing: -.02em; white-space: nowrap; transition: opacity .18s; }
.is-intro .o-cap .card, .is-intro .peek { opacity: 0; }
.is-intro.intro-landed .o-cap .card { opacity: 1; }

/* ---------- tablet & mobile: compositions restack into a tidy cluster ---------- */
@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-hero { height: 500px; }
  .o-cap { left: calc(50% - 240px); width: 480px; top: 214px; }
}
@media (max-width: 900px) {
  .feat { padding: 56px 0; }
  .feat-in { grid-template-columns: minmax(0, 1fr); gap: 36px; text-align: center; }
  .feat-r .feat-copy { order: 0; }
  .feat-copy .label { justify-content: center; }
  .feat-copy .body { margin-left: auto; margin-right: auto; }
  .stage { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; height: auto !important; width: min(100% - 32px, 560px) !important; padding: 18px 0 8px; }
  .obj { position: relative; left: auto !important; right: auto !important; top: auto !important; width: 92%; margin-top: -22px; }
  .obj:first-child { margin-top: 0; }
  /* hero: the call on top, the caption card lands on its lower edge, the speakers tuck underneath */
  .stage-hero { padding-top: 0; }
  .stage-hero .call { position: relative; left: auto; top: auto; width: 100%; order: -1; border-radius: 18px; }
  .stage-hero .o-cap { order: 0; width: 100%; margin-top: -54px; }
  .stage-hero .o-sarah { order: 1; width: 44%; margin-top: -18px; z-index: 0; }
  .stage-hero .o-me { order: 2; width: 40%; margin-top: 2px; margin-left: -2%; z-index: 0; }
  .stage-hero .o-topic { display: none; }
  /* f1: Sarah + recap share a row, the transcript overlaps below */
  .stage-f1 .o-a { order: 0; width: 33%; margin-top: 0; margin-right: 3%; }
  .stage-f1 .o-c { order: 1; width: 64%; margin-top: 18px; }
  .stage-f1 .o-b { order: 2; width: 100%; margin-top: -8px; }
  /* f2 */
  .stage-f2 .o-d { order: 0; width: 34%; margin-left: 54%; margin-top: 0; }
  .stage-f2 .o-a { order: 1; width: 90%; margin-right: 10%; margin-top: -64px; }
  .stage-f2 .o-b { order: 2; width: 92%; margin-left: 8%; margin-top: -4px; }
  .stage-f2 .o-c { order: 3; width: auto; margin-top: 6px; margin-right: 30%; }
  /* f3 */
  .stage-f3 .o-d { order: 0; width: 64%; margin-top: 10px; }
  .stage-f3 .o-a { order: 1; width: 32%; margin-left: 3%; margin-top: 0; }
  .stage-f3 .o-b { order: 2; width: 100%; margin-top: 6px; }
  .stage-f3 .o-c { order: 3; margin-top: -10px; width: auto; }
  .stage-after .o-a { order: 1; width: 90%; margin-right: 10%; }
  .stage-after .o-b { order: 2; width: 92%; margin-left: 8%; margin-top: -10px; }
  .stage-after .o-c { order: 3; width: 58%; margin-right: 34%; margin-top: -20px; }
  .stage-after { margin-top: 40px; }
  .plans-x { grid-template-columns: 1fr; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts li { padding: 16px 4px; }
  .facts li + li { border-left: 0; border-top: 1px solid var(--line); }
  /* clips become a swipeable row (scrolls inside itself; the page never overflows) */
  .clips { width: 100%; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 6px; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .clips::-webkit-scrollbar { display: none; }
  .clip { flex: 0 0 min(68%, 300px); scroll-snap-align: start; }
  .clips { margin-top: 36px; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-in { gap: 8px; width: calc(100% - 32px); }
  .nav-r { gap: 8px; }
  .lang-btn { padding: 0 11px; gap: 6px; }
  .lang-btn #lang-v { display: none; }
  .lang-btn::after { content: attr(data-code); font-weight: 560; font-size: 13px; }
  .lang-btn .chev { order: 2; }
  .btn-sm { padding: 0 16px; }
  .brand span { font-size: 16px; }
  .cap { padding: 18px 18px 20px; min-height: 0; }
  .cap-en { font-size: 17.5px; }
  .cap .trl { font-size: 14.5px; }
  .card { font-size: 14px; }
  .q-t { font-size: 15.5px; }
  .q-sm .q-t { font-size: 14.5px; }
  .sug-t { font-size: 16.5px; }
  .vc-out, .pol .nat { font-size: 16.5px; }
  .row { grid-template-columns: 46px minmax(0, 1fr); padding: 10px 16px; }
  .tabs { padding: 10px 16px 12px; gap: 14px; }
  .tx-top { padding: 12px 16px 2px; }
  .recap { padding: 14px 16px 16px; }
  .rc-h { margin-bottom: 8px; }
  .rc-t { font-size: 14.5px; }
  .rc-l li { font-size: 13px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .planx { grid-template-columns: minmax(0, 1fr); }
  .planx .btn { grid-row: auto; grid-column: auto; justify-self: start; margin-top: 8px; order: 1; }   /* name, price line, then the CTA */
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .quote { min-height: 0; }
  .faq-a { padding-right: 0; }
  .intro-b { width: 230px; height: 70px; }
  .intro-t { font-size: 23px; }
  .intro-g { width: 62px; }
  .logos { gap: 20px 32px; margin-top: 24px; }
  .logos img { height: 25px; }
  .logos li.keep img { height: 27px; }
  .strip { width: calc(100% - 32px); }
}
@media (max-width: 380px) {
  .btn-sm { padding: 0 14px; font-size: 14px; }
  .brand span { display: none; }
}

/* ---------- reduced motion: a complete static page ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .hv, .nav, .call { opacity: 1 !important; transform: none !important; }
}
.rm .rv, .rm .hv { opacity: 1; transform: none; }

/* long localized CTAs never push the nav wider than the screen */
.nav-r { min-width: 0; }
.nav .btn-sm { min-width: 0; flex-shrink: 1; overflow: hidden; }
.nav .btn-sm span { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { html[data-lang="fr"] .nav .brand span, html[data-lang="vi"] .nav .brand span, html[data-lang="ru"] .nav .brand span { display: none; } }
body { overflow-wrap: break-word; }
.h1, .h2 { hyphens: manual; }
@media (max-width: 380px) {
  .h1 { font-size: 34px; }
  .h2 { font-size: 27px; }
  .h2-big { font-size: 30px; }
}
.foot-cols a, .plan li span, .faq-l summary span { overflow-wrap: anywhere; }
@media (max-width: 380px) { .foot-cols { grid-template-columns: minmax(0, 1fr); } }

/* Touch screens: footer links get a full 44px target. */
@media (pointer: coarse) { #foot-cols a { display: flex; align-items: center; min-height: 44px; } }

/* =====================================================================
   Motion system. Only transform / opacity / clip-path animate (plus the score ring's dash).
   Every pre-state lives under .mo (set before first paint), so reduced motion (.rm) is the static, complete page.
   ===================================================================== */

/* ---- loops freeze when motion is paused (WCAG 2.2.2) or their stage is off screen ---- */
html.is-paused *, html.is-paused *::before, html.is-paused *::after,
.stage.off *, .stage.off *::before, .stage.off *::after { animation-play-state: paused !important; }

/* ---- hero entrance: html.hero-go (added when the opening hands off) ---- */
.mo .h1:not(.split) { opacity: 0; }
.h1 .wm { display: inline-block; position: relative; clip-path: inset(-.14em -.22em -.3em -.22em); }
.h1 .wi { display: inline-block; }
.mo .h1 .wi { opacity: 0; transform: translate3d(0, 108%, 0) rotate(4deg); transform-origin: 0 100%;
  transition: transform 1s var(--e-out) calc(var(--i) * 55ms), opacity .6s var(--e-out) calc(var(--i) * 55ms); }
.mo.hero-go .h1 .wi { opacity: 1; transform: none; }
/* "Instantly." gets its marker stroke as a sweep once the words have landed */
.mo .h1 .mk { background: none; padding: 0; }
.mo .h1 .mk .wm { clip-path: inset(-.14em -.36em -.3em -.22em); }
.mo .h1 .mk .wm::before { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; top: 84%; bottom: -1%; background: var(--y);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t3) var(--e-out) calc(var(--hl, 700ms) + var(--k, 0) * 90ms); }
.mo .h1 .mk .wm:not(:last-child)::before { right: -.3em; }
.mo.hero-go .h1 .mk .wm::before { transform: none; }
.mo .hero-copy .hv:not(.h1) { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--t3) var(--e-out) var(--dl), transform var(--t4) var(--e-out) var(--dl); }
.mo .hero-copy .lede { --dl: 380ms; }
.mo .hero-copy .hero-cta { --dl: 500ms; }
.mo.hero-go .hero-copy .hv { opacity: 1; transform: none; }
/* the call rises in under the cards */
.mo .call { opacity: 0; transform: translate3d(0, 28px, 0) scale(.97); transition: opacity var(--t3) var(--e-out) .42s, transform var(--t4) var(--e-out) .42s; }
.mo.hero-go .call { opacity: 1; transform: none; }
.mo .nav { opacity: 0; transition: opacity var(--t3) var(--e-out) .1s, box-shadow .3s; }
.mo.ready .nav { opacity: 1; }

/* ---- cards: fly in from slight depth on the spring, land on their resting tilt ---- */
.mo .obj.hv, .mo .obj.rv { opacity: 0; transform: translate3d(0, var(--fy, 64px), 0) scale(.86) rotate(var(--fr, 3deg));
  transition: opacity var(--t2) var(--e-out) var(--dl, 0ms), transform var(--t4) var(--e-spring) var(--dl, 0ms); }
.mo .obj.hv.in, .mo .obj.rv.in { opacity: 1; transform: none; }
.mo .obj.now { transition: none; }
/* the reply card springs up into place under the question */
.mo .stage-f2 .o-b { --fy: 56px; }

/* ---- streamed words: pre-laid-out, appear faded, then commit ---- */
.mo .sw .w { opacity: 0; transition: opacity var(--t1) var(--e-out); }
.mo .sw .w.p { opacity: .38; }
.mo .sw .w.c { opacity: 1; }

/* ---- mascot layers: .gh (hop / react) > svg (rest pose) > .m-look (eyes follow) > .m-eyes (blink) ---- */
.gh { display: block; transform-origin: 50% 92%; }
.mo .gh { transition: transform .9s var(--e-spring); }
.mo.cta-h #hero-peek .gh { transform: translate3d(-3px, -9px, 0) rotate(-14deg); }
.mo.cta-c #close-g .gh { transform: translate3d(0, -6px, 0) rotate(-6deg) scale(1.06); }

/* ---- live transcript: a viewport that auto-scrolls as lines arrive ---- */
.mo .tx-v { height: 318px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); }
.tx-l { position: relative; }
.mo .tx-l { transition: transform var(--t3) var(--e-out); }
.mo .tx-l .row { transition: opacity var(--t2) var(--e-out), transform var(--t3) var(--e-out); }
.mo .tx-l .row.pre { opacity: 0; transform: translate3d(0, 14px, 0); }
.row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--y); opacity: 0; transition: opacity var(--t2) var(--e-out); }
.row { position: relative; }
.row.now::before { opacity: 1; }

/* ---- live recap: points land one by one once the scene starts ---- */
.mo .recap .rc-i { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity var(--t2) var(--e-out), transform var(--t3) var(--e-out); }
.mo .recap .rc-i.in { opacity: 1; transform: none; }

/* ---- reply suggestions ---- */
.mo .q .pill-y { opacity: 0; transform: translate3d(0, 6px, 0) scale(.55); transform-origin: 80% 100%; transition: opacity var(--t1) var(--e-out), transform var(--t4) var(--e-spring); }
.mo .q .pill-y.in { opacity: 1; transform: none; }
.mo .stage-f2 .say-b { opacity: 0; transform: scale(.6); transform-origin: 0 100%; transition: opacity var(--t1) var(--e-out) .32s, transform var(--t4) var(--e-spring) .32s; }
.mo .stage-f2 .o-c.in .say-b { opacity: 1; transform: none; }

/* ---- voice interpretation: playhead, lit words, bars that reshape, English wipe ---- */
.ph { position: absolute; left: 0; top: -5px; bottom: -5px; width: 100%; pointer-events: none; opacity: 0; }
.ph::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--ink); }
.mo .vc-said.sw .w { opacity: .26; transition: opacity .3s var(--e-out); }
.mo .vc-said.sw .w.c { opacity: 1; }
.mo .vc .wave i { opacity: .3; transition: opacity .28s var(--e-out), transform var(--t3) var(--e-spring) calc(var(--i) * 9ms); }
.mo .vc .wave i.lit, .mo .vc.done .wave i { opacity: 1; }
.mo .vc.rec .wave b { animation: wv 1.15s var(--e-io) infinite; animation-delay: var(--dl); }
@keyframes wv { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.42); } }
.mo .vc.shape .wave i, .mo .vc.done .wave i { transform: scaleY(var(--k)); }
.mo .vc .vc-out { clip-path: inset(-6px 100% -6px 0); transition: clip-path 1.5s var(--e-io); }
.mo .vc.out .vc-out, .mo .vc.done .vc-out { clip-path: inset(-6px -4px -6px 0); }
.mo .vc .vc-f { opacity: 0; transform: translate3d(-6px, 0, 0); transition: opacity .4s var(--e-out), transform var(--t3) var(--e-spring); }
.mo .vc.done .vc-f { opacity: 1; transform: none; }
.mo .vc .vc-f .ck path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s var(--e-out) .12s; }
.mo .vc.done .vc-f .ck path { stroke-dashoffset: 0; }

/* ---- after the meeting: notes write themselves, the polish card, the score ---- */
.mo .notes .ln { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .3s var(--e-out), clip-path .7s var(--e-out); }
.mo .notes .ln.in { opacity: 1; clip-path: inset(0 -4px 0 0); }
.mo .pol .mine { transition: opacity .6s var(--e-out) .25s; }
.mo .pol.struck .mine { opacity: .55; }
.pol .sk { position: relative; }
.mo .pol .sk::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s linear calc(var(--k) * 42ms); }
.mo .pol.struck .sk::after { transform: none; }
.mo .pol .nat-l, .mo .pol .nat, .mo .pol .nat + .trl, .mo .pol .coach { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity var(--t2) var(--e-out), transform var(--t3) var(--e-out); }
.mo .pol.shown .nat-l, .mo .pol.shown .nat, .mo .pol.shown .nat + .trl { opacity: 1; transform: none; }
.mo .pol.coached .coach { opacity: 1; transform: none; }
.mo .pol .nat { position: relative; z-index: 0; }
.mo .pol .nat > span { background: none; box-shadow: none; }
.pol .hw { position: relative; }
.mo .pol .hw::before { content: ""; position: absolute; z-index: -1; inset: -2px -3px; border-radius: 3px; background: var(--ysoft);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .22s linear calc(var(--k) * 52ms); }
.mo .pol.lit .hw::before { transform: none; }
.ring b { font-variant-numeric: tabular-nums; }
.mo .score .score-d, .mo .score .stats { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity var(--t2) var(--e-out) .9s, transform var(--t3) var(--e-out) .9s; }
.mo .score .stats { transition-delay: 1.05s; }
.mo .score.ran .score-d, .mo .score.ran .stats { opacity: 1; transform: none; }

/* ---- micro-interactions ---- */
@property --mx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --my { syntax: '<length>'; inherits: false; initial-value: 0px; }
.plan .btn:hover, .plan .btn-y:hover { transform: none; }
.mo .mag { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: background-color .25s, transform .35s var(--e-out); }
.mo .mag.rel { transition: background-color .25s, transform .9s var(--e-spring); }
.mo .btn-y.mag:hover { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); }
.mo .btn .arr { transition: transform .7s var(--e-spring); }
.mo .btn:hover .arr { transform: translate3d(4px, 0, 0); }
.nav-links { position: relative; }
.nav-ind { position: absolute; left: 0; bottom: 9px; width: 1px; height: 1.5px; border-radius: 1px; background: var(--ink); transform-origin: 0 50%; opacity: 0; pointer-events: none;
  transition: transform .7s var(--e-spring), opacity var(--t1) var(--e-out); }
.nav-ind.on { opacity: 1; }
/* pricing toggle: a thumb slides under the labels */
.tgl { position: relative; }
.tgl-th { display: none; }
.mo .tgl-th { display: block; position: absolute; inset: 4px; pointer-events: none; }
.tgl-th i { position: absolute; inset: 0; border-radius: 999px; background: var(--s3); clip-path: inset(0 50% 0 0 round 999px); transition: clip-path .7s var(--e-spring); }
.mo .tgl button { position: relative; z-index: 1; }
.mo .tgl button[aria-pressed="true"] { background: none; box-shadow: none; }
/* prices roll: the old figure slides up and out while the new one slides up into place, character by character.
   Both strings sit in one clipped cell at their natural (proportional) widths, so the price reads tight at every frame. */
.plan-p b { font-variant-numeric: proportional-nums; }
.rl { display: inline-grid; vertical-align: top; height: 1.2em; margin: -.1em 0; line-height: 1.2em; clip-path: inset(0 -.4em); }
.rl > span { grid-area: 1 / 1; white-space: pre; }
.rl i { display: inline-block; font-style: normal; transition: transform .95s var(--e-spring) var(--dl, 0ms), opacity .38s var(--e-out) var(--dl, 0ms); }
.rl-o i { transition: transform .4s cubic-bezier(.55, 0, .75, .2) var(--dl, 0ms), opacity .24s linear var(--dl, 0ms); }
.rl-n i { transform: translate3d(0, 1.2em, 0); }
b.go .rl-n i { transform: none; }
b.go .rl-o i { transform: translate3d(0, -1.2em, 0); opacity: 0; }
html.is-paused .rl i { transition: none; }
/* FAQ: rows open smoothly, the + turns */
.mo .faq-g { grid-template-rows: 0fr; transition: grid-template-rows .55s var(--e-out); }
.mo details.op .faq-g { grid-template-rows: 1fr; }
.mo .faq-a { opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity .3s var(--e-out), transform .55s var(--e-out); }
.mo details.op .faq-a { opacity: 1; transform: none; transition-delay: .08s; }
.mo .pm { transition: background-color .25s, transform var(--t4) var(--e-spring); }
.mo .pm::after { transition: transform var(--t3) var(--e-spring); }
.mo details.op .pm { transform: rotate(180deg); }
.mo details[open] .pm::after { transform: rotate(90deg); }
.mo details.op .pm::after { transform: rotate(90deg) scaleX(0); }
.mo details[open]:not(.op) .pm { background: var(--s2); }
.mo details[open]:not(.op) .pm::before, .mo details[open]:not(.op) .pm::after { background: var(--ink); }

/* ---- pause motion (bottom-left) ---- */
.mo-tg { position: fixed; left: 16px; bottom: 16px; z-index: 45; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--s2); color: var(--ink); box-shadow: 0 0 0 1px var(--line2);
  display: grid; place-items: center; cursor: pointer; transition: opacity var(--t2) var(--e-out), box-shadow .2s; }
.mo-tg:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.mo-tg svg { grid-area: 1 / 1; }
.mo-tg .i-pl, html.is-paused .mo-tg .i-pa { display: none; }
html.is-paused .mo-tg .i-pl { display: block; }
.mo-tg-l { position: absolute; left: calc(100% + 8px); top: 50%; white-space: nowrap; font-size: 13px; font-weight: 560; background: var(--ink); color: var(--bg); padding: 5px 10px; border-radius: 999px; line-height: 1.3;
  opacity: 0; transform: translate3d(-4px, -50%, 0); transition: opacity var(--t1) var(--e-out), transform var(--t2) var(--e-out); pointer-events: none; }
.mo-tg:hover .mo-tg-l, .mo-tg:focus-visible .mo-tg-l { opacity: 1; transform: translate3d(0, -50%, 0); }
.rm .mo-tg { display: none; }
.mo:not(.ready) .mo-tg { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .mo-tg { left: 12px; bottom: 12px; } }

@media (max-width: 760px) {
  .mo .tx-v { height: 300px; }
}

/* ---- reduced motion, late switch: everything complete and still ---- */
@media (prefers-reduced-motion: reduce) {
  .mo .obj.hv, .mo .obj.rv, .mo .hero-copy .hv, .mo .h1, .mo .h1 .wi, .mo .sw .w, .mo .q .pill-y, .mo .stage-f2 .say-b, .mo .notes .ln, .mo .vc .vc-f, .mo .recap .rc-i,
  .mo .pol .nat-l, .mo .pol .nat, .mo .pol .coach, .mo .score .score-d, .mo .score .stats, .mo .faq-a { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .mo .vc .vc-out { clip-path: none !important; }
  .mo .h1 .mk .wm::before, .mo .pol .hw::before { transform: none !important; }
  .mo .faq-g { grid-template-rows: 1fr; }
  .mo-tg { display: none; }
}


/* ---------- Nav as a floating call-control capsule (distinct from the original's plain bar) ---------- */
.nav { top: 0; padding-top: 12px; background: transparent; pointer-events: none; }
html.is-scrolled .nav { box-shadow: none; }
.nav-in {
  pointer-events: auto;
  width: min(100% - 24px, 980px);
  height: 60px;
  padding: 0 8px 0 16px;
  gap: 14px;
  border-radius: 999px;
  background: #171715;
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 18px 40px -22px rgba(0,0,0,.8);
  transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
  transform-origin: 50% 0;
}
html.is-scrolled .nav-in { transform: scale(.965); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px -18px rgba(0,0,0,.9); }
.nav-links { margin-left: 6px; }
.nav-links a { color: #dcd9d2; transition: color .2s, background-color .25s; }
.nav-links a:hover { background: rgba(255,255,255,.07); }
/* live "listening" indicator: four sound bars */
.nav-live { display: inline-flex; align-items: center; gap: 2px; height: 16px; padding: 0 6px; }
.nav-live i { width: 3px; height: 100%; border-radius: 2px; background: var(--y, #fccd45); transform-origin: 50% 100%; transform: scaleY(.3); }
.motion .nav-live i { animation: navbar-bars 1.1s ease-in-out infinite; }
.motion .nav-live i:nth-child(2) { animation-delay: -.35s; animation-duration: .9s; }
.motion .nav-live i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.25s; }
.motion .nav-live i:nth-child(4) { animation-delay: -.15s; animation-duration: 1s; }
@keyframes navbar-bars { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
html.is-paused .nav-live i { animation-play-state: paused; }
@media (max-width: 560px) { .nav-live { display: none; } .nav-in { padding-left: 12px; } }

/* ---------- Logo strip as a slow marquee (pauses on hover/focus) ---------- */
.logos-mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos.is-mq { display: flex; flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: logos-mq 38s linear infinite; }
.logos.is-mq li { flex: none; margin-right: 56px; }
.logos-mq:hover .logos.is-mq, .logos-mq:focus-within .logos.is-mq, html.is-paused .logos.is-mq { animation-play-state: paused; }
@keyframes logos-mq { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Pricing cards: lift + a 1px ring that brightens near the pointer ---------- */
.plan::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(220px circle at var(--rx, 50%) var(--ry, 0%), rgba(255,255,255,.32), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .3s ease;
}
@media (hover: hover) {
  .plan:hover::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .logos.is-mq { animation: none; } }

/* ---------- Black liquid glass nav ---------- */
.nav-in {
  position: relative;
  /* tint + dimming tuned so nav text holds >= 5.8:1 even over a pure white frame (video wall, band type, yellow CTAs) */
  background: rgba(14, 14, 13, 0.6);
  -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(0.7);
  backdrop-filter: blur(22px) saturate(160%) brightness(0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 22px 50px -24px rgba(0, 0, 0, 0.9);
}
html.is-scrolled .nav-in {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    0 24px 54px -22px rgba(0, 0, 0, 0.95);
}
/* specular sheen: a highlight that follows the pointer along the top rim (kept on the rim so it never washes out the links) */
.nav-in::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(160px 22px at var(--gx, 28%) 0%, rgba(255, 255, 255, 0.2), transparent 75%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 30%);
  transition: opacity 0.3s ease;
}
.nav-in > * { position: relative; z-index: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-in { background: rgba(18, 18, 17, 0.94); }
}

/* ---------- Scroll choreography (browser-native scroll timelines: runs off the main thread) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero, .feat, .after { perspective: 1600px; }
    /* the hero call frame tilts back and dims as you leave it */
    .stage-hero { transform-origin: 50% 0; animation: sx-hero-out linear both; animation-timeline: view(); animation-range: cover 52% cover 100%; }
    @keyframes sx-hero-out { to { scale: 0.9; rotate: x 14deg; opacity: 0.35; } }
  }
}
/* Card stages and copy parallax: desktop only (on phones they delayed the cards' reveal and left empty gaps). */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  @supports (animation-timeline: view()) {
    .stage-f1, .stage-f2, .stage-f3, .stage-after {
      transform-origin: 50% 100%;
      animation: sx-stage-in linear both, sx-stage-out linear both;
      animation-timeline: view(), view();
      animation-range: entry 0% cover 42%, cover 62% exit 100%;
    }
    @keyframes sx-stage-in { from { translate: 0 80px; scale: 0.93; rotate: x 10deg; } to { translate: 0 0; scale: 1; rotate: x 0deg; } }
    @keyframes sx-stage-out { to { translate: 0 -50px; scale: 0.97; } }
    /* copy moves at a different speed from the cards: depth */
    .feat-copy { animation: sx-copy linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes sx-copy { from { translate: 0 70px; } to { translate: 0 -70px; } }
  }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* section headings settle in with a slight scale */
    .h2 { animation: sx-h2 linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    @keyframes sx-h2 { from { scale: 0.94; translate: 0 24px; } to { scale: 1; translate: 0 0; } }
    /* pricing cards: see "seg:pricing" at the end (a level row rise that has settled before any CTA is on screen) */
    /* the closing section rises to meet you */
    .close { animation: sx-close linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes sx-close { from { scale: 0.94; opacity: 0.4; } to { scale: 1; opacity: 1; } }
  }
}


/* ---------- Live indicator in the nav: a voice-memo style waveform that keeps scrolling ---------- */
.nav-live { width: 40px; height: 18px; padding: 0; overflow: hidden; display: inline-block; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.nav-live .nl-track { display: flex; align-items: center; gap: 2px; height: 100%; width: max-content; animation: nl-scroll 2.6s linear infinite !important; will-change: transform; }
.nav-live .nl-track i { flex: none; display: block; width: 2px; height: var(--h, 50%); border-radius: 2px; background: var(--y, #fccd45); transform-origin: 50% 50%; transform: none;
  animation: nl-pulse var(--d, .9s) ease-in-out infinite alternate !important; animation-delay: var(--o, 0s) !important; }
@keyframes nl-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes nl-pulse { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
/* Always moving in normal mode. Pause motion freezes it where it is; reduced motion shows the still waveform (bars at their own heights). */
html.is-paused .nav-live .nl-track, html.is-paused .nav-live .nl-track i { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .nav-live .nl-track, .nav-live .nl-track i { animation: none !important; }
}
@media (max-width: 560px) { .nav-live { display: none; } }


/* =====================================================================
   v7 · peak, photographic anchors, a present mascot, louder proof
   ===================================================================== */

/* ---------- feature compositions sit on a dimmed still of the real call ---------- */
.bdx { isolation: isolate; }
.bd { position: absolute; z-index: -1; inset: 58px -3% 26px 7%; border-radius: 28px; overflow: hidden; background: #111;
  box-shadow: 0 0 0 1px var(--ring), 0 50px 90px -50px rgba(0,0,0,.95); }
.bd img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bd-s { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,12,.26), rgba(13,13,12,.56)), radial-gradient(120% 90% at 50% 35%, transparent 40%, rgba(13,13,12,.42)); }
.feat-r .bd { inset: 58px 7% 26px -3%; }
.stage-f3 .bd img { object-position: 50% 24%; }
/* cards over imagery: lighter, a 1px top highlight, a little glass */
.bdx .card { background: rgba(40, 40, 36, .84); -webkit-backdrop-filter: blur(16px) saturate(135%); backdrop-filter: blur(16px) saturate(135%); }
.bdx .card.chip { background: rgba(44, 44, 40, .9); }
.bdx .tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.14), 0 30px 56px -26px rgba(0,0,0,.95); }
.bdx .say-b { background: var(--y); color: var(--on-y); box-shadow: 0 18px 36px -18px rgba(0,0,0,.9); }

/* no card ever waits for its story: text is laid out and visible (faint) from the start, then lights up as it streams */
.mo .stage-f1 .sw .w, .mo .stage-f2 .sw .w, .mo .stage-f3 .sw .w { opacity: .2; }
.mo .stage-f1 .sw .w.p, .mo .stage-f2 .sw .w.p, .mo .stage-f3 .sw .w.p { opacity: .5; }
.mo .stage-f1 .sw .w.c, .mo .stage-f2 .sw .w.c, .mo .stage-f3 .sw .w.c { opacity: 1; }
.mo .recap .rc-i { opacity: .28; transform: none; }
.mo .recap .rc-i.in { opacity: 1; }
.mo .pol .nat-l, .mo .pol .nat, .mo .pol .nat + .trl, .mo .pol .coach { opacity: .22; transform: none; }
.mo .pol.shown .nat-l, .mo .pol.shown .nat, .mo .pol.shown .nat + .trl, .mo .pol.coached .coach { opacity: 1; }
.mo .stage-f2 .say-b { transition-delay: .5s; }

/* the mascot peeks over the edge of the still as each feature arrives (it hides behind the photo) */
.pkr { position: absolute; z-index: -2; width: 58px; pointer-events: none; }
.pkr-1 { left: 33%; top: 24px; }
.pkr-3 { left: 61%; top: 24px; }
.pkr .gh { transform: translate3d(0, 46px, 0) rotate(-6deg); }
.mo .pkr .gh { transition: transform 1.1s var(--e-spring) .55s; }
.arr .pkr .gh, .rm .pkr .gh { transform: translate3d(0, 0, 0) rotate(-6deg); }
.pkr-3 .gh { transform: translate3d(0, 46px, 0) rotate(7deg); }
.arr .pkr-3 .gh, .rm .pkr-3 .gh { transform: translate3d(0, 0, 0) rotate(7deg); }

/* ---------- 4b · the peak ---------- */
.peak { padding-top: clamp(48px, 7vh, 84px); }
.peak-copy .h2 { max-width: 15em; margin: 0 auto; }
.pk-frame { position: relative; width: min(100% - 32px, 720px); margin: 30px auto 0; }
.pk-vid { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--ring), 0 40px 80px -40px rgba(0,0,0,.9); }
.pk-vid video { width: 100%; height: 100%; object-fit: cover; }
.pk-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(10,10,9,.5), transparent 45%); }
.pk-caps { display: none; }
.pk-h { margin: 34px 4px 14px; text-align: left; }
.pk-h0 { margin: 0 4px 18px; }
.pk-ct { font-size: 22px; font-weight: 640; letter-spacing: -.018em; line-height: 1.28; color: var(--ink); text-wrap: balance; }
.pk-cs { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.pk-mw { display: none; }
.pk-win { position: relative; z-index: 1; margin-top: -40px; }
.pk-chrome, .pk-b .pk-c { position: relative; background: var(--card); box-shadow: var(--sh); text-align: left; }
.pk-chrome { margin: 0 10px; border-radius: 18px 18px 0 0; clip-path: inset(-80px -80px 0 -80px); }
.pk-b.pk-b0 .pk-c { margin: 0 10px; border-radius: 0 0 18px 18px; clip-path: inset(0 -80px -80px -80px); padding-bottom: 8px; }
.pk-b .pk-c { border-radius: 18px; }
.pk-bar { display: flex; align-items: center; gap: 9px; padding: 12px 16px 10px; font-size: 14px; }
.pk-bar img { width: 20px; height: auto; }
.pk-bar b { font-weight: 650; letter-spacing: -.01em; }
.pk-bar .pill-y { margin-left: auto; }
.pk-dots { display: inline-flex; gap: 5px; margin-right: 4px; }
.pk-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.pk-tabs { position: relative; display: flex; gap: 18px; padding: 4px 16px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink3); }
.pk-tabs span:first-child { color: var(--ink); font-weight: 600; }
.pk-ind { position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--y); transform-origin: 0 50%; transform: translate3d(var(--t0x, 16px), 0, 0) scaleX(var(--t0w, 28)); transition: transform .7s var(--e-spring); }
.pk-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; font-size: 12.5px; color: var(--ink3); }
.pk-top .dot { width: 6px; height: 6px; box-shadow: none; }
.pk-row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 10px 16px; }
.pk-row .who { padding-top: 2px; }
.pk-row .en { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.pk-row .trl { font-size: 13.5px; }
.pk-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--y); opacity: 0; transition: opacity var(--t2) var(--e-out); }
.pk-row.now::before { opacity: 1; }
.pk-b1 .pk-c { padding: 18px 18px 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(252,205,69,.38), 0 26px 50px -26px rgba(0,0,0,.95); }
.pk-b1 .q-t { font-size: 15.5px; line-height: 1.5; }
.pk-qd { position: absolute; top: -12px; right: 16px; box-shadow: 0 0 0 3px var(--bg); }
.pk-b2 .pk-c { padding: 18px 18px 14px; background: var(--card-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(252,205,69,.32), 0 26px 50px -24px rgba(0,0,0,.95); }
.pk-b2 .sug-t { font-size: 17px; }
.pk-b3 .pk-c { padding: 16px 18px 18px; }
.pk-rt + .pk-rt { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.pk-rt:first-of-type .rc-t::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--y); vertical-align: middle; }
.pk-mm { position: relative; display: flex; align-items: flex-end; gap: 10px; margin: 0 0 -6px 6px; z-index: 1; }
.pk-mm .pk-tilt { width: 56px; flex: none; }
.pk-say { position: relative; background: var(--y); color: var(--on-y); font-size: 14.5px; font-weight: 600; line-height: 1.35; padding: 9px 14px; border-radius: 16px 16px 16px 4px; margin-bottom: 30px; max-width: 15em; box-shadow: 0 16px 30px -16px rgba(0,0,0,.9); }
.pk-tilt { transform-origin: 50% 92%; }
.pk-tilt .m-look { transition: transform .7s var(--e-out); }
/* arrival (stacked layout): each beat flies in when it arrives, then plays inside its card */
.mo .pk-b { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .6s var(--e-out), transform 1.1s var(--e-spring); }
.mo .pk-b.in, .mo .pk-b.pk-b0 { opacity: 1; transform: none; }   /* the live tab is part of the window: it never flies in apart from its chrome */
.mo .pk-qd { opacity: 0; transform: translate3d(0, 6px, 0) scale(.55); transform-origin: 80% 100%; transition: opacity var(--t1) var(--e-out), transform var(--t4) var(--e-spring); }
.mo .pk-qd.in { opacity: 1; transform: none; }
.mo .rc-x { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity var(--t2) var(--e-out), transform var(--t3) var(--e-out); }
.mo .rc-x.in { opacity: 1; transform: none; }
.mo .pk-mm .pk-say { opacity: 0; transform: scale(.6); transform-origin: 0 100%; transition: opacity var(--t1) var(--e-out) .5s, transform var(--t4) var(--e-spring) .5s; }
.mo .pk-b2.in .pk-say { opacity: 1; transform: none; }
.pk-stick.off *, .sb.off * { animation-play-state: paused !important; }

/* desktop: a pinned stage. The real call fills a large frame, Smooth AI is docked on it like the product */
@media (min-width: 900px) {
  .mo .pk-track { height: 380vh; view-timeline: --pk block; }
  .mo .pk-stick { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; contain: layout paint; overflow: clip; }
  .mo .pk-frame { width: min(100vw - 64px, (100vh - 170px) * 16 / 9, 1560px); aspect-ratio: 16 / 9; margin: 0; }
  .mo .pk-h, .mo .pk-h0, .mo .pk-mm { display: none; }
  .mo .pk-vid { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 28px; }
  .mo .pk-scrim { background: linear-gradient(to top, rgba(9,9,8,.9) 0%, rgba(9,9,8,.55) 26%, transparent 54%), linear-gradient(to right, rgba(9,9,8,.62), rgba(9,9,8,.2) 46%, transparent 64%); }
  .mo .pk-caps { display: block; position: absolute; left: 4%; bottom: 7.5%; width: min(46%, 560px); height: 46%; z-index: 2; pointer-events: none; }
  .mo .pk-ci { position: absolute; left: 0; right: 0; bottom: 40px; opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .35s var(--e-out), transform .5s var(--e-out); }
  .mo .pk-ct { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.12; letter-spacing: -.028em; font-weight: 660; color: #fff; }
  .mo .pk-ct .mk { background: linear-gradient(transparent 80%, var(--y) 80%, var(--y) 94%, transparent 94%); }
  .mo .pk-cs { margin-top: 12px; font-size: clamp(15.5px, 1.2vw, 18px); color: rgba(255,255,255,.8); max-width: 30em; }
  .mo [data-step="0"] .pk-ci:nth-child(1), .mo [data-step="1"] .pk-ci:nth-child(2), .mo [data-step="2"] .pk-ci:nth-child(3), .mo [data-step="3"] .pk-ci:nth-child(4) { opacity: 1; transform: none; transition: opacity .6s var(--e-out) .18s, transform 1s var(--e-out) .18s; }
  .mo .pk-rail { position: absolute; left: 0; bottom: 0; display: flex; gap: 6px; width: 240px; }
  .mo .pk-rail i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.24); overflow: hidden; }
  .mo .pk-rail b { display: block; height: 100%; background: var(--y); transform-origin: 0 50%; transform: scaleX(0); }

  .mo .pk-win { position: absolute; z-index: 3; top: 8%; bottom: 7%; right: 3%; width: clamp(340px, 31%, 470px); margin: 0; display: flex; flex-direction: column; border-radius: 22px;
    background: rgba(24, 24, 22, .88); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.13), 0 50px 90px -40px rgba(0,0,0,.95); }
  .mo .pk-chrome { flex: none; margin: 0; background: none; box-shadow: none; clip-path: none; border-radius: 22px 22px 0 0; }
  .mo .pk-body { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 0 0 22px 22px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 18px), transparent); }
  .mo .pk-b { opacity: 1; transform: none; transition: none; }
  .mo .pk-b .pk-c { background: none; box-shadow: none; clip-path: none; margin: 0; border-radius: 0; }
  .mo .pk-flow { position: absolute; left: 0; right: 0; top: 0; padding-top: 4px; transition: transform .9s var(--e-out), opacity .45s var(--e-out); }
  .mo .pk-b1 { padding: 14px 12px 4px; }
  .mo .pk-b1 .pk-c { border-radius: 14px; padding: 16px 16px 14px; background: rgba(252,205,69,.07); box-shadow: inset 0 0 0 1px rgba(252,205,69,.34); opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .5s var(--e-out), transform .9s var(--e-spring); }
  .mo .pk-qd { box-shadow: 0 0 0 3px #1a1a18; }
  .mo .pk-b2 { position: absolute; left: 12px; right: 12px; bottom: 12px; opacity: 0; transform: translate3d(0, calc(100% + 30px), 0); transition: transform 1.05s var(--e-spring), opacity .3s var(--e-out); }
  .mo .pk-b2 .pk-c { border-radius: 16px; padding: 16px 16px 12px; background: #2e2e29; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(252,205,69,.4), 0 24px 44px -20px rgba(0,0,0,.95); }
  .mo .pk-b3 { position: absolute; inset: 0; padding: 12px 4px 0; opacity: 0; transform: translate3d(40px, 0, 0); transition: opacity .45s var(--e-out), transform .9s var(--e-out); }
  .mo [data-step="1"] .pk-b1 .pk-c, .mo [data-step="2"] .pk-b1 .pk-c, .mo [data-step="3"] .pk-b1 .pk-c { opacity: 1; transform: none; }
  .mo [data-step="1"] #pk-r1::before, .mo [data-step="2"] #pk-r1::before, .mo [data-step="3"] #pk-r1::before { opacity: 0; }
  .mo [data-step="2"] .pk-b2 { opacity: 1; transform: none; }
  .mo [data-step="3"] .pk-b2 { opacity: 0; transform: translate3d(-40px, 0, 0); transition: transform .9s var(--e-out), opacity .35s var(--e-out); }
  .mo [data-step="3"] .pk-flow { opacity: 0; }
  .mo [data-step="3"] .pk-b3 { opacity: 1; transform: none; transition-delay: .12s; }
  .mo [data-step="3"] .pk-ind { transform: translate3d(var(--t1x, 70px), 0, 0) scaleX(var(--t1w, 44)); }
  .mo [data-step="3"] .pk-tabs span:first-child { color: var(--ink3); font-weight: 400; }
  .mo [data-step="3"] .pk-tabs span:nth-child(2) { color: var(--ink); font-weight: 600; }
  .mo .pk-tabs span { transition: color .4s; }

  /* the mascot sits on the top edge of the window and reacts to each beat */
  .mo .pk-mw { display: block; position: absolute; z-index: 4; left: 24px; top: -52px; width: 66px; }
  .mo .pk-mw .pk-tilt { transition: transform .9s var(--e-spring); }
  .mo [data-step="1"] .pk-mw .pk-tilt { transform: rotate(-10deg) translate3d(-2px, 3px, 0); }
  .mo [data-step="1"] .pk-mw .m-look { transform: translate(-.4px, 2.6px); }
  .mo [data-step="2"] .pk-mw .m-look { transform: translate(-2.2px, .4px); }
  .mo [data-step="3"] .pk-mw .m-look { transform: translate(.6px, 2.4px); }
  .mo .pk-mw .pk-say { position: absolute; right: calc(100% + 10px); bottom: 2px; margin: 0; white-space: nowrap; max-width: none; border-radius: 16px 16px 4px 16px;
    opacity: 0; transform: translate3d(8px, 6px, 0) scale(.6); transform-origin: 100% 100%; transition: opacity var(--t1) var(--e-out), transform .7s var(--e-out); }
  .mo [data-step="2"] .pk-mw .pk-say { opacity: 1; transform: none; transition: opacity var(--t1) var(--e-out) .9s, transform var(--t4) var(--e-spring) .9s; }
}
/* scroll-linked: the frame grows into place as the stage pins, the rail fills step by step */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mo .pk-frame { animation: pk-in linear both; animation-timeline: --pk; animation-range: entry 0% entry 100%; }
    @keyframes pk-in { from { scale: .82; translate: 0 8vh; } to { scale: 1; translate: 0 0; } }
    .mo .pk-win { animation: pk-win linear both; animation-timeline: --pk; animation-range: entry 35% entry 100%; }
    @keyframes pk-win { from { translate: 70px 0; } to { translate: 0 0; } }
    .mo .pk-rail b { animation: pk-fill linear both; animation-timeline: --pk; }
    .mo .pk-rail i:nth-child(1) b { animation-range: contain 0% contain 25%; }
    .mo .pk-rail i:nth-child(2) b { animation-range: contain 25% contain 50%; }
    .mo .pk-rail i:nth-child(3) b { animation-range: contain 50% contain 75%; }
    .mo .pk-rail i:nth-child(4) b { animation-range: contain 75% contain 100%; }
    @keyframes pk-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* ---------- 4c · one line, every script ---------- */
.sb { position: relative; overflow: clip; padding: clamp(56px, 9vh, 104px) 0 clamp(60px, 10vh, 112px); background: #0a0a09; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sb-in { position: relative; z-index: 1; width: min(100% - 40px, 1280px); margin: 0 auto; }
.sb-who { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 18px; }
.sb-en { font-size: clamp(42px, 7.2vw, 112px); line-height: 1.02; letter-spacing: -.042em; font-weight: 660; color: var(--ink); max-width: 12.5em; text-wrap: balance; }
.sb-rows { margin-top: clamp(26px, 4vh, 48px); display: grid; gap: clamp(2px, .6vh, 8px); }
.sb-r { white-space: nowrap; font-size: clamp(20px, min(2.8vw, 1.49vw + 19.5px), 48px); line-height: 1.28; font-weight: 560; letter-spacing: -.02em; color: #8f8d87; padding-left: max(20px, (100vw - 1280px) / 2); }
.sb-r:lang(vi) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.sb-r.hi { color: var(--y); }
.sb-t { display: inline-block; }
.mo .sb .sw .w { opacity: .14; transition: opacity .35s var(--e-out); }
.mo .sb .sw .w.p { opacity: .55; }
.mo .sb .sw .w.c { opacity: 1; }
.sb-m { position: absolute; z-index: 2; right: 0; top: clamp(40px, 9vh, 96px); width: clamp(86px, 9vw, 136px); transform: translate3d(105%, 0, 0) rotate(-28deg); }
.mo .sb-m { transition: transform 1.3s var(--e-spring) .35s; }
.sb.arr .sb-m, .rm .sb-m { transform: translate3d(30%, 0, 0) rotate(-28deg); }
.sb-m .m-look { transform: translate(-2.6px, .6px); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mo .sb-t { animation: sb-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* rows slide in opposite directions but never past their own start (every line stays whole and readable) */
    .mo .sb-r:nth-child(odd) .sb-t { --a: 3vw; --b: 0vw; }
    .mo .sb-r:nth-child(even) .sb-t { --a: 0vw; --b: 3vw; }
    .mo .sb-r.hi .sb-t { --a: 1.5vw; --b: 0vw; }
    @keyframes sb-drift { from { translate: var(--a, 0) 0; } to { translate: var(--b, 0) 0; } }
  }
}

/* ---------- proof: "10,000+ professionals", set large wherever it appears ---------- */
.facts .pro { font-weight: 660; color: var(--ink); font-size: 20px; letter-spacing: -.015em; }
.facts .pro .pro-n { font-size: 46px; font-weight: 720; letter-spacing: -.045em; line-height: 1; padding: 0; }
.facts li.fx-pro { min-height: 108px; }
.proof-n { font-size: clamp(18px, 1.7vw, 22px); color: var(--ink2); line-height: 1.25; margin: 0 auto 30px; max-width: 30em; }
.proof-n .pro { color: var(--ink); font-weight: 680; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; }
.proof-n .pro-n { display: block; font-size: clamp(72px, 10vw, 140px); line-height: .92; letter-spacing: -.055em; font-weight: 740; margin: 6px 0 4px; color: var(--ink); }
.proof-n .pro-n::after { content: ""; display: block; width: .9em; height: .07em; margin: .12em auto 0; border-radius: 99px; background: var(--y); }

/* ---------- mascot: on the Popular card, thinking at the FAQ, a bigger hello at the close ---------- */
.plan-m { position: absolute; right: 20px; top: -46px; width: 52px; z-index: 2; pointer-events: none; }
.plan-m .gh { transform-origin: 50% 96%; }
.faq-m { position: relative; width: 66px; margin: 0 auto 16px; }
.faq-m .th { position: absolute; left: 86%; bottom: 74%; width: 44px; height: 40px; }
.faq-m .th i { position: absolute; border-radius: 50%; background: var(--ink); }
.faq-m .th i:nth-child(1) { left: 0; bottom: 0; width: 7px; height: 7px; }
.faq-m .th i:nth-child(2) { left: 11px; bottom: 11px; width: 10px; height: 10px; }
.faq-m .th i:nth-child(3) { left: 25px; bottom: 23px; width: 15px; height: 15px; }
.mo .faq-m .th i { animation: th-dot 2.6s var(--e-io) infinite; }
.mo .faq-m .th i:nth-child(2) { animation-delay: .22s; }
.mo .faq-m .th i:nth-child(3) { animation-delay: .44s; }
@keyframes th-dot { 0%, 8% { opacity: 0; transform: scale(.3); } 28%, 74% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.85); } }
.faq-m .m-look { transform: translate(1.8px, -2.4px); }
.faq-m .gh { transform: rotate(-6deg); }
.m-spark { transform-box: fill-box; transform-origin: 50% 50%; }
@media (max-width: 899px) { .pkr { display: none; } }

/* ---------- scroll-linked animations keep following the scroll while motion is paused (they are not autonomous) ---------- */
html.is-paused .stage-hero, html.is-paused .stage-f1, html.is-paused .stage-f2, html.is-paused .stage-f3, html.is-paused .stage-after, html.is-paused .feat-copy,
html.is-paused .h2, html.is-paused #plans .plan, html.is-paused .close, html.is-paused .pk-frame, html.is-paused .pk-win, html.is-paused .pk-rail b, html.is-paused .sb-t { animation-play-state: running !important; }

/* ---------- tablet & phone tuning ---------- */
@media (max-width: 900px) {
  .bd { inset: 46px -8px 0 -8px; border-radius: 22px; }
  .feat-r .bd { inset: 46px -8px 0 -8px; }
  .feat-r .feat-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .facts .pro { font-size: 18px; }
  .facts .pro .pro-n { font-size: 40px; }
  .facts li.fx-pro { min-height: 0; }
  .pk-ct { font-size: 20px; }
  .sb-r { padding-left: 16px; }
  .sb-in { width: calc(100% - 32px); }
  .plan-m { right: 18px; }
}

/* ---------- reduced motion: the complete, still page ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo .pk-b, .mo .pk-qd, .mo .rc-x, .mo .pk-mm .pk-say, .mo .sb .sw .w, .mo .pkr .gh { opacity: 1 !important; transform: none !important; }
  .mo .sb-m { transform: translate3d(30%, 0, 0) rotate(-28deg) !important; }
}
/* after the meeting: the notes are on the card from the start (faint), then each line is written in */
.mo .notes .ln { opacity: .2; clip-path: none; transform: none; transition: opacity .55s var(--e-out); }
.mo .notes .ln.in { opacity: 1; clip-path: none; }

/* seg:features — the three feature scenes, proof, mascot companions, spacing */

/* features: a wider copy column that holds the headlines (no orphans), a tighter rhythm between the scenes */
@media (min-width: 901px) {
  .feat { padding: clamp(22px, 3.4vh, 44px) 0; }
  .feat-in { width: min(100% - 64px, 1376px); grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(32px, 3.6vw, 60px); }
  .feat-r .feat-in { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
  .feat .h2 { font-size: clamp(30px, 2.8vw, 40px); text-wrap: pretty; }
  .feat-copy .body { max-width: 30em; }
}
/* big screens: the whole scene (copy + cards) scales up as one, so it fills the screen instead of floating in it */
@media (min-width: 1680px) { .feat-in { zoom: 1.1; } }
@media (min-width: 1860px) and (min-height: 960px) { .feat-in { zoom: 1.18; } }
@media (max-width: 900px) { .feat { padding: 44px 0; } }
/* the stage rises in from less far, so the next scene is never a distant gap below the current one */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  @supports (animation-timeline: view()) {
    .stage-f1, .stage-f2, .stage-f3 { animation-name: sx-feat-in, sx-stage-out; }
    @keyframes sx-feat-in { from { translate: 0 48px; scale: .95; rotate: x 8deg; } to { translate: 0 0; scale: 1; rotate: x 0deg; } }
  }
}
/* cards read as full the moment they land: the not-yet-spoken words sit at a third, not a fifth */
.mo .stage-f1 .sw .w, .mo .stage-f2 .sw .w, .mo .stage-f3 .sw .w { opacity: .34; }
.mo .stage-f1 .sw .w.p, .mo .stage-f2 .sw .w.p, .mo .stage-f3 .sw .w.p { opacity: .64; }
.mo .stage-f1 .sw .w.c, .mo .stage-f2 .sw .w.c, .mo .stage-f3 .sw .w.c { opacity: 1; }
/* the f1 peek sits in the clear gap between Sarah's tile and the recap card */
.pkr-1 { left: calc(33.5% - 29px); top: 18px; }
.pkr-3 { top: 18px; }

/* proof (desktop): the figure and its claim on the left, a real review on a card on the right */
@media (min-width: 1100px) {
  .proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(48px, 6vw, 104px);
    padding-left: max(32px, (100% - 1240px) / 2); padding-right: max(32px, (100% - 1240px) / 2); }
  .proof > .col { width: auto; margin: 0; text-align: left; }
  .proof .body { margin-left: 0; margin-right: 0; }
  .proof .h2 { font-size: clamp(30px, 2.6vw, 40px); max-width: 15em; }
  .proof-n { margin: 0 0 30px; }
  .proof-n .pro-n { font-size: clamp(96px, 9.6vw, 150px); }
  .proof-n .pro-n::after { margin: .1em 0 0; }
  .quote-w { margin-top: 0; padding: clamp(32px, 3vw, 44px); border-radius: 30px; background: var(--s2); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px var(--line); }
  /* tall enough for the longest English review, so switching reviews never resizes the card; the name sits on its floor */
  .quote { min-height: 380px; align-items: flex-start; justify-content: flex-start; text-align: left; }
  .quote figcaption { margin-top: auto; padding-top: 28px; }
  .quote blockquote { font-size: clamp(21px, 1.75vw, 25px); }
  .quote blockquote p:first-child:not(:only-child) { color: var(--ink); font-weight: 620; letter-spacing: -.018em; }
  .quote blockquote p + p { color: #d9d7d0; }
  .people { justify-content: flex-start; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); gap: 8px; }
}

/* FAQ (desktop): the thinking mascot, heading and email hold the left; the questions run on the right */
@media (min-width: 1100px) {
  .faq > .col { width: min(100% - 64px, 1200px); display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(48px, 6vw, 104px); align-items: start; text-align: left; }
  .faq-m, .faq .h2, #faq-sub { grid-column: 1; }
  .faq-l { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
  .faq-m { width: 84px; margin: 0 0 22px; }
  .faq .h2 { margin: 0; max-width: 9em; }
  #faq-sub { margin-left: 0; margin-right: 0; }
}

/* seg:peak — the peak scene (real call + docked Smooth AI) and the one-line band after it */
/* scroll-linked parts keep tracking the scroll while their stage is off screen, so a flick back in never shows a stale frame */
html.mo .pk-stick.off .pk-frame, html.mo .pk-stick.off .pk-win, html.mo .pk-stick.off .pk-rail b, html.mo .pk-stick.off .pk-vid video, html.mo .sb.off .sb-t,
html.is-paused .pk-vid video { animation-play-state: running !important; }
/* a short window shows the recap topics that fit whole */
.pk-rt.cut { display: none; }
/* no beat ever opens on an empty card: streamed lines are laid out faint from the start, then light up word by word */
.mo .pk-stick .sw .w { opacity: .3; }
.mo .pk-stick .sw .w.p { opacity: .62; }
.mo .pk-stick .sw .w.c { opacity: 1; }
@media (min-width: 900px) {
  /* laptop heights: the reply card takes the window on its own for its beat (no sliver of the question above it) */
  .mo .pk-tight[data-step="2"] .pk-flow { opacity: 0; }
  .mo .pk-tight .pk-b2 { top: 12px; bottom: auto; }
  /* and if even that is too tall, it scales from its top edge to fit the window body (--pk-fit is set by pkMeasure) */
  .mo .pk-tight .pk-b2 .pk-c { scale: var(--pk-fit, 1); transform-origin: 50% 0; }
}
/* short laptop windows: the frame sits low (clear of the nav capsule) and a little larger; 120px side gutters keep it clear of the pause button */
@media (min-width: 900px) and (max-height: 700px) {
  .mo .pk-stick { place-items: end center; padding-bottom: 14px; }
  .mo .pk-frame { width: min(100vw - 120px, (100vh - 104px) * 16 / 9, 1560px); }
}
/* big screens: the docked window reads at the scale of the frame */
@media (min-width: 1600px) and (min-height: 1000px) {
  .mo .pk-bar, .mo .pk-tabs { font-size: 15px; }
  .mo .pk-top { font-size: 13.5px; }
  .mo .pk-row { grid-template-columns: 58px minmax(0, 1fr); }
  .mo .pk-row .who, .mo .pk-b1 .who { font-size: 14px; }
  .mo .pk-row .en { font-size: 16px; }
  .mo .pk-row .trl, .mo .pk-b1 .trl, .mo .pk-b2 .trl { font-size: 14.5px; }
  .mo .pk-b1 .q-t { font-size: 17px; }
  .mo .pk-b2 .sug-t { font-size: 19.5px; }
  .mo .pk-b3 .rc-t { font-size: 17px; }
  .mo .pk-b3 .rc-l li { font-size: 14.5px; }
}
/* desktop: the camera slowly pushes in on Sarah as the scene steps through (compositor-only scale on the video layer) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mo .pk-vid video { transform-origin: 30% 0; animation: pk-push linear both; animation-timeline: --pk; animation-range: contain 0% contain 100%; }
    @keyframes pk-push { from { scale: 1; } to { scale: 1.1; } }
  }
}
/* stacked layout (phones, tablets, reduced motion): the mascot sits on the Smooth AI window, peeking over the call */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .pk-mw { display: block; position: absolute; z-index: 2; left: 26px; top: -43px; width: 54px; pointer-events: none; }
  .pk-mw .pk-say { display: none; }
  .pk-mw .pk-tilt { transform: rotate(-7deg); }
  .pk-mw .m-look { transform: translate(1.6px, -1.8px); }
}
/* phones: the call runs edge to edge and taller (4:3), so the faces read; the window docks over its lower edge */
@media (max-width: 599px) {
  .pk-frame { width: 100%; margin-top: 26px; }
  .pk-h0 { margin: 0 20px 20px; }
  .pk-vid { aspect-ratio: 4 / 3; border-radius: 0; box-shadow: none; }
  .pk-scrim { background: linear-gradient(to top, var(--bg) 0, rgba(13,13,12,.88) 10%, rgba(13,13,12,.3) 24%, transparent 40%); }
  .pk-win { margin: -46px 16px 0; }
  .pk-mw { left: auto; right: 22px; }
  .pk-mw .m-look { transform: translate(-2px, -1.4px); }   /* looks across at Sarah */
}
/* phones: every translation wraps whole instead of running off both edges */
@media (max-width: 699px) {
  .sb-r { white-space: normal; font-size: clamp(20px, 5.8vw, 26px); line-height: 1.3; padding-right: 16px; text-wrap: pretty; }
  .sb-rows { gap: 10px; }
  .mo .sb-t { animation: none; }
  .sb-m { top: 12px; width: 62px; }
}

/* seg:pricing — plan cards hold still where you read them; the Popular mascot always has its own room */
/* desktop: the row rises as one (same offset for every card, no scale) and has settled within the first 150px of its
   entry, while every CTA (about 230px into its card) is still below the fold. After that the cards never move with the scroll. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  @supports (animation-timeline: view()) {
    #plans .plan { animation: sxp-rise linear both, sxp-fade linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 150px, entry 0% entry 110px; }
    #plans .plan:nth-child(2) { animation-range: entry 0% entry 150px, entry 12px entry 122px; }
    #plans .plan:nth-child(3) { animation-range: entry 0% entry 150px, entry 24px entry 134px; }
    #plans .plan:nth-child(4) { animation-range: entry 0% entry 150px, entry 36px entry 146px; }
    @keyframes sxp-rise { from { translate: 0 44px; } to { translate: 0 0; } }
    @keyframes sxp-fade { from { opacity: 0; } to { opacity: 1; } }
  }
}
/* stacked layouts: the Popular card's row gets the mascot's height above it, so the mascot never sits on the card above */
@media (max-width: 1100px) and (min-width: 761px) {
  #plans .plan:nth-child(n+3) { margin-top: 46px; }
}
@media (max-width: 760px) {
  #plans .plan.hot { margin-top: 46px; }
  .plan-t { min-height: 0; }
}

/* seg:global — phone nav: the localized "Start for free" is never cut to an ellipsis (es/pt/de/fr/vi/ru at 320–390px).
   The language pill drops its chevron (the globe + code already say "language"), gaps and paddings tighten slightly,
   and below 360px the pill is the code alone and the CTA steps down a size. Every target stays >= 44px. */
@media (max-width: 560px) {
  .nav-in, .nav-r { gap: 6px; }
  .lang { flex: none; }
  .lang-btn { padding: 0 10px; gap: 5px; min-width: 44px; justify-content: center; }
  .lang-btn .chev { display: none; }
  .nav .btn-sm { padding: 0 13px; }
}
@media (max-width: 359px) {
  .nav-in { padding-left: 8px; }
  .lang-btn > svg:first-child { display: none; }
  .nav .btn-sm { padding: 0 9px; font-size: 13px; letter-spacing: -.01em; }
}

/* seg:finish — integration fixes from the segment reviews */
/* reviews: every review of the language shares one cell (inactive ones hidden), so the card never resizes when you switch */
.q-st { display: grid; width: 100%; }
.q-st > blockquote { grid-area: 1 / 1; align-self: center; }
.q-gh { visibility: hidden; }
@media (min-width: 1100px) { .quote { min-height: 0; } .q-st > blockquote { align-self: start; } }
.people button:focus-visible { opacity: 1; }
/* proof: Korean "10,000명+" stays on one line at every size; Japanese breaks between phrases, never inside プロフェッショナル */
html[data-lang="ko"] .proof-n .pro-n { white-space: nowrap; font-size: clamp(62px, 8.2vw, 128px); }
html[data-lang="ja"] .facts li, html[data-lang="ja"] .proof-n, html[data-lang="ja"] .proof .h2 { word-break: auto-phrase; }
@media (max-width: 1099px) { .proof .h2 { max-width: 18em; margin-left: auto; margin-right: auto; } }
/* two-line headlines: each written line balances on its own (no lone "language." or "to speak") */
.h2 .brl { display: block; text-wrap: balance; }
/* short laptop windows (1366x768, 1280x720 with browser chrome): a whole feature scene fits under the nav */
@media (min-width: 901px) and (max-height: 700px) { .feat-in { zoom: .88; } }
/* the meeting-notes stage arrives like the feature scenes (48px, not 80px) */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  @supports (animation-timeline: view()) { .stage-after { animation-name: sx-feat-in, sx-stage-out; } }
}
/* pricing toggle at 320–360px: long labels (ru, vi) stay on one line, inside the gutters */
@media (max-width: 360px) { .tgl button { padding: 0 12px; gap: 6px; white-space: nowrap; } }
/* phones: the language menu lines up with the nav's right edge (it used to open off the left of the screen) */
@media (max-width: 760px) { .lang { position: static; } }
/* tablets in portrait (761–899px): code-only language pill, tighter links, so no label is cut or wrapped in any language */
@media (min-width: 761px) and (max-width: 899px) {
  .nav-in { gap: 8px; }
  .nav-links { margin-left: 0; gap: 0; }
  .nav-links a { padding: 0 9px; min-width: 44px; justify-content: center; white-space: nowrap; }
  .lang { flex: none; }
  .lang-btn { padding: 0 11px; gap: 6px; }
  .lang-btn #lang-v { display: none; }
  .lang-btn::after { content: attr(data-code); font-weight: 560; font-size: 13px; }
  .lang-btn .chev { order: 2; }
  .nav .btn-sm { flex-shrink: 0; }
}