/* T81 · App live transcription and destination share one causal demonstration. */
#voice { background:#fff; padding-block:clamp(12px,calc((var(--landing-page-height) - 600px) * .04 + 12px),24px); }
#voice-experience { width:min(960px,100%); margin-inline:auto; }
#voice .section-heading { margin:0 auto 24px; }
#voice .eyebrow { display:block; margin-bottom:8px; }
#voice .section-heading h2 span { color:#6e7075; }
#voice .section-heading>p:not(.eyebrow) { margin:12px auto 0; font-size:17px; color:var(--site-muted,#6e7075); }
.voice-modes { position:relative; min-width:0; margin:0; padding:0; border:0; }
.voice-radio { left:50%; top:20px; }
.voice-moment-radio { left:50%; top:180px; }
.voice-mode-choices { display:flex; justify-content:center; gap:32px; margin:0 auto 24px; }
.voice-mode-choices label { min-height:42px; display:flex; align-items:center; padding:8px 2px; border-bottom:2px solid transparent; color:#73757b; font-size:15px; cursor:pointer; }
#voice-input:checked ~ .voice-mode-choices [for=voice-input],
#voice-edit:checked ~ .voice-mode-choices [for=voice-edit],
#voice-assistant:checked ~ .voice-mode-choices [for=voice-assistant] { color:var(--site-ink,#202124); border-color:var(--site-accent,#c85032); font-weight:600; }
#voice-input:focus-visible ~ .voice-mode-choices [for=voice-input],
#voice-edit:focus-visible ~ .voice-mode-choices [for=voice-edit],
#voice-assistant:focus-visible ~ .voice-mode-choices [for=voice-assistant],
#voice-moment-speaking:focus-visible ~ .voice-moments [for=voice-moment-speaking],
#voice-moment-result:focus-visible ~ .voice-moments [for=voice-moment-result] { outline:2px solid var(--site-brand-ink,#a54129); outline-offset:5px; border-radius:3px; }
.voice-composition { position:relative; width:min(760px,100%); margin-inline:auto; }
.voice-scenes { display:grid; }
.voice-scene { display:grid; grid-area:1/1; min-width:0; visibility:hidden; pointer-events:none; }
#voice-input:checked ~ .voice-composition [data-voice-panel=input],
#voice-edit:checked ~ .voice-composition [data-voice-panel=edit],
#voice-assistant:checked ~ .voice-composition [data-voice-panel=assistant] { visibility:visible; pointer-events:auto; }
.voice-moment { grid-area:1/1; visibility:hidden; min-width:0; padding-bottom:24px; }
#voice-moment-speaking:checked ~ .voice-composition [data-moment=speaking],
#voice-moment-result:checked ~ .voice-composition [data-moment=result] { visibility:inherit; }
.voice-window { overflow:hidden; border:1px solid #dedfe3; border-radius:22px; background:#fff; box-shadow:0 16px 45px #22242a08; text-align:left; }
.voice-window-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 26px; background:#f6f6f8; border-bottom:1px solid #e5e5e8; font-size:13px; color:#5e6167; }
.voice-window-status { color:#686b73; font-size:11px; white-space:nowrap; }
.voice-window-body { min-height:212px; padding:26px 30px; display:flex; flex-direction:column; align-items:stretch; justify-content:center; }
.voice-field-label { margin:0 0 12px; color:#73757b; font-size:12px; }
.voice-compose-field { min-height:134px; display:flex; flex-direction:column; justify-content:space-between; background:#fafafb; border:1px solid #e6e6e9; border-radius:13px; padding:18px 20px; }
.voice-compose-field p,.voice-document-copy p,.voice-question { font-size:25px; line-height:1.65; letter-spacing:-.015em; margin:0; font-weight:450; color:#25272b; }
.voice-compose-field .voice-placeholder { color:#686b73; }
.voice-draft-label { align-self:flex-end; margin-top:18px; font-size:11px; color:#73757b; }
.voice-document-copy { min-height:70px; }
.voice-document-copy mark { background:#e8eaed; color:inherit; padding:3px 1px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.voice-original { margin:0 0 20px; font-size:13px; color:#686b73; line-height:1.65; max-width:42em; }
.voice-original span { display:block; color:#686b73; font-size:11px; margin-bottom:4px; }
.voice-context-tail { color:#73757b; font-size:12px; line-height:1.6; margin:18px 0 0; }
.voice-cursor { display:inline-block; width:2px; height:.9em; margin-left:4px; vertical-align:-.12em; background:var(--site-accent,#c85032); }
.voice-answer { color:#25272b; font-size:22px; line-height:1.65; }
.voice-answer p { margin:0; }
.voice-answer p::before { content:'·'; display:inline-block; width:18px; color:#7b7d82; }
.voice-utterance { display:flex; align-items:center; justify-content:center; padding:8px 20px 12px; min-height:68px; margin:0; }
/* App live-preview overlay: content-sized without JS, one-clock growth with JS.
 * 304px is the maximum envelope, not the visible width of every utterance. */
.voice-app-capsule { position:relative; display:flex; gap:8px; width:var(--voice-capsule-width,max-content); max-width:min(304px,100%); height:48px; min-width:min(114px,100%); align-items:center; padding:8px 12px; border-radius:14px; overflow:hidden; background-color:rgba(16,18,22,.7); background-image:radial-gradient(140px 80px at 10% 15%,rgba(62,78,138,.16),transparent 60%),radial-gradient(180px 90px at 90% 85%,rgba(53,88,112,.08),transparent 65%); background-blend-mode:screen; }
.voice-app-capsule::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(62,78,138,.08),inset 0 1px 0 rgba(255,255,255,.03); }
[data-voice-panel=edit] .voice-app-capsule::after,[data-voice-panel=assistant] .voice-app-capsule::after { box-shadow:inset 0 0 0 1px rgba(255,193,7,.3),inset 0 1px 0 rgba(255,255,255,.03); }
.voice-app-capsule svg { display:block; width:56px; height:32px; flex:none; isolation:isolate; overflow:hidden; }
/* Match the App canvas: an explicit radial gradient, clipped to its 56×32 slot. */
.voice-app-glow { transform-origin:28px 16px; transform:scale(var(--voice-glow-scale,.85)); opacity:var(--voice-wave-glow,0); mix-blend-mode:plus-lighter; }
[data-moment=result] .voice-app-glow { opacity:var(--voice-wave-glow,1); }
.voice-app-capsule path { mix-blend-mode:plus-lighter; stroke-opacity:var(--voice-wave-alpha,.85); }
.voice-app-status { width:14px; height:14px; flex:0 0 14px; display:grid; place-items:center; }
.voice-app-status::before { content:''; width:6px; height:6px; border-radius:50%; background:rgba(184,192,206,.28); }
.voice-app-capsule[data-state=recording] .voice-app-status::before { background:rgba(216,94,94,.84); box-shadow:0 0 6px rgba(216,94,94,.34); transform:scale(var(--voice-status-scale,1)); opacity:var(--voice-status-opacity,.8); }
.voice-app-capsule[data-state=recording][data-transcribing=true] .voice-app-status::before { background:rgba(104,170,198,.92); box-shadow:0 0 8px rgba(104,170,198,.28); }
.voice-app-capsule[data-state=processing] .voice-app-status::before { width:14px; height:14px; background:none; border:2px solid rgba(208,214,226,.68); border-top-color:transparent; transform:rotate(var(--voice-spinner-turn,0deg)); }
.voice-app-text-slot { flex:1; min-width:0; padding-right:4px; overflow:auto hidden; scrollbar-width:none; font-size:12px; line-height:1.35; color:#d4dae6; white-space:nowrap; }
.voice-app-text-slot::-webkit-scrollbar { display:none; }
.voice-app-text-slot:focus-visible { outline:1px solid #d4dae6; outline-offset:3px; border-radius:3px; }
.voice-app-transcript { display:inline-block; min-height:1.35em; }
#voice-experience[data-voice-ready=true][data-phase="0"] .voice-app-capsule { opacity:.65; }
#voice-experience[data-voice-ready=true] .voice-moment[data-moment=result] .voice-window-body { opacity:var(--voice-result,1); transform:translateY(calc((1 - var(--voice-result,1))*4px)); }
#voice-experience[data-voice-ready=true][data-press=KEY1] [data-ring=KEY1],
#voice-experience[data-voice-ready=true][data-press=KEY3] [data-ring=KEY3] { transform:translate(-50%,calc(-50% + var(--voice-key-press,0)*2px)) scale(calc(1 - var(--voice-key-press,0)*.045)); background:rgba(200,80,50,calc(.04 + var(--voice-key-press,0)*.16)); box-shadow:inset 0 0 0 1.5px rgba(200,80,50,.8),0 0 0 calc(var(--voice-key-press,0)*2px) rgba(200,80,50,.08); }
.voice-outcome { min-height:118px; width:calc(100% - 270px); display:flex; flex-direction:column; justify-content:center; padding:20px 0 0 4px; text-align:left; }
.voice-outcome h3 { margin:0; font-size:22px; font-weight:600; line-height:1.5; color:#25272b; }
.voice-outcome p { margin:8px 0 0; font-size:13px; color:#686b73; line-height:1.65; }
.voice-product { position:absolute; right:12px; bottom:8px; width:238px; margin:0; }
.voice-product .kb { filter:drop-shadow(0 13px 15px #25272d16); }
.voice-key-mark { position:absolute; width:13.6%; height:27%; border-radius:16%; transform:translate(-50%,-50%); box-shadow:inset 0 0 0 1.5px #c85032a6; background:#c850320a; }
#voice-input:checked ~ .voice-composition .voice-product [data-ring=KEY3],
#voice-edit:checked ~ .voice-composition .voice-product [data-ring=KEY1],
#voice-assistant:checked ~ .voice-composition .voice-product [data-ring=KEY1] { display:none; }
.voice-product figcaption { text-align:center; margin-top:10px; font-size:11px; color:#686b73; }
.voice-key-caption { display:none; align-items:center; gap:5px; }
.voice-key-caption i { width:4px; height:4px; border-radius:50%; background:var(--site-accent,#c85032); }
#voice-input:checked ~ .voice-composition [data-voice-key=input],
#voice-edit:checked ~ .voice-composition [data-voice-key=edit],
#voice-assistant:checked ~ .voice-composition [data-voice-key=assistant] { display:inline-flex; }
.voice-demo-controls { display:flex; align-items:center; justify-content:center; gap:14px; min-height:32px; margin:0 auto 2px; }
.voice-operation { margin:0; color:#686b73; font-size:12px; line-height:1.5; text-align:center; }
.voice-play { display:flex; align-items:center; justify-content:center; border:0; background:#f1f1f3; color:#45474c; border-radius:50%; width:32px; height:32px; flex:none; cursor:pointer; }
.voice-play[hidden] { display:none; }
.voice-play-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.voice-play-icon { width:0; height:0; border-block:5px solid transparent; border-left:7px solid currentColor; margin-left:2px; }
.voice-play[data-playing=true] .voice-play-icon { width:8px; height:10px; border-block:0; border-inline:3px solid currentColor; margin-left:0; }
.voice-play:focus-visible { outline:2px solid var(--site-brand-ink,#a54129); outline-offset:4px; }
.voice-moments { display:flex; justify-content:center; gap:22px; margin:0 auto; }
.voice-moments label { padding:6px 2px; min-height:32px; color:#686b73; border-bottom:1.5px solid transparent; font-size:12px; cursor:pointer; }
#voice-moment-speaking:checked ~ .voice-moments [for=voice-moment-speaking],
#voice-moment-result:checked ~ .voice-moments [for=voice-moment-result] { color:#45474c; border-color:#55585d; }
.voice-footnote { margin-top:16px; text-align:center; color:#73757b; font-size:11px; line-height:1.65; }
.voice-footnote p { margin:0; }
.voice-footnote p br { display:none; }
.voice-footnote>div { display:flex; justify-content:center; gap:20px; margin-top:6px; }
.voice-footnote button,.voice-footnote a { font:inherit; color:#45474c; padding:0; background:none; border:0; }
.voice-footnote button:hover,.voice-footnote a:hover { color:var(--site-brand-ink,#a54129); text-decoration:underline; text-underline-offset:3px; }
@media(min-width:821px) and (max-height:950px) {
  #voice { padding-block:16px; }
  #voice .section-heading { margin-bottom:14px; }
  #voice .section-heading h2 { font-size:44px; }
  .voice-mode-choices { margin-bottom:16px; }
  .voice-window-body { min-height:clamp(148px,calc(var(--landing-page-height) - 550px),202px); padding:16px 26px; }
  .voice-compose-field { min-height:106px; padding:14px 18px; }
  .voice-composition { width:min(710px,100%); }
  .voice-outcome { min-height:84px; padding-top:12px; }
  .voice-product { width:220px; }
}
@media(max-width:820px) {
  #voice-experience { width:min(580px,100%); }
  #voice .section-heading { margin-bottom:18px; }
  #voice .section-heading h2 { font-size:36px; }
  #voice .section-heading h2 span { display:block; }
  #voice .section-heading>p:not(.eyebrow) { font-size:14px; margin-top:12px; max-width:23em; }
  .voice-mode-choices { gap:24px; margin-bottom:14px; }
  .voice-mode-choices label { font-size:13px; min-height:40px; }
  .voice-window { border-radius:18px; }
  .voice-window-bar { padding:13px 17px; font-size:12px; }
  .voice-window-status { font-size:10px; }
  .voice-window-body { min-height:174px; padding:16px 19px; }
  .voice-compose-field { padding:14px; min-height:112px; }
  .voice-compose-field p,.voice-document-copy p,.voice-question { font-size:21px; }
  .voice-field-label,.voice-context-tail { font-size:11px; }
  .voice-original { font-size:12px; margin-bottom:17px; }
  .voice-answer { font-size:19px; }
  .voice-utterance { padding:8px 17px 12px; min-height:68px; }
  .voice-outcome { min-height:100px; width:calc(100% - 180px); padding-top:12px; }
  .voice-outcome h3 { font-size:17px; }
  .voice-outcome p { font-size:11px; margin-top:7px; }
  .voice-product { width:165px; right:0; bottom:20px; }
  .voice-product figcaption { font-size:10px; }
  .voice-moment { padding-bottom:10px; }
  .voice-demo-controls { margin-top:4px; }
  .voice-footnote p br { display:block; }
}
@media(max-width:420px) {
  #voice { padding-block:12px; }
  #voice .section-heading { margin-bottom:10px; }
  .voice-mode-choices { margin-bottom:8px; }
  .voice-footnote { margin-top:10px; }
  #voice .section-heading h2 { font-size:32px; }
  .voice-window-body { min-height:174px; }
  .voice-answer { font-size:17px; }
  .voice-compose-field p,.voice-document-copy p,.voice-question { font-size:19px; }
  .voice-outcome { width:calc(100% - 150px); min-height:104px; }
  .voice-outcome h3 { font-size:15px; }
  .voice-product { width:140px; bottom:26px; }
}
@media(max-width:350px) {
  .voice-window-bar { font-size:11px; padding-inline:14px; }
  .voice-window-status { font-size:9px; }
  .voice-mode-choices { gap:18px; }
  .voice-window-body { padding-inline:15px; }
  .voice-answer { font-size:16px; }
  .voice-outcome { width:calc(100% - 128px); }
  .voice-product { width:120px; }
}

/* One visible chapter: spend height on the destination, not empty window space.
   Short/zoomed windows still keep natural flow; no clipping or whole-page scale. */
@media(min-width:821px) and (max-height:760px) {
  #voice { padding-block:12px; }
  #voice .section-heading h2 { font-size:36px; }
  #voice .section-heading { margin-bottom:6px; }
  #voice .section-heading>p:not(.eyebrow) { margin-top:6px; font-size:14px; }
  #voice .eyebrow { margin-bottom:4px; }
  .voice-mode-choices { margin-bottom:10px; }
  .voice-mode-choices label { min-height:34px; padding-block:5px; font-size:14px; }
  .voice-window-bar { padding:9px 22px; }
  .voice-window-body { min-height:140px; padding:12px 22px; }
  .voice-field-label { margin-bottom:8px; }
  .voice-compose-field { min-height:96px; padding:10px 16px; }
  .voice-compose-field p,.voice-document-copy p,.voice-question { font-size:21px; line-height:1.45; }
  .voice-answer { font-size:19px; line-height:1.45; }
  .voice-original { margin-bottom:10px; }
  .voice-draft-label { margin-top:8px; }
  .voice-outcome { min-height:70px; }
  .voice-outcome h3 { font-size:19px; }
  .voice-outcome p { margin-top:4px; }
  .voice-product { width:180px; bottom:4px; }
  .voice-moment { padding-bottom:4px; }
  .voice-footnote { margin-top:4px; }
}
@media(max-width:820px) and (max-height:740px) {
  #voice { padding-block:12px; }
  #voice .section-heading { margin-bottom:8px; }
  #voice .section-heading h2 { font-size:28px; }
  #voice .section-heading h2 span { display:inline; }
  .voice-mode-choices { margin-bottom:8px; gap:18px; }
  .voice-mode-choices label { min-height:32px; padding-block:5px; }
  .voice-window-bar { padding:8px 14px; }
  .voice-window-body { min-height:140px; padding:12px 15px; }
  .voice-compose-field { min-height:94px; padding:10px 12px; }
  .voice-compose-field p,.voice-document-copy p,.voice-question { font-size:17px; line-height:1.5; }
  .voice-field-label { margin-bottom:6px; }
  .voice-draft-label { margin-top:8px; }
  .voice-answer { font-size:16px; line-height:1.5; }
  .voice-original { margin-bottom:8px; line-height:1.5; }
  .voice-context-tail { margin-top:8px; }
  .voice-utterance { padding-block:6px 8px; min-height:62px; }
  .voice-outcome { min-height:74px; padding-top:8px; width:calc(100% - 120px); }
  .voice-outcome h3 { font-size:15px; }
  .voice-outcome p { display:none; }
  .voice-product { width:112px; bottom:16px; }
  .voice-product figcaption { margin-top:6px; }
  .voice-moment { padding-bottom:0; }
  .voice-demo-controls { margin-top:0; }
  .voice-moments label { padding-block:4px; min-height:28px; }
  .voice-footnote { margin-top:6px; }
  .voice-footnote>p { display:none; }
}

@media(max-width:820px) and (max-height:650px) {
  #voice .eyebrow { display:none; }
  .voice-modes { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
  .voice-mode-choices,.voice-composition { grid-column:1/-1; width:100%; }
  .voice-demo-controls { grid-column:3; grid-row:4; justify-self:start; margin-left:12px; }
  .voice-operation { display:none; }
  .voice-moments { grid-column:2; grid-row:4; align-self:center; }
  .voice-outcome { min-height:64px; }
  .voice-product { width:102px; bottom:12px; }
}