/* ============================================================
   LEADZIFY v3 — "The Private Ledger"
   Ultra-luxury: obsidian + champagne gold, editorial serif,
   living hero demo, slow expensive motion, long-form sections.
   ============================================================ */

:root {
  color-scheme: light;
  --bg:      #f4f3ef;   /* off-white page ground */
  --bg-2:    #eef0f2;
  --band:    #0a0f1e;   /* the dark navy band behind heroes */
  --band-ink:#ebf0fc;
  --band-mut:#c3cbdd;
  /* Surface tints are expressed as an RGB triple so one token flips the whole
     light-on-dark / dark-on-light family. Every rgba(var(--tint-rgb), X) in this
     file used to be a warm-white tint that is invisible on
     an off-white ground. */
  --tint-rgb: 20,26,42;
  --panel:   #ffffff;
  --panel-2: #f7f7f4;
  --border:  #e2e2dc;
  --hairline:#ebebe5;
  --gold:    #d9a441;
  --gold-2:  #b8862e;
  --text:    #141a2a;
  --muted:   #5c6478;
  --loss:    #b3261e;
  --green:   #127a4a;
  --display: "Figtree", system-ui, sans-serif;
  --body:    "Figtree", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", Consolas, monospace;

  /* ONE page width for the whole site. Before this, seven containers each set their
     own — 1240 nav, 1240 hero, 1120 receipt, 1080 booking, 1040 thanks, 920 blog index,
     820 article — so the page visibly changed width as you moved between sections and
     between pages. FOUNDER-DECISION 2026-09-10. */
  --page: 1240px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--bg); /* the living #scene canvas carries the light */
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* film grain + vignette */
body::before {
  content:""; position:fixed; inset:-50%;
  pointer-events:none; z-index:56;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:0; /* film grain reads as dirt on an off-white ground */
}
@keyframes grain {
  0%,100% { transform:translate(0,0) } 10% { transform:translate(-5%,-8%) }
  30% { transform:translate(3%,-12%) } 50% { transform:translate(-9%,4%) }
  70% { transform:translate(7%,8%) } 90% { transform:translate(-4%,3%) }
}
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:55;
  background:none; /* the vignette is a black burn-in — a grey halo on light */
}

::selection { background: var(--gold); color: var(--text); }
a { color: inherit; }
img { max-width:100%; }

/* ---------- the living night scene ---------- */
#scene {
  display:none; /* the particle field is light-on-dark; retired with the light theme */
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
}
.hero, .strip-zone, main, footer { position: relative; z-index: 1; }

/* ---------- 3D tilt system ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .3s ease;
}
[data-tilt] > * { transform: translateZ(24px); }
[data-tilt]::after {
  content:""; position:absolute; inset:0; border-radius: inherit;
  background: radial-gradient(480px circle at var(--gx,50%) var(--gy,50%), rgba(239,217,167,.10), transparent 55%);
  opacity:0; transition: opacity .3s ease;
  pointer-events:none;
}
[data-tilt]:hover::after { opacity:1; }

/* ---------- booking pages: stacked rows, full-width calendar ---------- */
.booking {
  max-width: var(--page); margin: 30px auto 110px;
  padding: 0 24px;
}
.booking__copy { max-width: 780px; margin: 0 auto 44px; }
.booking__copy h1 {
  font-family: var(--display); font-weight:500;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height:1.06; letter-spacing:-.015em;
  margin-bottom: 22px;
}
.booking__copy h1 em {
  font-style:italic;
  background: linear-gradient(95deg, var(--gold), var(--gold-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.booking__copy p { color: var(--muted); margin-bottom: 16px; }
.booking__copy .line { font-size: 15px; }
.booking__photo {
  width:100%; border-radius: 12px;
  border: 1px solid var(--border);
  margin: 18px 0 6px;
  box-shadow: 0 26px 70px rgba(20,26,42,.10);
}
.calendar-shell {
  position:relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 35%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(18px, 3vw, 34px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 34px 90px rgba(20,26,42,.10);
}
.calendar-shell::before {
  content:""; position:absolute; top:-1px; left:8%; right:8%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(216,179,106,.75), transparent);
}
.calendar-shell iframe {
  width:100%; min-height: 700px; border:none; border-radius: 8px;
  background: transparent;
}
.thanks {
  max-width: var(--page); margin: 60px auto 120px; padding: 0 24px;
  text-align:center;
}
.thanks .receipt { margin: 0 auto; }
.next-steps { text-align:left; margin-top: 8px; }

select option { background: #fff; color: var(--text); }

/* minute-breakdown cards under the calendar */
.cardrow { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.mini-card {
  position:relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 40%);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 26px 24px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mini-card .kicker { margin-bottom: 8px; font-size: 10.5px; }
.mini-card > b { font-family: var(--display); font-weight:500; font-size: 19px; display:block; margin-bottom: 8px; }
.mini-card p:not(.kicker) { color: var(--muted); font-size: 14px; line-height:1.6; margin:0; }
@media (max-width: 820px) { .cardrow { grid-template-columns: 1fr; } }

/* ---------- ticker ---------- */
.ticker {
  position: sticky; top:0; z-index:50;
  background: var(--band);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  color: var(--gold);
  font-family: var(--mono);
  font-weight:400; font-size: 11.5px;
  letter-spacing:.18em; text-transform:uppercase;
  overflow:hidden; white-space:nowrap;
}
.ticker__track { display:inline-block; padding: 10px 0; animation: tick 36s linear infinite; }
.ticker__track span { margin: 0 1.8em; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- nav ---------- */
.nav {
  display:flex; align-items:center; gap: 34px;
  max-width: var(--page); margin: 0 auto;
  padding: 26px 28px 0;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  font-size: 11.5px;
}
.nav a { text-decoration:none; color: var(--muted); transition: color .25s; }
.nav a:hover { color: var(--gold-2); }
.nav__brand {
  font-family: var(--display); font-weight:600; font-style:normal;
  font-size: 23px; letter-spacing:.01em; text-transform:none;
  color: var(--text) !important;
  margin-right:auto;
  display:flex; align-items:center;
}
.nav__brand img { height: 32px; width: auto; display: block; }

/* ---------- hero ---------- */
.hero {
  position:relative;
  max-width: var(--page); margin: 0 auto;
  padding: 90px 28px 120px;
  isolation:isolate;
}
.hero--split {
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(30px, 5vw, 80px);
  align-items:center;
  text-align:left;
}
.hero--center { text-align:center; }
.hero .spot {
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(760px circle at var(--mx,60%) var(--my,30%), rgba(216,179,106,.07), transparent 62%);
}

.kicker {
  font-family: var(--mono);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size: clamp(10.5px, 1.3vw, 12.5px);
  color: var(--gold);
  margin-bottom: 28px;
}
.hero--center .kicker { max-width: 54em; margin-left:auto; margin-right:auto; }

.hero h1 {
  font-family: var(--display);
  font-weight:500;
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 1.04;
  letter-spacing:-.02em;
  margin-bottom: 30px;
}
.hero h1 em {
  font-style:italic; font-weight:500;
  background: linear-gradient(95deg, var(--gold) 5%, var(--gold-2) 60%, var(--gold) 110%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero__sub {
  max-width: 33em;
  margin-bottom: 42px;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height:1.7;
  color: var(--muted);
}
.hero--center .hero__sub { margin-left:auto; margin-right:auto; }
.hero__sub strong { color: var(--text); font-weight:600; }
.hero__micro { margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.hero__micro b { color: var(--gold-2); font-weight:600; }

/* Kicker as a pill — the plain .kicker is gold on near-black at 10.5px with .3em
   tracking, which disappears on an ad landing page where the first line has to be
   read in under a second. White text on a gold-tinted pill instead. */
.kicker--pill {
  display:inline-block;
  color: #fff;
  /* gold tint over a SOLID dark base — a translucent fill let the hero's glow bleed
     through and washed the white text out on mobile, on the one element that has to
     be readable instantly */
  background: linear-gradient(rgba(216,179,106,.2), rgba(216,179,106,.2)), #17130c;
  border: 1px solid rgba(216,179,106,.55);
  border-radius: 999px;
  padding: 9px 20px 8px;
  font-size: clamp(11.5px, 1.4vw, 13.5px);
  letter-spacing: .16em;
  margin-bottom: 26px;
  box-shadow: 0 0 26px rgba(216,179,106,.16), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Ad landing pages: body copy and chips at full contrast. The site default is
   var(--muted) #a69f8e, which reads as decoration rather than as the offer. */
.copy--loud p { color: var(--text); }
.copy--loud p strong { color: #fff; font-weight:600; }
.copy--loud .chips span { color: var(--text); font-size: 12.5px; }
.copy--loud .chips span::before { color: var(--gold-2); }

/* trust chips under hero CTA */
.chips { display:flex; flex-wrap:wrap; gap: 10px 22px; margin-top: 26px; }
.chips span {
  font-family: var(--mono); font-size: 11.5px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--muted);
}
.chips span::before { content:"— "; color: var(--gold); }

/* ---------- CTA ---------- */
.cta {
  display:inline-block;
  font-family: var(--body);
  font-weight:600;
  letter-spacing:.02em;
  font-size: clamp(15px, 1.8vw, 17px);
  color:#151208; text-decoration:none;
  background: linear-gradient(95deg, var(--gold-2), var(--gold) 85%);
  padding: 18px 42px;
  border:none; border-radius: 2px;
  box-shadow: 0 14px 50px rgba(216,179,106,.22), inset 0 1px 0 rgba(255,255,255,.55);
  transition: box-shadow .3s ease, transform .3s ease;
  cursor:pointer;
  position:relative; overflow:hidden;
}
.cta:hover, .cta:focus-visible {
  box-shadow: 0 18px 70px rgba(216,179,106,.4), inset 0 1px 0 rgba(255,255,255,.55);
  outline:none;
}
.cta::before {
  content:""; position:absolute; top:0; bottom:0; left:-80%; width:50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events:none;
}
.cta:hover::before { left:130%; }
.cta--ghost {
  background: transparent; color: var(--gold-2);
  box-shadow: inset 0 0 0 1px var(--gold);
}

/* ---------- living demo (hero diorama) ---------- */
.demo {
  position:relative;
  min-height: 480px;
  perspective: 1200px;
}
.demo__card {
  position:absolute;
  background: linear-gradient(180deg, rgba(30,27,20,.92), rgba(18,16,11,.92));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 30px 70px rgba(20,26,42,.10), inset 0 1px 0 rgba(var(--tint-rgb),.06);
  backdrop-filter: blur(8px);
  width: min(340px, 88%);
  opacity:0;
}
.demo__card--call   { top: 0; left: 4%; }
.demo__card--chat   { top: 96px; right: 0; width: min(360px, 92%); }
.demo__card--book   { top: 285px; left: 0; }
.demo__card--ledger { top: 392px; right: 6%; width: min(300px, 80%); }

.demo__time { font-family: var(--mono); font-size: 11px; letter-spacing:.16em; color: var(--muted); text-transform:uppercase; margin-bottom: 8px; }
.demo__title { font-weight:600; font-size: 15px; margin-bottom: 4px; }
.demo__note { font-size: 13px; color: var(--muted); }
.demo__badge {
  display:inline-block; margin-top:10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--green); border:1px solid rgba(127,181,135,.5); border-radius:999px;
  padding: 3px 12px;
}
.demo__badge--gold { color: var(--gold-2); border-color: rgba(216,179,106,.55); }

.bubble {
  max-width: 85%;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px; line-height:1.5;
  margin-top: 10px;
  opacity:0;
}
.bubble--caller { background: rgba(var(--tint-rgb),.07); border:1px solid var(--hairline); }
.bubble--ai {
  margin-left:auto;
  background: linear-gradient(120deg, rgba(216,179,106,.16), rgba(216,179,106,.08));
  border: 1px solid rgba(216,179,106,.3);
}
.bubble--typing span {
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background: var(--gold-2); margin-right:4px;
  animation: blink 1s infinite;
}
.bubble--typing span:nth-child(2){ animation-delay:.2s } .bubble--typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }

.demo__amt { font-family: var(--mono); font-weight:600; font-size: 24px; color: var(--gold-2); }
.demo__amt small { font-size: 12px; color: var(--muted); font-weight:400; }
.demo__loop-label {
  position:absolute; bottom:-34px; left:0; right:0; text-align:center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.22em;
  text-transform:uppercase; color: var(--muted);
}

/* free-website hero demo: site assembling in a browser frame */
.demo--site .frame {
  position:relative;
  border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(180deg, rgba(30,27,20,.94), rgba(18,16,11,.94));
  box-shadow: 0 30px 70px rgba(20,26,42,.10);
  overflow:hidden;
  min-height: 420px;
}
.frame__bar { display:flex; gap:6px; padding: 13px 16px; border-bottom:1px solid var(--hairline); }
.frame__bar i { width:9px; height:9px; border-radius:50%; background: rgba(var(--tint-rgb),.18); }
.frame__body { padding: 26px; }
.blockline { border-radius: 6px; background: rgba(var(--tint-rgb),.08); opacity:0; }
.blockline--hero { height: 90px; background: linear-gradient(120deg, rgba(216,179,106,.25), rgba(216,179,106,.08)); margin-bottom:16px; }
.blockline--t1 { height: 16px; width: 70%; margin-bottom: 10px; }
.blockline--t2 { height: 16px; width: 46%; margin-bottom: 22px; }
.blockline--card { height: 68px; margin-bottom: 12px; }
.frame__chat {
  position:absolute; right: 18px; bottom: 18px;
  background: linear-gradient(120deg, rgba(216,179,106,.9), rgba(239,217,167,.9));
  color:#151208; font-size:12.5px; font-weight:600;
  border-radius: 14px 14px 3px 14px;
  padding: 10px 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  opacity:0;
}
.frame__live {
  position:absolute; top: 12px; right: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing:.18em;
  color: var(--green); border:1px solid rgba(127,181,135,.5);
  border-radius: 999px; padding: 3px 10px; opacity:0;
}

/* ---------- panels ---------- */
.strip-zone { position:relative; padding: 10px 24px 120px; }

/* A SECTION, not a card. This used to be a bordered, blurred, shadowed panel — but
   the things inside it (.plan, .addon, .guarantee, .mini-card) are cards too, so every
   page was a card inside a card, and the outer one made the content read as a small
   box floating on the page instead of as the page itself.
   Exactly one level of card now: the section is plain, the components inside it are
   the cards. FOUNDER-DECISION 2026-09-10. */
.receipt {
  position:relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: 76px 24px 68px;
}
/* alias — kept so existing markup needs no edit; every section is the one page width */
.receipt--wide { max-width: var(--page); }
/* A hairline between sections instead of a border around each one — it still separates
   them, without drawing a box. */
.receipt + .receipt { border-top: 1px solid var(--hairline); }

/* Widening the panels would push body copy to ~130 characters a line, which is past
   the point people stop reading. The PANEL gets the width so the page stops looking
   boxed in; the TEXT keeps a readable measure. Headings, lists and ledger rows are
   deliberately left full-width — they are scanned, not read in long lines. */
.receipt > p { max-width: 72ch; }
.thanks .receipt > p, .receipt > p.center { margin-left:auto; margin-right:auto; }

.receipt .kicker { margin-bottom: 20px; }
.receipt h2 {
  font-family: var(--display);
  font-weight:500;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height:1.05;
  letter-spacing:-.015em;
  margin-bottom: 24px;
}
.receipt h2 em {
  font-style:italic;
  background: linear-gradient(95deg, var(--gold), var(--gold-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.receipt h3 {
  font-family: var(--display); font-weight:500;
  font-size: clamp(20px, 2.4vw, 26px);
  margin: 34px 0 10px;
}
.receipt p { margin-bottom: 18px; }
.receipt .soft { color: var(--muted); font-size: 15px; }
.receipt .divider { border:none; border-top: 1px solid var(--hairline); margin: 34px 0; }
.receipt .center { text-align:center; }

/* ledger rows */
.line {
  display:flex; align-items:baseline; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15.5px;
}
.line__desc { flex:1; }
.line__desc b {
  display:block; font-family: var(--display); font-weight:500;
  font-size:18px; letter-spacing:0; margin-bottom:3px;
}
.line__desc span { color: var(--muted); font-size: 14.5px; line-height:1.6; }
.line__dots { flex: 0 1 70px; border-bottom: 1px dotted rgba(var(--tint-rgb),.22); align-self:center; }
.line__amt { font-family: var(--mono); font-weight:600; white-space:nowrap; font-size: 16.5px; color: var(--gold-2); }
.line__amt.loss { color: var(--loss); }
.line__amt.struck { text-decoration: line-through; color: var(--muted); font-weight:400; }
.line--total { border-bottom:none; border-top: 1px solid rgba(216,179,106,.45); margin-top: 12px; padding-top: 22px; }
.line--total .line__amt { font-size: clamp(24px, 3vw, 32px); }
.price-final { color: var(--gold-2) !important; text-shadow: 0 0 40px rgba(216,179,106,.5); }

/* rich service rows (the machine, expanded) */
.svc { padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.svc:last-of-type { border-bottom:none; }
.svc__head { display:flex; align-items:baseline; gap:14px; }
.svc__num { font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing:.1em; min-width: 2.2em; }
.svc__head b { font-family: var(--display); font-weight:500; font-size: 20px; flex:1; }
.svc__worth { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space:nowrap; }
.svc p { color: var(--muted); font-size: 15px; margin: 8px 0 0 calc(2.2em + 14px); }
.svc p b { color: var(--text); font-weight:600; }

/* timeline */
.timeline { margin-top: 8px; }
.tl {
  position:relative;
  padding: 0 0 34px 34px;
  border-left: 1px solid rgba(216,179,106,.3);
  margin-left: 8px;
}
.tl:last-child { padding-bottom: 4px; border-left-color: transparent; }
.tl::before {
  content:""; position:absolute; left:-5px; top:4px;
  width:9px; height:9px; border-radius:50%;
  background: var(--gold); box-shadow: 0 0 16px rgba(216,179,106,.7);
}
.tl__when { font-family: var(--mono); font-size: 11.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--gold); margin-bottom: 6px; }
.tl b { font-family: var(--display); font-weight:500; font-size: 19px; display:block; margin-bottom: 6px; }
.tl p { color: var(--muted); font-size: 15px; margin:0; }

/* comparison table */
.compare { width:100%; border-collapse: collapse; margin-top: 10px; font-size: 14.5px; }
.compare th, .compare td { padding: 14px 14px; border-bottom: 1px solid var(--hairline); text-align:left; vertical-align:top; }
.compare th { font-family: var(--mono); font-size: 11px; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); font-weight:400; }
.compare td:first-child { color: var(--muted); }
.compare .yes { color: var(--green); }
.compare .no { color: var(--loss); }
.compare .col-lz { background: rgba(216,179,106,.05); }
.compare th.col-lz { color: var(--gold-2); }
.compare-wrap { overflow-x:auto; }

/* ROI calculator */
.roi { margin-top: 6px; }
.roi__row { margin-bottom: 26px; }
.roi__row label {
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: var(--mono); font-size: 12px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--muted); margin-bottom: 10px;
}
.roi__row label output { font-size: 16px; color: var(--gold-2); font-weight:600; letter-spacing:0; }
.roi input[type=range] {
  width:100%; appearance:none; -webkit-appearance:none;
  height: 2px; border-radius:2px;
  background: linear-gradient(90deg, var(--gold) var(--fill,50%), rgba(var(--tint-rgb),.15) var(--fill,50%));
  outline:none;
}
.roi input[type=range]::-webkit-slider-thumb {
  appearance:none; -webkit-appearance:none;
  width: 22px; height: 22px; border-radius:50%;
  background: var(--gold-2);
  border: 2px solid #151208;
  box-shadow: 0 0 0 1px var(--gold), 0 6px 20px rgba(0,0,0,.5);
  cursor:pointer;
}
.roi input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius:50%;
  background: var(--gold-2); border: 2px solid #151208;
  box-shadow: 0 0 0 1px var(--gold); cursor:pointer;
}
.roi__result {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-top: 30px;
}
.roi__stat {
  border: 1px solid var(--hairline); border-radius: 6px;
  padding: 20px 22px;
  background: var(--panel);
}
.roi__stat .k { font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); margin-bottom: 8px; }
.roi__stat .v { font-family: var(--mono); font-weight:600; font-size: clamp(22px, 2.6vw, 30px); color: var(--loss); }
.roi__stat--lz .v { color: var(--gold-2); }
.roi__verdict { margin-top: 22px; font-family: var(--display); font-style:italic; font-size: clamp(17px, 2vw, 21px); color: var(--text); }

/* guarantee */
.guarantee {
  border: 1px solid rgba(216,179,106,.4);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(216,179,106,.07), rgba(216,179,106,.02));
  padding: 34px clamp(22px, 4vw, 44px);
  margin-top: 30px;
}
.guarantee b { font-family: var(--display); font-weight:500; font-size: 21px; display:block; margin-bottom: 10px; }
.guarantee p { color: var(--muted); font-size: 15px; margin-bottom: 0; }

/* ---------- badges ---------- */
.stamp {
  display:inline-block;
  font-family: var(--mono);
  font-weight:400; text-transform:uppercase;
  letter-spacing:.2em;
  color: var(--gold-2);
  border: 1px solid rgba(216,179,106,.55);
  border-radius: 2px;
  padding: 8px 22px;
  font-size: clamp(11px, 1.4vw, 12.5px);
  background: rgba(216,179,106,.06);
  transform: rotate(var(--r, 0deg));
  margin: 4px 6px;
}
.stamp--big {
  font-size: clamp(13px, 1.8vw, 16px);
  padding: 13px 32px;
  box-shadow: 0 0 50px rgba(216,179,106,.2);
}
.stamp--float { position:absolute; z-index:2; }
html.js:not(.gsap) .stamp, html.js:not(.gsap) .slam-in { opacity:0; }
html:not(.js) .stamp, html:not(.js) .slam-in { opacity:1 !important; }
.stamped { animation: slam .5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes slam { 0% { opacity:0; transform: scale(1.3) rotate(var(--r,0deg)); } 100% { opacity:1; transform: scale(1) rotate(var(--r,0deg)); } }
.slam-in.stamped { animation: rowslam .5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes rowslam { 0% { opacity:0; transform: translateY(14px); } 100% { opacity:1; transform:none; } }

.barcode { height:1px; margin: 36px auto 10px; max-width: 360px; background: linear-gradient(90deg, transparent, rgba(216,179,106,.5), transparent); }
.barcode + .center { font-family: var(--mono); font-size: 10.5px; letter-spacing:.45em; color: var(--muted); }

/* ---------- statement interludes ---------- */
.night-note {
  text-align:center;
  max-width: 17em;
  margin: 150px auto;
  padding: 0 20px;
  font-family: var(--display);
  font-weight:500;
  letter-spacing:-.015em;
  font-size: clamp(30px, 5vw, 56px);
  line-height:1.16;
}
.night-note em {
  font-style:italic;
  background: linear-gradient(95deg, var(--gold), var(--gold-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* The .tally chip that lived here owned right:20px/bottom:20px. That corner is
   the AI chat assistant's. Removed rather than hidden. FOUNDER-DECISION 2026-09-10. */

/* ---------- forms ---------- */
.lead-form { margin-top: 8px; }
.lead-form .field { margin-bottom: 18px; }
.lead-form label {
  display:block;
  font-family: var(--mono);
  text-transform:uppercase; letter-spacing:.18em;
  font-size: 10.5px; margin-bottom:7px; color: var(--muted);
}
.lead-form input {
  width:100%;
  font-family: var(--body); font-size: 16px;
  padding: 15px 16px;
  background: rgba(var(--tint-rgb),.035);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  color: var(--text);
  transition: border-color .25s, box-shadow .25s;
}
.lead-form input::placeholder { color: rgba(247,243,234,.28); }
.lead-form input:focus {
  outline:none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216,179,106,.14);
}
.lead-form .cta { width:100%; text-align:center; margin-top: 12px; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 16px; text-align:center; }
.form-done { text-align:center; padding: 30px 0 10px; }

/* ---------- steps ---------- */
.step { display:flex; gap:24px; padding: 24px 0; border-bottom: 1px solid var(--hairline); }
.step:last-of-type { border-bottom:none; }
.step__num {
  font-family: var(--display); font-weight:500; font-style:italic; font-size: 42px; line-height:1;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  min-width: 54px;
}
.step__body b { display:block; font-family: var(--display); font-weight:500; font-size:19px; margin-bottom:5px; }
.step__body span { color: var(--muted); font-size: 15px; }

/* ---------- blog ---------- */
.post-list { max-width:var(--page); margin:30px auto 120px; padding: 0 22px; }
.post-card {
  display:block; text-decoration:none;
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 40%);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 32px clamp(24px,4vw,46px);
  margin-bottom:26px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: rgba(216,179,106,.5);
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.post-card h2 { font-family:var(--display); font-weight:500; font-size:clamp(21px,2.8vw,28px); line-height:1.15; margin-bottom:9px; }
.post-card p { color:var(--muted); font-size:14.5px; line-height:1.65; }
.post-card .meta { font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em; font-size:10px; color:var(--gold); margin-bottom:12px; }

.article {
  max-width:var(--page); margin:44px auto 100px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 30%);
  border:1px solid var(--border); border-radius:6px;
  color:var(--text);
  padding:60px clamp(26px,5vw,64px);
  box-shadow:0 34px 90px rgba(0,0,0,.5);
}
.article h1 { font-family:var(--display); font-weight:500; font-size:clamp(30px,4.4vw,48px); letter-spacing:-.015em; line-height:1.08; margin-bottom:18px; }
.article h2 { font-family:var(--display); font-weight:500; font-size:clamp(22px,3vw,30px); margin:38px 0 12px; }
/* The article FRAME is the one page width like every other page; the TEXT keeps its
   measure, because 1240px of prose is roughly 150 characters a line. */
.article p, .article li { margin-bottom:17px; font-size:16.5px; line-height:1.78; color: var(--text); max-width:72ch; }
.article ul, .article ol { padding-left:22px; margin-bottom:17px; }
.article .meta { font-family:var(--mono); text-transform:uppercase; letter-spacing:.22em; font-size:10.5px; color:var(--gold); margin-bottom:24px; }
.article a { color:var(--gold-2); }
.article .hero-img { width:100%; height:auto; margin:8px 0 28px; border-radius:6px; border:1px solid var(--border); }
.article .callout { border:1px solid rgba(216,179,106,.4); border-radius:6px; padding:22px 24px; margin:26px 0; background:rgba(216,179,106,.05); }

/* ---------- booking widget ---------- */
.bw { font-size: 15px; }
.bw__meta { display:flex; flex-wrap:wrap; gap: 8px 20px; margin-bottom: 18px; color: var(--muted); font-size: 13.5px; }
.bw__meta b { color: var(--text); font-weight:600; }
.bw__tz { margin: 6px 0 18px; }
.bw__tz select {
  width:100%; font-family: var(--body); font-size: 14px;
  padding: 10px 12px; border-radius: 4px;
  background: rgba(var(--tint-rgb),.035); border:1px solid var(--hairline); color: var(--text);
}
.bw__tz select:focus { outline:none; border-color: var(--gold); }
.bw__nav { display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.bw__nav b { font-family: var(--display); font-weight:500; font-size: 18px; }
.bw__nav button {
  background:none; border:1px solid var(--hairline); border-radius: 4px;
  color: var(--gold-2); font-size: 18px; width: 34px; height: 34px; cursor:pointer;
}
.bw__nav button:disabled { opacity:.3; cursor:default; }
.bw__grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 18px; }
.bw__dow { text-align:center; font-family: var(--mono); font-size: 10px; letter-spacing:.1em; color: var(--muted); padding: 6px 0; text-transform:uppercase; }
.bw__day {
  aspect-ratio: 1; border-radius: 6px; border: 1px solid transparent;
  background: none; color: var(--muted); font-family: var(--body); font-size: 14px;
  cursor: default; position:relative;
}
.bw__day.has {
  background: rgba(216,179,106,.08); border-color: rgba(216,179,106,.3);
  color: var(--text); cursor:pointer; font-weight:600;
}
.bw__day.has:hover { background: rgba(216,179,106,.16); }
.bw__day.sel { background: var(--gold); color: #151208; border-color: var(--gold); }
.bw__pick { display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(18px, 3vw, 40px); align-items:start; margin-bottom: 6px; }
.bw__slotpane { border-left: 1px solid var(--hairline); padding-left: clamp(16px, 2.5vw, 32px); min-height: 280px; }
.bw__slotpane > b { font-family: var(--display); font-weight:500; font-size: 17px; display:block; margin-bottom: 12px; }
.bw__slots {
  display:flex; flex-direction:column; gap: 8px; margin-bottom: 8px;
  max-height: 400px; overflow-y:auto; padding-right: 6px;
  scrollbar-width: thin;                       /* internal scroll, ghlops-style */
  scrollbar-color: rgba(216,179,106,.45) transparent;
}
.bw__slots::-webkit-scrollbar { width: 4px; }
.bw__slots::-webkit-scrollbar-track { background: transparent; }
.bw__slots::-webkit-scrollbar-thumb { background: rgba(216,179,106,.45); border-radius: 4px; }
@media (max-width: 760px) {
  .bw__pick { grid-template-columns: 1fr; }
  .bw__slotpane { border-left:none; padding-left:0; min-height:0; }
}
.bw__slot {
  padding: 12px 8px; border-radius: 4px; text-align:center;
  border: 1px solid rgba(216,179,106,.35); background: rgba(216,179,106,.05);
  color: var(--gold-2); font-family: var(--mono); font-size: 14px; cursor:pointer;
  width:100%;
}
.bw__slot:hover { background: rgba(216,179,106,.16); }
.bw__chosen {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding: 12px 14px; border:1px solid rgba(216,179,106,.4); border-radius: 6px;
  background: rgba(216,179,106,.07); margin-bottom: 18px; font-size: 14px;
}
.bw__chosen b { color: var(--gold-2); }
.bw__chosen a { color: var(--muted); font-size: 12.5px; cursor:pointer; text-decoration:underline; white-space:nowrap; }
.bw .field-row { display:grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.bw .consent { display:flex; gap: 10px; align-items:flex-start; margin: 16px 0 4px; font-size: 12.5px; color: var(--muted); line-height:1.5; }
.bw .consent input { margin-top: 3px; accent-color: var(--gold); width: 15px; height: 15px; flex:none; }
.bw__err { color: var(--loss); font-size: 13.5px; margin-top: 12px; text-align:center; }
.bw__loading { text-align:center; color: var(--muted); padding: 40px 0; font-family: var(--mono); font-size: 12.5px; letter-spacing:.14em; text-transform:uppercase; }
.bw select, .bw input[type=text], .bw input[type=tel], .bw input[type=email], .bw textarea {
  width:100%; font-family: var(--body); font-size: 15px;
  padding: 12px 13px; border-radius: 4px; margin-bottom: 12px;
  background: rgba(var(--tint-rgb),.035); border:1px solid var(--hairline); color: var(--text);
}
.bw select:focus, .bw input:focus, .bw textarea:focus { outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,179,106,.12); }
.bw label { display:block; font-family: var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size: 10px; margin-bottom: 5px; color: var(--muted); }
.bw textarea { min-height: 64px; resize: vertical; }
.bw .cta { width:100%; text-align:center; }
.bw__support { text-align:center; font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.bw__support a { color: var(--gold-2); }

.lead-form .consent {
  display:flex; gap: 10px; align-items:flex-start;
  margin: 18px 0 6px; font-size: 12.5px; line-height:1.55; color: var(--muted);
}
.lead-form .consent input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; flex:none; }
.lead-form .consent label {
  text-transform:none; letter-spacing:0; font-family: var(--body);
  font-size: 12.5px; margin:0; color: var(--muted);
}

.eligibility {
  border-left: 2px solid var(--loss);
  background: rgba(226,105,92,.07);
  padding: 12px 14px; margin: 0 0 16px;
  font-size: 13.5px; line-height: 1.55; color: #e8ded6;
  border-radius: 0 4px 4px 0;
}

/* ---------- multi-step form progress ---------- */
.stepbar { height: 3px; border-radius: 3px; background: rgba(var(--tint-rgb),.1); overflow:hidden; margin-bottom: 8px; }
.stepbar span { display:block; height:100%; width:33%; border-radius:3px; background: linear-gradient(95deg, var(--gold), var(--gold-2)); transition: width .35s ease; }
.stepcount { font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); margin-bottom: 18px; }
.lead-form textarea {
  width:100%; font-family: var(--body); font-size: 16px;
  padding: 15px 16px; border-radius: 4px; resize: vertical;
  background: rgba(var(--tint-rgb),.035); border: 1px solid var(--hairline); color: var(--text);
}
.lead-form select {
  width:100%; font-family: var(--body); font-size: 16px;
  padding: 15px 16px; border-radius: 4px;
  background: rgba(var(--tint-rgb),.035); border: 1px solid var(--hairline); color: var(--text);
}
.lead-form textarea:focus, .lead-form select:focus {
  outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,179,106,.14);
}

/* ---------- plans ---------- */
.plans { display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 10px; }
.plans--single { grid-template-columns: minmax(0, 520px); justify-content:center; }
/* Cards size to their own content. The Growth Plan lists eight things and the side
   plans five, so stretching all three to equal height left ~350px of dead space above
   the outer buttons. The featured card being tallest is the point. */
.plans--three { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items:start; }
@media (max-width: 1040px) { .plans--three { grid-template-columns: 1fr; } }
.plan__usage { color: var(--muted); font-size: 12.5px; margin: -14px 0 20px; font-family: var(--mono); }
/* the SEO add-on — sits under the plans as an addition to any of them, not a peer */
.addon {
  margin-top: 26px; padding: 26px clamp(20px, 3vw, 32px);
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 60%);
  border: 1px solid var(--border); border-radius: 14px;
  display:grid; grid-template-columns: 1fr auto; gap: 20px 28px; align-items:center;
}
.addon__price { font-family: var(--mono); font-size: 30px; color: var(--gold-2); font-weight:600; line-height:1; white-space:nowrap; }
.addon__price small { font-size: 14px; color: var(--muted); font-weight:400; }
.addon h3 { font-family: var(--display); font-weight:500; font-size: 21px; margin-bottom: 8px; }
.addon p { color: var(--muted); font-size: 14.5px; margin:0; }
.addon .cta { white-space:nowrap; }
@media (max-width: 760px) { .addon { grid-template-columns: 1fr; text-align:center; } }
.plan {
  position:relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 40%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 34px clamp(22px, 3vw, 36px) 30px;
  display:flex; flex-direction:column;
}
.plan--featured { border-color: rgba(216,179,106,.5); box-shadow: 0 0 60px rgba(216,179,106,.08); }
.plan__tag {
  position:absolute; top:-11px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing:.2em; text-transform:uppercase;
  color:#151208; background: linear-gradient(95deg, var(--gold-2), var(--gold));
  padding: 4px 14px; border-radius: 999px; white-space:nowrap;
}
.plan__name { font-family: var(--display); font-weight:500; font-size: 23px; margin-bottom: 6px; }
.plan__for { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.plan__price { font-family: var(--mono); font-size: clamp(32px, 4vw, 42px); color: var(--gold-2); font-weight:600; line-height:1; }
.plan__price small { font-size: 15px; color: var(--muted); font-weight:400; }
.plan__note { color: var(--muted); font-size: 13px; margin: 8px 0 22px; }
.plan__list { list-style:none; padding:0; margin: 0 0 26px; }
.plan__list li { padding: 9px 0 9px 24px; position:relative; font-size: 15px; border-bottom: 1px solid var(--hairline); }
.plan__list li:last-child { border-bottom:none; }
.plan__list li::before { content:"✓"; position:absolute; left:0; color: var(--gold); font-size: 13px; }
.plan .cta { margin-top:auto; width:100%; text-align:center; }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }

/* ---------- glow blobs ---------- */
.glow {
  position:fixed; width:64vmax; height:64vmax; border-radius:50%;
  filter: blur(100px); mix-blend-mode:screen;
  pointer-events:none; z-index:0; opacity:.1;
}
.glow--red    { background: radial-gradient(circle, #d8b36a 0%, transparent 60%); top:-30vmax; left:-26vmax; }
.glow--yellow { background: radial-gradient(circle, #efd9a7 0%, transparent 60%); bottom:-32vmax; right:-28vmax; opacity:.06; }

/* ---------- GSAP initial states ---------- */
html.gsap .hero h1 { visibility:hidden; }
html.gsap .receipt h2 { opacity:0; }
html.gsap .post-card { opacity:0; }

/* ---------- footer ---------- */
footer {
  text-align:center;
  padding: 60px 20px 90px;
  color: var(--muted);
  font-size: 13px;
}
footer a { color: #d5cfbf; }

/* ---------- accessibility / motion ---------- */
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ticker__track, body::before { animation:none; }
  .stamp, .slam-in, html.gsap .receipt h2, html.gsap .post-card,
  .demo__card, .bubble, .blockline, .frame__chat, .frame__live { opacity:1 !important; }
  html.gsap .hero h1 { visibility:visible; }
  html { scroll-behavior:auto; }
}

@media (max-width: 960px) {
  .hero--split { grid-template-columns: 1fr; text-align:center; }
  .hero--split .hero__sub, .hero--split .chips { margin-left:auto; margin-right:auto; justify-content:center; }
  .demo { margin: 30px auto 40px; width: min(420px, 100%); }
}
@media (max-width: 600px) {
  .receipt { margin: 64px auto; padding-top: 44px; }
  .tally { right: 10px; bottom: 10px; padding: 10px 14px; }
  .tally__amt { font-size: 18px; }
  .nav { gap: 14px 18px; font-size: 11px; flex-wrap: wrap; }
  .nav .cta { order: 10; width: 100%; text-align: center; margin-top: 4px; padding: 13px 20px !important; font-size: 13px !important; }
  .demo { min-height: 520px; }
  .svc p { margin-left: 0; }
}

/* ---------- international phone field (assets/phone.js) ---------- */
.lzph { position:relative; display:flex; align-items:stretch; }
.lzph input[type=tel] { flex:1 1 auto; min-width:0; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; border-left:0 !important; margin-bottom:0 !important; }
.bw .lzph { margin-bottom: 12px; }
.lzph__btn {
  display:flex; align-items:center; gap:6px; flex:none;
  padding: 0 11px 0 13px;
  font-family: var(--body); font-size: 15px; color: var(--text);
  background: rgba(var(--tint-rgb),.05);
  border: 1px solid var(--hairline);
  border-right: 1px solid rgba(216,179,106,.14);
  border-radius: 4px 0 0 4px;
  cursor:pointer;
  transition: background .2s, border-color .25s;
}
.lzph__btn:hover { background: rgba(216,179,106,.1); }
.lzph__btn:focus-visible { outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(216,179,106,.14); }
.lzph__flag { font-size: 17px; line-height:1; }
.lzph__dial { font-family: var(--mono); font-size: 13.5px; color: var(--gold-2); }
.lzph__caret { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--muted); }
.lzph__menu {
  position:absolute; z-index: 60; top: calc(100% + 6px); left:0;
  width: min(320px, calc(100vw - 48px));
  background: #14110c;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 18px 46px rgba(20,26,42,.10);
  overflow:hidden;
}
.lzph__search {
  width:100%; box-sizing:border-box; display:block;
  font-family: var(--body); font-size: 14px;
  padding: 11px 13px; margin:0 !important;
  background: rgba(var(--tint-rgb),.04);
  border:0; border-bottom:1px solid var(--hairline);
  color: var(--text); border-radius:0;
}
.lzph__search:focus { outline:none; background: rgba(216,179,106,.08); }
.lzph__list { max-height: 264px; overflow-y:auto; overscroll-behavior: contain; }
.lzph__opt {
  display:flex; align-items:center; gap:10px; width:100%;
  padding: 9px 13px; text-align:left;
  background:none; border:0; cursor:pointer;
  font-family: var(--body); font-size: 14px; color: var(--text);
}
.lzph__opt:hover, .lzph__opt:focus-visible { background: rgba(216,179,106,.12); outline:none; }
.lzph__name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lzph__code { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* ============================================================
   LIGHT THEME — the GHLops system. FOUNDER-DECISION 2026-09-10.
   Off-white ground, white cards, navy ink, gold as a sparing accent,
   Figtree throughout, and a dark navy band behind the hero so the page
   still opens with drama without darkening every section.
   ============================================================ */

/* Figtree is a sans — the italic serif emphasis and the gold gradient clip both
   belong to the old identity. Solid accent, upright, heavy. */
h1 em, h2 em, .hero h1 em, .receipt h2 em, .booking__copy h1 em, .night-note em {
  font-style: normal;
  font-weight: 800;
  background: none;
  -webkit-text-fill-color: var(--gold-2);
  color: var(--gold-2);
}
h1, h2, .hero h1, .receipt h2, .booking__copy h1,
.plan__name, .mini-card > b, .article h1, .article h2 {
  font-weight: 800;
  letter-spacing: -.022em;
}
.nav__brand { font-weight: 800; }

/* the dark band — heroes only */
.hero, .booking__copy {
  background: var(--band);
  color: var(--band-ink);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  padding-left: max(24px, calc(50vw - var(--page) / 2));
  padding-right: max(24px, calc(50vw - var(--page) / 2));
}
.hero { padding-top: 72px; padding-bottom: 88px; }
.booking__copy { padding-top: 60px; padding-bottom: 52px; margin-bottom: 44px; }
.hero .hero__sub, .booking__copy p { color: var(--band-mut); }
.hero .hero__sub strong, .booking__copy p strong { color: #fff; }
.hero .chips span, .booking__copy .chips span { color: var(--band-mut); }
.hero .kicker, .booking__copy .kicker { color: var(--gold); }
.hero .cta--ghost, .booking__copy .cta--ghost {
  color: #fff; border: 1px solid rgba(255,255,255,.28); background: transparent;
}
/* the hero's cursor-following spotlight belongs on a dark ground, so it stays */
.hero .spot { background: radial-gradient(760px circle at var(--mx,60%) var(--my,30%), rgba(217,164,65,.10), transparent 62%); }

/* buttons: gold fill, dark ink, soft shadow for a light ground */
.cta {
  color: #141a2a;
  background: var(--gold);
  border-radius: 8px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(217,164,65,.30);
}
.cta:hover { box-shadow: 0 10px 28px rgba(217,164,65,.42); }
.cta--ghost { color: var(--text); background: #fff; border: 1px solid var(--border); box-shadow: none; }

/* cards: flat white with a real shadow, no glass */
.plan, .addon, .guarantee, .mini-card, .calendar-shell, .tally, .article .callout {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(20,26,42,.05), 0 10px 30px rgba(20,26,42,.07);
}
.plan--featured { border-color: var(--gold); box-shadow: 0 14px 40px rgba(217,164,65,.22); }
.plan__tag { background: var(--gold); color: #141a2a; font-weight: 700; }
.calendar-shell::before, .receipt::before { display: none; }

/* the kicker pill on a light ground */
.kicker--pill {
  background: rgba(217,164,65,.12);
  border: 1px solid rgba(217,164,65,.42);
  color: var(--gold-2);
  box-shadow: none;
}
.hero .kicker--pill, .booking__copy .kicker--pill { color: var(--gold); }

/* form fields */
.lead-form input, .bw select, .bw input, .bw textarea {
  background: #fff; border: 1px solid var(--border); color: var(--text);
}

/* the logo artwork is white on transparent — inverted until a dark-ink file exists */
.nav__brand img { filter: invert(1) brightness(.18); }
.hero .nav__brand img { filter: none; }

/* The header bar joins the hero band — ticker, nav and hero read as one dark block,
   then the page turns light for the content. This also retires the invert() hack on
   the logo: the artwork is white, so it simply sits on the dark bar as intended, and
   no dark-ink logo file is needed after all. FOUNDER-DECISION 2026-09-10. */
.nav {
  background: var(--band);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  padding: 22px max(28px, calc(50vw - var(--page) / 2));
}
.nav a { color: var(--band-mut); }
.nav a:hover { color: var(--gold); }
.nav__brand { color: #fff !important; }
.nav__brand img { filter: none; }
.nav .cta--ghost { color:#fff; background:transparent; border:1px solid rgba(255,255,255,.28); }
.nav .cta--ghost:hover { border-color: var(--gold); color: var(--gold); }
/* the hero sits directly under the bar now, so it needs less top air of its own */
.hero { padding-top: 48px; }
.booking__copy { padding-top: 44px; }

/* ---------- feature/step rows become cards, GHLops-style ----------
   Scoped to .next-steps ONLY. Bare .line rows elsewhere are the invoice ledger —
   dotted leader, amount on the right — and turning those into cards would break
   the whole "invisible invoice" metaphor the homepage is built on. */
.next-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 28px;
}
.next-steps .line {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 26px 24px;
  box-shadow: 0 1px 2px rgba(20,26,42,.05), 0 10px 30px rgba(20,26,42,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.next-steps .line:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(20,26,42,.11); }
.next-steps .line__desc b {
  font-family: var(--display); font-weight: 800;
  font-size: 18.5px; letter-spacing: -.015em;
  margin-bottom: 8px;
}
/* the gold marker that sits above each card heading, in place of GHLops' icon tile */
.next-steps .line__desc b::before {
  content: ""; display: block;
  width: 26px; height: 3px; border-radius: 2px;
  background: var(--gold); margin-bottom: 14px;
}
.next-steps .line__desc span { font-size: 15px; line-height: 1.65; }
.next-steps .line__dots { display: none; }
.next-steps .line__amt { display: inline-block; margin-top: 14px; font-size: 15px; }

/* ---------- a section that inverts into a dark rounded block ----------
   Add class="receipt receipt--band" to any section that should carry the navy
   treatment, the way ghlops.com breaks up a run of light sections. */
.receipt--band {
  background: var(--band);
  color: var(--band-ink);
  border-radius: 20px;
  padding: 56px clamp(26px, 5vw, 56px) 52px;
  margin-top: 40px; margin-bottom: 40px;
}
.receipt--band + .receipt { border-top: none; }
.receipt--band p { color: var(--band-mut); }
.receipt--band p strong, .receipt--band .line__desc b { color: #fff; }
.receipt--band .kicker { color: var(--gold); }
.receipt--band .next-steps .line {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}
.receipt--band .next-steps .line:hover { background: rgba(255,255,255,.08); box-shadow: none; }
.receipt--band .next-steps .line__desc span { color: var(--band-mut); }

/* The dark header zone is three stacked elements — ticker, nav, hero. Two things made
   it read as separate blocks instead of one band:
   1. .ticker carries `border-bottom: 1px solid var(--border)` (line 172), and --border
      is now a LIGHT #e2e2dc, so it drew a pale hairline straight across the dark
      header. That was the visible seam.
   2. All three were flat, identical navy, so the band had no depth.
   They now share one continuous gradient, each handing off at exactly the colour the
   next begins with, so there is no seam — and the radial adds the lift toward the
   middle that ghlops.com has. */
.ticker {
  border-bottom: none;
  background: linear-gradient(180deg, #05080f, #070c17);
}
.nav {
  background: linear-gradient(180deg, #070c17, var(--band));
}
.hero, .booking__copy {
  background:
    radial-gradient(900px circle at 68% 18%, rgba(217,164,65,.09), transparent 60%),
    linear-gradient(180deg, var(--band), #0d1526 55%, var(--band));
}

/* ---------- booking pages: the calendar sits ON the navy, not on a white card ----------
   ghlops.com/Meeting runs navy continuously from header through hero and the calendar
   stage, and only turns light for the "how it works" steps below. Ours was navy hero →
   light ground → white calendar card, which is the colour break the founder called out.
   `.booking__copy + div` is the calendar wrapper in every booking page's markup, so
   this needs no HTML change. FOUNDER-DECISION 2026-09-10. */
.booking__copy { margin-bottom: 0; }
.booking__copy + div {
  background: linear-gradient(180deg, var(--band), #0b1120);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  padding: 0 max(24px, calc(50vw - var(--page) / 2)) 64px;
}
.booking__copy + div > * { max-width: var(--page); margin-left:auto; margin-right:auto; }
.booking__copy + div .soft { color: var(--band-mut); }

/* the calendar panel: a lift off the navy, not a white card */
.calendar-shell {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.32);
  color: var(--band-ink);
}
.calendar-shell .kicker { color: var(--gold); }
.bw, .bw b, .bw strong, .bw__slotpane > b { color: var(--band-ink); }
.bw__loading { color: var(--band-mut); }

/* days: available = white with a gold dot beneath, chosen = a solid gold disc */
.bw__day { color: var(--band-mut); border-color: transparent; background: transparent; }
.bw__day.has {
  color: #fff; background: transparent; border-color: transparent; position: relative;
}
.bw__day.has::after {
  content:""; position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background: var(--gold);
}
.bw__day.has:hover { background: rgba(255,255,255,.08); }
.bw__day.sel, .bw__day.sel:hover {
  background: var(--gold); color:#141a2a; border-color: var(--gold); font-weight:700;
}
.bw__day.sel::after { background: #141a2a; }

.bw__slotpane { border-left-color: rgba(255,255,255,.10); }
.bw__slot {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.bw__slot:hover { background: rgba(217,164,65,.18); border-color: var(--gold); }
.bw__chosen { background: rgba(217,164,65,.10); border-color: rgba(217,164,65,.45); color: var(--band-ink); }

/* form fields inside the navy panel */
.bw select, .bw input, .bw textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
}
.bw select:focus, .bw input:focus, .bw textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,164,65,.18); }
.bw label, .bw .consent { color: var(--band-mut); }
.bw select option { background: #111a2e; color: #fff; }
.bw .lzph__btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color:#fff; }

/* ---------- booking pages are ONE colour, top to bottom ----------
   Scoped with :has(.booking) — `.booking` exists only on demo-call,
   onboarding-call, website-reveal and fb-ads-297, so nothing leaks to the rest
   of the site. Previously only the hero and calendar stage were navy and the
   cards, ground and footer stayed light. FOUNDER-DECISION 2026-09-10: the whole
   page is navy. */
body:has(.booking) { background: var(--band); color: var(--band-ink); }
body:has(.booking) .booking__copy + div { padding-bottom: 24px; }

body:has(.booking) .mini-card,
body:has(.booking) .next-steps .line {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: none;
  color: var(--band-ink);
}
body:has(.booking) .mini-card:hover,
body:has(.booking) .next-steps .line:hover {
  background: rgba(255,255,255,.075);
  box-shadow: none;
}
body:has(.booking) .mini-card > b,
body:has(.booking) .next-steps .line__desc b { color: #fff; }
body:has(.booking) .mini-card p:not(.kicker),
body:has(.booking) .next-steps .line__desc span,
body:has(.booking) .receipt p,
body:has(.booking) .soft { color: var(--band-mut); }
body:has(.booking) .receipt h2,
body:has(.booking) .receipt h3 { color: #fff; }
body:has(.booking) .receipt p strong { color: #fff; }
body:has(.booking) .kicker { color: var(--gold); }
body:has(.booking) .receipt + .receipt { border-top-color: rgba(255,255,255,.10); }
body:has(.booking) .chips span { color: var(--band-mut); }
body:has(.booking) .divider { border-top-color: rgba(255,255,255,.10); }

body:has(.booking) footer { color: var(--band-mut); }
body:has(.booking) footer a { color: var(--band-mut); }
body:has(.booking) footer a:hover { color: var(--gold); }
body:has(.booking) footer b { color: #fff; }

/* the ghost button needs the dark-ground treatment on these pages */
body:has(.booking) .cta--ghost {
  color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.28);
}
body:has(.booking) .cta--ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ============================================================
   SECTIONS — the ghlops.com two-column zig-zag.
   Sampled from the live site: .svc-grid is `grid-template-columns: 1.1fr 1fr;
   gap: 60px`, with a plain copy column and a navy rounded panel
   (`#0a0f1e`, radius 22px, padding 34px 32px, shadow 0 34px 80px -32px) on the
   other side. Every second one carries `.flip`, which swaps the sides.

   Applied here with :has() so the copy stays in column one and .next-steps
   becomes the panel in column two — and every second section swaps. That means
   ZERO HTML changes across the fifteen pages that use this markup.
   FOUNDER-DECISION 2026-09-10.
   ============================================================ */
@media (min-width: 900px) {
  .receipt:has(> .next-steps) {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    /* row-gap MUST be 0: the panel spans 99 rows so the copy can sit beside it, and
       a row gap would multiply across every empty implicit row (99 x 60px = 5,900px
       of blank section). Column gap only. */
    column-gap: 60px;
    row-gap: 0;
    align-content: start;
  }
  .receipt:has(> .next-steps) > :not(.next-steps) { grid-column: 1; }
  .receipt:has(> .next-steps) > .next-steps {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: center;
    margin-top: 0;
  }
  /* alternate the sides, the way .flip does on theirs */
  .receipt:has(> .next-steps):nth-of-type(even) > :not(.next-steps) { grid-column: 2; }
  .receipt:has(> .next-steps):nth-of-type(even) > .next-steps { grid-column: 1; }
}

/* the panel itself — one navy card holding the rows, not a grid of white cards */
.receipt > .next-steps {
  display: block;
  background: var(--band);
  border-radius: 22px;
  padding: 34px 32px;
  box-shadow: 0 34px 80px -32px rgba(10,15,30,.55);
}
.receipt > .next-steps .line {
  background: transparent !important;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
  box-shadow: none !important;
  padding: 17px 0;
  transform: none !important;
}
.receipt > .next-steps .line:last-child { border-bottom: none; padding-bottom: 0; }
.receipt > .next-steps .line:first-child { padding-top: 0; }
.receipt > .next-steps .line__desc b { color: #fff; font-size: 17px; }
.receipt > .next-steps .line__desc b::before { display: none; }
.receipt > .next-steps .line__desc span { color: var(--band-mut); }
.receipt > .next-steps .line__amt { color: var(--gold); }

/* on the booking pages the ground is already navy, so the panel lifts instead */
body:has(.booking) .receipt > .next-steps {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: none;
}

/* ---------- the 3D gold button ----------
   Sampled from theirs: a vertical gradient light->mid->dark, an inset white
   highlight on the top edge, and a coloured drop shadow lifted with a negative
   spread. That combination is what reads as raised rather than flat. */
.cta {
  background: linear-gradient(180deg, #e9bc5c, #d9a441 55%, #b8862e);
  color: #221602;
  border-radius: 12px;
  font-weight: 700;
  box-shadow:
    0 10px 28px -8px rgba(217,164,65,.55),
    inset 0 1px 0 rgba(255,255,255,.50);
  transition: transform .18s ease, box-shadow .25s ease, filter .2s ease;
}
.cta:hover, .cta:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 16px 36px -8px rgba(217,164,65,.62),
    inset 0 1px 0 rgba(255,255,255,.60);
}
.cta:active { transform: translateY(1px); box-shadow: 0 4px 14px -6px rgba(217,164,65,.5), inset 0 1px 0 rgba(255,255,255,.4); }

/* glass ghost button — frosted rather than flat */
.cta--ghost {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.cta--ghost:hover { background: rgba(255,255,255,.8); border-color: var(--gold); transform: translateY(-1px); }
.nav .cta--ghost, .hero .cta--ghost, .booking__copy .cta--ghost, body:has(.booking) .cta--ghost {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.nav .cta--ghost:hover, .hero .cta--ghost:hover, .booking__copy .cta--ghost:hover, body:has(.booking) .cta--ghost:hover {
  background: rgba(255,255,255,.13); border-color: var(--gold); color: #fff;
}

/* Specificity fix: `body:has(.booking) .next-steps .line` (the card treatment for the
   mini-cards) outranks `.receipt > .next-steps .line`, so rows inside the panel kept a
   full border and drew a box-inside-a-box. Inside the panel they are dividers only. */
body:has(.booking) .receipt > .next-steps .line,
.receipt > .next-steps .line {
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
body:has(.booking) .receipt > .next-steps .line:last-child,
.receipt > .next-steps .line:last-child { border-bottom: none; }

/* ============================================================
   SECTION SHAPE FOLLOWS THE POINTER COUNT.
   Measured across the site: sections carry either 3 pointers (fb-ads-297,
   thank-you-demo) or 4-6 (website-and-agents, local-seo, the welcome pages).

   A 3-row panel is ~380px and sits happily beside a heading — that is the
   zig-zag, and it stays. A 6-row panel is ~900px, and nothing balances that
   next to two lines of type, which is what left the copy column stranded.

   So: 4 or more pointers -> the section goes full width, heading above, and the
   pointers become a two-column grid of cards with a navy header. The quantity
   query `:has(> .next-steps > .line:nth-child(4))` does the counting, so this
   still needs no HTML change. FOUNDER-DECISION 2026-09-10.
   ============================================================ */
@media (min-width: 900px) {
  /* 4+ pointers: cancel the two-column split, go full width */
  .receipt:has(> .next-steps > .line:nth-child(4)) {
    display: block;
  }
  .receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps {
    grid-column: auto;
    grid-row: auto;
  }
}

/* the wide layout: a grid of cards, not one tall panel */
.receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}
.receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 1px 2px rgba(20,26,42,.05), 0 10px 30px rgba(20,26,42,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(20,26,42,.11);
}
/* the navy header on each card */
.receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line__desc { display: block; }
.receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line__desc b {
  display: block;
  background: linear-gradient(180deg, #101b31, var(--band));
  color: #fff;
  font-size: 16.5px;
  padding: 15px 22px 14px;
  margin: 0;
  border-bottom: 2px solid var(--gold);
}
.receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line__desc b::before { display: none; }
.receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line__desc span {
  display: block;
  padding: 16px 22px 20px;
  color: var(--muted);
}
.receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line__amt {
  display: block; padding: 0 22px 18px; color: var(--gold-2);
}

/* on the booking pages the ground is navy, so a white card would break the single
   colour — the card lifts off the navy instead and the header goes gold-on-dark */
body:has(.booking) .receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: none;
}
body:has(.booking) .receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line__desc b {
  background: rgba(255,255,255,.05);
  color: #fff;
}
body:has(.booking) .receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line__desc span {
  color: var(--band-mut);
}

/* Card headers align across the row. Some titles wrap to two lines and some do not,
   which put the gold underline at a different height on every card. A flex box with a
   two-line floor makes the rule land on one line across the grid. */
.receipt:has(> .next-steps > .line:nth-child(4)) > .next-steps .line__desc b {
  display: flex;
  align-items: center;
  line-height: 1.3;
  min-height: 4.5em;
}

/* ============================================================
   .feat — the service section, modelled on ghlops.com's service blocks.
   Copy on one side (dotted eyebrow, heading, body, a two-column tick list, a
   gold arrow link) and a navy deliverables panel on the other: a header row,
   then rows of icon tile + title + subtitle + status pill. .feat--flip swaps
   the sides. FOUNDER-DECISION 2026-09-10.
   ============================================================ */
.feat {
  max-width: var(--page);
  margin: 0 auto;
  padding: 78px 24px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  column-gap: 64px;
}
.feat + .feat { padding-top: 0; }
.feat--flip .feat__copy { order: 2; }
@media (max-width: 980px) {
  .feat { grid-template-columns: 1fr; row-gap: 34px; padding: 54px 24px; }
  .feat--flip .feat__copy { order: 0; }
}

/* ---- copy side ---- */
.feat__copy h2 { margin-bottom: 18px; }
.feat__copy > p { color: var(--muted); margin-bottom: 22px; max-width: 60ch; }
.feat__copy > p strong { color: var(--text); font-weight: 700; }
.kicker--dot::before {
  content: "●"; color: var(--gold); margin-right: 10px;
  font-size: 8px; vertical-align: middle;
}
.feat__ticks {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
}
@media (max-width: 620px) { .feat__ticks { grid-template-columns: 1fr; } }
.feat__ticks li {
  position: relative; padding-left: 26px;
  font-size: 15.5px; line-height: 1.5; color: var(--text);
}
.feat__ticks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 700;
}
.feat__link { display: inline-block; text-decoration: none; color: var(--gold-2); font-weight: 700; font-size: 15.5px; }
.feat__link::after { content: " →"; transition: margin-left .18s ease; }
.feat__link:hover::after { margin-left: 5px; }

/* ---- the navy panel ---- */
.feat__panel {
  background: linear-gradient(165deg, #101a2f, var(--band) 55%);
  border-radius: 22px;
  padding: 26px 24px;
  box-shadow: 0 34px 80px -32px rgba(10,15,30,.55);
}
.feat__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 18px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
}
.feat__head > :first-child { color: var(--gold); }
.feat__head > :last-child { color: rgba(235,240,252,.5); }
.feat__row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px;
}
.feat__row:last-child { margin-bottom: 0; }
.feat__ico {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 11px; color: var(--gold);
}
.feat__ico svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feat__row b { display: block; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; }
.feat__row .sub { display: block; color: rgba(235,240,252,.6); font-size: 13px; line-height: 1.45; margin-top: 3px; }
.feat__pill {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); background: rgba(217,164,65,.12);
  border: 1px solid rgba(217,164,65,.32);
  border-radius: 999px; padding: 5px 10px; white-space: nowrap;
}
.feat__pill--solid { background: var(--gold); color: #221602; border-color: var(--gold); font-weight: 700; }
@media (max-width: 420px) {
  .feat__row { grid-template-columns: auto 1fr; }
  .feat__pill { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* ============================================================
   LAYOUT FIXES — four failures visible on the live site at 1240px.
   ============================================================ */

/* 1. PROSE-ONLY SECTIONS were a strip of text hard against the left edge with
   half the section empty, because .receipt > p caps at 72ch inside a 1240 box.
   A section with no grid child is prose — give it a real centred column. */
/* superseded by the section system */

/* 2. PLAN SECTIONS put a left-aligned heading above a centred card, so the two
   had no relationship and the card floated in the middle of nothing. */
/* superseded by the section system */
.receipt:has(.plans--single) > p { margin-left: auto; margin-right: auto; }
.receipt:has(.plans--single) .plan { text-align: left; }

/* 3. FOUR CARDS IN A THREE-COLUMN GRID left a row of one and two holes.
   Exactly four gets 2x2; five or more keeps the auto-fit flow. */
@media (min-width: 900px) {
  .receipt > .next-steps:has(> .line:nth-child(4)):not(:has(> .line:nth-child(5))) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 4. FAQs WERE CARDS IN A GRID. Nobody lays out questions and answers as a
   masonry of navy-headed tiles — they are a coordinated vertical list, read top
   to bottom. Matched on aria-labelledby so every FAQ and objection section is
   caught without tagging each file by hand. */
.receipt[aria-labelledby*="faq"] > .next-steps,
.receipt[aria-labelledby*="obj"] > .next-steps,
.next-steps--faq {
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 860px;
  margin: 26px auto 0;
}
.receipt[aria-labelledby*="faq"] > .next-steps .line,
.receipt[aria-labelledby*="obj"] > .next-steps .line,
.next-steps--faq .line {
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 0 !important;
  overflow: visible !important;
  transform: none !important;
}
.receipt[aria-labelledby*="faq"] > .next-steps .line:last-child,
.receipt[aria-labelledby*="obj"] > .next-steps .line:last-child,
.next-steps--faq .line:last-child { border-bottom: none !important; }
.receipt[aria-labelledby*="faq"] > .next-steps .line__desc b,
.receipt[aria-labelledby*="obj"] > .next-steps .line__desc b,
.next-steps--faq .line__desc b {
  display: block !important;
  background: none !important;
  color: var(--text) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  border: none !important;
  line-height: 1.35 !important;
}
.receipt[aria-labelledby*="faq"] > .next-steps .line__desc b::before,
.receipt[aria-labelledby*="obj"] > .next-steps .line__desc b::before,
.next-steps--faq .line__desc b::before { display: none !important; }
.receipt[aria-labelledby*="faq"] > .next-steps .line__desc span,
.receipt[aria-labelledby*="obj"] > .next-steps .line__desc span,
.next-steps--faq .line__desc span {
  display: block !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
}
/* FAQ sections are prose-width and never split into the zig-zag */
@media (min-width: 900px) {
  /* superseded by the section system */
}

/* ---------- the three steps as numbered cards ----------
   They were stacked full-width rows with a giant numeral hanging at the left,
   which on a 1240 light ground reads as a list, not as a sequence. Three cards
   with the number in a gold disc reads as one, two, three at a glance. */
/* superseded by the section system */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
  text-align: left;
}
@media (max-width: 900px) { .steps-row { grid-template-columns: 1fr; } }
.steps-row .step {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px 26px 28px;
  box-shadow: 0 1px 2px rgba(20,26,42,.05), 0 10px 30px rgba(20,26,42,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.steps-row .step:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(20,26,42,.12); }
.steps-row .step__num {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #e9bc5c, #d9a441 55%, #b8862e);
  color: #221602;
  font-family: var(--body); font-size: 20px; font-weight: 800;
  border-radius: 50%;
  margin-bottom: 18px;
  box-shadow: 0 6px 16px -4px rgba(217,164,65,.55), inset 0 1px 0 rgba(255,255,255,.5);
  -webkit-text-fill-color: #221602;
  background-clip: border-box;
}
.steps-row .step__body b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 19px; letter-spacing: -.015em; line-height: 1.3; margin-bottom: 10px;
}
.steps-row .step__body span { display: block; color: var(--muted); font-size: 15px; line-height: 1.65; }

/* ---------- RULE: in a two-column .feat, the object column is ALWAYS navy ----------
   Whatever sits opposite .feat__copy — a deliverables panel, the ROI calculator, an
   itemised invoice — takes the navy treatment. It gives the interactive or data object
   weight and stops it reading as a second column of prose. FOUNDER-DECISION 2026-09-10. */
.feat > :not(.feat__copy) {
  background: linear-gradient(165deg, #101a2f, var(--band) 55%);
  border-radius: 22px;
  padding: 28px 26px;
  box-shadow: 0 34px 80px -32px rgba(10,15,30,.55);
  color: var(--band-ink);
}
.feat > :not(.feat__copy) h3 { color: #fff; }
.feat .roi__row label { color: var(--band-mut); }
.feat .roi__row label output { color: var(--gold); }
.feat .roi input[type=range] {
  background: linear-gradient(90deg, var(--gold) var(--fill,50%), rgba(255,255,255,.16) var(--fill,50%));
}
.feat .roi input[type=range]::-webkit-slider-thumb { background: var(--gold); border-color: var(--band); }
.feat .roi input[type=range]::-moz-range-thumb { background: var(--gold); border-color: var(--band); }
.feat .roi__stat {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}
.feat .roi__stat .k { color: var(--band-mut); }
.feat .roi__stat--lz { border-color: rgba(217,164,65,.45); background: rgba(217,164,65,.10); }
.feat .roi__stat--lz .v { color: var(--gold); }

/* the itemised invoice inside a navy column */
.feat .line { border-bottom-color: rgba(255,255,255,.10); }
.feat .line__desc b { color: #fff; }
.feat .line__desc span { color: var(--band-mut); }
.feat .line__dots { border-bottom-color: rgba(255,255,255,.22); }
.feat .line--total { border-top-color: rgba(217,164,65,.5); }
.feat .stamp { border-color: rgba(255,255,255,.25); color: var(--band-mut); }
.feat .soft { color: var(--band-mut); }

/* the closing section is a single call to action — centre it, cap it as prose */
/* superseded by the section system */
#claim > p { margin-left: auto; margin-right: auto; }

/* ---------- the invoice section: ONE navy block, not a split ----------
   Split into two columns it left the short copy floating in dead space beside a
   1,000px panel. The invoice is long and self-contained, so the whole section is
   the object: intro at the top, itemised rows beneath, total and stamps to close.
   FOUNDER-DECISION 2026-09-10. */
#pain.receipt--band {
  max-width: var(--page);
  padding: 60px clamp(24px, 5vw, 64px) 54px;
}
#pain .pain-intro { max-width: 760px; margin: 0 auto 34px; text-align: center; }
#pain .pain-intro h2 { color: #fff; }
#pain .pain-intro p { color: var(--band-mut); }
#pain .pain-intro p strong { color: #fff; }
#pain .pain-invoice { max-width: 900px; margin: 0 auto; }
#pain .feat__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 8px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
}
#pain .feat__head > :first-child { color: var(--gold); }
#pain .feat__head > :last-child { color: rgba(235,240,252,.5); }
#pain .line { border-bottom-color: rgba(255,255,255,.10); }
#pain .line__desc b { color: #fff; }
#pain .line__desc span { color: var(--band-mut); }
#pain .line__dots { border-bottom-color: rgba(255,255,255,.22); }
#pain .line--total { border-top-color: rgba(217,164,65,.5); }
#pain .stamp { border-color: rgba(255,255,255,.25); color: var(--band-mut); }
#pain .soft { color: rgba(235,240,252,.45); }

/* `.nav a` (0,1,1) outranks `.cta` (0,1,0), so the gold nav button was inheriting the
   nav's muted link colour instead of dark ink on gold. Match the specificity. */
.nav a.cta, .nav a.cta:hover { color: #221602; }
.nav a.cta--ghost, .nav a.cta--ghost:hover { color: #fff; }

/* ============================================================
   THE SECTION SYSTEM — one rule set, applied by what a section CONTAINS.
   Written after fixing the same mistake twice: a left-aligned heading sitting
   over centred content. A heading goes left ONLY when there is an object to its
   right. Everywhere else it is centred with what it introduces.

   STATEMENT  prose only            720px centred column, centred heading
   SPLIT      copy + one object     two columns, object navy, heading left
   BLOCK      one long object       full-width navy block, centred intro
   GRID       3+ peer items         full width, centred heading, card grid

   This supersedes the ad-hoc width rules above it.
   FOUNDER-DECISION 2026-09-10.
   ============================================================ */

/* --- STATEMENT: no object of any kind --- */
.receipt:not(:has(.line)):not(:has(.plan)):not(:has(.step)):not(:has(.mini-card)):not(:has(table)):not(:has(form)):not(:has(.addon)):not(:has(.roi)):not(:has(.steps-row)) {
  max-width: 760px;
  text-align: center;
}
.receipt:not(:has(.line)):not(:has(.plan)):not(:has(.step)):not(:has(.mini-card)):not(:has(table)):not(:has(form)):not(:has(.addon)):not(:has(.roi)):not(:has(.steps-row)) > p {
  margin-left: auto; margin-right: auto;
}

/* --- GRID: peer cards. Heading centred, cards left-aligned inside. --- */
.receipt:has(.plan), .receipt:has(.step), .receipt:has(.mini-card) { text-align: center; }
.receipt:has(.plan) > p, .receipt:has(.step) > p, .receipt:has(.mini-card) > p {
  margin-left: auto; margin-right: auto; max-width: 68ch;
}
.receipt:has(.plan) .plan, .receipt:has(.step) .step, .receipt:has(.mini-card) .mini-card { text-align: left; }

/* --- BLOCK: a long self-contained ledger or table becomes a navy block --- */
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)),
.receipt:has(.compare) {
  background: linear-gradient(165deg, #101a2f, var(--band) 55%);
  color: var(--band-ink);
  border-radius: 22px;
  padding: 58px clamp(24px, 5vw, 60px) 52px;
  margin-top: 34px; margin-bottom: 34px;
  border-top: none;
  text-align: center;
}
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) > p,
.receipt:has(.compare) > p { margin-left: auto; margin-right: auto; max-width: 68ch; color: var(--band-mut); }
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) h2,
.receipt:has(.compare) h2 { color: #fff; }
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) > p strong,
.receipt:has(.compare) > p strong { color: #fff; }
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) .kicker,
.receipt:has(.compare) .kicker { color: var(--gold); }
/* the ledger rows themselves read left, inside a centred column */
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) > .line,
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) > .next-steps,
.receipt:has(.compare) .compare-wrap {
  max-width: 900px; margin-left: auto; margin-right: auto; text-align: left;
}
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) .line__desc b { color: #fff; }
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) .line__desc span { color: var(--band-mut); }
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) .line { border-bottom-color: rgba(255,255,255,.10); }
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) .line__dots { border-bottom-color: rgba(255,255,255,.22); }
.receipt:has(> .line):not(:has(.plan)):not(:has(.step)) .soft { color: rgba(235,240,252,.5); }
.receipt:has(.compare) .compare td { color: var(--band-ink); }
.receipt:has(.compare) .compare th { color: var(--band-mut); }
.receipt:has(.compare) .compare th, .receipt:has(.compare) .compare td { border-bottom-color: rgba(255,255,255,.12); }

/* two navy blocks must never touch — the alternation is what makes them read */
.receipt:has(> .line) + .receipt:has(> .line) { margin-top: 0; }

/* ============================================================
   WIDTH + TYPE CORRECTIONS — the rules above were fighting the earlier ad-hoc
   ones and specificity was picking arbitrarily, which is why widths landed at
   741 / 839 / 1209 / 1240 across one page. Three explicit widths, one per type.
   ============================================================ */

/* Q&A is never a navy block — it is a light, readable list. Objections and FAQ
   both match aria-labelledby, so pull them out of BLOCK explicitly. */
.receipt[aria-labelledby*="obj"], .receipt[aria-labelledby*="faq"] {
  background: none !important;
  color: var(--text) !important;
  max-width: var(--page) !important;   /* was 860px — the third page width */
  padding: 78px 24px 68px !important;
  border-radius: 0 !important;
  text-align: center !important;
}
.receipt[aria-labelledby*="obj"] h2, .receipt[aria-labelledby*="faq"] h2 { color: var(--text) !important; }
.receipt[aria-labelledby*="obj"] .kicker, .receipt[aria-labelledby*="faq"] .kicker { color: var(--gold-2) !important; }
.receipt[aria-labelledby*="obj"] > .line, .receipt[aria-labelledby*="faq"] > .line {
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
.receipt[aria-labelledby*="obj"] > .line:last-of-type, .receipt[aria-labelledby*="faq"] > .line:last-of-type { border-bottom: none; }
.receipt[aria-labelledby*="obj"] .line__desc b, .receipt[aria-labelledby*="faq"] .line__desc b {
  color: var(--text) !important; font-size: 18px; margin-bottom: 8px; display: block;
}
.receipt[aria-labelledby*="obj"] .line__desc span, .receipt[aria-labelledby*="faq"] .line__desc span { color: var(--muted) !important; }

/* THE THREE WIDTHS */
.receipt:has(.plan), .receipt:has(.step), .receipt:has(.mini-card) { max-width: var(--page); }
.receipt:has(> .line):not([aria-labelledby*="obj"]):not([aria-labelledby*="faq"]),
.receipt:has(.compare),
#pain { max-width: 1120px; }

/* #pain's ledger rows sit inside .pain-invoice, so `:has(> .line)` never matched
   it and it stayed light. Give it the block treatment directly. */
#pain {
  background: linear-gradient(165deg, #101a2f, var(--band) 55%) !important;
  color: var(--band-ink);
  border-radius: 22px;
  text-align: center;
}
#pain .pain-invoice { text-align: left; }

/* ============================================================
   CENTRING RULE — the HEADING centres, the PROSE DOES NOT.
   Six rules above set `text-align:center` on a whole section, which centre-aligned
   three-paragraph body copy and left it ragged down both edges. Centring is for
   headings, kickers and one-line statements. Body copy longer than a line or two
   is always left-aligned inside a centred column, or it stops reading as prose and
   starts reading as a poem. This is the fix for the worst thing on the page.
   FOUNDER-DECISION 2026-09-10.
   ============================================================ */
.receipt > p,
.receipt > ul,
.receipt > ol,
.receipt > .next-steps,
.receipt > .line,
.receipt > .steps-row,
.receipt > .plans,
.receipt > .compare-wrap,
.receipt > .pain-invoice,
.receipt > .roi,
.receipt > .addon { text-align: left; }

/* prose sits as a centred BLOCK with left-aligned TEXT */
.receipt > p { margin-left: auto; margin-right: auto; max-width: 68ch; }

/* deliberate exceptions: short single-line captions and chip rows */
.receipt > p.center,
.receipt > .chips,
#claim > p { text-align: center; }

/* ============================================================
   CONTENT IS VISIBLE BY DEFAULT. NON-NEGOTIABLE.
   27 elements on the homepage — including whole sections — were sitting at
   opacity:0 waiting for GSAP ScrollTrigger reveals that stopped firing once the
   layout changed and every trigger position moved. The page read as a series of
   enormous blank gaps.

   Debugging the triggers is the wrong fix. Animation enhances; it must never gate
   whether content can be seen. If the GSAP CDN is slow or blocked, the page must
   still be a complete page. These overrides make visibility the default and leave
   the animations free to play on top.
   FOUNDER-DECISION 2026-09-10.
   ============================================================ */
html.gsap .hero h1 { visibility: visible !important; }
html.gsap .receipt h2,
html.gsap .post-card,
html.js:not(.gsap) .stamp,
html.js:not(.gsap) .slam-in,
.slam-in, .stamp,
.bubble, .blockline, .demo__badge,
.tally { opacity: 1 !important; }

/* The hero diorama cards are absolutely positioned and were spaced for the old
   serif at its old sizes. Figtree sets taller, so they collided and buried each
   other's text. More room, more vertical separation. */
.demo { min-height: 570px; }
.demo__card--call   { top: 0;     left: 2%;  }
.demo__card--chat   { top: 150px; right: 0;  }
.demo__card--book   { top: 322px; left: 0;   }
.demo__card--ledger { top: 462px; right: 4%; }
@media (max-width: 960px) {
  .demo { min-height: 520px; }
  .demo__card--chat { top: 140px; }
  .demo__card--book { top: 292px; }
  .demo__card--ledger { top: 418px; }
}

/* ============================================================
   RHYTHM AND SCALE — the page was 19,835px tall and reading as a series of
   islands separated by half a screen of nothing.

   Measured cause: .night-note carried `margin: 150px auto` (top AND bottom) and
   .receipt carried 76px/68px padding, so a section -> note -> section sequence
   put 444px of empty space between two blocks of copy. Five times on one page.

   And the type scale had a hole: 52px headings straight down to 17px body with
   nothing between, so the copy read as fine print under a billboard.
   FOUNDER-DECISION 2026-09-10.
   ============================================================ */

/* rhythm */
.night-note { margin: 72px auto; }
.receipt { padding: 56px 24px 50px; }
.feat { padding: 56px 24px; }
.receipt[aria-labelledby*="obj"], .receipt[aria-labelledby*="faq"] { padding: 56px 24px 50px !important; }

/* scale: lift the body, pull the headings back, fill the gap between them */
.receipt > p, .feat__copy > p { font-size: 18px; line-height: 1.72; }
.receipt h2, .feat__copy h2 { font-size: clamp(28px, 3.4vw, 42px); }
.receipt h3 { font-size: clamp(19px, 2.1vw, 24px); }
.line__desc b { font-size: 17.5px; }
.line__desc span { font-size: 15.5px; line-height: 1.65; }
.night-note { font-size: clamp(22px, 3vw, 34px); }

/* .feat copy sits at the top of a tall panel rather than floating in its middle */
.feat { align-items: start; }
.feat > :not(.feat__copy) { align-self: start; }
.feat__copy { padding-top: 6px; }

/* ============================================================
   ONE WIDTH. This was a FOUNDER-DECISION given earlier in the session and I
   contradicted it: the section system introduced 760 / 860 / 1092 / 1120 / 1240
   and called them "principled". Five section widths down one page is exactly
   what makes a site look amateur. Every section box is var(--page). No
   exceptions.

   Reading measure is typography, not section width — prose still caps at 68ch,
   but it starts at the section's left edge instead of being auto-centred in a
   wider box, so the page keeps ONE left edge and ONE right edge all the way down.
   ============================================================ */
.receipt, .receipt--wide, #pain, #claim, .feat,
.receipt[aria-labelledby*="obj"], .receipt[aria-labelledby*="faq"] {
  max-width: var(--page) !important;
}

/* SUPERSEDED 2026-09-10. This block forced one LEFT edge — `text-align: left
   !important` on every section plus `margin-left: 0 !important` on all prose.
   The founder has since ruled the opposite: headings, prose and buttons share
   one CENTRE axis. Those two declarations were beating every later rule, which
   is why kickers measured 229px off-axis on six pages after being "fixed".
   The reading measure is kept; the forced left edge is gone. */
.receipt > p, .feat__copy > p { max-width: 68ch; }
#pain .pain-intro { max-width: 68ch; }

/* the closing CTA is the one place the CONTENT centres — the box stays full width */
#claim, #claim > h2, #claim > p, #claim > .kicker { text-align: center !important; }
#claim > p { margin-left: auto !important; margin-right: auto !important; }

/* ============================================================
   TEXT SHARPNESS. Two real causes, both found in this file:
   1. `[data-tilt] > * { transform: translateZ(24px) }` (line 90) puts every child on
      its own GPU layer, which rasterises the text once and then scales it — the
      classic source of soft type inside a 3D card. The calendar shell carries
      data-tilt, so the whole booking form was affected.
   2. `-webkit-font-smoothing: antialiased` (line 50) thins glyph stems. It suits
      light-on-dark, which is what the old theme was; on the light theme it makes
      copy look washed and slightly out of focus.
   ============================================================ */
[data-tilt] > * { transform: none; }
.calendar-shell, .calendar-shell * { transform: none !important; }
body { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; text-rendering: optimizeLegibility; }
/* keep the crisper rendering only where text genuinely is light-on-dark */
.hero, .booking__copy, .nav, .ticker, .feat__panel, #pain, body:has(.booking) {
  -webkit-font-smoothing: antialiased;
}

/* chips as pills — a bordered token reads as a fact; the dash-prefixed mono read
   as a footnote */
.chips--pill span {
  border: 1px solid rgba(217,164,65,.42);
  background: rgba(217,164,65,.10);
  color: var(--gold-2);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: .1em;
}
.chips--pill span::before { content: none !important; }
.hero .chips--pill span, .booking__copy .chips--pill span,
body:has(.booking) .chips--pill span { color: var(--gold); border-color: rgba(217,164,65,.5); }

/* booking pages sat at x=124 while every other page sits at x=100 — one edge */
.booking { padding-left: 24px; padding-right: 24px; }

/* ============================================================
   CONTENT FIT — audited, not guessed. Measured on the live page:
     Multiply It by Fifty-Two   407px dead space on the right
     We Used to Be the Agency   407px
     Your First Thirty Days     458px
     navy blocks and Q&A        146px
     #pain heading at x=164, its own rows at x=270 — 106px misaligned INSIDE
     one section

   Two rules fix all of it:
   1. Every direct child of a section shares the section's left edge and the same
      measure. No child is independently centred or inset.
   2. A prose-only section centres its whole content block instead of hugging the
      left of a 1240 box, so the empty space is symmetrical rather than dumped
      entirely on the right.
   ============================================================ */

/* SUPERSEDED 2026-09-10 — see the note above. Section children centre on one
   axis now, so pinning every child to margin-left:0 is the defect, not the fix.
   Only the copy column of a split section still reads from its own left edge. */
.feat__copy > * { margin-left: 0; margin-right: 0; }
#pain .pain-intro, #pain .pain-invoice,
.receipt[aria-labelledby*="obj"] > .next-steps,
.receipt[aria-labelledby*="faq"] > .next-steps,
.receipt > .next-steps, .receipt > .compare-wrap, .receipt > .pain-invoice {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* 2. prose-only sections centre as a block — a 780px column hugging the left of a
   1240px box put 400px of nothing on the right of every long section */
.receipt:not(:has(.line)):not(:has(.plan)):not(:has(.step)):not(:has(table)):not(:has(form)):not(:has(.addon)):not(:has(.roi)):not(:has(.steps-row)):not(:has(.next-steps)) {
  max-width: var(--page) !important;   /* was 860px — the third page width */
}
.receipt:not(:has(.line)):not(:has(.plan)):not(:has(.step)):not(:has(table)):not(:has(form)):not(:has(.addon)):not(:has(.roi)):not(:has(.steps-row)):not(:has(.next-steps)) > p {
  max-width: none;
}

/* the timeline reads as a list, so it fills the section like every other list */
.receipt > .timeline, .receipt > .next-steps { width: 100%; }

/* The BLOCK rule (line 1869) and #pain (line 1792) still capped ledger rows at
   900px and centred them — that is the 146px of dead space the four navy sections
   measured while every other section measured 0. Rows fill the padded box. */
.receipt:has(> .line) > .line,
.receipt:has(> .line) > .next-steps,
.receipt:has(.compare) .compare-wrap,
.receipt[aria-labelledby*="obj"] > .line,
.receipt[aria-labelledby*="faq"] > .line,
#pain .pain-invoice, #pain .pain-intro {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* prose fills its container; the container controls line length, not an arbitrary ch cap */
.receipt > p, #pain .pain-intro p { max-width: none; }
.feat__copy > p { max-width: 46ch; }

/* ============================================================
   HOMEPAGE CONSOLIDATION — 2026-09-10, FOUNDER-DECISION
   A lead-in sentence is not a section. Fragments that used to float between
   sections now live inside the box they belong to.
   ============================================================ */

/* 1. The multiply-by-52 punch, folded into the bottom of the invoice it closes.
      Light gold panel on the navy band so it reads as the invoice's own total
      line, not as a new section. */
.pain-52 {
  margin: 46px 0 0;
  padding: 34px 40px 32px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(233,188,92,.20), rgba(217,164,65,.13));
  border: 1px solid rgba(217,164,65,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  text-align: center;
}
.pain-52__eyebrow {
  margin: 0;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  color: rgba(235,240,252,.72);
}
.pain-52__eyebrow em { font-style: normal; color: var(--gold); font-weight: 600; }
.pain-52__amt {
  margin: 12px 0 14px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
}
.pain-52__amt span {
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gold);
  vertical-align: middle;
}
.pain-52__line {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--band-mut);
}
.pain-52__line strong { color: #fff; }

/* 2. The ten-piece list matched the prose-only selector, so it was being capped
      at 860px inside a 1240px page — the "lower-width section" that looked
      broken. .svc joins the exclusion list; the section is one page width like
      every other one. */
.receipt:has(.svc) { max-width: var(--page) !important; }

/* 3. #pain was the last section carrying its own width (1120px). One width. */
#pain { max-width: var(--page); }

@media (max-width: 720px) {
  .pain-52 { padding: 26px 22px 24px; margin-top: 34px; }
  .pain-52__line { font-size: 16px; }
}

/* ============================================================
   ONE WIDTH, ONE AXIS — 2026-09-10, measured on the live page.
   The audit found THREE section widths (1240 / 1227 / 860) and THREE left
   edges (100 / 107 / 290) down one page, and 11 of 12 section headings
   left-aligned with no rule centring them anywhere.

   The 860px came from the prose-only selector, which carries nine
   :not(:has()) clauses and therefore beats every later !important rule on
   specificity alone. It is neutralised here rather than layered over.
   ============================================================ */

/* 1. Every section box is one width and one left edge. No exceptions. */
main > .receipt,
main > .feat,
main > section {
  max-width: var(--page) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2. Section headings and kickers centre. All of them, every section. */
.receipt > .kicker,
.receipt > h2,
.receipt > h3,
.feat__title,
.feat__title .kicker,
.feat__title h2,
.feat__title h3 {
  text-align: center;
}
.receipt > .kicker, .feat__title .kicker { margin-left: auto; margin-right: auto; }

/* 3. Buttons and one-line captions centre, and BEAT the block rule that sets
      text-align:left on section children — that is why the CTAs sat off-axis.
      .center is a utility class; a utility that can be overridden is not one. */
.center, p.center, .receipt > p.center, .receipt .center {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4. Prose keeps a reading measure but is CENTRED as a block, so its two edges
      are symmetrical about the same axis as the heading above it. */
.receipt > p:not(.center):not(.kicker):not(.soft) {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- .feat: the heading spans both columns ---------- */
.feat__title {
  grid-column: 1 / -1;
  order: -1;
  margin-bottom: 34px;
}
.feat__title h2, .feat__title h3 { margin: 0; }
.feat__title .kicker { margin-bottom: 10px; }

/* ---------- FAQ / objections: native accordions ---------- */
.qa {
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.qa:last-of-type { border-bottom: none; }
.qa > summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.42;
  color: var(--text);
}
.qa > summary::-webkit-details-marker { display: none; }
/* the +/- is drawn, not a glyph, so it never depends on a font shipping it */
.qa > summary::after,
.qa > summary::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--gold-2);
  transition: transform .22s ease, opacity .22s ease;
}
.qa > summary::before { width: 15px; height: 2px; margin-top: -1px; }
.qa > summary::after  { width: 2px; height: 15px; margin-top: -7.5px; right: 12.5px; }
.qa[open] > summary::after { transform: rotate(90deg); opacity: 0; }
.qa > summary:hover { color: var(--gold-2); }
.qa > summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px; }
.qa__a {
  padding: 0 44px 22px 0;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--muted);
}
.qa__a a { color: var(--gold-2); font-weight: 600; }

@media (max-width: 720px) {
  .qa > summary { font-size: 16.5px; padding-right: 36px; }
  .qa__a { font-size: 15.5px; padding-right: 0; }
}

/* #pain's heading lives inside .pain-intro, so the `.receipt > h2` centring rule
   never reached it — it was the one heading still left-aligned. */
#pain .pain-intro, #pain .pain-intro h2, #pain .pain-intro .kicker { text-align: center; }
#pain .pain-intro { max-width: 68ch; margin-left: auto; margin-right: auto; }

/* ============================================================
   PLANS — 2026-09-10. Three defects, one of them mine.
   ============================================================ */

/* 1. The promotion ribbon was centred with `transform: translateX(-50%)`, and
      the text-sharpness fix at line 2041 (`[data-tilt] > * { transform: none }`)
      wiped it — .plan carries data-tilt and the ribbon is a direct child. The
      ribbon's left edge landed on the card's centre and its text ran off the
      card. Centred without a transform now, so the sharpness rule cannot break
      it again. */
.plan__tag {
  left: 0;
  right: 0;
  transform: none;
  width: fit-content;
  margin: 0 auto;
  max-width: calc(100% - 24px);
}

/* 2. Plan headlines and the price block centre; the feature list stays left —
      a checklist reads down its left edge. */
.plan__name, .plan__for, .plan__price, .plan__usage, .plan__note {
  text-align: center;
}
.plan__for, .plan__usage { margin-left: auto; margin-right: auto; }

/* 3. The three cards were `align-items: start`, so each was only as tall as its
      own copy and the $97 / $497 / $297 prices sat at three different heights.
      Equal-height cards, and a floor under the description so the price row
      lines up across all three. */
.plans--three { align-items: stretch; }
.plans--three .plan__for { min-height: 4.6em; }
@media (max-width: 1040px) { .plans--three .plan__for { min-height: 0; } }

/* 4. The section intro sat flush left under a centred heading. One axis. */
#plans > p, #plans > .soft { text-align: center; margin-left: auto; margin-right: auto; }
/* 4.6em floors two lines but the Growth Plan description runs to three, leaving
   its price 7px low. 5.4em floors three. */
.plans--three .plan__for { min-height: 5.4em; }
@media (max-width: 1040px) { .plans--three .plan__for { min-height: 0; } }

/* ============================================================
   2026-09-10 — the headline-in-a-box defect, and what Growth adds.
   ============================================================ */

/* `.feat > :not(.feat__copy)` (line 1721) paints every non-copy child as a navy
   panel. That rule was written for the object column; when the heading moved out
   of the copy column into .feat__title it matched too, and the heading got its
   own dark rounded box floating above the columns. A heading sits on the page
   ground, never inside a coloured panel. */
.feat > .feat__title {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--text) !important;
}
.feat > .feat__title h2,
.feat > .feat__title h3 { color: var(--text) !important; }

/* The three lines the Growth Plan adds over the cheaper plans, marked with a +
   instead of the shared ✓ so the upgrade is visible at a glance. */
.plan__plus::before { content: "+" !important; font-weight: 800; font-size: 15px !important; }
.plan__plus { font-weight: 600; }
.plan__plus b {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-2);
  font-weight: 600;
  white-space: nowrap;
}

/* The copy column was top-aligned against a much taller object column, leaving
   ~270px of dead space under the text. Both columns centre on each other. */
.feat { align-items: center; }
.feat > :not(.feat__copy):not(.feat__title) { align-self: center; }

/* ============================================================
   SHORT HERO — 2026-09-10. Single-column heroes were left-aligned with the
   sub-paragraph capped at 627px hugging the left edge under a 1240px headline:
   two different axes stacked on each other. A single-column hero centres.
   ============================================================ */
.hero--short { text-align: center; }
.hero--short .hero__copy { text-align: center; }
.hero--short .hero__copy > * { margin-left: auto; margin-right: auto; }
.hero--short .hero__sub { max-width: 68ch; }
.hero--short h1 { max-width: 20ch; }
.hero--short .kicker { margin-bottom: 20px; }

/* ============================================================
   CONTENT IS VISIBLE BY DEFAULT — second occurrence, 2026-09-10.
   /meta-ads and /ai-agents served a hero whose sub-paragraph, CTA BUTTON and
   micro-line were all at opacity:0 / visibility:hidden / scale(0.55) — the GSAP
   "from" state applied at load with the "to" tween never running. The primary
   call to action on two live pages could not be seen or clicked.

   Debugging the timeline is the wrong fix, same as last time: animation may
   enhance, it must never gate whether something can be seen.
   ============================================================ */
.hero .hero__sub,
.hero .cta,
.hero .hero__micro,
.hero .kicker,
.hero h1,
.hero .chips {
  opacity: 1 !important;
  visibility: visible !important;
}
.hero .cta { transform: none !important; }

/* ============================================================
   FOUR PLANS + THE GHOST BUTTON — 2026-09-10, FOUNDER-DECISION.
   Local SEO was an .addon strip bolted under the pricing grid; it is a plan on
   its own terms and now sits as the fourth card.
   ============================================================ */
.plans--four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 10px;
}
.plans--four .plan { padding: 30px clamp(18px, 2vw, 26px) 26px; }
.plans--four .plan__for { min-height: 5.4em; }
.plans--four .plan__price { font-size: clamp(28px, 2.6vw, 36px); }
.plans--four .plan__list li { font-size: 14.5px; padding-left: 22px; }
@media (max-width: 1180px) { .plans--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .plans--four { grid-template-columns: 1fr; }
                             .plans--four .plan__for { min-height: 0; } }

/* The ghost button rendered as white-on-light — invisible as a button and, next
   to three gold CTAs, a fourth competing call to action. Navy with white text:
   it stays a clear route without fighting the primary buttons.
   FOUNDER-DECISION 2026-09-10 (his second of three options). */
.cta--ghost {
  background: var(--band) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--band) !important;
  box-shadow: 0 8px 22px -10px rgba(20,26,42,.45) !important;
}
.cta--ghost:hover {
  background: #16203a !important;
  border-color: #16203a !important;
  color: #fff !important;
}
/* on a navy ground the ghost inverts, or it disappears into the band */
.hero--split .cta--ghost, #pain .cta--ghost, .booking .cta--ghost {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* The FB-ads booking page leads with the action ("Book a Free Discovery Call
   Below.") and carries the offer as the sub-headline underneath, so the sub
   needs real weight — it is the argument, not a caption.
   FOUNDER-DECISION 2026-09-10. */
.booking__sub {
  font-family: var(--display);
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.42;
  max-width: 28ch;
  margin: 14px auto 18px;
}
.booking__sub em {
  font-style: normal;
  background: linear-gradient(95deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================
   BOOKING PAGES + FAQ HERO — 2026-09-10, from the whole-site audit.
   ============================================================ */

/* The .receipt sections inside a booking page were 1192px inside a 1240px page
   and their ledger rows sat 308px off the section axis — the booking container
   sets its own padding and the sections inherited it twice. One width, one axis,
   same as every other page. */
.booking > .receipt,
.booking > section {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.booking > .receipt > .kicker,
.booking > .receipt > h2,
.booking > .receipt > h3 { text-align: center; }
.booking > .receipt > .next-steps,
.booking > .receipt > .line { max-width: none; margin-left: 0; margin-right: 0; }

/* The FAQ hero is a plain .hero (not --split, not --short) so nothing centred it
   and its sub-paragraph sat 306px off-axis under a left-aligned heading. A hero
   with no second column is a centred hero. */
.hero:not(.hero--split) { text-align: center; }
.hero:not(.hero--split) h1,
.hero:not(.hero--split) .hero__sub,
.hero:not(.hero--split) .kicker { margin-left: auto; margin-right: auto; }
.hero:not(.hero--split) .hero__sub { max-width: 68ch; }

/* The booking-page receipts centred their text but kept margin-left:0, so a
   580px kicker sat 306px left of the section axis. Text-align alone does not
   centre a block that is narrower than its container. */
.booking > .receipt > .kicker,
.booking > .receipt > h2,
.booking > .receipt > h3,
.booking > .receipt > p {
  margin-left: auto;
  margin-right: auto;
}
.booking > .receipt > .kicker,
.booking > .receipt > h2,
.booking > .receipt > h3 { max-width: none; }

/* A short caption under a centred heading was filling 58% of its box and
   reading from the left edge — same defect, on .soft. */
.receipt > .soft { margin-left: auto; margin-right: auto; text-align: center; }

/* The booking-page receipts were computing to `display: grid` with two columns
   (580px + 552px), so the kicker shrank to 146px in column one and the ledger
   was pushed into column two — which is what the audit was reading as a 306px
   off-axis kicker. These sections hold a kicker, a heading and one ledger.
   There is no second column. */
.booking > .receipt {
  display: block;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.booking > .receipt > * { max-width: none; margin-left: auto; margin-right: auto; }
.booking > .receipt > .next-steps,
.booking > .receipt > .line { margin-left: 0; margin-right: 0; }

/* ============================================================
   FOOTER — dark, four columns, after ghlops.com. 2026-09-10.
   Measured from the live ghlops footer: background rgb(7,11,22), link colour
   rgba(235,240,252,.55), 56px top / 40px bottom padding. The old footer was
   four centred lines on the off-white page ground and read as an afterthought.
   ============================================================ */
footer {
  background: #070b16;
  color: rgba(235,240,252,.55);
  text-align: left;
  padding: 64px 0 0;
  font-size: 14px;
  margin-top: 90px;
}
.foot {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 24px 48px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px 48px;
}
.foot__brand p {
  margin: 16px 0 0;
  max-width: 34ch;
  line-height: 1.66;
  color: rgba(235,240,252,.5);
}
.foot__logo img { display: block; }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; }
.foot__col h2 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
  text-align: left;
}
.foot__col a {
  color: rgba(235,240,252,.62);
  text-decoration: none;
  padding: 5px 0;
  line-height: 1.5;
  transition: color .18s ease;
}
.foot__col a:hover { color: var(--gold); }
.foot__base {
  border-top: 1px solid rgba(235,240,252,.10);
  padding: 22px 24px 34px;
}
.foot__base p {
  max-width: var(--page);
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(235,240,252,.38);
}
.foot__base p + p { margin-top: 8px; }

@media (max-width: 900px) {
  .foot { grid-template-columns: 1fr 1fr; gap: 34px; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot { grid-template-columns: 1fr; }
  footer { padding-top: 48px; }
}

/* The .feat__title unbox rule forces the heading to ink black; the gold <em>
   half must survive it, or a split-section heading is the only one on the page
   without the black-and-gold treatment. Same font, same size — it is the same
   h2 as every other section heading. */
.feat > .feat__title h2 em,
.feat > .feat__title h3 em {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(95deg, var(--gold), var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  font-style: italic;
}
.feat > .feat__title .kicker { color: var(--gold-2) !important; }

/* The section-heading size rule targets `.receipt h2, .feat__copy h2`. Moving
   split-section headings into .feat__title took them out of .feat__copy, so
   they fell back to the browser default and rendered at 26px next to 42px
   headings everywhere else. Same font, same size, every section heading. */
.feat__title h2, .feat__title h3 {
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
}

/* .strip-zone already ends with 120px of padding; footer's own 90px margin made
   a 210px empty band between the closing CTA and the footer. The footer owns its
   own top padding — it does not need a margin as well. */
footer { margin-top: 0; }
.strip-zone { padding-bottom: 40px; }

/* The sub-headline was capped at 28ch, which broke it over three lines under a
   one-line h1. Two lines maximum — widened, and the pill sits above the
   headline where it belongs. FOUNDER-DECISION 2026-09-10. */
.booking__sub { max-width: 44ch; }
.booking__copy .kicker--pill { margin: 0 auto 20px; }

/* ============================================================
   TEXT SHARPNESS — third and final pass, 2026-09-10.
   The first pass killed the child translateZ. What was still blurring text:

   1. `[data-tilt]` itself carried `will-change: transform` and
      `transform-style: preserve-3d`. Either one alone promotes the element to
      its own GPU layer, and text on a composited layer loses subpixel
      antialiasing — permanently, not just while animating.
   2. The tilt JS wrote `transform: perspective(900px) rotateX(0deg)` on
      mouseleave instead of clearing the property, so the layer never went away.
      That handler is now deleted (assets/site.js).
   3. `body:has(.booking)` was in the `-webkit-font-smoothing: antialiased` list
      from when booking pages were dark end to end. They are not any more, and
      antialiased thins glyph stems on a light ground — which reads as blur.
   ============================================================ */
[data-tilt] {
  will-change: auto;
  transform-style: flat;
  transform: none;
  perspective: none;
}
[data-tilt] > * { transform: none; }

/* light-on-dark surfaces keep the crisper rendering; everything else uses the
   platform default, which is what makes dark-on-light type look sharp */
body,
body:has(.booking),
body:has(.booking) .receipt,
.booking, .booking * {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
.hero, .hero *, .nav, .ticker, .feat__panel, .feat__panel *, #pain, #pain *,
.calendar-shell, .calendar-shell * {
  -webkit-font-smoothing: antialiased;
}

/* Correction to the block above: I set booking pages to `auto`, and their body
   ground measures rgb(10,15,30) — luminance 0.059, i.e. dark. Subpixel
   antialiasing on a dark ground produces colour fringing and heavy, fuzzy stems;
   greyscale antialiasing is the right one there. The rule is the ground, not the
   page: dark ground -> antialiased, light ground -> auto. The blur the founder
   saw was the GPU layer, which is gone either way. */
body:has(.booking), .booking, .booking * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}