/* Virterra Assistant website draft, version 8 with the shortening pass of 2026-10-07, plus the policy pages and consent boxes of 2026-10-07.
   Brand rules: marketing/brand-guide.md. Design notes: docs/website.md.
   Dark ink bands, light reading areas. Cobalt is the accent on white or mist only.
   Never cobalt on ink. */

/* ---------- Font (self-hosted, SIL Open Font License, see fonts/OFL.txt) ---------- */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-variable.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --ink: #111827;
  --white: #ffffff;
  --cobalt: #1f4fd8;
  --cobalt-dark: #1a41b3;
  --mist: #f3f6fb;
  --cobalt-tint: #d6e2fb;    /* light cobalt: automated texts the business sends, and the timeline's line */
  --line: #d9e0ec;
  --muted: #4b5563;          /* secondary text on white or mist */
  --on-ink-muted: #d5dbe6;   /* secondary text on ink */
  --draft: #fde68a;          /* draft markers only, not a brand color */

  --font: "Nunito Sans", "Avenir Next", Avenir, Arial, sans-serif;
  --radius: 20px;
  --radius-small: 12px;
  --container: 1160px;
  --gutter: 20px;
  --section: clamp(56px, 8vw, 104px);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.25rem, 5.2vw + 0.6rem, 4.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 2.6vw + 1rem, 2.75rem);
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  color: var(--cobalt-dark);
}

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}

.band-ink :focus-visible {
  outline-color: var(--white);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 10;
  padding: 12px 18px;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  border-radius: 8px;
}

.skip-link:focus {
  top: 12px;
}

/* Holder for shared drawings (the brand mark, the check, the send icon). Takes no room. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The brand mark beside every "Virtual assistant" label, and the send icon beside automated texts. */
.va-mark,
.who-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.who-icon {
  color: var(--cobalt-dark);
}

/* A result: what changed for the customer or the owner. Check in a cobalt disc, ink text. */
.result-icon {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--cobalt);
  color: var(--white);
}

.card .result,
.result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.result .result-icon {
  margin-top: 1px;
}

/* ---------- Bands ---------- */
.band {
  padding-block: var(--section);
}

.band-white {
  background: var(--white);
}

.band-mist {
  background: var(--mist);
}

.band-ink {
  background: var(--ink);
  color: var(--white);
}

.band-ink a {
  color: var(--white);
}

.band-ink a:hover {
  color: var(--on-ink-muted);
}

/* ---------- Buttons: one label everywhere, "Try a test call" ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 30px;
  border: 2px solid var(--cobalt);
  border-radius: 999px;
  background: var(--cobalt);
  color: var(--white);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background: var(--cobalt-dark);
  border-color: var(--cobalt-dark);
  color: var(--white);
}

/* On ink: white button, ink text (brand guide) */
.band-ink .btn {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.band-ink .btn:hover {
  background: var(--mist);
  border-color: var(--mist);
  color: var(--ink);
}

.btn[disabled] {
  background: #e5e9f1;
  border-color: #e5e9f1;
  color: var(--muted);
  cursor: not-allowed;
}

.link-more {
  display: inline-block;
  font-weight: 700;
}

/* ---------- Draft markers (remove each one as the real content arrives) ---------- */
.draft-ribbon {
  background: var(--draft);
  color: var(--ink);
  border-bottom: 2px dashed var(--ink);
  padding: 10px 0;
  font-size: 0.9375rem;
  font-weight: 700;
  text-align: center;
}

.draft-tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1.5px dashed var(--ink);
  border-radius: 6px;
  background: var(--draft);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}

/* ---------- Section 0: announcement bar ---------- */
.announce {
  background: var(--mist);
  padding: 10px 0;
  font-size: 0.9375rem;
  text-align: center;
}

.announce a {
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Section 1: header ---------- */
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  padding-block: 14px;
}

.logo {
  display: block;
  flex: none;
  width: 164px;
  line-height: 0;
}

.logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 16px;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
}

.site-nav {
  flex: 1 0 100%;
  padding-top: 12px;
}

.site-nav ul {
  display: flex;
  flex-direction: column;
}

.site-nav li a {
  display: block;
  padding: 14px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav li a:hover {
  text-decoration: underline;
}

.site-nav .btn {
  width: 100%;
  margin-top: 12px;
  margin-bottom: 8px;
}

/* With script: the menu is closed on small screens until the button is pressed.
   Without script: the links simply show, so nothing is unreachable. */
.js .menu-toggle {
  display: inline-flex;
}

.js .site-nav {
  display: none;
}

.js .site-nav.is-open {
  display: block;
}

@media (min-width: 880px) {
  .js .menu-toggle,
  .menu-toggle {
    display: none;
  }

  .site-nav,
  .js .site-nav,
  .js .site-nav.is-open {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 32px;
    padding-top: 0;
  }

  .site-nav ul {
    flex-direction: row;
    gap: 32px;
  }

  .site-nav li a {
    padding: 10px 0;
    border-top: 0;
    font-size: 1.0625rem;
  }

  .site-nav .btn {
    width: auto;
    margin: 0;
    min-height: 48px;
    padding: 10px 24px;
  }
}

/* ---------- Section 2: opening ---------- */
.hero {
  padding-block: clamp(40px, 6vw, 52px) clamp(48px, 7vw, 60px);
}

.hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.hero h1 {
  max-width: 17ch;
}

/* One sentence per line: "Help them." always starts its own line. */
.h1-line {
  display: block;
}

.hero-lead {
  max-width: 34em;
  margin-top: 24px;
  font-size: clamp(1.125rem, 0.6vw + 1rem, 1.25rem);
  line-height: 1.55;
  color: var(--on-ink-muted);
}

.hero-cta {
  margin-top: 28px;
}

.hero-note {
  margin-top: 14px;
  font-size: 1.125rem;
  color: var(--on-ink-muted);
}

/* Opening graphic (version 8): four separate scene tiles, one customer in each. Illustration only.
   Each tile is its own white card on the ink band with space all round, so nothing joins them into one thread:
   no phone frame, no left and right bubbles, no line from tile to tile.
   Inside a tile, top to bottom: channel label, the customer's line (plain), the virtual assistant's reply
   (mist panel, cobalt left edge, brand mark), and the result chip (ink pill with a check).
   Under 700 px tiles 1 and 3 show, stacked. From 700 px all four show, two by two. From 1100 px the grid sits beside the headline. */
.hero-art {
  max-width: 26rem;
}

.hero-art-intro {
  margin-bottom: 14px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.when-four {
  display: none;
}

.tiles {
  display: grid;
  gap: 14px;
}

.tile {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
}

.tile:nth-child(1),
.tile:nth-child(3) {
  display: flex;
}

.tile-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tile-channel svg {
  flex: none;
  width: 22px;
  height: 22px;
}

.tile-who {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}

.tile-who .va-mark,
.tile-who .who-icon {
  width: 16px;
  height: 16px;
}

.tile-say {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.tile-customer {
  padding-inline: 2px;
}

.tile-va {
  padding: 8px 10px 9px 11px;
  border-left: 3px solid var(--cobalt);
  border-radius: 3px 12px 12px 3px;
  background: var(--mist);
}

.tile-va .tile-who {
  color: var(--cobalt-dark);
}

/* Tile 4 only: the automated text the business sent first. Dashed edge, so it is not mistaken for the assistant's reply. */
.tile-auto {
  padding: 8px 10px 9px;
  border: 1px dashed #9aa6ba;
  border-radius: 12px;
}

.tile-result {
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  gap: 7px;
  margin-top: auto;
  padding: 6px 12px 6px 7px;
  border-radius: 15px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
}

.tile-result .result-icon {
  width: 18px;
  height: 18px;
  background: var(--white);
  color: var(--ink);
}

.tile-tag .draft-tag {
  font-size: 0.75rem;
}

@media (min-width: 700px) {
  .hero-art {
    max-width: 44rem;
  }

  .when-four {
    display: inline;
  }

  .when-two {
    display: none;
  }

  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile,
  .tile:nth-child(1),
  .tile:nth-child(3) {
    display: flex;
  }
}

@media (min-width: 1100px) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: 44px;
  }

  .hero h1 {
    font-size: clamp(3rem, 4.4vw, 3.5rem);
  }

  .hero-art {
    max-width: none;
  }

  .hero-art-intro {
    margin-bottom: 12px;
  }

  .tiles {
    gap: 12px;
  }
}

/* ---------- Section 3: trust strip ---------- */
.trust {
  padding-block: 36px;
  text-align: center;
}

.trust p {
  color: var(--muted);
  font-size: 1rem;
}

.trust-towns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 40px;
  margin-block: 12px;
  font-size: clamp(1.125rem, 1vw + 0.9rem, 1.5rem);
  font-weight: 700;
}

/* ---------- Section headings ---------- */
.section-head {
  max-width: 46rem;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head p {
  margin-top: 16px;
  font-size: 1.1875rem;
  color: var(--muted);
}

/* Section 5B's supporting line: both sentences the same size, weight, and ink color, so "not a result we have measured" is not skimmed past. */
.section-head .section-plain {
  color: var(--ink);
}

.section-foot {
  margin-top: clamp(28px, 4vw, 44px);
  font-size: 1.125rem;
  font-weight: 700;
}

/* The sentence that says the examples are made up. Same words, set in ink so it is not skimmed past. */
.section-head .made-up {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Cards ---------- */
.cards {
  display: grid;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.card p {
  color: var(--muted);
}

/* Section 4: six capability cards. All six are built the same.
   Order inside a card: channel label, outcome caption (the heading), promise, example, then "More about this"
   (the points and "Good to know", closed until asked for). */
.cards-caps {
  gap: 16px;
}

.cap {
  align-items: stretch;
  padding: 20px;
  font-size: 1rem;
}

.cap h3 {
  font-size: clamp(1.5rem, 1.4vw + 1.15rem, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.cap-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cap-kicker svg {
  flex: none;
  width: 32px;
  height: 32px;
}

.cap-caption {
  display: block;
}

.cap .cap-promise {
  margin-top: 12px;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.cap-points {
  color: var(--muted);
}

.cap-points li {
  position: relative;
  padding-left: 18px;
}

.cap-points li + li {
  margin-top: 8px;
}

.cap-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cobalt);
}

/* Example conversations: made up, always open, each with its "Example: ..." label directly above it. */
.example {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.card .example-label,
.year .example-label {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Text, social, chat, and reminder examples. Three speakers, each with a visible label on every line:
   - Customer: mist bubble at left.
   - Virtual assistant: cobalt bubble at right, under a cobalt label with the brand mark, so it is not taken for a person.
   - Automated text from the business: light cobalt bubble with a dashed edge at right, under a label with a send icon. */
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 92%;
}

.msg-out {
  align-self: flex-end;
  align-items: flex-end;
}

.msg-who {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.who-va,
.who-auto {
  color: var(--cobalt-dark);
}

.msg-text {
  padding: 9px 14px;
  border-radius: 16px;
  font-size: 1rem;
  line-height: 1.45;
}

.msg-in .msg-text {
  border-bottom-left-radius: 4px;
  background: var(--mist);
  color: var(--ink);
}

.msg-out .msg-text {
  border-bottom-right-radius: 4px;
  background: var(--cobalt);
  color: var(--white);
}

.msg-auto .msg-text {
  border: 1px dashed var(--cobalt);
  background: #eef3fe;
  color: var(--ink);
}

.example-label .draft-tag {
  margin-top: 6px;
}

/* The lead card (cancellation and waitlist): the example is two customers, so it is two separate boxes, each with a numbered heading.
   Between them a short dashed line carries a chip for the freed slot. Nothing else joins them. */
.parts {
  display: block;
}

.part {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.part-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.part-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px 10px 10px 3px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.9375rem;
  line-height: 1;
}

.part-link {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.part-link::before,
.part-link::after {
  content: "";
  height: 12px;
  border-left: 2px dashed var(--cobalt);
}

.part-link::after {
  height: 14px;
}

.slot-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 9px;
  border: 1.5px solid var(--cobalt);
  border-radius: 999px;
  background: var(--white);
  color: var(--cobalt-dark);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.slot-chip svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Phone example: a short script. Each spoken line is its own mist row with a rule down its left side:
   cobalt for the virtual assistant, gray for the caller. */
.script {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1rem;
  line-height: 1.45;
}

.script li {
  padding: 10px 16px 12px;
  border-left: 3px solid var(--cobalt);
  border-radius: 4px 16px 16px 4px;
  background: var(--mist);
}

.script .script-caller {
  border-left-color: #6b7280;
}

.script-who {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.script-who.who-va {
  color: var(--cobalt-dark);
}

/* Points and "Good to know": a details element, closed behind "More about this" at every width (48 px tall,
   no script), so each card ends on its conversation. The body holds its example and the control in a column,
   and the control sits at the bottom, so two cards in a row line their controls up. */
.cap-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.more {
  margin-top: auto;
}

.more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--cobalt);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.more summary:hover {
  color: var(--cobalt-dark);
}

.more summary::-webkit-details-marker {
  display: none;
}

.more summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(var(--cobalt), var(--cobalt)) center / 12px 3px no-repeat,
    linear-gradient(var(--cobalt), var(--cobalt)) center / 3px 12px no-repeat,
    var(--mist);
}

.more[open] summary::after {
  background:
    linear-gradient(var(--cobalt), var(--cobalt)) center / 12px 3px no-repeat,
    var(--mist);
}

.more-body {
  padding-top: 4px;
}

/* "Good to know" is body-size ink text under an ink rule. It is part of the offer, not fine print. */
.cap-note {
  margin-top: 18px;
}

.cap-note-label {
  padding-top: 14px;
  border-top: 3px solid var(--ink);
  font-weight: 700;
}

.cap .cap-note-label,
.cap .cap-note p {
  color: var(--ink);
}

@media (min-width: 700px) {
  .cards-caps {
    gap: 24px;
  }

  .cap {
    padding: 28px;
  }
}

/* Two across from 880 px, and it stays two on desktop: the conversations need the width.
   Below 880 px a two-column card would be narrower than a phone. */
@media (min-width: 880px) {
  .cards-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The two cards in a row share two rows (label, caption, and promise, then everything else), so both
     conversations start on the same line and spare room falls at the bottom of the shorter card.
     Browsers without subgrid simply stack each card. */
  @supports (grid-template-rows: subgrid) {
    .cap:not(.cap-wide) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      row-gap: 0;
    }
  }

  /* The lead card and the campaigns card each take the full row. The lead card's example is two customers, so its two
     boxes sit side by side with the freed slot between them. */
  .cap-wide {
    grid-column: 1 / -1;
  }

  .cap-wide .cap-head {
    max-width: 46rem;
  }

  .parts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
  }

  .part-link {
    flex-direction: row;
    align-self: center;
  }

  .part-link::before,
  .part-link::after {
    width: 10px;
    height: 0;
    border-left: 0;
    border-top: 2px dashed var(--cobalt);
  }

  .part-link::after {
    width: 12px;
    height: 0;
  }

  .slot-chip {
    flex-direction: column;
    gap: 4px;
    max-width: 6.5rem;
    padding: 10px 8px;
    border-radius: 14px;
    text-align: center;
  }

  .slot-chip svg {
    width: 20px;
    height: 20px;
  }

  .slot-chip-end {
    display: block;
  }

  /* On a full row the control keeps its mark beside its words instead of a card's width away. */
  .cap-wide .more summary {
    justify-content: flex-start;
  }

  /* Opened on a full row: points at left, "Good to know" at right. */
  .cap-wide:not(.cap-split) .more-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    align-items: start;
  }

  .cap-wide:not(.cap-split) .cap-note {
    margin-top: 0;
  }

  /* The campaigns card: label, caption, and promise at left, the example and its control at right. */
  .cap-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    align-items: start;
  }

  .cap-split .example {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- Section 5A: outbound, one customer's year ---------- */
/* An ordered list of two steps. Each step: a numbered marker in the logo's bubble shape, when, what goes out,
   then a short conversation (automated text, customer, virtual assistant) and a result line.
   Under 700 px the marker sits beside the step's heading and the conversation uses the full width.
   From 700 px a line runs down the left side from the first marker to the second.
   From 880 px the steps sit in two top-aligned columns and the line runs across the top, from one marker to the next. */
.section-head .section-big {
  margin-top: 18px;
  color: var(--ink);
  font-size: clamp(1.375rem, 1.2vw + 1.05rem, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.year {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.year .example-label {
  margin-bottom: 6px;
}

.year-note {
  margin-bottom: 24px;
}

.timeline {
  display: grid;
  gap: 36px;
}

.step {
  position: relative;
  max-width: 38rem;
}

.step-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.step-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 14px 14px 14px 4px;
  background: var(--cobalt);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.step-when {
  display: block;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.step-what {
  display: block;
  margin-top: 4px;
  color: var(--cobalt);
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.step-body {
  margin-top: 16px;
}

.step .result {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* Stand-in for the owner's review link inside an example text. Not a link. */
.link-standin {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.outbound-foot {
  max-width: 46rem;
  margin-top: clamp(28px, 4vw, 44px);
}

.outbound-replies {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.45;
}

/* The consent line is body-size ink text under an ink rule, like "Good to know". Not fine print. */
.outbound-consent {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 3px solid var(--ink);
}

@media (min-width: 700px) {
  .year {
    padding: 28px;
  }

  .step {
    padding-left: 58px;
  }

  .step-num {
    position: absolute;
    left: 0;
    top: 0;
  }

  .step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 46px;
    bottom: -30px;
    width: 4px;
    border-radius: 2px;
    background: var(--cobalt-tint);
  }
}

@media (min-width: 880px) {
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    align-items: start;
  }

  .step {
    max-width: none;
    padding-left: 0;
    padding-top: 58px;
  }

  .step:not(:last-child)::before {
    left: 46px;
    right: -34px;
    top: 18px;
    bottom: auto;
    width: auto;
    height: 4px;
  }

  /* The two steps share two rows (when and what, then the conversation), so both conversations start on one line.
     Each result line sits directly under its own conversation. */
  @supports (grid-template-rows: subgrid) {
    .step {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      align-items: start;
    }
  }
}

/* ---------- Section 5B: the business case ---------- */
.case-grid {
  display: grid;
  gap: 20px;
}

.case {
  align-items: stretch;
}

.case h3 {
  font-size: clamp(1.5rem, 1.4vw + 1.15rem, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.case-list {
  margin-top: 20px;
  color: var(--muted);
}

.case-list li {
  padding-block: 16px;
  border-top: 1px solid var(--line);
}

.case-list strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.3;
}

.case .case-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 3px solid var(--ink);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

/* The draft tag after a lead sits on its own line, above the sentence. */
.case-list .draft-tag {
  margin-bottom: 6px;
}

.case-text {
  display: block;
}

/* Under the columns: one question in large text, the button, then the calculator line while it is a draft. */
.case-close {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 50rem;
  margin-top: clamp(36px, 5vw, 60px);
}

.case-question {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.case-close .btn {
  margin-top: 24px;
}

.case-calc {
  margin-top: 24px;
  font-size: 1.125rem;
  font-weight: 700;
}

@media (min-width: 800px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Section 6: proof cards */
.card .proof-number {
  margin-bottom: 14px;
  color: var(--cobalt);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.proof h3 {
  margin-bottom: 8px;
}

@media (min-width: 620px) {
  .cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .cards-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Section 5 and 10: statement and closing bands ---------- */
.statement {
  text-align: center;
}

.statement h2 {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(1.875rem, 3.6vw + 0.9rem, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.statement p {
  max-width: 36rem;
  margin: 24px auto 0;
  font-size: clamp(1.125rem, 0.8vw + 1rem, 1.375rem);
  color: var(--on-ink-muted);
}

.statement .btn {
  margin-top: 32px;
}

.closing {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* ---------- Section 8: one feature band, one heading over six blocks ---------- */
.feature-intro {
  max-width: 46rem;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.feature-intro .link-more {
  margin-top: 16px;
}

.feature-blocks {
  display: grid;
  gap: 28px 32px;
}

.feature-blocks li {
  padding-top: 18px;
  border-top: 3px solid var(--ink);
}

.feature-blocks h3 {
  margin-bottom: 8px;
}

.feature-blocks p {
  color: var(--muted);
}

@media (min-width: 620px) {
  .feature-blocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .feature-blocks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Section 9: straight answers ---------- */
.faq-wrap {
  max-width: 52rem;
}

.faq-title {
  margin-bottom: 8px;
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    linear-gradient(var(--cobalt), var(--cobalt)) center / 14px 3px no-repeat,
    linear-gradient(var(--cobalt), var(--cobalt)) center / 3px 14px no-repeat,
    var(--mist);
}

.faq details[open] summary::after {
  background:
    linear-gradient(var(--cobalt), var(--cobalt)) center / 14px 3px no-repeat,
    var(--mist);
}

.faq details p {
  padding: 0 44px 22px 4px;
  color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 56px 32px;
  font-size: 1rem;
}

.footer-grid {
  display: grid;
  gap: 36px;
}

.footer-brand .logo {
  width: 164px;
  margin-bottom: 20px;
}

.footer-brand p {
  max-width: 22rem;
  color: var(--on-ink-muted);
}

.footer-heading {
  margin-bottom: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.footer-col li {
  margin-bottom: 4px;
}

.footer-col li a {
  display: inline-block;
  padding: 6px 0;
}

.footer-col li .draft-tag {
  margin: 6px 0;
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.9375rem;
  color: var(--on-ink-muted);
}

.footer-bottom p + p {
  margin-top: 10px;
}

/* Policy links: on every page, in the footer's bottom row. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin-block: 6px;
}

.footer-legal a {
  display: inline-block;
  padding: 8px 0;
}

@media (min-width: 620px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
}

/* ---------- Test call page and simple pages ---------- */
.page-head {
  padding-block: clamp(40px, 6vw, 72px);
}

.page-head h1 {
  font-size: clamp(2.125rem, 4vw + 0.8rem, 3.5rem);
}

.page-head p {
  margin-top: 16px;
  font-size: 1.25rem;
  color: var(--on-ink-muted);
}

.form-card {
  max-width: 640px;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}

.field input,
.field select {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid #6b7280;
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
}

.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--cobalt);
  outline-offset: 1px;
}

.form-draft-note {
  margin-bottom: 20px;
}

/* Test call page: "What happens next", three numbered steps above the form (2026-10-16). */
.next-steps {
  max-width: 640px;
  margin-bottom: 28px;
}

.next-steps-title {
  margin-bottom: 16px;
  font-size: 1.5rem;
}

.next-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.next-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.next-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cobalt);
  color: var(--white);
  font-weight: 700;
}

.next-text {
  padding-top: 5px;
  font-size: 1.0625rem;
}

.simple-title {
  margin-top: 16px;
  font-size: 2.25rem;
}

.simple-text {
  max-width: 38rem;
  margin-top: 16px;
}

.simple-back {
  margin-top: 24px;
}

.form-note {
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.notice {
  max-width: 640px;
  margin-top: 28px;
  padding: 20px 24px;
  border: 2px dashed #9aa6ba;
  border-radius: var(--radius-small);
  background: var(--white);
}

.notice p + p {
  margin-top: 10px;
}

/* Text message consent on the test call form: two optional boxes, never checked for the visitor.
   The label text is required wording. Body-size ink text, not fine print. */
.field-hint {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--muted);
}

.consent {
  min-width: 0;
  margin: 0 0 24px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
}

.consent legend {
  padding: 0 6px;
  font-weight: 700;
}

.consent-note {
  margin-bottom: 16px;
  font-size: 1rem;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--cobalt);
}

.check label {
  font-size: 1rem;
  line-height: 1.5;
}

/* The written consent disclosure for marketing texts. Sits directly under the marketing box, lined up with its label, outside the label. */
.check-help {
  margin: -6px 0 16px 36px;
  font-size: 1rem;
  line-height: 1.5;
}

/* Policy links come before the button, so they are read before sending. */
.form-legal {
  margin-bottom: 20px;
  font-size: 1rem;
}

/* ---------- Policy pages: one column, plain headings, short paragraphs ---------- */
.legal {
  max-width: 44rem;
}

.legal-meta {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 1rem;
}

.legal h2 {
  margin-top: 44px;
  margin-bottom: 12px;
  font-size: clamp(1.375rem, 1vw + 1.15rem, 1.75rem);
  line-height: 1.2;
}

.legal h3 {
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: 1.125rem;
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: 12px;
}

.legal ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.legal li + li {
  margin-top: 8px;
}

.legal-summary {
  margin-top: 24px;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--mist);
}

.legal-summary h2 {
  margin-top: 0;
}

/* Wording that carriers require word for word. Marked so nobody rewrites it by accident. */
.legal-clause {
  padding: 12px 16px;
  border-left: 3px solid var(--ink);
  border-radius: 3px 12px 12px 3px;
  background: var(--mist);
}

.legal-contact {
  font-style: normal;
  line-height: 1.8;
}

.legal-contact + p {
  margin-top: 16px;
}

/* ---------- Tablet and up ---------- */
@media (min-width: 620px) {
  :root {
    --gutter: 32px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}