/* =====================================================================
   Cashor Marketing — Amber Dominant (v3 rebuild)
   ---------------------------------------------------------------------
   The hero is a full amber-gold takeover (locked Saturday 2026-05-17).
   Below the hero the page cools down onto a warm off-white token system
   (--bg-primary / --bg-elevated / --bg-sunken). Amber reappears as an
   ACCENT on numbered tabs, the loop card numbers, the storyboard step
   pins — and lands at full bleed ONE more time on the CTA strip near
   the footer so the brand color frames the page.
   ===================================================================== */

:root {
  /* ── Brand colors (locked) ───────────────────────────────────────── */
  --gold:        #E5A800;
  --gold-deep:   #C99100;
  --gold-tint:   #F2C236;
  --navy:        #0F1530;
  --navy-soft:   #191E33;

  /* ── Surface tokens (v3) ─────────────────────────────────────────── */
  --bg-primary:  #FAFAF9;   /* dominant off-white below hero          */
  --bg-elevated: #FFFFFF;   /* cards on top of --bg-primary           */
  --bg-sunken:   #F1F0EE;   /* alt sections / footer warm off-white   */
  --paper:       #FFFFFF;
  --paper-warm:  #FFFBEF;

  /* ── Ink scale ───────────────────────────────────────────────────── */
  --ink-92:      rgba(15,21,48,0.92);
  --ink-72:      rgba(15,21,48,0.72);
  --ink-62:      rgba(15,21,48,0.62);
  --ink-42:      rgba(15,21,48,0.42);
  --ink-22:      rgba(15,21,48,0.22);
  --border-sub:  rgba(15,21,48,0.10);
  --border-mid:  rgba(15,21,48,0.16);

  /* ── Type ────────────────────────────────────────────────────────── */
  --font-body:   "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:   "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ── Elevation ───────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(15,21,48,.05);
  --shadow-md:   0 6px 24px -8px rgba(15,21,48,.18);
  --shadow-lg:   0 28px 70px -22px rgba(15,21,48,.32);
  --shadow-xl:   0 40px 80px -32px rgba(15,21,48,0.40);

  /* ── Numerics (used by .num/.amount/etc.) ────────────────────────── */
  --tabular: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ───────────────────────────────────────────────────────────────────── */
/*  Reset + base                                                         */
/* ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }

/* Helvetica Neue tabular-nums on every dollar amount.                    */
.num,
.amount,
[data-num] {
  font-family: var(--tabular);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Layout shell                                                          */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ─────────────────────────────────────────────────────────────────────
   STICKY HEADER
   Transparent over the gold hero, gains a soft shadow when scrolled.
   ───────────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 22px 0;
  background: transparent;
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
.hdr.is-scrolled {
  background: rgba(250,250,249,0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(15,21,48,0.06), 0 8px 24px -16px rgba(15,21,48,0.16);
  border-bottom-color: rgba(15,21,48,0.06);
}
.hdr-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: inline-flex; align-items: center; }
.brand-wordmark {
  height: 26px;
  width: auto;
  display: block;
}
.hdr-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Language selector (native <select> wrapped for styling) */
.lang-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,21,48,0.16);
  background: rgba(255,255,255,0.5);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lang-globe { display: inline-flex; opacity: 0.72; }
.lang-select select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  padding-right: 14px;
  cursor: pointer;
  outline: none;
}
.lang-select::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
  pointer-events: none;
}
.link-muted {
  color: var(--navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.78;
}
.link-muted:hover { opacity: 1; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-nav {
  background: var(--navy);
  color: var(--gold);
}
.btn-nav:hover { background: var(--navy-soft); }
.btn-lg {
  padding: 18px 28px;
  font-size: 17px;
  box-shadow: 0 12px 32px -10px rgba(15,21,48,0.45);
}
.btn-lg .arr {
  display: inline-block;
  transition: transform .2s ease;
}
.btn-lg:hover .arr { transform: translateX(3px); }
.btn-navy {
  background: var(--navy);
  color: var(--gold);
}
.btn-navy:hover { background: var(--navy-soft); }

/* ─────────────────────────────────────────────────────────────────────
   HERO  —  Amber takeover
   ───────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 600px at 85% 15%, rgba(255,255,255,0.22), transparent 60%),
    radial-gradient(900px 700px at 10% 110%, rgba(15,21,48,0.10), transparent 55%),
    var(--gold);
  overflow: hidden;
  /* The header is sticky and sits on top, so we pull the hero up under
     it with negative margin so the gold reads as full-bleed. */
  margin-top: -70px;
  padding-top: 70px;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(15,21,48,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.35;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.hero-body {
  position: relative;
  z-index: 2;
  padding: 88px 0 96px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-copy { max-width: 600px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.72;
  margin: 0 0 22px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1.5px;
  background: var(--navy);
  opacity: 0.6;
  display: inline-block;
}

.h-hero {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 76px;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin: 0 0 24px;
  text-wrap: balance;
  word-break: keep-all;   /* KO won't break mid-word */
}
.lede {
  font-size: 20px;
  line-height: 1.45;
  color: var(--navy);
  opacity: 0.78;
  margin: 0 0 36px;
  max-width: 460px;
  font-weight: 500;
}
.cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.cta-foot {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  opacity: 0.6;
}
.hero-honesty {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--navy);
  opacity: 0.62;
  max-width: 460px;
  line-height: 1.5;
  word-break: keep-all;
}

/* Phone mock */
.hero-mock {
  position: relative;
  display: flex;
  justify-content: center;
}
.phone-card {
  position: relative;
  width: 360px;
  padding: 18px;
  background: var(--paper);
  border-radius: 36px;
  box-shadow:
    var(--shadow-xl),
    0 2px 0 rgba(255,255,255,0.6) inset;
  border: 1px solid rgba(15,21,48,0.06);
}
.phone {
  width: 100%;
  background: var(--paper);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border-sub);
}
.phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-92);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.dots { color: var(--ink-42); letter-spacing: 2px; }

.map-header {
  padding: 6px 18px 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.map-title { font-weight: 700; font-size: 15px; }
.map-sub {
  color: var(--ink-42);
  font-size: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.map-canvas {
  position: relative;
  height: 260px;
  margin: 0 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-sub);
  background: #F1F0EE;
}
.map-svg { width: 100%; height: 100%; }

.pin {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-92);
  border: 2px solid var(--ink-92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
}
.pin-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.pin-inline {
  position: static;
  transform: none;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.job-card {
  margin: 14px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border-sub);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.job-card-top { display: flex; align-items: center; gap: 12px; }
.job-meta { flex: 1; min-width: 0; }
.job-name { font-weight: 600; font-size: 14px; }
.job-addr {
  color: var(--ink-42);
  font-size: 12px;
  margin-top: 2px;
}
.job-amt {
  font-size: 17px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.job-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.chip {
  font-size: 11px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,21,48,0.18);
  background: var(--paper);
  color: var(--ink-92);
  cursor: default;
}
.chip-primary {
  background: var(--navy);
  color: var(--gold);
  border-color: var(--navy);
}

.phone-badge {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(15,21,48,0.45);
}

/* Hero footer strip (still on gold) */
.hero-foot {
  position: relative;
  z-index: 2;
  padding: 0 0 36px;
  color: var(--navy);
  opacity: 0.72;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.hero-foot .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-foot span { opacity: 0.85; }

/* ─────────────────────────────────────────────────────────────────────
   SECTION SHELL  (everything below the hero)
   ───────────────────────────────────────────────────────────────────── */
.section {
  position: relative;
  padding: 120px 0;
  background: var(--bg-primary);
}
.section--sunken {
  background: var(--bg-sunken);
}
.section--elevated {
  background: var(--bg-elevated);
}

.section-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
  word-break: keep-all;
}
.h2--sm { font-size: 40px; }
.h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 8px;
  word-break: keep-all;
}
.p-lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-72);
  margin: 18px auto 0;
  max-width: 600px;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────
   2 · WORKFLOW LOOP  (Schedule / Quote / Mark it done)
   ───────────────────────────────────────────────────────────────────── */
.loop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.loop-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 22px;
  padding: 32px 28px 30px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.loop-card .step-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
}
.loop-mock {
  background: var(--bg-sunken);
  border: 1px solid var(--border-sub);
  border-radius: 14px;
  padding: 14px;
  font-size: 13px;
  color: var(--ink-72);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 130px;
}
.loop-mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.loop-mock-label {
  font-weight: 600;
  color: var(--ink-92);
  font-size: 12px;
}
.loop-mock-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-92);
}
.loop-mock-bar {
  height: 6px;
  background: var(--border-sub);
  border-radius: 999px;
  overflow: hidden;
}
.loop-mock-bar i {
  display: block;
  height: 100%;
  background: var(--gold);
}
.loop-mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--gold);
  letter-spacing: 0.02em;
}
.loop-card h3 { margin: 0; }
.loop-card p {
  margin: 0;
  color: var(--ink-72);
  font-size: 15px;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────────────
   3 · STORYBOARD  (7 mini phone-screen mocks)
   ───────────────────────────────────────────────────────────────────── */
.story-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.story-grid > .story-card:nth-child(n+5) {
  /* second row, 3 across, centered visually by spanning */
}
.story-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 18px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.story-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
}
.story-screen {
  background: var(--bg-sunken);
  border: 1px solid var(--border-sub);
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
  color: var(--ink-72);
  min-height: 130px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.story-screen-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-92);
}
.story-screen-line {
  height: 8px;
  background: var(--border-sub);
  border-radius: 4px;
}
.story-screen-line.short { width: 60%; }
.story-screen-line.med   { width: 80%; }
.story-screen-bubble {
  background: var(--paper);
  border: 1px solid var(--border-sub);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--ink-92);
  line-height: 1.4;
}
.story-screen-cta {
  margin-top: auto;
  align-self: flex-start;
  background: var(--navy);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
}
.story-screen-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink-92);
  letter-spacing: -0.02em;
}
.story-caption {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-92);
  font-weight: 600;
}

.story-fab {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  align-self: flex-end;
  margin-top: auto;
  box-shadow: var(--shadow-md);
}
.story-mini-pin {
  display: inline-flex;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--navy);
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.story-check {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────
   4 · ONE TRUCK / ONE PHONE / ONE CASHOR
   ───────────────────────────────────────────────────────────────────── */
.trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 24px;
}
.trio-card {
  padding: 0;
}
.trio-card .trio-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 12px;
}
.trio-card h3 { font-size: 26px; margin-bottom: 10px; }
.trio-card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-72);
}
.anti-line {
  margin-top: 56px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-42);
  letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────────────────
   5 · MONEY LOOKS LIKE MONEY
   ───────────────────────────────────────────────────────────────────── */
.money-card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 26px;
  padding: 56px 56px 52px;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.money-big {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--navy);
}
.money-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-42);
  margin-bottom: 14px;
}
.money-foot {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-72);
  max-width: 320px;
}
.ledger {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-sub);
  border-radius: 16px;
}
.ledger-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-42);
  margin-bottom: 4px;
}
.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-92);
}
.ledger-row .delta {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
}
.ledger-row .delta.up   { background: rgba(34,139,34,0.10); color: #1f7a34; }
.ledger-row .delta.down { background: rgba(180,40,40,0.10); color: #a32f2f; }

/* ─────────────────────────────────────────────────────────────────────
   6 · THE ASSISTANT  (operator-facing, never says A.I.)
   ───────────────────────────────────────────────────────────────────── */
.assist-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.assist-copy h2 { text-align: left; }
.assist-copy p {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-72);
  max-width: 480px;
}
.assist-chat {
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 22px;
  padding: 26px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bubble {
  max-width: 80%;
  padding: 14px 16px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.45;
}
.bubble--in {
  align-self: flex-start;
  background: var(--bg-sunken);
  color: var(--ink-92);
  border-bottom-left-radius: 6px;
}
.bubble--out {
  align-self: flex-end;
  background: var(--navy);
  color: var(--paper);
  border-bottom-right-radius: 6px;
}
.bubble--out .num { color: var(--gold-tint); }
.bubble-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-42);
  margin-bottom: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   7 · WHAT'S NOT IN HERE  (anti-features)
   ───────────────────────────────────────────────────────────────────── */
.anti-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 48px;
  max-width: 760px;
  margin: 0 auto;
}
.anti-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-22);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink-22);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-sub);
}
.anti-item::before {
  content: "×";
  font-family: var(--font-mono);
  text-decoration: none;
  display: inline-block;
  width: 22px;
  color: var(--gold-deep);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────
   8 · CTA STRIP near footer  (gold band — second amber moment)
   ───────────────────────────────────────────────────────────────────── */
.cta-strip {
  position: relative;
  background:
    radial-gradient(900px 400px at 20% 50%, rgba(255,255,255,0.18), transparent 65%),
    radial-gradient(700px 400px at 100% 0%, rgba(15,21,48,0.12), transparent 60%),
    var(--gold);
  padding: 96px 0;
  overflow: hidden;
}
.cta-strip::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(15,21,48,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.30;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.cta-strip-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: 40px;
}
.cta-strip h2 {
  font-size: 56px;
  margin: 0;
  color: var(--navy);
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-weight: 800;
  max-width: 720px;
  word-break: keep-all;
}
.cta-strip .btn-lg { white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────
   9 · FOOTER
   ───────────────────────────────────────────────────────────────────── */
.foot {
  background: var(--bg-sunken);
  padding: 80px 0 48px;
  color: var(--ink-72);
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 36px;
  margin-bottom: 56px;
}
.foot-brand .brand-wordmark { height: 24px; margin-bottom: 16px; }
.foot-brand p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-62);
  max-width: 280px;
}
.foot-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-42);
  margin: 0 0 14px;
}
.foot-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot-col a {
  color: var(--ink-92);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.foot-col a:hover { opacity: 0.7; }

.foot-built {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--border-sub);
  flex-wrap: wrap;
}
.foot-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--border-sub);
  color: var(--ink-72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.foot-pill .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}
.foot-copy {
  font-size: 12.5px;
  color: var(--ink-42);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────
   MOBILE
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .h2 { font-size: 40px; }
  .h2--sm { font-size: 32px; }
  .loop-grid { grid-template-columns: 1fr; gap: 18px; }
  .story-grid { grid-template-columns: repeat(2, 1fr); }
  .trio-grid { grid-template-columns: 1fr; gap: 28px; }
  .money-card {
    grid-template-columns: 1fr;
    padding: 36px 28px;
    gap: 28px;
  }
  .money-big { font-size: 56px; }
  .assist-grid { grid-template-columns: 1fr; gap: 36px; }
  .anti-grid { grid-template-columns: 1fr; gap: 4px 0; }
  .cta-strip-inner { grid-template-columns: 1fr; gap: 24px; }
  .cta-strip h2 { font-size: 36px; }
  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .wrap { padding: 0 22px; }
  .hdr { padding: 16px 0; }
  .brand-wordmark { height: 22px; }
  .link-muted { display: none; }
  .btn-nav { padding: 9px 14px; font-size: 13px; }
  .hero { margin-top: -64px; padding-top: 64px; }
  .hero-body { padding: 44px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .h-hero { font-size: 44px; line-height: 0.98; letter-spacing: -0.03em; }
  .lede { font-size: 17px; margin-bottom: 24px; }
  .btn-lg {
    padding: 16px 22px;
    font-size: 16px;
    width: 100%;
  }
  .cta-row { width: 100%; flex-direction: column; align-items: stretch; }
  .cta-foot { text-align: center; }
  .phone-card { width: 320px; padding: 14px; }
  .hero-foot { padding-bottom: 24px; font-size: 11px; }
  .hero-foot .wrap { justify-content: center; text-align: center; }
  .hero-foot .foot-mid, .hero-foot .foot-r { display: none; }

  .section { padding: 80px 0; }
  .section-head { margin-bottom: 40px; }
  .h2 { font-size: 32px; }
  .h2--sm { font-size: 26px; }

  .story-grid { grid-template-columns: 1fr; }

  .anti-item { font-size: 18px; }

  .cta-strip { padding: 64px 0; }
  .cta-strip h2 { font-size: 28px; }
  .cta-strip .btn-lg { width: 100%; }

  .foot { padding: 56px 0 36px; }
  .foot-top { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .foot-built { justify-content: flex-start; }
}

/* =====================================================================
   LEGAL / STATUS PAGES (privacy, terms, security, status)
   Added 2026-05-17. Same chrome as the homepage but with a smaller,
   warm-off-white page hero and a centered prose container.
   ===================================================================== */
.page-hero {
  background: var(--bg-primary);
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--border-sub);
}
.page-hero .wrap {
  text-align: left;
}
.page-hero .eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.page-hero .h-hero {
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.page-hero .page-sub {
  font-size: 16px;
  color: var(--ink-62);
  margin: 0;
  font-weight: 500;
}

.prose-wrap {
  padding: 48px 0 96px;
  background: var(--bg-primary);
}
.prose {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
  color: var(--ink-92);
  font-size: 16.5px;
  line-height: 1.65;
}
.prose > p:first-child { margin-top: 0; }
.prose p {
  margin: 0 0 18px;
  color: var(--ink-92);
}
.prose h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 48px 0 16px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 28px 0 10px;
}
.prose ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.prose li {
  margin-bottom: 8px;
}
.prose a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-42);
}
.prose a:hover { text-decoration-color: var(--gold); }
.prose strong { font-weight: 700; color: var(--navy); }
.prose code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-sub);
}
.prose .sig {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border-sub);
  font-size: 14px;
  color: var(--ink-62);
}
.prose .sig p { margin: 0 0 4px; }

/* Status page */
.status-hero {
  background: var(--bg-primary);
  padding: 80px 0 56px;
  border-bottom: 1px solid var(--border-sub);
  text-align: center;
}
.status-hero .eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 18px;
  opacity: 1;
}
.status-hero .eyebrow::before { display: none; }
.status-banner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.status-banner .status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1FA971;
  box-shadow: 0 0 0 4px rgba(31,169,113,0.18);
  flex-shrink: 0;
}
.status-banner .status-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.status-hero .status-sub {
  font-size: 14px;
  color: var(--ink-62);
  margin: 0;
}

.status-list-wrap {
  padding: 56px 0 80px;
  background: var(--bg-primary);
}
.status-list {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}
.status-list h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 18px;
}
.status-rows {
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-sub);
}
.status-row:last-child { border-bottom: none; }
.status-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.status-row .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1FA971;
  flex-shrink: 0;
}
.status-row .dot.yellow { background: #E5A800; }
.status-row .dot.red { background: #C13B3B; }
.status-row-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}
.status-row-state {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-62);
}
.status-incidents {
  margin-top: 40px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 14px;
  padding: 24px 24px 22px;
}
.status-incidents h2 { margin-top: 0; }
.status-incidents p {
  margin: 0;
  color: var(--ink-62);
  font-size: 14.5px;
}
.status-contact {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-62);
}
.status-contact a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  .page-hero { padding: 40px 0 22px; }
  .page-hero .h-hero { font-size: 38px; line-height: 1.02; }
  .prose-wrap { padding: 36px 0 64px; }
  .prose { font-size: 15.5px; }
  .prose h2 { font-size: 22px; margin-top: 36px; }
  .status-hero { padding: 56px 0 40px; }
  .status-banner { padding: 14px 18px; }
  .status-banner .status-text { font-size: 15px; }
}

/* ===================================================================== */
/*  PRICING PAGE                                                          */
/* ===================================================================== */

.pricing-hero {
  padding: 96px 0 32px;
  background: var(--bg-primary);
  text-align: center;
}
.pricing-hero .eyebrow {
  text-align: center;
  margin-bottom: 12px;
}
.pricing-hero .h-hero {
  margin: 0 auto 16px;
  max-width: 14ch;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.pricing-hero .lede {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--ink-72);
  font-size: 18px;
  line-height: 1.55;
}

/* ── Price card ─────────────────────────────────────────────────── */
.pricing-card-wrap { padding-top: 24px; }
.price-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 32px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.price-eyebrow {
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-72);
}
.price-amount {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 12px;
  color: var(--navy);
  font-family: var(--tabular);
  font-variant-numeric: tabular-nums;
}
.price-currency { font-size: 28px; font-weight: 700; margin-right: 2px; }
.price-big { font-size: 88px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.price-cents { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.price-period {
  margin-left: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-72);
}
.price-trial {
  margin: 0 0 28px;
  color: var(--ink-72);
  font-size: 15px;
}
.price-feats {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.price-feats li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  color: var(--ink-92);
  font-size: 15px;
  line-height: 1.5;
}
.check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}
.price-cta { text-align: center; }
.price-cta-foot {
  margin: 12px 0 0;
  color: var(--ink-62);
  font-size: 13px;
}

/* ── Trial in/out grid ─────────────────────────────────────────── */
.trial-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 760px) {
  .trial-grid { grid-template-columns: 1fr; }
}
.trial-col {
  padding: 28px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 18px;
}
.trial-col h3 { margin: 0 0 16px; font-size: 19px; font-weight: 700; }
.trial-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trial-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  color: var(--ink-92);
  font-size: 15px;
  line-height: 1.5;
}
.trial-col--in .check { background: var(--gold); }
.trial-col--later .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink-42);
  margin-top: 6px;
  justify-self: center;
}
.trial-col--later li { color: var(--ink-72); }
.trial-foot {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-sub);
  color: var(--ink-62);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Setup numbered list ───────────────────────────────────────── */
.setup-list {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.setup-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 16px;
  align-items: start;
}
.setup-num {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gold-deep);
}
.setup-step h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}
.setup-step p {
  margin: 0;
  color: var(--ink-72);
  font-size: 15px;
  line-height: 1.55;
}
.setup-note {
  margin: 28px auto 0;
  max-width: 720px;
  padding: 16px 20px;
  background: var(--paper-warm);
  border: 1px solid rgba(229,168,0,0.32);
  border-radius: 12px;
  color: var(--ink-92);
  font-size: 14px;
  line-height: 1.55;
}

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq-list {
  max-width: 720px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq {
  background: var(--bg-elevated);
  border: 1px solid var(--border-sub);
  border-radius: 12px;
  padding: 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-92);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-weight: 400;
  color: var(--ink-42);
  font-size: 22px;
  line-height: 1;
}
.faq[open] summary::after { content: "−"; }
.faq p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--ink-72);
  font-size: 14px;
  line-height: 1.6;
}

/* ===================================================================== */
/*  SEVEN TAPS — PINNED VERTICAL CAROUSEL                                 */
/*  --------------------------------------------------------------------  */
/*  Layout: two columns. Left is a sticky phone mock that pins to the     */
/*  viewport as you scroll. Right is a stack of "tap-track" sentinels;    */
/*  each is one full viewport tall. As the user scrolls past a track,    */
/*  an IntersectionObserver in app.js sets data-active-step on the       */
/*  .taps-tracks parent. CSS then uses [data-active-step="N"] selectors  */
/*  to show .tap-scene--N and hide the others. No JS animation work,     */
/*  just attribute-driven opacity.                                       */
/* ===================================================================== */

#how .section-head {
  text-align: center;
  margin-bottom: 8px;
}
#how .section-sub {
  max-width: 640px;
  margin: 12px auto 0;
  color: var(--ink-72);
  font-size: 17px;
  line-height: 1.5;
}

.taps-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 64px;
  margin-top: 56px;
  align-items: start;
}

/* DOM order is .taps-tracks then .taps-phone-col so the sibling
   combinator `.taps-tracks[data-active-step] ~ .taps-phone-col` can
   light up the right phone scene. CSS grid order flips them visually:
   phone goes in column 1 (left), tracks in column 2 (right). */
.taps-phone-col {
  position: sticky;
  top: 96px;
  align-self: start;
  grid-column: 1;
  grid-row: 1;
}
.taps-tracks {
  grid-column: 2;
  grid-row: 1;
}

/* The tracks column is just a tall stack. Each track is one viewport
   tall so the user has a full scroll-distance per step. */
.taps-tracks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* (grid-column / row set above) */
}

.tap-track {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 32px 0;
}
.tap-track:first-child { padding-top: 0; }
.tap-track:last-child  { padding-bottom: 0; }

.tap-copy {
  max-width: 460px;
  opacity: 0.35;
  transition: opacity .35s ease, transform .35s ease;
  transform: translateY(8px);
}
.tap-step-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.tap-copy h3 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink-92);
  margin: 0 0 14px;
}
.tap-copy p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-72);
  margin: 0;
}

/* Active step copy lights up via the attribute on the parent. */
.taps-tracks[data-active-step="1"] .tap-track[data-step="1"] .tap-copy,
.taps-tracks[data-active-step="2"] .tap-track[data-step="2"] .tap-copy,
.taps-tracks[data-active-step="3"] .tap-track[data-step="3"] .tap-copy,
.taps-tracks[data-active-step="4"] .tap-track[data-step="4"] .tap-copy,
.taps-tracks[data-active-step="5"] .tap-track[data-step="5"] .tap-copy,
.taps-tracks[data-active-step="6"] .tap-track[data-step="6"] .tap-copy,
.taps-tracks[data-active-step="7"] .tap-track[data-step="7"] .tap-copy {
  opacity: 1;
  transform: translateY(0);
}

/* Phone scene stage \u2014 every scene is absolute, only the active is shown. */
.phone--taps {
  position: relative;
  min-height: 540px;
  overflow: hidden;
}
.taps-stage-inner {
  position: relative;
  margin-top: 12px;
  height: 490px;
  border-radius: 14px;
  background: linear-gradient(180deg, #FBFAF7 0%, #F4F2EC 100%);
  border: 1px solid var(--border-sub);
  overflow: hidden;
}
.tap-scene {
  position: absolute;
  inset: 0;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}

/* The .taps-tracks parent is OUTSIDE the .taps-phone-col, so we need to
   reflect the active step onto the stage as well. We do that by having
   .taps-stage carry a copy of the attribute via a CSS trick: the
   IntersectionObserver writes to .taps-tracks only, but we use sibling
   combinators here so the right column drives the left. */
.taps-tracks[data-active-step="1"] ~ .taps-phone-col .tap-scene--1,
.taps-tracks[data-active-step="2"] ~ .taps-phone-col .tap-scene--2,
.taps-tracks[data-active-step="3"] ~ .taps-phone-col .tap-scene--3,
.taps-tracks[data-active-step="4"] ~ .taps-phone-col .tap-scene--4,
.taps-tracks[data-active-step="5"] ~ .taps-phone-col .tap-scene--5,
.taps-tracks[data-active-step="6"] ~ .taps-phone-col .tap-scene--6,
.taps-tracks[data-active-step="7"] ~ .taps-phone-col .tap-scene--7 {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stage surfaces (sheet / map / sms / quote / confirm / invoice / pay) ── */
.surface {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border-sub);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 24px -16px rgba(15,21,48,0.12);
}

/* Step 1 \u2014 Add job sheet */
.sheet-grab {
  width: 36px; height: 4px;
  background: var(--ink-22);
  border-radius: 2px;
  margin: -4px auto 8px;
}
.sheet-title {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink-92);
  margin-bottom: 4px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: #FAFAF7;
  border: 1px solid var(--border-sub);
  border-radius: 8px;
}
.field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-42);
}
.field-val {
  font-size: 13px;
  color: var(--ink-92);
  font-weight: 600;
}
.field-val.muted { color: var(--ink-62); font-weight: 500; }

.btn-tap {
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-top: 4px;
}
.btn-tap--gold { background: var(--gold); color: var(--navy); }
.btn-tap--ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-tap--pay {
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Step 2 \u2014 Map */
.surface-map { padding: 0; overflow: hidden; }
.mini-map {
  position: relative;
  height: 260px;
  background:
    repeating-linear-gradient(0deg,   #ECEAE5 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg,  #ECEAE5 0 1px, transparent 1px 24px),
    #F1F0EE;
}
.pin-sm {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(15,21,48,0.18);
}
.pin-sm.pin-active {
  background: var(--gold);
  border-color: var(--gold-deep);
  transform: translate(-50%, -50%) scale(1.15);
}
.surface-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  border-top: 1px solid var(--border-sub);
}
.surface-row .num { font-weight: 700; color: var(--ink-92); }

/* Step 3 \u2014 SMS */
.surface-sms { gap: 6px; }
.sms-bubble {
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 86%;
}
.sms-out {
  background: var(--navy);
  color: #fff;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.sms-in {
  background: var(--paper-warm);
  color: var(--ink-92);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.sms-meta {
  font-size: 10px;
  color: var(--ink-42);
  align-self: flex-end;
  margin-top: 2px;
}

/* Step 4 \u2014 Quote */
.quote-head {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink-92);
}
.quote-sub {
  font-size: 11px;
  color: var(--ink-42);
  margin-top: -4px;
  margin-bottom: 4px;
}
.quote-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quote-lines li {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-72);
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-sub);
}
.quote-lines li .num { color: var(--ink-92); font-weight: 600; }
.quote-total {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid var(--border-sub);
}
.quote-total-label {
  font-weight: 700;
  color: var(--ink-92);
  font-size: 14px;
}
.quote-total-amt { font-weight: 800; font-size: 16px; color: var(--ink-92); }

/* Step 5 \u2014 Confirm */
.surface-confirm {
  align-items: center;
  text-align: center;
  padding: 28px 20px;
}
.check-big {
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
}
.confirm-h {
  font-weight: 800;
  font-size: 18px;
  color: var(--ink-92);
}
.confirm-sub {
  font-size: 12px;
  color: var(--ink-42);
}
.confirm-amt {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink-92);
  margin-top: 8px;
  letter-spacing: -0.02em;
}

/* Step 6 \u2014 Invoice */
.inv-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.inv-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
}
.inv-num {
  font-size: 12px;
  color: var(--ink-42);
  font-family: var(--tabular);
}
.inv-amt {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink-92);
  letter-spacing: -0.025em;
}
.inv-due {
  font-size: 12px;
  color: var(--ink-62);
}

/* Step 7 \u2014 Pay */
.surface-pay {
  align-items: center;
  text-align: center;
  padding: 22px 20px;
}
.pay-merchant {
  font-size: 11px;
  color: var(--ink-42);
}
.pay-amt {
  font-size: 32px;
  font-weight: 800;
  color: var(--ink-92);
  margin: 4px 0 12px;
  letter-spacing: -0.025em;
}
.pay-foot {
  font-size: 11px;
  color: var(--ink-42);
  margin-top: 8px;
}

/* ── Mobile fallback: drop the sticky carousel, show each step inline ── */
/* Desktop default: the per-step mobile mocks are hidden, only the sticky
   shared phone in .taps-phone-col renders. */
.tap-mock-mobile { display: none; }

/* ===================================================================== */
/*  SEVEN TAPS — MOBILE                                                   */
/*  --------------------------------------------------------------------  */
/*  On mobile, the pinned two-column carousel is gone. Each step is a    */
/*  full vertical block: STEP COPY ON TOP, then the phone example below */
/*  it as part of the same card. Seven stacked vertical units. Clear     */
/*  one-to-one mapping between text and the screen it describes.        */
/* ===================================================================== */
@media (max-width: 880px) {
  .taps-stage {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Hide the shared sticky phone on mobile. Each track now carries its
     own inline mock via .tap-mock-mobile. */
  .taps-phone-col { display: none; }

  .taps-tracks {
    grid-column: 1;
    grid-row: 1;
    /* Establish the scroll context for the sticky children. The OL is
       the scroll-parent that bounds each sticky .tap-track. */
    overflow: visible;
  }

  /* Each track is a sticky pinned card. As the user scrolls, each step
     PINS at the same top offset, then the next step slides up over it
     and replaces it.

     CRITICAL fixes against the previous-track-bleeding bug:
       1. Background MUST be fully opaque (--bg-primary = #FAFAF9) and
          must be DIFFERENT from the surrounding section background
          (--bg-sunken = #F1F0EE) so each pinned card visually reads as
          a distinct surface stacking on top of the section.
       2. Tracks must be exactly 100vh tall (NOT 90vh) so a track fully
          occupies the viewport and no slice of the previous or next
          track shows alongside it.
       3. Each track gets its own z-index that ascends with data-step,
          guaranteeing the next track sits ABOVE the previous one. The
          opaque background then occludes the previous one cleanly.
       4. The inner .tap-copy and .tap-mock-mobile both render their
          own visuals on top of the track's opaque background — nothing
          beneath bleeds through. */
  .tap-track {
    position: sticky;
    top: 0;                     /* full viewport pin */
    min-height: 0;
    height: 100vh;
    padding: 88px 16px 24px;    /* 88px top = clearance for sticky header */
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: var(--bg-primary);   /* opaque, contrasts with section */
    overflow: hidden;
  }

  /* Ascending z-index so each subsequent track stacks above its
     predecessor when both are momentarily in the viewport. */
  .tap-track[data-step="1"] { z-index: 1; }
  .tap-track[data-step="2"] { z-index: 2; }
  .tap-track[data-step="3"] { z-index: 3; }
  .tap-track[data-step="4"] { z-index: 4; }
  .tap-track[data-step="5"] { z-index: 5; }
  .tap-track[data-step="6"] { z-index: 6; }
  .tap-track[data-step="7"] { z-index: 7; }

  /* Copy sits at the TOP of the track, above the phone mock. Centered
     and not too wide so it reads as a clean header. */
  .tap-copy {
    opacity: 1;
    transform: none;
    max-width: 480px;
    margin: 0 auto 18px;
    padding: 0 8px;
    text-align: center;
    flex: 0 0 auto;
  }
  .tap-copy h3 { font-size: 22px; margin-bottom: 6px; }
  .tap-copy p  { font-size: 15px; line-height: 1.55; }
  .tap-step-num { font-size: 11px; margin-bottom: 6px; }

  /* Inline per-step phone mock under each step's copy. flex: 1 1 auto
     lets it consume remaining vertical space, with a hard max-height so
     it never grows beyond the viewport's available room. */
  .tap-mock-mobile {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 280px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .phone-card--mobile { width: 100%; }
  .phone--mobile-mini {
    position: relative;
    min-height: 0;
    padding: 16px 14px 18px;
    overflow: hidden;
  }
  .phone--mobile-mini .taps-stage-inner--mobile {
    position: static;
    height: auto;
    margin-top: 10px;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, #FBFAF7 0%, #F4F2EC 100%);
    border: 1px solid var(--border-sub);
    display: flex;
    flex-direction: column;
  }
  .phone--mobile-mini .surface {
    max-width: 100%;
    padding: 14px;
  }
  .phone--mobile-mini .mini-map { height: 200px; }
  .phone--mobile-mini .check-big { width: 48px; height: 48px; }
  .phone--mobile-mini .pay-amt,
  .phone--mobile-mini .inv-amt,
  .phone--mobile-mini .confirm-amt { font-size: 26px; }
}

/* ── Reduced motion: hold on step 1 ── */
@media (prefers-reduced-motion: reduce) {
  .tap-copy, .tap-scene { transition: none !important; }
}