/* ==========================================================================
   The hero's live Converse demo: the phone, the hint around it, and the
   Converse tab inside it drawn as the app draws it in dark appearance.
   Sizes inside the screen are iPhone points: 1 pt = var(--u), the screen
   being 393 pt wide, so the tab keeps the app's proportions at any size.
   ========================================================================== */

/* The frame follows the words, not a screenshot's scale: the app's text never drops under 1.06 px a point
   (`--t` below). On short screens the frame grows wider than an iPhone (down to 1 : 1.3) rather than smaller,
   and the screen's chrome (status bar, header, dock, tab bar) follows the frame's height (`--u`), so a wider
   frame wraps the words less and leaves the chat its room: at 1280 × 720 the whole phone, the countdown and the
   Terms line fit on the first screen with three or four turns in view. */
.hero__media { container-type: inline-size; }
.demo {
  /* The first screen less the site's header (78), the hero's padding (below) and the lines under the phone (82). */
  --room: calc(100svh - 160px - 2 * var(--hero-pad, 3.5rem));
  --w: min(clamp(320px, 32vw, 450px), calc(var(--room) / 1.3), 100cqw);
  --h: max(480px, min(calc(var(--w) * 2.168), var(--room)));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.phone {
  position: relative;
  z-index: 1;
  width: var(--w);
  height: var(--h);
  padding: calc(var(--w) * 0.028);
  border-radius: calc(var(--w) * 0.155);
  background: linear-gradient(160deg, #343a44, #15181d 40%, #0d0f12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 40px 80px rgba(0, 0, 0, 0.45),
    0 0 120px rgba(10, 122, 255, 0.16);
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.13);
  background: #000;
  container-type: size;
}
/* The screenshot is the fallback for a page whose script never runs: until then the screen stays black, so a
   first frame never shows a phone the live tab then replaces (the flicker on a cold load). */
.phone__still { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; visibility: hidden; animation: still-fallback 0s 4s forwards; }
@keyframes still-fallback { to { visibility: visible; } }
.phone__live { display: none; }
.demo.is-live .phone__still { display: none; }
.demo.is-live .phone__live { display: flex; }

/* The first-try hint: a hand-drawn arrow at the main button, gone once Start is tapped. arrow.js draws it from
   the button's measured place (beside the phone on a laptop, over the empty chat on narrow screens); the layer
   covers the demo and lets every touch through. */
.demo__arrow,
.demo__below { display: none; }
.demo.is-live .demo__below { display: flex; }
.demo.is-live .demo__arrow { display: block; }
.demo.is-live.has-started .demo__arrow { opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
/* Green so it is the first thing seen (owner, 2026-10-29: "very noticeable", then "less eye hurting"): a tinted
   pill with green text, a slow small bob; green is no colour the app's dock uses (blue start, red stop). */
.demo__arrow {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  color: #4cc970;
  pointer-events: none;
  animation: demo-arrow-bob 2.2s ease-in-out infinite;
}
.demo__arrow span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.42em 1em;
  border-radius: 999px;
  background: rgba(76, 201, 112, 0.14);
  border: 2.5px solid rgba(76, 201, 112, 0.7);
  color: #7ad995;
  font: 600 1.4rem/1.1 var(--font-ui, sans-serif);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.demo__arrow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.demo__arrow path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes demo-arrow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .demo__arrow { animation: none; } }

.demo__below {
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: var(--w);
  margin-top: 0.8rem;
  text-align: center;
}
.demo__timer {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: rgba(245, 247, 250, 0.82);
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-height: 1.6em;             /* the same line, text or none (before Start it is hidden, its place kept) */
}
.demo__timer-bar {
  position: relative;
  width: 84px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(245, 247, 250, 0.16);
}
.demo__timer.is-idle { visibility: hidden; }   /* nothing before Start; its line keeps its place */
.demo__timer-bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blue-500, #0a7aff);
  transform-origin: left center;
  transition: transform 0.25s linear;
}
.demo__timer.is-low .demo__timer-bar i { background: #ff9f0a; }
.demo__terms {
  margin: 0;
  color: rgba(245, 247, 250, 0.55);
  font-size: 0.74rem;
  line-height: 1.45;
}
.demo__terms a { color: rgba(245, 247, 250, 0.78); }
.demo__turnstile:empty { display: none; }

@media (max-width: 1000px) {
  /* The headline above the phone (styles.css), the phone's button inside the first screen. */
  .demo { --w: min(450px, 100cqw); --h: clamp(520px, calc(100svh - 300px), calc(var(--w) * 2.168)); }
  .demo__timer { display: none; }   /* no countdown under the phone here: the space is the phone's (owner, 2026-10-29) */
  .demo__below { margin-top: 0.45rem; gap: 0; }   /* the Terms line right under the frame */
}
@media (max-width: 640px) {
  .demo { --h: clamp(520px, calc(100svh - 262px), calc(var(--w) * 2.168)); }
  .phone { padding: 7px; border-radius: 46px; }
  .phone__screen { border-radius: 40px; }
}

/* ---------------------------------------------------------------- the app */

.cv {
  /* 1 pt: the screen's width over 393, or its height over 760 when the frame is wider than an iPhone's. */
  --u: min(calc(100cqw / 393), calc(100cqh / 760));
  /* Words (bubbles, source lines, pills): never under 1.06 px a point, so 17 pt reads as 18 px or more. */
  --t: max(var(--u), 1.06px);
  --label: #fff;
  --secondary: rgba(235, 235, 245, 0.6);
  --surface: #1c1c1e;
  --pill: #3a3a3f;
  --pane: #121214;
  --accent: #007aff;
  --bubble-blue: #0070f0;
  --red: #ff453a;
  position: absolute;
  inset: 0;
  flex-direction: column;
  overflow: hidden;
  background: #000;
  color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--u) * 17);
  line-height: 1.29;
  letter-spacing: -0.01em;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.cv [hidden] { display: none !important; }
.cv :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.cv button:focus-visible, .cv input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cv :where(svg) { display: block; width: 100%; height: 100%; fill: currentColor; }

.cv-status {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--u) * 54);
  padding: calc(var(--u) * 6) calc(var(--u) * 34) 0 calc(var(--u) * 52);
}
.cv-time { font-size: calc(var(--u) * 17); font-weight: 600; letter-spacing: 0; }
.cv-island { display: none; }
.cv-icons { display: flex; gap: calc(var(--u) * 6); align-items: center; }
.cv-icons svg { width: calc(var(--u) * 19); height: calc(var(--u) * 13); }
.cv-icons svg + svg { width: calc(var(--u) * 27); height: calc(var(--u) * 14); }

.cv-header {
  display: flex;
  flex: none;
  justify-content: flex-end;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 8) calc(var(--u) * 16) 0;
  color: var(--accent);
}
.cv-capsule {
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 4);
  border-radius: 999px;
  background: var(--surface);
}
.cv-hbtn, .cv-more {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  color: var(--accent);
}
.cv-hbtn svg, .cv-more svg { width: calc(var(--u) * 21); height: calc(var(--u) * 21); }
.cv-hbtn.is-dim { opacity: 0.45; }
.cv-more { border-radius: 50%; background: var(--surface); }
.cv-divider { display: block; width: 1px; height: calc(var(--u) * 18.5); background: rgba(255, 255, 255, 0.14); }

.cv-chat {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 calc(var(--u) * 22));
  mask-image: linear-gradient(transparent, #000 calc(var(--u) * 22));
}
.cv-chat::-webkit-scrollbar { display: none; }
.cv-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(var(--u) * 24);
  min-height: 100%;
  padding: calc(var(--u) * 24) calc(var(--u) * 16) calc(var(--u) * 28);
}
.cv-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
  padding: 0 calc(var(--u) * 24);
  text-align: center;
  pointer-events: none;
}
.cv-empty p { margin: 0; color: var(--secondary); font-size: calc(var(--t) * 15); line-height: 1.33; }
.cv-empty .cv-empty__title { color: var(--label); font-size: calc(var(--t) * 17); font-weight: 600; }

.cv-turn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: calc(var(--u) * 4);
  max-width: calc(100% - var(--u) * 40);
}
.cv-turn.is-second { align-self: flex-end; align-items: flex-end; }
.cv-turn.is-early { align-self: center; align-items: center; }
.cv-source {
  padding: 0 calc(var(--u) * 4);
  color: var(--secondary);
  font-size: calc(var(--t) * 15);
  line-height: 1.33;
}
.cv-turn.is-second .cv-source { text-align: right; }
.cv-turn.is-early .cv-source { padding: calc(var(--u) * 9) calc(var(--u) * 14); border-radius: calc(var(--u) * 18); background: var(--surface); }
.cv-turn.is-early .cv-dots { margin: calc(var(--u) * 5) 0; }
.cv-bubble {
  padding: calc(var(--u) * 9) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 5);
  background: var(--surface);
  color: var(--label);
  font-size: calc(var(--t) * 17);
  overflow-wrap: anywhere;
  animation: cv-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cv-turn.is-second .cv-bubble { border-radius: calc(var(--u) * 18) calc(var(--u) * 18) calc(var(--u) * 5) calc(var(--u) * 18); background: var(--bubble-blue); }
.cv-bubble.is-waiting { padding: calc(var(--u) * 14) calc(var(--u) * 16); }
.cv-bubble .is-grey { color: var(--secondary); transition: color 0.45s; }
.cv-turn.is-second .cv-bubble .is-grey { color: rgba(255, 255, 255, 0.6); }
.cv-nt { padding: 0 calc(var(--u) * 4); color: var(--secondary); font-size: calc(var(--t) * 13); }
@keyframes cv-in { from { opacity: 0; transform: translateY(calc(var(--u) * 8)); } }

.cv-dots { display: flex; gap: calc(var(--u) * 5); height: calc(var(--u) * 10); align-items: flex-end; }
.cv-dots i {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: currentColor;
  color: var(--secondary);
  animation: cv-dot 1.1s ease-in-out infinite;
}
.cv-turn.is-second .cv-bubble .cv-dots i { color: #fff; }
.cv-dots i:nth-child(2) { animation-delay: 0.12s; }
.cv-dots i:nth-child(3) { animation-delay: 0.24s; }
@keyframes cv-dot {
  0%, 60%, 100% { opacity: 0.45; transform: none; }
  25% { opacity: 0.85; transform: translateY(calc(var(--u) * -3)); }
}

.cv-dock { flex: none; padding-top: calc(var(--u) * 4); }
.cv-line { display: block; width: calc(100% - var(--u) * 56); height: calc(var(--u) * 22); margin: 0 auto; }
.cv-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 16);
}
.cv-pill {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
  height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 12);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  background: var(--pill);
  font-size: calc(var(--t) * 15);
  font-weight: 600;
  transition: opacity 0.35s, transform 0.2s;
}
.cv-pill__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-pill.is-tight svg { display: none; }   /* a long name on a small phone: the name before the chevrons (view.js fitName) */
.cv-pill svg { flex: none; width: calc(var(--u) * 11); height: calc(var(--u) * 13); color: var(--secondary); }
.cv-pill:disabled { opacity: 0.5; cursor: default; }
.cv-main {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--u) * 72);
  height: calc(var(--u) * 72);
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 122, 255, 0.22);
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
}
.cv-main.is-stop { background: var(--red); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(255, 69, 58, 0.22); }
.cv-main > span { position: absolute; width: calc(var(--u) * 30); height: calc(var(--u) * 30); transition: opacity 0.2s, transform 0.3s; }
.cv-main__stop { opacity: 0; transform: scale(0.6); }
.cv-main.is-stop .cv-main__stop { opacity: 1; transform: none; }
.cv-main.is-stop .cv-main__mic { opacity: 0; transform: scale(0.6); }
.cv-main:active, .cv-pill:active:not(:disabled), .cv-tab:active { transform: scale(0.92); }

.cv-tabs { flex: none; padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 8); }
.cv-tabbar { display: flex; padding: calc(var(--u) * 6); border-radius: 999px; background: var(--surface); }
.cv-tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 4) 0;
  color: var(--secondary);
}
.cv-tab__icon {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 30);
  border-radius: 999px;
}
.cv-tab__icon svg { width: auto; height: calc(var(--u) * 18.3); aspect-ratio: 1; }
.cv-tab__icon.is-wide svg { aspect-ratio: 42.5 / 24; }
.cv-tab__title { font-size: max(10px, calc(var(--u) * 11)); font-weight: 500; line-height: 1.2; }
.cv-tab.is-selected { color: var(--accent); }
.cv-tab.is-selected .cv-tab__icon { background: var(--accent); color: #fff; }
.cv-tab.is-selected .cv-tab__title { font-weight: 600; }
.cv-home { flex: none; height: calc(var(--u) * 13); }

.cv-toast {
  position: absolute;
  z-index: 3;
  top: calc(var(--u) * 112);
  left: 50%;
  padding: calc(var(--u) * 9) calc(var(--u) * 16);
  border-radius: 999px;
  background: rgba(58, 58, 63, 0.97);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(0, 0, 0, 0.4);
  font-size: calc(var(--u) * 15);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(var(--u) * -6));
  transition: opacity 0.2s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}
.cv-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* The language list: a sheet over the tab, as the app's. The scrim under it (the sheet's shadow dims) takes the taps. */
.cv-scrim { position: absolute; z-index: 4; inset: 0; }
.cv-sheet {
  position: absolute;
  z-index: 4;
  inset: calc(var(--u) * 60) 0 0;
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--u) * 38) calc(var(--u) * 38) 0 0;
  background: var(--surface);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 0.35s;
}
.cv-sheet.is-open { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45); }
.cv-sheet__head { position: relative; display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 6) 0 calc(var(--u) * 10); }
.cv-sheet__head h3 { margin: calc(var(--u) * 12) 0 0; color: var(--label); font-size: calc(var(--u) * 17); font-weight: 600; letter-spacing: -0.01em; }
.cv-grabber { width: calc(var(--u) * 36); height: calc(var(--u) * 5); border-radius: 3px; background: #48484a; }
.cv-sheet__close {
  position: absolute;
  top: calc(var(--u) * 16);
  inset-inline-end: calc(var(--u) * 16);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  border-radius: 50%;
  background: #2c2c2e;
  color: var(--secondary);
}
.cv-sheet__close svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.cv-search {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--u) * 6);
  height: calc(var(--u) * 36);
  margin: 0 calc(var(--u) * 16) calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 10);
  background: rgba(118, 118, 128, 0.24);
  color: var(--secondary);
}
.cv-search svg { flex: none; width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.cv-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--label);
  font: inherit;
  font-size: calc(var(--u) * 17);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.cv-search input::placeholder { color: var(--secondary); }
.cv-list {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 calc(var(--u) * 16) 0;
  padding-bottom: calc(var(--u) * 24);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.cv-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: calc(var(--u) * 52);
  padding: calc(var(--u) * 8) calc(var(--u) * 16);
  background: #2c2c2e;
  text-align: start;
  box-shadow: inset 0 -0.5px 0 rgba(84, 84, 88, 0.65);
}
.cv-option:first-child { border-radius: calc(var(--u) * 10) calc(var(--u) * 10) 0 0; }
.cv-option:last-child { border-radius: 0 0 calc(var(--u) * 10) calc(var(--u) * 10); box-shadow: none; }
.cv-option:active { background: #3a3a3c; }
.cv-option__text { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
.cv-option__endonym { color: var(--label); font-size: calc(var(--t) * 17); }
.cv-option__endonym small, .cv-option__name { color: var(--secondary); font-size: calc(var(--t) * 13); }
.cv-option__check { flex: none; width: calc(var(--u) * 20); height: calc(var(--u) * 20); color: var(--accent); }

/* The calm card: the end of the demo, or why it can't run. */
.cv-card {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0 calc(var(--u) * 12) calc(var(--u) * 118);
  background: rgba(0, 0, 0, 0);
  transition: background-color 0.3s;
}
.cv-card.is-open { background: rgba(0, 0, 0, 0.5); }
.cv-card__panel {
  width: 100%;
  padding: calc(var(--u) * 24) calc(var(--u) * 20) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 28);
  background: var(--surface);
  box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(0, 0, 0, 0.55);
  text-align: center;
  opacity: 0;
  transform: translateY(calc(var(--u) * 24));
  transition: opacity 0.3s, transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.cv-card.is-open .cv-card__panel { opacity: 1; transform: none; }
.cv-card h3 { margin: 0 0 calc(var(--u) * 6); color: var(--label); font-size: calc(var(--t) * 20); font-weight: 700; letter-spacing: -0.02em; outline: none; }
.cv-card p { margin: 0 0 calc(var(--u) * 18); color: var(--secondary); font-size: calc(var(--t) * 15); line-height: 1.35; }
.cv-card__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 8); }
.cv-card__badges .store-badge { height: calc(var(--u) * 42); }
.cv-card__close { width: 100%; height: calc(var(--u) * 44); margin-top: calc(var(--u) * 8); color: var(--accent); font-size: calc(var(--u) * 17); }

/* Face to face (iOS `FaceToFaceView`): the top half turned to the person across, the seam with the line and
   the main button, the bottom half with Swap and Close in its corners; the tab bar stays. */
.cv-f2f { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.cv-half {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * 20) calc(var(--u) * 28);
  overflow: hidden;
}
.cv-half.is-top { transform: rotate(180deg); background: var(--surface); }
.cv-half-wrap { position: relative; display: flex; flex: 1; min-height: 0; flex-direction: column; }
.cv-half-wrap .cv-half { padding-bottom: calc(var(--u) * 84); }
.cv-half > * { width: 100%; }
.cv-half .is-new { animation: cv-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cv-half__name { margin: 0; color: rgba(235, 235, 245, 0.3); font-size: calc(var(--t) * 28); font-weight: 700; text-align: center; }
.cv-half__spoken { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; }
.cv-half__spoken p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--secondary);
  font-size: calc(var(--t) * 20);
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.cv-half__nt { margin: 0; color: var(--secondary); font-size: calc(var(--t) * 15); }
.cv-half__heard { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 14); max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.cv-half__big { --size: 34; margin: 0; color: var(--label); font-size: calc(var(--t) * var(--size)); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.cv-seam {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  padding: calc(var(--u) * 10) 0;
  background: var(--surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), inset 0 -1px rgba(255, 255, 255, 0.07);
}
.cv-seam .cv-line { position: absolute; top: 50%; left: calc(var(--u) * 28); width: calc(100% - var(--u) * 56); transform: translateY(-50%); }
.cv-corner {
  position: absolute;
  right: calc(var(--u) * 20);
  bottom: calc(var(--u) * 8);
  left: calc(var(--u) * 20);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.cv-round {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  pointer-events: auto;
}
.cv-round svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.cv-round:active { transform: scale(0.92); }

@media (prefers-reduced-motion: reduce) {
  .cv *, .cv-sheet, .cv-card__panel { animation: none !important; transition: none !important; }
}

/* The hero on a laptop screen: room for the whole phone beside the copy, little space above and below it on a
   short screen. */
@media (min-width: 1001px) {
  .hero__inner { --hero-pad: clamp(0.75rem, 2svh, 3.5rem); min-height: 0; padding-block: var(--hero-pad); }
}

/* A long translation of "Tap and speak" wraps inside the demo instead of leaving it (i18n, 2026-10-29). */
.demo__arrow span { width: max-content; max-width: min(19rem, 86vw); white-space: normal; text-align: center; }