/* AgenX Voice homepage — the motion homepage (AX-MOCK-013) inside the site shell.
   Launch v1 (The Call). Every class and token is prefixed hm-. The resets below carry no weight (:where), so the
   page's own classes always win over them; the few classes that sit on bare h2/p elements, which the Voice shell
   also styles (.voice-marketing h2/p), are scoped under .hm to outrank those rules; .hm-step h3 and .hm-pillar h3
   match .voice-marketing h3's weight and win because this file loads after voice-marketing.css. The base tokens are
   The Call · v2's light set; dark applies wherever the site is dark (unless the visitor picked light), from the same tokens.
   Reduced motion (html.hm-rm) keeps every beat as a crossfade. */


.hm {
  color-scheme: light;
  /* Light: the page ground and bands are the shell's own (--bg, --band); cards are pure white; lines and fills are
     tints of the ink, so they sit on any ground. */
  --hm-bg: var(--bg, #ffffff);
  --hm-band: var(--band, #f5f7fa);
  --hm-soft: rgba(13, 23, 38, .035);
  --hm-text: #0a0f1a;
  --hm-muted: #455468;
  --hm-muted-2: #5d6b81;
  --hm-faint: #b6bec9;
  --hm-line: rgba(13, 23, 38, .085);
  --hm-line-soft: rgba(13, 23, 38, .055);
  --hm-blue: #1d4ed8;
  --hm-blue-2: #3b6cf6;
  --hm-blue-soft: rgba(29, 78, 216, .06);
  --hm-blue-line: rgba(29, 78, 216, .26);
  --hm-mint: #047857;
  --hm-mint-soft: rgba(4, 120, 87, .07);
  --hm-wave-off: #c9d0d9;
  --hm-surface: #ffffff;
  --hm-bubble: rgba(13, 23, 38, .06);
  --hm-line-strong: rgba(13, 23, 38, .16);
  --hm-blue-fill: #2257e6;
  --hm-mint-line: rgba(4, 120, 87, .22);
  --hm-on-ink: #ffffff;
  --hm-ink-hover: #263244;
  --hm-caller-ink: #3a4556;
  --hm-mark-bg: #eaf4f0;
  --hm-mark-line: rgba(4, 120, 87, .16);
  --hm-live: #c2262f;
  --hm-live-dot: #e5484d;
  --hm-pill-ink: #6b5100;
  --hm-pill-bg: #fff6d1;
  --hm-pill-line: #ecdc9c;
  --hm-tile: #ffffff;
  --hm-tile-line: rgba(13, 23, 38, .08);
  --hm-tile-ink: rgba(13, 23, 38, .1);
  --hm-hit: #f1f5ff;
  --hm-cand: #eef3ff;
  --hm-passage: #f6f8ff;
  --hm-shadow: 0 1px 2px rgba(13, 23, 38, .04), 0 14px 34px -16px rgba(13, 23, 38, .14);
  --hm-shadow-lg: 0 1px 2px rgba(13, 23, 38, .04), 0 2px 8px rgba(13, 23, 38, .03), 0 34px 80px -34px rgba(13, 23, 38, .22);
  /* Blue light under the filled shapes: soft on white, where a navy-strength glow reads as a smudge. */
  --hm-fill-glow: 0 6px 16px -10px rgba(34, 87, 230, .42);
  --hm-fill-glow-lg: 0 10px 24px -14px rgba(34, 87, 230, .45);
  --hm-pick-glow: 0 8px 18px -8px rgba(34, 87, 230, .45);
  --hm-player-glow: 0 1px 2px rgba(13, 23, 38, .04), 0 40px 90px -38px rgba(34, 87, 230, .32);
  --hm-ease: cubic-bezier(.22, 1, .36, 1);
  --hm-radius: 28px;
  --hm-gutter: clamp(16px, 4vw, 40px);
  --hm-maxw: 1180px;
}

/* Dark, wherever the site shell is dark: always, unless the visitor picked light (website v2.47.0). */
:root:not([data-theme="light"]) .hm {
  color-scheme: dark;
  --hm-bg: #07111f;
  --hm-band: #0b1728;
  --hm-soft: #0f1c2f;
  --hm-text: #f3f6fb;
  --hm-muted: #a9b5c8;
  --hm-muted-2: #8594ab;
  --hm-faint: #465570;
  --hm-line: rgba(255, 255, 255, .1);
  --hm-line-soft: rgba(255, 255, 255, .06);
  --hm-blue: #82a6ff;
  --hm-blue-2: #5b84ff;
  --hm-blue-soft: rgba(130, 166, 255, .1);
  --hm-blue-line: rgba(130, 166, 255, .34);
  --hm-mint: #34d399;
  --hm-mint-soft: rgba(52, 211, 153, .1);
  --hm-wave-off: #27344a;
  --hm-surface: #0e1a2c;
  --hm-bubble: #1a2740;
  --hm-line-strong: rgba(255, 255, 255, .2);
  --hm-blue-fill: #2f5fe6;
  --hm-mint-line: rgba(52, 211, 153, .3);
  --hm-on-ink: #0a0f1a;
  --hm-ink-hover: #d9e1ee;
  --hm-caller-ink: #c9d3e2;
  --hm-mark-bg: rgba(52, 211, 153, .08);
  --hm-mark-line: rgba(52, 211, 153, .22);
  --hm-live: #ff7a80;
  --hm-live-dot: #ff5a61;
  --hm-pill-ink: #f5d77a;
  --hm-pill-bg: rgba(245, 215, 122, .1);
  --hm-pill-line: rgba(245, 215, 122, .3);
  --hm-tile: #13213a;
  --hm-tile-line: rgba(255, 255, 255, .08);
  --hm-tile-ink: rgba(255, 255, 255, .14);
  --hm-hit: #16284a;
  --hm-cand: #1a2f57;
  --hm-passage: #0f1d38;
  --hm-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px -14px rgba(0, 0, 0, .6);
  --hm-shadow-lg: 0 1px 2px rgba(0, 0, 0, .3), 0 40px 90px -30px rgba(0, 0, 0, .75);
  --hm-fill-glow: 0 10px 24px -14px rgba(29, 78, 216, .7);
  --hm-fill-glow-lg: 0 12px 28px -14px rgba(29, 78, 216, .75);
  --hm-pick-glow: 0 10px 24px -8px rgba(29, 78, 216, .7);
  --hm-player-glow: 0 1px 2px rgba(16, 24, 40, .04), 0 48px 110px -34px rgba(29, 78, 216, .38);
}

.hm {
  /* The same InterVariable with font-display: optional ("Inter Voice Steady", site.css): if it isn't ready at first
     paint, this view keeps the metric-matched stand-in instead of swapping mid-read, so no headline, call message or
     label rewraps late. The file is cached for the next page. */
  font-family: "Inter Voice Steady", Inter, "Inter Voice Fallback", system-ui, sans-serif;
  color: var(--hm-text); background: var(--hm-bg);
  font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01", "ss03"; overflow-x: clip;
}
:where(.hm) *, :where(.hm) *::before, :where(.hm) *::after { box-sizing: border-box; }
:where(.hm) :is(img, svg) { display: block; }
:where(.hm) :is(p, h1, h2, h3, ol, ul, figure) { margin: 0; }
:where(.hm) :is(ol, ul) { padding: 0; list-style: none; }
:where(.hm) a { color: var(--hm-blue); }
:where(.hm) button { font: inherit; color: inherit; }



/* ——— Buttons ——— */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font-weight: 600; font-size: 15px; letter-spacing: -.005em; line-height: 1;
  padding: 13px 20px; white-space: nowrap;
  transition: background-color .2s var(--hm-ease), transform .2s var(--hm-ease), box-shadow .2s var(--hm-ease), border-color .2s;
}
.hm-btn:hover { text-decoration: none; }
.hm-btn:active { transform: scale(.97); }
.hm-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.hm-btn-sm { padding: 10px 16px; font-size: 14px; }
.hm-btn-lg { padding: 17px 28px; font-size: 16.5px; }
.hm-btn-dark { background: var(--hm-text); color: var(--hm-on-ink); box-shadow: 0 8px 22px -10px rgba(10, 15, 26, .55); }
.hm-btn-dark:hover { background: var(--hm-ink-hover); }
/* hm-line alone measured well under the 3:1 boundary contrast these two need: unlike every other
   card on this page, neither has a fill that differs from what's behind it. The shadow (already
   this page's own convention for a surface-on-similar-background card) plus a stronger border
   fixes it in both themes. */
.hm-btn-light { background: var(--hm-surface); color: var(--hm-text); border-color: var(--hm-line-strong); box-shadow: var(--hm-shadow); }
.hm-btn-light:hover { border-color: var(--hm-line-strong); background: var(--hm-soft); }
.hm-btn-ghost { background: transparent; color: var(--hm-muted); border-color: var(--hm-line-strong); }
.hm-btn-ghost:hover { color: var(--hm-text); background: var(--hm-surface); box-shadow: var(--hm-shadow); }

/* ——— Type ——— */
.hm .hm-eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--hm-blue);
  margin-bottom: 18px;
}
.hm .hm-display {
  margin: 0;
  font-size: clamp(44px, 7.4vw, 100px); line-height: .98; letter-spacing: -.048em; font-weight: 720;
}
.hm-display span { display: block; }
.hm .hm-headline {
  margin: 0;
  font-size: clamp(38px, 5.6vw, 76px); line-height: 1.0; letter-spacing: -.044em; font-weight: 700;
}
.hm-accent { color: var(--hm-blue); }
.hm .hm-lede {
  font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--hm-muted);
  max-width: 40ch; margin: 26px auto 0; letter-spacing: -.011em; text-wrap: pretty;
}
.hm-who {
  display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hm-muted-2); margin-bottom: 6px;
}

:where(.hm) section { position: relative; }
.hm-section-head { text-align: center; max-width: 860px; margin: 0 auto; padding: 0 var(--hm-gutter); }

/* ——— Scroll-in ——— */
.js .hm-fade {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1s var(--hm-ease), transform 1.1s var(--hm-ease);
  transition-delay: var(--hm-d, 0s);
}
.js .hm-fade.hm-in { opacity: 1; transform: none; }

/* ——— 1 · Hero ——— */
.hm-hero {
  text-align: center; padding: calc(88px + clamp(48px, 8vh, 100px)) var(--hm-gutter) clamp(90px, 14vh, 170px);
  overflow: hidden;
}
/* The Voice ribbon behind the headline, intro and buttons (website v2.41.0, Grant's pick; it replaced a soft glow): it
   spans the hero's top, not the player below, and its fade (voice-marketing.css) settles into the page. */
.hm-hero { position: relative; isolation: isolate; }
.hm-hero > .vm-art { inset: 0 0 auto; height: min(720px, 100%); }
/* The Voice pages' fade ends on their band grey; the homepage fades into its own background, white in light. */
.hm-hero > .vm-art::after { background: linear-gradient(180deg, transparent 72%, var(--hm-bg) 100%); }
/* Three lines reserved. Added when the page still swapped fonts late (the English and Spanish intros wrap on opposite
   sides of a line break in the stand-in); the body no longer swaps late, and the reserve keeps the finished layout. */
.hm-hero .hm-lede { max-width: 34ch; min-height: calc(3 * 1.5em); }

.hm-player {
  --hm-p: 0%;
  width: min(760px, 100%); margin: clamp(44px, 7vh, 72px) auto 0; text-align: left;
  background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow-lg); padding: 22px 26px 20px;
  transition: box-shadow .5s var(--hm-ease), transform .5s var(--hm-ease);
}
.hm-player[data-playing] { box-shadow: var(--hm-player-glow); }
.hm-player-head { display: flex; align-items: center; gap: 14px; }
.hm-player-mark {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--hm-mark-bg); border: 1px solid var(--hm-mark-line);
}
.hm-player-title { font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
.hm-player-meta { font-size: 13.5px; color: var(--hm-muted-2); }
.hm-player-status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--hm-muted-2); white-space: nowrap; flex: none;
  padding: 7px 12px; border-radius: 999px; background: var(--hm-soft); border: 1px solid var(--hm-line-soft);
  transition: color .3s, background-color .3s, border-color .3s;
}
.hm-player-status .hm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hm-faint); }
.hm-player[data-playing] .hm-player-status { color: var(--hm-blue); background: var(--hm-blue-soft); border-color: var(--hm-blue-line); }
.hm-player[data-playing] .hm-player-status .hm-dot { background: var(--hm-blue); animation: hm-pulse 1.4s var(--hm-ease) infinite; }
.hm-player[data-done] .hm-player-status { color: var(--hm-mint); background: var(--hm-mint-soft); border-color: var(--hm-mint-line); }
.hm-player[data-done] .hm-player-status .hm-dot { background: var(--hm-mint); }

.hm-wave {
  position: relative; height: 96px; margin: 24px 0 18px; cursor: pointer; border-radius: 12px;
  touch-action: pan-y; /* a vertical swipe on the wave still scrolls the page; a tap seeks */
  display: none; /* No-JS: it has no keyboard/pointer handler yet, so it stays out of the tab order; the native audio controls below are the no-script scrubber. */
}
.js .hm-wave { display: block; }
/* Matches the page's actual focus-ring color (--focus, from the body's voice-marketing scope,
   which already outranks the sitewide button/link rule) so every ring on the page matches. */
.hm-wave:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.hm-wave-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-wave-base rect { fill: var(--hm-wave-off); }
.hm-wave-fill {
  position: absolute; inset: 0;
  clip-path: inset(-4px calc(100% - var(--hm-p)) -4px 0);
}
.hm-wave-fill rect { fill: url(#hm-wave-grad); }
.hm-wave stop:first-child { stop-color: var(--hm-blue-2); }
.hm-wave stop:last-child { stop-color: var(--hm-blue-fill); }
.hm-wave::after {
  content: ""; position: absolute; top: -6px; bottom: -6px; left: var(--hm-p); width: 2px; margin-left: -1px;
  background: var(--hm-blue); border-radius: 2px; opacity: 0; transition: opacity .3s;
}
.hm-player[data-started] .hm-wave::after { opacity: .9; }

.hm-captions { min-height: 108px; }
/* The live line and an invisible copy of each turn share one grid cell, so the captions keep the longest turn's
   height from the first layout (src/samplePlayer.ts) and the controls below never move while the call plays. */
.hm-lines { display: grid; }
.hm-lines > .hm-line { grid-area: 1 / 1; }
.hm-line-size { visibility: hidden; }
/* The speaker label keeps its longest label's height the same way (the agent's label wrapped at 360 px in the fallback font). */
.hm-speakers { display: grid; }
.hm-speakers > .hm-speaker { grid-area: 1 / 1; }
.hm-speaker-size { visibility: hidden; }
.hm-speaker {
  font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-muted-2);
  display: flex; align-items: center; gap: 8px; min-height: 18px;
}
.hm-speaker[data-who="agent"] { color: var(--hm-blue); }
.hm-speaker[data-who="agent"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hm-blue);
}
.hm .hm-line {
  margin-top: 8px; font-size: clamp(19px, 2.1vw, 24px); line-height: 1.38; letter-spacing: -.018em;
  font-weight: 560; color: var(--hm-faint);
}
.hm-line .hm-w { transition: color .22s ease; }
.hm-line .hm-w.hm-on { color: var(--hm-text); }
.hm-line[data-who="caller"] .hm-w.hm-on { color: var(--hm-caller-ink); }

.hm-player-controls { align-items: center; gap: 16px; margin-top: 10px; }
.hm-play {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--hm-text); color: var(--hm-on-ink); display: grid; place-items: center;
  box-shadow: 0 10px 24px -10px rgba(10, 15, 26, .6);
  transition: transform .2s var(--hm-ease), background-color .2s;
}
.hm-play:hover { background: var(--hm-blue); }
.hm-play:active { transform: scale(.94); }
.hm-play svg { width: 24px; height: 24px; fill: currentColor; grid-area: 1 / 1; transition: opacity .2s, transform .25s var(--hm-ease); }
.hm-play .hm-i-play { transform: translateX(1px); }
.hm-play .hm-i-pause { opacity: 0; transform: scale(.6); }
.hm-player[data-playing] .hm-play .hm-i-play { opacity: 0; transform: scale(.6); }
.hm-player[data-playing] .hm-play .hm-i-pause { opacity: 1; transform: none; }
.hm-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; }
.hm-time-total { color: var(--hm-muted-2); font-weight: 500; }
.hm-player-hint { margin-left: auto; font-size: 13px; color: var(--hm-muted-2); }

/* Moments to listen for (a call's optional beats, How it works): a numbered pin over the waveform with a dashed
   line down through it, and a row of buttons under the controls. Each lights once the call reaches it. */
.hm-pins { position: absolute; inset: 0; pointer-events: none; }
.hm-pin {
  position: absolute; top: -21px; z-index: 1; width: 19px; height: 19px; margin-left: -9.5px; border-radius: 50%;
  display: grid; place-items: center; background: var(--hm-surface); border: 1.5px solid var(--hm-blue); color: var(--hm-blue);
  font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1; transition: background-color .2s, color .2s;
}
.hm-pin::after { content: ""; position: absolute; left: 50%; top: 100%; height: calc(var(--hm-wave-h, 96px) + 3px); border-left: 1px dashed var(--hm-blue-line); }
.hm-pin.hm-on { background: var(--hm-blue); color: var(--hm-surface); }
.hm-beats { display: flex; align-items: center; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hm-line-soft); }
.hm .hm-beats-k { flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-muted-2); }
.hm-beats ol { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-beat {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 12px 5px 5px; cursor: pointer; text-align: left;
  border: 1px solid var(--hm-line-strong); border-radius: 999px; background: var(--hm-surface);
  font-size: 13.5px; font-weight: 560; letter-spacing: -.005em; line-height: 1.3; color: var(--hm-text);
  transition: border-color .2s, background-color .2s;
}
.hm-beat b {
  flex: none; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--hm-blue); background: var(--hm-blue-soft); border: 1px solid var(--hm-blue-line); transition: background-color .2s, color .2s;
}
.hm-beat-t { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; color: var(--hm-muted-2); font-variant-numeric: tabular-nums; }
.hm-beat:hover { border-color: var(--hm-blue-line); }
.hm-beat:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* A moment not reached yet dims its outline and badge only, so its text keeps full contrast. */
.hm-player[data-started] .hm-beat:not(.hm-on) { border-color: var(--hm-line); }
.hm-player[data-started] .hm-beat:not(.hm-on) b { background: transparent; border-color: var(--hm-line-strong); }
.hm-beat.hm-on b { background: var(--hm-blue); color: var(--hm-surface); border-color: var(--hm-blue); }
.hm-beat.hm-now { border-color: var(--hm-blue); background: var(--hm-blue-soft); }
html:not(.js) .hm-beats { display: none; }

.hm-reveal {
  margin-top: 56px;
  transition: opacity 1.1s var(--hm-ease), transform 1.2s var(--hm-ease);
  pointer-events: none;
}
/* No-JS: nothing plays it in, so "That was AI." simply reads under the player. */
.js .hm-reveal { opacity: 0; transform: translateY(20px) scale(.98); }
.hm-reveal.hm-show { opacity: 1; transform: none; }
.hm-reveal-big {
  font-size: clamp(40px, 5.4vw, 68px); font-weight: 740; letter-spacing: -.045em; line-height: 1;
  background: linear-gradient(100deg, var(--hm-text) 20%, var(--hm-blue) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hm .hm-reveal-sub { margin-top: 14px; font-size: clamp(17px, 1.5vw, 20px); color: var(--hm-muted); letter-spacing: -.01em; }

/* ——— 2 · The call ——— */
.hm-story { padding: clamp(96px, 14vh, 170px) 0 clamp(60px, 10vh, 120px); background: linear-gradient(180deg, var(--hm-bg) 0%, var(--hm-band) 14%, var(--hm-band) 86%, var(--hm-bg) 100%); }
.hm-story-grid {
  max-width: var(--hm-maxw); margin: clamp(40px, 8vh, 90px) auto 0; padding: 0 var(--hm-gutter);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px);
}
.hm-step {
  min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
  transition: opacity .6s var(--hm-ease), transform .6s var(--hm-ease);
}
/* No-JS: every step reads at full opacity (there is no scroll-driven highlight to dim it toward). */
.js .hm-step { opacity: .22; transform: translateX(-6px); }
.hm-step.hm-active { opacity: 1; transform: none; }
.hm-step-num { font-size: 14px; font-weight: 700; color: var(--hm-blue); font-variant-numeric: tabular-nums; margin-bottom: 14px; letter-spacing: .04em; }
.hm-step h3 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; }
.hm-step p:not(.hm-step-num) { margin-top: 16px; color: var(--hm-muted); font-size: 18px; max-width: 34ch; }

.hm-story-stage { position: relative; }
.hm-stage {
  position: sticky; top: 4vh; height: 92vh;
  display: flex; flex-direction: column; justify-content: center;
}
/* Behaves like a real chat: fixed height, newest message anchored at the bottom, older ones fade off the top. */
.hm-console {
  position: relative; background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: 26px;
  box-shadow: var(--hm-shadow-lg); width: min(470px, 100%); overflow: hidden;
  flex: 0 1 auto; height: min(640px, calc(100% - 52px)); display: flex; flex-direction: column;
}
.hm-console-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--hm-line-soft); font-size: 13.5px;
}
.hm-console-live {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--hm-muted-2);
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
}
.hm-console-live .hm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hm-faint); transition: background-color .3s; }
.hm-stage:not([data-at="0"]) .hm-console-live { color: var(--hm-live); }
.hm-stage:not([data-at="0"]) .hm-console-live .hm-dot { background: var(--hm-live-dot); animation: hm-pulse 1.4s var(--hm-ease) infinite; }
.hm-console-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-left: 6px; }
.hm-console-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--hm-muted-2); font-weight: 600; }
.hm-console-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0 20px 20px;
  display: flex; flex-direction: column; justify-content: flex-end;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px);
  mask-image: linear-gradient(180deg, transparent 0, #000 44px);
}
/* Every message keeps its full height inside the track, and the script slides the whole track with a transform so
   the newest shown message sits at the bottom and older ones rise under the top fade. A transform move isn't a
   layout shift, so the call reveals without shifting anything. Without script the track rests at the bottom with
   the finished call showing. */
.hm-console-track { position: relative; display: flex; flex-direction: column; }
.js .hm-console-track { gap: 16px; transition: transform .7s var(--hm-ease); } /* without script the finished call packs tight, so it fits */
.hm-console-track .hm-msg, .hm-console-track .hm-evt { flex: none; }
.hm-console-track .hm-msg.hm-caller, .hm-console-track .hm-evt:not(.hm-done) { align-self: flex-start; }
.hm-console-track .hm-msg.hm-agent, .hm-console-track .hm-evt.hm-done { align-self: flex-end; }
.hm-console-foot {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-top: 1px solid var(--hm-line-soft); background: var(--hm-soft); font-size: 13px; color: var(--hm-muted-2);
}
.hm-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.hm-eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--hm-blue); opacity: .55; }
.hm-stage[data-speaking] .hm-eq i { animation: hm-eq 1s var(--hm-ease) infinite; opacity: 1; }
.hm-eq i:nth-child(2) { animation-delay: -.2s; } .hm-eq i:nth-child(3) { animation-delay: -.5s; }
.hm-eq i:nth-child(4) { animation-delay: -.1s; } .hm-eq i:nth-child(5) { animation-delay: -.7s; }
.hm-eq i:nth-child(6) { animation-delay: -.35s; } .hm-eq i:nth-child(7) { animation-delay: -.6s; }

/* Messages (console + restraint) */
.hm-msg { max-width: 86%; }
.hm-msg p {
  padding: 12px 16px; border-radius: 20px; font-size: 15.5px; line-height: 1.42; letter-spacing: -.008em;
}
.hm-msg.hm-caller p { background: var(--hm-bubble); color: var(--hm-text); border-bottom-left-radius: 6px; }
.hm-msg.hm-agent { margin-left: auto; text-align: left; }
.hm-msg.hm-agent .hm-who { text-align: right; color: var(--hm-blue); }
.hm-msg.hm-agent p { background: var(--hm-blue-fill); color: #fff; border-bottom-right-radius: 6px; box-shadow: var(--hm-fill-glow); }

.hm-console-track [data-show] { transform-origin: left bottom; transition: opacity .5s var(--hm-ease), transform .7s var(--hm-ease); }
.hm-console-track .hm-agent[data-show] { transform-origin: right bottom; }
/* No-JS: nothing reveals the messages, so every one shows (the finished call). */
.js .hm-console-track [data-show] { opacity: 0; transform: translateY(10px) scale(.985); overflow: hidden; } /* also clips the agent bubbles' glow, as before */
.js .hm-console-track [data-show].hm-show { opacity: 1; transform: none; }

.hm-evt {
  display: inline-flex !important; align-items: center; gap: 9px; width: fit-content;
  font-size: 13px; font-weight: 600; color: var(--hm-muted); padding: 8px 13px 8px 10px; border-radius: 999px;
  background: var(--hm-surface); border: 1px solid var(--hm-line);
}
.hm-evt-icon { width: 18px; height: 18px; display: grid; place-items: center; }
.hm-evt-icon svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.hm-evt .hm-spin { stroke: var(--hm-blue); animation: hm-spin .9s linear infinite; }
.hm-evt .hm-tick { stroke: var(--hm-mint); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--hm-ease); }
.hm-evt.hm-resolved, .hm-evt.hm-done { color: var(--hm-mint); background: var(--hm-mint-soft); border-color: var(--hm-mint-line); }
.hm-evt.hm-resolved .hm-spin { display: none; }
.hm-evt.hm-resolved .hm-tick, .hm-evt.hm-done .hm-tick { opacity: 1; transform: none; }

/* Phone */
.hm-phone {
  position: absolute; right: -64px; bottom: 74px; width: 236px; aspect-ratio: 9 / 19.2;
  border-radius: 46px; padding: 9px; background: #0b0f17;
  box-shadow: 0 0 0 1.5px #2b3140 inset, 0 50px 90px -30px rgba(10, 15, 26, .55), 0 20px 40px -20px rgba(10, 15, 26, .4);
  transition: opacity .8s var(--hm-ease), transform 1.1s var(--hm-ease);
  pointer-events: none;
}
/* No-JS: the phone never gets its .hm-show class, so it defaults to visible (the finished text),
   at rest with no rotation rather than replaying the JS-only "incoming" pose. */
.js .hm-phone { opacity: 0; transform: translateY(70px) rotate(4deg) scale(.96); }
.hm-phone.hm-show { opacity: 1; transform: rotate(-3deg); }
.hm-phone-screen {
  position: relative; height: 100%; border-radius: 38px; overflow: hidden; padding: 44px 12px 0; text-align: center;
  background:
    radial-gradient(120% 70% at 20% 0%, #9fb8ff 0%, rgba(159, 184, 255, 0) 55%),
    radial-gradient(90% 60% at 100% 100%, #7c5cff 0%, rgba(124, 92, 255, 0) 60%),
    linear-gradient(170deg, #4d6fe0 0%, #3b3fb7 55%, #25206b 100%);
  color: #fff;
}
.hm-phone-island { position: absolute; top: 10px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 12px; background: #000; }
.hm-phone-date { font-size: 12.5px; font-weight: 600; opacity: .88; }
.hm .hm-phone-time { font-size: 62px; font-weight: 600; letter-spacing: -.04em; line-height: 1.02; margin-top: 2px; }
.hm-notif {
  margin-top: 26px; display: flex; gap: 9px; text-align: left; padding: 11px 11px 12px;
  border-radius: 20px; background: rgba(255, 255, 255, .78); color: #0a0f1a;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 10px 30px -12px rgba(10, 10, 40, .45);
  transition: opacity .6s var(--hm-ease) .55s, transform .8s var(--hm-ease) .55s;
}
/* No-JS: the phone shows the finished text (see .js .hm-phone). */
.js .hm-notif { opacity: 0; transform: translateY(-14px) scale(.96); }
.hm-phone.hm-show .hm-notif { opacity: 1; transform: none; }
.hm-notif-app { flex: none; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(180deg, #5ee174, #28c043); display: grid; place-items: center; }
.hm-notif-app svg { width: 22px; height: 22px; }
.hm-notif-top { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; font-weight: 650; }
.hm-notif-now { color: #475569; font-weight: 500; } /* darker than the typical iOS gray: measured under 4.5:1 on this card at #6b7280 */
.hm .hm-notif-text { font-size: 12.5px; line-height: 1.34; margin-top: 2px; color: #1f2937; }

.hm .hm-stage-note { margin-top: 18px; font-size: 13px; color: var(--hm-muted-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 470px; }
.hm-pill {
  display: inline-flex; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--hm-pill-ink); background: var(--hm-pill-bg); border: 1px solid var(--hm-pill-line); border-radius: 999px; padding: 4px 9px;
}

/* ——— 3 · How it knows ——— */
.hm-knowledge { padding: clamp(96px, 14vh, 170px) 0; }
.hm-kx {
  max-width: var(--hm-maxw); margin: clamp(44px, 8vh, 80px) auto 0; padding: clamp(20px, 3vw, 34px);
  background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: 32px; box-shadow: var(--hm-shadow-lg);
  margin-inline: max(var(--hm-gutter), calc((100% - var(--hm-maxw)) / 2));
}
.hm-kx-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hm-kx-question {
  font-size: clamp(18px, 1.9vw, 22px); font-weight: 600; letter-spacing: -.015em;
  background: var(--hm-bubble); padding: 12px 18px; border-radius: 20px; border-bottom-left-radius: 6px;
}
.hm-kx-question .hm-who { display: inline; margin: 0 10px 0 0; }
.hm-kx-phases { display: flex; gap: 6px; margin-left: auto; counter-reset: ph; }
.hm-kx-phases li {
  counter-increment: ph; font-size: 13px; font-weight: 600; color: var(--hm-muted-2);
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hm-line); background: var(--hm-surface);
  transition: color .3s, background-color .3s, border-color .3s;
}
.hm-kx-phases li::before { content: counter(ph) " · "; opacity: .6; }
.hm-kx[data-phase="1"] [data-p="1"], .hm-kx[data-phase="2"] [data-p="2"], .hm-kx[data-phase="3"] [data-p="3"] {
  color: var(--hm-blue); background: var(--hm-blue-soft); border-color: var(--hm-blue-line);
}
.hm-kx-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 26px; align-items: stretch; }

.hm-kx-field {
  position: relative; display: grid; grid-template-columns: repeat(14, 1fr); gap: 7px;
  padding: 16px; border-radius: 20px; background: var(--hm-band); border: 1px solid var(--hm-line-soft); overflow: hidden;
  align-content: start;
}
.hm-kx-field::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%; left: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(59, 108, 246, 0), rgba(59, 108, 246, .16) 50%, rgba(59, 108, 246, 0));
  opacity: 0;
  /* Same travel as the old left:-40%->106% sweep, expressed as transform (translateX is a
     percentage of THIS element's own 34%-of-parent width, hence the /34*100 scaling) so the
     animation is compositor-only and never registers as layout shift. */
  transform: translateX(-117.65%);
}
.hm-kx[data-phase="1"] .hm-kx-field::after { opacity: 1; animation: hm-scan 1.5s var(--hm-ease) 2; }
.hm-tile {
  aspect-ratio: 3 / 4; border-radius: 5px; background: var(--hm-tile); border: 1px solid var(--hm-tile-line);
  position: relative; overflow: hidden;
  transition: opacity .6s var(--hm-ease), transform .6s var(--hm-ease), border-color .4s, box-shadow .4s, background-color .4s;
}
.hm-tile::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 20%; height: 42%;
  background: repeating-linear-gradient(180deg, var(--hm-tile-ink) 0 2px, transparent 2px 6px);
  border-radius: 1px;
}
.hm-tile.hm-hit { border-color: var(--hm-blue-line); background: var(--hm-hit); }
.hm-kx[data-phase="2"] .hm-tile, .hm-kx[data-phase="3"] .hm-tile { opacity: .16; }
.hm-kx[data-phase="2"] .hm-tile.hm-cand { opacity: 1; border-color: var(--hm-blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, .14); background: var(--hm-cand); }
.hm-kx[data-phase="3"] .hm-tile.hm-pick {
  opacity: 1; transform: scale(1.35); z-index: 2; border-color: var(--hm-blue); background: var(--hm-blue-fill);
  box-shadow: var(--hm-pick-glow);
}
.hm-kx[data-phase="3"] .hm-tile.hm-pick::before { background: repeating-linear-gradient(180deg, rgba(255,255,255,.8) 0 2px, transparent 2px 6px); }

.hm-kx-out { display: flex; flex-direction: column; gap: 14px; }
.hm-kx-sources { display: flex; flex-wrap: wrap; gap: 7px; }
.hm-kx-sources span {
  font-size: 12.5px; font-weight: 600; color: var(--hm-muted); padding: 6px 11px; border-radius: 999px;
  background: var(--hm-soft); border: 1px solid var(--hm-line-soft);
}
.hm-kx-status {
  display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--hm-muted-2);
  padding: 12px 14px; border-radius: 14px; background: var(--hm-soft); border: 1px dashed var(--hm-line);
  transition: color .3s, background-color .3s, border-color .3s;
}
/* All four status phrases share one grid cell (the three not showing are invisible sizers), so the box is always as
   tall as the longest phrase at this width, in either language: a phrase change never moves what's below the card. */
.hm-kx-status-text { flex: 1 1 auto; min-width: 0; display: grid; }
.hm-kx-status-text > * { grid-area: 1 / 1; }
.hm-kx-status-text > [data-hm-kx-status] { align-self: center; }
.hm-kx-status-sizer { visibility: hidden; }
.hm-kx-status-icon { width: 18px; height: 18px; display: grid; place-items: center; flex: none; }
.hm-kx-status-icon svg { width: 18px; height: 18px; grid-area: 1 / 1; opacity: 0; transition: opacity .3s; }
.hm-kx-status .hm-spin { stroke: var(--hm-blue); animation: hm-spin .9s linear infinite; }
.hm-kx-status .hm-tick { stroke: var(--hm-mint); }
.hm-kx[data-phase="1"] .hm-kx-status, .hm-kx[data-phase="2"] .hm-kx-status { color: var(--hm-blue); background: var(--hm-blue-soft); border: 1px solid var(--hm-blue-line); }
.hm-kx[data-phase="1"] .hm-kx-status .hm-spin, .hm-kx[data-phase="2"] .hm-kx-status .hm-spin { opacity: 1; }
.hm-kx[data-phase="3"] .hm-kx-status { color: var(--hm-mint); background: var(--hm-mint-soft); border: 1px solid var(--hm-mint-line); }
.hm-kx[data-phase="3"] .hm-kx-status .hm-tick { opacity: 1; }
.hm-rm .hm-kx-status .hm-spin { animation: none; }
.hm-kx-passage, .hm-kx-answer {
  transition: opacity .7s var(--hm-ease), transform .8s var(--hm-ease);
}
/* No-JS: phase never advances, so the answer reads at rest instead of staying invisible. */
.js .hm-kx-passage, .js .hm-kx-answer { opacity: 0; transform: translateY(14px); }
.hm-kx[data-phase="3"] .hm-kx-passage { opacity: 1; transform: none; }
.hm-kx[data-phase="3"] .hm-kx-answer { opacity: 1; transform: none; transition-delay: .55s; }
.hm-kx-passage {
  border: 1px solid var(--hm-blue-line); background: var(--hm-passage); border-radius: 18px; padding: 16px 18px;
}
.hm-kx-path { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--hm-blue); }
.hm .hm-kx-text { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--hm-text); }
.hm-kx-text mark { background: rgba(59, 108, 246, .16); color: inherit; border-radius: 4px; padding: 0 3px; }
.hm-kx-answer { margin-left: 8%; }
.hm-kx-answer .hm-who { text-align: right; color: var(--hm-blue); }
.hm-kx-answer p {
  background: var(--hm-blue-fill); color: #fff; padding: 14px 18px; border-radius: 20px; border-bottom-right-radius: 6px;
  font-size: 16px; line-height: 1.42; box-shadow: var(--hm-fill-glow-lg);
}
.hm-kx-cite { display: block; text-align: right; margin-top: 8px; font-size: 12.5px; color: var(--hm-muted-2); font-weight: 550; }
.hm-kx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.hm-kx-caption { font-size: 13px; color: var(--hm-muted-2); }

.hm-triad {
  max-width: var(--hm-maxw); margin: clamp(56px, 9vh, 96px) auto 0; padding: 0 var(--hm-gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px);
}
.hm-triad li { border-top: 1px solid var(--hm-line); padding-top: 22px; }
.hm-triad-big { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.hm-triad p:not(.hm-triad-big) { margin-top: 8px; color: var(--hm-muted); }
.hm-triad li:nth-child(2) { --hm-d: .08s; } .hm-triad li:nth-child(3) { --hm-d: .16s; }

/* ——— 4 · Restraint ——— */
.hm-restraint { padding: clamp(96px, 14vh, 170px) 0; background: var(--hm-band); }
.hm-exchanges {
  max-width: 980px; margin: clamp(44px, 8vh, 80px) auto 0; padding: 0 var(--hm-gutter);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 28px);
}
.hm-exchange {
  background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: 26px; padding: 24px; box-shadow: var(--hm-shadow);
  display: flex; flex-direction: column; gap: 14px;
}
.hm-exchange:nth-child(2) { --hm-d: .1s; }
.hm-exchange-tag { font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--hm-muted-2); }
.hm-rules {
  max-width: 980px; margin: 40px auto 0; padding: 0 var(--hm-gutter);
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 30px;
}
.hm-rules li { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15.5px; }
.hm-rules li:nth-child(2) { --hm-d: .08s; } .hm-rules li:nth-child(3) { --hm-d: .16s; }
.hm-rule-mark {
  width: 20px; height: 20px; border-radius: 50%; background: var(--hm-mint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23000'/%3E%3Cpath d='M5.8 10.4l2.7 2.7 5.7-6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Cpath d='M5.8 10.4l2.7 2.7 5.7-6' stroke='%23000' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='10' cy='10' r='10' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ——— 5 · Different ——— */
.hm-different { padding: clamp(96px, 14vh, 170px) 0 clamp(60px, 10vh, 110px); }
.hm-pillars {
  max-width: var(--hm-maxw); margin: clamp(44px, 8vh, 80px) auto 0; padding: 0 var(--hm-gutter);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px);
}
.hm-pillar {
  border: 1px solid var(--hm-line); border-radius: 26px; padding: 30px 28px 32px; background: var(--hm-surface);
  transition: transform .4s var(--hm-ease), box-shadow .4s var(--hm-ease), border-color .4s;
}
.hm-pillar:hover { transform: translateY(-4px); box-shadow: var(--hm-shadow); border-color: var(--hm-line-strong); }
.hm-pillar:nth-child(2) { --hm-d: .08s; } .hm-pillar:nth-child(3) { --hm-d: .16s; }
.hm-pillar-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--hm-blue-soft); border: 1px solid rgba(29, 78, 216, .16);
}
.hm-pillar-icon svg { width: 24px; height: 24px; stroke: var(--hm-blue); }
.hm-pillar h3 { margin-top: 22px; font-size: 21px; font-weight: 700; letter-spacing: -.025em; }
.hm-pillar p { margin-top: 10px; color: var(--hm-muted); font-size: 16px; }

/* ——— Close ——— */
.hm-close { text-align: center; padding: clamp(48px, 7vh, 90px) var(--hm-gutter) clamp(96px, 14vh, 170px); overflow: hidden; }
.hm-close::before {
  content: ""; position: absolute; inset: 10% -10% auto; height: 600px; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 55% at 50% 40%, rgba(59, 108, 246, .09) 0%, transparent 70%);
}
.hm-close .hm-display { font-size: clamp(40px, 6.2vw, 84px); }
.hm-close .hm-lede { max-width: 38ch; }
.hm-cta-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hm .hm-fine { margin-top: 22px; font-size: 13px; color: var(--hm-muted-2); }


/* ——— Motion ——— */
@keyframes hm-pulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 4px transparent; opacity: .55; } }
@keyframes hm-spin { to { transform: rotate(360deg); } }
@keyframes hm-eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@keyframes hm-scan { from { transform: translateX(-117.65%); } to { transform: translateX(311.76%); } }

/* ——— Responsive ——— */
@media (max-width: 980px) {
  .hm-story-grid { grid-template-columns: 1fr; }
  .hm-story-stage { order: -1; position: sticky; top: 0; z-index: 5; height: 0; overflow: visible; }
  .hm-stage {
    position: relative; top: 0; height: auto; padding: 12px 0 22px;
    background: linear-gradient(180deg, var(--hm-band) 0, var(--hm-band) calc(100% - 22px), transparent 100%);
  }
  .hm-story-grid { position: relative; }
  .hm-story-steps { padding-top: 76vh; }
  .hm-step, .js .hm-step { min-height: 70vh; justify-content: flex-end; padding-bottom: 8vh; transform: none; }
  .hm-console { margin: 0 auto; height: min(52vh, 460px); }
  .hm-console-body { padding: 0 16px 16px; }
  .hm-msg p { font-size: 14.5px; padding: 10px 14px; }
  .hm-phone { width: 196px; right: -2px; bottom: 104px; border-radius: 36px; padding: 7px; }
  .hm-phone-screen { border-radius: 30px; padding: 32px 8px 0; }
  .hm-phone-date { font-size: 10.5px; }
  .hm .hm-phone-time { font-size: 46px; }
  .hm-phone-island { width: 58px; height: 17px; margin-left: -29px; top: 8px; }
  .hm-notif { margin-top: 16px; padding: 8px 9px; gap: 7px; border-radius: 16px; }
  .hm-notif-app { width: 24px; height: 24px; border-radius: 7px; }
  .hm-notif-app svg { width: 15px; height: 15px; }
  .hm-notif-text, .hm-notif-top { font-size: 10.5px; }
  .hm .hm-stage-note { justify-content: center; text-align: center; font-size: 12px; margin: 14px auto 0; }
  .hm-kx-main { grid-template-columns: 1fr; }
  .hm-kx-phases { margin-left: 0; }
  .hm-triad, .hm-pillars { grid-template-columns: 1fr; }
  .hm-exchanges { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hm-hero { padding-top: calc(72px + 40px); }
}
@media (max-width: 560px) {
  .hm-player { padding: 18px 16px 16px; border-radius: 22px; }
  .hm-player-meta { display: none; }
  /* A scripted call keeps its label on phones, on its own row under the head: it says what the audio is. */
  .hm-player[data-hm-disclose] .hm-player-head { display: grid; grid-template-columns: auto 1fr auto; column-gap: 14px; row-gap: 10px; }
  .hm-player[data-hm-disclose] .hm-player-id { display: contents; }
  .hm-player[data-hm-disclose] .hm-player-meta { display: block; grid-column: 1 / -1; grid-row: 2; font-size: 12.5px; line-height: 1.35; }
  .hm-player-hint { display: none; }
  .hm-wave { height: 76px; --hm-wave-h: 76px; }
  .hm-beats { flex-direction: column; align-items: flex-start; }
  .hm-beat { min-height: 44px; }
  /* Spanish phase labels ("Responder") run longer than English ("Answer") and wrap to two
     lines inside the chip at this width without the extra room this tightened padding gives. */
  .hm-kx-phases li { padding: 7px 8px; font-size: 12.5px; }
  .hm-kx-field { grid-template-columns: repeat(9, 1fr); gap: 5px; padding: 12px; }
  .hm-kx-field .hm-tile:nth-child(n + 64) { display: none; } /* seven full rows; every candidate is inside them */
  .hm-kx-question { font-size: 17px; }
  .hm-console-head { padding: 12px 14px; }
  .hm-console-who { font-size: 12.5px; }
  .hm-btn-lg { width: 100%; }
}
/* Phones: a labeled player's status goes under its label, so the business name keeps its line. */
@media (max-width: 480px) {
  .hm-player[data-hm-disclose] .hm-player-head { grid-template-columns: auto minmax(0, 1fr); }
  .hm-player[data-hm-disclose] .hm-player-status { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-left: 0; }
}

/* Reduced motion: every beat still happens, as a crossfade. No slides, zooms, sweeps or loops. */
.hm-rm .hm-fade, .hm-rm .hm-reveal, .hm-rm .hm-console-body [data-show], .hm-rm .hm-kx-passage, .hm-rm .hm-kx-answer, .hm-rm .hm-notif, .hm-rm .hm-step,
.hm-rm .hm-evt .hm-tick, .hm-rm .hm-pillar {
  transform: none !important;
}
/* The play and pause icons crossfade without scaling: each keeps its resting transform while it fades. */
.hm-rm .hm-play svg { transition: opacity .2s; }
.hm-rm .hm-play .hm-i-pause { transform: none; }
.hm-rm .hm-player[data-playing] .hm-play .hm-i-play { transform: translateX(1px); }
.hm-rm .hm-fade, .hm-rm .hm-reveal { transition: opacity .6s ease !important; }
.hm-rm .hm-phone { transform: rotate(-3deg) !important; transition: opacity .6s ease; }
.hm-rm .hm-kx[data-phase="3"] .hm-tile.hm-pick { transform: none; }
.hm-rm .hm-kx-field::after { display: none; }
.hm-rm .hm-console-track { transition: none; } /* the stack steps; the messages crossfade */
.hm-rm .hm-eq i, .hm-rm .hm-dot, .hm-rm .hm-evt .hm-spin { animation: none !important; }
.hm-rm .hm-btn:active, .hm-rm .hm-play:active { transform: none; }

/* ——— Site integration ——— */
.hm-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hm-hero-actions { margin-top: 30px; display: flex; justify-content: center; }
.hm-hero-actions .hero-actions { justify-content: center; }
.hm-player-mark img { width: 28px; height: 28px; }
/* Native controls are the no-script path; the custom player replaces them once the script runs. */
.hm-player audio { width: 100%; margin-top: 14px; }
.js .hm-player audio { display: none; }
.hm-player-controls { display: none; }
.js .hm-player-controls { display: flex; }
.hm-transcript { margin-top: 14px; border-top: 1px solid var(--hm-line-soft); padding-top: 12px; font-size: 14.5px; }
.hm-transcript summary { cursor: pointer; font-weight: 600; color: var(--hm-muted); }
.hm-transcript dl { margin: 12px 0 0; display: grid; gap: 10px; }
.hm-transcript dt { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-muted-2); }
.hm-transcript dd { margin: 2px 0 0; color: var(--hm-text); }
.hm-transcript-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--hm-muted); }