/* ============================================================
   BuildQM Website — styles
   Visual system modelled on layerdesign.com (see design brief)
   ============================================================ */

:root {
  --green: #59981B;
  --green-hover: #4A7F16;
  --black: #000000;
  --white: #FFFFFF;
  --cream: #F6F3F1;
  --text: #000000;
  --text-2: #666666;
  --text-3: #999999;
  --border: #D9D9D9;
  --border-light: #F2F2F2;

  --accent-peach: #FFC89F;
  --accent-mint: #C7FEEA;
  --accent-green: #D1FFD0;
  --accent-salmon: #FFC5BD;
  --accent-lime: #E6FD8C;

  --maxw: 1326px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must beat any component `display` rule. Without this,
   a block like `.live-call { display: flex }` silently overrides the browser
   default `[hidden] { display: none }` — same specificity, author sheet wins —
   and the element shows even though the JS marked it hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
}

body {
  font-family: 'DM Sans', 'Inter', sans-serif;
  color: var(--text);
  line-height: 1.2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

input, textarea, button { font-family: inherit; }

img { max-width: 100%; }

a { color: inherit; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}
.section { padding: 90px 0; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }

.page {
  animation: fadeUp 0.5s ease both;
}
.page[hidden] { display: none; }

.grow { flex: 1; }

/* ---------- Typography ---------- */
.eyebrow {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: 16px;
}
.eyebrow--grey { color: var(--text-3); }

h1, h2, h3 { margin: 0; text-wrap: pretty; }

.h-display {
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.h-section {
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.lead {
  font-size: 20px;
  color: var(--text-2);
  line-height: 1.55;
  text-wrap: pretty;
}
.body-2 {
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  border-radius: 100px;
  padding: 16px 32px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  text-align: center;
}
.btn--green {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn--green:hover { background: var(--green-hover); border-color: var(--green-hover); }

.btn--outline-light {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn--outline-light:hover { background: var(--white); color: var(--black); }

.btn--outline-on-green:hover { background: var(--white); color: var(--green); }

.btn--sm {
  padding: 12px 24px;
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  transition: box-shadow 0.25s ease;
}
.nav.is-scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 24px, not 32px. The row is rigid — the links are `white-space: nowrap` and
     the CTA is `flex-shrink: 0` — so its width is a fixed sum, and at 32px that
     sum was 1341.2px against a 1326px container. Trimming the two group gaps by
     8px each brings it to 1325.2px, which is the whole reason the CTA now lands
     on the site's 1530px content edge instead of 15.3px past it (#36). */
  gap: 24px;
}
.nav__logo {
  height: 30px;
  width: auto;
  cursor: pointer;
  flex-shrink: 0;
  display: block;
}
/* gap was 32px for six links. The MOC Credits reveal (#9) made seven, and the
   row then needed 1373px inside a 1326px container — so it spilled past the
   container at every desktop width, pushing "Talk to an expert" off the right
   edge and giving the whole site a horizontal scrollbar.
   ⚠️ Corrected 2026-08-26 (#36): 20px did NOT bring the row "back inside the
   container with room to spare". It brought 1373px down to 1341.2px — still
   15.2px over — so the CTA kept hanging past the content edge at every desktop
   width, and every width from 901px to 1301px kept its horizontal scrollbar.
   The cure was the .nav__inner gap above plus the 1325px breakpoint below;
   this 20px is load-bearing for both, so do not raise it back. */
.nav__links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav__link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--black);
  cursor: pointer;
  padding-bottom: 5px;
  background-image: linear-gradient(var(--accent, var(--green)), var(--accent, var(--green)));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: background-size 0.25s ease;
  border: none;
  background-color: transparent;
  white-space: nowrap;
}
.nav__link:hover { background-size: 100% 2px; }
.nav__link.is-active { background-size: 100% 2px; }

.nav__cta { flex-shrink: 0; }

/* hamburger */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav__toggle span {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--black);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--black) center / cover no-repeat;
}
.hero__overlay {
  background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.25) 100%);
}
.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 140px 40px 130px;
}
.hero__title {
  margin: 0;
  color: var(--white);
  font-size: clamp(48px, 6.2vw, 96px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 980px;
  text-wrap: pretty;
}
.hero__sub {
  margin: 32px 0 0;
  color: var(--white);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 720px;
  opacity: 0.9;
  text-wrap: pretty;
}
.hero__pull {
  margin: 36px 0 0;
  color: var(--green);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
}
.hero__cta {
  display: flex;
  gap: 16px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.hero__eyebrow {
  color: var(--green);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.hero__anchor {
  margin: 48px 0 0;
  color: var(--white);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ============================================================
   HOME — value cards
   ============================================================ */
.cards {
  display: grid;
  /* min(320px, 100%) — same hard-floor trap as `.split`; see the note there (#60). */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
}
.card {
  background: var(--white);
  border: 1px solid var(--border-light);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.07);
  transform: translateY(-4px);
}
.card__bar { height: 4px; }
.card__body { padding: 36px 32px 40px; }
.card__title {
  margin: 0 0 16px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
}
.card__text {
  margin: 0;
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.55;
  text-wrap: pretty;
}

/* What BuildQM brings — columns */
.cols {
  display: grid;
  /* min(300px, 100%) — same hard-floor trap as `.split`; see the note there (#60).
     This one was the live offender on `#home` at 320px. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px;
}
/* Fixed 4-up — the capability sequence needs four co-equal nodes, so auto-fit
   (which wraps to 3+1 and visually demotes the fourth) is not used here. */
.cols--4 { grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 1000px) { .cols--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cols--4 { grid-template-columns: 1fr; } }
/* The 4-up strips carry no ordinal — the nodes are co-equal, so 01–04 would
   rank them — and the title is centred over its column in their place. The
   2-up .cols strips keep .col__num and stay left-aligned. */
.cols--4 .col__title { text-align: center; }

.col { padding-top: 28px; border-top: 3px solid var(--accent, var(--green)); }
.col__num {
  font-size: 14px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
/* The question a visitor arrives with — sits where .col__num sits */
.col__ask {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.4;
  text-wrap: pretty;
  /* Two lines' worth, so the titles below stay on a common baseline */
  min-height: 2.8em;
}
.col__title {
  margin: 0 0 16px;
  font-size: 30px;
  font-weight: 400;
}
.col__text {
  margin: 0;
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Green closing band */
.band {
  background: var(--green);
  padding: 90px 0;
}
.band__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
.band__title {
  margin: 0 0 24px;
  color: var(--white);
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.band__text {
  margin: 0 0 40px;
  color: var(--white);
  font-size: 19px;
  line-height: 1.55;
  opacity: 0.92;
  text-wrap: pretty;
}
.band--dark { background: var(--black); padding: 72px 0; }

/* ============================================================
   HOME — Manufacturing Reality list (recognition journey)
   ============================================================ */
.reality-list { display: flex; flex-direction: column; }
.reality-item { padding: 32px 0; border-top: 1px solid var(--border); }
.reality-item:last-child { border-bottom: 1px solid var(--border); }
.reality-item__label {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}
.reality-item__text {
  margin: 0;
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 820px;
  text-wrap: pretty;
}
.reality-close {
  margin: 48px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.45;
}
.oem-callout {
  margin: 44px auto 0;
  max-width: 820px;
  background: var(--white);
  border-left: 4px solid var(--green);
  padding: 28px 32px;
}
.oem-callout--cream { background: var(--cream); }
.oem-callout__label {
  margin: 0 0 12px;
  color: var(--green);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.oem-callout__text {
  margin: 0;
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ============================================================
   Two-column split (How / Serve intro)
   ============================================================ */
.split {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  /* min(360px, 100%), not a bare 360px. `minmax(360px, …)` is a HARD floor that
     `auto-fit` cannot collapse below, so under 700px — where the padding drops
     to 24px a side — the column stayed 360px wide and pushed the page out to
     384px. That gave `index.html` a horizontal scrollbar on every 375pt iPhone
     (SE, 8, X, 11 Pro, 12/13 mini) while 390–393pt iPhones looked fine, which is
     why a mobile eyeball could pass it (#60). Wrapping the floor in `min()` lets
     the column shrink with the viewport and leaves the 360px two-column
     threshold untouched above it. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 64px;
  align-items: center;
}
.split__img { width: 100%; height: auto; display: block; }

/* ============================================================
   How We Work — numbered rows
   ============================================================ */
.rows { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
.row:last-child { border-bottom: 1px solid var(--border); }
.row__num {
  font-size: 16px;
  color: var(--text-3);
  letter-spacing: 0.1em;
  padding-top: 6px;
  border-top: 3px solid var(--accent, var(--green));
  align-self: start;
  width: 60px;
}
.row__title {
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  text-wrap: pretty;
}
.row__text {
  margin: 0;
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 820px;
  text-wrap: pretty;
}

/* Centered pull quote */
.pull {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
.pull__quote {
  margin: 0 0 40px;
  color: var(--green);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.35;
  text-wrap: pretty;
}
.pull__quote--nomargin { margin: 0; }

.textlink {
  font-size: 17px;
  font-weight: 500;
  color: var(--black);
  cursor: pointer;
  padding-bottom: 5px;
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 2px;
  transition: opacity 0.2s ease;
  border: none;
  background-color: transparent;
  display: inline-block;
}
.textlink:hover { opacity: 0.7; }
.textlink--lg { font-size: 20px; padding-bottom: 6px; }

/* ============================================================
   Who We Serve — panels
   ============================================================ */
.panel {
  background: var(--white);
  border-top: 3px solid var(--accent, var(--green));
  padding: 48px 48px 52px;
  margin-bottom: 32px;
}
.panel:last-child { margin-bottom: 0; }
.panel__title {
  margin: 0 0 20px;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.25;
  max-width: 900px;
  text-wrap: pretty;
}
.panel__text {
  margin: 0 0 28px;
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 920px;
  text-wrap: pretty;
}
.panel__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 10px;
}
.panel__cap {
  margin: 0;
  font-size: 18px;
  color: var(--black);
  line-height: 1.55;
  max-width: 920px;
  text-wrap: pretty;
}
.panel--split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.panel--split .panel__title,
.panel--split .panel__text,
.panel--split .panel__cap { max-width: none; }
.panel__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
.panel__figure { margin: 0; }
.split__figure { margin: 0; }
.panel__label--sub {
  margin: -8px 0 20px;
  text-transform: uppercase;
  max-width: 900px;
  text-wrap: pretty;
  line-height: 1.4;
}
.img-caption {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
  text-wrap: pretty;
}
@media (max-width: 860px) {
  .panel--split { grid-template-columns: 1fr; }
}

/* ============================================================
   Capability Gaps — left-border cards
   ============================================================ */
.gaps { display: flex; flex-direction: column; gap: 24px; }
.gap {
  background: var(--white);
  border-left: 3px solid var(--accent, var(--green));
  padding: 40px 44px;
}
.gap__tag {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 14px;
}
.gap__title {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  max-width: 860px;
  text-wrap: pretty;
}
.gap__text {
  margin: 0;
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 920px;
  text-wrap: pretty;
}

/* ============================================================
   Why BuildQM — comparison table
   ============================================================ */
.compare-wrap { overflow-x: auto; }
.compare {
  display: grid;
  /* Column 3 is BuildQM's — the widest, and the middle of the two comparators. */
  grid-template-columns: 1.1fr 1fr 1.15fr 1fr;
  min-width: 900px;
  border-top: 1px solid var(--border);
}
.compare > div { padding: 20px; font-size: 15px; }
.compare .c-rowhead {
  padding: 20px 20px 20px 0;
  font-weight: 500;
  border-bottom: 1px solid var(--border-light);
}
.compare .c-cell {
  color: var(--text-2);
  border-bottom: 1px solid var(--border-light);
}
.compare .c-head {
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.compare .c-buildqm {
  color: var(--black);
  background: rgba(89,152,27,0.06);
  border-bottom: 1px solid var(--border-light);
}
.compare .c-buildqm-head {
  font-weight: 600;
  color: var(--black);
  background: rgba(89,152,27,0.06);
  border-top: 3px solid var(--green);
  border-bottom: 1px solid var(--border);
  margin-top: -1px;
}
.compare .c-buildqm-last { border-bottom: 3px solid var(--green); }
.compare .c-blank { border-bottom: 1px solid var(--border); }

/* ============================================================
   Founder section (Why BuildQM)
   ============================================================ */
.founder {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 64px;
  align-items: start;
}
.founder__media { position: relative; }
.founder__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-top: 3px solid var(--accent-salmon);
}
.founder__body { max-width: 780px; }
.founder__name {
  margin: 0 0 8px;
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.founder__title {
  margin: 0 0 28px;
  font-size: 18px;
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.founder__text {
  margin: 0 0 18px;
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.founder__pull {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
  font-size: 19px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.45;
  text-wrap: pretty;
}
.founder__img--secondary {
  margin-top: 20px;
  aspect-ratio: auto;
  border-top: none;
}
.founder__provenance { margin: 40px 0 0; }
.founder__provenance img {
  width: 100%;
  height: auto;
  display: block;
}
.founder__provenance figcaption {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
}

@media (max-width: 800px) {
  .founder {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .founder__media { max-width: 360px; }
}

/* ============================================================
   Team band (Why BuildQM)
   ============================================================ */
.team-band__img {
  width: 100%;
  max-width: 1080px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  /* min(360px, 100%) — same hard-floor trap as `.split`; see the note there (#60). */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 80px;
  align-items: start;
}
.contact__rule {
  width: 120px;
  height: 4px;
  background: var(--accent-lime);
  margin-bottom: 28px;
}
.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--cream);
  padding: 44px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--black);
}
.field input, .field textarea {
  border: 1px solid var(--border);
  background: var(--white);
  padding: 14px 16px;
  font-size: 16px;
  outline-color: var(--green);
}
.field textarea { resize: vertical; }
.form .btn { margin-top: 8px; }

.thanks {
  background: var(--cream);
  padding: 60px 44px;
  border-top: 4px solid var(--accent-lime);
}
.thanks h3 { margin: 0 0 14px; font-size: 28px; font-weight: 500; }
.thanks p { margin: 0; font-size: 18px; color: var(--text-2); line-height: 1.55; }

.form__error {
  margin: 4px 0 0;
  font-size: 15px;
  color: #b3261e;
}

.link-green { color: var(--green); font-weight: 500; text-decoration: none; }
.link-green:hover { text-decoration: underline; }

/* ---- Contact: live-call availability CTA (shown only when an expert is available) ---- */
.live-call {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin: 0 0 20px;
  background: var(--white);
  border: 1px solid var(--green);
  border-radius: 12px;
}
.live-call__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(89, 152, 27, 0.5);
  animation: liveCallPulse 2s infinite;
}
@keyframes liveCallPulse {
  0%   { box-shadow: 0 0 0 0 rgba(89, 152, 27, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(89, 152, 27, 0); }
  100% { box-shadow: 0 0 0 0 rgba(89, 152, 27, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-call__dot { animation: none; }
}
.live-call__body { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.live-call__title { font-size: 15px; font-weight: 600; color: var(--text); }
.live-call__sub { font-size: 13px; color: var(--text-2); }
/* Keep the CTA at its natural width as the banner copy wraps; stack it on narrow screens. */
.live-call .btn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .live-call { flex-wrap: wrap; }
  .live-call__body { margin-right: 0; }
}
.live-call__status { font-size: 13px; color: var(--text-2); margin: 0 0 16px; }

/* Intake panel (name + reason before connecting) */
.live-intake {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  margin: 0 0 20px;
  background: var(--white);
}
.live-intake__title { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.live-intake__consent { font-size: 13px; color: var(--text-2); margin: 0 0 16px; }
.live-intake__opt { color: var(--text-3); font-weight: 400; }
.live-intake__actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }

/* Light-background secondary button (styles.css only ships dark-bg outlines) */
.btn--line { background: transparent; color: var(--text); border-color: var(--border); }
.btn--line:hover { background: var(--text); color: var(--white); border-color: var(--text); }

/* Embedded Daily call */
.live-callframe {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 20px;
  background: var(--black);
}
.live-callframe__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; background: var(--white);
  border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text);
}
.live-callframe__stage { position: relative; width: 100%; aspect-ratio: 16 / 10; }
.live-callframe__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Honeypot — visually hidden, off-screen; bots fill it, humans don't */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* ============================================================
   LEGAL PAGES (cookie / privacy / terms / disclosure / CCPA)
   Standalone documents — long-form reading, not marketing layout.
   ============================================================ */
.legal-hero {
  background: var(--cream);
  padding: 90px 0 64px;
  border-bottom: 1px solid var(--border);
}
.legal-hero__title { max-width: 900px; }
.legal-hero__updated {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-top: 20px;
}

.legal-body { padding: 72px 0 96px; }

/* Single measure column — legal text is read, not scanned. */
.legal {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
}
.legal > h2 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 56px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  margin: 32px 0 12px;
}
.legal p { margin: 0 0 18px; }
.legal ul, .legal ol { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 10px; }
.legal li > p { margin: 0 0 8px; }
.legal ul ul, .legal ol ol, .legal ul ol, .legal ol ul { margin: 10px 0 0; }
.legal li::marker { color: var(--text-3); }

/* Accent-underline links, matching the nav treatment */
.legal a {
  /* The legal copy is carried over verbatim and contains bare URLs — the longest,
     `https://tools.google.com/dlpage/gaoptout` in the cookie policy, is 288px and
     has no break opportunity, so it pushed that page 14px wide at 320px (#60).
     `anywhere` rather than `break-word` so it also shrinks the min-content width
     and cannot force the column open. The wording is legal copy and is not ours
     to reflow, so this has to be solved in CSS. */
  overflow-wrap: anywhere;
  color: var(--text);
  text-decoration: none;
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.2s ease;
}
.legal a:hover { background-size: 100% 2px; }

@media (max-width: 900px) {
  .legal-hero { padding: 56px 0 40px; }
  .legal-body { padding: 48px 0 72px; }
  .legal { font-size: 15px; }
  .legal > h2 { font-size: 20px; margin-top: 44px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--black);
  padding: 64px 0 40px;
}
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__logo { height: 26px; width: auto; cursor: pointer; align-self: flex-start; }
.footer__tag { font-size: 15px; color: var(--text-3); }
.footer__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.footer__link {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--white);
  cursor: pointer;
  transition: opacity 0.2s ease;
  border: none;
  background: transparent;
}
.footer__link:hover { opacity: 0.7; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__legal { font-size: 13px; color: var(--text-3); }
.footer__email { font-size: 13px; color: var(--text-3); text-decoration: none; }

/* Policy links — footer only, deliberately not in the top nav */
.footer__policies {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
}
.footer__policy {
  font-size: 13px;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__policy:hover { color: var(--white); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* 1325px, not 900px. The desktop row needs 1325.2px to render inside the
   container with its 40px gutter; below that it cannot shrink, so it used to
   overflow — a horizontal scrollbar on every page from 901px to 1301px (#36).
   The breakpoint is now the container width itself: the desktop nav renders
   exactly when the container is at full width, and the hamburger takes every
   width below. This deliberately puts tablets (1024px, 1180px) and 1280px
   laptops on the hamburger — the alternative was shrinking the nav type. */
@media (max-width: 1325px) {
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }
  .nav__links {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 0 16px;
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav.is-open .nav__links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav__link {
    width: 100%;
    padding: 14px 40px;
    background-image: none;
  }
  .nav__link.is-active { color: var(--green); }
  .nav__mobile-cta { display: block; width: calc(100% - 80px); margin: 8px 40px 0; }
}
@media (min-width: 1326px) {
  .nav__mobile-cta { display: none; }
}

@media (max-width: 700px) {
  .container, .hero__inner, .split, .contact-grid, .footer__inner, .band__inner, .pull, .nav__inner { padding-left: 24px; padding-right: 24px; }
  .nav__link { padding-left: 24px; padding-right: 24px; }
  .nav__links { top: 76px; }
  .nav__mobile-cta { width: calc(100% - 48px); margin: 8px 24px 0; }
  .section { padding: 64px 0; }
  .band { padding: 64px 0; }
  .hero__inner { padding: 96px 24px 88px; }
  .panel { padding: 36px 28px 40px; }
  .gap { padding: 32px 28px; }
  .row { grid-template-columns: 1fr; gap: 16px; }
  .row__num { border-top: none; padding-top: 0; }
  .form, .thanks { padding: 32px 28px; }
  .footer__top { flex-direction: column; }
}

/* ============================================================
   MOC Credits page — pack cards, notes, purchase banner
   ============================================================ */
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 0 24px; }
.pack { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border-light); border-radius: 12px; padding: 0 28px 28px; }
.pack--flat { background: var(--cream); }
.pack__bar { height: 4px; background: var(--accent, var(--green)); margin: 0 -28px 26px; border-radius: 12px 12px 0 0; }
.pack__name { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin: 0 0 14px; }
.pack__credits { font-size: 19px; color: var(--text); margin: 0 0 10px; }
/* The flat engagement has no credit count; its commitment sits in that slot at
   the height of the big number so the three cards stay row-aligned. */
.pack__credits--flat { display: flex; align-items: center; min-height: 42px; font-size: 19px; color: var(--text-2); }
.pack__num { font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.pack__price { font-size: 22px; font-weight: 500; color: var(--text); margin: 0 0 18px; }
.pack__price span { font-size: 14px; color: var(--text-3); font-weight: 400; }
.pack__use { font-size: 15px; line-height: 1.5; color: var(--text-2); margin: 0 0 12px; flex: 1 1 auto; }
.pack__incentive { font-size: 15px; line-height: 1.5; color: var(--text); font-weight: 500; margin: 0 0 14px; padding: 12px 0 12px 14px; background: var(--white); border-left: 3px solid var(--accent-lime); }
.pack__example { font-size: 13px; line-height: 1.5; font-style: italic; color: var(--text-3); margin: 0 0 22px; }
.pack__buy { width: 100%; }
/* Checkout failure, shown in the card that was clicked instead of in the
   top-of-page banner six screens above it. A thin salmon rule, no fill — the
   same treatment .pack__incentive gives lime. */
.pack__error { display: block; font-size: 14px; line-height: 1.5; color: var(--text); margin: 12px 0 0; padding: 8px 0 8px 14px; border-left: 3px solid var(--accent-salmon); }
.credit-note { font-size: 13px; color: var(--text-3); line-height: 1.6; margin: 20px 0 0; max-width: 820px; }
.purchase-banner { border-radius: 12px; padding: 18px 20px; margin: 0; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); background: var(--cream); }
.purchase-banner--success { border-color: var(--green); background: rgba(89,152,27,0.06); }
.purchase-banner--cancel { border-color: var(--border); background: var(--cream); }
.purchase-banner--error { border-color: var(--accent-salmon); background: rgba(255,197,189,0.15); }
.purchase-banner__title { font-size: 17px; font-weight: 600; color: var(--text); }
.purchase-banner__body { font-size: 15px; color: var(--text-2); line-height: 1.5; }
/* Three cards into two columns leaves an orphan — let the third (the flat
   engagement, and the longest copy) run the full width instead. */
@media (max-width: 900px) {
  .packs { grid-template-columns: repeat(2, 1fr); }
  .packs .pack:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .packs { grid-template-columns: 1fr; } }

/* MOC Credits entry points were hidden by a `[data-credits-cta] { display: none }`
   rule here until the page was signed off. REVEALED 2026-08-17 (#9) — the five
   marked elements (nav link, footer link, and the CTA blocks on #how, #serve and
   #contact) now render. The `data-credits-cta` attributes are kept as the marker
   of what belongs to that set, should it ever need hiding again. */

/* ---- 404 (#66) ---------------------------------------------------------- */
/* ⛔ This page cannot reuse `.footer__links`: those are `color: var(--white)`
   for the dark footer, so on the 404's light section every link is
   white-on-white and the list reads as missing entirely. Its own small block
   instead — one wrapping row of green links, a primary CTA under it. */
.nf__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 16px 0 0; }
.nf__cta   { margin-top: 32px; }
.nf__help  { margin-top: 28px; }