/* DelistMyData — marketing site
   Signature idea: "the file on you." A mock exposure record gets its fields
   redacted in front of you — the product's whole pitch, made visible.

   Paper-forward pass: the page is majority warm paper/index-card, with dark
   ink reserved for deliberate bookends (header, hero, page-intro, footer).
   A dark forest green stays the connective accent across both. */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Mono:wght@700&display=swap");

:root {
  --ink: #14161c;
  --ink-raised: #1b1e26;
  --paper: #f1eee6;
  --paper-raised: #fbf9f3;
  --redact: #0a0a0c;
  --seal: #1e6b45;
  --seal-bright: #2f9c5c;
  --seal-tint: rgba(30, 107, 69, 0.1);
  --seal-tint-strong: rgba(30, 107, 69, 0.18);

  /* text on dark (ink) surfaces */
  --ink-soft: #8b8d97;
  --ink-faint: #63666f;

  /* text on light (paper) surfaces */
  --paper-soft: #5a564c;
  --paper-faint: #8b8576;

  --border-on-ink: #2a2d38;
  --border-on-paper: #e2dbc9;

  --shadow-card: 0 24px 48px -26px rgba(24, 18, 10, 0.3);
  --shadow-card-sm: 0 12px 26px -18px rgba(24, 18, 10, 0.26);

  --font-display: "Newsreader", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-card: 14px;
  --radius-control: 8px;
  --container: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--seal-bright);
  outline-offset: 3px;
}

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

.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--seal-bright);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--seal-bright);
}

.breadcrumbs { margin-bottom: 14px; }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--paper-soft);
}
.breadcrumbs li { display: flex; align-items: center; gap: 6px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--border-on-paper); }
.breadcrumbs a { color: var(--paper-soft); }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--seal); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* ---------- Header (dark bookend) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(20, 22, 28, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-on-ink);
}
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 72px;
}
.logo-link { justify-self: start; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
}
.logo__mark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--seal-bright);
}
.logo-link:hover .logo__mark,
.logo-link:focus-visible .logo__mark { color: var(--paper); }

.wordmark {
  font-family: "Space Mono", var(--font-mono);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  color: inherit;
}

/* MY knocked out of a green marker bar — the hero's redaction gesture */
.wordmark__accent {
  background: var(--seal-bright);
  color: var(--ink);
  padding: 1px 5px;
  margin: 0 1px;
  border-radius: 3px;
}

.site-footer .logo { color: var(--paper); }

/* On paper surfaces, if the lockup is ever placed there */
.logo--on-paper { color: var(--ink); }
.logo--on-paper .logo__mark { color: var(--seal); }
.logo--on-paper .wordmark__accent {
  background: var(--seal);
  color: var(--paper-raised);
}

@media (max-width: 560px) {
  .logo { gap: 8px; }
  .logo__mark { width: 21px; height: 21px; }
  .wordmark { font-size: 20px; }
}
.site-nav {
  display: flex;
  align-items: center;
}
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 16px;
}

/* Each dropdown group (Product / Learn / Company) is its own Stimulus
   instance, positioned relative so its panel can anchor beneath it. */
.site-nav__item--has-dropdown { position: relative; }

.site-nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
}
.site-nav__trigger:hover,
.site-nav__trigger:focus-visible,
.site-nav__trigger[aria-expanded="true"] { color: var(--paper); }

/* Green connector bar under the active trigger, meeting the panel's
   matching top border so the open state reads as one continuous piece. */
.site-nav__trigger[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--seal-bright);
}

.site-nav__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 210px;
  padding: 8px;
  background: var(--ink-raised);
  border: 1px solid var(--border-on-ink);
  border-top: 2px solid var(--seal-bright);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.site-nav__panel.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.site-nav__panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-control);
}
.site-nav__panel-item:hover,
.site-nav__panel-item:focus-visible { background: var(--seal-tint-strong); }

.site-nav__panel-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--seal-bright);
}

.site-nav__panel-label {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--paper);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-on-ink);
  border-radius: var(--radius-control);
  color: var(--paper);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ---------- Buttons / form controls ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn-seal { background: var(--seal); color: var(--paper-raised); }
.btn-seal:hover, .btn-seal:focus-visible { background: var(--seal-bright); }
.btn-ghost {
  background: transparent;
  color: var(--seal);
  border-color: var(--border-on-paper);
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--seal); background: var(--seal-tint); }
/* On dark (ink) surfaces .btn-ghost's default seal/border-on-paper pairing
   is low-contrast — swap to the brighter dark-surface tokens used for
   eyebrows/icons elsewhere on ink backgrounds. */
.btn-ghost--on-ink { color: var(--seal-bright); border-color: var(--border-on-ink); }
.btn-ghost--on-ink:hover, .btn-ghost--on-ink:focus-visible {
  border-color: var(--seal-bright);
  background: var(--seal-tint-strong);
}
.btn:active { transform: translateY(1px); }

/* ---------- Waitlist form ---------- */
.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.waitlist-form__field {
  position: relative;
  flex: 1 1 260px;
}
.waitlist-form input[type="email"] {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--paper);
  color: var(--redact);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: 15px;
}
.waitlist-form input[type="email"]::placeholder { color: var(--paper-soft); }
.waitlist-form input[type="email"]:focus-visible {
  outline: 2px solid var(--seal-bright);
  outline-offset: 2px;
}
.waitlist-form .btn { height: 48px; }
/* Honeypot: off-canvas, never display:none (bots skip that), never seen or
   reachable by real visitors. */
.honeypot {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.waitlist-form__note {
  width: 100%;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.waitlist-form__error {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--seal-bright);
  margin-top: 4px;
}
.cta-band .waitlist-form__note,
.page-intro .waitlist-form__note { color: var(--paper-soft); }

/* On the light CTA band, form fields sit on paper-raised — keep the input a
   touch darker than its card so it still reads as an input. */
.cta-band .waitlist-form input[type="email"] {
  background: var(--paper);
  border-color: var(--border-on-paper);
}

.flash {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--radius-control);
  margin: 18px 0;
}
.flash-notice { background: var(--seal-tint-strong); color: var(--ink); border: 1px solid var(--seal); }
.flash-alert { background: rgba(90, 86, 76, 0.1); color: var(--ink); border: 1px solid var(--border-on-paper); }

/* ---------- Hero (dark bookend) ---------- */
.hero {
  background: var(--ink);
  color: var(--paper);
  padding: 18px 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -22%;
  right: -8%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, var(--seal-tint-strong) 0%, transparent 68%);
  pointer-events: none;
}
.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
.hero__eyebrow { margin-bottom: 22px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--paper-raised);
}
.hero h1 em { font-style: italic; color: var(--seal-bright); }
.hero__sub {
  margin-top: 18px;
  max-width: 46ch;
  font-size: 18px;
  color: var(--ink-soft);
}
.hero__form { margin-top: 26px; max-width: 480px; }
.hero__secondary { margin-top: 14px; }

/* Record card — the signature element (paper card set against dark hero) */
.record-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 28px 26px 24px;
  transform: rotate(-1.4deg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  position: relative;
}
.record-card::before {
  content: "EXPOSURE RECORD";
  position: absolute;
  top: -11px;
  left: 26px;
  background: var(--seal);
  color: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 3px;
}
.record-card__row {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px dashed rgba(90, 86, 76, 0.35);
}
.record-card__row:last-child { border-bottom: none; }
.record-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--paper-soft);
}
.record-card__bar {
  position: relative;
  height: 15px;
  background: rgba(90, 86, 76, 0.16);
  border-radius: 3px;
  overflow: hidden;
}
.record-card__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--redact);
  border-right: 2px solid var(--seal-bright);
  width: 0;
  animation: redact-sweep 0.6s ease-out forwards;
  animation-delay: var(--delay, 0s);
}
.record-card__row:nth-child(1) .record-card__bar::after { --delay: 0.5s; }
.record-card__row:nth-child(2) .record-card__bar::after { --delay: 0.9s; }
.record-card__row:nth-child(3) .record-card__bar::after { --delay: 1.3s; }
.record-card__row:nth-child(4) .record-card__bar::after { --delay: 1.7s; }
@keyframes redact-sweep {
  to { width: 100%; }
}
.record-card__footer {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-soft);
  display: flex;
  justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
  .record-card__bar::after { animation: none; width: 100%; }
  .stat, .step { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
  .stat:hover, .step:hover { transform: none; }
}

/* ---------- Section heading helpers (light sections) ---------- */
.stats h2,
.steps__head h2,
.brokers__head h2,
.exposure-split h2,
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  color: var(--ink);
}

/* ---------- Proof band (dark bookend) ----------
   The three exposure stats sit unlabeled directly under the hero, on the
   same dark ground, so they read as the hero's proof rather than a new
   section. ---------- */
.proof-band {
  background: var(--ink);
  padding: 8px 0 44px;
}
.proof-band .stats__grid { margin-top: 0; }
.proof-band .stat {
  background: var(--ink-raised);
  border: 1px solid var(--border-on-ink);
  box-shadow: none;
}
.proof-band .stat:hover {
  border-color: var(--seal-bright);
  box-shadow: 0 24px 48px -26px rgba(0, 0, 0, 0.5);
}
.proof-band .stat__icon { background: var(--seal-tint-strong); color: var(--seal-bright); }
.proof-band .stat:hover .stat__icon { background: var(--seal-bright); color: var(--ink); }
.proof-band .stat__value { color: var(--paper-raised); }
.proof-band .stat__label { color: var(--ink-soft); }
.proof-band .stat__source { color: var(--seal-bright); }

/* ---------- Exposure split (light, raised) ----------
   Sample report + broker coverage, side by side on desktop so the "what you
   get" proof and the "who we cover" breadth read as one pitch instead of
   two stacked sections. Stacks on mobile like every other grid on the page.
   The report card is deliberately narrower than its column — a compact
   card, not a full-bleed table — echoing the hero record-card's modest
   width. ---------- */
.exposure-split {
  background: var(--paper-raised);
  padding: 64px 0;
  border-bottom: 1px solid var(--border-on-paper);
}
.exposure-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.exposure-split__col h2 { margin-top: 14px; }
.sample-report__sub {
  margin-top: 14px;
  font-size: 16px;
  color: var(--paper-soft);
}
.sample-report__card {
  margin-top: 32px;
  max-width: 440px;
  background: var(--paper);
  border: 1px solid var(--border-on-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.sample-report__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--paper);
}
.sample-report__bar-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.sample-report__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seal-bright);
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.sample-report__row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1.3fr;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-left: 3px solid transparent;
  border-bottom: 1px dashed var(--border-on-paper);
  font-size: 13.5px;
  color: var(--ink);
  transition: background-color 0.2s ease;
}
.sample-report__row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sample-report__row:last-child { border-bottom: none; }
.sample-report__row--head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-faint);
  border-bottom: 1px solid var(--border-on-paper);
  padding: 11px 18px;
}
/* Row highlight by status — a light wash + left accent bar so the eye can
   scan "what's still moving" without reading every status pill. */
.sample-report__row--sent { background: rgba(139, 133, 118, 0.07); border-left-color: var(--paper-faint); }
.sample-report__row--done { background: var(--seal-tint); border-left-color: var(--seal); }
.sample-report__row--watch { background: rgba(154, 108, 31, 0.09); border-left-color: #9a6c1f; }
.sample-report__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  width: fit-content;
}
.sample-report__status .icon {
  width: 14px;
  height: 14px;
}
.sample-report__status--sent { color: var(--paper-soft); }
.sample-report__status--done { color: var(--seal); }
.sample-report__status--watch { color: #9a6c1f; }

/* Animated status icons — a quiet, looping motion per state so the eye can
   tell "still moving" (spinner/hourglass) from "settled" (check) at a glance. */
.sample-report__icon--check .icon-check__mark {
  stroke-dasharray: 15;
  stroke-dashoffset: 15;
  animation: icon-check-draw 3s ease-in-out infinite;
}
.sample-report__icon--check .icon-check__circle {
  transform-origin: center;
  animation: icon-check-pulse 3s ease-in-out infinite;
}
@keyframes icon-check-draw {
  0%, 12% { stroke-dashoffset: 15; }
  35%, 85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 15; }
}
@keyframes icon-check-pulse {
  0%, 12% { opacity: 0.45; }
  35%, 85% { opacity: 1; }
  100% { opacity: 0.45; }
}
.sample-report__icon--spinner {
  transform-origin: center;
  animation: icon-spin 0.9s linear infinite;
}
@keyframes icon-spin {
  to { transform: rotate(360deg); }
}
.sample-report__icon--hourglass .icon-hourglass__sand-top {
  transform-origin: 12px 10.2px;
  animation: icon-hourglass-drain-top 2.6s ease-in infinite;
}
.sample-report__icon--hourglass .icon-hourglass__sand-bottom {
  transform-origin: 12px 10.8px;
  animation: icon-hourglass-drain-bottom 2.6s ease-in infinite;
}
.sample-report__icon--hourglass .icon-hourglass__drip {
  animation: icon-hourglass-drip 0.65s linear infinite;
}
@keyframes icon-hourglass-drain-top {
  0% { transform: scaleY(1); }
  88% { transform: scaleY(0); }
  92% { transform: scaleY(0); }
  96% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}
@keyframes icon-hourglass-drain-bottom {
  0% { transform: scaleY(0); }
  88% { transform: scaleY(1); }
  92% { transform: scaleY(1); }
  96% { transform: scaleY(0); }
  100% { transform: scaleY(0); }
}
@keyframes icon-hourglass-drip {
  0%, 100% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; transform: translateY(0.5px); }
  70% { opacity: 1; transform: translateY(6.5px); }
  85% { opacity: 0; transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .sample-report__icon--check .icon-check__mark,
  .sample-report__icon--check .icon-check__circle,
  .sample-report__icon--spinner,
  .sample-report__icon--hourglass .icon-hourglass__sand-top,
  .sample-report__icon--hourglass .icon-hourglass__sand-bottom,
  .sample-report__icon--hourglass .icon-hourglass__drip {
    animation: none;
  }
}

/* ---------- The file on you (light) ---------- */
.stats {
  background: var(--paper);
  padding: 56px 0;
  border-bottom: 1px solid var(--border-on-paper);
}
.stats h2 { max-width: 22ch; }
.stats__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.stat {
  background: var(--paper-raised);
  border: 1px solid var(--border-on-paper);
  border-radius: var(--radius-card);
  padding: 26px 22px 22px;
  box-shadow: var(--shadow-card-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--seal);
}
.stat__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--seal-tint);
  color: var(--seal);
  border-radius: 10px;
  margin-bottom: 18px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.stat:hover .stat__icon { background: var(--seal); color: var(--paper-raised); }
.stat__icon .icon { width: 21px; height: 21px; }
.stat__value {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink);
}
.stat__label {
  margin-top: 8px;
  font-size: 14px;
  color: var(--paper-soft);
}
.stat__source {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--seal);
}

/* ---------- Numbered steps / card grids (light, alternating band) ---------- */
.steps {
  background: var(--paper-raised);
  padding: 48px 0;
}
.steps__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.steps__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.steps__grid--four { grid-template-columns: repeat(4, 1fr); }
.steps__grid--two { grid-template-columns: repeat(2, 1fr); }
.step {
  background: var(--paper);
  border: 1px solid var(--border-on-paper);
  border-radius: var(--radius-card);
  padding: 24px 22px;
  box-shadow: var(--shadow-card-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--seal);
}
/* .step is a <div> everywhere else; the content-teaser cards render it as an
   <a> instead, so give it block layout (anchors are inline by default) —
   .step:hover above already covers the rest. */
.step--link { display: block; }
.step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.step__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--seal-tint);
  color: var(--seal);
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.step:hover .step__icon { background: var(--seal); color: var(--paper-raised); }
.step__icon .icon { width: 20px; height: 20px; }
.step__index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--paper-faint);
}
.step h3 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
}
.step p {
  margin-top: 8px;
  font-size: 15px;
  color: var(--paper-soft);
}

/* ---------- Broker directory (light) ---------- */
.brokers {
  background: var(--paper);
  padding: 56px 0;
}
.brokers__head h2 { max-width: 26ch; }
.broker-chips {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.broker-chip {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 13px;
  background: var(--paper-raised);
  border: 1px solid var(--border-on-paper);
  border-radius: 999px;
  color: var(--paper-soft);
}
a.broker-chip:hover, a.broker-chip:focus-visible {
  border-color: var(--seal);
  color: var(--seal);
}

/* ---------- Citation strip (light, compact) ----------
   Elevates the mono "SOURCE:" citation pattern already used inside stat
   cards into its own row — the honest analog to a press-logo bar: authority
   from sourced facts rather than borrowed logos. Sits at the bottom of the
   broker-coverage column in .exposure-split, not a standalone section. ---------- */
.citation-strip {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-on-paper);
}
.citation-strip__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.citation-strip__chips {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.citation-chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 7px 12px;
  background: var(--paper-raised);
  border: 1px solid var(--border-on-paper);
  border-radius: 6px;
  color: var(--paper-soft);
}

/* ---------- Mission / "case note" (light) ----------
   A note attached to the file rather than another dark .page-intro bookend,
   so it doesn't compete with the hero for attention. ---------- */
.mission {
  background: var(--paper);
  padding: 56px 0;
}
.mission__card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper-raised);
  border: 1px solid var(--border-on-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-sm);
  padding: 40px 44px;
  position: relative;
}
.mission__card::before {
  content: "CASE NOTE";
  position: absolute;
  top: -11px;
  left: 32px;
  background: var(--seal);
  color: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 3px;
}
.mission h2 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 30px);
  color: var(--ink);
  max-width: 24ch;
}
.mission__body {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--paper-soft);
}

.broker-directory__group {
  margin-top: 24px;
  background: var(--paper-raised);
  border: 1px solid var(--border-on-paper);
  border-radius: var(--radius-card);
  padding: 0 22px;
  box-shadow: var(--shadow-card-sm);
}
.broker-directory__group h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seal);
  padding: 18px 0 14px;
  margin: 0;
  border-bottom: 1px solid var(--border-on-paper);
}
.broker-directory__group h3 .icon {
  width: 18px;
  height: 18px;
  color: var(--seal);
}
.broker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-on-paper);
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
}
.broker-row:last-child { border-bottom: none; }
.broker-row a:hover, .broker-row a:focus-visible { color: var(--seal); }
.broker-row__status {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-soft);
}

/* ---------- Glossary ---------- */
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.category-chip {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 16px;
  background: var(--paper-raised);
  border: 1px solid var(--border-on-paper);
  border-radius: 999px;
  color: var(--paper-soft);
}
.category-chip:hover, .category-chip:focus-visible {
  border-color: var(--seal);
  color: var(--seal);
}
.category-chip--active {
  background: var(--seal);
  border-color: var(--seal);
  color: var(--paper);
}
.glossary-group { margin-top: 24px; }
.glossary-group__intro {
  padding: 14px 0 0;
  margin: 0;
  color: var(--paper-soft);
  font-size: 14px;
}
.glossary-list { margin: 0; padding: 0 0 4px; }
.glossary-list__item {
  padding: 16px 0;
  border-bottom: 1px solid var(--border-on-paper);
}
.glossary-list__item:last-child { border-bottom: none; }
.glossary-list__item dt {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.glossary-list__item dd {
  margin: 0;
  color: var(--paper-soft);
  font-size: 15px;
  line-height: 1.55;
}
.glossary-list__item dd p { margin: 0; }

/* ---------- FAQ (light) ---------- */
.faq-list { margin-top: 28px; }
.faq-item {
  background: var(--paper-raised);
  border: 1px solid var(--border-on-paper);
  border-radius: var(--radius-card);
  padding: 0 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card-sm);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
}
.faq-item__title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}
.faq-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--seal-tint);
  color: var(--seal);
  border-radius: 9px;
}
.faq-item__icon .icon { width: 18px; height: 18px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--seal);
  font-size: 20px;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  padding-bottom: 22px;
  padding-left: 52px;
  max-width: 60ch;
  color: var(--paper-soft);
  font-size: 15px;
}

/* ---------- CTA band (light, raised) ---------- */
.cta-band {
  background: var(--paper-raised);
  border-top: 1px solid var(--border-on-paper);
  border-bottom: 1px solid var(--border-on-paper);
  padding: 56px 0;
  text-align: center;
}
.cta-band__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--seal-tint);
  color: var(--seal);
  border-radius: 12px;
}
.cta-band h2 { max-width: 26ch; margin: 0 auto; }
.cta-band__form {
  margin: 24px auto 0;
  max-width: 480px;
  justify-content: center;
}
.cta-band .waitlist-form__note { text-align: center; }

/* ---------- Page intros (dark bookend, content pages) ---------- */
.page-intro {
  background: var(--ink);
  color: var(--paper);
  padding: 72px 0 48px;
  position: relative;
  overflow: hidden;
}
.page-intro::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--seal-tint-strong) 0%, transparent 68%);
  pointer-events: none;
}
.page-intro .container { position: relative; z-index: 1; }
.page-intro .eyebrow { margin-bottom: 18px; }
.page-intro h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 44px);
  max-width: 20ch;
  color: var(--paper-raised);
}
.page-intro p {
  margin-top: 18px;
  max-width: 56ch;
  font-size: 17px;
  color: var(--ink-soft);
}

/* ---------- Legal / policy pages (light section) ---------- */
.legal { padding: 56px 0 96px; }
.legal .container { max-width: 760px; }
.legal__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-faint);
  margin: 0 0 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-on-paper);
}
.legal h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 44px 0 14px;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p {
  margin: 0 0 14px;
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--paper-soft);
}
.legal p strong { color: var(--ink); }
.legal ul, .legal ol {
  margin: 0 0 14px;
  padding-left: 20px;
  max-width: 68ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--paper-soft);
}
.legal li { margin-bottom: 6px; }
.legal li strong { color: var(--ink); }
.legal a { color: var(--seal); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover, .legal a:focus-visible { color: var(--seal-bright); }
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 8px 0 20px;
}
.legal th, .legal td {
  border: 1px solid var(--border-on-paper);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.legal th {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--paper-raised);
  color: var(--paper-faint);
}

/* ---------- Blog (minimal — quieter than the rest of the site: no cards,
   no shadows, hairline rules and generous whitespace instead) ---------- */
.blog { padding: 8px 0 96px; }
.blog .container { max-width: 720px; }

.blog-empty {
  padding: 48px 0;
  color: var(--paper-faint);
  font-size: 15px;
}

.blog-list__item {
  padding: 36px 0;
  border-bottom: 1px solid var(--border-on-paper);
}
.blog-list__item:first-child { padding-top: 0; }
.blog-list__item:last-child { border-bottom: none; }

.blog-list__meta,
.blog-article__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper-faint);
  margin-bottom: 12px;
}
.blog-list__meta > span + span::before,
.blog-article__meta > span + span::before {
  content: "\00b7";
  margin-right: 10px;
  color: var(--border-on-paper);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-on-paper);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-badge--draft { color: var(--paper-faint); }
.status-badge--easy { color: var(--seal); border-color: var(--seal-tint-strong); background: var(--seal-tint); }
.status-badge--medium { color: #9a6c1f; border-color: rgba(154, 108, 31, 0.25); background: rgba(154, 108, 31, 0.1); }
.status-badge--hard { color: #a3402f; border-color: rgba(163, 64, 47, 0.25); background: rgba(163, 64, 47, 0.1); }

/* ---------- Opt-out report facts box & screenshots ---------- */
.report-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  background: var(--paper-raised);
  border: 1px solid var(--border-on-paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-sm);
  padding: 24px 28px;
  margin: 40px 0 0;
}
.report-facts__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-faint);
  margin-bottom: 6px;
}
.report-facts__value {
  font-size: 15px;
  color: var(--ink);
}
.report-facts__value a { color: var(--seal); }
.report-facts__value a:hover,
.report-facts__value a:focus-visible { color: var(--seal-bright); }

.report-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 8px 0 40px;
  max-width: 66ch;
}
.report-shots figure {
  border: 1px solid var(--border-on-paper);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper-raised);
  box-shadow: var(--shadow-card-sm);
}
.report-shots img { width: 100%; }
.report-shots figcaption {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--paper-soft);
}

.blog-list__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 25px);
  line-height: 1.3;
  margin: 0 0 10px;
}
.blog-list__title a:hover,
.blog-list__title a:focus-visible { color: var(--seal); }

.blog-list__dek {
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--paper-soft);
}

/* Article masthead — light, restrained; deliberately not another dark
   bookend so an article page reads calmer than the rest of the site. */
.blog-masthead {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--border-on-paper);
}
.blog-masthead .eyebrow { margin-bottom: 16px; }
.blog-masthead h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.25;
  max-width: 26ch;
  margin-bottom: 18px;
}
.blog-masthead .blog-article__meta { margin-bottom: 0; }

.blog-article {
  padding-top: 48px;
  max-width: 66ch;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--paper-soft);
}
.blog-article h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  margin: 44px 0 14px;
}
.blog-article h2:first-child { margin-top: 0; }
.blog-article p { margin: 0 0 18px; }
.blog-article ul, .blog-article ol {
  margin: 0 0 18px;
  padding-left: 20px;
}
.blog-article li { margin-bottom: 8px; }
.blog-article strong { color: var(--ink); }
.blog-article a {
  color: var(--seal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-article a:hover, .blog-article a:focus-visible { color: var(--seal-bright); }

/* ---------- Footer (dark bookend) ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--border-on-ink);
  padding: 48px 0 28px;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
}
.site-footer__brand {
  max-width: 30ch;
}
.site-footer__tagline {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.site-footer__heading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.site-footer__links a:hover, .site-footer__links a:focus-visible { color: var(--paper); }
.site-footer__bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-on-ink);
}
.site-footer__fine {
  font-size: 12px;
  color: var(--ink-faint);
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) and (min-width: 861px) {
  .steps__grid--four { grid-template-columns: repeat(2, 1fr); }
  .site-footer__top { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .site-footer__brand { max-width: none; grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hero { padding: 56px 0 48px; }
  .proof-band { padding: 8px 0 32px; }
  .stats, .steps, .brokers, .cta-band, .exposure-split, .mission { padding: 40px 0; }
  .legal { padding: 40px 0 64px; }
  .page-intro { padding: 56px 0 36px; }
  .blog-masthead { padding: 40px 0 24px; }
  .blog { padding: 4px 0 64px; }
  .hero .container { grid-template-columns: 1fr; gap: 48px; }
  .record-card { transform: none; max-width: 420px; }
  .stats__grid, .steps__grid, .steps__grid--four, .steps__grid--two { grid-template-columns: 1fr; gap: 18px; }
  .exposure-split__grid { grid-template-columns: 1fr; gap: 40px; }
  .sample-report__card { max-width: none; }
  .sample-report__row--head { padding: 10px 16px; }
  .sample-report__bar { padding: 14px 16px; }
  .mission__card { padding: 32px 24px; }
  .faq-item p { padding-left: 0; }
  .site-nav__links { display: none; }
  .site-nav__actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header.is-open .site-nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--ink);
    padding: 20px 24px 28px;
    border-bottom: 1px solid var(--border-on-ink);
    gap: 18px;
  }
  /* Each dropdown group becomes a static, always-expanded section stacked
     in the mobile menu — the trigger is label-only (no toggle) and the
     panel loses its absolute positioning/elevation in favor of a simple
     indent, so no extra mobile-specific JS is needed. */
  .site-nav__trigger { pointer-events: none; padding: 0; }
  .site-nav__panel {
    position: static;
    display: block;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    min-width: 0;
    margin-top: 8px;
    padding: 0 0 0 4px;
    background: none;
    border: none;
    box-shadow: none;
  }
  /* The CTA is hidden in the collapsed header row (above) but should still
     be reachable on mobile — show it as the last item once the menu opens,
     rather than leaving it unreachable off the homepage. */
  .site-header.is-open .site-nav__actions .btn {
    display: inline-flex;
    margin-top: 4px;
  }
  .site-footer__top { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__brand { max-width: none; }
}