/* Teleprompter GT. The page is a teleprompter: a fixed reading line, words that grey as they pass it, and the
   app's own controls. Tokens are the app's (PrompterView / PaywallView). Engine classes are not restyled here. */
:root {
  --sc-canvas: #0E0F11;
  --sc-surface: #17191D;
  --sc-ink: #F2EFE9;
  --sc-ink-soft: #A3A7AE;
  --sc-accent: #FFB020;
  --sc-accent-ink: #0E0F11;
  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 220 20% 3%;

  --read: #7A7F87;                 /* the app's read-text grey (4.6:1 on the canvas) */
  --line: 42vh;                    /* the reading line; tp.js keeps it in pixels */
  --script: clamp(1.85rem, 0.9rem + 3.1vw, 3.6rem);
  --strip-h: 64px;
}

body { background: var(--sc-canvas); }
/* Warm glow: amber from the top right, cool blue-grey at the bottom left, fixed so every section shares the light.
   main sits on its own layer above it; at z-index -1 the glow was hidden behind parts of the page. */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 85% 0%, rgb(255 176 32 / 0.18), transparent 70%),
    radial-gradient(60% 60% at 0% 100%, rgb(110 140 190 / 0.14), transparent 70%),
    linear-gradient(170deg, #17181C 0%, #0E0F11 55%, #0B0C10 100%); }
main { position: relative; z-index: 1; }
/* clip, not hidden: no scroll container, so the pinned stages still stick. */
html, body { overflow-x: clip; }
figure { margin: 0; }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* ------------------------------------------------------------------ marks -- */
/* The reading line: two short amber bars at the screen edges, exactly where the app draws them. */
.readline { position: fixed; inset-inline: 0; top: var(--line); height: 0; z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity 260ms var(--sc-ease-out); }
.readline.is-on { opacity: 1; }
.readline i { position: absolute; top: -2px; width: clamp(16px, 2.2vw, 30px); height: 4px;
  border-radius: 2px; background: var(--sc-accent); }
.readline i:first-child { left: clamp(6px, 1vw, 14px); }
.readline i:last-child { right: clamp(6px, 1vw, 14px); }

/* ----------------------------------------------------------------- script -- */
.w { transition: color 160ms var(--sc-ease-out); }
.w.r { color: var(--read); }
.w.n { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.16em; }
.cue { color: var(--sc-accent); white-space: nowrap; }
.cue.r { color: color-mix(in oklab, var(--sc-accent) 60%, var(--read)); }
.note { color: var(--sc-accent); }

.script { padding-inline: var(--sc-gutter); }
.script .line {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--script); line-height: 1.24;
  letter-spacing: -0.012em; max-width: 17em; margin: 0 0 0.85em; text-wrap: pretty;
}
.script .line:last-child { margin-bottom: 0; }
.script .aside { font-size: var(--sc-t-lg); line-height: 1.55; color: var(--sc-ink-soft); max-width: 34em;
  margin-top: var(--sc-7); text-wrap: pretty; }
.script .aside code { font-family: var(--sc-font-mono); font-size: 0.86em; color: var(--sc-ink); }

/* ------------------------------------------------------------ act: Mac -- */
.mac { height: 100%; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr); align-items: center;
  gap: var(--sc-8); padding-inline: var(--sc-gutter); max-width: 94rem; margin-inline: auto; }
.mac__art { position: relative; container-type: inline-size; }
.laptop__lid { padding: 1.8cqw 1.8cqw 2.2cqw; border-radius: 3.2cqw 3.2cqw 0.8cqw 0.8cqw; background: #0a0a0b;
  box-shadow: inset 0 0 0 0.22cqw #34363b, inset 0 0 0 0.4cqw #0a0a0b, var(--sc-e3); }
.laptop__view { position: relative; aspect-ratio: 1512 / 982; overflow: hidden; border-radius: 1.3cqw 1.3cqw 0.2cqw 0.2cqw; background: #000; }
/* The camera moves in on the notch: scale from the top centre, where the overlay sits. */
.laptop__zoom { position: absolute; inset: 0; transform-origin: 50% 0; transform: scale(calc(1 + var(--zoom, 0) * 1.5)); }
.laptop__zoom img { display: block; width: 100%; height: 100%; max-width: none; }
/* The real overlay capture (2x) on its own layer, so it stays sharp at full zoom. Placed as the app places it:
   centred, just under the 37pt menu bar, on a 1512 x 982pt screen. */
.laptop__zoom .laptop__overlay { position: absolute; top: 3.77%; left: 50%; width: 34.99%; height: auto; translate: -50% 0;
  filter: drop-shadow(0 0.9cqw 1.8cqw rgb(0 0 0 / 0.55)); }
.laptop__notch { position: absolute; top: 0; left: 50%; width: 13.2%; height: 3.3%; translate: -50% 0; background: #000;
  border-radius: 0 0 0.8cqw 0.8cqw; }
.laptop__notch::after { content: ""; position: absolute; top: 34%; left: 50%; width: 0.65cqw; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; background: radial-gradient(circle at 40% 38%, #24384d 0 20%, #050607 34%); }
.laptop__base { position: relative; height: 2.4cqw; margin: 0 -6cqw; border-radius: 0.3cqw 0.3cqw 40% 40% / 0.3cqw 0.3cqw 100% 100%;
  background: linear-gradient(#6a6d73, #2e3034 40%, #18191c); box-shadow: 0 2.2cqw 3cqw -1.6cqw rgb(0 0 0 / 0.85); }
.laptop__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 15cqw; height: 0.8cqw; translate: -50% 0;
  border-radius: 0 0 1cqw 1cqw; background: #222428; }
.mac__win { position: absolute; left: -6cqw; bottom: -8cqw; width: 54cqw; margin: 0; border-radius: 1.1cqw; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 3cqw 6cqw -1cqw rgb(0 0 0 / 0.8);
  transform: translate3d(calc(var(--out, 0) * -8cqw), calc(var(--out, 0) * 26cqw), 0); opacity: calc(1 - var(--out, 0)); }
.mac__win img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------------ CTA -- */
.cta { display: inline-flex; align-items: center; gap: 0.55em; margin-top: var(--sc-6); padding: 0.85em 1.4em;
  border-radius: var(--sc-r-pill); background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600;
  font-size: var(--sc-t-base); text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: #FFC14D; } }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- devices -- */
.phone { --w: 300px; position: relative; width: var(--w); aspect-ratio: 1320 / 2868; flex: none;
  padding: calc(var(--w) * 0.028); border-radius: calc(var(--w) * 0.16);
  background: linear-gradient(160deg, #34363c, #16171a 40%, #101113);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.09), inset 0 1px 0 rgb(255 255 255 / 0.14), var(--sc-e3); }
.phone__screen, .tablet__screen { position: relative; height: 100%; overflow: hidden; background: #000; }
.phone__screen { border-radius: calc(var(--w) * 0.132); }
.phone__screen > img, .phone__screen > video, .tablet__screen > img, .tablet__screen > video { position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover; }
.phone--land { aspect-ratio: 2868 / 1320; padding: calc(var(--w) * 0.013); border-radius: calc(var(--w) * 0.074); }
.phone--land .phone__screen { border-radius: calc(var(--w) * 0.062); }
.tablet { --w: 640px; position: relative; width: var(--w); aspect-ratio: 2752 / 2064; padding: calc(var(--w) * 0.022);
  border-radius: calc(var(--w) * 0.05); background: linear-gradient(160deg, #2f3136, #141518 45%, #0f1012);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.12), var(--sc-e3); }
.tablet__screen { border-radius: calc(var(--w) * 0.03); }

.label { display: inline-block; font-family: var(--sc-font-text); font-size: var(--sc-t-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-accent); margin-bottom: var(--sc-4); }
.h2 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: 1.02;
  letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.lede { font-size: var(--sc-t-lg); line-height: 1.6; color: var(--sc-ink-soft); max-width: 32em; margin: var(--sc-5) 0 0;
  text-wrap: pretty; }
.lede strong { color: var(--sc-ink); font-weight: 600; }

/* ---------------------------------------------------- act: voice (scrub) -- */
.voice { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sc-8);
  height: 100%; padding-inline: var(--sc-gutter); max-width: 84rem; margin-inline: auto; }
.voice .phone { --w: clamp(230px, 22vw, 330px); }
/* "Hearing": the words the app hears at this point of the clip, newest in amber, with a level meter that jumps per word. */
.hear { margin-top: var(--sc-7); padding: var(--sc-5) var(--sc-6); max-width: 34rem; border-radius: var(--sc-r-lg);
  background: var(--sc-surface); box-shadow: var(--sc-edge), 0 0 0 1px rgb(255 255 255 / 0.05); }
.hear__label { display: inline-flex; align-items: center; gap: 0.7em; font: 600 var(--sc-t-xs)/1 var(--sc-font-text);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); }
.hear__wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.hear__wave i { width: 3px; height: calc(4px + var(--lv, 0.2) * 14px); border-radius: 2px; background: var(--sc-accent);
  transition: height 110ms var(--sc-ease-out); }
/* right-aligned flex row: the newest word stays in view and older ones slide off the left edge into the fade */
.hear__text { margin: var(--sc-3) 0 0; height: 1.3em; display: flex; justify-content: flex-end; gap: 0.28em; overflow: hidden;
  font: 600 var(--sc-t-xl)/1.3 var(--sc-font-display); letter-spacing: -0.01em; color: var(--sc-ink-soft); white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 22%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); }
.hear__text span { flex: none; }
.hear__text .now { color: var(--sc-accent); }

/* --------------------------------------------------- act: write (flow) ---- */
.write { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sc-9); align-items: start;
  padding-top: var(--sc-10); padding-bottom: var(--sc-9); }
.write__figure { position: sticky; top: 12vh; }
.write__figure .phone { --w: clamp(210px, 19vw, 290px); }
.write .script { padding-inline: 0; }
.write .line { max-width: 15em; }

/* -------------------------------------------------- act: record (reveal) -- */
/* One centred column: the heading over the three phones, and the details in a row underneath. */
.record { padding: var(--sc-9) var(--sc-gutter) var(--sc-10); max-width: 84rem; margin-inline: auto; }
.record__head { max-width: 40rem; margin-inline: auto; text-align: center; }
.record__head .lede { margin-inline: auto; }
.record__specs { list-style: none; padding: var(--sc-6) 0 0; margin: calc(var(--sc-9) + 2.5rem) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-6);
  border-top: 1px solid var(--sc-hairline-strong); }
.record__specs li { display: grid; gap: var(--sc-2); align-content: start; }
.record__specs b { font: 700 var(--sc-t-lg)/1.2 var(--sc-font-display); letter-spacing: -0.015em; color: var(--sc-ink); }
.record__specs b::before { content: ""; display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--sc-accent);
  margin-bottom: var(--sc-4); }
.record__specs span { font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
.record__stage { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1rem, 3vw, 3rem);
  margin-top: var(--sc-8); }
.record__stage .phone { --w: clamp(170px, 17vw, 250px); }
.record__stage .phone--hero { --w: clamp(230px, 25vw, 360px); }
.record__stage .phone--low { margin-bottom: -2.5rem; opacity: 0.9; }
.record__stage .tablet--rec { --w: clamp(380px, 40vw, 600px); }  /* landscape iPad between the two phones */
.record__live { position: relative; }
.record__live figcaption { margin-top: var(--sc-4); text-align: center; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* --------------------------------------------- act: every screen (pin) ---- */
.screens { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center; gap: var(--sc-8); padding-inline: var(--sc-gutter); max-width: 92rem; margin-inline: auto; }
/* Devices are sized from the art column itself (cqw), never the window, so they can't grow into the copy. */
.screens__art { position: relative; container-type: inline-size; aspect-ratio: 100 / 84; }
.screens__art > div { position: absolute; }
.screens__tab { left: 0; top: 4%; }
.screens__tab .tablet { --w: 86cqw; }
.screens__land { left: 30%; bottom: 0; }
.screens__land .phone--land { --w: 50cqw; }
.screens__port { right: 0; top: 0; }
.screens__port .phone { --w: 22cqw; }
.screens__list { list-style: none; padding: 0; margin: var(--sc-6) 0 0; display: grid; gap: var(--sc-3); }
.screens__list li { display: flex; gap: var(--sc-3); align-items: baseline; color: var(--sc-ink); font-size: var(--sc-t-base); }
.screens__list li::before { content: ""; flex: none; width: 14px; height: 3px; border-radius: 2px; background: var(--sc-accent);
  transform: translateY(-0.3em); }

/* ----------------------------------------------------------- act: price -- */
.price { padding: var(--sc-10) var(--sc-gutter) var(--sc-9); max-width: 84rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--sc-8); align-items: start; }
.price__plans { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--sc-hairline-strong); }
.plan { padding: var(--sc-6) var(--sc-6) 0 0; }
.plan + .plan { padding-left: var(--sc-6); border-left: 1px solid var(--sc-hairline); }
.plan h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 700; margin: 0; letter-spacing: -0.02em; }
.plan h3 span { color: var(--sc-accent); }
.plan .cost { margin: var(--sc-2) 0 var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sc-3); font-size: var(--sc-t-base); }
.plan li { padding-left: 1.3em; position: relative; text-wrap: pretty; }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--sc-ink-soft); }
.plan--pro li::before { border-color: var(--sc-accent); background: var(--sc-accent); }
.price__fine { grid-column: 2; margin: var(--sc-6) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.price__fine a, .foot a { color: var(--sc-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* -------------------------------------------------------------- act: FAQ -- */
/* Same two columns as pricing: the heading on the left, questions that open in place on the right. */
.faq { padding: var(--sc-7) var(--sc-gutter) var(--sc-9); max-width: 84rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: var(--sc-8); align-items: start; }
.faq__list { border-top: 1px solid var(--sc-hairline-strong); }
.faq details { border-bottom: 1px solid var(--sc-hairline); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5); min-height: 44px;
  padding: var(--sc-5) 0; cursor: pointer; list-style: none; font: 600 var(--sc-t-lg)/1.35 var(--sc-font-display);
  letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: #24262B; color: var(--sc-accent); font: 500 20px/1 var(--sc-font-text); transition: transform 200ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--sc-accent); } }
.faq details p { margin: 0 0 var(--sc-5); max-width: 40em; color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.6;
  text-wrap: pretty; }

/* ----------------------------------------------------------- close: try -- */
.close { min-height: 100svh; padding: var(--sc-10) var(--sc-gutter) calc(var(--strip-h) + var(--sc-7));
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sc-8); align-content: center;
  max-width: 92rem; margin-inline: auto; }
.try { background: var(--sc-surface); border-radius: var(--sc-r-lg); box-shadow: var(--sc-edge), var(--sc-e2); overflow: hidden; }
.try__view { position: relative; height: clamp(17rem, 44vh, 26rem); overflow: hidden; }
.try__view textarea { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; border: 0; outline: 0;
  padding: var(--sc-6); background: transparent; color: var(--sc-ink); font: 500 var(--sc-t-lg)/1.6 var(--sc-font-text); }
.try__view textarea:focus-visible { box-shadow: inset 0 0 0 2px var(--sc-accent); border-radius: var(--sc-r-lg) var(--sc-r-lg) 0 0; }
.try__run { position: absolute; inset: 0; display: none; background: #0B0C0E; }
.try.is-running .try__run { display: block; }
.try.is-running textarea { visibility: hidden; }
.try__track { position: absolute; left: var(--sc-6); right: var(--sc-6); top: 0; will-change: transform; }
.try__track p { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem);
  line-height: 1.26; margin: 0 0 0.7em; }
.try__track .page { display: flex; align-items: center; gap: 1em; margin: 0 0 0.7em; font: 600 var(--sc-t-xs)/1 var(--sc-font-text);
  letter-spacing: 0.12em; color: var(--read); }
.try__track .page::before, .try__track .page::after { content: ""; flex: 1; height: 1px; background: var(--sc-hairline-strong); }
.try__run .readline-local i { position: absolute; top: 38%; width: 22px; height: 4px; border-radius: 2px; background: var(--sc-accent); }
.try__run .readline-local i:first-child { left: 8px; } .try__run .readline-local i:last-child { right: 8px; }
.try__bar { display: flex; align-items: center; gap: var(--sc-3); padding: var(--sc-4) var(--sc-5);
  border-top: 1px solid var(--sc-hairline); }
.try__bar .grow { flex: 1; }
.get { margin-top: var(--sc-8); }
.get h3 { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); margin: 0; letter-spacing: -0.02em; }
.get p { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); }
.get__icon { width: 64px; height: 64px; border-radius: 15px; margin-bottom: var(--sc-4); box-shadow: var(--sc-e2); }
/* Waitlist form (until launch). 16px+ input text so iOS doesn't zoom in on focus. */
.notify { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-5); max-width: 30rem; }
.notify input[type="email"] { flex: 1 1 14rem; min-width: 0; height: 48px; padding: 0 1.1em; font: inherit;
  font-size: var(--sc-t-base); color: var(--sc-ink); background: var(--sc-surface);
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill); }
.notify input[type="email"]::placeholder { color: var(--read); }
.notify input[type="email"]:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: var(--sc-r-pill); }
.notify .cta { margin: 0; height: 48px; border: 0; font-family: inherit; cursor: pointer; }
.notify .cta:disabled { opacity: 0.6; cursor: default; }
.notify__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.get .notify__status { color: var(--sc-ink); }
.get__offer { color: var(--sc-accent); font-weight: 600; }
.get .notify__status:empty { display: none; }
.get .notify__fine { font-size: var(--sc-t-sm); }
.get .notify__fine a { color: inherit; }
.foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); align-items: center;
  margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft); }
.foot .grow { flex: 1; }

/* ---------------------------------------------------------- buttons (UI) -- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-width: 44px; height: 44px;
  padding: 0 0.9em; border: 0; border-radius: var(--sc-r-pill); background: #24262B; color: var(--sc-ink);
  font: 600 var(--sc-t-sm)/1 var(--sc-font-text); cursor: pointer; white-space: nowrap;
  transition: transform 120ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); }
.btn:active { transform: scale(0.96); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn--icon { padding: 0; width: 44px; }
.btn--play { width: 52px; height: 52px; padding: 0; background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--play svg { width: 22px; height: 22px; }
.btn[aria-pressed="true"]:not(.btn--play) { background: color-mix(in oklab, var(--sc-accent) 22%, #24262B); color: var(--sc-accent); }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.btn:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn--play):not(:disabled):hover { background: #2E3036; }
  .btn--play:hover { background: #FFC14D; }
}
.speed { display: inline-flex; align-items: center; gap: 2px; }
.speed output { min-width: 3ch; text-align: center; font: 600 var(--sc-t-sm)/1 var(--sc-font-text); font-variant-numeric: tabular-nums; }
.speed span { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin-right: 4px; }

/* --------------------------------------------------- the operator strip -- */
.strip { position: fixed; z-index: 60; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); height: var(--strip-h);
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 22px;
  background: rgb(23 25 29 / 0.94); box-shadow: var(--sc-edge), 0 18px 40px -16px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.05);
  transform: translate(-50%, calc(100% + 30px)); transition: transform 420ms var(--sc-ease-drawer); }
.strip.is-on { transform: translate(-50%, 0); }
.strip__brand img { width: 40px; height: 40px; border-radius: 10px; }
.strip__sep { width: 1px; height: 28px; background: var(--sc-hairline); margin-inline: 4px; }
.strip__cta { margin-left: 2px; }
.strip .cta { margin: 0; padding: 0 1.1em; height: 44px; font-size: var(--sc-t-sm); }

/* ----------------------------------------------------------------- mirror -- */
main { transform-origin: 50% 50%; transition: transform 520ms var(--sc-ease-drawer); }
main.is-mirrored { transform: scaleX(-1); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ----------------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  .voice { grid-template-columns: minmax(0, 1fr); gap: var(--sc-5); align-content: center; justify-items: start;
    padding-bottom: calc(var(--strip-h) + 20px); }
  .voice > div:first-child { min-width: 0; width: 100%; }
  .hear { margin-top: var(--sc-5); padding: var(--sc-4) var(--sc-5); max-width: none; }
  .hear__text { font-size: var(--sc-t-lg); }
  .voice .phone { --w: min(44vw, 210px); justify-self: center; }
  .write { grid-template-columns: 1fr; gap: var(--sc-7); }
  .write__figure { position: static; order: 2; }
  .screens { grid-template-columns: 1fr; align-content: center; gap: var(--sc-6); }
  .mac { grid-template-columns: 1fr; align-content: center; gap: var(--sc-6); }
  /* Pinned acts are one screen tall: if a phone is too short, overflow at the bottom, never over the heading. */
  .voice, .screens, .mac { align-content: safe center; }
  .mac .screens__list { display: none; }
  .mac__win { left: auto; right: -2cqw; bottom: -12cqw; width: 52cqw; }
  .screens__art { order: 2; }
  .price { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; gap: var(--sc-5); }
  .record__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-5); }
  .price__fine { grid-column: 1; }
  .close { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .voice .h2 { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); }
  .voice .lede { font-size: var(--sc-t-base); margin-top: var(--sc-3); }
  .voice .phone { --w: min(38vw, 180px); }
  .voice .label { margin-bottom: var(--sc-3); }
  :root { --script: clamp(1.7rem, 1rem + 3.2vw, 2.2rem); }
  .record__stage { gap: 0.5rem; }
  .mac { gap: var(--sc-5); padding-bottom: calc(var(--strip-h) + 28px); }
  .mac .h2 { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); }
  .mac .lede { font-size: var(--sc-t-base); margin-top: var(--sc-3); }
  .screens { gap: var(--sc-5); padding-bottom: calc(var(--strip-h) + 28px); }
  .screens .h2 { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); }
  .screens .lede { font-size: var(--sc-t-base); margin-top: var(--sc-3); }
  .screens .screens__list { display: none; }
  .mac__win { bottom: -7cqw; width: 46cqw; }
  .record__stage .phone { --w: 22vw; }
  .record__stage .tablet--rec { --w: 52vw; }
  .record__stage .phone { --w: 19vw; }
  .price__plans { grid-template-columns: 1fr; }
  .plan + .plan { padding-left: 0; border-left: 0; border-top: 1px solid var(--sc-hairline); margin-top: var(--sc-6); }
  .strip__brand, .strip [data-act="prev"], .strip [data-act="next"], .strip__sep, .speed span { display: none; }
  .strip { gap: 4px; }
}
/* short phones: a smaller phone in the voice act, so the heading, the Hearing box and the phone all fit */
@media (max-width: 700px) and (max-height: 700px) {
  .voice .phone { --w: min(29vw, 140px); }
}
@media (max-width: 380px) {
  .strip [data-act="mirror"] { display: none; }
}

/* ----------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  main { transition: none; }
  .w { transition: none; }
}