*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #1A1A18;
  --ink-mid: #52524E;
  --ink-faint: #8F8F8A;
  --white: #FFFFFF;
  --off-white: #F7F5F0;
  --stone: #EDEAE3;
  --accent: #00B37E;          /* emerald green — techy, premium, founder-coded */
  --accent-dim: #00956A;
  --accent-bg: #E6F7F2;
  --coral: #E8533A;            /* CTA only */
  --coral-hover: #D04530;
  --border: rgba(26,26,24,0.1);
  --font: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html { scroll-behavior: smooth; }
/* [hidden] has to actually hide. The UA stylesheet's `[hidden]{display:none}`
   loses to any author rule that sets display, and several components below do
   (.btn-cta is inline-block, .reserve-form and .scan-facts are flex) — so
   toggling `.hidden` from JS silently did nothing on exactly the elements the
   checkout paths toggle. Caught by the browser test on the pricing tile; it
   was already leaving the founding-spot form on screen underneath the live
   Stripe pay button on /checkout/. */
[hidden] { display: none !important; }


body {
  font-family: var(--font);
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-size: 0.95rem; font-weight: 800; color: var(--ink);
  text-decoration: none; display: flex; align-items: center; gap: 7px;
  letter-spacing: -0.02em;
}

.logo-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--ink); display: flex; align-items: center; justify-content: center;
}

.logo-mark svg { width: 12px; height: 12px; }

.nav-links {
  display: flex; gap: 2rem; list-style: none;
  font-size: 0.84rem; font-weight: 500; color: var(--ink-mid);
}
.nav-links a { color: inherit; text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }

.nav-ai-badge {
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  color: var(--accent); background: var(--accent-bg);
  padding: 0.2rem 0.6rem; border-radius: 4px;
  border: 1px solid rgba(0,179,126,0.2);
  letter-spacing: 0.02em;
}

.nav-right { display: flex; align-items: center; gap: 1rem; }

.nav-signin {
  font-size: 0.82rem; font-weight: 600; color: var(--ink-mid);
  text-decoration: none; transition: color .15s;
}
.nav-signin:hover { color: var(--ink); }

.nav-cta {
  font-size: 0.82rem; font-weight: 700;
  color: white; background: var(--coral);
  padding: 0.5rem 1.2rem; border-radius: 100px;
  text-decoration: none; transition: background .15s, transform .1s;
  display: inline-block;
}
.nav-cta:hover { background: var(--coral-hover); transform: translateY(-1px); }

/* ── HERO ── */
.hero {
  min-height: 100vh;
  background: var(--off-white);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 7rem 2rem 5rem;
  text-align: center;
  position: relative; overflow: hidden;
}

/* Subtle grid bg */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(26,26,24,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,24,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 40%, transparent 100%);
}

.hero-ai-tag {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  color: var(--accent); background: var(--accent-bg);
  padding: 0.3rem 0.75rem; border-radius: 100px;
  border: 1px solid rgba(0,179,126,0.25);
  margin-bottom: 2rem; letter-spacing: 0.02em;
  display: inline-block;
  opacity: 0; animation: fadeUp .5s ease forwards .1s;
}

.building-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

/* Hero headline */
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.04em;
  color: var(--ink); max-width: 780px;
  margin-left: auto; margin-right: auto;
  opacity: 0; animation: fadeUp .6s ease forwards .35s;
}

.hero h1 .accent { color: var(--accent); }

.hero-sub {
  font-size: 1.2rem; color: var(--ink-mid);
  max-width: 520px; line-height: 1.6;
  margin: 1.5rem auto 2.5rem;
  opacity: 0; animation: fadeUp .6s ease forwards .5s;
}

.hero-actions {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 2rem; flex-wrap: wrap; justify-content: center;
  opacity: 0; animation: fadeUp .6s ease forwards .65s;
}

.btn-cta {
  font-size: 0.9rem; font-weight: 700;
  color: white; background: var(--coral);
  padding: 0.8rem 1.75rem; border-radius: 100px;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .15s, transform .1s; display: inline-block;
}
.btn-cta:hover { background: var(--coral-hover); transform: translateY(-1px); }

.btn-ghost {
  font-size: 0.88rem; font-weight: 600; color: var(--ink-mid);
  background: transparent; border: 1.5px solid var(--border);
  padding: 0.78rem 1.6rem; border-radius: 100px;
  text-decoration: none; transition: border-color .15s, color .15s;
  display: inline-block;
}
.btn-ghost:hover { border-color: var(--ink-mid); color: var(--ink); }

.hero-note {
  font-size: 0.75rem; color: var(--ink-faint);
  margin-top: 0.85rem;
  opacity: 0; animation: fadeUp .6s ease forwards .8s;
}

/* ── SCAN (hero) ── */
.scan-hero {
  width: 100%; max-width: 680px;
  margin: 0 auto 2.5rem;
  position: relative; z-index: 1;
  opacity: 0; animation: fadeUp .5s ease forwards .2s;
}
.scan-hero [hidden] { display: none !important; }

.scan-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.6rem 0.6rem 0.6rem 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  text-align: left;
}
.scan-form:focus-within { border-color: var(--accent); }

.scan-form-label {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  color: var(--ink-faint); white-space: nowrap; flex-shrink: 0;
}

.scan-input {
  font-family: var(--mono); font-size: 0.9rem; font-weight: 500;
  color: var(--ink); background: transparent;
  border: none; outline: none;
  flex: 1; min-width: 0;
}
.scan-input::placeholder { color: var(--ink-faint); }

/* Coral, like every other call to action — the token says "CTA only" and this
   is the most important one on the page. It was ink, which made the primary
   action on the homepage the one button that did not look clickable, while the
   header's smaller "Scan your site" was coral two inches above it. */
.scan-btn {
  font-family: var(--font); font-size: 0.84rem; font-weight: 700;
  color: white; background: var(--coral);
  padding: 0.6rem 1.4rem; border-radius: 100px;
  border: none; cursor: pointer; flex-shrink: 0;
  transition: background .15s, opacity .15s, transform .1s;
}
.scan-btn:hover { background: var(--coral-hover); transform: translateY(-1px); }
.scan-btn:disabled { opacity: 0.45; cursor: default; transform: none; }

.scan-hint {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
  margin-top: 0.8rem;
}

.scan-error {
  font-size: 0.8rem; color: var(--coral);
  margin-top: 0.85rem;
}

.scan-status { margin-top: 1.1rem; }

.scan-progress {
  height: 2px; background: var(--stone); border-radius: 2px; overflow: hidden;
  max-width: 420px; margin: 0 auto;
}
.scan-progress-fill {
  height: 100%; width: 0%; background: var(--accent); border-radius: 2px;
  transition: width .5s linear;
}

.scan-status-line {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--accent);
  margin-top: 0.75rem;
}

/* Focus mode: from the moment a scan starts, the rest of the hero recedes
   and the scan is the page — the visitor is entering onboarding. */
.hero-rest {
  max-height: 900px;
  transition: opacity .45s ease, transform .45s ease, max-height .6s ease;
}
.hero.scan-focus .hero-rest,
.hero.scan-focus .hero-ai-tag {
  animation: none;
  opacity: 0; transform: translateY(14px);
  max-height: 0; overflow: hidden; pointer-events: none;
  margin-bottom: 0;
}

.scan-result {
  margin-top: 2.75rem;
  text-align: left;
  animation: fadeUp .5s ease;
}

.scan-result-meta {
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  color: var(--ink-faint); letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
}

.scan-facts {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mid);
  display: flex; flex-wrap: wrap; gap: 0.4rem 0;
  margin-bottom: 1.5rem;
}
.scan-facts span + span::before { content: '·'; margin: 0 0.6rem; color: var(--ink-faint); }

.scan-lead {
  font-size: 0.95rem; color: var(--ink-mid);
  margin: 1.5rem 0 0.6rem;
}

.scan-guess {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.3; color: var(--ink);
}

.scan-signals {
  list-style: none; margin: 1.25rem 0 0;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.scan-signals li {
  position: relative; padding-left: 1.15rem;
  font-size: 0.86rem; color: var(--ink-mid); line-height: 1.6;
}
.scan-signals li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint);
}

.scan-cta-row {
  margin-top: 1.6rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.scan-result .scan-cta-row { border-top: none; padding-top: 0; margin-top: 2rem; }
.scan-cta-note {
  font-size: 0.75rem; color: var(--ink-faint); line-height: 1.5;
  max-width: 220px; text-align: left;
}

.scan-fallback { margin-top: 1.25rem; }
.scan-fallback-msg {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mid);
  margin-bottom: 1.25rem;
}

/* ── SHARED SECTION ── */
.section { padding: 5rem 2.5rem; }
.inner { max-width: 1060px; margin: 0 auto; }

/* One idea per screen (#80): a huge statement, one graphic, micro-copy. */
.section-big {
  padding: 7rem 2.5rem;
  display: flex; flex-direction: column; align-items: center;
  border-bottom: 1px solid var(--border);
}

.sec-big {
  font-size: clamp(2.2rem, 4.8vw, 3.5rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.035em;
  text-align: center;
}

.sec-mid {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
  text-align: center;
}

.sec-sub {
  font-size: 1.02rem; color: var(--ink-mid); line-height: 1.6;
  margin-top: 1.1rem; text-align: center; max-width: 560px;
}

.tag {
  display: inline-block;
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--stone); color: var(--ink-mid);
  padding: 0.22rem 0.65rem; border-radius: 4px;
  margin-bottom: 1.1rem;
}

.section-h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.035em;
  max-width: 580px;
}

/* ── NAME A COMPANY — the run card, centered ── */
.termsec { background: var(--off-white); }
.termwrap { width: 100%; max-width: 860px; margin-top: 2.5rem; }

/* ── BUILD ANIMATION CARD ── */
.build-card {
  background: var(--ink);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(26,26,24,0.18);
}

.build-titlebar {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.03);
}

.ttdot { width: 8px; height: 8px; border-radius: 50%; }

.build-filename {
  font-family: var(--mono); font-size: 0.65rem;
  color: rgba(255,255,255,0.3); margin-left: 0.4rem;
}

.build-body { padding: 1.25rem; }

/* Animated code lines */
.code-lines { display: flex; flex-direction: column; gap: 0; }

.cl {
  display: flex; gap: 0.75rem;
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.9;
  opacity: 0; transition: opacity .4s ease;
}
.cl.show { opacity: 1; }

.ln { color: rgba(255,255,255,0.12); min-width: 1.2rem; text-align: right; user-select: none; }
.kw { color: #7dd3fc; }
.str { color: #86efac; }
.fn { color: #fde68a; }
.cm { color: rgba(255,255,255,0.22); }
.ac { color: #6ee7b7; }  /* accent green */
.tx { color: rgba(255,255,255,0.65); }
.pu { color: rgba(255,255,255,0.45); }

/* Progress footer */
.build-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

.build-progress-label {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.62rem;
  color: rgba(255,255,255,0.3); margin-bottom: 0.45rem;
}

.build-bar {
  height: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden;
}

.build-fill {
  height: 100%; background: var(--accent); border-radius: 2px;
  width: 0%; transition: width 1.2s ease;
}

.build-status-row {
  display: flex; gap: 1rem; margin-top: 0.85rem; flex-wrap: wrap;
}

.bstat {
  display: flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.6rem;
  color: rgba(255,255,255,0.3);
}
.bstat.done { color: var(--accent); }
.bstat.active { color: #fde68a; }

.bstat-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
}
.bstat.active .bstat-dot { animation: pulse 1s infinite; }

/* ── ONE LIST IN (dark band) ── */
.batch { background: var(--ink); border-bottom: none; }
.batch .sec-big { color: var(--off-white); }
.batch .sec-sub { color: var(--ink-faint); }

.batch-flow {
  display: flex; align-items: center; gap: 1.75rem;
  margin-top: 2.75rem; flex-wrap: wrap; justify-content: center;
}
.batch-arrow { flex-shrink: 0; }

.batch-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 1.6rem 2.1rem;
  display: flex; flex-direction: column; gap: 0.35rem; text-align: center;
}
.batch-card.is-out {
  background: rgba(0,179,126,0.12); border-color: rgba(0,179,126,0.35);
}
.batch-label {
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint);
}
.batch-card.is-out .batch-label { color: var(--accent); }
.batch-num {
  font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; color: var(--off-white);
}
.batch-num em {
  font-style: normal; font-size: 1.02rem; font-weight: 600; color: var(--ink-faint);
}

/* ── WARM PATHS ── */
.warm-flow {
  display: flex; align-items: center; gap: 1.1rem;
  margin-top: 2.75rem; flex-wrap: wrap; justify-content: center;
}
.warm-arrow { color: var(--ink-faint); flex-shrink: 0; }

.warm-chip {
  display: flex; flex-direction: column; align-items: center; gap: 0.05rem;
  background: var(--off-white); border: 1px solid var(--border);
  border-radius: 100px; padding: 0.85rem 1.75rem;
  font-size: 1rem; font-weight: 700; text-align: center;
}
.warm-chip em { font-style: normal; font-size: 0.74rem; font-weight: 500; color: var(--ink-mid); }
.warm-chip.is-connector { background: var(--accent-bg); border-color: rgba(0,179,126,0.35); }
.warm-chip.is-target { background: var(--ink); color: var(--off-white); border-color: var(--ink); }

/* ── FAQ ── */
.faq { border-bottom: none; }
.faq-list {
  width: 100%; max-width: 720px; margin-top: 2.25rem;
  border-top: 1px solid var(--border);
}
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 0.35rem;
  font-size: 1rem; font-weight: 600;
  cursor: pointer; list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { color: var(--ink-faint); flex-shrink: 0; transition: transform .2s; }
.faq-list details[open] summary svg { transform: rotate(180deg); }
.faq-list details p {
  padding: 0 0.35rem 1.3rem;
  font-size: 0.9rem; color: var(--ink-mid); line-height: 1.7;
  max-width: 620px;
}
.faq-list details p a { color: var(--ink); border-bottom: 1px solid var(--accent); text-decoration: none; }

/* ── ONBOARDING (/checkout/) ── */
.onboard {
  min-height: 100vh; background: var(--off-white);
  padding: 7.5rem 2rem 5rem;
}
.onboard [hidden] { display: none !important; }
.onboard-inner { max-width: 640px; margin: 0 auto; }

.steps {
  list-style: none; display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3rem;
}
.step { display: flex; align-items: center; gap: 0.5rem; }
.step-n-badge {
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62rem;
}
.step.done { color: var(--accent); }
.step.done .step-n-badge { border-color: var(--accent); }
.step.active { color: var(--ink); }
.step.active .step-n-badge { border-color: var(--ink); background: var(--ink); color: var(--white); }

.onboard-h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
  margin: 0.75rem 0 0;
}
.onboard-sub {
  font-size: 0.92rem; color: var(--ink-mid); line-height: 1.7;
  margin-top: 0.9rem; max-width: 540px;
}
.onboard-sub a { color: var(--ink); border-bottom: 1px solid var(--accent); text-decoration: none; }

.goal-input {
  width: 100%; margin-top: 1.5rem;
  font-family: var(--font); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.5; color: var(--ink);
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.25rem 1.4rem; resize: vertical; outline: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.goal-input:focus { border-color: var(--accent); }

.onboard-actions {
  margin-top: 1.75rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.onboard-back {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mid);
  background: none; border: none; cursor: pointer; text-decoration: none;
  padding: 0;
}
.onboard-back:hover { color: var(--ink); }

.order-card {
  margin-top: 1.5rem; padding: 1.75rem;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.order-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.1rem;
}
.order-name { font-size: 0.9rem; font-weight: 700; }
.order-price { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.order-per { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; color: var(--ink-faint); margin-left: 0.15rem; }
.order-card .pricing-list { margin-top: 0; }

.onboard-note {
  margin-top: 1.25rem; padding: 1.1rem 1.35rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--white);
}
.onboard-note p { font-size: 0.85rem; color: var(--ink-mid); line-height: 1.65; }
.onboard-note strong { color: var(--ink); }

.reserve-form {
  margin-top: 1.5rem; position: relative;
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}
.reserve-input {
  flex: 1; min-width: 220px;
  font-family: var(--mono); font-size: 0.88rem; font-weight: 500;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--border); border-radius: 100px;
  padding: 0.8rem 1.3rem; outline: none;
}
.reserve-input:focus { border-color: var(--accent); }
.reserve-input::placeholder { color: var(--ink-faint); }

.reserve-msg {
  margin-top: 1rem; font-size: 0.85rem; color: var(--ink);
}
.reserve-msg.is-error { color: var(--ink-mid); }
.reserve-msg a { color: var(--ink); border-bottom: 1px solid var(--accent); text-decoration: none; }

/* ── PRICING: the direct buy ── */
/* Mirrors .scan-cta-row's rule-above-the-CTA so the tile reads the same
   whether the visitor gets the pay form or the /checkout/ fallback link. */
.buy {
  margin-top: 1.6rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.buy .reserve-form { margin-top: 0; }
.buy-site { margin-top: 0.75rem; width: 100%; flex-basis: 100%; }
.buy .reserve-msg { margin-top: 0.9rem; font-size: 0.82rem; line-height: 1.55; }
.buy-note {
  font-size: 0.75rem; color: var(--ink-faint);
  line-height: 1.6; margin-top: 0.9rem;
}
.buy-note a { color: var(--ink-mid); border-bottom: 1px solid var(--border); text-decoration: none; }
.buy-note a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ── PRICING ── */
.pricing { background: var(--off-white); }

.pricing-card {
  width: 100%; max-width: 620px; margin-top: 2.5rem;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--white); box-shadow: 0 16px 40px rgba(26,26,24,0.07);
  padding: 2.75rem 3rem;
}

.price-row { display: flex; align-items: baseline; gap: 0.6rem; }

.price-num {
  font-size: 4rem; font-weight: 800; letter-spacing: -0.04em;
  color: var(--ink); line-height: 1;
}

.price-line {
  margin-top: 1.4rem;
  font-size: 0.94rem; color: var(--ink-mid); line-height: 1.6;
}

.price-per {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  color: var(--ink-faint);
}

.pricing-list {
  list-style: none; margin: 1.5rem 0 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.pricing-list li {
  position: relative; padding-left: 1.15rem;
  font-size: 0.85rem; color: var(--ink-mid); line-height: 1.6;
}
.pricing-list li::before {
  content: ''; position: absolute; left: 0; top: 0.58em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* ── CTA ── */
.cta { background: var(--off-white); border-top: 1px solid var(--border); padding: 7rem 2.5rem; text-align: center; }

.cta h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1.05;
  max-width: 680px; margin: 0 auto 2rem;
}
.cta h2 .accent { color: var(--accent); }

/* ── FOOTER ── */
footer {
  background: var(--ink); color: rgba(255,255,255,0.35);
  /* The consent bar (#143) is fixed to the bottom of the viewport and
     publishes its own height as --ppsc-inset on <html>. The footer is the last
     thing on the page, so a visitor scrolled to the end reads it through the
     bar — and the link the bar's own panel tells them to use, Cookies, is one
     of the ones underneath. Stepping over the inset is the website's half of
     that contract; the studio's support panel does the same. It costs nothing
     when the bar is gone: the variable is 0px, or absent and defaulted. */
  padding: 1.5rem 2.5rem calc(1.5rem + var(--ppsc-inset, 0px));
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.76rem; flex-wrap: wrap; gap: 0.75rem;
}
.footer-logo {
  font-size: 0.88rem; font-weight: 800; color: white;
  text-decoration: none; display: flex; align-items: center; gap: 7px;
  letter-spacing: -0.02em;
}
.footer-tagline { font-family: var(--mono); font-size: 0.65rem; color: var(--accent); }

.footer-links {
  display: flex; gap: 1.25rem; list-style: none;
}
.footer-links a { color: rgba(255,255,255,0.35); text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: white; }

/* ── LEGAL PAGES ── */
.legal-hero {
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  padding: 8.5rem 2.5rem 3.25rem;
}

.legal-inner { max-width: 720px; margin: 0 auto; }

.legal-h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.04em;
}

.legal-lede {
  font-size: 0.95rem; color: var(--ink-mid); line-height: 1.75;
  margin-top: 1.15rem;
}

.legal-meta {
  margin-top: 1.75rem;
  font-family: var(--mono); font-size: 0.67rem; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.legal-meta a { color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid var(--accent); }
.legal-meta a:hover { color: var(--ink); }

.legal { background: var(--white); padding: 3rem 2.5rem 5rem; }

/* Contents */
.legal-toc {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
  padding-bottom: 2.5rem;
}
.legal-toc-label {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 0.75rem;
}
.legal-toc a {
  display: flex; gap: 0.75rem; align-items: baseline;
  font-size: 0.82rem; color: var(--ink-mid); text-decoration: none;
  padding: 0.32rem 0; transition: color .15s;
}
.legal-toc a:hover { color: var(--ink); }
.legal-toc-n { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-faint); }

/* Numbered blocks */
.legal-block {
  display: grid; grid-template-columns: 3rem 1fr;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 74px;
}
.legal-block:first-of-type { border-top: 1px solid var(--border); }

.legal-n {
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  color: var(--ink-faint); padding-top: 0.35rem;
}

.legal-block h2 {
  font-size: 1.08rem; font-weight: 700;
  letter-spacing: -0.02em; margin-bottom: 0.85rem;
}
.legal-block h3 {
  font-size: 0.86rem; font-weight: 700;
  margin: 1.6rem 0 0.5rem; letter-spacing: -0.01em;
}
.legal-block p { font-size: 0.88rem; color: var(--ink-mid); line-height: 1.75; }
.legal-block p + p { margin-top: 0.85rem; }
.legal-block strong { color: var(--ink); font-weight: 700; }
.legal-block code {
  font-family: var(--mono); font-size: 0.78em;
  background: var(--stone); color: var(--ink);
  padding: 0.1rem 0.35rem; border-radius: 4px;
}
.legal-block a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.legal-block a:hover { color: var(--accent-dim); }

.legal-list { list-style: none; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; }
.legal-list li {
  position: relative; padding-left: 1.15rem;
  font-size: 0.86rem; color: var(--ink-mid); line-height: 1.7;
}
.legal-list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.legal-list + p,
.legal-table-wrap + p,
.legal-note + p { margin-top: 1.1rem; }

/* Callout */
.legal-note {
  margin-top: 1.35rem; padding: 1.1rem 1.35rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--off-white);
  display: flex; gap: 1rem; align-items: flex-start;
}
.legal-note-tag {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  color: var(--ink-faint); white-space: nowrap; padding-top: 0.2rem;
}
.legal-note p { font-size: 0.83rem; }

/* Table */
.legal-table-wrap {
  margin-top: 1.2rem;
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; overflow-x: auto;
}
.legal-table { width: 100%; border-collapse: collapse; min-width: 460px; }
.legal-table th {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  text-align: left; padding: 0.7rem 1rem;
  background: var(--off-white); border-bottom: 1px solid var(--border);
}
.legal-table td {
  padding: 0.85rem 1rem; font-size: 0.82rem;
  color: var(--ink-mid); line-height: 1.65;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.legal-table tr:last-child td { border-bottom: none; }
.legal-table td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* Footer of a legal page */
.legal-end {
  margin-top: 2.5rem; padding: 1.35rem 1.5rem;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--off-white);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 1.5rem;
}
.legal-end-label {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
}
.legal-end a {
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--accent);
}
.legal-end a:hover { color: var(--accent-dim); }

/* ── HELP CENTER ── */
.help-hero {
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  padding: 8.5rem 2.5rem 3.5rem;
  text-align: center;
}
.help-hero-inner { max-width: 640px; margin: 0 auto; }
.help-h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.04em;
  margin-top: 1rem;
}
.help-lede {
  font-size: 0.95rem; color: var(--ink-mid); line-height: 1.75;
  margin-top: 1.15rem;
}
.help-search {
  margin: 2rem auto 0; max-width: 540px;
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 100px; padding: 0.85rem 1.4rem;
  box-shadow: 0 8px 30px rgba(26,26,24,0.06);
  transition: border-color .15s, box-shadow .15s;
}
.help-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 8px 30px rgba(0,179,126,0.12);
}
.help-search svg { width: 16px; height: 16px; color: var(--ink-faint); flex-shrink: 0; }
.help-search input {
  flex: 1; border: none; outline: none; background: none;
  font-family: var(--font); font-size: 0.92rem; color: var(--ink);
}
.help-search input::placeholder { color: var(--ink-faint); }

/* The hub replaces the sidebar-of-documents (#145). The cards are the
   navigation now, so .help-body / .help-columns / .help-sidenav are gone —
   what was a 230px rail of filenames is a grid of what each guide is for. */
.help-hub { max-width: 1080px; margin: 0 auto; padding: 3.5rem 2.5rem 1rem; scroll-margin-top: 74px; }

/* Every guide, stacked and in the served HTML (#136). A crawler was being
   handed the word "Loading…"; now it is handed all ten. */
.help-guides { max-width: 760px; margin: 0 auto; padding: 1.5rem 2.5rem 4rem; }
/* On the hub this element is normally empty since #166 — it holds only guides
   the studio has added since the last build. Empty, it must take no room, or
   the hub carries a 5.5rem gap between the cards and the FAQ for nothing. */
.help-guides:empty { padding: 0; }
.help-guide {
  padding-top: 3rem; margin-top: 3rem;
  border-top: 1px solid var(--border); scroll-margin-top: 74px;
}
.help-guide:first-child { border-top: none; margin-top: 0; padding-top: 1rem; }
.help-guide-topic {
  display: block; font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-dim);
  margin-bottom: 0.75rem;
}
/* The guide's own title. render() emits it as an h2 so the document keeps a
   single h1 — the page's question — with the guides stacked under it.

   Scoped away from `.help-guides-single` since #166: on /help/<slug>/ the
   title IS the page's h1 and bodyOf() has taken it out of the body, so the
   first h2 there is a real section heading and dressing it as a title would
   make the second section look like the start of the guide. */
.help-guides:not(.help-guides-single) .help-guide > h2:first-of-type {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.15; margin: 0 0 1.25rem; padding-top: 0; border-top: none;
}
.help-guide-top {
  display: inline-block; margin-top: 1.75rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--ink-faint); text-decoration: none;
}
.help-guide-top:hover { color: var(--ink-mid); }

.help-guide h1 {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.15; margin-bottom: 1.25rem;
}
.help-guide h2 {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em;
  margin: 2.1rem 0 0.75rem; padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: 74px;
}
.help-guide h3 {
  font-size: 0.88rem; font-weight: 700; margin: 1.5rem 0 0.5rem;
  scroll-margin-top: 74px;
}
.help-guide p { font-size: 0.89rem; color: var(--ink-mid); line-height: 1.75; }
.help-guide p + p { margin-top: 0.85rem; }
.help-guide strong { color: var(--ink); font-weight: 700; }
.help-guide em { color: var(--ink); }
.help-guide code {
  font-family: var(--mono); font-size: 0.78em;
  background: var(--stone); color: var(--ink);
  padding: 0.1rem 0.35rem; border-radius: 4px;
}
.help-guide a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.help-guide a:hover { color: var(--accent-dim); }
.help-guide ul, .help-guide ol { margin: 0.9rem 0 0 0; display: flex; flex-direction: column; gap: 0.55rem; }
.help-guide ul { list-style: none; }
.help-guide ol { padding-left: 1.3rem; }
.help-guide li { font-size: 0.87rem; color: var(--ink-mid); line-height: 1.7; }
.help-guide ul > li { position: relative; padding-left: 1.15rem; }
.help-guide ul > li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.help-guide li ul, .help-guide li ol { margin-top: 0.55rem; }
.help-guide ul + p, .help-guide ol + p, .help-table-wrap + p { margin-top: 1.1rem; }
.help-flash { animation: helpFlash 1.6s ease; }
@keyframes helpFlash {
  0% { background: var(--accent-bg); }
  100% { background: transparent; }
}

.help-table-wrap {
  margin-top: 1.2rem;
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; overflow-x: auto;
}
.help-table-wrap table { width: 100%; border-collapse: collapse; min-width: 460px; }
.help-table-wrap th {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
  text-align: left; padding: 0.7rem 1rem;
  background: var(--off-white); border-bottom: 1px solid var(--border);
}
.help-table-wrap td {
  padding: 0.85rem 1rem; font-size: 0.82rem;
  color: var(--ink-mid); line-height: 1.65;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.help-table-wrap tr:last-child td { border-bottom: none; }
.help-table-wrap td:first-child { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* Top-level now rather than a column of the old two-column layout, so it
   carries its own measure. */
.help-results {
  display: flex; flex-direction: column; gap: 1.5rem;
  max-width: 760px; margin: 0 auto; padding: 2.5rem 2.5rem 1rem;
}
.help-hit { display: flex; flex-direction: column; gap: 0.4rem; }
.help-hit-title {
  font-size: 1rem; font-weight: 700; color: var(--ink);
  text-decoration: none; letter-spacing: -0.02em;
}
.help-hit-title:hover { color: var(--accent-dim); }
.help-hit-snippet {
  display: block; padding: 0.75rem 1rem;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 0.82rem; color: var(--ink-mid); line-height: 1.65;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.help-hit-snippet:hover { border-color: var(--accent); background: var(--accent-bg); }
.help-hit-heading {
  display: block;
  font-family: var(--mono); font-size: 0.62rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem;
}
.help-results mark { background: var(--accent-bg); color: var(--accent-dim); font-weight: 700; padding: 0 0.1em; border-radius: 3px; }
.help-dim { font-size: 0.85rem; color: var(--ink-faint); line-height: 1.7; }
.help-retry {
  font-family: var(--font); font-size: 0.82rem; font-weight: 700;
  color: white; background: var(--ink); border: none; cursor: pointer;
  padding: 0.55rem 1.3rem; border-radius: 100px;
  transition: background .15s;
}
.help-retry:hover { background: var(--ink-mid); }

/* ── the FAQ block, and the "ask a person" footer ──
   Both come from the pmc.splitpay.com/help shape the ask pointed at: cards,
   then frequently asked questions, then a way to reach a human. */
.help-faq { background: var(--off-white); border-top: 1px solid var(--border); padding: 4rem 0; }
.help-faq-inner { max-width: 760px; margin: 0 auto; padding: 0 2.5rem; }
.help-faq-h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 2rem;
}
.help-faq-item { border-top: 1px solid var(--border); padding: 1.4rem 0; }
.help-faq-item:first-child { border-top: none; padding-top: 0; }
.help-faq-item dt { font-size: 0.95rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.help-faq-item dd { font-size: 0.88rem; color: var(--ink-mid); line-height: 1.75; margin: 0.6rem 0 0; }
.help-faq-item dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); font-weight: 600; }
.help-faq-item dd a:hover { color: var(--accent-dim); }

.help-support { border-top: 1px solid var(--border); background: var(--white); padding: 4rem 0; text-align: center; }
.help-support-inner { max-width: 560px; margin: 0 auto; padding: 0 2.5rem; }
.help-support-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.12; margin-top: 1rem;
}
.help-support-inner p { font-size: 0.92rem; color: var(--ink-mid); line-height: 1.7; margin: 1rem 0 1.75rem; }
.help-support-alt { margin-top: 1.5rem !important; margin-bottom: 0 !important; }
.help-support-alt a { color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.help-support-alt a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* Search-result trimmings the hub adds: the guide's emoji beside its title,
   and the line that owns up to a partial match instead of implying a full one. */
/* ── one guide, on its own URL (#166) ──
   The hero, the h1 and the dek are grouped onto `.res-hero`'s rules above
   rather than restated, so an article and a guide page cannot drift apart.
   These three are all this page needs beyond that. */
.help-guides-single { padding-top: 3rem; }
/* Whatever the guide opens with sits directly under the hero — no rule, no
   gap held for a title that is now the <h1> two elements up. */
.help-guides-single .help-guide > *:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
}
.help-more { border-top: 1px solid var(--border); background: var(--off-white); padding: 3rem 0 3.5rem; }
.help-more-inner { max-width: 760px; margin: 0 auto; padding: 0 2.5rem; }
.help-more-all { margin-top: 1.5rem; }
.help-more-all a { color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid var(--accent); }
.help-more-all a:hover { color: var(--ink); }

.help-hit-emoji { margin-right: 0.5rem; }
.help-results-note { margin-bottom: 1.25rem; }

@media (max-width: 860px) {
  .help-hero { padding: 6rem 1.25rem 2.5rem; }
  .help-hub { padding: 2.25rem 1.25rem 0.5rem; }
  .help-guides { padding: 1rem 1.25rem 3rem; }
  .help-faq-inner, .help-support-inner { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  nav { padding: 0 1.25rem; }
  .nav-links, .nav-ai-badge { display: none; }
  .hero { padding: 5rem 1.25rem 4rem; }
  .scan-hero { max-width: 100%; }
  .section { padding: 4rem 1.25rem; }
  .section-big { padding: 4.5rem 1.25rem; }
  .batch-flow { flex-direction: column; gap: 1rem; }
  .batch-arrow { transform: rotate(90deg); }
  .warm-flow { flex-direction: column; gap: 0.6rem; }
  .warm-arrow { transform: rotate(90deg); }
  .legal-hero { padding: 6rem 1.25rem 2.5rem; }
  .legal { padding: 2.5rem 1.25rem 4rem; }
  .legal-toc { grid-template-columns: 1fr; }
  .legal-block { grid-template-columns: 1fr; }
  .legal-n { padding-top: 0; margin-bottom: 0.5rem; }
}

@media (max-width: 480px) {
  .scan-form-label { display: none; }
  .scan-form { padding-left: 1rem; }
  .pricing-card { padding: 1.5rem; }
}
/* ══ /resources/ — the lead-generation blog (#144) ══════════════════════
   Two page shapes: the card-grid hub and the article. Both reuse the
   existing tokens and .tag/.btn-cta rather than introducing a second
   visual language — this section is part of the site, not a bolt-on blog.
   The 8.5rem top padding on both heroes clears the fixed 58px nav, same as
   .help-hero, which is the precedent this section follows. */

/* ── hub ── */
.res-hub-hero, .page-hero {
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  padding: 8.5rem 2.5rem 3.5rem;
  text-align: center;
}
.res-hub-hero-inner, .page-hero-inner { max-width: 700px; margin: 0 auto; }
.res-hub-h1, .page-h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.04em;
  margin-top: 1rem; text-wrap: balance;
}
.res-hub-lede, .page-lede {
  font-size: 0.95rem; color: var(--ink-mid); line-height: 1.75;
  margin-top: 1.15rem;
}

.res-hub { max-width: 1080px; margin: 0 auto; padding: 3.5rem 2.5rem 1rem; }
/* ── THE CARD GRID — one component, two hubs ──
   #144 shipped this for /resources/ and #145 wanted the same grid for the
   /help/ hub. Rather than a second copy that drifts, the selectors are
   grouped: `.res-*` is what /resources/ already renders and `.card*` is the
   neutral name new work should use. Anything added here lands on both. */
.res-grid, .card-grid {
  list-style: none; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.res-card, .card {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--white); transition: border-color .15s, transform .1s;
}
.res-card:hover, .card:hover { border-color: var(--ink-faint); transform: translateY(-2px); }
.res-card > a, .card > a {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.5rem 1.5rem 1.35rem; text-decoration: none; height: 100%;
}
.res-card-topic, .card-topic {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-dim);
}
.res-card-title, .card-title {
  font-size: 1.08rem; font-weight: 800; line-height: 1.28;
  letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
}
.res-card-dek, .card-dek {
  font-size: 0.87rem; color: var(--ink-mid); line-height: 1.6; flex: 1;
}
/* The two the help hub adds: the emoji that makes a grid of eleven guides
   scannable, and the → that says a card is a link. */
.card-emoji { font-size: 1.35rem; line-height: 1; }
.card-cta {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent-dim); margin-top: 0.2rem;
}
.card:hover .card-cta { color: var(--accent); }
.res-card-meta {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
  margin-top: 0.35rem;
}
.res-dot { margin: 0 0.4rem; }
.res-empty { color: var(--ink-mid); text-align: center; padding: 2rem 0; }

/* ── the topic filter (#159) ──
   Ships hidden and is revealed by resources.js, so no-JS readers see the whole
   grid rather than dead buttons. `hidden` on the row and on a filtered-out card
   is the mechanism; these rules only style what survives. */
.res-filter {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.res-filter[hidden] { display: none; }
.res-chip {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-mid);
  background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.42rem 0.85rem; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.res-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.res-chip.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--white);
}
.res-chip-n { opacity: 0.55; margin-left: 0.35rem; }
.res-filter-count {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
  margin: -1.1rem 0 1.4rem;
}
.res-filter-count:empty { display: none; }
.res-card[hidden] { display: none; }

.res-hub-cta {
  border-top: 1px solid var(--border); margin-top: 3.5rem;
  background: var(--off-white); padding: 4rem 2.5rem; text-align: center;
}
.res-hub-cta-inner { max-width: 560px; margin: 0 auto; }
.res-hub-cta-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance;
}
.res-hub-cta-inner p {
  font-size: 0.92rem; color: var(--ink-mid); line-height: 1.7;
  margin: 1rem 0 1.75rem;
}

/* ── article ── */
.res-hero, .help-guide-hero {
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  padding: 8.5rem 2.5rem 3rem;
}
.res-hero-inner, .help-guide-hero-inner { max-width: 720px; margin: 0 auto; }
.res-back {
  /* Its own line above the topic tag — both are inline-level and collided. */
  display: flex; width: fit-content; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-faint);
  text-decoration: none; margin-bottom: 1.4rem;
}
.res-back:hover { color: var(--ink-mid); }
.res-back svg { width: 13px; height: 13px; }
.res-h1, .help-guide-h1 {
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  font-weight: 800; line-height: 1.09; letter-spacing: -0.04em;
  margin-top: 0.35rem; text-wrap: balance;
}
.res-dek {
  font-size: 1.02rem; color: var(--ink-mid); line-height: 1.65;
  margin-top: 1.1rem; max-width: 62ch;
}
.res-meta {
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-faint);
  margin-top: 1.5rem;
}

.res-body { max-width: 720px; margin: 0 auto; padding: 3rem 2.5rem 0; }

/* The prose block. Deliberately narrow measure and generous leading — these
   are 1,000-word arguments, not marketing sections. */
.res-prose { font-size: 1.02rem; line-height: 1.78; color: var(--ink); }
.res-prose > * + * { margin-top: 1.35rem; }
.res-prose h2 {
  font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.2; margin-top: 3rem; text-wrap: balance;
}
.res-prose h3 {
  font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em;
  margin-top: 2.2rem;
}
.res-prose ul, .res-prose ol { padding-left: 1.3rem; }
.res-prose li + li { margin-top: 0.5rem; }
.res-prose strong { font-weight: 700; }
.res-prose a { color: var(--accent-dim); text-underline-offset: 3px; }
.res-prose code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--stone); padding: 0.1em 0.35em; border-radius: 4px;
}
.res-prose blockquote {
  border-left: 3px solid var(--accent); padding-left: 1.15rem;
  color: var(--ink); font-size: 1.05rem; line-height: 1.6;
}
.res-prose blockquote p + p {
  margin-top: 0.6rem; font-family: var(--mono); font-size: 0.72rem;
  color: var(--ink-faint); letter-spacing: 0.03em;
}
.res-prose hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
.res-prose table {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
  display: block; overflow-x: auto;
}
.res-prose th, .res-prose td {
  text-align: left; padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.res-prose th {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 500;
}

/* The scan CTA every article ends at — the whole reason the section exists. */
.res-cta {
  margin-top: 3.5rem; padding: 2rem 2rem 2.25rem;
  background: var(--accent-bg); border-radius: 16px; text-align: center;
}
.res-cta .tag { background: var(--white); color: var(--accent-dim); }
.res-cta h2 {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.18; text-wrap: balance;
}
.res-cta p {
  font-size: 0.9rem; color: var(--ink-mid); line-height: 1.65;
  margin: 0.8rem auto 1.5rem; max-width: 46ch;
}
.res-cta-note {
  display: block; margin-top: 0.9rem;
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
}

.res-more { margin: 3.5rem 0 0; padding-bottom: 4rem; }
.res-more-h {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--border);
}
.res-more-list { list-style: none; }
.res-more-list li { border-bottom: 1px solid var(--border); }
.res-more-list a {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.1rem 0; text-decoration: none;
}
.res-more-title { font-weight: 700; font-size: 0.98rem; color: var(--ink); letter-spacing: -0.015em; }
.res-more-dek { font-size: 0.85rem; color: var(--ink-mid); line-height: 1.55; }
.res-more-list a:hover .res-more-title { color: var(--accent-dim); }

@media (max-width: 640px) {
  .res-hub-hero, .res-hero, .help-guide-hero { padding: 7rem 1.4rem 2.5rem; }
  .res-hub, .res-body { padding-left: 1.4rem; padding-right: 1.4rem; }
  .res-hub-cta { padding: 3rem 1.4rem; }
  .res-cta { padding: 1.6rem 1.3rem 1.9rem; }
}

/* ══ #153 — the WHO/WHAT reframe, and the pages the nav used to fake ═════
   Three of the five nav items were same-page anchors. `/who-to-pitch/`,
   `/what-to-send/` and `/pricing/` are real pages now, and the homepage's
   flat grid of four verbs became two labelled halves.

   Nothing here invents a second visual language: the page heroes are grouped
   onto `.res-hub-hero`'s rules (added at that selector, not copied), the
   deliverables grid is the `.card` component #144 shipped and #145 reused,
   and everything else is tokens. Same 8.5rem hero top padding as
   `.help-hero` and `.res-hub-hero`, which is what clears the fixed 58px nav. */

/* ── the marketing page hero (shares .res-hub-hero's rules above) ── */
.page-hero-actions {
  display: flex; gap: 0.85rem; justify-content: center;
  flex-wrap: wrap; margin-top: 1.9rem;
}

/* ── THE TWO HALVES (homepage) ──
   A two-up that must never read as "basic tier / better tier": both halves
   are the product. The dark one is the WHAT, because that is the half
   somebody is paying for and the eye should land there second and stay. */
.halves-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  width: 100%; max-width: 1060px; margin-top: 2.75rem;
  text-align: left;
}

.half {
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--white); padding: 2rem 1.9rem 1.75rem;
  display: flex; flex-direction: column;
}

.half.is-dark {
  background: var(--ink); border-color: var(--ink);
  color: var(--off-white);
}

.half-head { display: flex; align-items: center; gap: 0.7rem; }

.half-n {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  color: var(--ink-faint);
}
.half.is-dark .half-n { color: rgba(255,255,255,0.35); }

.half-kicker {
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-dim);
  background: var(--accent-bg); border: 1px solid rgba(0,179,126,0.2);
  padding: 0.22rem 0.6rem; border-radius: 100px;
}
.half.is-dark .half-kicker {
  color: var(--accent); background: rgba(0,179,126,0.12);
  border-color: rgba(0,179,126,0.3);
}

.half-h {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.2; margin-top: 1.1rem; text-wrap: balance;
}

.half-lede {
  font-size: 0.9rem; color: var(--ink-mid); line-height: 1.7;
  margin-top: 0.8rem;
}
.half.is-dark .half-lede { color: rgba(255,255,255,0.6); }

.half-verbs {
  list-style: none; margin-top: 1.5rem;
  display: flex; flex-direction: column; gap: 0.9rem;
  padding-top: 1.4rem; border-top: 1px solid var(--border);
}
.half.is-dark .half-verbs { border-top-color: rgba(255,255,255,0.12); }

.half-verbs li { display: flex; align-items: flex-start; gap: 0.75rem; }
.half-verbs svg { color: var(--ink); flex-shrink: 0; margin-top: 1px; }
.half.is-dark .half-verbs svg { color: var(--accent); }
.half-verbs span { font-size: 0.87rem; color: var(--ink-mid); line-height: 1.6; }
.half-verbs strong { color: var(--ink); font-weight: 700; }
.half.is-dark .half-verbs span { color: rgba(255,255,255,0.6); }
.half.is-dark .half-verbs strong { color: var(--off-white); }

/* margin-top:auto keeps the two links on the same baseline when one half's
   copy runs a line longer than the other's. */
.half-link {
  margin-top: auto; padding-top: 1.5rem;
  font-size: 0.87rem; font-weight: 700; color: var(--coral);
  text-decoration: none; transition: color .15s;
}
.half-link:hover { color: var(--coral-hover); }
.half.is-dark .half-link { color: var(--accent); }
.half.is-dark .half-link:hover { color: #6ee7b7; }

.half-foot {
  font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint);
  margin-top: 0.55rem;
}
.half.is-dark .half-foot { color: rgba(255,255,255,0.35); }

/* ── THE NUMBERED FLOW (/who-to-pitch/, /what-to-send/) ── */
.flow { background: var(--white); padding: 4.5rem 2.5rem 1rem; }
.flow-inner { max-width: 720px; margin: 0 auto; }

.flowstep {
  display: grid; grid-template-columns: 3.5rem 1fr;
  border-top: 1px solid var(--border); padding: 2.5rem 0;
}
.flowstep:first-child { border-top: none; padding-top: 0.5rem; }

.flowstep-n {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  color: var(--accent-dim); padding-top: 0.35rem;
}

.flowstep-body h2 {
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.22; text-wrap: balance;
}
.flowstep-body p {
  font-size: 0.92rem; color: var(--ink-mid); line-height: 1.78;
  margin-top: 0.9rem;
}
.flowstep-body strong { color: var(--ink); font-weight: 700; }
.flowstep-body em { color: var(--ink); font-style: normal; font-weight: 600; }

.flowstep-proof {
  font-family: var(--mono); font-size: 0.72rem !important;
  line-height: 1.65 !important; color: var(--ink-faint) !important;
  border-left: 2px solid var(--accent); padding-left: 0.85rem;
  margin-top: 1.35rem !important;
}

/* ── THE CLOSING SPLIT (both product pages) ── */
.page-split {
  background: var(--off-white); border-top: 1px solid var(--border);
  margin-top: 4rem; padding: 4.5rem 2.5rem; text-align: center;
}
.page-split-inner { max-width: 620px; margin: 0 auto; }
.page-split-inner h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.14;
  margin-top: 1rem; text-wrap: balance;
}
.page-split-inner p {
  font-size: 0.93rem; color: var(--ink-mid); line-height: 1.75;
  margin-top: 1.1rem;
}
.page-split-inner .btn-cta { margin-top: 1.9rem; }

/* ── WHAT COMES OUT OF A RUN (/what-to-send/) ──
   .card without an <a>: the six deliverables are facts, not destinations. */
.deliverables { padding: 4.5rem 2.5rem 0; }
.deliverables-inner { max-width: 1080px; margin: 0 auto; }
.deliverables .sec-mid { text-align: center; margin-bottom: 2.25rem; }
.card > .card-body {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.5rem 1.5rem 1.35rem; height: 100%;
}
.card.is-static:hover { transform: none; border-color: var(--border); }

/* ── /pricing/ ── */
.pricing-page { border-top: none; padding-top: 3.5rem; }
.pricing-page .pricing-card { margin: 0 auto; }
.pricing-page .pricing-list { margin-top: 1.6rem; }
.pricing-page .buy { margin-top: 1.9rem; }

.pricing-faq { background: var(--white); padding: 4.5rem 2.5rem; }
.pricing-faq-inner { max-width: 720px; margin: 0 auto; }
.pricing-faq .sec-mid { text-align: center; margin-bottom: 2rem; }
.pricing-faq-item { border-top: 1px solid var(--border); padding: 1.5rem 0; }
.pricing-faq-item:first-child { border-top: none; }
.pricing-faq-item dt {
  font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.015em;
}
.pricing-faq-item dd {
  font-size: 0.9rem; color: var(--ink-mid); line-height: 1.78; margin: 0.6rem 0 0;
}
.pricing-faq-item dd em { color: var(--ink); font-style: normal; font-weight: 600; }
.pricing-faq-item dd a {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--accent); font-weight: 600;
}
.pricing-faq-item dd a:hover { color: var(--accent-dim); }

/* The mobile header. `.nav-links` is display:none above 860px in the base
   rules; here it becomes a panel under the bar, opened by .nav-toggle. Every
   override in this block sits AFTER the base rules on purpose — media queries
   add no specificity, so a responsive rule declared earlier in the file loses
   to a later base rule. The two-up halves lost exactly that way once. */
.nav-toggle {
  display: none; background: none; border: none; padding: 0.35rem;
  color: var(--ink-mid); cursor: pointer; line-height: 0;
}
.nav-toggle .nav-toggle-x,
.nav-toggle[aria-expanded="true"] svg:first-of-type { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-x { display: block; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-signin { display: none; }
  /* The bar is 58px; the panel hangs off its bottom edge. */
  .nav-links {
    display: none;
    position: absolute; top: 58px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0.35rem 1.25rem 0.9rem;
    font-size: 0.95rem;
    max-height: calc(100vh - 58px); overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { border-top: 1px solid var(--border); }
  .nav-links li:first-child { border-top: none; }
  .nav-links a { display: block; padding: 0.85rem 0; font-weight: 600; color: var(--ink); }

  .halves-grid { grid-template-columns: 1fr; gap: 1rem; }
  .page-hero { padding: 8rem 1.25rem 3rem; }
  .flow { padding: 3.5rem 1.25rem 0; }
  .flowstep { grid-template-columns: 1fr; }
  .flowstep-n { padding-top: 0; margin-bottom: 0.5rem; }
  .page-split { padding: 3.5rem 1.25rem; }
  .deliverables { padding: 3.5rem 1.25rem 0; }
  .pricing-faq { padding: 3.5rem 1.25rem; }
  .half { padding: 1.6rem 1.4rem 1.4rem; }
}