/* =========================================================
   CallCooper — light + warm (bland-inspired)
   Rebrand via :root tokens.
   ========================================================= */

:root {
  /* Canvas */
  --bg: #fbf9f6;            /* warm off-white */
  --bg-2: #f4efe8;          /* deeper warm */
  --surface: #ffffff;       /* cards */
  --surface-2: #f7f2ec;     /* raised warm */
  --line: rgba(26,20,14,0.09);
  --line-2: rgba(26,20,14,0.16);

  /* Text */
  --text: #1a140e;          /* warm near-black */
  --muted: #6f655b;         /* warm gray */
  --muted-2: #a2988d;

  /* Brand — warm (toned down / softer) */
  --primary: #e56a34;       /* softer warm orange CTA */
  --primary-600: #cf5a26;
  --accent: #ee8a5c;        /* soft amber */
  --accent-2: #e0748c;      /* muted coral/rose */
  --amber: #e6a44a;
  --glow-1: rgba(229,106,52,0.26);   /* orange glow (softer) */
  --glow-2: rgba(224,116,140,0.18);  /* rose glow (softer) */

  --grad: linear-gradient(120deg, #ef8a5a 0%, #e0748c 100%);
  --grad-soft: linear-gradient(120deg, rgba(229,106,52,0.11), rgba(224,116,140,0.08));

  /* Type */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Plus Jakarta Sans', var(--font-body);
  /* Apple devices resolve -apple-system to real SF Pro; elsewhere Inter is the closest stand-in */
  --font-imsg: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;

  /* iMessage chat */
  --imsg-sent: #0a7cff;
  --imsg-recv: #e5e5ea;
  --imsg-meta: #8e8e93;

  /* Radius + shadow */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-sm: 0 1px 2px rgba(60,30,12,0.06), 0 2px 6px rgba(60,30,12,0.05);
  --shadow: 0 20px 50px rgba(60,32,12,0.12);
  --shadow-primary: 0 12px 34px rgba(255,106,43,0.34);

  --maxw: 1140px;
  --nav-h: 72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* A button that has to sit in running text or a link list — it's an action,
   not navigation, so it stays a <button> and borrows the link styling. */
.linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; }

/* Focus: only show a ring for keyboard users — no stuck outline after a mouse click */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
h1,h2,h3,h4 {
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  font-weight: 800;
}
p { margin: 0; }

/* ---------- Ambient warm glow ---------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 40% at 50% -6%, rgba(238,138,92,0.09), transparent 70%),
    radial-gradient(40% 30% at 88% 6%, rgba(224,116,140,0.055), transparent 70%);
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding: 104px 0; }
.section--tight { padding: 72px 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary);
}
.eyebrow::before { content:""; width: 18px; height: 1.5px; background: var(--grad); border-radius: 2px; }
.eyebrow.center { justify-content: center; display: flex; }
.eyebrow + h2 { margin-top: 16px; }

.section-head { max-width: 660px; margin-bottom: 60px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.8vw, 44px); margin-top: 18px; }
.section-head p { margin-top: 20px; font-size: 18px; color: var(--muted); }

.grad-text {
  background: linear-gradient(100deg, #dd6d40, #d76a83 58%, #cf6a8c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-primary); }
.btn--primary:hover { background: var(--primary-600); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,106,43,0.44); }
.btn--ghost { background: #fff; color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); background: #fff; box-shadow: var(--shadow-sm); }
.btn--lg { padding: 16px 30px; font-size: 16px; }
.btn--talk { position: relative; }
.btn--talk .mic-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 0 rgba(255,106,43,0.6); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,106,43,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(255,106,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,106,43,0); }
}
/* On the solid primary button the dot must read white, not orange-on-orange */
.btn--primary.btn--talk .mic-dot { background: #fff; animation: pulseWhite 2s infinite; }
@keyframes pulseWhite {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(251,249,246,0.72);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav.scrolled { border-color: var(--line); background: rgba(251,249,246,0.9); box-shadow: 0 4px 20px rgba(60,32,12,0.05); }
.nav .container { display: flex; align-items: center; justify-content: space-between; }

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: -0.035em; color: var(--text);
}
/* Signal C — the mark is defined once as an SVG <symbol> at the top of each
   page and referenced here with <use>, so nav and footer stay in sync. */
.brand__mark { width: 26px; height: 26px; flex: none; display: block; }
/* The lockup is mark + "CallCooper" only. ".ai" is the domain, not the logo —
   it stays in the title, og:site_name and the copyright line, not here. Orange
   is reserved for things you can click. */
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__links a { font-size: 14.5px; color: var(--muted); font-weight: 500; transition: color .15s ease; }
.nav__links a:hover { color: var(--text); }
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__toggle { display: none; background: none; border: none; width: 42px; height: 42px; border-radius: 10px; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content:""; display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px;
  position: relative; margin-inline: auto; transition: transform .2s ease;
}
.nav__toggle span::before { position: absolute; top: -7px; }
.nav__toggle span::after { position: absolute; top: 7px; }

/* ---------- Hero (centered, waveform centerpiece) ---------- */
.hero { position: relative; padding: 60px 0 96px; text-align: center; overflow: hidden; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--muted);
  background: #fff; border: 1px solid var(--line); padding: 7px 15px 7px 11px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.hero__badge .live { display: inline-flex; align-items: center; gap: 7px; color: var(--primary); font-weight: 700; }
.hero__badge .live::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--accent); }

.hero h1 {
  font-size: clamp(40px, 7vw, 84px); margin: 26px auto 0;
  letter-spacing: -0.045em; line-height: 0.98;
}
.hero__sub { margin: 24px auto 0; font-size: clamp(17px, 2vw, 21px); color: var(--muted); max-width: 60ch; }
.hero__actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero__reassure { margin: 14px auto 0; font-size: 13.5px; color: var(--muted-2); max-width: 56ch; }

/* Compact stat row inside the hero (product claims, kept close to the promise) */
.hero__stats { margin-top: 40px; display: flex; justify-content: center; flex-wrap: wrap; row-gap: 14px; }
.hstat { display: flex; flex-direction: column; gap: 3px; padding: 0 30px; }
.hstat + .hstat { border-left: 1px solid var(--line-2); }
.hstat b { font-family: var(--font-head); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.hstat span { color: var(--muted); font-size: 12.5px; }

/* ---------- Hero showcase: hear it + see it ---------- */
.hero__stage {
  margin: 42px auto 0; max-width: 940px;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 18px; align-items: stretch; text-align: left;
}
.hero__talk { display: flex; flex-direction: column; }
.hero__talk .wave { height: 100%; justify-content: center; }

/* Live call card — shows the outcome, not just the audio */
.callcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column;
}
.callcard__head { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.callcard__avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 15px; flex: none; box-shadow: 0 6px 16px rgba(229,106,52,.35); }
.callcard__meta b { font-family: var(--font-head); font-size: 14.5px; color: var(--text); display: block; line-height: 1.2; }
.callcard__meta small { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.callcard__live { width: 7px; height: 7px; border-radius: 50%; background: #3fb27f; animation: pulseGreen 2s infinite; }
.callcard__timer { margin-left: auto; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.callcard__body { padding: 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
/* iMessage bubbles (shared by callcard, bento mini-chats and voice transcript):
   grey received on the left, blue sent on the right, each with the curved tail */
.cbubble, .mini-chat .b, .vt-line {
  position: relative;
  font-family: var(--font-imsg);
  /* iOS Messages body: SF Pro Text 17px / 22px line, -0.41px tracking */
  font-size: 17px; line-height: 1.3; letter-spacing: -0.024em; font-weight: 400;
  padding: 8px 14px; border-radius: 19px; max-width: 78%;
  overflow-wrap: break-word;
}
.cbubble::before, .cbubble::after,
.mini-chat .b::before, .mini-chat .b::after,
.vt-line::before, .vt-line::after {
  content: ""; position: absolute; bottom: 0; height: 16px;
}
.cbubble--them, .mini-chat .in, .vt-cooper { align-self: flex-start; background: var(--imsg-recv); color: #000; }
.cbubble--them::before, .mini-chat .in::before, .vt-cooper::before {
  left: -6px; border-left: 16px solid var(--imsg-recv); border-bottom-right-radius: 13px 11px;
}
/* the ::after strip matches the card surface and carves the outer curve of the tail */
.cbubble--them::after, .mini-chat .in::after, .vt-cooper::after {
  left: -10px; width: 10px; background: var(--surface); border-bottom-right-radius: 8px;
}
.cbubble--cooper, .mini-chat .out, .vt-user { align-self: flex-end; background: var(--imsg-sent); color: #fff; }
.cbubble--cooper::before, .mini-chat .out::before, .vt-user::before {
  right: -6px; border-right: 16px solid var(--imsg-sent); border-bottom-left-radius: 13px 11px;
}
.cbubble--cooper::after, .mini-chat .out::after, .vt-user::after {
  right: -10px; width: 10px; background: var(--surface); border-bottom-left-radius: 8px;
}
.cbubble__delivered { align-self: flex-end; font-family: var(--font-imsg); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--imsg-meta); margin-top: -6px; padding-right: 5px; }
.callcard__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px 16px; }
/* Outcome pill. Global, not scoped to the hero — the bento call and CRM mocks
   reuse it so every "Cooper did the thing" marker on the page is identical. */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #2e8f66; background: rgba(63,178,127,.1); border: 1px solid rgba(63,178,127,.3); border-radius: 999px; padding: 5px 11px; }
@keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(63,178,127,.5); } 70% { box-shadow: 0 0 0 7px rgba(63,178,127,0); } 100% { box-shadow: 0 0 0 0 rgba(63,178,127,0); } }

/* ---------- Live waveform ---------- */
.wave {
  -webkit-appearance: none; appearance: none;
  width: 100%; cursor: pointer; border: 1px solid var(--line); background: #fff;
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 30px 26px 26px; display: flex; flex-direction: column; align-items: center; gap: 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wave:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.wave__bars {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 92px; width: 100%; max-width: 100%; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.wave__bars i {
  flex: none; width: 7px; border-radius: 7px;
  /* --h is set per-bar by buildCooperWave(); --wave-scale lets a container grow
     the whole waveform without touching the generator */
  height: calc(var(--h, 40) * 1px * var(--wave-scale, 1));
  background: linear-gradient(180deg, var(--accent), var(--primary));
  transform: scaleY(var(--min, .22)); transform-origin: center;
  animation: waveBar var(--dur, 1.3s) ease-in-out infinite; animation-delay: var(--d, 0s);
  will-change: transform;
}
@keyframes waveBar { 0%,100% { transform: scaleY(var(--min, .22)); } 50% { transform: scaleY(1); } }
.wave__cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--text); }
.wave__cta .play { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-primary); }
@media (prefers-reduced-motion: reduce) { .wave__bars i { animation: none; transform: scaleY(.7); } }

/* ---------- Problem (lite) ---------- */
/* Three separate pills. Rounder than the bento cells on purpose so they read as
   their own thing. This only holds together because each pill ends with the
   proportion bar pinned to its bottom edge (margin-top:auto below) and the grid
   stretches all three to equal height — that's what keeps the bars on one line
   despite the captions being different lengths. */
.problem__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.pcard-lite {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  padding: 28px 28px 26px;
}
/* same tile as the bento cells so the two sections read as one system */
.pstat__ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid rgba(229,106,52,.18);
  color: var(--primary); margin-bottom: 18px;
}
/* the stat drawn as a proportion — --pct is set per card in the markup */
.pstat__bar {
  display: block; margin-top: auto; height: 5px; border-radius: 999px;
  background: rgba(26,20,14,.07); position: relative; overflow: hidden;
}
.pstat__bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--pct, 0%);
  border-radius: 999px; background: linear-gradient(90deg, #dd6d40, #d76a83);
}
.pcard-lite b {
  font-family: var(--font-head); font-weight: 800; font-size: 50px; letter-spacing: -.04em;
  line-height: 1; display: block;
  /* the H1's deeper gradient — --grad washed out to flat salmon at this size */
  background: linear-gradient(100deg, #dd6d40, #d76a83 58%, #cf6a8c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* margin-bottom is the bar's minimum clearance — margin-top:auto alone would
   let it ride up against the caption in the tallest cell */
.pcard-lite p { margin: 12px 0 20px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.problem__src { margin-top: 18px; text-align: center; font-size: 12px; color: var(--muted-2); }

/* ---------- Bento capabilities ---------- */
/* Even 2-up. This was a 6-col grid with the forecourt cell spanning 4, which
   made it ~720px wide — far more than the 340px WhatsApp mock inside it needed,
   so the mock sat centred in a pool of white. Row two was already 50/50. */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.bento .cell {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px; overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bento .cell:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
.bento .cell::before {
  content:""; position: absolute; width: 220px; height: 220px; right: -60px; top: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,61,0.14), transparent 70%); opacity: 0; transition: opacity .25s ease;
}
.bento .cell:hover::before { opacity: 1; }
.cell__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; position: relative; z-index: 1; }
.cell__eyebrow {
  display: inline-flex; align-items: center; position: relative; z-index: 1;
  font-family: var(--font-head); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary-600); background: var(--grad-soft); border: 1px solid rgba(229,106,52,0.22);
  padding: 6px 13px; border-radius: 999px;
}
.cell__badge {
  display: inline-flex; align-items: center; position: relative; z-index: 1;
  font-family: var(--font-head); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--grad); padding: 7px 13px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(229,106,52,0.28);
}
.cell h3 { font-size: 21px; margin-top: 14px; font-weight: 700; }
.cell p { margin-top: 10px; color: var(--muted); font-size: 15px; position: relative; z-index: 1; }
.cell__ic { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--grad-soft); border: 1px solid var(--line); color: var(--primary); display: grid; place-items: center; }

/* mini mockups inside bento — bubbles use the shared iMessage rules above */
/* Framed like the other three mocks — the bubbles used to float loose on the
   cell. The background MUST stay var(--surface): the bubble tails are carved by
   ::after strips hard-coded to that colour, so any tint here shows as a white
   notch beside every tail. Padding clears the tails, which hang 10px out. */
.mini-chat {
  margin-top: 18px; display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 1;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 14px 14px 16px;
}
.mini-chat__label { align-self: center; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-imsg); font-size: 12px; font-weight: 400; color: var(--imsg-meta); margin-bottom: 2px; }
.mini-chat__label b { font-weight: 600; }
.mini-chat__label svg { flex: none; }
/* WhatsApp chat mock (forecourt cell) — colors, metrics, tails and ticks match
   WhatsApp Web light mode: #f0f2f5 header, #efeae2 wallpaper, #d9fdd3 sent bubbles,
   7.5px radius with the curved tail on the TOP corner, in-bubble time + read ticks */
.wa-chat {
  /* wider now the cell is 2-up, so it fills the card instead of floating in it */
  max-width: 420px; margin: 18px auto 0; position: relative; z-index: 1;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font-family: var(--font-imsg); text-align: left;
}
.wa-chat__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #f0f2f5; border-bottom: 1px solid #e9edef; }
.wa-chat__avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #dfe5e7; display: grid; place-items: center; overflow: hidden; }
.wa-chat__avatar svg { transform: translateY(6px); }
.wa-chat__who { flex: 1; min-width: 0; }
.wa-chat__who b { display: block; font-size: 14px; font-weight: 600; color: #111b21; line-height: 1.25; }
.wa-chat__who small { display: block; font-size: 12px; color: #667781; line-height: 1.2; }
.wa-chat__logo { flex: none; }
.wa-chat__body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; background: #efeae2; }
.wa-chat__day {
  align-self: center; font-size: 12px; font-weight: 500; text-transform: uppercase; color: #54656f;
  background: #fff; border-radius: 7.5px; padding: 4px 12px; box-shadow: 0 1px .5px rgba(11,20,26,.13);
}
.wb {
  position: relative; max-width: 85%;
  font-size: 14.2px; line-height: 19px; letter-spacing: 0; color: #111b21;
  padding: 6px 7px 8px 9px; border-radius: 7.5px;
  box-shadow: 0 1px .5px rgba(11,20,26,.13);
  overflow-wrap: break-word;
}
.wb--in { align-self: flex-start; background: #fff; border-top-left-radius: 0; }
.wb--out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 0; }
/* WhatsApp's curved tails (real WA Web tail paths), hanging off the top corner */
.wb::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.wb--in::before { left: -8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.533 2.568L8 11.193V0H2.812C1.042 0 .474 1.156 1.533 2.568z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat; }
.wb--out::before { right: -8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M5.188 0H0v11.193l6.467-8.625C7.526 1.156 6.958 0 5.188 0z' fill='%23d9fdd3'/%3E%3C/svg%3E") no-repeat; }
/* time + ticks float bottom-right inside the bubble, text wraps around them */
.wb__meta {
  float: right; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; line-height: 15px; color: #667781;
  margin: 8px -4px -4px 10px;
}
.wb__meta svg { flex: none; }

/* Voice-call mock (calls & messages cell). Deliberately NOT iMessage bubbles —
   that cell is about the phone, so it reads as a live transcript instead.
   Rows are divs, not <p>, so the `.cell p` rule can't override them. */
/* White with a tinted header strip, mirroring the hero call card. The flat
   --surface-2 panel this used to be read as a muddy beige block on the white
   cell; the structure now comes from the header, not from tinting everything. */
.call-mock {
  margin-top: 18px; position: relative; z-index: 1; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.call-mock__head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.call-mock__body { padding: 12px 14px 14px; }
.call-mock__head b { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--text); }
.call-mock__live { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #3fb27f; animation: pulseGreen 2s infinite; }
.call-mock__timer { margin-left: auto; font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ct { font-size: 14px; line-height: 1.45; color: var(--text); }
.ct + .ct { margin-top: 11px; }
.ct .who {
  display: block; font-family: var(--font-head); font-size: 10.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 2px;
}
.ct--coop .who { color: var(--primary-600); }
/* the outcome pill sits centred in its mock, not shoved against the left edge */
.mock__foot { display: flex; justify-content: center; margin-top: 14px; }

/* CRM record mock (CRM & DMS cell) — shows the row Cooper wrote, not a chat.
   Same white-panel treatment as the call mock above. */
.crm-mock {
  margin-top: 18px; position: relative; z-index: 1; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 4px 16px 14px;
}
.crm-row { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; }
.crm-row + .crm-row { border-top: 1px solid var(--line); }
.crm-row .k {
  flex: none; width: 52px; font-family: var(--font-head); font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2);
}
.crm-row .v { font-size: 13.5px; color: var(--text); line-height: 1.4; }

/* channels strip */
.chan-strip { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.chan-strip .cs {
  display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--text); box-shadow: var(--shadow-sm);
}
.chan-strip .cs .i { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: grid; place-items: center; box-shadow: inset 0 -2px 3px rgba(0,0,0,.08); }
/* real channel colors: iOS Phone/Messages green, WhatsApp brand green, Mail blue */
.chan-strip .i--phone, .chan-strip .i--sms { background: linear-gradient(180deg, #63e072 0%, #0dbc3f 100%); }
.chan-strip .i--wa { background: linear-gradient(180deg, #61fd7d 0%, #2bb826 100%); }
.chan-strip .i--mail { background: linear-gradient(180deg, #6ab5f9 0%, #1c72ee 100%); }
.chan-strip .plus { color: var(--muted-2); font-weight: 700; }

.midcta { text-align: center; margin-top: 48px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.step { position: relative; }
.step__n {
  width: 46px; height: 46px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line-2);
  color: var(--primary); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 18px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.step h3 { font-size: 20px; font-weight: 700; }
.step p { margin-top: 10px; color: var(--muted); font-size: 15.5px; }
.step__line { position: absolute; top: 23px; left: 62px; right: -12px; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.step:last-child .step__line { display: none; }

/* ---------- Results / value ---------- */
.value {
  background: linear-gradient(180deg, #fff, var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--r-xl); padding: 56px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.value::before { content:""; position: absolute; inset: 0; background: radial-gradient(50% 120% at 100% 0%, rgba(255,122,61,0.14), transparent 55%), radial-gradient(40% 100% at 0% 100%, rgba(255,77,109,0.10), transparent 55%); }
/* start, not center: the two columns are very different heights, and centring the
   shorter one leaves it floating in a pool of empty space */
.value__inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: start; }
.value h2 { font-size: clamp(28px,3.4vw,40px); }
.value p { color: var(--muted); margin-top: 16px; font-size: 17px; }
.pilot-note { margin-top: 26px; border-left: 2px solid var(--primary); padding-left: 20px; color: var(--muted); font-size: 15.5px; line-height: 1.6; position: relative; }
.pilot-note b { display: block; color: var(--text); font-family: var(--font-head); font-size: 16.5px; margin-bottom: 4px; }
.value__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px 22px; box-shadow: var(--shadow-sm); }
/* p.<class> so this beats the `.value p` rule above — as a plain single-class
   selector it lost on specificity and rendered at full 17px body size */
.value p.value__src { margin-top: 16px; color: var(--muted-2); font-size: 11.5px; line-height: 1.5; }

/* Before/after comparison table (Why Cooper).
   Columns are auto-width and every value is nowrap, so no cell breaks to a
   second line and the eye scans straight down. The "With Cooper" column is one
   continuous tinted panel rather than four separate cells. Labels are the only
   thing allowed to wrap — the safety valve if a column ever gets squeezed. */
/* minmax(0,1fr), NOT 1fr: a plain 1fr can't shrink below its min-content, so
   when the card gets narrow the two value columns get squeezed and their text
   spills out of the tinted panel. Letting the label column shrink (and wrap)
   keeps the values intact at every width. */
/* The label column keeps a floor so it can never be squeezed to nothing, and it
   is the only column allowed to wrap. */
.cmp { display: grid; grid-template-columns: minmax(84px,1fr) auto auto; margin-top: 2px; }
/* This shared rule sets NO padding-inline and NO white-space. As `.cmp > span`
   it outranks the single-class rules below, so anything declared here silently
   flattens them — that trap already cost us the padding once and the label
   wrapping once (labels collapsed to 5px wide and vanished at 390px). */
.cmp > span { display: flex; align-items: center; font-size: 13.5px; padding-block: 14px; }
.cmp__h, .cmp__a, .cmp__b { white-space: nowrap; }

.cmp__h { font-family: var(--font-head); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); padding-block: 8px; }
.cmp__h:nth-child(2) { justify-content: center; padding-inline: 12px; }
.cmp__h--c { color: var(--primary-600); background: var(--grad-soft); border-radius: 12px 12px 0 0; justify-content: center; padding-inline: 12px; }
/* Two complete variants, not a hidden word inside one label: this cell is a flex
   container, so a bare text node beside a span loses the space between them and
   renders "WithCooper". Only one variant is ever displayed. */
.cmp__hn { display: none; }

.cmp__l { color: var(--text); font-weight: 600; padding-right: 14px; border-top: 1px solid var(--line); }
.cmp__a { color: var(--muted); justify-content: center; padding-inline: 12px; border-top: 1px solid var(--line); }
.cmp__b { color: var(--text); font-weight: 700; justify-content: center; padding-inline: 12px; background: var(--grad-soft); border-top: 1px solid rgba(229,106,52,.16); }
.cmp > .cmp__b:last-child { border-radius: 0 0 12px 12px; }

@media (max-width: 560px) {
  .cmp { grid-template-columns: minmax(72px,1fr) auto auto; }
  .cmp > span { font-size: 12.5px; padding-block: 12px; }
  /* the uppercase "With Cooper" header, not any value, is what sets this
     column's width on a phone — tighten it so the labels keep one line */
  .cmp__h { font-size: 9px; letter-spacing: .02em; padding-block: 7px; }
  .cmp__l { padding-right: 8px; }
  .cmp__h:nth-child(2), .cmp__a { padding-inline: 6px; }
  .cmp__h--c, .cmp__b { padding-inline: 6px; }
  /* buy the table back some width on phones */
  .value__card { padding: 18px 16px 16px; }
}

/* Phones can't give three nowrap columns enough width: the card grew past
   .value, whose overflow:hidden then clipped the right of the table. Below this
   the cells wrap instead, and the header drops "With" so it stays one word.
   Must come after the nowrap rule to win on source order. */
@media (max-width: 430px) {
  .cmp { grid-template-columns: 1fr 0.8fr 0.9fr; }
  .cmp__h, .cmp__a, .cmp__b { white-space: normal; }
  .cmp__hw { display: none; }
  .cmp__hn { display: inline; }
}
/* ---------- Demo / booking ---------- */
.demo__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.demo h2 { font-size: clamp(30px,3.6vw,44px); }
.demo__list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.demo__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text); }
.demo__list .tick { width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; }

.demo__alt { margin-top: 24px; color: var(--muted); font-size: 14.5px; line-height: 1.9; }
.demo__alt a, .demo__alt .linkbtn { color: var(--primary); font-weight: 600; }
.demo__alt a:hover, .demo__alt .linkbtn:hover { text-decoration: underline; }

.calendar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 10px; }
.calendar__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.calendar__head b { font-family: var(--font-head); color: var(--text); }
.calendar__head small { color: var(--muted); display: block; }
.avatar { width: 40px; height: 40px; border-radius: 12px; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-family: var(--font-head); flex: none; box-shadow: 0 6px 16px rgba(255,106,43,0.4); }
.calendly-inline-widget { border-radius: var(--r); overflow: hidden; }
/* Click-to-load placeholder — stands in for the embed until the visitor asks for it */
.calendar__load { padding: 64px 24px 40px; text-align: center; }
.calendar__load .btn svg { margin-right: 2px; }
.calendar__consent { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 34ch; margin-inline: auto; }
.calendar__consent a { color: var(--primary); font-weight: 600; text-decoration: underline; }
@media (max-width: 680px) { .calendar__load { padding: 44px 16px 32px; } }
/* Shown always — cheap insurance for the networks and extensions that block the embed */
.calendar__fallback { padding: 12px 18px 8px; font-size: 12.5px; color: var(--muted); text-align: center; }
.calendar__fallback a { color: var(--primary); font-weight: 600; }
.calendar__fallback a:hover { text-decoration: underline; }

/* ---------- FAQ ---------- */
.faq__grid { max-width: 780px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--text); }
.faq-q .pm { position: relative; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); flex: none; transition: transform .2s ease, background .2s ease, color .2s ease; color: var(--primary); font-size: 0; }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 1px; }
.faq-q .pm::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq-q .pm::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq-item.open .pm { background: var(--primary); color: #fff; transform: rotate(45deg); border-color: var(--primary); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 0 24px; color: var(--muted); font-size: 15.5px; max-width: 92%; }

/* ---------- Legal pages (privacy & cookies) ---------- */
.legal { padding: 64px 0 96px; }
.legal__inner { max-width: 720px; margin-inline: auto; }
.legal h1 { font-size: clamp(32px, 4.4vw, 46px); }
/* .legal-prefixed so these outrank the generic `.legal p` rule further down */
.legal p.legal__meta { margin-top: 18px; font-size: 13px; color: var(--muted-2); }
.legal p.legal__intro { margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--muted); }
.legal h2 {
  font-size: 22px; margin-top: 52px; padding-top: 26px;
  border-top: 1px solid var(--line); letter-spacing: -0.02em;
}
.legal h3 { font-size: 17px; margin-top: 30px; font-weight: 700; }
.legal p, .legal li { color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.legal p { margin-top: 14px; }
.legal ul { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 9px; }
.legal li::marker { color: var(--muted-2); }
.legal strong, .legal b { color: var(--text); font-weight: 600; }
.legal a { color: var(--primary); font-weight: 600; }
.legal a:hover { text-decoration: underline; }
/* Tables scroll inside their own box — the page body must never scroll sideways */
.legal__table { margin-top: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.legal table { width: 100%; border-collapse: collapse; min-width: 520px; }
.legal th, .legal td { text-align: left; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); background: var(--surface-2); }
.legal td { color: var(--muted); }
.legal tr:last-child td { border-bottom: 0; }
.legal__back { display: inline-block; margin-top: 56px; font-size: 14.5px; font-weight: 600; color: var(--primary); }
.legal__back:hover { text-decoration: underline; }

/* ---------- CTA band ---------- */
.cta-band__inner {
  position: relative; text-align: center; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 72px 40px; overflow: hidden;
  background: linear-gradient(180deg, #fff, var(--bg-2));
  box-shadow: var(--shadow-sm);
}
.cta-band__inner::before { content:""; position: absolute; inset: 0; background: radial-gradient(60% 140% at 50% 0%, rgba(255,122,61,0.20), transparent 60%), radial-gradient(50% 120% at 50% 120%, rgba(255,77,109,0.14), transparent 60%); }
.cta-band h2 { position: relative; font-size: clamp(30px,4.4vw,52px); }
.cta-band p { position: relative; color: var(--muted); margin-top: 18px; font-size: 18px; }
.cta-band .hero__actions { position: relative; margin-top: 30px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 64px 0 34px; background: var(--surface-2); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer__about { margin-top: 16px; font-size: 14.5px; color: var(--muted); max-width: 300px; }
.footer__mail { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--primary); }
.footer__mail:hover { text-decoration: underline; }
.footer h4 { color: var(--text); font-family: var(--font-head); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer ul a, .footer ul .linkbtn { font-size: 14.5px; color: var(--muted); transition: color .15s ease; }
.footer ul a:hover, .footer ul .linkbtn:hover { color: var(--primary); }
.footer__bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted-2); }

/* ---------- Floating mobile CTA ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251,249,246,0.92);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(102%); transition: transform .25s ease;
}
.mobile-cta .btn { width: 100%; }
.mobile-cta.show { transform: none; }
@media (max-width: 680px) { .mobile-cta { display: block; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
/* Never animate content in for people who asked not to see motion — and never
   leave it hidden waiting for an observer that will not fire. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Talk to Cooper — voice modal (light + warm)
   ========================================================= */
.voice-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(40,22,12,0.5); backdrop-filter: blur(10px); opacity: 0; transition: opacity .2s ease; }
.voice-modal.open { display: flex; opacity: 1; }
.voice-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 34px 30px 26px; text-align: center; position: relative; color: var(--text); transform: translateY(12px) scale(.98); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.voice-modal.open .voice-card { transform: none; }
.voice-close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); border: none; color: var(--muted); font-size: 22px; line-height: 1; transition: background .15s ease; }
.voice-close:hover { background: var(--bg-2); }
.voice-wave-wrap { height: 120px; display: grid; place-items: center; margin-top: 10px; }
.voice-wave {
  --vol: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 84px;
  transition: transform .09s ease;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* Volume-reactive squash only while a call is live — idle matches the hero wave */
.voice-wave.is-listening, .voice-wave.is-speaking { transform: scaleY(calc(.55 + var(--vol) * .7)); }
.voice-wave i {
  flex: none; width: 7px; border-radius: 7px; height: calc(var(--h, 30) * 1px);
  background: linear-gradient(180deg, var(--accent), var(--primary));
  transform: scaleY(var(--min, .22)); transform-origin: center;
  animation: waveBar var(--dur, 1.3s) ease-in-out infinite; animation-delay: var(--d, 0s);
}
.voice-wave.is-connecting i { animation-duration: calc(var(--dur, 1.3s) * 0.5); }
.voice-wave.is-speaking i { background: linear-gradient(180deg, var(--primary), var(--accent-2)); }
@media (prefers-reduced-motion: reduce) { .voice-wave i { animation: none; transform: scaleY(.7); } }
.voice-who { margin-top: 10px; }
.voice-who b { font-family: var(--font-head); font-size: 20px; color: var(--text); display: block; }
.voice-who small { color: var(--primary); font-weight: 600; font-size: 13px; }
.voice-status { margin-top: 16px; font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--text); }
.voice-hint { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.voice-hint code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.voice-transcript { margin-top: 16px; max-height: 150px; overflow-y: auto; text-align: left; display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line); padding: 14px 10px 4px; }
/* speaker names stay for screen readers only — the bubble side shows who's talking */
.vt-line span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* voice.js keeps the transcript hidden until the first line; display:flex above would otherwise defeat [hidden] */
.voice-transcript[hidden] { display: none; }
/* consecutive same-speaker bubbles: tight spacing, tail only on the last of the group */
.vt-user:has(+ .vt-user)::before, .vt-user:has(+ .vt-user)::after,
.vt-cooper:has(+ .vt-cooper)::before, .vt-cooper:has(+ .vt-cooper)::after { display: none; }
.vt-user + .vt-user, .vt-cooper + .vt-cooper { margin-top: -4px; }
.voice-actions { margin-top: 22px; display: flex; gap: 10px; justify-content: center; }
.voice-btn { font-family: var(--font-head); font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; color: #fff; transition: transform .15s ease, background .15s ease; }
.voice-btn:active { transform: translateY(1px); }
.voice-btn--primary { background: var(--primary); box-shadow: var(--shadow-primary); }
.voice-btn--primary:hover { background: var(--primary-600); transform: translateY(-1px); }
.voice-btn--end { background: #e5484d; } .voice-btn--end:hover { background: #cf3b40; }
.voice-btn--mute { background: var(--surface-2); color: var(--text); border-color: var(--line); } .voice-btn--mute:hover { background: var(--bg-2); }
.voice-btn--mute.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
/* This is the consent notice for a recorded call, so it has to be readable —
   not the usual faint small print. */
.voice-legal { margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.voice-legal a { color: var(--primary); font-weight: 600; text-decoration: underline; }

/* ---------- Responsive ---------- */
/* Two-column hero only: the talk card is stretched to the chat card's height,
   so a 92px waveform left it looking half-empty beside it. */
@media (min-width: 941px) {
  .hero__talk .wave { --wave-scale: 1.5; gap: 30px; }
  .hero__talk .wave__bars { height: 140px; gap: 8px; }
  .hero__talk .wave__bars i { width: 8px; }
}

@media (max-width: 940px) {
  .hero__stage { grid-template-columns: minmax(0,1fr); max-width: 460px; }
  /* two-up cells are much narrower than the 6-col layout: shrink the head pills
     so the eyebrow + badge stay on one row instead of orphaning "Only Cooper" */
  .cell__ic { width: 40px; height: 40px; }
  .cell__eyebrow { font-size: 11.5px; padding: 5px 11px; letter-spacing: .07em; }
  .cell__badge { font-size: 10.5px; padding: 5px 10px; letter-spacing: .07em; }
  .value__inner, .demo__grid { grid-template-columns: 1fr; }
  .problem__grid, .steps { grid-template-columns: 1fr; }
  /* stacked: the icon sits beside the number on row one so each pill costs one
     row of height rather than three */
  .problem__grid { gap: 14px; }
  .pcard-lite {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 14px; row-gap: 10px; align-items: center; padding: 22px 24px;
  }
  .pstat__ic { grid-row: 1; width: 38px; height: 38px; margin-bottom: 0; }
  .pcard-lite b { grid-row: 1; font-size: 32px; }
  /* row-gap handles the spacing here, so drop the desktop bar clearance */
  .pcard-lite p { grid-column: 1 / -1; margin: 0; }
  .pstat__bar { grid-column: 1 / -1; margin-top: 0; }
  .value { padding: 38px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .step__line { display: none; }
}
/* The comparison table needs ~340px to keep every cell on one line. Between
   941px and here the two-column value layout squeezes it below that, so this
   section stacks earlier than the other grids. */
@media (max-width: 1140px) {
  .value__inner { grid-template-columns: 1fr; }
  .value__card { max-width: 560px; }
}

/* Collapse nav links into the hamburger before the header gets cramped */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav.open .nav__links { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 24px 20px; box-shadow: var(--shadow); }
  .nav.open .nav__links a { padding: 10px 0; width: 100%; }
}

/* Below ~600px the three hero stats no longer fit one flex row, and the third
   wrapped alone onto a second line, centred, with a stray divider beside it. */
@media (max-width: 600px) {
  .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .hstat { padding: 0 6px; align-items: center; text-align: center; }
  .hstat b { font-size: 19px; }
  .hstat span { font-size: 11px; line-height: 1.3; }
}

@media (max-width: 680px) {
  /* tighter rhythm on phones — at 74px a side the page ran to ~13.5 screens */
  .section { padding: 56px 0; }
  .hero { padding: 44px 0 64px; }
  .hero__stage { margin-top: 30px; }
  .hero__stats { margin-top: 28px; }
  .chan-strip { margin-top: 28px; }
  .midcta { margin-top: 34px; }
  .section-head p { margin-top: 14px; }
  .nav__cta .btn--ghost { display: none; }
  .nav__cta { gap: 8px; }
  .nav__cta .btn { padding: 10px 16px; font-size: 14px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand__mark { width: 23px; height: 23px; }
  .bento { grid-template-columns: 1fr; }
  .pcard-lite { padding: 20px 18px; column-gap: 12px; row-gap: 9px; }
  .pcard-lite b { font-size: 29px; }
  .pstat__ic { width: 34px; height: 34px; }
  /* brand block full width, then the three link columns two-up instead of a
     single 820px-tall stack */
  .footer { padding: 46px 0 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .value, .cta-band__inner { padding: 34px 22px; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* Slimmer waveform bars so 24 of them fit a small phone without overflowing */
@media (max-width: 480px) {
  .wave__bars { gap: 5px; }
  .wave__bars i { width: 6px; }
  /* at the 40px floor "for car dealerships." overflowed and broke to a stubby
     two-word line — shrink so the <br> lockup holds at two lines */
  .hero h1 { font-size: clamp(28px, 8vw, 40px); }
  .hero__sub { font-size: 16px; margin-top: 18px; }
  .hero__actions { margin-top: 26px; }
}