/* ============================================================
   BuildDocket — components
   ============================================================ */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-5); }
@media (min-width: 768px) { .wrap { padding-inline: var(--space-8); } }

section { position: relative; }
.sect { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.sect-tight { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }

.rule { height: 1px; background: var(--divider); border: 0; }

/* ---------- eyebrow / labels ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px; background: var(--accent-line); flex: none;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 62ch;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ============================================================
   HEADER
   ============================================================ */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--divider);
}
.hdr-in {
  display: flex; align-items: center; gap: var(--space-6);
  height: 62px;
}
.brand { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.brand-mark { color: var(--accent); flex: none; }
.brand-txt {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-base); letter-spacing: -0.02em;
}
.brand-txt span { color: var(--text-muted); font-weight: 500; }

.nav { display: none; margin-left: auto; align-items: center; gap: var(--space-6); }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  font-size: var(--text-sm); color: var(--text-muted);
  transition: color .2s var(--ease);
}
.nav a:hover { color: var(--text); }

.hdr-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex: none; }
@media (min-width: 900px) { .hdr-actions { margin-left: 0; } }
/* The header CTA used to be hidden below 560px on the theory that "the hero CTA
   is one scroll away." It is not -- the hero button anchors to #start, which is
   at the very bottom of a long page, so on a phone the only route to the signup
   form was to scroll past everything. The header is sticky, so showing it here
   makes the form reachable from any scroll position. The label shortens instead
   of disappearing. */
.hdr-actions .hdr-cta { display: inline-flex; }
.hdr-cta .cta-full { display: none; }
.hdr-cta .cta-tight { display: inline; }
@media (min-width: 560px) {
  .hdr-cta .cta-full { display: inline; }
  .hdr-cta .cta-tight { display: none; }
}
@media (max-width: 559px) {
  .hdr-actions .hdr-cta { padding: 8px 13px; font-size: var(--text-xs); }
}

.theme-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: var(--text-muted);
  border: 1px solid var(--border); flex: none;
  transition: color .2s, border-color .2s, background-color .2s;
}
.theme-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.theme-btn .ico-moon { display: none; }
[data-theme='dark'] .theme-btn .ico-moon { display: block; }
[data-theme='dark'] .theme-btn .ico-sun { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.005em;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm); white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-solid); color: var(--accent-solid-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--border-strong); background: var(--surface-2); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-16), 8vw, var(--space-24)) var(--space-12); }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 100% 68% at 50% 0%, #000 30%, transparent 78%);
}
.hero > * { position: relative; z-index: 1; }

.hero-grid { display: grid; gap: var(--space-12); }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: var(--space-16); align-items: start; }
}

.live-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .1em; text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent-line); border-radius: 100px;
  background: var(--accent-dim); color: var(--accent-text);
  margin-bottom: var(--space-6);
  max-width: 100%; flex-wrap: wrap; row-gap: 0;
}
@media (max-width: 420px) {
  .live-tag { font-size: 10px; letter-spacing: .08em; }
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none;
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-line); }
  50% { opacity: .55; box-shadow: 0 0 0 5px transparent; }
}

.hero h1 {
  font-size: clamp(2.1rem, 1.45rem + 2.5vw, 3.4rem);
  margin-bottom: var(--space-6);
  max-width: 22ch;
}
.hero h1 em { font-style: normal; color: var(--accent-text); }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero-note {
  margin-top: var(--space-5); font-size: var(--text-xs);
  color: var(--text-faint); font-family: var(--font-mono);
}

/* ---------- stat panel ---------- */
.panel {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.panel-hd {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--divider); background: var(--surface-2);
}
.panel-hd h3 {
  font-size: var(--text-xs); font-family: var(--font-mono); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.panel-hd .stamp { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); white-space: nowrap; flex: none; }
@media (max-width: 400px) {
  .panel-hd { padding-inline: var(--space-4); gap: var(--space-2); }
  .panel-hd h3 { letter-spacing: .06em; }
  .panel-hd .stamp { display: none; }
}

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; }
.stat {
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--divider);
}
.stat:nth-child(odd) { border-right: 1px solid var(--divider); }
.stat:nth-last-child(-n+2) { border-bottom: 0; }
.stat-v {
  font-family: var(--font-mono); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.stat-v.hi { color: var(--accent-text); }
.stat-k {
  margin-top: var(--space-2); font-size: var(--text-xs);
  color: var(--text-muted); line-height: 1.35;
}

/* ============================================================
   FEED COVERAGE STRIP
   ============================================================ */
.feeds {
  border-block: 1px solid var(--divider); background: var(--surface-2);
  padding-block: var(--space-8);
}
.feeds-hd {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-5); margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--divider);
}
.feeds-lbl, .feeds-tot {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .1em; text-transform: uppercase;
}
.feeds-lbl { color: var(--text-muted); }
.feeds-tot { color: var(--accent-text); }
.feeds-grid {
  display: grid; gap: var(--space-5) var(--space-8);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .feeds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 5 columns × 3 rows lands the 15 datasets on an exact grid. The count dropped
   from 16 to 15 when electrical permits, elevator devices and the phantom
   "city bid boards" source were removed and FISP facade filings were added. */
@media (min-width: 1000px) { .feeds-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.feed-chip { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feed-chip b {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.feed-chip i {
  font-style: normal; font-size: var(--text-xs); color: var(--text-faint);
  line-height: 1.35; overflow-wrap: break-word;
}
/* A dataset we ingest tonight vs. one whose schema is verified and routed but
   not yet scheduled. Shown as a visible difference rather than collapsed into
   one "feeds monitored" number, because the difference is what a buyer is
   entitled to know. The marker is a border and a label, never colour alone. */
.feed-chip { padding-left: 9px; border-left: 2px solid var(--accent); }
.feed-chip.is-mapped { border-left-style: dotted; border-left-color: var(--divider); }
.feed-chip.is-mapped b { color: var(--text-muted); }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.sect-hd { max-width: 74ch; margin-bottom: var(--space-12); }
.sect-hd h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.sect-hd p { color: var(--text-muted); font-size: var(--text-base); max-width: 64ch; }

/* ============================================================
   LEAD TABLE
   ============================================================ */
.tbl-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.tbl-scroll { overflow-x: auto; }
table.leads { width: 100%; border-collapse: collapse; min-width: 780px; }
/* on phones, drop the two least useful columns so address + value fit without a scroll */
@media (max-width: 760px) {
  table.leads { min-width: 0; }
  table.leads th:nth-child(2), table.leads td:nth-child(2),
  table.leads th:nth-child(3), table.leads td:nth-child(3),
  table.leads th:nth-child(5), table.leads td:nth-child(5) { display: none; }
  table.leads th, table.leads td { padding-inline: var(--space-4); }
  table.leads td:first-child { width: auto; }
  .td-val { white-space: nowrap; text-align: right; }
  table.leads th:nth-child(4) { text-align: right; }
  .td-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
table.leads th {
  text-align: left; font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); padding: var(--space-3) var(--space-4);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.leads td {
  padding: var(--space-4); border-bottom: 1px solid var(--divider);
  font-size: var(--text-sm); vertical-align: top;
}
table.leads tr:last-child td { border-bottom: 0; }
table.leads tbody tr { transition: background-color .18s var(--ease); }
table.leads tbody tr:hover { background: var(--surface-2); }

.td-addr { font-weight: 600; letter-spacing: -0.01em; }
.td-sub { color: var(--text-faint); font-size: var(--text-xs); margin-top: var(--space-1); max-width: 42ch; line-height: 1.45; }
.td-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent-text); font-weight: 500; white-space: nowrap; }
.chip {
  display: inline-block; font-size: var(--text-xs); padding: 2px var(--space-2);
  border: 1px solid var(--border); border-radius: 100px; color: var(--text-muted);
  white-space: nowrap;
}
.locked {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);
}
.locked svg { flex: none; }
.blur { filter: blur(4.5px); user-select: none; color: var(--text-muted); }

.tbl-foot {
  padding: var(--space-4) var(--space-5); background: var(--surface-2);
  border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps { display: grid; gap: var(--space-6); counter-reset: s; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); background: var(--surface); position: relative;
}
.step-n {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text);
  letter-spacing: .12em; margin-bottom: var(--space-4);
}
.step h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.step p { font-size: var(--text-sm); color: var(--text-muted); }

/* ============================================================
   SEGMENTS
   ============================================================ */
.segs { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 620px) { .segs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .segs { grid-template-columns: repeat(3, 1fr); } }
/* Column, not row: the scope line is a full-width boundary statement under a
   hairline, so it cannot sit in the same row as the count without being
   squeezed into the narrow left cell. The name/count pair keeps its own row. */
.seg {
  background: var(--surface); padding: var(--space-5);
  display: flex; flex-direction: column; align-items: stretch;
  transition: background-color .2s var(--ease);
}
.seg-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
/* What the feed does NOT include. Set apart by a rule and held at muted ink so
   it reads as the boundary it is, not as another line of pitch. It is the line
   that stops a plumber subscribing expecting heat calls. */
.seg-scope {
  font-size: 11px; line-height: 1.5; color: var(--text-muted);
  margin-top: var(--space-4); padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.seg-scope b { font-weight: 600; color: var(--text); }
.seg:hover { background: var(--surface-2); }
.seg-name { font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.01em; }
.seg-sub { font-size: var(--text-xs); color: var(--text-faint); margin-top: 2px; }
.seg-n { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  flex: none; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.seg-n b { font-size: var(--text-lg); font-weight: 500; color: var(--accent-text); line-height: 1.1; }
.seg-n i { font-style: normal; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint); }
/* A division with no feed must not read like one that has a feed. Dimming the
   number and swapping it for an em dash means the tile cannot be skim-read as
   available supply. */
.seg-dark { background: var(--surface-2); }
.seg-dark .seg-n b { color: var(--text-faint); }
/* Ink rather than accent: present and countable, but visibly not one of the
   five headline divisions. --link is not a token in base.css -- using it here
   silently fell through to inherit. */
.seg-partial .seg-n b { color: var(--text); }

/* ============================================================
   COMPLIANCE
   ============================================================ */
.comp-grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .comp-grid { grid-template-columns: repeat(2, 1fr); } }
.comp {
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  border-radius: var(--radius); padding: var(--space-6); background: var(--surface);
}
.comp-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); flex-wrap: wrap; }
.comp h3 { font-size: var(--text-base); letter-spacing: -0.015em; }
.comp .pen {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text);
  padding: 2px var(--space-2); background: var(--accent-dim); border-radius: var(--radius-sm); white-space: nowrap;
}
.comp p { font-size: var(--text-sm); color: var(--text-muted); }
.comp dl { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); }
.comp dt { font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); }
.comp dd { font-size: var(--text-xs); color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.callout {
  border: 1px solid var(--accent-line); background: var(--accent-dim);
  border-radius: var(--radius-lg); padding: var(--space-8);
  display: grid; gap: var(--space-6); margin-top: var(--space-8);
}
@media (min-width: 900px) { .callout { grid-template-columns: minmax(0,1fr) auto; align-items: center; } }
.callout h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.callout p { font-size: var(--text-sm); color: var(--text-muted); max-width: 60ch; }
.callout p + p { margin-top: var(--space-3); font-size: var(--text-xs); }
.callout .big {
  font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--accent-text);
  letter-spacing: -0.03em; line-height: 1;
}
.callout .big small { display: block; font-size: var(--text-xs); color: var(--text-muted); letter-spacing: .1em; margin-top: var(--space-2); font-family: var(--font-body); }

/* ============================================================
   DELIVERY CHANNELS
   ============================================================ */
.chans { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .chans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .chans { grid-template-columns: repeat(3, 1fr); } }
.chan {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); background: var(--surface);
  display: flex; gap: var(--space-4); align-items: flex-start;
}
.chan-ico { color: var(--accent-text); flex: none; margin-top: 2px; }
.chan h3 { font-size: var(--text-sm); margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.chan p { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55; }
.chan .tier {
  display: inline-block; margin-top: var(--space-3); font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--text-faint); letter-spacing: .08em;
}

/* ============================================================
   PRICING
   ============================================================ */
.tiers { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 700px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .tiers-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .tiers-3 { grid-template-columns: repeat(3, 1fr); max-width: 62rem; margin-inline: auto; } }
/* Two cards since Pro was retired 2026-08-19. Narrower max-width than the
   three-up so two cards do not stretch into billboards on a wide screen. */
.tiers-1 { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
@media (min-width: 700px)  { .tiers-1 { grid-template-columns: 1fr; } }
@media (min-width: 1120px) { .tiers-1 { grid-template-columns: 1fr; max-width: 34rem; } }
@media (min-width: 700px)  { .tiers-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .tiers-2 { grid-template-columns: repeat(2, 1fr); max-width: 46rem; margin-inline: auto; } }
.tier-ladder {
  font-size: 11.5px; line-height: 1.75; letter-spacing: .01em;
  color: var(--text-muted); margin: calc(var(--space-3) * -1) 0 var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
}
.tiers { gap: var(--space-5); }
.tier-trial {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: var(--text-muted); border-left: 2px solid var(--accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  margin: calc(var(--space-6) * -0.5) 0 var(--space-5);
}
@media (min-width: 1120px) { .tier-for { min-height: 3.8em; } }
.tier-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; height: 100%;
}
.tier-card.feat { border-color: var(--accent-text); box-shadow: var(--shadow); position: relative; }
.tier-badge {
  position: absolute; top: 0; left: var(--space-6); transform: translateY(-50%);
  background: var(--accent-solid); color: var(--accent-solid-ink); font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: 100px; white-space: nowrap;
}
.tier-name { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.tier-for { font-size: var(--text-xs); color: var(--text-faint); margin-bottom: var(--space-6); min-height: 2.4em; line-height: 1.4; }
.tier-price { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-6); }
.tier-price .amt { font-family: var(--font-mono); font-size: var(--text-2xl); letter-spacing: -0.04em; line-height: 1; }
.tier-price .per { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
.tier-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.tier-list li { display: flex; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; }
.tier-list svg { color: var(--accent-text); flex: none; margin-top: 5px; }
.tier-card .btn { margin-top: auto; width: 100%; }

/* ============================================================
   FOUNDER
   ============================================================ */
.founder { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .founder { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-16); align-items: center; } }
.quote {
  font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4;
  letter-spacing: -0.02em; border-left: 2px solid var(--accent);
  padding-left: var(--space-6);
}
.quote-by { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--text-faint); font-family: var(--font-mono); padding-left: var(--space-6); }
.creds { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cred { background: var(--surface); padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }
.cred span:first-child { color: var(--text-muted); }
.cred span:last-child { font-family: var(--font-mono); text-align: right; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--divider); }
.faq details { border-bottom: 1px solid var(--divider); }
.faq summary {
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  font-size: var(--text-base); font-weight: 600; letter-spacing: -0.015em;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary .plus { flex: none; color: var(--text-faint); transition: transform .3s var(--ease), color .2s; }
.faq details[open] summary .plus { transform: rotate(45deg); color: var(--accent-text); }
.faq .ans { padding-bottom: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); max-width: 72ch; }
.faq .ans p + p { margin-top: var(--space-3); }

/* ============================================================
   SIGNUP
   ============================================================ */
.signup { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.signup-in { padding: clamp(var(--space-8), 5vw, var(--space-16)); display: grid; gap: var(--space-10); }
@media (min-width: 940px) { .signup-in { grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: var(--space-16); align-items: start; } }
.signup h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.signup p { color: var(--text-muted); font-size: var(--text-sm); max-width: 54ch; }

form.su { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.field input, .field select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  font-size: var(--text-sm); width: 100%;
  transition: border-color .2s var(--ease), background-color .2s;
}
.field input:focus, .field select:focus { border-color: var(--accent-text); outline: none; }
.field input::placeholder { color: var(--text-faint); }
.su .btn { margin-top: var(--space-2); }
.su-fine { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.5; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields but fill anything positioned. Never focusable by keyboard. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.su-err { display: none; font-size: var(--text-sm); line-height: 1.5; color: var(--accent-text);
          margin: 0; }
.su-err.on { display: block; }
.su-err a { color: var(--accent-text); text-decoration: underline; }

.su-done {
  display: none; border: 1px solid var(--accent-line); background: var(--accent-dim);
  border-radius: var(--radius); padding: var(--space-6); text-align: left;
}
.su-done.on { display: block; }
.su-done h3 { font-size: var(--text-base); margin-bottom: var(--space-2); color: var(--accent-text); }
.su-done p { font-size: var(--text-sm); color: var(--text-muted); }
.su-done-alt { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--accent-line); }
.su-done-alt a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr { border-top: 1px solid var(--divider); padding-block: var(--space-12) var(--space-8); }
.ftr-top { display: grid; gap: var(--space-8); margin-bottom: var(--space-10); }
@media (min-width: 760px) { .ftr-top { grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(0,1fr)); gap: var(--space-12); } }
.ftr h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-4); font-weight: 600; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.ftr li a { font-size: var(--text-sm); color: var(--text-muted); transition: color .2s; }
.ftr li a:hover { color: var(--text); }
.ftr-blurb { font-size: var(--text-sm); color: var(--text-muted); max-width: 46ch; margin-top: var(--space-4); }
.ftr-btm { border-top: 1px solid var(--divider); padding-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }
.ftr-btm p { font-size: var(--text-xs); color: var(--text-faint); }
.ftr-btm a { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ---------- violation ledger (compliance lead-in) ---------- */
.lede em.pl { font-style: normal; color: var(--text); font-weight: 600; }
.vio {
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: var(--space-6);
}
@media (min-width: 760px) { .vio { grid-template-columns: repeat(3, 1fr); } }
.vio-cell { background: var(--surface); padding: var(--space-5); }
.vio-n {
  font-family: var(--font-mono); font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1;
}
.vio-cell:first-child .vio-n { color: var(--accent-text); }
.vio-k { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); }
.vio-src { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--space-3); }

/* Inline guidance under a form field. Uses --text-muted rather than
   --text-faint (which .su-fine uses for legal fine print) because this text
   has to actually be read to answer the question correctly. */
.su-hint { margin: 6px 0 0; font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }

/* Marks a division whose source dataset is catalogued but not yet producing
   leads. Shown rather than hidden so nobody subscribes to an empty feed. */
.seg-tag { display:inline-block; margin-left:8px; padding:1px 6px; border-radius:3px;
  border:1px solid var(--divider); font-family:var(--font-mono);
  font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted); vertical-align:middle; }
.seg-tag.is-partial { border-color: var(--text-muted); color: var(--text-muted); }
.seg-tag.is-dark { border-style: dashed; }

/* Raw DOB work type shown under the division label, so the classification is
   auditable rather than asserted. */
.td-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 3px; }

/* Closing tile that absorbs the odd remainder of the division grid. */
.seg-cta { text-decoration: none; color: inherit; background: var(--surface-2); }
.seg-cta:hover { background: var(--surface); }
.seg-cta .seg-n { font-size: var(--text-base); }

/* Confidence bands on the owner-of-record cell. Colour is never the only
   signal -- the band word and the numeric score are both present -- because a
   red/green-only encoding fails for ~8% of male readers. */
.band {
  display: inline-block; margin-left: .4em; padding: .08em .42em;
  border-radius: 3px; font-family: var(--font-mono);
  font-size: .625rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; vertical-align: 1px;
}
.band.is-high { background: #EDF5EF; color: #1E6B3A; }
.band.is-mid  { background: #FBF3E4; color: #8A5A00; }
.band.is-low  { background: #F1F0EE; color: #5C5A56; }

/* The masked house number. U+2588 needs the mono face to sit on the same
   advance width as the digits it replaces, otherwise the column jitters. */
.td-addr.mono { letter-spacing: -.01em; }

/* Shown when the nightly build has not run in over 48h. Better to admit the
   list is stale than to date-stamp it today and be wrong. */



/* Withheld characters. These are U+2588 glyphs in the mono face, not an
   overlay, so they must be toned down in CSS or the row reads as a
   redacted FBI file rather than a field the subscriber unlocks. */
.msk { color: #C4BFB6; }
:root[data-theme="dark"] .msk { color: #3A3833; }

/* Per-figure data vintage. Replaces .stale-warn, which was a page-wide banner
   reporting deploy age. A stamp sits under the number it describes, and only a
   figure whose own data is stale gets the amber treatment. */
.vintage {
  display: block;
  margin-top: .35rem;
  font-size: .72rem;
  letter-spacing: .01em;
  color: var(--muted, #7A7974);
  font-variant-numeric: tabular-nums lining-nums;
}
.vintage-stale { color: var(--warn, #964219); }
.vintage-held  { color: var(--muted, #7A7974); font-style: normal; }
/* A withheld figure hides its own number and nothing else on the page. */
[data-suppressed="1"] .stat-v { opacity: .35; }

/* ============================================================
   HERO PRICE ROW
   Prices above the fold. Three tap targets that jump to #pricing
   rather than repeating the feature lists.
   ============================================================ */
.hero-price {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2); margin-top: var(--space-6);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-2); background: var(--surface);
}
.hpr {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-3); border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; transition: background .18s var(--ease);
  min-width: 0;
}
.hpr:hover { background: var(--surface-3); }
.hpr-feat { background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-line); }
.hpr-n { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.hpr-v { font-family: var(--font-mono); font-size: var(--text-xl); color: var(--text); letter-spacing: -0.03em; line-height: 1.05; }
.hpr-feat .hpr-v { color: var(--accent-text); }
.hpr-s { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.3; }
@media (max-width: 560px) {
  .hero-price { grid-template-columns: 1fr; }
  .hpr { flex-direction: row; align-items: baseline; gap: var(--space-3); }
  .hpr-s { margin-left: auto; text-align: right; }
}

/* ============================================================
   MONEY MATH
   ============================================================ */
.money-grid { display: grid; gap: var(--space-5); }
@media (min-width: 780px) { .money-grid { grid-template-columns: repeat(3, 1fr); } }
.mm {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.mm-hi { border-color: var(--accent-line); background: var(--accent-dim); }
.mm-lbl { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.mm-v {
  font-family: var(--font-mono); font-size: var(--text-2xl); letter-spacing: -0.04em;
  line-height: 1; color: var(--text);
}
.mm-hi .mm-v { color: var(--accent-text); }
.mm-k { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }

/* ============================================================
   WORKED LEAD CARD
   ============================================================ */
.lead-demo {
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow);
}
.ld-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-6);
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.ld-seg { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--space-2); }
.ld-addr { font-size: var(--text-xl); letter-spacing: -0.02em; line-height: 1.15; }
.ld-conf {
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text);
  text-align: right; letter-spacing: .06em; flex-shrink: 0;
}
.ld-conf small { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: 0; margin-top: 2px; }
.ld-rows { padding: var(--space-2) var(--space-6); }
.ld-row { display: grid; gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid var(--divider); }
@media (min-width: 700px) { .ld-row { grid-template-columns: 190px minmax(0,1fr); gap: var(--space-4); align-items: baseline; } }
.ld-row:last-child { border-bottom: 0; }
.ld-k { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.ld-v { font-size: var(--text-sm); color: var(--text); line-height: 1.5; }
.ld-red { color: var(--data-2); font-family: var(--font-mono); }
.ld-play { padding: var(--space-6); border-top: 1px solid var(--border); background: var(--accent-dim); }
.ld-play-hd { font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--space-4); }
.ld-open {
  font-size: var(--text-lg); line-height: 1.45; color: var(--text);
  border-left: 2px solid var(--accent); padding-left: var(--space-4);
  margin-bottom: var(--space-5);
}
.ld-ask-hd, .ld-obj-q { font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.ld-ask ul { list-style: none; display: grid; gap: var(--space-2); }
.ld-ask li { font-size: var(--text-sm); color: var(--text-muted); padding-left: var(--space-4); position: relative; line-height: 1.5; }
.ld-ask li::before { content: "—"; position: absolute; left: 0; color: var(--accent-text); }
.ld-obj { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--accent-line); }
.ld-obj-q { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--text); font-style: italic; }
.ld-obj p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }
.ld-foot { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-faint); line-height: 1.5; }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp th, .cmp td {
  text-align: left; padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--divider); vertical-align: top;
}
.cmp th {
  font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 500; border-bottom-color: var(--border-strong);
}
.cmp td { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.cmp td:last-child { font-family: var(--font-mono); color: var(--text); white-space: nowrap; }
.cmp-us td { background: var(--accent-dim); color: var(--text); }
.cmp-us td:last-child { color: var(--accent-text); }
.cmp-tag {
  display: inline-block; font-size: var(--text-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-text); border: 1px solid var(--accent-line);
  border-radius: 100px; padding: 1px var(--space-2); margin-left: var(--space-2);
}
.cmp-note { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.6; margin-top: var(--space-4); max-width: 78ch; }

/* ============================================================
   ANCHOR OFFSET
   The header is sticky at 62px. Without this every in-page nav
   click hides the heading it just jumped to underneath it.
   ============================================================ */
#money, #worked, #compare, #pricing, #how, #proof, #faq, #compliance, #start {
  scroll-margin-top: 78px;
}

/* ============================================================
   COMPARISON TABLE ON A PHONE
   min-width:640px inside overflow-x:auto meant the PRICE column --
   the only reason the table exists -- sat off-screen at 390px with
   no scroll affordance. Restack each row as a labelled card so the
   price is always visible. Labels come from data-l on each cell.
   ============================================================ */
@media (max-width: 640px) {
  .cmp-wrap { overflow-x: visible; }
  .cmp { min-width: 0; display: block; }
  .cmp thead { display: none; }
  .cmp tbody, .cmp tr { display: block; }
  .cmp tr {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-4); margin-bottom: var(--space-3);
    background: var(--surface);
  }
  .cmp td { display: block; border: 0; padding: 0; }
  .cmp td + td { margin-top: var(--space-2); }
  .cmp td[data-l]::before {
    content: attr(data-l);
    display: block; font-family: var(--font-mono);
    font-size: var(--text-xs); letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-faint);
    margin-bottom: 2px;
  }
  .cmp td:first-child { font-size: var(--text-base); color: var(--text); }
  .cmp td:last-child { white-space: normal; font-size: var(--text-lg); }
  .cmp-us td { background: none; }
  .cmp-us { background: var(--accent-dim); border-color: var(--accent-line); }
}

/* ============================================================
   TRADE PAGES  (/plumbing, /roofing, /hvac, /interiors, /facade)
   and /data.

   Deliberately small. The trade pages were built out of components
   the homepage already had -- .stat, .money-grid, .lead-demo, .cmp,
   .steps, .faq, .callout -- so the only new rules are the ones with
   no existing equivalent. Anything that needed a fresh component was
   a sign the section did not belong on the page.
   ============================================================ */

/* A trade hero has no product screenshot beside it, so it runs full
   width instead of inheriting the homepage's two-column hero grid. */
.hero-trade { padding-bottom: var(--space-8); }
.hero-trade h1 { max-width: 20ch; }
.hero-trade .lede { max-width: 62ch; }
.hero-trade .stat-grid { margin: var(--space-8) 0 var(--space-7); }

/* Cross-links between trades. One page ranking should lift the others,
   and a roofer who lands on /plumbing by mistake needs one click out. */
.trade-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--divider);
  font-size: var(--text-sm);
}
.trade-strip-lbl {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint);
}
.trade-strip a {
  color: var(--text-muted); text-decoration: none;
  padding: 4px 10px; border: 1px solid var(--divider); border-radius: 999px;
  transition: color .15s, border-color .15s;
}
.trade-strip a:hover { color: var(--accent-text); border-color: var(--accent-text); }
.trade-strip a[aria-current="page"] {
  color: var(--accent-text); border-color: var(--accent-text);
}
.trade-strip-data { border-color: transparent !important; }

/* The redacted contact line. Muted rather than blacked out -- the point
   is that a real name exists, not that something is being hidden. */
.ld-red { color: var(--text-faint); font-style: italic; }

/* Trade index on /data. */
.tier-list-2 { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tier-list-2 a { color: var(--text); text-decoration: none; }
.tier-list-2 a:hover { color: var(--accent-text); }
@media (max-width: 640px) { .tier-list-2 { grid-template-columns: 1fr; } }

/* .steps is a hard three-column grid because the homepage has exactly three
   steps. The trade pages have four and /data has five, which left one orphan
   card and a screen-height hole beneath it. Wrap evenly instead of assuming
   the count. */
@media (min-width: 860px) {
  .steps.steps-even {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}
/* .cmp td:last-child is monospace because the homepage's last column is a
   short verdict. On the trade comparison the last column is prose, where mono
   reads like code. */
.cmp.cmp-prose td:last-child { font-family: var(--font-body); white-space: normal; }

/* The division cards now carry both numbers: the open pool as the headline and
   the monthly flow beneath it. Deliberately quieter than the pool -- it is the
   second question a contractor asks, not the first -- but not faint, because
   the flow is the part that justifies a subscription rather than a one-off
   list. */
.seg-n .seg-flow {
  display: block; margin-top: 3px;
  font-size: 10px; letter-spacing: .02em;
  color: var(--text-muted); white-space: nowrap;
}
.seg-n .seg-flow.is-sweep { font-style: italic; color: var(--text-faint); }
.seg-dark .seg-n .seg-flow { color: var(--text-faint); }

/* .btn is nowrap, which is right for a row of buttons and wrong inside a narrow
   form column: the label then sets the column's min-content width and a long
   one pushes past .signup's padding, where overflow:hidden clips the card edge
   rather than wrapping. Inside the signup form, let the label wrap. */
form.su .btn { white-space: normal; }

/* The trade pages stack three short paragraphs in the signup's left column;
   without this they butt together and read as one block. */
.signup p + p { margin-top: var(--space-4); }
/* Links inside the fine print inherited muted body colour, so "Compare all
   three tiers" did not look clickable at all. */
.su-fine a { color: var(--accent-text); }
.su-fine a:hover { text-decoration: underline; }


/* ===================================================== hero email capture ==
   One field above the fold. Sized for a 390px phone first: the input and the
   button stack there because a 44px-tall button beside a full-width email
   field leaves neither usable, and they sit side by side from 560px up where
   there is room. Both keep a 48px hit target -- below that a thumb misses. */
.hero-catch { margin: var(--space-6) 0 var(--space-4); max-width: 34rem; }
.hero-catch-lb {
  display: block;
  font: 500 0.78rem/1.2 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.hero-catch-row { display: flex; flex-direction: column; gap: var(--space-2); }
.hero-catch-row input {
  width: 100%;
  min-height: 48px;
  padding: 0 0.9rem;
  font-size: 1rem; /* 16px floor: anything smaller makes iOS Safari zoom on focus. */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hero-catch-row input::placeholder { color: var(--text-faint); }
.hero-catch-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.hero-catch-row .btn { min-height: 48px; white-space: nowrap; }
.hero-catch-fine {
  margin: var(--space-3) 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}
@media (min-width: 560px) {
  .hero-catch-row { flex-direction: row; align-items: stretch; }
  .hero-catch-row input { flex: 1 1 auto; min-width: 0; }
  .hero-catch-row .btn { flex: 0 0 auto; }
}
/* The ghost button is now alone under the capture form, so it should not carry
   the top margin it had when it sat beside a primary button. */
.hero-catch + .hero-cta { margin-top: 0; }

/* ===================================================================
 * /6am — paid-traffic landing page
 * -------------------------------------------------------------------
 * Scoped with .lp- so nothing here can reach the homepage. Tokens only:
 * an earlier attempt at this used --line, --card and --muted, none of
 * which exist in base.css, and the result was an input with a 0px
 * border that looked deliberately invisible.
 *
 * Sizes are tuned so SCREEN 1 fits inside 844px at 390px wide. The
 * hero on the homepage uses clamp(space-16, 8vw, space-24) top padding;
 * here it is cut to space-8 because the header is sticky and every
 * pixel above the email field is a pixel of risk.
 * =================================================================== */
.lp-hero { padding-block: var(--space-8) var(--space-10); }
.lp-hero-in { max-width: 42rem; }
.lp-hero h1 { font-size: clamp(1.75rem, 7.2vw, 3rem); line-height: 1.08; }
.lp-hero .lede { margin-top: var(--space-4); font-size: clamp(1rem, 3.9vw, 1.125rem); }
.lp-hero .hero-catch { margin-top: var(--space-6); }

.lp-sect { padding-block: var(--space-16); border-top: 1px solid var(--divider); }
.lp-sect-alt { background: var(--surface-2); }
.lp-sect h2 { font-size: clamp(1.5rem, 5.6vw, 2.25rem); line-height: 1.12; margin-top: var(--space-2); }
.lp-sub { margin-top: var(--space-4); max-width: 46rem; color: var(--text-muted); line-height: 1.6; }
.lp-fine { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--text-faint); line-height: 1.6; max-width: 44rem; }

/* One column on a phone. Two from 720px — never three: these are
   paragraphs, not stat tiles, and a 3-up grid drops each to ~28
   characters a line, well under the 45-character floor. */
.lp-grid { display: grid; gap: var(--space-4); margin-top: var(--space-10); }
@media (min-width: 720px) { .lp-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }

.lp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-6);
}
.lp-card-flat { background: var(--accent-dim); border-color: var(--accent-line); }
.lp-num { font-size: var(--text-xs); letter-spacing: .12em; color: var(--accent-text); margin: 0; }
.lp-card h3 { font-size: 1.0625rem; margin: var(--space-3) 0 var(--space-2); line-height: 1.25; }
.lp-card p { margin: 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.62; }

.lp-chip-lb {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
  margin: var(--space-10) 0 var(--space-4);
}
.lp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lp-chip {
  border: 1px solid var(--border); border-radius: 100px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem; line-height: 1.35; background: var(--surface);
}
/* Waitlist divisions are visually recessed as well as labelled. Colour
   alone is not the signal — the heading above them says "waitlist" in
   words, because a contractor must not be able to mistake one of these
   for a live feed. */
.lp-chips-dim .lp-chip { background: transparent; color: var(--text-faint); border-style: dashed; }
.lp-chip-note {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent-text); margin-left: var(--space-2);
}

.lp-close { border-top: 1px solid var(--divider); }
.lp-catch2 { margin-top: var(--space-8); max-width: 34rem; }

.lp-ftr { padding-block: var(--space-10); border-top: 1px solid var(--divider); }
.lp-ftr-links { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0 0 var(--space-5); }
.lp-ftr-links a { font-size: 0.875rem; color: var(--text-muted); }

/* ---- /6am : the play card ----------------------------------------
 * The one card that carries the differentiator, so it gets the accent
 * frame and both grid columns. lp-card-flat's accent-dim background was
 * moved OFF card 06 and onto this one: two accent-filled cards in one
 * grid means neither reads as the emphasis.
 */
.lp-card-hero { background: var(--accent-dim); border-color: var(--accent-line); }
@media (min-width: 720px) { .lp-card-hero { grid-column: 1 / -1; } }
.lp-card-hero h3 { font-size: 1.25rem; line-height: 1.22; }
.lp-card-hero > p { color: var(--text); }
.lp-kicker {
  margin-top: var(--space-4) !important; padding-top: var(--space-4);
  border-top: 1px solid var(--accent-line);
  font-weight: 600; color: var(--text) !important;
}

/* Body copy in these cards is --text-muted, so a plain <strong> only gets
 * heavier, not brighter, and the emphasis barely reads on a phone in daylight.
 * Lifting to --text is what index.html does inline; doing it once here means
 * no inline style repeated eleven times. */
.lp-card p strong { color: var(--text); font-weight: 700; }

/* Full-row width WITHOUT the accent frame. The play card carries the sample
 * block and runs ~1,500px tall; in a single grid column it left a hole the
 * same height beside the card next to it. */
@media (min-width: 720px) { .lp-card-wide { grid-column: 1 / -1; } }

/* The sample play. A definition list, not a table: on a 390px phone a
   two-column table forces the value column to ~19 characters and the
   copy is the product. Label above, body below, always. */
.lp-play {
  margin: var(--space-5) 0; padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.lp-play-lb {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint);
  /* Divider, not just margin: without it the label reads as the first
     field's caption instead of the panel's own title. */
  margin: 0 0 var(--space-5); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--divider);
}
.lp-play dl { margin: 0; }
.lp-play dt {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-text);
  margin-top: var(--space-4);
}
.lp-play dt:first-of-type { margin-top: 0; }
.lp-play dd {
  margin: var(--space-1) 0 0; font-size: 0.9375rem; line-height: 1.55;
  color: var(--text);
}