/* The marketing site, from design page "Website" (BQ, 35.61). Values are the page's own. */

@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("fonts/Nunito_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("fonts/Nunito_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("fonts/Nunito_700Bold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("fonts/Nunito_800ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Lora"; font-weight: 400; font-display: swap; src: url("fonts/Lora_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Lora"; font-weight: 600; font-display: swap; src: url("fonts/Lora_600SemiBold.ttf") format("truetype"); }

:root {
  --paper: #F7F2E9;
  --sunken: #EFE8DA;
  --raised: #FFFDF9;
  --line: #E4DCCD;
  --ink: #1F1D1A;
  --muted: #6E675C;
  --brand: #FF6A2B;
  --brand-edge: #E04E12;
  --brand-ink: #2A1206;
  --lang: #17565E;
  --lang-pressed: #0F3E44;
  --dark-ink: #F2EDE3;
  --dark-muted: #A39B8D;
  --dark-line: #33302A;
  --dark-brand: #FF7A3D;
  --dark-lang: #68BFC4;
  --faint: #8A8275;
  --dotted: #C6BCA9;
  --wash: #D9E8E7;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --story: "Lora", Georgia, serif;
}

html, body { margin: 0; padding: 0; background: var(--paper); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; color: var(--ink); font-family: "Nunito", system-ui, sans-serif; }
a { color: var(--lang); }
a:hover { color: var(--lang-pressed); }
h1, h2, h3, p { margin: 0; }

.wrap { max-width: 1120px; margin: 0 auto; }

/* Header */
.head { padding: 20px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.logo { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--brand); display: flex; align-items: center; justify-content: center; color: var(--brand-ink); }
.logo svg { width: 21px; height: 21px; }
.wordmark { font-size: 24px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.grow { flex: 1; }
.nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 16px; font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--ink); text-decoration: none; }
.cta { text-decoration: none; border-radius: 12px; background: var(--brand-edge); padding-bottom: 4px; }
.cta span { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 18px; border-radius: 12px; background: var(--brand); color: var(--brand-ink); font-size: 16px; font-weight: 800; }

/* Hero */
.hero { padding: 72px 24px 96px; display: flex; flex-direction: column; gap: 64px; }
.hero-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 64px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { max-width: 13ch; font-size: clamp(42px, 5.8vw, 76px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.lead { max-width: 34em; font-size: 20px; line-height: 31px; color: var(--muted); text-wrap: pretty; }
.badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.badge { display: block; width: 176px; height: 52px; }
.badge img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Sections */
.sec { padding: 88px 24px; }
.band { background: var(--sunken); }
.h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }

/* How it works (35.62): four steps beside a phone that walks them. The phone
   draws the app as the recording stage does (founder, 2026-10-04). */
.dark { background: var(--ink); color: var(--dark-ink); }
.how { display: flex; flex-direction: column; gap: 40px; }
.walk { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: center; }
.walk-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.walk-steps { display: flex; flex-direction: column; }
.walk-step { display: flex; gap: 16px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.walk-bar { flex: none; width: 4px; border-radius: 999px; background: #3A362F; }
.walk-step.done .walk-bar { background: var(--dark-ink); }
.walk-step.on .walk-bar { background: var(--brand); }
.walk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 0; }
.walk-label { font-size: 20px; line-height: 26px; font-weight: 800; color: var(--faint); }
.walk-step.on .walk-label { color: var(--dark-ink); }
.walk-body { display: none; font-size: 17px; line-height: 27px; color: var(--dark-muted); text-wrap: pretty; }
.walk-step.on .walk-body { display: block; }
.walk-cue { min-height: 52px; display: flex; align-items: center; }
.walk-prompt { font-size: 18px; line-height: 26px; font-weight: 800; text-wrap: pretty; }
.walk-restart, .walk[data-u="4"] .walk-prompt { display: none; }
.walk[data-u="4"] .walk-restart { display: block; }
.walk-stage { flex: 1 1 440px; min-width: 0; display: flex; justify-content: center; }
.walk-box { width: 472px; height: 568px; overflow: hidden; flex: none; transition: height 240ms var(--ease); }
.walk-scale { position: relative; width: 472px; height: 568px; transform-origin: 0 0; }

/* The phone: a Pro Max's proportions, cut straight at the bottom. Its 430 ×
   932 screen with 55 corners, a 12 black border and a 3 rim, so the body's
   corners are the screen's plus the border. The action button, the volume
   pair and the side button sit where the real ones do. */
.wp { position: absolute; left: 6px; top: 0; width: 460px; height: 962px; box-sizing: border-box; padding: 12px; border-radius: 70px; background: #0B0A09; border: 3px solid #5A544A; }
.wp-key { position: absolute; width: 3px; background: #5A544A; }
.wp-key-0, .wp-key-1, .wp-key-2 { left: -6px; border-radius: 3px 0 0 3px; }
.wp-key-0 { top: 120px; height: 32px; }
.wp-key-1 { top: 180px; height: 60px; }
.wp-key-2 { top: 252px; height: 60px; }
.wp-key-3 { right: -6px; top: 210px; height: 96px; border-radius: 0 3px 3px 0; }
.wp-screen { position: relative; width: 430px; height: 932px; border-radius: 55px; overflow: hidden; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; }
.wp-status { flex: none; height: 54px; display: flex; align-items: center; padding: 0 8px; }
.wp-ear { flex: 1; display: flex; justify-content: center; }
.wp-island { flex: none; width: 126px; height: 37px; border-radius: 999px; background: #0B0A09; }
.wp-time { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wp-icons { display: flex; align-items: center; gap: 6px; }
.wp-battery { width: 25px; height: 12px; box-sizing: border-box; border: 1.5px solid rgba(31, 29, 26, 0.45); border-radius: 4px; padding: 1.5px; }
.wp-battery div { width: 70%; height: 100%; border-radius: 2px; background: var(--ink); }
.wp-icon { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; }
.wp-icon svg, .wp-chev svg { width: 24px; height: 24px; display: block; }
.wp-muted, .wp-chev { color: var(--muted); }

/* The app's listening screen */
.wp-head { flex: none; display: flex; align-items: center; gap: 4px; padding: 0 16px 8px 8px; font-size: 17px; line-height: 23px; font-weight: 800; }
.wp-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.wp-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-column { padding: 4px 16px; display: flex; flex-direction: column; gap: 24px; }
.host { display: flex; gap: 12px; }
.host-rule { flex: none; width: 2px; border-radius: 2px; background: var(--line); }
.host-text { flex: 1; min-width: 0; text-wrap: pretty; }
.wp-host { font-size: 17px; line-height: 26px; }
.wp-line { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-inline-start: 14px; }
.wp-line, .wp-sentence [data-word], .wp-play, .wp-each, .wp-save, .wp-row-door, .wp-chip, .wp-back, .wp-scrim { cursor: pointer; }
.wp-speaker { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; color: var(--faint); }
.wp-face { width: 20px; height: 20px; box-sizing: border-box; flex: none; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; font-weight: 800; color: var(--muted); }
.wp-nl { position: relative; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 20px; line-height: 32px; text-wrap: pretty; }
.wp-nl .w, .wp-sentence .w { margin-inline-end: 6px; }
.wp-nl .w:last-child, .wp-sentence .w:last-child { margin-inline-end: 0; }
.wp-nl .wb { padding: 0 4px; margin: 0 -4px; border-radius: 6px; transition: background 120ms linear, color 120ms linear; }
.wp .wb.come { color: var(--muted); }
.wp .wb.now { background: var(--wash); }

/* The sheets, risen past the app's cap so they fit the cut phone (35.62) */
.wp-scrim { position: absolute; inset: 0; background: rgba(31, 29, 26, 0.24); opacity: 0; transition: opacity 240ms var(--ease); pointer-events: none; }
.walk.sheeted .wp-scrim { opacity: 1; pointer-events: auto; }
.wp-pane { position: absolute; left: 0; top: 0; width: 430px; height: 932px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; transform-origin: 50% 0; transition: transform 360ms var(--ease); }
.wp-sheet { height: 822px; box-sizing: border-box; background: var(--raised); border: 1px solid var(--line); border-radius: 18px 18px 0 0; overflow: hidden; display: flex; flex-direction: column; pointer-events: auto; transform: translateY(110%); transition: transform 420ms var(--ease), background 360ms linear; }
.wp-chat { height: 834px; }
.wp-pane.open .wp-sheet { transform: none; }
/* Under the chat the sentence sheet steps back, as the app stacks them */
.wp-pane.under { transform: translateY(-48px) scale(0.95); }
.wp-pane.under .wp-sheet { background: #F4EEE3; }
.wp-grabber { flex: none; display: flex; justify-content: center; padding: 8px 8px 0; }
.wp-grabber div, .wp-grabber-bar { width: 36px; height: 4px; border-radius: 999px; background: var(--line); }
.wp-sheet-body { flex: 1; min-height: 0; overflow: hidden; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.wp-said { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.wp-sentence { font-family: "Lora", Georgia, serif; font-size: 30px; line-height: 46px; text-wrap: pretty; text-underline-offset: 5px; }
.wp-sentence .wb { padding: 0 4px; margin: 0 -4px; border-radius: 10px; transition: background 160ms var(--ease), color 160ms var(--ease); }
.wp-sentence .wb { position: relative; }
.wp-sentence .wb.picked { background: var(--wash); text-decoration: underline solid currentColor; }
.wp-tr { align-self: stretch; display: flex; gap: 12px; font-size: 22px; line-height: 32px; text-wrap: pretty; }
.wp-tr > div:last-child, .wp-chat-tr > div:last-child { flex: 1; min-width: 0; }
.wp-rule { flex: none; width: 2px; border-radius: 2px; background: var(--muted); }
.wp-well-clip { overflow: hidden; max-height: 0; transition: max-height 240ms var(--ease); }
.wp-well-clip.open { max-height: 200px; }
.wp-well { display: none; margin-top: 16px; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; min-height: 56px; box-sizing: border-box; border-radius: 14px; background: var(--sunken); }
.wp-well.shown { display: flex; }
.wp-well-text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.wp-well-word { font-family: "Lora", Georgia, serif; font-size: 20px; line-height: 26px; color: var(--lang); }
.wp-well-gloss { font-size: 17px; line-height: 24px; text-wrap: pretty; }
.wp-actions { display: flex; align-items: center; gap: 8px; }
.wp-play { flex: none; border-radius: 14px; background: var(--brand-edge); padding-bottom: 4px; }
.wp-play > div { min-height: 48px; border-radius: 14px; background: var(--brand); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; font-size: 17px; font-weight: 800; }
.wp-play svg { width: 24px; height: 24px; display: block; }
.wp-glyph-pause, .wp-pause-label, .wp-play.playing .wp-glyph-play, .wp-play.playing .wp-play-label { display: none; }
.wp-play.playing .wp-glyph-pause, .wp-play.playing .wp-pause-label { display: inline; }
.wp-each { flex: none; min-height: 52px; box-sizing: border-box; display: flex; align-items: center; padding: 0 10px; border-radius: 14px; font-size: 17px; font-weight: 600; }
.wp-each.on { background: var(--sunken); font-weight: 800; }
.wp-walking-label, .wp-each.on .wp-each-label { display: none; }
.wp-each.on .wp-walking-label { display: inline; }
.wp-save.on svg { fill: currentColor; }
.wp-row { display: flex; flex-direction: column; margin: 0 -8px; }
.wp-row-door { margin-top: 8px; }
.wp-rowline { height: 1px; background: var(--line); }
.wp-row-in { position: relative; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 8px; font-size: 17px; line-height: 24px; font-weight: 600; }
.wp-row-in > div:first-child { flex: 1; min-width: 0; }
.wp-chev { width: 24px; height: 24px; flex: none; }
.wp-row-label { position: relative; }

/* The app's explain chat */
.wp-chat-top { flex: none; display: flex; align-items: center; padding: 8px 8px 0; }
.wp-chat-top .grow { display: flex; }
.wp-chat-head { flex: none; padding: 4px 16px 12px; border-bottom: 1px solid var(--line); }
.wp-chat-line { display: flex; align-items: center; margin-left: -12px; padding-right: 4px; }
.wp-chat-line > div:last-child { flex-shrink: 1; min-width: 0; font-family: "Lora", Georgia, serif; font-size: 20px; line-height: 34px; text-wrap: pretty; }
.wp-chat-tr { display: flex; gap: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }
.wp-chat-tr .wp-rule { border-radius: 999px; }
.wp-chat-body { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 20px 16px 28px; display: flex; flex-direction: column; gap: 24px; font-size: 17px; line-height: 24px; }
.wp-ask { display: flex; flex-direction: column; gap: 12px; }
.wp-prompt { font-weight: 800; }
.wp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-chip { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; }
.wp-chip { position: relative; }
/* Room past the end, so the phone can scroll what is new above its cut. */
.wp-chat-body::after { content: ""; flex: none; height: 480px; margin-top: -24px; }
.wp-turn { display: flex; flex-direction: column; gap: 24px; }
.wp-me { align-self: flex-start; background: var(--sunken); border-radius: 18px; padding: 12px 16px; font-weight: 600; }
.wp-spin { display: none; position: relative; width: 20px; height: 20px; }
.wp-spin.shown { display: block; }
.wp-spin div { position: absolute; inset: 0; border-radius: 999px; border: 2.5px solid transparent; }
.wp-spin div:first-child { border-color: var(--muted); opacity: 0.28; }
.wp-spin div:last-child { border-top-color: var(--muted); animation: wp-spin 900ms linear infinite; }
@keyframes wp-spin { to { transform: rotate(360deg); } }
.wp-wait, .wp-answer { display: none; text-wrap: pretty; }
.wp-wait { margin-bottom: -12px; }
.wp-wait.shown, .wp-answer.shown { display: block; }
.wp .beat, .wp .dot { opacity: 0; transition: opacity 700ms var(--ease); white-space: pre-wrap; }
.wp .dot { transition: none; }
.wp .beat.in, .wp .dot.in { opacity: 1; }
.wp-answer .nl { font-family: "Lora", Georgia, serif; color: var(--lang); }

/* The tap marker: the recording stage's finger (BJ) */
.tap-at { display: none; position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; pointer-events: none; z-index: 2; left: 50%; top: 50%; }
.walk[data-u="0"] .tap-line, .walk[data-u="1"] .wp-pane.open .tap-word, .walk[data-u="2"] .wp-pane.open .tap-door, .walk[data-u="3"] .wp-pane.open .tap-chip { display: block; }
.tap { position: relative; width: 48px; height: 48px; }
.tap > div { position: absolute; border-radius: 999px; box-sizing: border-box; }
.tap-ring { left: -12px; top: -12px; width: 72px; height: 72px; border: 3px solid var(--brand); opacity: 0; animation: tap-ring 1.6s var(--ease) infinite; }
.tap-halo { left: 2px; top: 2px; width: 44px; height: 44px; background: rgba(255, 106, 43, 0.28); animation: tap-press 1.6s var(--ease) infinite; }
.tap-dot { left: 13px; top: 13px; width: 22px; height: 22px; background: var(--brand); border: 3px solid var(--raised); animation: tap-press 1.6s var(--ease) infinite; }
@keyframes tap-ring { 0%, 20% { transform: scale(0.5); opacity: 0; } 28% { opacity: 0.9; } 70%, 100% { transform: scale(1.15); opacity: 0; } }
@keyframes tap-press { 0%, 14%, 40%, 100% { transform: scale(1); } 22% { transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) {
  .tap > div { animation: none; }
  .tap-ring { opacity: 0.5; }
}

/* Pricing (A · Two cards) */
.pricing { display: flex; flex-direction: column; gap: 40px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; align-items: stretch; }
.plan { border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 28px; }
.plan-free { border: 1px solid var(--line); background: var(--raised); }
.plan-life { background: var(--ink); color: var(--dark-ink); }
.plan-name { display: flex; flex-direction: column; gap: 6px; }
.eyebrow { font-size: 15px; line-height: 20px; font-weight: 800; color: var(--muted); }
.plan-life .eyebrow { color: var(--dark-muted); }
.price { font-size: clamp(44px, 5vw, 60px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.plan-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.plan-head .plan-name { flex: 1; }
.pill { font-size: 14px; line-height: 20px; font-weight: 800; color: var(--brand-ink); background: var(--dark-brand); border-radius: 999px; padding: 6px 14px; }
.plan-blurb { font-size: 18px; line-height: 28px; color: var(--muted); text-wrap: pretty; }
.plan-life .plan-blurb { color: var(--dark-muted); }
.ticks { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.tick { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--line); }
.tick svg { flex: none; display: block; width: 22px; height: 22px; stroke: var(--lang); }
.tick div { flex: 1; font-size: 17px; line-height: 24px; }
.plan-life .ticks, .plan-life .tick { border-color: var(--dark-line); }
.plan-life .tick svg { stroke: var(--dark-lang); }
.chat { border-radius: 18px; background: var(--raised); color: var(--ink); padding: 16px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--dark-line); }
.chat-door { display: flex; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.chat-door div { flex: 1; font-size: 15px; line-height: 22px; font-weight: 700; }
.chat-door svg { width: 20px; height: 20px; color: var(--muted); transform: rotate(90deg); }
.chat-ask { align-self: flex-end; max-width: 85%; font-size: 14px; line-height: 20px; font-weight: 700; background: var(--sunken); border-radius: 14px; padding: 8px 12px; }
.chat-answer { font-size: 15px; line-height: 23px; text-wrap: pretty; }
.nl-inline { font-family: var(--story); font-size: 14px; color: var(--lang); }
.plan-foot { font-size: 15px; line-height: 22px; color: var(--dark-muted); }

/* Questions */
.faq { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.faq .h2 { flex: 1 1 280px; }
.faq-list { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; gap: 16px; min-height: 64px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { flex: 1; font-size: 19px; line-height: 27px; font-weight: 700; }
.faq-plus { width: 24px; height: 24px; flex: none; transition: transform 200ms cubic-bezier(0.2, 0, 0, 1); }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-a { padding: 0 40px 24px 0; font-size: 17px; line-height: 27px; color: var(--muted); text-wrap: pretty; }

/* Footer */
.foot { padding: 88px 24px 32px; display: flex; flex-direction: column; gap: 64px; }
.foot-cta { display: flex; flex-direction: column; gap: 24px; }
.foot h2 { max-width: 14ch; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.06; font-weight: 800; letter-spacing: -0.02em; }
.foot-base { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
.foot-row { display: flex; flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 15px; line-height: 22px; }
.foot-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.foot-brand .logo { width: 28px; height: 28px; border-radius: 8px; }
.foot-brand .logo svg { width: 15px; height: 15px; }
.foot-legal { display: flex; gap: 24px; }
.foot-legal a { color: var(--ink); }
.foot-muted { color: var(--muted); }
.foot-company { font-size: 13px; line-height: 19px; color: var(--muted); }

/* The phone beside the headline (35.61): the walk's phone whole, at 340 wide,
   drawing the app's listening screen as it plays: the block being said in ink,
   the rest dimmed, the host's words going from faint to ink and the Dutch
   line's washed one at a time, the column keeping it 30% down. A line is
   tapped, its sheet rises and a word opens; then the story plays on. --k is
   the phone's scale, set by the script. */
.hp-slot { display: flex; justify-content: center; }
.hp-box { --k: 0.7203; position: relative; width: 340px; height: calc(962px * var(--k)); flex: none; }
.hp-scale { position: absolute; left: 0; top: 0; width: 472px; height: 962px; transform: scale(var(--k)); transform-origin: 0 0; pointer-events: none; }
.hp-view { flex: 1; min-height: 0; overflow: hidden; }
.hp-column { padding-bottom: 400px; transition: transform 800ms var(--ease); }
.hp .hp-block { color: var(--faint); transition: color 240ms var(--ease); }
.hp .hp-block.now { color: var(--ink); }
.hp .host-rule { background: transparent; transition: background 240ms var(--ease); }
.hp .host.now .host-rule { background: var(--muted); }
.hp .hw { transition: color 120ms linear; }
.hp .hw.come { color: var(--dotted); }
.hp-transport { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 28px; border-top: 1px solid var(--line); }
.hp-track-row { display: flex; align-items: center; gap: 12px; }
.hp-track { flex: 1; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.hp-track div { height: 4px; border-radius: 999px; background: var(--lang); transform: translateX(-100%); transition: transform 240ms var(--ease); }
.hp-clock { font-size: 14px; line-height: 20px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hp-buttons { display: flex; align-items: center; gap: 16px; }
.hp-buttons .grow { display: flex; }
.hp-play { flex: none; border-radius: 14px; background: var(--brand-edge); padding-bottom: 4px; }
.hp-play > div { min-width: 48px; height: 48px; border-radius: 14px; background: var(--brand); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; }
.hp-play svg { width: 24px; height: 24px; display: block; }
.hp-play.playing .wp-glyph-play { display: none; }
.hp-play.playing .wp-glyph-pause { display: inline; }
.hp.sheeted .wp-scrim { opacity: 1; }
/* The sentence sheet as tall as what it holds, as the app's is */
.hp .wp-sheet { height: auto; max-height: 822px; }
.hp[data-tap="line"] .hp-tap-line, .hp[data-tap="word"] .hp-tap-word { display: block; }
/* Off the phone's own screen: the site's switch for the story's sound, beside the transport */
.hp-sound { position: absolute; right: calc(var(--k) * 37px); bottom: calc(var(--k) * 69px - 22px); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity 240ms var(--ease); }
.hp-box:has(.hp.sheeted) .hp-sound { opacity: 0; pointer-events: none; }
.hp-sound span { width: 36px; height: 36px; border-radius: 999px; background: var(--ink); color: var(--dark-ink); display: flex; align-items: center; justify-content: center; }
.hp-sound svg { width: 20px; height: 20px; }
.hp-sound .sound-on, .hp-sound.on .sound-off { display: none; }
.hp-sound.on .sound-on { display: inline; }

/* Shared: speaker, Dutch words, translation, word well, buttons */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.speaker { display: flex; align-items: center; gap: 8px; min-width: 0; }
.face { width: 24px; height: 24px; box-sizing: border-box; flex: none; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.speaker-name { min-width: 0; font-size: 15px; line-height: 21px; color: var(--faint); overflow-wrap: anywhere; }
.speaker-lg { gap: 12px; }
.speaker-lg .face { width: 36px; height: 36px; font-size: 16px; }
.speaker-lg .speaker-name { font-size: 18px; line-height: 24px; }
.w { display: inline-block; }
.wb { display: inline-block; text-decoration-style: dotted; text-decoration-color: var(--dotted); }
.wb.lit, .wb.on { background: var(--wash); color: var(--lang); }
.wb.can { cursor: pointer; text-decoration-line: underline; }
.wb.can.on { text-decoration-line: none; }
.tr { display: flex; gap: 12px; align-items: stretch; }
.tr-bar { width: 2px; flex: none; border-radius: 2px; background: var(--muted); }
.tr > div:last-child { flex: 1; min-width: 0; text-wrap: pretty; }
.well { border-radius: 14px; background: var(--sunken); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.well-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.well-word { font-family: var(--story); font-size: 20px; line-height: 27px; color: var(--lang); }
.well-gloss { font-size: 16px; line-height: 23px; font-weight: 700; }
.well-note { font-size: 16px; line-height: 25px; text-wrap: pretty; }
.well-note .nl { font-family: var(--story); font-size: 15px; color: var(--lang); }
.btn-icon, .btn-play { flex: none; border-radius: 14px; background: var(--brand-edge); padding-bottom: 4px; }
.btn-icon > span, .btn-play > span { border-radius: 14px; background: var(--brand); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; }
.btn-icon > span { width: 48px; height: 48px; }
.btn-play > span { min-height: 48px; gap: 8px; padding: 0 20px; font-size: 17px; font-weight: 800; }
.btn-icon svg, .btn-play svg { width: 24px; height: 24px; display: block; }

/* Hero: the sample's line, set large */
.hero-line { border-top: 1px solid var(--line); padding-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.hero-nl { cursor: pointer; font-family: var(--story); font-weight: 600; font-size: clamp(28px, 5vw, 62px); line-height: 1.45; text-wrap: pretty; }
.hero-nl .w { margin-inline-end: 0.26em; }
.hero-nl .wb { display: inline; padding: 0 0.14em; margin: 0 -0.14em; border-radius: 0.22em; transition: background 140ms linear, color 140ms linear; }
.tr-hero { gap: 14px; max-width: 40em; }
.lead-size { font-size: 20px; line-height: 31px; }
.hint { font-size: 15px; line-height: 22px; color: var(--muted); }

/* The hero's sentence sheet */
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(31, 29, 26, 0.24); opacity: 0; pointer-events: none; transition: opacity 240ms cubic-bezier(0.2, 0, 0, 1); }
.sheet { position: fixed; left: 50%; bottom: 0; z-index: 21; width: 100%; max-width: 560px; max-height: 86vh; box-sizing: border-box; background: var(--raised); border: 1px solid var(--line); border-bottom: none; border-radius: 24px 24px 0 0; display: flex; flex-direction: column; transform: translate(-50%, 105%); transition: transform 380ms cubic-bezier(0.2, 0, 0, 1); }
.sheet-open .scrim { opacity: 1; pointer-events: auto; }
.sheet-open .sheet { transform: translate(-50%, 0%); }
.grabber { flex: none; display: flex; justify-content: center; padding: 10px 0 6px; cursor: pointer; }
.grabber div { width: 36px; height: 4px; border-radius: 999px; background: var(--line); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 24px 32px; display: flex; flex-direction: column; gap: 16px; }
.sheet-nl { font-family: var(--story); font-size: 30px; line-height: 46px; text-wrap: pretty; text-underline-offset: 5px; }
.sheet-nl .w { margin-inline-end: 6px; }
.sheet-nl .wb { padding: 0 4px; margin: 0 -4px; border-radius: 10px; transition: background 160ms, color 160ms; }
.tr-sheet > div:last-child { font-size: 20px; line-height: 30px; }
.well-clip { overflow: hidden; max-height: 0; transition: max-height 240ms cubic-bezier(0.2, 0, 0, 1); }
.well-clip.shown { max-height: 320px; }
.sheet-foot { display: flex; align-items: center; gap: 8px; }
.hint-sm { font-size: 14px; line-height: 20px; color: var(--muted); }

/* Try a story */
.try { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.try-copy { flex: 1 1 280px; display: flex; flex-direction: column; gap: 16px; }
.try-copy p { max-width: 26em; font-size: 19px; line-height: 30px; color: var(--muted); text-wrap: pretty; }
.try-story { flex: 2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.try-from { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--muted); }
.try-title { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25; font-weight: 800; text-wrap: balance; margin-bottom: 8px; }
.try-lines { display: flex; flex-direction: column; gap: 8px; }
.try-host { padding: 8px 20px 8px 6px; font-size: 18px; line-height: 28px; }
.try-line { border-radius: 20px; background: var(--paper); border: 1px solid transparent; transition: background 200ms, border-color 200ms; }
.try-line.open { background: var(--raised); border-color: var(--line); }
.try-row { display: flex; align-items: flex-start; gap: 12px; padding: 16px 12px 16px 20px; cursor: pointer; }
.try-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.try-nl { font-family: var(--story); font-weight: 600; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.55; text-wrap: pretty; text-underline-offset: 5px; }
.try-nl .w { margin-inline-end: 0.26em; }
.try-nl .wb { padding: 0 3px; margin: 0 -3px; border-radius: 8px; transition: background 140ms, color 140ms; }
.try-open { display: none; padding: 0 20px 20px; flex-direction: column; gap: 14px; }
.try-line.open .try-open { display: flex; }
.try-open .well:not(.shown) { display: none; }
.tr-try > div:last-child { font-size: 18px; line-height: 27px; }

/* Terms of use and Privacy (33, frame 4): one column, 640 wide */
.legal { padding: 48px 24px 88px; display: flex; justify-content: center; }
.legal-col { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 32px; }
.legal-head { display: flex; flex-direction: column; gap: 6px; }
.legal-head h1 { font-size: 36px; line-height: 42px; font-weight: 800; letter-spacing: -0.5px; }
.legal-date { font-size: 15px; color: var(--muted); }
.legal-contents { display: flex; flex-direction: column; gap: 8px; }
.legal-contents-title { font-size: 14px; font-weight: 800; color: var(--muted); }
.legal-entry { display: flex; gap: 12px; font-size: 17px; line-height: 26px; }
.legal-entry div { width: 20px; flex: none; font-weight: 800; color: var(--muted); }
.legal-entry a { font-weight: 600; }
.legal-section, .legal-contact { display: flex; flex-direction: column; gap: 12px; }
.legal-section h2, .legal-contact h2 { font-size: 22px; line-height: 28px; font-weight: 800; }
.legal-section p, .legal-contact p { font-size: 18px; line-height: 28px; }
.legal-contact { gap: 6px; }
.legal-contact a { font-weight: 700; }
.legal-rule { height: 1px; background: var(--line); }

/* Phone width (the page's own break: under 640) */
@media (max-width: 639px) {
  .head { padding: 16px 20px; }
  .logo { width: 32px; height: 32px; border-radius: 10px; }
  .logo svg { width: 17px; height: 17px; }
  .wordmark { font-size: 20px; }
  .nav-links { display: none; }
  .cta { padding-bottom: 3px; }
  .cta span { min-height: 40px; padding: 0 14px; font-size: 15px; }
  .hero { padding: 24px 24px 64px; gap: 40px; }
  .hero-top { gap: 40px; }
  .hero h1 { font-size: 34px; line-height: 1.12; }
  .lead, .lead-size { font-size: 17px; line-height: 27px; }
  .badge { width: 150px; height: 44px; }
  .hp-box { width: calc(min(340px, 100vw - 48px) * 0.9); }
  .sec { padding: 56px 24px; }
  .plan { padding: 24px; }
  .foot { padding: 56px 24px 28px; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* A speaker's picture fills their face circle, as the app's avatar does */
.face, .wp-face { overflow: hidden; }
.face img, .wp-face img { display: block; width: 100%; height: 100%; object-fit: cover; }