/* =========================================================================
   CTV DOMINATION — design system
   Restyled to match the printed CTV Domination brochure: light, clean,
   corporate-confident. White page, blue accent, green for match figures,
   navy bands for emphasis. This replaces the earlier dark/TDTM-adjacent
   direction (Chakra Petch + JetBrains Mono + DM Sans, chartreuse accent,
   dark elevation ladder) — that direction is dead and fully removed.

   Single self-hosted variable font (Inter, latin subset, weight 100-900)
   with an Arial/Helvetica fallback stack so pages render correctly with
   no network. One CSS custom property drives the accent (--accent) so
   the whole palette can be re-pointed later without touching markup.
   ========================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter-var.woff2') format('woff2-variations'), url('/fonts/Inter-var.woff2') format('woff2');
}

:root {
  /* Color */
  --bg:          #FFFFFF;  /* page background */
  --surface:     #F3F4F6;  /* light surface — mechanism band, proof boxes, rate-card panel */
  --surface-blue:#EFF6FF;  /* pale blue callout band — the SCALE message */
  --pill-bg:     #DBEAFE;  /* pill badge fill */
  --border:      #E5E7EB;  /* hairline border */
  --ink:         #111827;  /* headline / dark band / inverted card */
  --body:        #4B5563;  /* body text */
  --muted:       #6B7280;  /* muted text */

  --accent:       #2563EB; /* blue accent — the one accent, CTA / links / eyebrows */
  --accent-hover: #1D4ED8;
  --match:        #059669; /* green — match amounts only */

  --font: 'Inter', Arial, Helvetica, sans-serif;
  /* legacy aliases kept so inline styles from earlier passes keep working
     without a second font system — everything resolves to the one face */
  --font-display: var(--font);
  --font-body: var(--font);
  --font-mono: var(--font);

  --container: 780px;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  overflow-x: hidden;
  position: relative;
}

::selection { background: var(--pill-bg); color: var(--ink); }

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------------
   Top chrome — slim sticky header, shared by every page (contact,
   commit, reserved, setup, building, terms, payment-failed). Gains a
   hairline + faint lift once the page scrolls via .is-scrolled
   (toggled by a small inline script — decorative only, no lead-flow
   logic). contact.html additionally shows a section nav + one small
   CTA; those rules are gated to .page-contact below since the other
   pages have no on-page anchors to link to and, per brief, commit.html
   in particular should carry no CTA competing with the payment action.
   --------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.topbar.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 6px 20px rgba(17,24,39,.05);
}
.topbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar .btn { width: auto; }

/* Wordmark — a type-led lockup: weight/letterspacing contrast between
   the two words instead of one uniform uppercase block. */
.wordmark {
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 15px;
  white-space: nowrap;
}
.wordmark-primary { font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.wordmark-secondary { font-weight: 400; color: var(--muted); letter-spacing: .01em; }

.topbar-nav { display: flex; flex: 1 1 auto; justify-content: center; gap: 28px; }
.topbar-nav a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.topbar-nav a:hover { color: var(--ink); }
@media (max-width: 860px) {
  .topbar-nav { display: none; }
}
@media (max-width: 480px) {
  .topbar-inner { flex-wrap: wrap; gap: 4px 16px; padding: 12px 16px; }
}

/* ---------------------------------------------------------------------
   Sections / rhythm
   --------------------------------------------------------------------- */
.section { padding: 56px 0; background: var(--bg); }
.section--tight { padding: 32px 0; }

/* Tint bands — the reading-rhythm fix shared by every page. Alternate
   deliberately down the page (see each page's section comments for the
   order used); never place two of the same fill back to back, and no
   hairline between them — the color change itself is the divider, so
   we don't layer a border on top of it. Navy stays reserved for one
   closing CTA moment per page. */
.section--surface { background: var(--surface); }
.section--tint-blue { background: var(--surface-blue); }

/* solid navy band — reserved for the skin-in-the-game moment and the
   final CTA only; this is how the brochure creates emphasis */
.section--navy {
  background: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.section--navy h1, .section--navy h2, .section--navy h3,
.section--navy .h1, .section--navy .h2, .section--navy .h3 { color: #FFFFFF; }
.section--navy p { color: #C7CCDA; }
.section--navy p strong { color: #FFFFFF; }
.section--navy .lede { color: #D7DAE4; }
.section--navy .eyebrow { color: #93B4FF; }
/* figures/labels keep their semantic color even nested in a navy band —
   these are more specific than the plain ".section--navy p" rule above
   so they win regardless of source order */
.section--navy p.match, .section--navy .match,
.section--navy .match strong { color: var(--match); }
.section--navy p.figure, .section--navy .figure { color: #FFFFFF; }
.section--navy p.price, .section--navy .price { color: #FFFFFF; }
.section--navy .mono-figure { color: #FFFFFF; }
.section--navy .mono-figure.match { color: var(--match); }

hr { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ---------------------------------------------------------------------
   Type
   --------------------------------------------------------------------- */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  display: block;
}

h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.12;
  margin: 0 0 14px;
  color: var(--ink);
}

h1, .h1 { font-size: clamp(28px, 6.4vw, 42px); font-weight: 800; letter-spacing: -.015em; text-transform: uppercase; line-height: 1.08; }
h2, .h2 { font-size: clamp(19px, 3.8vw, 25px); font-weight: 700; text-transform: none; }
h3, .h3 { font-size: clamp(15.5px, 3.4vw, 18px); font-weight: 700; text-transform: none; }

p { margin: 0 0 16px; color: var(--body); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--ink); }

.accent { color: var(--accent); }
/* .match strong needs its own rule, not just inheritance from .match —
   the plain `strong { color: var(--ink) }` above matches the element
   directly (e.g. reserved.html's <p class="match"><strong>+$10K</strong></p>)
   and direct matches beat inherited color regardless of the parent's
   specificity. Previously only patched for navy-band contexts
   (.section--navy .match strong below); needed globally now that Skin
   in the Game moved to a pale-blue tint instead of navy.
   Font-size bump: green-on-navy (the old treatment) cleared 4.5:1; on a
   pale tint or white it's ~3.5–3.8:1 — short of AA for normal text but
   comfortably past the 3:1 large-text threshold once the text is
   ≥18.66px and bold, so size it up rather than leave it borderline. */
.match, .match strong { color: var(--match); }
.match strong { font-size: 20px; }

.lede {
  font-size: clamp(16.5px, 3.6vw, 19px);
  font-weight: 700;
  color: var(--ink);
}

/* Pill badge — top-left brand mark on hero sections. Pale blue fill,
   blue uppercase text, generous radius. Doubles as the literal
   "Exclusive Contact.io Offer" / step-label copy where the source doc
   calls for it verbatim. */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--pill-bg);
  border-radius: 999px;
  padding: 8px 16px;
  margin-bottom: 20px;
}
/* Badges that carry a dynamic, potentially longer value (e.g. the
   selected-package label on the campaign setup form) get a softer
   rectangle radius instead of a full pill once the text wraps to two
   lines on narrow screens. */
.pill-badge--flex { border-radius: 10px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: 16px;
}

/* Standalone price / figure treatments — used outside .card context */
.price {
  font-weight: 800;
  font-size: 19px;
  margin: 4px 0 12px;
  color: var(--ink);
}
.micro-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.mono-figure {
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mono-figure.match { color: var(--match); }
.figure {
  font-weight: 800;
  font-size: clamp(26px, 6.4vw, 38px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 4px 0 4px;
  font-variant-numeric: tabular-nums;
}
.pilot-list {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--body);
}
.pilot-list li { margin-bottom: 8px; }
.pilot-list li:last-child { margin-bottom: 0; }
.pilot-list li strong { color: var(--ink); }

.terms-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(37,99,235,.35);
  cursor: pointer;
}
.terms-link:hover { color: var(--accent-hover); }

/* ---------------------------------------------------------------------
   Terms / legal modal shell
   --------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(17,24,39,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.is-open { display: flex; }
.modal-panel {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(17,24,39,.22);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: #FFFFFF;
}
.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { border-color: var(--accent); color: var(--accent); }
.modal-body { padding: 24px; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 17px 22px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(37,99,235,.22); }
.btn:active { transform: translateY(0); }
.btn:disabled { background: var(--border); border-color: var(--border); color: var(--muted); cursor: not-allowed; box-shadow: none; transform: none; }

.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; box-shadow: none; transform: none; }

.section--navy .btn--ghost { border-color: rgba(255,255,255,.3); color: #FFFFFF; }
.section--navy .btn--ghost:hover { border-color: #FFFFFF; }

.btn--sm { width: auto; padding: 10px 16px; font-size: 13px; }

/* ---------------------------------------------------------------------
   Cards / tiers — base treatment shared with other pages: light card,
   hairline border. contact.html overrides this to a borderless soft-
   shadow treatment for its two tier cards; see the page-scoped block
   near the end of this file.
   --------------------------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

.card {
  background: #FFFFFF;
  color: var(--body);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}

.card .kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.card .kicker.match { color: var(--match); }
.card .price {
  font-weight: 800;
  font-size: 19px;
  margin: 6px 0 20px;
  color: inherit;
}

/* Rate card — plain two-column rows, hairline dividers, no fills */
.card .stat-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  color: var(--muted);
}
.card .stat-line:first-of-type { border-top: none; }
.card .stat-line .num {
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.card .stat-line .num.accent { color: var(--accent); }
.card .stat-line .num.match { color: var(--match); }
.card .feature {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.card .feature h3 { font-size: 16px; margin-bottom: 4px; }
.card .feature p { font-size: 14.5px; color: var(--muted); margin-bottom: 0; }

/* .card--hero (the Dominate tier) is exclusive to contact.html — its
   real styling lives in the page-scoped block as a quiet, still-light
   variant of .card. The dark navy invert this used to be is gone; this
   page gets exactly one dark moment and it's the closing CTA band. */

/* Pale-blue callout — used on reserved.html for the SCALE message.
   contact.html no longer uses this class (see .scale-note in the
   page-scoped block) but the rule stays here, untouched, for that page. */
.callout-panel--blue {
  background: var(--surface-blue);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 20px;
}
.callout-panel--blue h2, .callout-panel--blue h1 { color: var(--ink); }
.callout-panel--blue p { color: #1E3A8A; }
.callout-panel--blue p strong { color: var(--ink); }
.callout-panel--blue .fine-print { font-size: 13px; color: #3B5DB8; margin-top: 8px; }

/* --on-tint — the same SCALE callout, but nested inside a section that
   is itself pale-blue (reserved.html's Skin in the Game band). Switch
   to a white card so it still reads as its own object instead of
   disappearing into the section's matching fill. */
.callout-panel--on-tint {
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(17,24,39,.05), 0 14px 30px rgba(17,24,39,.08);
}

/* ---------------------------------------------------------------------
   Proof strip / network strip / mechanism — all exclusive to
   contact.html. Real styling lives in the page-scoped block: a quiet
   hairline-divided row instead of four bordered boxes, plain typeset
   text instead of pill chips, and an unboxed flow for the mechanism.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 13px 14px;
  margin-bottom: 4px;
}
input[readonly] { color: var(--muted); background: var(--surface); }
textarea { resize: vertical; min-height: 90px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
input[type="file"] {
  width: 100%;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  padding: 13px 14px;
}

.field { margin-bottom: 20px; }
.field .hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.radio-option, .check-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.radio-option input, .check-option input {
  margin-top: 3px;
  width: auto;
  accent-color: var(--accent);
}
.radio-option:has(input:checked), .check-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface-blue);
}
.radio-option .label-text, .check-option .label-text {
  font-size: 15.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--body);
}
.radio-option .label-text strong, .check-option .label-text strong { font-weight: 700; color: var(--ink); }

fieldset { border: none; padding: 0; margin: 0 0 20px; }
legend {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  padding: 0;
}

.required-mark { color: var(--accent); }

/* ---------------------------------------------------------------------
   Onboarding form specific
   --------------------------------------------------------------------- */
.form-section {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}
.form-section:last-of-type { border-bottom: none; }
.form-section .section-number { color: var(--accent); }

.fill-blank {
  font-size: clamp(17px, 4.2vw, 21px);
  font-weight: 600;
  line-height: 1.5;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 24px;
}
.fill-blank input {
  display: inline-block;
  width: auto;
  min-width: 220px;
  max-width: 100%;
  border: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-family: var(--font);
  font-style: italic;
  font-weight: 700;
  font-size: inherit;
  padding: 2px 4px;
  margin-bottom: 0;
}
.fill-blank input:focus { outline: none; box-shadow: none; }

.save-bar {
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 20;
}
.save-bar .save-status {
  font-size: 12px;
  color: var(--muted);
}

/* ---------------------------------------------------------------------
   Numbered steps
   --------------------------------------------------------------------- */
.step {
  display: flex;
  gap: 18px;
  margin-bottom: 26px;
}
.step .step-num {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 13px;
  color: var(--accent);
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
}
.section--navy .step .step-num { background: transparent; border-color: rgba(255,255,255,.3); color: #93B4FF; }
.step .step-body h3 { margin-bottom: 6px; }
.step .step-body p { color: var(--muted); }
.section--navy .step .step-body p { color: #C7CCDA; }

/* ---------------------------------------------------------------------
   Banners
   --------------------------------------------------------------------- */
.banner {
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  padding: 11px 16px;
  background: var(--surface-blue);
  border: 1px solid #BFDBFE;
  color: #1E3A8A;
  border-radius: 8px;
}
.banner strong { text-transform: uppercase; color: #1E3A8A; }

.banner--error {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #B91C1C;
}
.banner--error strong { color: #B91C1C; }
.banner--dev {
  background: #FFFBEB;
  color: #92400E;
  border: 1px dashed #FDE68A;
}
.banner--dev strong { color: #92400E; }

.callout {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
  margin: 20px 0;
  font-size: 14.5px;
  color: var(--muted);
}

.placeholder-block {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
}

/* Footer — real site chrome shared by every page: brand + descriptor,
   legal column with the /terms link and the copyright/entity line.
   contact.html adds a third "on this page" nav column since it's the
   only page with anchors to link to (see .page-contact .footer-grid
   override below); every other page gets the plain two-column form. */
footer.site-footer {
  padding: 32px 0 28px;
  text-align: left;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .01em;
  border-top: 1px solid var(--border);
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; }
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
.footer-brand p {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 34ch;
  margin: 10px 0 0;
  line-height: 1.55;
}
.footer-heading {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-size: 13.5px; color: var(--body); text-decoration: none; width: fit-content; }
.footer-col a:hover { color: var(--accent); }
.footer-legal p { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: none;
}
@media (max-width: 720px) {
  .sticky-cta.is-visible { display: block; }
}

.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-lg { margin-top: 32px; }
.mb-lg { margin-bottom: 32px; }

.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 50;
}
.toast.is-visible { opacity: 1; }

/* =========================================================================
   PAGE-SCOPED — contact.html only (class on <body>). Everything below is
   gated on .page-contact so commit/reserved/setup/building are untouched.
   Widens the reading column to a brochure-width deal sheet and adds the
   layout primitives (two-col, four-across rows, disclosure) used to cut
   contact.html's scroll depth without changing a word of copy.
   ========================================================================= */
.page-contact {
  --container: 1160px;
  --shadow-card: 0 1px 2px rgba(17,24,39,.04), 0 14px 30px rgba(17,24,39,.07);
}

.page-contact .grid-2 { align-items: stretch; gap: 20px; }

/* ---------------------------------------------------------------------
   Section rhythm — alternating tinted panels do the separating instead
   of hairlines. Every section boundary on this page is a background
   color change (white / pale grey / pale blue / navy), so no adjacent
   pair repeats a fill and no hairline is needed between them. Restores
   the color anchors the flat all-white pass lost; keeps the "no borders
   on everything" rule by not layering a line on top of the color change.
   --------------------------------------------------------------------- */
.page-contact .section { padding: 44px 0; }
.page-contact .section--tight { padding: 24px 0; }
.page-contact .section--navy { padding: 44px 0; }
@media (max-width: 640px) {
  .page-contact .section { padding: 32px 0; }
  .page-contact .section--tight { padding: 24px 0; }
  .page-contact .section--navy { padding: 40px 0; }
}

/* Anchors land clear of the sticky header. */
.page-contact [id] { scroll-margin-top: 90px; }

/* ---------------------------------------------------------------------
   Type — mixed case everywhere except the small blue eyebrow labels.
   Hierarchy comes from size and space, not weight: nothing on this
   page runs heavier than 650.
   --------------------------------------------------------------------- */
.page-contact h1, .page-contact .h1 { text-transform: none; }
.page-contact h1.h1-sm {
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.22;
  margin-bottom: 10px;
}
.page-contact h2 { font-weight: 500; }
.page-contact p { margin-bottom: 14px; line-height: 1.6; }
.page-contact h1, .page-contact h2, .page-contact h3 { margin-bottom: 10px; }
.page-contact .eyebrow { margin-bottom: 10px; }

/* Reading measure — prose is capped instead of running the full
   1160px container. Ledgers, cards and headings are unaffected. */
.page-contact p.measure,
.page-contact .section-lede { max-width: 62ch; }

.page-contact .fine-print { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 8px; }

/* Focus + button polish. */
.page-contact a:focus-visible,
.page-contact button:focus-visible,
.page-contact input:focus-visible,
.page-contact summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.page-contact .btn { text-transform: none; font-weight: 600; letter-spacing: 0; padding: 14px 22px; }
.page-contact .btn:hover { box-shadow: 0 6px 18px rgba(37,99,235,.18); }

/* -------------------------------------------------------------------
   Sticky header, contact.html-only addition — section nav + one small
   CTA (the sticky exception the brief calls for). The wordmark, blur,
   scroll hairline and topbar-inner spacing are shared globally above;
   this page is the only one with anchors to link to and a persistent
   CTA to show.
   ------------------------------------------------------------------- */
.page-contact .topbar-inner { gap: 20px; }
.page-contact .topbar-nav { display: flex; flex: 1 1 auto; justify-content: center; gap: 28px; }
.page-contact .topbar-nav a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.page-contact .topbar-nav a:hover { color: var(--ink); }
@media (max-width: 860px) {
  .page-contact .topbar-nav { display: none; }
}

/* -------------------------------------------------------------------
   Footer, contact.html-only addition — a third "on this page" nav
   column, since it's the only page with anchors to link to. Wider
   gap to suit the 3-up layout at this page's 1160px container.
   ------------------------------------------------------------------- */
.page-contact .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 720px) {
  .page-contact .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* -------------------------------------------------------------------
   Hero — carries the mechanism as the first screen's visual object.
   One headline, one supporting line, one small quiet tagline, no
   button of its own — the sticky header carries the only CTA visible
   on first view.
   ------------------------------------------------------------------- */
.page-contact .hero { padding: 68px 0 56px; }
.page-contact .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .page-contact .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 64px; }
}
.page-contact .hero-h1 {
  font-size: clamp(44px, 6.4vw, 76px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.02;
  margin: 18px 0 24px;
  color: var(--ink);
}
.page-contact .hero-support {
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 450;
  color: var(--ink);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 20px;
}
.page-contact .hero-tagline {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  max-width: 50ch;
  margin: 0;
}
@media (max-width: 640px) {
  .page-contact .hero { padding: 44px 0 36px; }
}

/* -------------------------------------------------------------------
   Mechanism — the audience → TV → outcome sequence. Lives in the hero
   as a numbered, hairline-divided vertical sequence: no boxes, the
   numerals do the work. Counter-based so it stays correct even when
   contact.js swaps in the modeled-intent-signal wording — the CSS
   numbers whatever text ends up inside .mech-box, not fixed markup.
   ------------------------------------------------------------------- */
.page-contact .mechanism { display: flex; flex-direction: column; counter-reset: mech; }
.page-contact .mech-box {
  counter-increment: mech;
  position: relative;
  padding: 18px 0 18px 40px;
  border-top: 1px solid var(--border);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.3;
  color: var(--ink);
  text-transform: none;
}
.page-contact .mech-box:first-child { border-top: none; }
.page-contact .mech-box::before {
  content: counter(mech);
  position: absolute;
  left: 0;
  top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.page-contact .mech-arrow { display: none; }

/* -------------------------------------------------------------------
   Two-column desktop blocks — the "Establish Your Brand" prose pair.
   ------------------------------------------------------------------- */
.page-contact .cols-2 { display: grid; grid-template-columns: 1fr; gap: 28px 56px; align-items: start; }
@media (min-width: 860px) {
  .page-contact .cols-2 { grid-template-columns: 1fr 1fr; }
}

/* Dream-list — "Your products / Your competitors / ..." as one quiet
   typeset line instead of five bordered chips. */
.page-contact .dream-list { color: var(--body); font-size: 15.5px; }

/* Dream Keywords note — merged into the Establish Your Brand panel
   (see contact.html comment); a hairline sits above it so it still
   reads as its own thought within the shared grey panel. */
.page-contact .dream-keywords-note { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }

/* Network strip — plain typeset list, no pill boxes. */
.page-contact .network-strip {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .01em;
  margin: 20px 0 6px;
}
.page-contact .network-caption { font-size: 12.5px; color: var(--muted); margin-bottom: 0; }

/* Proof strip — a hairline-divided row of quiet figures instead of
   four bordered boxes. */
.page-contact .stat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
@media (min-width: 640px) {
  .page-contact .stat-strip { grid-template-columns: repeat(4, 1fr); }
}
.page-contact .stat-strip .stat h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 6px;
}
.page-contact .stat-strip .stat p { font-size: 13px; color: var(--muted); margin: 0; }

/* Deck-weight lead line — hero-adjacent "turn" sentences. */
.page-contact .deck-line {
  font-size: clamp(17px, 2.1vw, 19px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -.005em;
  margin: 0 0 8px;
}
.page-contact .deck-line--sm { font-size: clamp(16px, 2vw, 17px); margin-bottom: 12px; font-weight: 500; }

.page-contact p.supporting { font-size: 14.5px; color: var(--muted); margin-bottom: 10px; }
.page-contact .section--navy p.supporting { color: #9AA3BE; }

/* Split-statement — the "before / now" turns (already searching -> now
   on TV; you invest -> partners match; isn't the strategy -> is the
   buying power). Quieter than the old 800-weight treatment; the arrow
   still does the "turn" work. */
.page-contact .split-statement { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 12px 0 16px; }
@media (min-width: 640px) {
  .page-contact .split-statement { grid-template-columns: 1fr 1fr; align-items: center; gap: 16px; }
}
.page-contact .split-line {
  font-size: clamp(18px, 2.4vw, 23px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--muted);
  margin: 0;
}
.page-contact .split-line--accent { color: var(--ink); font-weight: 600; }
.page-contact .section--navy .split-line { color: #8B93AD; }
.page-contact .section--navy .split-line--accent { color: #FFFFFF; }
@media (min-width: 640px) {
  .page-contact .split-line:first-child::after {
    content: '\2192';
    display: inline-block;
    margin-left: 12px;
    color: var(--accent);
    font-weight: 500;
  }
}

/* The $100K match line — quiet and set in ink, not the loudest thing
   on the page. Green stays reserved for the two ledger match figures. */
.page-contact .match-line {
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 4px 0 0;
}

/* Tier panel — pale-blue fill behind the Launch/Dominate cards so they
   read as objects sitting on the page, not two boxes floating on the
   same white the surrounding section uses. The section itself stays
   white per the page's alternating rhythm; only this panel is tinted. */
.page-contact .tier-panel {
  background: var(--surface-blue);
  border-radius: 22px;
  padding: 28px;
  margin-top: 6px;
}
@media (max-width: 640px) {
  .page-contact .tier-panel { padding: 18px; border-radius: 18px; }
}

/* -------------------------------------------------------------------
   Tier cards — borderless, soft shadow only. Dominate is distinguished
   by its content (4 feeds, higher spend, the scale note), not by an
   inverted dark fill — this page gets exactly one dark moment and it
   is the closing CTA band. Equal-height via flex column + the CTA
   pinned to the bottom, so Launch's shorter content doesn't leave a
   gap while Dominate's CTA sits lower. */
.page-contact .card {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
}
.page-contact .card--hero { box-shadow: 0 2px 4px rgba(17,24,39,.05), 0 22px 44px rgba(17,24,39,.09); }
.page-contact .card h2 { font-size: 20px !important; font-weight: 600; margin-bottom: 8px; }
.page-contact .card .kicker { margin-bottom: 2px; }
.page-contact .card .price { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.page-contact .card .rate-line { font-size: 14.5px; color: var(--muted); margin-bottom: 22px; }
.page-contact .card .rate-line strong { color: var(--ink); }

.page-contact .card .ledger { margin-bottom: 18px; }
.page-contact .card .stat-line { padding: 10px 0; font-size: 14px; }
.page-contact .card .stat-line .num { font-size: 21px; font-weight: 600; }
.page-contact .card .stat-line.stat-line--total { border-top-width: 1px; border-top-color: var(--ink); }
.page-contact .card .stat-line .num.num--total { font-size: 28px; font-weight: 600; }

.page-contact .card .feature { margin-top: 12px; padding-top: 11px; }
.page-contact .card .feature h3 { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.page-contact .card .feature p { font-size: 13.5px; line-height: 1.45; }
.page-contact .card .feature h3 .fig { color: var(--ink); font-size: 1.1em; font-weight: 700; }

.page-contact .card .ready-line { font-size: 14px; color: var(--muted); margin: 16px 0 0; }
.page-contact .card .ready-line strong { color: var(--ink); }

/* Card CTA — a quiet text link at the foot of each tier, not a solid
   blue button. Real tap target via padding, not a filled box. Pinned
   to the bottom of the flex column (margin-top:auto) so Launch and
   Dominate's CTAs land on the same baseline regardless of how much
   content sits above them. */
.page-contact .card-cta {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.page-contact .card-cta:hover { color: var(--accent-hover); }

/* Scale note — filled pale-blue callout (restored from the borderless
   left-hairline treatment) so the SCALE message reads as its own
   panel inside the Dominate card, matching the callout treatment used
   elsewhere on the funnel. */
.page-contact .scale-note {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--surface-blue);
  border-radius: 12px;
}
.page-contact .scale-note h2 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.page-contact .scale-note p { font-size: 14px; margin-bottom: 8px; color: var(--body); }
.page-contact .scale-note p:last-of-type { margin-bottom: 0; }
.page-contact .scale-note .disclosure { margin: 8px 0 0; padding-top: 8px; border-top-color: rgba(37,99,235,.18); }
.page-contact .scale-note .fine-print { color: #3B5DB8; }

/* -------------------------------------------------------------------
   Reserve form.
   ------------------------------------------------------------------- */
.page-contact #reserve .field { margin-bottom: 18px; }
.page-contact #reserve fieldset { margin-bottom: 20px; }
.page-contact #reserve legend { margin-bottom: 10px; }
.page-contact #reserve .radio-option { padding: 14px; margin-bottom: 8px; }
.page-contact #reserve .field-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 560px) {
  .page-contact #reserve .field-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .page-contact #reserve { padding-bottom: 96px; }
}

/* -------------------------------------------------------------------
   Four-across rows — "What Happens Next" steps and the closing CTA
   band's four short lines.
   ------------------------------------------------------------------- */
.page-contact .row-4 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
@media (min-width: 640px) {
  .page-contact .row-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .page-contact .row-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
.page-contact .step-tile { display: flex; gap: 14px; align-items: flex-start; }
.page-contact .step-tile .step-num { flex: 0 0 auto; }
.page-contact .step-tile h3 { margin-bottom: 0; font-size: 15px; font-weight: 600; }

.page-contact .cta-line { font-size: clamp(15.5px, 2.2vw, 17px); font-weight: 500; color: #E4E7F0; margin: 0; }

/* -------------------------------------------------------------------
   Text-link CTAs — hero, tier cards and the closing band all use a
   quiet text link rather than a solid button. The reserve form's
   Continue button is the one primary, solid CTA on the page; the
   sticky header carries the other permitted exception.
   ------------------------------------------------------------------- */
.page-contact .cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.page-contact .cta-link:hover { color: var(--accent-hover); }
.page-contact .cta-link--on-dark { color: #93B4FF; margin-top: 28px; }
.page-contact .cta-link--on-dark:hover { color: #C3D4FF; }

/* -------------------------------------------------------------------
   Disclosure — collapsed secondary depth, quieter weight.
   ------------------------------------------------------------------- */
.page-contact details.disclosure { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.page-contact details.disclosure summary { cursor: pointer; list-style: none; color: var(--body); font-size: 14.5px; margin: 0; }
.page-contact details.disclosure summary::-webkit-details-marker { display: none; }
.page-contact details.disclosure summary .disclosure-toggle {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.page-contact details.disclosure summary .disclosure-toggle::after { content: 'Show more'; }
.page-contact details.disclosure[open] summary .disclosure-toggle::after { content: 'Show less'; }
.page-contact details.disclosure .disclosure-body { padding-top: 10px; }
.page-contact details.disclosure .disclosure-body p:last-child { margin-bottom: 0; }
.page-contact .section--navy details.disclosure { border-top-color: rgba(255,255,255,.14); }
.page-contact .callout-panel--blue .fine-print { margin-top: 2px; font-size: 12px; }