#liveAura {
  display: block;
  position: absolute;
  height: min(360px, 100%);
  max-width: 100%;
  aspect-ratio: 1;
  pointer-events: none;
}
.has-live-aura #liveAura { display: block; }
.has-live-aura > .orb,
.has-live-aura > .orb-aura { display: none; }
.live-aura-still {
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(ellipse, transparent 23%, #ffd9bf99 29%, #efb58caa 32%, #ffd9bf66 36%, transparent 45%);
}
.live-controls[hidden] { display: none; }

/* The invitation sits over Aura until the existing call flow hides it. */
body[data-live-only="true"] #liveOrbStage > .cta-row {
  position: absolute;
  inset: 0;
  z-index: 2;
  flex-direction: column;
  flex-wrap: nowrap;
  pointer-events: none;
}
body[data-live-only="true"] #talkButton {
  pointer-events: auto;
  font: 500 14px/1.2 "Asta Sans", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  min-height: 44px;
  padding-inline: 22px;
}
body[data-live-only="true"] #ctaHint {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  font: 400 11px/1.4 "Asta Sans", sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

/* Give the voice its own generous space; copy never shares its grid cell. */
body[data-live-only="true"] #laneLive .preview-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 24px;
  padding: 24px;
}
body[data-live-only="true"] #liveOrbStage {
  grid-column: 1 / -1;
  grid-row: 1;
  height: clamp(320px, 65svh, 680px);
  container-type: size;
  overflow: visible;
}
body[data-live-only="true"] #liveAura {
  /* Keep the square canvas and its blur inside the available stage height. */
  width: min(820px, calc(100cqw - 48px), calc(100cqh - 64px));
  height: auto;
  max-width: none;
}
body[data-live-only="true"] #laneLive .live-shell {
  height: auto;
  min-height: 180px;
  max-height: 320px;
}
body[data-live-only="true"] #talkButton {
  color: #111;
  background: transparent;
  border: 1px solid #111;
  min-height: 48px;
  width: min(260px, 80%);
  padding-inline: 26px;
}
body[data-live-only="true"] #talkButton:hover {
  background: rgba(255, 255, 255, 0.35);
}
body[data-live-only="true"].is-inviting #liveAura,
body[data-live-only="true"].is-inviting #liveOrb {
  filter: blur(16px);
}
body[data-live-only="true"].is-inviting #laneLive .live-shell {
  display: none;
}
body[data-live-only="true"].is-inviting #laneLive .preview-grid {
  grid-template-rows: auto;
}
body[data-live-only="true"].is-inviting #stageFooter { display: none; }
@media (max-width: 600px) {
  body[data-live-only="true"] #laneLive .preview-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
    gap: 20px;
  }
  body[data-live-only="true"] #liveOrbStage {
    height: clamp(340px, 65svh, 560px);
  }

}

/* Live content grows in normal flow instead of colliding with pinned controls. */
body[data-live-only="true"] .live-controls {
  position: relative;
  inset: auto;
  width: auto;
  margin: 0 24px 24px;
}
body[data-live-only="true"] .pill,
body[data-live-only="true"] .brief-kicker {
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
}

body[data-live-only="true"] .panel-card .brief-kicker {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 12px;
}
body[data-live-only="true"] .panel-card .brief-title {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.2;
  margin: 0 0 12px;
}
body[data-live-only="true"] .panel-card .panel-body {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
body[data-live-only="true"] .panel-actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
body[data-live-only="true"] .panel-actions .pill {
  min-height: 46px;
  font-size: 14px;
  color: #111;
  background: transparent;
  border: 1px solid #111;
  box-shadow: none;
}
body[data-live-only="true"] .panel-actions .pill.is-quiet {
  border-color: transparent;
}
body[data-live-only="true"] .panel-actions .pill:hover {
  background: rgba(0, 0, 0, 0.035);
}

/* A shared interaction treatment keeps the invitation and recovery controls coherent. */
body[data-live-only="true"] .voice-preview {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.025), 0 12px 40px rgb(0 0 0 / 0.035);
}
body[data-live-only="true"] .panel-card {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.035), 0 8px 28px rgb(0 0 0 / 0.045);
}
body[data-live-only="true"] :is(.pill, .mute-button) {
  transition: transform 140ms ease-out, background-color 140ms ease-out, opacity 140ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
body[data-live-only="true"] :is(.pill, .mute-button):focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}
body[data-live-only="true"] :is(.pill, .mute-button):active:not(:disabled) {
  transform: scale(0.96);
}
body[data-live-only="true"] .pill:disabled {
  transform: none;
  opacity: 0.45;
  cursor: not-allowed;
}
body[data-live-only="true"] #talkButton:hover:not(:disabled) {
  background: rgb(255 255 255 / 0.48);
}
body[data-live-only="true"] .panel-actions .pill.is-quiet {
  background: transparent;
  color: #575757;
}
body[data-live-only="true"] .panel-actions .pill.is-quiet:hover {
  background: rgb(0 0 0 / 0.035);
  color: #111;
}
body[data-live-only="true"] #laneLive .live-shell {
  max-height: none;
}
body[data-live-only="true"] .live-transcript {
  max-height: 320px;
  overscroll-behavior: contain;
}
body[data-live-only="true"] .live-panel {
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  body[data-live-only="true"] :is(.pill, .mute-button) { transition: none; }
  body[data-live-only="true"] :is(.pill, .mute-button):active { transform: none; }
}
@media (forced-colors: active) {
  body[data-live-only="true"] :is(.pill, .mute-button):focus-visible {
    outline-color: Highlight;
  }
}

/* A small time note sits with the conversation, leaving Aura unobstructed. */
.aura-countdown { display:none; align-items:center; justify-content:center; gap:4px; margin:0 0 12px; color:#666; }
#laneLive:has(#liveOrbStage[data-state="live"]) .aura-countdown { display:flex; }
body[data-live-only="true"] #liveOrbStage .orb-ring { display:none; }
.aura-countdown .time { font:400 12px/1.4 "Asta Sans",sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.aura-countdown > span:last-child { font-size:12px; color:inherit; }
body[data-live-only="true"] #laneLive .preview-grid { grid-template-columns:minmax(0,1fr); }
body[data-live-only="true"] #liveOrbStage[data-state="live"] { height:clamp(300px,48svh,480px); }
body[data-live-only="true"] #laneLive .is-side { grid-column:1/-1; grid-row:2; min-height:0; width:min(620px,100%); justify-self:center; }
body[data-live-only="true"] #livePanelLabel { display:none; }
body[data-live-only="true"] #livePanel { padding:0; }
.conversation-focus { text-align:center; padding:0 16px 12px; }
.conversation-question { font-size:clamp(17px,2vw,20px); line-height:1.5; font-weight:400; letter-spacing:-.01em; margin:0; text-wrap:pretty; }
.conversation-history { grid-column:1/-1; grid-row:3; width:min(620px,100%); justify-self:center; }
.conversation-history[hidden] { display:none; }
.conversation-history summary { cursor:pointer; padding:14px; text-align:center; font-size:13px; color:#555; min-height:44px; }
.conversation-history summary:focus-visible { outline:2px solid #111; outline-offset:3px; border-radius:8px; }
body[data-live-only="true"] #laneLive .conversation-history .is-transcript { display:block; min-height:0; padding:12px 16px; }
body[data-live-only="true"] .conversation-history .live-transcript { height:auto; max-height:280px; mask-image:none; text-align:left; padding:0 8px 0 0; scrollbar-width:thin; }
.conversation-history .live-transcript-track { justify-items:stretch; align-content:start; padding:0; gap:20px; }
.conversation-history .live-line { max-width:none; opacity:1; font-size:15px; }
body[data-live-only="true"] .live-controls { display:flex; justify-content:center; gap:16px; }
body[data-live-only="true"] .live-meta { flex:0 1 auto; }

.aura-countdown .time { color:inherit; opacity:1; }

/* One bottom row, with familiar call controls and optional conversation history. */
body[data-live-only="true"] .live-controls { margin:24px 24px 28px; gap:16px; }
body[data-live-only="true"] .live-meta { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
body[data-live-only="true"] :is(#micButton, #endButton, .call-control) { display:inline-flex; align-items:center; justify-content:center; flex:0 0 48px; width:48px; height:48px; min-height:48px; padding:0; border:1px solid #ddd; border-radius:50%; background:#fff; color:#444; cursor:pointer; }
body[data-live-only="true"] :is(#micButton, .call-control) svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
body[data-live-only="true"] #endButton { font-size:0; background:#b83c3c; border-color:#b83c3c; color:white; }
body[data-live-only="true"] #endButton::before { content:""; width:13px; height:13px; border-radius:3px; background:currentColor; }
body[data-live-only="true"] #endButton:hover { background:#a33232; }
body[data-live-only="true"] :is(#micButton, .call-control):hover { background:#f0f0f0; }
body[data-live-only="true"] :is(#micButton[data-muted="true"], .call-control[aria-expanded="true"]) { background:#e9e9e9; border-color:#999; color:#222; }
.call-control:focus-visible { outline:2px solid #111; outline-offset:4px; }
.call-control[hidden], body[data-live-only="true"] #laneLive .conversation-history[hidden] { display:none; }
body[data-live-only="true"] #laneLive .conversation-history { grid-row:3; min-height:0; padding:16px; text-align:left; }
body[data-live-only="true"] .conversation-history .section-label { justify-self:start; padding:0; }
body[data-live-only="true"] #stageFooter { display:none; }
body[data-live-only="true"] .live-controls[hidden] { display:none; }

/* A gentle travelling wave communicates connection progress without dots. */
.connecting-wave { white-space:nowrap; }
.connecting-wave > span { display:inline-block; white-space:pre; animation:connecting-letter 2.2s ease-in-out infinite; animation-delay:var(--letter-delay); }
@keyframes connecting-letter {
  0%, 36%, 100% { transform:translateY(0); }
  18% { transform:translateY(-3px); }
}
@media (prefers-reduced-motion:reduce) {
  .connecting-wave > span { animation:none; transform:none; }
}
/* Keep active call content together instead of stretching the old three-column grid. */
body[data-live-only="true"] .voice-preview:has(#liveOrbStage:is([data-state="live"], [data-state="connecting"])) { min-height:0; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="live"], [data-state="connecting"])) .preview-grid { min-height:0; row-gap:8px; padding-bottom:0; }
body[data-live-only="true"] #liveOrbStage:is([data-state="live"], [data-state="connecting"]) { height:clamp(280px,42svh,420px); }
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="live"], [data-state="connecting"])) .is-side { display:block; }
.conversation-focus { padding-bottom:0; }
body[data-live-only="true"] .live-controls { margin-top:16px; }

/* Every state shares the same Aura, message and action slots. */
body[data-live-only="true"] .voice-preview { min-height:0; }
body[data-live-only="true"] #laneLive .preview-grid,
body[data-live-only="true"].is-inviting #laneLive .preview-grid,
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="live"], [data-state="connecting"])) .preview-grid {
  grid-template-rows:auto auto; min-height:0; row-gap:8px; padding:24px 24px 0;
}
body[data-live-only="true"] #liveOrbStage,
body[data-live-only="true"] #liveOrbStage:is([data-state="live"], [data-state="connecting"]) { height:clamp(280px,42svh,420px); }
body[data-live-only="true"] #laneLive .is-side,
body[data-live-only="true"].is-inviting #laneLive .is-side {
  display:block; height:116px; min-height:116px; width:min(620px,100%);
}
body[data-live-only="true"].is-inviting #laneLive .is-side { visibility:hidden; }
.aura-countdown { display:flex; visibility:hidden; height:17px; }
#laneLive:has(#liveOrbStage[data-state="live"]) .aura-countdown { visibility:visible; }
body[data-live-only="true"] #livePanel { height:87px; overflow-y:auto; align-content:start; }
.call-dock { min-height:48px; margin:16px 24px 28px; }
body[data-live-only="true"] .call-dock .live-controls { margin:0; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="error"], [data-state="done"])) .live-controls { display:none; }
body[data-live-only="true"] .panel-card { padding:0; margin:0; border:0; background:transparent; box-shadow:none; text-align:center; }
body[data-live-only="true"] .panel-card .brief-kicker { display:none; }
body[data-live-only="true"] .panel-card .brief-title { font-size:18px; font-weight:400; line-height:1.5; margin:0 0 8px; }
body[data-live-only="true"] .panel-card .panel-body { font-size:13px; line-height:1.5; }
body[data-live-only="true"] .terminal-actions .panel-actions { display:flex; justify-content:center; gap:12px; margin:0; }
body[data-live-only="true"] .terminal-actions .pill { min-height:48px; padding:10px 20px; }
@media(max-width:600px) {
  body[data-live-only="true"] #laneLive .preview-grid,
  body[data-live-only="true"].is-inviting #laneLive .preview-grid,
  body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="live"], [data-state="connecting"])) .preview-grid { padding:12px 12px 0; }
}
body[data-live-only="true"] .terminal-actions .pill { width:auto; flex:0 1 auto; }

/* The completed conversation becomes a product billboard. */
.final-billboard[hidden] { display:none; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="done"]) > :is(.preview-grid,.call-dock) { display:none; }
.final-billboard { display:grid; grid-template-columns:1fr 1fr; background:#f8f8f8; color:#282828; min-height:660px; }
.billboard-photo { position:relative; min-height:660px; overflow:hidden; }
.billboard-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.billboard-copy { padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; align-items:stretch; }
.billboard-kicker { font-size:12px; margin:0 0 24px; color:#666; }
.billboard-copy h2 { font-size:clamp(26px,3vw,36px); line-height:1.08; letter-spacing:-.045em; font-weight:450; margin:0 0 22px; text-wrap:balance; }
.billboard-copy h2:focus { outline:none; }
.billboard-intro { font-size:15px; line-height:1.65; color:#555; max-width:34ch; margin:0 0 24px; }
.billboard-features { padding:0; list-style:none; margin:0 0 32px; display:grid; gap:12px; font-size:14px; line-height:1.5; }
.billboard-features li { display:flex; align-items:baseline; gap:10px; }
.billboard-features li::before { content:"✓"; color:#666; }
.billboard-offer { border-top:0; padding-top:22px; margin-top:auto; display:flex; justify-content:flex-end; align-items:center; gap:16px; }
.billboard-product { margin:0; font-size:14px; line-height:1.6; }
.billboard-price { margin:0; display:grid; gap:3px; text-align:right; }
.price-was { font-size:12px; color:#666; white-space:nowrap; }
.price-now { font-size:32px; line-height:1.2; letter-spacing:-.035em; }
body[data-live-only="true"] .billboard-actions .panel-actions { display:grid; gap:8px; margin-top:22px; }
body[data-live-only="true"] .billboard-actions .pill { width:fit-content; max-width:100%; justify-self:start; min-height:48px; padding:12px 18px; font-size:14px; border:0; background:#333; color:#fff; }
body[data-live-only="true"] .billboard-actions .pill:hover { background:#444; }
body[data-live-only="true"] .billboard-actions .pill.is-quiet { background:transparent; color:#555; min-height:44px; }
body[data-live-only="true"] .billboard-actions .pill.is-quiet:hover { background:#eee; }
@media(max-width:680px) {
  .final-billboard { grid-template-columns:1fr; }
  .billboard-photo { min-height:320px; height:40svh; max-height:440px; }
  .billboard-photo img { object-position:50% 32%; }
  .billboard-copy { padding:28px 24px 20px; }
  .billboard-copy h2 { font-size:30px; }
}

body[data-live-only="true"] { --paper:#f8f8f8; --off-white:#f8f8f8; }

/* Keep the final offer aligned to one left edge. */
.billboard-copy { text-align:left; }
.billboard-intro { margin-inline:0; }
.billboard-features li { justify-content:flex-start; }
.billboard-offer { justify-content:flex-start; }
.billboard-price { text-align:left; }
/* Centre the invitation in the full shared shell, including the reserved lower slots. */
body[data-live-only="true"].is-inviting #liveOrbStage { transform:translateY(96px); }
body[data-live-only="true"] #talkButton { width:min(320px,90%); min-height:60px; font-size:16px; padding:16px 30px; }
body[data-live-only="true"] #liveOrbStage[data-state="error"] :is(#liveAura,#liveOrb) { filter:blur(16px); }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="error"]) :is(.is-side,.panel-card,.brief-title,.panel-body) { text-align:center; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="error"]) .panel-body { max-width:46ch; margin-inline:auto; }
@media(max-width:600px) {
  body[data-live-only="true"].is-inviting #liveOrbStage { transform:translateY(102px); }
}

/* Place remaining time immediately below the current question. */
.aura-countdown { margin:6px 0 0; }
body[data-live-only="true"] #livePanel { height:auto; max-height:87px; }

/* Keep the question, timer, and call controls grouped tightly. */
.conversation-question { line-height:1.3; }
.aura-countdown { margin-top:3px; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="live"], [data-state="connecting"])) .is-side { height:auto; min-height:62px; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="live"], [data-state="connecting"])) .call-dock { margin-top:8px; }
/* A shared 5:4 desktop frame; narrow screens retain a readable natural height. */
@media (min-width:760px) {
  body[data-live-only="true"] .voice-preview { width:min(960px,100%); aspect-ratio:5 / 4; }
  body[data-live-only="true"] #laneLive { position:absolute; inset:0; display:flex; flex-direction:column; }
  body[data-live-only="true"] #laneLive .preview-grid,
  body[data-live-only="true"].is-inviting #laneLive .preview-grid,
  body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="live"], [data-state="connecting"])) .preview-grid {
    flex:1; min-height:0; grid-template-rows:minmax(0,1fr) auto;
  }
  body[data-live-only="true"] #liveOrbStage,
  body[data-live-only="true"] #liveOrbStage:is([data-state="live"], [data-state="connecting"]) { height:100%; min-height:0; }
  body[data-live-only="true"] .call-dock { flex-shrink:0; }
  body[data-live-only="true"].is-inviting #liveOrbStage { position:absolute; inset:0; transform:none; }
  body[data-live-only="true"].is-inviting #liveAura { width:min(calc(100cqw - 48px),70cqh); }
  .final-billboard { flex:1; min-height:0; height:100%; }
  .billboard-photo { min-height:0; }
  .billboard-copy { min-height:0; padding:clamp(24px,3vw,40px); overflow-y:auto; }
}

/* Finish on the same blurred voice, with the offer centred over it. */
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="done"]) > .preview-grid {
  display:block; position:absolute; inset:0; padding:0; pointer-events:none;
}
body[data-live-only="true"] #liveOrbStage[data-state="done"] { position:absolute; inset:0; height:100%; transform:none; }
body[data-live-only="true"] #liveOrbStage[data-state="done"] :is(#liveAura,#liveOrb) { filter:blur(16px); opacity:.45; }
body[data-live-only="true"] #liveOrbStage[data-state="done"] #liveAura { width:min(calc(100cqw - 48px),70cqh); }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="done"]) .is-side { display:none; }
.final-billboard { position:relative; z-index:3; display:flex; align-items:center; justify-content:center; background:transparent; min-height:600px; }
.billboard-copy { width:min(480px,100%); padding:40px 28px; text-align:center; overflow:visible; }
.billboard-copy h2 { font-size:clamp(26px,3vw,34px); margin-bottom:16px; }
.billboard-intro { margin:0 auto 20px; }
.billboard-features { gap:7px; margin-bottom:24px; }
.billboard-features li { justify-content:center; }
.billboard-offer { margin-top:0; padding-top:0; justify-content:center; }
.billboard-price { text-align:center; }
body[data-live-only="true"] .billboard-actions .panel-actions { justify-items:center; margin-top:18px; }
body[data-live-only="true"] .billboard-actions .pill { justify-self:center; min-width:160px; }
@media(min-width:760px) { .final-billboard { min-height:0; } }
/* Keep connection recovery copy and actions in one compact group. */
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="error"]) .is-side { height:auto; min-height:0; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="error"]) .call-dock { margin-top:12px; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="error"]) .aura-countdown { display:none; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="error"]) #livePanel { max-height:none; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="error"]) .brief-title { margin-bottom:4px; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="error"]) .panel-body { line-height:1.4; }
body[data-live-only="true"] .terminal-actions .panel-actions { gap:8px; }

body[data-live-only="true"] .billboard-actions .pill { min-height:40px; min-width:0; padding:8px 18px; }

.billboard-copy .billboard-features { margin:18px 0 0; }

/* Separate the opening message and offer, aligned to one left edge. */
.final-billboard { align-items:stretch; }
.billboard-copy { width:100%; min-height:inherit; justify-content:space-between; gap:40px; padding:clamp(28px,5vw,56px); text-align:left; }
.billboard-intro { margin:0; }
.billboard-offer, .billboard-features li { justify-content:flex-start; }
.billboard-price { text-align:left; }
body[data-live-only="true"] .billboard-actions .panel-actions { justify-items:start; }
body[data-live-only="true"] .billboard-actions .pill { justify-self:start; }
/* End the call immediately, then ease into the final offer visually. */
body[data-live-only="true"] :is(#liveAura,#liveOrb) {
  transition:filter 700ms cubic-bezier(.22,1,.36,1), opacity 700ms ease-out;
}
.final-billboard:not([hidden]) .billboard-copy {
  animation:final-offer-enter 650ms cubic-bezier(.22,1,.36,1) 100ms both;
}
@keyframes final-offer-enter {
  from { opacity:0; transform:translateY(5px); }
  to { opacity:1; transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce) {
  body[data-live-only="true"] :is(#liveAura,#liveOrb) { transition:none; }
  .final-billboard:not([hidden]) .billboard-copy { animation:none; }
}
/* Two balanced, centred groups on the final screen. */
.billboard-copy {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  justify-content:normal;
  gap:clamp(24px,4vw,48px);
  text-align:center;
}
.billboard-intro { margin-inline:auto; }
.billboard-features li { justify-content:center; }
body[data-live-only="true"] .billboard-actions .panel-actions { justify-items:center; margin-top:0; }
body[data-live-only="true"] .billboard-actions .pill { justify-self:center; }
@media(max-width:680px) {
  .billboard-copy { grid-template-columns:1fr; align-content:center; gap:32px; }
}

/* Left-align both columns, with the order action beside the thank-you message. */
.billboard-copy { text-align:left; }
.billboard-intro { margin-inline:0; }
.billboard-features li { justify-content:flex-start; }
.billboard-copy .billboard-features { margin:0; }
body[data-live-only="true"] .billboard-actions .panel-actions { justify-items:start; margin-top:20px; }
body[data-live-only="true"] .billboard-actions .pill { justify-self:start; }

/* Ease from invitation into connection, then gently reveal the live question. */
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="connecting"]) .is-side,
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="connecting"]) .live-controls {
  animation:call-connecting-enter 550ms cubic-bezier(.22,1,.36,1) both;
}
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="live"]) .conversation-focus {
  animation:call-live-enter 450ms ease-out both;
}
@keyframes call-connecting-enter {
  from { opacity:0; transform:translateY(5px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes call-live-enter { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) {
  body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="connecting"]) :is(.is-side,.live-controls),
  body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="live"]) .conversation-focus { animation:none; }
}
/* One compact, left-aligned final message and offer. */
.billboard-copy { grid-template-columns:minmax(0,1fr); align-content:center; gap:24px; width:min(520px,100%); }
/* Optical centring for the left-aligned final text group. */
@media(min-width:600px) {
  .final-billboard .billboard-copy { position:relative; left:16px; }
}
/* A centred, open page replaces the framed desktop card. */
body[data-live-only="true"] { min-height:100svh; display:flex; align-items:center; justify-content:center; padding:24px; }
body[data-live-only="true"] .stage { width:min(960px,100%); }
body[data-live-only="true"] .voice-preview { width:100%; aspect-ratio:auto; border:0; border-radius:0; box-shadow:none; overflow:visible; background:transparent; }
body[data-live-only="true"] #laneLive { position:relative; inset:auto; display:block; }
body[data-live-only="true"] #laneLive .preview-grid,
body[data-live-only="true"].is-inviting #laneLive .preview-grid,
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="live"], [data-state="connecting"])) .preview-grid { grid-template-rows:auto auto; padding:0; row-gap:8px; }
body[data-live-only="true"] #liveOrbStage,
body[data-live-only="true"] #liveOrbStage:is([data-state="live"], [data-state="connecting"]) { position:relative; inset:auto; height:clamp(240px,42svh,420px); transform:none; }
body[data-live-only="true"].is-inviting #liveOrbStage { position:relative; inset:auto; height:clamp(280px,60svh,520px); transform:none; }
body[data-live-only="true"].is-inviting #laneLive .is-side,
body[data-live-only="true"].is-inviting .call-dock { display:none; }
body[data-live-only="true"] .call-dock { margin-bottom:0; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="done"]) > .preview-grid { position:absolute; inset:0; display:block; }
body[data-live-only="true"] #liveOrbStage[data-state="done"] { position:absolute; inset:0; height:100%; }
.final-billboard { min-height:480px; height:auto; }
.final-billboard .billboard-copy { left:0; width:min(520px,100%); min-height:480px; padding:32px 20px; text-align:center; }
.billboard-intro { margin-inline:auto; }
.billboard-features li { justify-content:center; }
body[data-live-only="true"] .billboard-actions .panel-actions { justify-items:center; }
body[data-live-only="true"] .billboard-actions .pill { justify-self:center; }
@media(max-width:600px) { body[data-live-only="true"] { padding:16px; } }
/* Shared compact buttons in every demo state. */
body[data-live-only="true"] :is(.pill, .mute-button, .call-control) { border-radius:12px; }
body[data-live-only="true"] .terminal-actions .pill,
body[data-live-only="true"] .billboard-actions .pill { min-height:40px; padding:6px 14px; }
body[data-live-only="true"] #talkButton { width:auto; min-width:200px; max-width:90%; min-height:44px; padding:8px 18px; border-radius:12px; }
body[data-live-only="true"] :is(#micButton, #endButton, .call-control) { width:40px; height:40px; min-height:40px; flex-basis:40px; padding:0; border-radius:12px; }
/* Circular call controls; a centred final section with left-aligned content. */
body[data-live-only="true"] :is(#micButton, #endButton) { border-radius:50%; }
.final-billboard .billboard-copy { text-align:left; }
.billboard-intro { margin-inline:0; }
.billboard-features li { justify-content:flex-start; }
body[data-live-only="true"] .billboard-actions .panel-actions { justify-items:start; }
body[data-live-only="true"] .billboard-actions .pill { justify-self:start; }
/* Optical adjustment for the centred, left-aligned final section. */
@media(min-width:600px) {
  .final-billboard .billboard-copy { left:16px; }
}
/* Restore the generous invitation button. */
body[data-live-only="true"] #talkButton { width:min(320px,90%); min-height:60px; padding:16px 30px; }
.billboard-copy h2 { margin-bottom:6px; }

/* A stationary caption window; new speech gently rolls the text upward. */
body[data-live-only="true"] #liveTranscript {
  height:clamp(140px,22svh,200px); min-height:0; max-height:none;
  overflow:clip; padding:0 16px; text-align:left; width:100%;
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
}
body[data-live-only="true"] #liveTranscript[hidden],
body[data-live-only="true"] #livePanel[hidden] { display:none; }
body[data-live-only="true"] #liveTrack { display:block; position:relative; transition:transform 600ms cubic-bezier(.22,1,.36,1); }
body[data-live-only="true"] #liveTrack .live-line { display:block; margin:0 0 18px; opacity:1; }
body[data-live-only="true"] #liveTrack .live-line-who { display:block; font-size:12px; color:#737373; margin-bottom:4px; }
body[data-live-only="true"] #liveTrack .live-line-body { display:block; white-space:pre-wrap; overflow-wrap:anywhere; font-size:17px; line-height:1.5; color:#333; }
body[data-live-only="true"] #liveTranscript:focus-visible { outline:2px solid #777; outline-offset:3px; border-radius:8px; }
body[data-live-only="true"] #liveTranscript::-webkit-scrollbar { display:none; }
body[data-live-only="true"] #liveTranscript::-webkit-scrollbar-thumb { background:#ccc; border-radius:8px; }
body[data-live-only="true"] #liveTrack { padding:28px 0; min-height:0; }
body[data-live-only="true"] #liveTrack .live-line { max-width:none; font-style:normal; animation:none; transform:none; }
body[data-live-only="true"] #liveTrack .live-line-who { text-transform:none; letter-spacing:0; }

@media(prefers-reduced-motion:reduce) { body[data-live-only="true"] #liveTrack { transition:none; } }

/* Quiet button surfaces; keyboard focus remains visible. */
body[data-live-only="true"] :is(.pill, #talkButton, #micButton, #endButton, .call-control) {
  border-color:transparent;
  box-shadow:none;
}

body[data-live-only="true"] :is(.pill, #talkButton) { border-radius:8px; }

/* The opening invitation is the only outlined button. */
body[data-live-only="true"] #talkButton { border:1px solid #111; }

/* More readable rolling captions and a larger shared voice presence. */
body[data-live-only="true"] #liveTranscript {
  width:min(420px,100%);
  height:clamp(220px,30svh,280px);
  margin-inline:auto;
}
body[data-live-only="true"] #liveTrack .live-line-body {
  font-size:16px;
  line-height:1.4em;
  letter-spacing:-0.001em;
}
body[data-live-only="true"] #laneLive #liveOrbStage #liveAura {
  width:min(900px,calc(100cqw - 16px),125cqh);
}
body[data-live-only="true"] #laneLive :is(#micButton,#endButton) {
  border-radius:50%;
}

/* Soft caption edges and a calm first-line reveal. */
body[data-live-only="true"] #liveTrack .live-line-body { font-size:14px; color:#666; }
body[data-live-only="true"] #liveTranscript { position:relative; isolation:isolate; }
body[data-live-only="true"] #liveTranscript::after {
  content:""; position:absolute; z-index:2; inset:0 0 auto; height:52px;
  pointer-events:none;
  background:linear-gradient(to bottom,#f8f8f8c0,transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  mask-image:linear-gradient(to bottom,#000,transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
}
body[data-live-only="true"] #liveTranscript:not([hidden]) {
  animation:caption-arrive 550ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes caption-arrive {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}
/* Reserve the same message area during connection and speech. */
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="connecting"],[data-state="live"])) .is-side {
  height:clamp(220px,30svh,280px); min-height:0;
}
body[data-live-only="true"] #liveOrbStage .aura-countdown {
  position:absolute; top:6px; left:0; right:0; z-index:3;
  margin:0; opacity:0; visibility:hidden;
  transition:opacity 400ms ease-out;
}
body[data-live-only="true"] #liveOrbStage[data-state="live"] .aura-countdown {
  visibility:visible; opacity:1;
}
@media(prefers-reduced-motion:reduce) {
  body[data-live-only="true"] #liveTranscript:not([hidden]) { animation:none; }
  body[data-live-only="true"] #liveOrbStage .aura-countdown { transition:none; }
}

/* One centred sentence, with the quiet timer below the call controls. */
body[data-live-only="true"] #liveTrack[hidden] { display:none; }
body[data-live-only="true"] #liveTranscript {
  display:grid; place-items:center; height:140px;
  mask-image:none; -webkit-mask-image:none;
}
body[data-live-only="true"] #liveTranscript::after { display:none; }
.current-sentence { width:100%; text-align:center; font-size:14px; line-height:1.4; letter-spacing:-.001em; color:#666; overflow-wrap:anywhere; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="connecting"],[data-state="live"])) .is-side { height:140px; }
body[data-live-only="true"] .call-dock { display:flex; flex-direction:column; align-items:center; gap:10px; }
body[data-live-only="true"] .call-dock .aura-countdown { position:static; margin:0; }
body[data-live-only="true"] #laneLive:not(:has(#liveOrbStage[data-state="live"])) .call-dock .aura-countdown { display:none; }

/* Compact session clock: its arc follows the same deadline as the digits. */
body[data-live-only="true"] .call-dock .aura-countdown {
  height:auto; min-height:28px; padding:5px 10px; gap:6px;
  border-radius:999px; background:#ececec; color:#666;
}
.countdown-icon { width:16px; height:16px; flex:none; }
.countdown-progress { transition:stroke-dashoffset 250ms linear; }
@media(prefers-reduced-motion:reduce) { .countdown-progress { transition:none; } }

/* Simple countdown ring above the voice, with room around the pill. */
body[data-live-only="true"] #liveOrbStage .aura-countdown {
  top:-24px; left:50%; right:auto; transform:translateX(-50%);
  width:max-content; height:auto; min-height:28px; padding:5px 10px;
  gap:6px; border-radius:999px; background:#ececec; color:#666;
}

/* Keep the voice prominent and group the caption and controls closely. */
body[data-live-only="true"] #liveOrbStage[data-state="live"] .aura-countdown { opacity:.55; }
body[data-live-only="true"] #liveOrbStage .aura-countdown { background:#eeeeee; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage[data-state="live"]) .preview-grid {
  row-gap:0;
}
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="connecting"],[data-state="live"])) .is-side {
  height:72px;
}
body[data-live-only="true"] #liveTranscript { height:72px; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="connecting"],[data-state="live"])) .call-dock {
  margin-top:12px;
}
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="connecting"],[data-state="live"])) .is-side {
  margin-top:-24px;
  position:relative;
}

/* A bounded voice slot keeps every speech state clear of the message below. */
body[data-live-only="true"] #liveOrbStage:is([data-state="connecting"],[data-state="live"]) {
  height:clamp(280px,44svh,440px);
}
body[data-live-only="true"] #laneLive #liveOrbStage:is([data-state="connecting"],[data-state="live"]) #liveAura {
  width:min(calc(100cqw - 24px),calc(100cqh - 24px));
}
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="connecting"],[data-state="live"])) .preview-grid { row-gap:12px; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="connecting"],[data-state="live"])) .is-side {
  margin-top:0; height:72px; min-height:72px; display:grid; align-items:center;
}
body[data-live-only="true"] .conversation-question {
  font-size:14px; font-weight:400; line-height:1.4; letter-spacing:-.001em; color:#666;
}
body[data-live-only="true"] .conversation-focus { padding:0 16px; }
body[data-live-only="true"] #talkButton { font-size:14px; font-weight:400; line-height:1.4; letter-spacing:-.001em; color:#666; }

/* Quiet text timer and a single, divided call-control pill. */
body[data-live-only="true"] #liveOrbStage .aura-countdown {
  background:transparent; padding:0; min-height:20px;
  filter:blur(.35px);
}
body[data-live-only="true"] #liveOrbStage[data-state="live"] .aura-countdown { opacity:.45; }
body[data-live-only="true"] #laneLive .call-dock .live-controls {
  display:flex; gap:0; width:fit-content; padding:0;
  background:transparent; border:1px solid #111; border-radius:999px;
}
body[data-live-only="true"] #laneLive .call-dock :is(#micButton,#endButton) {
  width:80px; height:40px; min-height:40px; flex:0 0 80px;
  background:transparent; border:0; border-radius:999px 0 0 999px;
  font:400 13px/1.4 "Asta Sans",sans-serif; color:#737373; padding:0 14px;
}
body[data-live-only="true"] #laneLive .call-dock #endButton {
  border-radius:0 999px 999px 0; border-left:1px solid #111;
}
body[data-live-only="true"] #endButton::before { display:none; }
body[data-live-only="true"] #laneLive .call-dock :is(#micButton,#endButton):hover { background:#e3e3e3; color:#444; }
body[data-live-only="true"] #laneLive .call-dock #micButton[data-muted="true"] { background:#ddd; color:#333; }
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="done"],[data-state="error"])) .call-dock .live-controls { display:none; }
body[data-live-only="true"] #laneLive .call-dock :is(#micButton,#endButton) { text-transform:none; letter-spacing:0; }

/* Compact icon controls in the shared split pill. */
body[data-live-only="true"] #laneLive .call-dock :is(#micButton,#endButton) {
  width:48px; flex-basis:48px; height:36px; min-height:36px; padding:0;
}
body[data-live-only="true"] #laneLive .call-dock #micButton svg {
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
body[data-live-only="true"] #laneLive .call-dock #endButton { font-size:0; }
body[data-live-only="true"] #laneLive .call-dock #endButton::before {
  display:block; content:""; width:10px; height:10px; border-radius:2px; background:currentColor;
}
body[data-live-only="true"] :is(.current-sentence,.conversation-question) { font-size:15px; }
body[data-live-only="true"] #talkButton { color:#333; }

/* An editorial closing note, set against a quiet wash of the living Aura. */
.final-billboard { min-height:520px; align-items:center; }
.final-billboard .billboard-copy {
  width:min(480px,100%); min-height:0; padding:56px 28px;
  gap:36px; left:0; position:relative; text-align:left;
}
.final-billboard .billboard-copy h2 {
  font-size:clamp(32px,4.5vw,46px); line-height:1.12; font-weight:400;
  letter-spacing:-.035em; color:#333; margin:0 0 20px; text-wrap:balance;
}
.final-billboard .billboard-intro { font-size:15px; line-height:1.65; color:#737373; margin:0; }
body[data-live-only="true"] .final-billboard .billboard-actions .panel-actions { margin-top:28px; }
body[data-live-only="true"] .final-billboard .billboard-actions .pill {
  padding:10px 20px; min-height:40px; background:#353535; color:#f8f8f8;
  font-size:13px; border-radius:8px;
}
.final-billboard .billboard-features { font-size:12px; line-height:1.7; gap:2px; color:#858585; margin:0; }
.final-billboard .billboard-features li::before { display:none; }
body[data-live-only="true"] #laneLive #liveOrbStage[data-state="done"] #liveAura {
  width:min(780px,120cqw); opacity:.28; filter:blur(30px);
  translate:18% -12%;
}
@media(max-width:600px) {
  .final-billboard { min-height:480px; }
  .final-billboard .billboard-copy { padding:40px 24px; }
  body[data-live-only="true"] #laneLive #liveOrbStage[data-state="done"] #liveAura { width:100cqw; translate:8% -20%; }
}
body[data-live-only="true"] #laneLive #liveOrbStage[data-state="done"] #liveAura {
  width:min(680px,100cqh,100cqw); translate:12% 0;
}
@media(max-width:600px) {
  body[data-live-only="true"] #laneLive #liveOrbStage[data-state="done"] #liveAura { translate:5% 0; }
}


/* A quiet closing card, echoing the welcome screen. */
.final-billboard .billboard-copy {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:min(580px,calc(100% - 40px)); min-height:0; padding:36px 28px;
  gap:24px; left:0; text-align:center; border:1px solid rgba(0,0,0,.18);
  border-radius:16px; background:transparent; box-shadow:none;
}
.final-billboard .billboard-copy h2 {
  margin:0; font-size:22px; line-height:1.3; font-weight:400; letter-spacing:-.02em;
}
body[data-live-only="true"] .final-billboard .billboard-actions .panel-actions {
  margin:20px 0 0; justify-content:center;
}
.final-billboard .billboard-notes {
  margin:0; max-width:100%; font-size:12px; line-height:1.6; letter-spacing:0;
  color:#737373; text-wrap:balance;
}
.final-billboard .billboard-notes span { padding:0 5px; color:#999; }
@media(max-width:480px) {
  .final-billboard .billboard-copy { padding:28px 20px; gap:20px; }
}

.final-billboard .billboard-copy .billboard-intro {
  max-width:44ch; margin:14px auto 0; font-size:14px; line-height:1.4; color:#737373; text-wrap:pretty;
}

/* Softly raised purchase control. */
body[data-live-only="true"] .final-billboard .billboard-actions .pill {
  background:#353535 linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(0,0,0,.18),0 3px 0 #222,0 5px 9px rgba(0,0,0,.16);
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  transition:background-color 220ms ease-out,box-shadow 220ms ease-out,translate 160ms ease-out,scale 160ms ease-out;
}
body[data-live-only="true"] .final-billboard .billboard-actions .pill:hover {
  background-color:#464646; background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));
}
body[data-live-only="true"] .final-billboard .billboard-actions .pill:active {
  translate:0 2px; scale:.96;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(0,0,0,.18),0 1px 0 #222,0 2px 4px rgba(0,0,0,.12);
}
@media(prefers-reduced-motion:reduce) {
  body[data-live-only="true"] .final-billboard .billboard-actions .pill { transition:none; }
}

/* Consistent tactile feedback, with the Aura remaining the focal point. */
body[data-live-only="true"] :is(#talkButton,.panel-actions .pill),
body[data-live-only="true"] #laneLive .call-dock :is(#micButton,#endButton) {
  touch-action:manipulation;
  transition:background-color 220ms ease-out,color 220ms ease-out,box-shadow 220ms ease-out,scale 160ms ease-out;
}
body[data-live-only="true"] :is(#talkButton,.panel-actions .pill):active:not(:disabled) {
  transform:none; scale:.96; transition-duration:70ms;
}
body[data-live-only="true"] #laneLive .call-dock :is(#micButton,#endButton):active {
  transform:none; scale:1; background:#dedede; color:#222;
}
body[data-live-only="true"] :is(#talkButton,.panel-actions .pill,#micButton,#endButton):focus-visible {
  outline:2px solid #444; outline-offset:4px;
}
@media(hover:hover) and (pointer:fine) {
  body[data-live-only="true"] #talkButton:hover:not(:disabled) {
    background:rgba(255,255,255,.65); box-shadow:0 2px 5px rgba(0,0,0,.06);
  }
  body[data-live-only="true"] #laneLive .call-dock #endButton:hover {
    background:#f3e7e7; color:#a53737;
  }
  body[data-live-only="true"] .final-billboard .billboard-actions .pill:hover {
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(0,0,0,.18),0 3px 0 #222,0 6px 12px rgba(0,0,0,.18);
  }
}
.final-billboard .billboard-copy { padding:40px 32px; }
.final-billboard .billboard-copy h2 {
  font-size:clamp(22px,2.2vw,26px); font-weight:450; line-height:1.25;
  letter-spacing:-.025em; text-wrap:balance; font-optical-sizing:auto;
}
.final-billboard .billboard-copy .billboard-intro {
  max-width:42ch; margin-top:12px; color:#666; line-height:1.4;
}
body[data-live-only="true"] .final-billboard .billboard-actions .panel-actions { margin-top:24px; }
body[data-live-only="true"] .final-billboard .billboard-actions .pill { min-height:44px; padding:10px 24px; }
@media(max-width:480px) {
  .final-billboard .billboard-copy { padding:32px 24px; }
}
@media(prefers-reduced-motion:reduce) {
  body[data-live-only="true"] :is(#talkButton,.panel-actions .pill,#micButton,#endButton) { transition:none; }
  body[data-live-only="true"] :is(#talkButton,.panel-actions .pill):active:not(:disabled) { scale:1; translate:0; }
}
body[data-live-only="true"] .final-billboard .billboard-actions .pill:active:not(:disabled) {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(0,0,0,.18),0 1px 0 #222,0 2px 4px rgba(0,0,0,.12);
}

/* A quiet acknowledgment: the voice softens, then the closing message settles. */
.final-billboard:not([hidden]) .billboard-copy {
  animation:closing-surface 500ms ease-out both;
}
.final-billboard:not([hidden]) .billboard-message {
  animation:closing-message 600ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes closing-surface { from { opacity:0; } to { opacity:1; } }
@keyframes closing-message {
  from { opacity:.2; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}
body[data-live-only="true"] #micButton .mic-slash {
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  transition:stroke-dashoffset 200ms ease-out,opacity 150ms ease-out;
}
body[data-live-only="true"] #micButton[data-muted="true"] .mic-slash {
  stroke-dashoffset:0; opacity:1;
}
/* Keep the shared pill stationary while the individual icon acknowledges a press. */
body[data-live-only="true"] #micButton svg,
body[data-live-only="true"] #laneLive .call-dock #endButton::before {
  transition:scale 160ms cubic-bezier(.16,1,.3,1);
}
body[data-live-only="true"] #micButton:active svg,
body[data-live-only="true"] #laneLive .call-dock #endButton:active::before { scale:.96; }
@media(prefers-reduced-motion:reduce) {
  .final-billboard:not([hidden]) :is(.billboard-copy,.billboard-message) {
    animation:closing-surface 150ms ease-out both;
  }
  body[data-live-only="true"] #micButton .mic-slash { transition:opacity 100ms ease-out; }
  body[data-live-only="true"] #micButton:active svg,
  body[data-live-only="true"] #laneLive .call-dock #endButton:active::before { scale:1; }
}

/* Keep narration captions within two lines without changing the reserved layout. */
body[data-live-only="true"] .current-sentence {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  max-height:2.8em;
  line-height:1.4;
  overflow:hidden;
}
body[data-live-only="true"] #liveTranscript:not([hidden]) { animation:none; }

/* Local spacing study: group the timer, voice and caption more closely.
   Keep the Aura canvas size so its expansion and audio response are unchanged. */
body[data-live-only="true"] #liveOrbStage:is([data-state="connecting"],[data-state="live"]) .aura-countdown {
  top:8px;
}
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="connecting"],[data-state="live"])) .preview-grid {
  row-gap:0;
}
body[data-live-only="true"] #laneLive:has(#liveOrbStage:is([data-state="connecting"],[data-state="live"])) .is-side {
  margin-top:-16px;
}

.caption-measure {
  position:absolute; top:0; left:0; visibility:hidden; pointer-events:none;
  font:400 15px/1.4 "Asta Sans",sans-serif; letter-spacing:-.001em;
  white-space:normal; overflow-wrap:anywhere; padding:0; margin:0;
}
body[data-live-only="true"] .current-sentence { -webkit-line-clamp:unset; line-clamp:unset; }

body[data-aura-color="#537BE9"] .live-aura-still {
  background:radial-gradient(ellipse, transparent 23%, #537be999 29%, #537be9aa 32%, #537be966 36%, transparent 45%);
}

/* Optional gallery study: a quiet monochrome Grid in the existing voice slot. */
.live-grid-wrap { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.live-grid-visualizer { display:grid; width:72%; max-width:348px; gap:clamp(3px, .65vw, 12px); color:#ffd9bf; }
.live-grid-cell { width:100%; aspect-ratio:1; border-radius:50%; background:color-mix(in srgb, currentColor 35%, transparent); transition:background-color 100ms ease-out; }
.live-grid-cell[data-lk-highlighted="true"] { background:currentColor; }
@media (prefers-reduced-motion:reduce) { .live-grid-cell { transition:none; } }

/* Keep the dotted silhouette legible beneath the resting-state blur. */
body[data-live-only="true"][data-visualizer="grid"][data-ending-style] #laneLive #liveOrbStage:is([data-state="idle"],[data-state="error"],[data-state="done"]) #liveAura {
  filter:blur(1.25px); opacity:.9;
}
body[data-visualizer="grid"] #liveOrbStage:is([data-state="idle"],[data-state="error"],[data-state="done"]) .live-grid-cell {
  background:color-mix(in srgb, currentColor 78%, transparent);
}

/* ElevenLabs Orb comparison keeps the same reserved voice layout. */
.eleven-orb, .eleven-orb-still { width:88%; height:88%; position:absolute; top:6%; left:6%; }
.eleven-orb-still { border-radius:50%; }
body[data-live-only="true"][data-visualizer="elevenlabs"][data-ending-style] #laneLive #liveOrbStage:is([data-state="idle"],[data-state="error"],[data-state="done"]) #liveAura { filter:blur(5px); opacity:.8; }

.eleven-orb { background:#f8f8f8; }