/* =========================================================
   CallCooper — white ground, warm band, one rust accent.
   Rebrand via :root tokens: the voice modal and the legal
   pages are written against these names, so changing a value
   here moves them too.
   ========================================================= */

:root {
  /* Canvas */
  --bg: #ffffff;
  --bg-2: #f6f2ec;          /* the one tinted band */
  --surface: #ffffff;       /* cards */
  --surface-2: #fbfaf9;     /* card footers, inset rows */
  --line: rgba(21,19,18,0.12);
  --line-2: rgba(21,19,18,0.18);
  --hair: rgba(21,19,18,0.08);

  /* Ink */
  --text: #151312;
  --muted: #5d564f;
  --muted-2: #756d64;

  /* Dark band (booking + any inverted section) */
  --dark: #17140f;
  --dark-text: #f4efe8;
  --dark-muted: #a9a096;
  --dark-line: rgba(244,239,232,0.16);

  /* Brand — one accent, dark enough to carry white text at 4.7:1 */
  --primary: #c2501f;
  --primary-600: #a8441a;
  --accent: #e0703c;        /* lighter end of the waveform gradient */
  --accent-2: #d9603a;
  --on-dark-accent: #f0865a; /* the accent, lifted for dark grounds */

  /* Type — one family, weights doing the work */
  --font-body: 'Familjen Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-head: var(--font-body);
  --font-imsg: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;

  /* Radius + shadow */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(21,19,18,0.05), 0 2px 6px rgba(21,19,18,0.04);
  --shadow: 0 18px 44px rgba(21,19,18,0.09);
  --shadow-lift: 0 18px 44px rgba(21,19,18,0.11);
  --shadow-primary: 0 10px 26px rgba(194,80,31,0.26);

  --maxw: 1136px;
  --gutter: 24px;
  --nav-h: 62px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 28px); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  font-size: 17px;
  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; }
/* An action sitting in running text or a link list stays a <button> and borrows link styling */
.linkbtn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; }

:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

/* Display type: light weight, tight tracking. Both do more work than size does. */
h1,h2,h3,h4 {
  font-family: var(--font-head);
  color: var(--text);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-wrap: pretty;
}
h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.02; letter-spacing: -0.042em; }
h2 { font-size: clamp(30px, 3.6vw, 46px); }
h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.036em; line-height: 1.1; }
p { margin: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: 92px 0; }
.section--tight { padding: 0 0 92px; }
.band { background: var(--bg-2); }
.band--dark { background: var(--dark); color: var(--dark-text); }
.band--dark h1, .band--dark h2, .band--dark h3 { color: var(--dark-text); }
.rule { border-top: 1px solid var(--line); }

/* A section head that runs the heading left and a single line of context right */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.head p { font-size: 17.5px; line-height: 1.6; color: var(--muted); max-width: 350px; }
.head--stacked { display: block; }
.eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }

/* ---------- Buttons ---------- */
/* One size and one shape everywhere — an <a> and a <button> must render
   identically, so the line-height is explicit rather than inherited. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  padding: 14px 22px; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-600); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--text); }
.btn--ink { background: var(--text); color: #fff; }
.btn--ink:hover { background: #000; transform: translateY(-1px); }
/* On the dark band the pale button leads and the outline follows */
.band--dark .btn--pale { background: var(--dark-text); color: var(--dark); }
.band--dark .btn--pale:hover { background: #fff; transform: translateY(-1px); }
.band--dark .btn--ghost { color: var(--dark-text); border-color: rgba(244,239,232,0.32); }
.band--dark .btn--ghost:hover { border-color: var(--dark-text); }
.mic-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }
.band--dark .mic-dot { background: var(--on-dark-accent); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; padding: 14px 0 10px; pointer-events: none; }
/* Progressive blur: one gradient mask shapes both the blur and the white wash,
   so content dissolves as it slides up past the bar. Invisible over the plain
   white page top, so it needs no scroll gating. */
.nav::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 104px;
  z-index: -1;
  /* The wash stays light so the blur is what you see: content sliding up
     smears out rather than whitening out */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 30%,
    rgba(255,255,255,0.2) 60%, rgba(255,255,255,0.16) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  backdrop-filter: blur(30px) saturate(1.3);
  /* Eased feather: solid at the bar's top, ~60% at its bottom edge (~76px),
     gone ~28px below it. The mask meters how much blur shows, so it stays
     high through the bar or the sharp original bleeds through */
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, #000 18%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.6) 66%,
    rgba(0,0,0,0.25) 85%, transparent 100%);
  mask-image: linear-gradient(180deg,
    #000 0%, #000 18%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.6) 66%,
    rgba(0,0,0,0.25) 85%, transparent 100%);
}
.nav > .container {
  pointer-events: auto;
  display: flex; align-items: center; gap: 36px;
  height: var(--nav-h);
  width: calc(100% - 2 * var(--gutter)); max-width: 980px;
  padding-inline: 26px 10px;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.44));
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 0 0 1px rgba(21,19,18,0.06),
    0 2px 8px rgba(21,19,18,0.05), 0 16px 40px rgba(21,19,18,0.08);
  transition: box-shadow .25s ease, background .25s ease;
}
.nav.scrolled > .container {
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.56));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 0 0 1px rgba(21,19,18,0.08),
    0 4px 12px rgba(21,19,18,0.07), 0 22px 48px rgba(21,19,18,0.12);
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 24px; letter-spacing: -0.04em; }
.brand__mark { width: 31px; height: 31px; flex: none; }
.nav__links { display: flex; gap: 31px; font-size: 17.5px; color: var(--muted); }
.nav__links a:hover { color: var(--text); }
.nav__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* In the bar the buttons drop to the links' scale so the logo stays the loudest thing */
.nav__cta .btn { font-size: 17.5px; padding: 12px 20px; }
.nav__cta .mic-dot { width: 8.5px; height: 8.5px; }
.nav__toggle { display: none; width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: none; position: relative; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content: ''; position: absolute; left: 14px; width: 19px; height: 2px; background: var(--text); transition: transform .2s ease, opacity .2s ease; }
.nav__toggle span { top: 23px; }
.nav__toggle span::before { top: -6px; left: 0; }
.nav__toggle span::after { top: 6px; left: 0; }
.nav.open .nav__toggle span { background: transparent; }
.nav.open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .nav__toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding: 78px 0 88px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; align-items: center; }
.hero__sub { font-size: 19.5px; line-height: 1.58; color: var(--muted); margin-top: 26px; max-width: 500px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* flex-start + margin keeps the dot on the first line when the text wraps */
.hero__note { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; font-size: 13.5px; color: var(--muted-2); }
.hero__note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; margin-top: 7px; }

/* Conversation card — the product, shown working */
.convo { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.convo__head { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--hair); }
.convo__avatar { width: 34px; height: 34px; flex: none; display: block; }
/* Name and sub sized/stacked to the og card's ratios: name ≈ .45 × avatar, sub ≈ .34 × avatar, default-tight lines */
.convo__who b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.convo__who small { display: block; font-size: 11.5px; line-height: 1.2; margin-top: 2px; color: var(--muted-2); }
.convo__body { display: flex; flex-direction: column; gap: 11px; padding: 22px 20px; font-family: var(--font-imsg); }
.bub { max-width: 78%; padding: 11px 15px; font-size: 15px; line-height: 1.45; }
.bub--in { align-self: flex-start; background: #f2efeb; border-radius: 14px 14px 14px 4px; }
.bub--out { align-self: flex-end; background: var(--text); color: #fff; border-radius: 14px 14px 4px 14px; }
.convo__foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }
.convo__foot span { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.convo__foot svg { color: var(--primary); flex: none; }

/* ---------- Problem ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 38px; }
.stat { padding: 30px 40px 0 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 40px; }
.stat:last-child { padding-right: 0; }
.stat b { display: block; font-size: clamp(42px, 4.6vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.stat p { font-size: 16px; line-height: 1.55; color: var(--muted); margin-top: 14px; max-width: 250px; }
.src { font-size: 12.5px; color: var(--muted-2); margin-top: 26px; }

/* ---------- Two jobs ---------- */
/* The second card is deliberately unequal: wider column, rust edge, a shadow.
   The type is identical in both, so the weight comes from the frame, not the text. */
.jobs { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 28px; align-items: stretch; margin-top: 48px; }
.job { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.job__edge { height: 4px; background: rgba(21,19,18,0.16); }
.job__body { display: flex; flex-direction: column; flex-grow: 1; padding: 30px 32px 24px; }
.job h3 { margin-top: 13px; }
.job p { font-size: 17px; line-height: 1.6; color: var(--muted); margin-top: 15px; }
.job__foot { margin-top: auto; padding-top: 22px; }
.job__foot span { display: block; border-top: 1px solid var(--hair); padding-top: 15px; font-size: 14.5px; color: var(--muted-2); }
.job--lead { border-color: rgba(194,80,31,0.30); box-shadow: var(--shadow-lift); }
.job--lead .job__edge { background: var(--primary); }
.job__label { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.job--lead .eyebrow { color: var(--primary); }
/* Rust text on the tinted band measures 4.2:1 at these sizes — the darker step
   clears AA. On white the lighter --primary is fine, so this is scoped to .band. */
.band .job--lead .eyebrow, .band .prep__lead { color: var(--primary-600); }
.tag { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: #fff; background: var(--primary); border-radius: 999px; padding: 5px 12px; }

/* Prep card — one car, auction to forecourt */
.prep__lead { display: flex; align-items: center; gap: 12px; margin: 42px 0 16px; font-size: 14.5px; font-weight: 600; color: var(--primary); }
.prep__lead i { width: 26px; height: 1px; background: var(--primary); display: inline-block; }
.prep { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.prep__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 19px 26px; border-bottom: 1px solid var(--line); }
.prep__head b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.025em; margin-top: 5px; }
.prep__done { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(194,80,31,0.40); border-radius: 999px; padding: 7px 15px; font-size: 13.5px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.prep__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 130px; gap: 20px; padding: 17px 26px; border-top: 1px solid var(--hair); align-items: baseline; }
.prep__row b { font-size: 15.5px; font-weight: 600; }
.prep__row p { font-size: 16px; line-height: 1.5; color: var(--muted); }
.prep__row i { font-style: normal; font-size: 13.5px; color: var(--muted-2); text-align: right; }
.prep__foot { padding: 15px 26px; background: var(--surface-2); border-top: 1px solid var(--hair); font-size: 14.5px; color: var(--muted); }

/* ---------- The maths ---------- */
.maths { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 72px; align-items: center; }
.maths__copy { grid-column: 2; grid-row: 1; }
.maths__copy p { font-size: 17px; line-height: 1.6; color: var(--muted); margin-top: 20px; }
/* Table sits left of the copy without moving in the source, so the heading still reads first */
.cmp { grid-column: 1; grid-row: 1; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.cmp__row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 18px 26px; border-top: 1px solid var(--hair); font-size: 16.5px; }
.cmp__row:first-child { border-top: 0; }
.cmp__head { padding: 15px 26px; background: var(--bg-2); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.cmp__head .win { color: var(--primary-600); }
.cmp__row .k { color: var(--muted); }
.cmp__row .win { color: var(--primary); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 72px; align-items: start; }
.faq__intro p { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin-top: 18px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item + .faq-item { border-top-color: var(--hair); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; background: none; border: 0; padding: 21px 0; margin: 0;
  font: inherit; font-size: 18.5px; font-weight: 600; letter-spacing: -0.02em;
  color: inherit; text-align: left;
}
.faq-q:hover { color: var(--primary); }
.faq-chev { flex: none; color: var(--muted-2); transition: transform .18s ease; }
.faq-item.open .faq-chev { transform: rotate(180deg); color: var(--primary); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a p { font-size: 16.5px; line-height: 1.62; color: var(--muted); padding: 0 60px 22px 0; max-width: 620px; }

/* ---------- Demo / booking ---------- */
.demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) 452px; gap: 72px; align-items: center; }
.demo__list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.demo__list li { display: flex; gap: 13px; font-size: 17px; line-height: 1.5; color: var(--dark-text); }
.demo__list .tick { flex: none; width: 21px; height: 21px; border-radius: 50%; background: rgba(240,134,90,0.16); color: var(--on-dark-accent); display: grid; place-items: center; margin-top: 3px; }
.demo__alt { font-size: 15.5px; line-height: 1.7; color: var(--dark-muted); margin-top: 26px; }
.demo__alt a, .demo__alt .linkbtn { color: var(--dark-text); font-weight: 600; border-bottom: 1px solid rgba(244,239,232,0.4); }
.calendar { background: var(--surface); border-radius: var(--r); overflow: hidden; color: var(--text); }
.calendar__head { display: flex; align-items: center; gap: 13px; padding: 20px 22px; border-bottom: 1px solid var(--hair); }
.calendar__head .avatar { width: 38px; height: 38px; border-radius: 10px; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 600; }
.calendar__head b { display: block; font-size: 15.5px; font-weight: 600; }
.calendar__head small { font-size: 13px; color: var(--muted-2); }
.calendar__load { padding: 52px 26px 40px; text-align: center; }
.calendar__consent { font-size: 12.5px; line-height: 1.55; color: var(--muted-2); margin-top: 16px; }
.calendar__consent a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.calendar__fallback { padding: 0 26px 24px; font-size: 13.5px; color: var(--muted-2); text-align: center; }
.calendar__fallback a { color: var(--primary); font-weight: 600; }
/* ---------- 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; }


/* ---------- Footer ---------- */
.footer { background: var(--bg-2); padding: 68px 0 36px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 56px; }
.footer__about { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-top: 12px; max-width: 300px; }
.footer__mail { display: inline-block; font-size: 15.5px; font-weight: 600; margin-top: 16px; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.footer h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.footer ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; font-size: 15px; color: var(--muted); }
.footer li a:hover, .footer li .linkbtn:hover { color: var(--primary); }
.footer__bottom {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.7; color: var(--muted-2);
}
.footer__legal { text-align: right; }

/* ---------- Floating mobile CTA ---------- */
.mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.mobile-cta .btn { width: 100%; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__sub { max-width: none; }
  .maths { grid-template-columns: 1fr; gap: 36px; }
  .maths__copy, .cmp { grid-column: 1; }
  .maths__copy { grid-row: 1; }
  .cmp { grid-row: 2; }
  .faq { grid-template-columns: 1fr; gap: 32px; }
  .demo__grid { grid-template-columns: 1fr; gap: 40px; }
  .jobs { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  /* The bar's 20%-up desktop scale overflows a phone-width bar — drop back down */
  .nav > .container { width: calc(100% - 24px); gap: 14px; padding-inline: 18px 8px; }
  .brand { font-size: 20px; gap: 9px; }
  .brand__mark { width: 26px; height: 26px; }
  .nav__cta { gap: 8px; }
  .nav__cta .btn { font-size: 15px; padding: 9px 13px; }
  .nav__toggle { width: 40px; height: 40px; }
  .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { width: 17px; }
  /* left: 11px on the span only — on ::before/::after it would shift them off the span's own left edge */
  .nav__toggle span { left: 11px; top: 19px; }
  .nav__toggle span::before { top: -5px; }
  .nav__toggle span::after { top: 5px; }
  .nav.open .nav__toggle span::before { transform: translateY(5px) rotate(45deg); }
  .nav.open .nav__toggle span::after { transform: translateY(-5px) rotate(-45deg); }
  .nav.open .nav__links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 12px; right: 12px; top: calc(var(--nav-h) + 20px);
    background: var(--bg);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    box-shadow: 0 0 0 1px rgba(21,19,18,0.06), 0 18px 44px rgba(21,19,18,0.14);
    padding: 8px 22px; font-size: 16px;
  }
  .nav.open .nav__links a { padding: 13px 0; }
  .nav.open .nav__links a + a { border-top: 1px solid var(--hair); }
  .nav__cta .btn--ghost { display: none; }
  .head { display: block; }
  .head p { margin-top: 16px; max-width: none; }
  /* Prep rows: label and day share a line, the text runs full width below.
     DOM order is b, p, i — order: pulls the day up beside the label. */
  .prep__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; }
  .prep__row i { order: -1; margin-left: auto; }
  .prep__row b { order: -2; }
  .prep__row p { flex-basis: 100%; }
  .footer__bottom { display: block; }
  .footer__legal { text-align: left; margin-top: 12px; }
}

@media (max-width: 680px) {
  .section { padding: 68px 0; }
  .section--tight { padding: 0 0 68px; }
  .hero { padding: 52px 0 64px; }
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: 24px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .stat:first-child { border-top: 0; padding-top: 26px; }
  .stat p { max-width: none; }
  .job__body { padding: 26px 22px 22px; }
  .prep__head { display: block; }
  .prep__done { margin-top: 14px; }
  .prep__row { padding: 15px 20px; }
  .prep__head, .prep__foot { padding-inline: 20px; }
  /* Phone-width columns, sized so every cell holds one line down to 360px:
     the middle column carries the longest text ("Your afternoon"), the third
     carries the tracked WITH COOPER head — measured, not eyeballed */
  .cmp__row, .cmp__head { padding-inline: 16px; gap: 10px; font-size: 15.5px; grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.11fr) minmax(0, 0.96fr); }
  .cmp__head { font-size: 11.5px; letter-spacing: 0.06em; }
  .faq-a p { padding-right: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .hero__actions .btn { width: 100%; }
  .cmp__row { font-size: 15px; }
  .cmp__head { font-size: 11.5px; }
  /* One size down again so brand + Book a demo + toggle fit a 360px bar */
  .nav > .container { gap: 10px; padding-inline: 14px 6px; }
  .brand { font-size: 18px; gap: 8px; }
  .brand__mark { width: 24px; height: 24px; }
  .nav__cta .btn { font-size: 14px; padding: 8px 11px; }
}

/* Below any real phone (360px is the floor): the hero's CTAs are a swipe away,
   the brand needs the room */
@media (max-width: 340px) {
  .nav__cta .btn--primary { display: none; }
}
/* =========================================================
   Talk to Cooper — mic pre-flight popup + on-call state
   ========================================================= */
.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 24px; 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, .cal-modal__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, .cal-modal__close:hover { background: var(--bg-2); }
.voice-mic { width: 64px; height: 64px; margin: 6px auto 0; border-radius: 50%; background: rgba(194,80,31,0.10); color: var(--primary); display: grid; place-items: center; }
.voice-title { font-size: 23px; margin-top: 18px; }
.voice-hint { margin-top: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.voice-hint code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
/* 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: 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.voice-legal a { color: var(--primary); font-weight: 600; text-decoration: underline; }
.voice-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 4px; }
.voice-btn { font-family: var(--font-head); font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; transition: transform .15s ease, background .15s ease, color .15s ease; }
.voice-btn:active { transform: translateY(1px); }
.voice-btn--primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-primary); }
.voice-btn--primary:hover { background: var(--primary-600); transform: translateY(-1px); }
.voice-btn--primary:disabled { opacity: .7; transform: none; box-shadow: none; cursor: default; }
.voice-btn--quiet { background: none; color: var(--muted); }
.voice-btn--quiet:hover { color: var(--text); }
/* Only ever carries errors (mic blocked, call failed) — red on purpose. */
.voice-status { margin-top: 12px; font-size: 13.5px; line-height: 1.5; font-weight: 600; color: #cf3b40; }

/* --- Live call: the page's own CTAs become the hang-up controls --- */
.is-oncall, .band--dark .btn--ghost.is-oncall { background: #e5484d; color: #fff; border-color: transparent; }
.is-oncall:hover, .band--dark .btn--ghost.is-oncall:hover { background: #cf3b40; color: #fff; border-color: transparent; transform: none; }
.linkbtn.is-oncall { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.call-timer { font-variant-numeric: tabular-nums; opacity: .85; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; animation: liveDot 1.6s ease-in-out infinite; }
@keyframes liveDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Under 860px the nav's Talk to Cooper is hidden, so while a call is live the
   bar surfaces with the End call button — a phone user must always be able
   to hang up. It exists for no other reason. */
@media (max-width: 860px) {
  body.cooper-oncall .mobile-cta { display: block; }
}

/* =========================================================
   Booking modal — the voice modal's overlay, sized for the
   Calendly embed. The holder's height lives here (not inline)
   so it can give way on short screens; Calendly's iframe fills
   whatever the holder measures.
   ========================================================= */
.cal-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; }
.cal-modal.open { display: flex; opacity: 1; }
.cal-modal__card { width: 100%; max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; position: relative; color: var(--text); transform: translateY(12px) scale(.98); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.cal-modal.open .cal-modal__card { transform: none; }
.cal-modal__card .calendar__head { padding-right: 64px; }   /* clear the close button */
.cal-modal__body { position: relative; }
/* Sits behind the iframe: visible while Calendly boots, covered once it
   paints, and still there (with new text) if the script is blocked. */
.cal-modal__loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 14.5px; color: var(--muted-2); }
.cal-modal__body .calendly-inline-widget { position: relative; height: min(620px, calc(100vh - 190px)); height: min(620px, calc(100dvh - 190px)); }
.cal-modal .calendar__fallback { padding-top: 14px; }
@media (max-width: 480px) { .cal-modal { padding: 12px; } }