/* Real conversations: quiet reading surfaces, one generous stage per capture. */
.narrative-home {
  --content-max: 1200px;
  --paper: #fff9f2;
  --soft: #ffe4de;
  --night: #302c29;
  --copy: #4e443e;
  --quiet: #685b53;
  --hero-coral: #e74c3c;
}
.narrative-home main { overflow: clip; }
.narrative-home .header-row { transition: background-color 200ms, box-shadow 200ms; }
.narrative-home a, .narrative-home button, .narrative-home summary { touch-action: manipulation; }
.narrative-home main h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 3.9vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.n-lead { max-width: 30rem; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.65; color: var(--copy); }
.n-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3rem; padding-block: 42px 84px; }
.n-hero h1 { font: 600 clamp(3.5rem, 6vw, 5.75rem)/1.0 var(--font-display); letter-spacing: -.025em; }
.n-hero h1 em { font-style: normal; color: var(--hero-coral); }
.n-hero .n-lead { max-width: 28rem; margin-top: 1.8rem; }
.n-hero-actions { margin-top: 1.8rem; }
.n-hero .hero-cta { font-size: 1rem; padding-left: 1.1rem; }
.n-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .75rem; }
.hero-scene { position: relative; display: grid; place-items: center; min-height: 590px; isolation: isolate; }
.hero-blob { position: absolute; inset: 26px -12px 24px; background: #ffcfbf; mask: url('../assets/hero-shape.svg') center / 100% 100% no-repeat; transform: rotate(-9deg); z-index: -1; }
.hero-device { animation: hero-settle 650ms cubic-bezier(.16,1,.3,1) both; position: relative; z-index: 2; width: 280px; transform: translateX(-46px); }
.hero-friend { position: absolute; top: 160px; right: -55px; width: 330px; height: auto; transform: rotate(13deg); z-index: 1; pointer-events: none; }
.device-figure { position: relative; margin: 0; text-align: center; }
/* Screen underlaps the transparent frame by 2px at source scale; its aspect matches the captures. */
.device { position: relative; width: 100%; aspect-ratio: 0.4954; filter: drop-shadow(0 20px 18px #42332d1a); }
.device::after { content: ''; position: absolute; inset: 0; background: url('../assets/devices/iphone-pro-frame.webp') center / 100% 100% no-repeat; pointer-events: none; }
.device-screen { position: absolute; left: 5.833%; top: 2.276%; width: 88.542%; height: 95.25%; border-radius: 14.6% / 6.45%; overflow: hidden; background: #222321; }
.device-screen > div, .device-screen > a, .device-screen img, .device-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.demo-playback { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.demo-playback:focus-visible { outline: 3px solid var(--coral-deep); outline-offset: -5px; border-radius: inherit; }
.demo-playback:disabled { cursor: default; }
/* The output gap is the narrative hinge, rather than another feature card. */
.n-problem { position: relative; margin-block: 24px 48px; padding: clamp(64px, 7vw, 100px) 64px; background: var(--night); color: var(--paper); border-radius: 120px 32px 120px 32px; }
.n-problem h2 { color: var(--paper); }
.problem-copy { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 32px; }
.narrative-home .n-problem h2 { font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: 1.08; max-width: 100%; }
.problem-copy .n-lead { color: #ead9cd; margin-top: 0; max-width: 37rem; font-size: clamp(1.125rem, 1.6vw, 1.375rem); text-wrap: pretty; }
.product-chapter { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6rem; padding-block: 64px; }
.chapter-copy { max-width: 31rem; padding-left: 2rem; }
.chapter-media { display: grid; place-items: center; padding-block: 20px; }
.chapter-media .device-figure { width: 280px; max-width: 100%; }
.chapter-voice .chapter-copy, .chapter-review .chapter-copy { grid-column: 2; grid-row: 1; }
.chapter-voice .chapter-media, .chapter-review .chapter-media { grid-column: 1; grid-row: 1; }
.chapter-voice .chapter-copy, .chapter-review .chapter-copy { padding-left: 0; }
/* Space and composition separate chapters; no decorative rules. */
.chapter-keyboard { padding-top: 96px; }
.narrative-home .chapter-screenshot h2 { font-size: clamp(2.35rem, 3.8vw, 3.25rem); }
.narrative-home .chapter-deeper h2 { font-size: clamp(2.35rem, 3.5vw, 3rem); }
/* Real imagery supplies the visual context; no isolated blob behind Show DaoDao. */
.chapter-natural .chapter-media, .chapter-deeper .chapter-media { grid-column: 1; grid-row: 1; }
.chapter-natural .chapter-copy, .chapter-deeper .chapter-copy { grid-column: 2; grid-row: 1; padding-left: 0; }
.chapter-natural .chapter-media .device-figure, .chapter-deeper .chapter-media .device-figure { width: 300px; }
.chapter-voice { margin-block: 40px; padding: 72px 64px; min-height: 440px; grid-template-columns: 1fr; text-align: center; gap: 0; background: var(--night); border-radius: 40px; }
.chapter-voice .chapter-copy { grid-column: 1; max-width: 46rem; margin-inline: auto; }
.chapter-voice .chapter-media { grid-column: 2; }
.narrative-home .chapter-voice h2 { color: var(--paper); font-size: clamp(2.6rem, 4vw, 3.4rem); }
.chapter-voice .n-lead { color: #ead9cd; max-width: 35rem; margin-inline: auto; }
.n-philosophy { padding-block: 72px 56px; text-align: center; }
.n-philosophy .n-lead { max-width: 35rem; margin-inline: auto; }
.narrative-home .n-philosophy h2 { font-size: clamp(2.5rem, 5.5vw, 4.75rem); }
.capture-dialog { overscroll-behavior: contain; padding: 56px 18px 18px; border: 0; border-radius: 20px; max-width: calc(100vw - 24px); max-height: calc(100svh - 24px); background: var(--paper); box-shadow: 0 20px 80px #0005; }
.capture-dialog::backdrop { background: #171412c9; backdrop-filter: blur(6px); }
.capture-dialog[open] { animation: capture-in 180ms ease-out; }
.capture-dialog img { display: block; width: auto; height: auto; max-height: calc(100svh - 110px); max-width: 100%; object-fit: contain; border-radius: 8px; }
.capture-close { position: absolute; top: 6px; right: 12px; min-width: 64px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; font: 600 .9375rem var(--font-sans); }
.capture-close:hover { background: var(--soft); }
body:has(.capture-dialog[open]) { overflow: hidden; }
@keyframes capture-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
/* Recall closes the story in a broad, quiet stage rather than a fourth mirrored row. */
.chapter-review { margin-block: 64px 32px; padding: 64px 72px; background: var(--soft); border-radius: 120px 32px 120px 32px; gap: 64px; }
.chapter-review .chapter-copy { grid-column: 1; }
.chapter-review .chapter-media { grid-column: 2; }
.narrative-home .chapter-review h2 { font-size: clamp(2.35rem, 3.5vw, 3rem); }
.chapter-review .chapter-media .device-figure { transform: rotate(3deg); }
.chapter-review .chapter-copy .n-lead { max-width: 30rem; }
.narrative-home .why { padding-block: 28px 80px; }
.narrative-home .why-grid { max-width: none; gap: 16px; }
.narrative-home .why-item { padding: 30px; background: #fff; border: 0; border-radius: 22px; box-shadow: 0 6px 28px #4b382208; }
.narrative-home .why-item h3 { white-space: normal; font-size: 1.5rem; line-height: 1.25; margin-top: 22px; }
.narrative-home .why-item p { color: var(--copy); }
.narrative-home .why-item[data-tone] .why-icon { background: transparent; box-shadow: none; color: var(--coral-deep); }
.narrative-home .notes { border: 0; padding-block: 70px 85px; }
.narrative-home .notes-grid { max-width: 1200px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; }
.narrative-home .notes-list { border: 0; }
.narrative-home .notes-list details { border: 0; border-radius: 16px; padding-inline: 20px; margin-bottom: 8px; background: transparent; }
.narrative-home .notes-list details[open] { background: color-mix(in srgb, var(--peach) 30%, var(--background)); }
.narrative-home .notes-list summary { padding-block: 1.35rem; color: var(--ink); }
.narrative-home .notes-list summary::after { width: 1rem; height: 1rem; color: var(--ink); }
.narrative-home .notes-head { margin: 0; }
.narrative-home .download-band { background: #f6d9cb; padding-block: 110px 80px; border-radius: 50% 50% 0 0 / 36px 36px 0 0; overflow: visible; margin-top: 56px; }
.narrative-home .download-band:focus-visible { outline: none; }
.narrative-home .download-band:focus-visible h2 { outline: 2px solid var(--ink); outline-offset: 8px; border-radius: 8px; }
.signup-friend { position: absolute; width: 138px; height: auto; top: -78px; left: calc(50% - 69px); transform: rotate(-10deg); }
.narrative-home .download-band h2 { font-size: clamp(2.5rem, 4.6vw, 4.2rem); line-height: 1.13; }
.narrative-home .band-peek { display: none; }
.narrative-home .footer-bottom { border: 0; }
.narrative-home .footer-cols a { min-height: 44px; }
.narrative-home .scene-daodao, .narrative-home .scene-bubble { animation: none; }
:lang(zh) .n-hero h1 { font-size: clamp(3rem, 5.4vw, 4.6rem); line-height: 1.2; letter-spacing: -.04em; }
@media (max-width: 1000px) {
  .n-hero { gap: 32px; padding-block: 30px 64px; }
  .n-hero h1 { font-size: clamp(3rem, 6vw, 4.5rem); }
  .hero-device { width: 250px; }
  .hero-scene { min-height: 545px; }
  .hero-friend { width: 235px; right: -40px; top: 185px; }
  .hero-device { transform: translateX(-24px); }
  .chapter-voice { padding: 48px 32px; gap: 32px; min-height: 400px; }
  .narrative-home .chapter-voice h2 { font-size: clamp(2.75rem, 5vw, 4rem); }
  .chapter-review { padding: 48px 40px; border-radius: 80px 24px 80px 24px; gap: 32px; }
  .product-chapter { gap: 3rem; }
  .chapter-copy { padding-left: 0; }
  .chapter-media .device-figure { width: 260px; }
  .narrative-home .notes-grid { gap: 3rem; }
  .narrative-home .why-item { padding: 22px; }
}
@media (max-width: 750px) {
  .n-hero { grid-template-columns: 1fr; padding-block: 30px 60px; gap: 40px; }
  .n-hero-copy { max-width: 540px; text-align: center; margin-inline: auto; }
  .n-hero h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); }
  .n-hero .n-lead { font-size: 1.0625rem; margin: 24px auto 0; max-width: 27rem; }
  .n-hero-actions { margin-top: 24px; justify-content: center; }
  .hero-scene { width: min(90%, 430px); margin: auto; min-height: 545px; }
  .hero-friend { right: -24px; top: 150px; width: 240px; }
  .problem-copy { grid-template-columns: 1fr; gap: 28px; text-align: center; justify-items: center; }
  .problem-copy .n-lead { max-width: 33rem; }
  .narrative-home main h2 { font-size: clamp(2.35rem, 6.3vw, 3.5rem); }
  .n-lead { font-size: 1.0625rem; margin-top: 20px; }
  .product-chapter { gap: 2rem; padding-block: 44px; }
  .chapter-media .device-figure { width: 240px; }
  .narrative-home .why { padding-block: 20px 56px; }
  .narrative-home .notes { padding-block: 50px 60px; }
  .chapter-voice { grid-template-columns: 1fr; text-align: center; padding: 48px 28px; }
  .chapter-voice .chapter-copy, .chapter-voice .chapter-media { grid-column: 1; grid-row: auto; }
  .chapter-voice .n-lead { margin-inline: auto; }
  .chapter-natural .chapter-media .device-figure, .chapter-deeper .chapter-media .device-figure { width: 250px; }
  .narrative-home .notes-grid { grid-template-columns: 1fr; gap: 20px; }
  .narrative-home .download-band { padding-block: 90px 60px; }
}
@media (max-width: 540px) {
  .n-hero { gap: 32px; }
  .hero-device { width: 240px; }
  .hero-scene { min-height: 515px; }
  .hero-friend { width: 205px; right: -42px; top: 165px; }
  .hero-device { transform: translateX(-26px); }
  .hero-blob { inset: 35px -8px 15px; }
  .n-problem { padding: 56px 24px; border-radius: 64px 20px 64px 20px; }
  .problem-copy .n-lead { max-width: 29rem; }
  .narrative-home .n-problem h2 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .product-chapter { grid-template-columns: minmax(0, 1fr); gap: 24px; direction: ltr; padding-block: 44px; }
  .chapter-copy { max-width: 27rem; }
  .chapter-voice { padding: 44px 24px; border-radius: 28px; }
  .chapter-natural .chapter-media .device-figure, .chapter-deeper .chapter-media .device-figure { width: min(85%, 290px); }
  .n-philosophy { padding-block: 44px; }
  .product-chapter .chapter-copy, .product-chapter .chapter-media { grid-column: 1; grid-row: auto; }
  .chapter-copy .n-lead { max-width: 24rem; }
  .chapter-review { margin-block: 32px; padding: 40px 24px; border-radius: 56px 20px 56px 20px; }
  .chapter-review .chapter-media { padding-block: 12px; }
  .narrative-home .chapter-review h2 { font-size: clamp(2.3rem, 10vw, 3rem); }
  .chapter-media { padding-block: 0; }
  .chapter-media .device-figure { width: min(80%, 270px); }
  .narrative-home .why-grid { grid-template-columns: 1fr; gap: 12px; }
  .narrative-home .why-item { display: grid; grid-template-columns: 44px 1fr; gap: 8px 16px; padding: 22px; }
  .narrative-home .why-icon { grid-row: span 2; }
  .narrative-home .why-item h3 { margin: 0; font-size: 1.35rem; }
  .narrative-home .why-item p { grid-column: 2; }
  :lang(zh) .n-hero h1 { font-size: clamp(2.4rem, 10vw, 3.2rem); }
}
:lang(zh) .chapter-voice h2 { font-size: clamp(2rem, 5.3vw, 4rem); }
@media (max-width: 44.99rem) {
  .narrative-home .site-header .brand-word { width: 4rem; }
}
@media (max-width: 359px) {
  .hero-device { width: 220px; transform: translateX(-8px); }
  .hero-friend { width: 175px; right: -32px; top: 175px; }
  .narrative-home .site-header .brand-word { display: none; }
  .narrative-home .site-header .brand { gap: .35rem; }
  .narrative-home .header-cta.btn-go { padding-inline: .7rem; }
  .narrative-home .header-row { gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .narrative-home * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@keyframes hero-settle { from { translate: 0 20px; opacity: .4; } to { translate: 0 0; opacity: 1; } }

/* The real captures are the controls; keep the surrounding copy quiet. */
.capture-link { display: block; cursor: zoom-in; }
.capture-link:focus-visible { outline: 4px solid var(--coral-deep); outline-offset: -5px; }
/* Present the supplied voice recording in the same device frame as the other demos. */
.chapter-voice { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; text-align: left; }
.chapter-voice .chapter-copy { margin-inline: 0; }
.chapter-voice .chapter-media { grid-column: 2; grid-row: 1; }
.voice-capture { width: 300px; max-width: 100%; margin: 0; }
.voice-capture video { display: block; width: 100%; height: 100%; object-fit: cover; }
.voice-capture .demo-playback:focus-visible { outline-color: #ffa58e; }
@media (max-width: 750px) {
  .chapter-voice { grid-template-columns: minmax(0, 1fr); gap: 32px; text-align: center; }
  .chapter-voice .chapter-copy { margin-inline: auto; }
  .chapter-voice .chapter-media { grid-column: 1; grid-row: auto; }
  .voice-capture { width: min(100%, 300px); }
}

/* Editorial speech subtitle: clear of the recorded waveform and playback hit target. */
.voice-subtitle {
  position: absolute; z-index: 3; top: 22%; left: -12px; right: -12px;
  padding: 20px 22px 22px; border-radius: 24px 24px 24px 8px;
  background: #fff9f2; color: #302c29; text-align: left;
  box-shadow: 0 12px 36px #0004, 0 0 0 1px #302c2910;
  pointer-events: none; animation: voice-subtitle-in 180ms ease-out;
}
.voice-subtitle[hidden] { display: none; }
.voice-subtitle-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 600 .8125rem/1.3 var(--font-sans); color: #685b53; }
.voice-subtitle-label svg { width: 18px; height: 18px; flex: none; color: #b74430; }
.voice-subtitle p { margin: 0; font: 500 1.125rem/1.55 var(--font-sans); text-wrap: pretty; }
@keyframes voice-subtitle-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .voice-subtitle { animation: none; } }

/* Let enlarged text reflow instead of widening the signup grid or squeezing header controls. */
.narrative-home .download-grid { grid-template-columns: minmax(0, 1fr); }
.narrative-home .download-grid > * { min-width: 0; max-width: 100%; }
@media (max-width: 540px) {
  .narrative-home .site-header { height: auto; }
  .narrative-home .header-row { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-block: 8px; }
  .narrative-home .site-header.is-floating .header-row { height: auto; padding-inline: 8px; }
  .narrative-home .scene-bubble { left: auto; right: 16px; max-width: calc(100% - 32px); white-space: normal; }
  .narrative-home .site-header .brand { min-height: 44px; gap: 8px; }
  .narrative-home .site-header .brand-icon { width: 34px; }
  .narrative-home .site-header .brand-word { width: 80px; }
  .narrative-home .header-row { gap: 8px; }
  .narrative-home .lang-menu summary, .narrative-home .header-discord { width: 44px; height: 44px; }
  .narrative-home .lang-globe, .narrative-home .header-discord svg { width: 20px; height: 20px; }
}

/* Keep the complete mascot in front of the decorative hills. */
.narrative-home .scene-daodao { z-index: 1; }
.narrative-home .scene-bubble { z-index: 2; }

/* The app's mark for a change: a coral wash with a coral underline. */
/* A hand-drawn marker swipe: uneven edges, a slight tilt and a lighter second pass, never a flat box. */
.mark { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><path fill='%23ff6f61' fill-opacity='.42' d='M6 12C40 8 90 10 140 7c25-1.5 45-1 52 1 6 2 6 14 2 21-4 4-24 4-54 5-45 1-90-1-120 2-10 1-16-2-17-9-1-7-1-14 3-15z'/><path fill='%23ff6f61' fill-opacity='.3' d='M10 20c45-5 110-5 165-6 13 0 20 2 20 6 0 6-7 9-20 9-55 1-115 0-155 3-8 1-13-2-13-6 0-3 1-6 3-6z'/></svg>") 0 72% / 100% 88% no-repeat; padding: 0 .16em; margin-inline: -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Phones: brand, Discord (English pages) and "Learn Chinese ▾" share one row. */
@media (max-width: 540px) {
  .narrative-home .header-row:has(.learn-menu) { flex-wrap: nowrap; }
  .narrative-home .header-row:has(.learn-menu) .header-discord { margin-left: auto; }
  .narrative-home .header-row:not(:has(.header-discord)) .learn-menu { margin-left: auto; }
  .narrative-home .learn-menu summary { padding-inline: .25rem; font-size: .95rem; }
}