/* The listening section. Built on the tokens in site.css.

   Dark, because this is the one part of the page you are meant to stop and
   attend to rather than scan. Everything else on the page is a light
   surface; this reads as a different mode. */

.listen {
  padding: 92px 0;
  background: var(--navy);
  color: var(--white);
}

.listen .premium-heading h2,
.listen .section-kicker { color: var(--white); }
.listen .premium-heading > p { color: var(--on-dark); }
.listen .section-kicker { color: var(--aqua); }

.listen-inner {
  width: min(var(--max), calc(100% - 80px));
  margin-inline: auto;
}

/* ── scenario tabs ─────────────────────────────────────────────────────── */

.listen-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 22px;
}

.listen-tab {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
  color: var(--on-dark);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.listen-tab:hover { background: rgba(255, 255, 255, .1); color: var(--white); }

.listen-tab[aria-selected="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.listen-tab:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.listen-tab .listen-tab-len {
  opacity: .7;
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}

/* ── player ────────────────────────────────────────────────────────────── */

.listen-player {
  background: var(--navy-raised);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 24px;
}

.listen-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 18px;
}

.listen-title { margin: 0; font-size: 19px; color: var(--white); }
.listen-business { margin: 2px 0 0; font-size: 14px; color: var(--on-dark); }

.listen-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.listen-play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

.listen-play:hover { background: var(--blue-hover); }
.listen-play:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.listen-play svg { width: 16px; height: 16px; fill: currentColor; }
.listen-play .icon-pause { display: none; }
.listen[data-playing="true"] .listen-play .icon-pause { display: block; }
.listen[data-playing="true"] .listen-play .icon-play { display: none; }

/* A native range input: it is keyboard-operable, draggable and announced
   correctly by screen readers without a line of code from us. */
.listen-scrub {
  flex: 1 1 auto;
  min-width: 80px;
  accent-color: var(--aqua);
  height: 22px;
  cursor: pointer;
}

.listen-scrub:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }

.listen-time {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--on-dark);
  min-width: 82px;
  text-align: right;
}

/* ── transcript ────────────────────────────────────────────────────────── */

.listen-transcript {
  margin: 20px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .listen-transcript { scroll-behavior: auto; }
}

.listen-turn {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: start;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--on-dark);
  /* Dim, not hidden. The whole transcript stays readable whether or not the
     audio is playing, so a visitor who cannot use sound loses nothing. */
  opacity: .62;
  transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}

.listen-turn:hover { background: rgba(255, 255, 255, .05); opacity: .85; }
.listen-turn.is-past { opacity: .8; }

.listen-turn.is-active {
  opacity: 1;
  background: rgba(0, 200, 240, .1);
  color: var(--white);
}

.listen-who {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: 3px;
  color: var(--control);
}

.listen-turn--agent .listen-who { color: var(--aqua); }
.listen-turn.is-active .listen-who { color: var(--white); }
.listen-said { font-size: 15px; line-height: 1.55; }

.listen-note {
  max-width: 68ch;
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--on-dark);
}

.listen-note strong { color: var(--white); }

/* The element that actually plays. It has no `controls` attribute and is
   removed from the layout entirely, rather than being visually hidden: a
   hidden <audio controls> still takes keyboard focus, which would put a
   sighted keyboard user on an invisible play button. The visible controls
   above are the real ones, and they are ordinary buttons and inputs. */
.listen-audio-el { display: none; }

/* Visible only to assistive technology; carries state changes that are
   otherwise communicated by colour and motion alone. */
.listen-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .listen-inner { width: calc(100% - 40px); }
}

@media (max-width: 680px) {
  .listen { padding: 60px 0; }
  .listen-inner { width: calc(100% - 32px); }
  .listen-player { padding: 18px; border-radius: 14px; }
  .listen-controls { flex-wrap: wrap; }
  .listen-scrub { order: 3; flex-basis: 100%; }
  .listen-time { text-align: left; }
  .listen-turn { grid-template-columns: 1fr; gap: 2px; }
  .listen-transcript { max-height: 260px; }
}

/* ── hero player ────────────────────────────────────────────────────────
   The hero card is dark like the #listen section, so it reuses those
   transcript and control styles directly. Only the frame differs: it is
   shorter, because the hero has to fit beside the headline rather than
   fill a section of its own. */
.hero-player {
  background: var(--navy-raised);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 22px;
  color: var(--white);
}

.hero-player-top { margin-bottom: 16px; }
.hero-player .listen-title { font-size: 18px; }
.hero-player .listen-transcript { max-height: 340px; margin-top: 16px; }
.hero-player .listen-controls { gap: 12px; }

.hero-player-note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--on-dark);
}

.hero-player-note .text-link { color: var(--aqua); }

@media (max-width: 680px) {
  .hero-player { padding: 16px; border-radius: 14px; }
  .hero-player .listen-transcript { max-height: 200px; }
}

/* ── value band ─────────────────────────────────────────────────────────
   The commercial case, placed immediately before the contact form because
   that is the moment it has to do its work. Light-on-dark like the rest of
   the contact section. */
.value-band {
  padding-bottom: 42px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.value-head { max-width: 62ch; }
.value-head h3 { margin: 0 0 12px; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; }
.value-lede { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin: 28px 0 0;
}

.value-item {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}

.value-item dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

.value-item dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--navy);
}

.value-item dd strong { font-weight: 650; }

/* The provenance line is not fine print to be hidden — the figures are the
   category's, not ours, and saying so is the difference between a claim a
   buyer can check and one that loses the deal when they do. */
.value-note {
  margin: 22px 0 0;
  max-width: 70ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--control);
}

@media (max-width: 680px) {
  .value-band { padding-bottom: 32px; margin-bottom: 30px; }
  .value-grid { grid-template-columns: 1fr; gap: 12px; }
}