/* Context story, with the app's coral / teal / amber vocabulary. */
.hero-grid{padding-block:65px;min-height:840px}.hero-copy h1{font-size:clamp(4rem,6.7vw,6.6rem);max-width:700px}.hero-copy>p{max-width:590px}.hero-visual{min-height:760px}.context-hero-phone{width:350px;max-width:85%;transform:rotate(5deg)}.context-hero-phone .mock-screen{aspect-ratio:393/830}.float-note{left:0;bottom:95px}
.how-grid{grid-template-columns:1fr 1fr;gap:70px}.how-screen-wrap{min-height:850px}.home-phone{width:390px;max-width:95%;aspect-ratio:393/830;transform:rotate(3deg)}.home-phone .mock-screen{aspect-ratio:393/830;height:auto}.setup-quote{margin:30px 0;font-size:1.5rem;line-height:1.55;border-left:2px solid var(--coral);padding:12px 0 12px 24px;max-width:530px}.setup-quote mark{color:var(--text);background:none;padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}.setup-quote .who{background:#ef7d5a35}.setup-quote .language{background:#3fc1b035}.setup-quote .about{background:#f1cd4830}.section-head .context-optional,.context-optional{font-size:.96rem;line-height:1.6;color:var(--muted)}
.context-section{border-block:1px solid var(--line);background:var(--surface)}.context-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.context-preview{display:grid;place-items:center;min-height:860px}.summary-phone{transform:rotate(-3deg)}.context-copy>p{font-size:1.15rem;line-height:1.6;color:var(--muted);max-width:570px}.meaning-demo{margin:32px 0;padding:26px;border:1px solid var(--line);border-radius:24px;background:var(--bg)}.meaning-kicker{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.meaning-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.meaning-tabs button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 15px;border-radius:99px;font-size:.85rem}.meaning-tabs button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#102b28}html[data-theme=light] .meaning-tabs button[aria-pressed=true]{color:#fff}.meaning-tabs button:focus-visible{outline:2px solid var(--coral);outline-offset:4px}.meaning-word{font-size:clamp(1.6rem,2.4vw,2.3rem);letter-spacing:-.03em;line-height:1.2;margin:20px 0}.meaning-demo p{font-size:1rem;line-height:1.6;color:var(--muted);margin-bottom:18px;min-height:3.2em}.meaning-demo small{font-size:.7rem;line-height:1.5;color:var(--faint)}
.voice-art .mock-screen{border:1px solid var(--screen-outline)}.screen-frame .mock-screen{border:1px solid var(--screen-outline)}.phone .mock-screen{border:1px solid var(--screen-outline)}.closing h2{font-size:clamp(2.8rem,5.2vw,5.4rem)}.greeting-slot{width:4.2em;padding-inline:.16em}
html[data-theme=light] .setup-quote .who{background:#ef7d5a35}html[data-theme=light] .setup-quote .language{background:#3fc1b035}html[data-theme=light] .setup-quote .about{background:#ebc74d40}
@media(max-width:1000px){.hero-grid{gap:30px}.context-hero-phone{width:320px}.hero-visual{min-height:720px}.how-grid,.context-grid{gap:36px}.how-screen-wrap,.context-preview{min-height:760px}.home-phone{width:350px}.hero-copy h1{font-size:clamp(3.6rem,7.4vw,5.4rem)}.float-note{left:-5%;bottom:85px}}
@media(max-width:720px){.hero-grid{padding-top:70px;gap:10px}.hero-visual{min-height:730px}.context-hero-phone{width:320px;max-width:92%}.hero-copy h1{font-size:clamp(3.6rem,12.5vw,5.7rem)}.how-grid,.context-grid{grid-template-columns:1fr;gap:36px}.home-phone{width:350px;max-width:94%}.how-screen-wrap,.context-preview{min-height:760px}.context-copy{grid-row:1}.context-section{padding-block:75px}.setup-quote{font-size:1.3rem}.meaning-demo{padding:22px}.greeting-slot{max-width:100%;width:3.8em}.closing h2{font-size:clamp(2.8rem,10vw,4.6rem)}}
@media(max-width:390px){.hero-visual{min-height:690px}.how-screen-wrap,.context-preview{min-height:700px}}

/* Two app screens tell the hero story: context, then conversation. */
.hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:48px}
.hero-pair{height:730px;min-height:730px;isolation:isolate}
.hero-pair .hero-orbit{left:50%;top:50%;transform:translate(-50%,-50%);width:110%}
.hero-device{position:absolute;width:calc(50% - 14px);max-width:290px}
.hero-setup-device{left:0;top:28px;z-index:1}
.hero-chat-device{right:0;top:126px;z-index:2}
.hero-setup-device:has(.context-help-screen){z-index:3}
.hero-pair .phone{width:100%;max-width:none;border-width:6px;border-radius:36px}
.hero-pair .phone .mock-screen{aspect-ratio:auto;width:100%;height:100%}
.hero-setup-phone{aspect-ratio:393/830;transform:rotate(-5deg)}
.hero-chat-phone{aspect-ratio:1064/2112;transform:rotate(5deg)}
@media(max-width:1100px) and (min-width:721px){.hero-grid{grid-template-columns:1fr;gap:16px}.hero-copy{max-width:760px}.hero-copy h1{max-width:760px;font-size:clamp(4.2rem,8vw,6rem)}.hero-pair{width:min(100%,600px);margin-inline:auto;height:760px;min-height:760px}.hero-setup-device{top:20px}.hero-chat-device{top:125px}}
@media(max-width:720px){.hero-grid{grid-template-columns:1fr;gap:30px}.hero-pair{height:810px;min-height:810px}.hero-device{width:min(68%,250px);max-width:none}.hero-setup-device{left:2%;top:18px}.hero-chat-device{right:2%;top:270px}.hero-pair .phone{border-width:5px;border-radius:31px}.hero-setup-phone{transform:rotate(-5deg)}.hero-chat-phone{transform:rotate(5deg)}}
@media(max-width:360px){.hero-pair{height:740px;min-height:740px}.hero-chat-device{top:245px}}

@media(min-width:1101px){.hero-copy h1{font-size:clamp(4rem,6.5vw,6rem)}}

/* Slow, independent drift keeps the pair alive without distracting from the UI. */
@keyframes hero-setup-drift{
  0%,100%{transform:translate3d(-1px,3px,0) rotate(-5.25deg)}
  50%{transform:translate3d(2px,-9px,0) rotate(-4.75deg)}
}
@keyframes hero-chat-drift{
  0%,100%{transform:translate3d(1px,-7px,0) rotate(5.25deg)}
  50%{transform:translate3d(-2px,4px,0) rotate(4.75deg)}
}
@media(prefers-reduced-motion:no-preference){
  .hero-setup-phone{animation:hero-setup-drift 7.8s ease-in-out -1.5s infinite}
  .hero-chat-phone{animation:hero-chat-drift 9.2s ease-in-out -4s infinite}
  .hero-pair:focus-within .phone{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){.hero-pair .phone{animation:none!important}}

/* Float each supporting screen without changing its existing rotation. */
@keyframes screenshot-float{
  0%,100%{translate:0 3px}
  50%{translate:0 -8px}
}
@media(prefers-reduced-motion:no-preference){
  .help-phone{animation:screenshot-float 8.4s ease-in-out -2s infinite}
  .summary-phone{animation:screenshot-float 9.6s ease-in-out -4.5s infinite}
  .voice-phone{animation:screenshot-float 8.8s ease-in-out -1s infinite}
  .screen-frame{animation:screenshot-float 10s ease-in-out -3s infinite}
  .help-phone:focus-within,.summary-phone:focus-within,.voice-phone:focus-within,.screen-frame:focus-within{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){
  .help-phone,.summary-phone,.voice-phone,.screen-frame{animation:none!important}
}

/* Voice settings use the same floating device treatment as the other screens. */
.voice-art,html[data-theme="light"] .voice-art{min-height:760px;border:0;border-radius:0;background:none;overflow:visible}
.voice-art:before{content:"";position:absolute;width:min(100%,470px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#3fc1b018,transparent 68%);pointer-events:none}
.voice-phone{width:350px;max-width:94%;aspect-ratio:auto;transform:rotate(-4deg)}
.voice-art .voice-phone .mock-screen,html[data-theme="light"] .voice-art .voice-phone .mock-screen{width:100%;height:auto;aspect-ratio:1064/2112;border-radius:0;box-shadow:none}
@media(max-width:720px){.voice-art,html[data-theme="light"] .voice-art{min-height:730px}}
@media(max-width:390px){.voice-art,html[data-theme="light"] .voice-art{min-height:680px}}

/* Shrink the mobile tracks and leave room for each phone's rotated bounds. */
@media(max-width:720px){
  .how-grid,.context-grid,.voice-grid{grid-template-columns:minmax(0,1fr)}
  .how-grid>*,.context-grid>*,.voice-grid>*{min-width:0}
  .how-screen-wrap,.context-preview,.voice-art{grid-template-columns:minmax(0,1fr)}
  .help-phone,.summary-phone,.voice-phone{max-width:86%}
}
.meaning-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0}
.meaning-controls .meaning-tabs{margin:0}
.meaning-rotation{border:0;background:transparent;color:var(--muted);font-size:.8rem;padding:10px 4px;text-decoration:underline;text-underline-offset:3px}
.meaning-rotation:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:4px}