/* Honest Pitches — Site-wide styles */

/* ─── CSS Custom Properties ─────────────────────────────────────────── */
:root {
  /* Infomercial rebel palette — red/black/cream (not generic SaaS blue) */
  --hp-primary: #e51923;
  --hp-primary-dark: #b8141c;
  --hp-accent: #f5f0e1;
  --hp-gold: #f5c400;
  --hp-success: #16a34a;
  --hp-warning: #d97706;
  --hp-danger: #dc2626;
  --hp-hype: #f59e0b;
  --hp-reality: #10b981;
  --hp-bg: #f5f0e1;
  --hp-surface: #ffffff;
  --hp-border: #1a1a1a;
  --hp-text: #0a0a0a;
  --hp-text-muted: #4a4a4a;
}

/* ─── Base reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--hp-bg);
  color: var(--hp-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--hp-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Layout ───────────────────────────────────────────────────────── */
.home-page,
.pitches-page,
.creator-page,
.legal-page,
.report-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* ─── Site chrome (sub-header / sub-nav / sub-footer) ────────────────
   Shared by the home page and every subpage. Quiet on purpose: this
   is navigation, not theatre. The per-page hero carries the mood.    */
.sub-header {
  background: var(--hp-bg);
  border-bottom: 1px solid var(--hp-border);
  position: relative; /* anchors the absolutely-positioned mobile nav panel */
}
.sub-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.sub-logo {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: var(--hp-text);
  text-decoration: none;
  line-height: 1;
}
.sub-logo span { color: var(--hp-gold); }
.sub-logo:hover { text-decoration: none; }

/* ─── Mobile nav toggle (hamburger) — hidden above 768px ────────────
   2026-06-20 (mobile responsiveness): the hamburger appears below
   the de facto mobile cutoff (Tailwind `md` / Bootstrap `md` =
   768px). Above 768px the toggle is hidden via `display: none` and
   the inline `.sub-nav` is rendered as the always-visible flex row.
   Below 768px the toggle is the only visible affordance and the
   nav slides down as a panel. The bars are pure CSS (no SVG / no
   font-icon dependency). */
.sub-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--hp-text);
  border: 1px solid var(--hp-border);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sub-nav-toggle:hover {
  background: var(--hp-surface);
}
.sub-nav-toggle:focus-visible {
  outline: 2px solid var(--hp-primary);
  outline-offset: 2px;
}
.sub-nav-toggle-bars {
  display: inline-block;
  width: 22px;
  height: 16px;
  position: relative;
}
.sub-nav-toggle-bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 160ms ease, opacity 120ms ease, top 160ms ease;
}
.sub-nav-toggle-bars span:nth-child(1) { top: 0; }
.sub-nav-toggle-bars span:nth-child(2) { top: 7px; }
.sub-nav-toggle-bars span:nth-child(3) { top: 14px; }
/* Open-state morph: middle bar fades, top + bottom rotate to an X */
body[data-nav-open="true"] .sub-nav-toggle-bars span:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
body[data-nav-open="true"] .sub-nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
body[data-nav-open="true"] .sub-nav-toggle-bars span:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

.sub-nav { min-width: 0; }
.sub-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-nav-list a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hp-text);
  text-decoration: none;
  border-radius: 8px;
}
.sub-nav-list a:hover {
  background: var(--hp-surface);
  text-decoration: none;
}
.sub-nav-list a[aria-current="page"] {
  color: var(--hp-primary);
  background: var(--hp-surface);
}
.sub-nav-signin {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin-left: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--hp-primary);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--hp-primary);
}
.sub-nav-signin:hover {
  background: var(--hp-primary-hover, var(--hp-primary));
  text-decoration: none;
}
.sub-nav-signin:focus-visible {
  outline: 2px solid var(--hp-primary);
  outline-offset: 2px;
}

.sub-footer {
  background: var(--hp-surface);
  border-top: 1px solid var(--hp-border);
  margin-top: 3rem;
}
.sub-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 2rem;
}
.sub-footer-col h3.sub-footer-heading {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
  margin: 0 0 0.875rem;
}
.sub-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sub-footer-col a {
  color: var(--hp-text);
  text-decoration: none;
  font-size: 0.9rem;
}
.sub-footer-col a:hover {
  color: var(--hp-primary);
  text-decoration: underline;
}
.sub-footer-col--brand .sub-logo {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}
.sub-footer-tagline {
  color: var(--hp-text-muted);
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
  max-width: 32ch;
  line-height: 1.5;
}
.sub-footer-contact {
  margin: 0;
  font-size: 0.875rem;
}

.sub-footer-bottom {
  border-top: 1px solid var(--hp-border);
  background: var(--hp-bg);
}
.sub-footer-bottom p {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--hp-text-muted);
}
.sub-footer-bottom a {
  color: var(--hp-text-muted);
  text-decoration: none;
}
.sub-footer-bottom a:hover {
  color: var(--hp-primary);
  text-decoration: underline;
}
.sub-footer-credit {
  margin-left: 0.5rem;
  opacity: 0.85;
}

/* ─── Breakpoint scale (2026-06-20, mobile responsiveness pass) ─────
   Standardised on the de facto "mobile nav appears at" cutoff of
   768px (Tailwind `md` / Bootstrap `md`). The pre-pass file used
   19 different breakpoints drifting between 480-860px; this rule is
   the canonical "phone / small tablet" boundary and the other rules
   below were aligned to either ≤768px (mobile) or ≤480px (small
   phone) where the original intent was clearly a mobile fix.
   Larger breakpoints (≥860px) remain for hero grid + per-page layouts
   that genuinely need a wider canvas. */
@media (max-width: 768px) {
  /* Mobile nav: toggle button visible, nav becomes a slide-down
     panel anchored to the bottom of the header. The panel is
     `position: absolute` so it does not push the page content down
     (the inline nav at desktop widths is in-flow; the mobile panel
     overlays). max-height transition gives the open/close animation. */
  .sub-nav-toggle { display: inline-flex; }
  .sub-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--hp-bg);
    border-bottom: 1px solid var(--hp-border);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 220ms ease;
    z-index: 50;
  }
  body[data-nav-open="true"] .sub-nav {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }
  .sub-nav-list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.5rem 1rem 1rem;
  }
  .sub-nav-list li { width: 100%; }
  .sub-nav-list a {
    display: block;
    width: 100%;
    padding: 0.85rem 0.5rem;
    font-size: 1rem;
    border-radius: 6px;
  }
  .sub-nav-list a:hover { background: var(--hp-surface); }
  .sub-nav-signin {
    margin-left: 0;
    margin-top: 0.5rem;
    text-align: center;
  }
  /* Footer collapses to 2-col on tablet portrait */
  .sub-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .sub-footer-col--brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .sub-footer-inner { grid-template-columns: 1fr; }
  .sub-header-inner { padding: 0.65rem 0.85rem; }
  .sub-logo { font-size: 1rem; }
}

/* ─── Hero ────────────────────────────────────────────────────────── */

/* ─── Buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: var(--hp-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: opacity 0.15s;
  cursor: pointer;
}
.btn-primary:hover { opacity: 0.9; text-decoration: none; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-outline {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: transparent;
  color: var(--hp-text);
  border: 1px solid var(--hp-border);
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}
.btn-outline:hover { background: var(--hp-bg); text-decoration: none; }

/* ─── How it works ────────────────────────────────────────────────── */
.how-it-works { padding: 3rem 0; border-top: 1px solid var(--hp-border); border-bottom: 1px solid var(--hp-border); margin: 2rem 0; }
.how-it-works h2 { text-align: center; margin-bottom: 2rem; }
.step { text-align: center; }
.step h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.step p { margin: 0; font-size: 0.875rem; color: var(--hp-text-muted); }

/* ─── Category grid ──────────────────────────────────────────────── */
.categories { padding: 3rem 0; }
.categories h2 { text-align: center; margin-bottom: 1.5rem; }

/* ─── Pitch grid ────────────────────────────────────────────────── */
.pitch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.pitch-card {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.15s;
}
.pitch-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); text-decoration: none; }
.pitch-thumb {
  /* OG / card hero standard — 1200×630 (1.91:1), matches Studio
     pitch list + My Media previews. */
  aspect-ratio: 1200 / 630;
  width: 100%;
  overflow: hidden;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 2026-06-20 — pin the card-thumbnail <img> to the thumb box.
   Without this rule the global `img { max-width: 100%; height: auto; }`
   reset sizes the image from its intrinsic aspect and can overflow
   .pitch-info on narrow columns. width 100% + height 100% + cover
   is the canonical card-thumbnail pattern. Pinned by
   src/__tests__/pitch-thumb-img.contract.test.ts. */
.pitch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pitch-thumb-placeholder span {
  font-size: 2.5rem;
  font-weight: 900;
  color: #d1d5db;
}
.pitch-info { padding: 0.875rem; }
.pitch-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--hp-text);
  line-height: 1.3;
}
.pitch-byline { font-size: 0.75rem; color: var(--hp-text-muted); margin: 0 0 0.375rem; }
.pitch-price { font-size: 0.875rem; font-weight: 700; color: var(--hp-text); margin: 0; }
.pitch-price.free { color: var(--hp-success); }

/* ─── Pitch browse page ─────────────────────────────────────────── */
.pitches-header { margin-bottom: 2rem; }
.pitches-header h1 { margin: 0 0 0.25rem; }
.pitches-sub { color: var(--hp-text-muted); margin: 0 0 1.5rem; font-size: 0.875rem; }

/* ─── Creator page ─────────────────────────────────────────────── */
.creator-header { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--hp-border); flex-wrap: wrap; }
.creator-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: #9ca3af; flex-shrink: 0; }
.creator-avatar img { width: 100%; height: 100%; object-fit: cover; }
.creator-handle { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.25rem; }
.creator-bio { font-size: 0.9rem; color: var(--hp-text-muted); margin: 0 0 0.75rem; max-width: 480px; }
.creator-badges { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.creator-pitches h2 { margin-bottom: 1rem; }

/* ─── Legal pages ───────────────────────────────────────────────── */
.legal-page { max-width: 680px; }
.legal-page h1 { margin-bottom: 0.25rem; }
.effective { font-size: 0.8rem; color: var(--hp-text-muted); margin-bottom: 2rem; }
.legal-page section { margin-bottom: 2rem; }
.legal-page section h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.legal-page p { font-size: 0.9rem; line-height: 1.7; }
.legal-page ul, .legal-page ol { font-size: 0.9rem; line-height: 1.7; padding-left: 1.5rem; }

/* ─── Report page ──────────────────────────────────────────────── */
.report-page { max-width: 560px; }
.report-info { color: var(--hp-text-muted); font-size: 0.9rem; margin-bottom: 2rem; }
.report-form { display: flex; flex-direction: column; gap: 1.25rem; }
.report-form .field { display: flex; flex-direction: column; gap: 0.375rem; }
.report-form label { font-size: 0.875rem; font-weight: 600; }
.required { color: var(--hp-danger); }
.optional { color: var(--hp-text-muted); font-weight: 400; font-size: 0.8rem; }
.report-form textarea, .report-form input[type="email"], .report-form select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hp-border);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
}
.report-form textarea:focus, .report-form input:focus, .report-form select:focus {
  border-color: var(--hp-primary);
}
.report-form .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  cursor: pointer;
}
.submit-error {
  padding: 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: var(--hp-danger);
  font-size: 0.875rem;
}
.success-msg h2 { color: var(--hp-success); }
.success-msg p { color: var(--hp-text-muted); }
.success-msg { padding: 1.5rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; }

/* ─── Pagination ───────────────────────────────────────────────── */

/* ─── Empty states ─────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-state h2 { margin-bottom: 0.5rem; }
.empty-state p { color: var(--hp-text-muted); margin-bottom: 1.5rem; }

/* ─── Creator CTA ──────────────────────────────────────────────── */
.cta-content h2 { margin: 0 0 0.5rem; }
.cta-content p { font-size: 0.9rem; color: var(--hp-text-muted); margin: 0 0 1.5rem; }
.pricing-amount { font-size: 2rem; font-weight: 900; }

/* ─── Pledge ──────────────────────────────────────────────────── */
.pledge { padding: 2rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; margin: 2rem 0; }
.pledge h2 { margin: 0 0 1rem; }
.pledge ul { font-size: 0.875rem; line-height: 2; padding-left: 1.5rem; }

/* ─── Featured pitches ─────────────────────────────────────────── */
.featured-pitches { margin: 2rem 0; }
.featured-pitches h2 { margin-bottom: 1rem; }

/* ─── Utility ────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ═══════════════════════════════════════════════════════════════════
   FOUNDING PITCHER — Phase 0-WL
   2026-06-11: This CSS section is now used for the permanent $100
   Founding Pitcher SKU. The `.fp-demand-test-page` and
   `.fp-demand-test-flow` class names are historical (they predate the
   2026-06-11 pivot off the demand-test window) and are retained for
   back-compat with already-rendered HTML. The visual skin is the same
   as before; only the copy + the cap behavior changed.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Waitlist page layout ──────────────────────────────────────── */
.fp-demand-test-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ─── Waitlist hero ────────────────────────────────────────────── */
.fp-hero {
  padding: 3rem 0 2rem;
}
.fp-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}


/* ─── Offer card ────────────────────────────────────────────────── */


/* ─── Benefits list ─────────────────────────────────────────────── */

.fp-benefit {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}


.fp-benefit div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.fp-benefit strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hp-text);
}

.fp-benefit span {
  font-size: 0.825rem;
  color: var(--hp-text-muted);
  line-height: 1.5;
}

/* ─── Checkout form ─────────────────────────────────────────────── */
.fp-checkout-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}


.fp-btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.fp-btn-loading[hidden] {
  display: none;
}


@keyframes fp-spin {
  to { transform: rotate(360deg); }
}

.fp-form-error {
  color: var(--hp-danger);
  font-size: 0.85rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
}


/* ─── Referred notice ───────────────────────────────────────────── */
.fp-referred-notice {
  padding: 0.625rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #1e40af;
  text-align: center;
}

.fp-demand-test-page.fp-infomercial .fp-referred-notice {
  background: #fff;
  color: #000;
  font-weight: bold;
  border: 3px solid #000;
}

/* ─── Referral explainer ────────────────────────────────────────── */
.fp-referral-explainer {
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 12px;
  padding: 1.5rem;
}

.fp-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
}

.fp-referral-steps {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fp-ref-step {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.fp-ref-step p {
  font-size: 0.8rem;
  color: var(--hp-text-muted);
  margin: 0;
  line-height: 1.5;
}

.fp-ref-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hp-primary);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  flex-shrink: 0;
}


/* ─── Pledge section (Founding Pitcher Demand Test variant) ───── */
.fp-demand-test-page .pledge {
  margin: 1.5rem 0;
}

/* ─── Waitlist footer ───────────────────────────────────────────── */
.fp-footer {
  text-align: center;
  padding: 2rem 0;
  border-top: 1px solid var(--hp-border);
  font-size: 0.8rem;
  color: var(--hp-text-muted);
}
.fp-footer a { color: var(--hp-text-muted); }

/* ──────────────────────────────────────────────────────────────────
   Broadcast / “As Seen On TV” vibe overrides
   (Overrides the calmer defaults above without rewriting markup.)
   ────────────────────────────────────────────────────────────────── */


@keyframes badge-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
}

.fp-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 3.5rem 0 2.75rem;
}

.fp-hero::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  background:
    radial-gradient(1100px 520px at 18% 8%, rgba(255, 0, 170, 0.38), transparent 58%),
    radial-gradient(900px 520px at 82% 18%, rgba(0, 234, 255, 0.26), transparent 60%),
    radial-gradient(900px 700px at 60% 95%, rgba(255, 214, 0, 0.14), transparent 58%),
    linear-gradient(135deg, #0a0f22, #170b33 46%, #071a2d);
}

.fp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.08) 0px,
      rgba(255,255,255,0.03) 1px,
      rgba(0,0,0,0.02) 2px,
      rgba(0,0,0,0.02) 3px
    );
  mix-blend-mode: overlay;
  opacity: 0.34;
}


.fp-referral-explainer {
  border: 2px solid rgba(17,24,39,0.12);
}

.fp-demand-test-page.fp-infomercial .fp-referral-explainer {
  margin-top: 40px;
  background: #fff;
  color: #000;
  padding: 20px;
  border: 4px solid var(--fp-gold);
  text-align: left;
  box-shadow: 6px 6px 0 #000;
}

.fp-section-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fp-ref-num {
  background: linear-gradient(180deg, #111827, #0b1020);
  box-shadow: 0 10px 20px rgba(0,0,0,0.22);
}

/* Ribbon + live bug */

.fp-livebug {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.78);
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  z-index: 3;
}
.fp-livebug span {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.fp-livebug .fp-hd { color: #00eaff; }
.fp-livebug .fp-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff2d2d;
  box-shadow: 0 0 0 4px rgba(255, 45, 45, 0.18);
  animation: fp-pulse 1.05s ease-in-out infinite;
}
@keyframes fp-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}

@media (max-width: 480px) {
  /* 2026-06-20: aligned from 520px to the project-standard
     small-phone cutoff (480px). See the breakpoint scale
     comment at the @media (max-width: 768px) header rule. */
  .fp-ribbon {
    top: 10px;
    left: -92px;
    padding: 0.5rem 4.6rem;
    font-size: 0.72rem;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Waitlist — full “90s infomercial / late-night TV” pass
   ────────────────────────────────────────────────────────────────── */

.fp-demand-test-page.fp-infomercial {
  --fp-gold: #ffff00;
  --fp-orange: #ff6b00;
  --fp-red: #ff0000;
  --fp-teal: #00ffff;
  --fp-purple: #7c3aed;
  --fp-green: #00ff00;
  --fp-tv-black: #000000;
  --fp-blue: #0000ff;

  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--fp-blue);
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.fp-demand-test-page.fp-infomercial a {
  color: var(--fp-gold);
  text-decoration: underline;
}

.fp-demand-test-page.fp-infomercial a:hover {
  color: #ffffff;
}

/* Urgent top bar */
.fp-infobar {
  background: var(--fp-red);
  border-bottom: 4px solid var(--fp-gold);
  text-align: center;
  padding: 5px;
}

.fp-infobar-text {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.2rem;
  color: var(--fp-gold);
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
}

.fp-infobar-pulse {
  color: #ffffff;
  animation: fp-infobar-blink 0.5s steps(2, end) infinite;
}

@keyframes fp-infobar-blink {
  50% { opacity: 0; }
}

.fp-demand-test-page.fp-infomercial .fp-hero {
  padding: 2rem 1rem;
  text-align: center;
}

.fp-demand-test-page.fp-infomercial .fp-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

/* Credit card logos */
.fp-cc-logos {
  display: block;
  margin: 0 auto 20px;
}


@keyframes blink {
  50% { opacity: 0; }
}


.fp-demand-test-page.fp-infomercial .fp-you-get {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  color: var(--fp-gold);
  text-shadow: 3px 3px 0 #000;
  text-transform: uppercase;
  margin: 20px auto 4px;
  letter-spacing: 0.08em;
}

.fp-demand-test-page.fp-infomercial .fp-you-get + .fp-benefits-list {
  margin-top: 12px;
}


.fp-product-title {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(2.5rem, 10vw, 5rem);
  color: var(--fp-gold);
  text-shadow: 5px 5px 0 #000;
  text-transform: uppercase;
  margin: 20px 0 10px;
  line-height: 1.1;
}

.fp-tagline {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: #ffffff;
  text-shadow: 3px 3px 0 #000;
  margin: 0 0 8px;
  line-height: 1.2;
  text-transform: uppercase;
}

.fp-subtagline {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--fp-gold);
  text-shadow: 2px 2px 0 #000;
  margin: 0;
  line-height: 1.3;
  font-style: italic;
}

.fp-demand-test-page.fp-infomercial .fp-elevator {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.95rem, 2.2vw, 1.08rem);
  line-height: 1.5;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  max-width: 680px;
  margin: 18px auto 0;
  padding: 0 8px;
}

.fp-demand-test-page.fp-infomercial .fp-elevator a {
  color: var(--fp-gold);
  font-weight: bold;
}

.fp-demand-test-page.fp-infomercial .fp-agent-note {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  line-height: 1.45;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  max-width: 680px;
  margin: 14px auto 0;
  padding: 12px 14px;
  border: 3px solid var(--fp-gold);
  background: rgba(0, 0, 0, 0.35);
  text-align: left;
  box-shadow: 4px 4px 0 #000;
}

.fp-demand-test-page.fp-infomercial .fp-agent-note a {
  color: var(--fp-gold);
  font-weight: bold;
}

.fp-demand-test-page.fp-infomercial .fp-story-box {
  margin-top: 40px;
  background: #fff;
  color: #000;
  padding: clamp(15px, 4vw, 20px);
  border: 4px solid var(--fp-gold);
  text-align: left;
  box-shadow: 6px 6px 0 #000;
}

.fp-demand-test-page.fp-infomercial .fp-story-box .fp-section-title {
  margin-top: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
}

.fp-demand-test-page.fp-infomercial .fp-section-twist {
  background: var(--fp-red);
  color: #fff;
  padding: 0 5px;
}

.fp-demand-test-page.fp-infomercial .fp-vent-quote {
  margin: 0 0 16px 0;
  padding: 12px 16px;
  border-left: 6px solid var(--fp-red);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.45;
  background: #f5f5f5;
}

.fp-demand-test-page.fp-infomercial .fp-story-lead {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 14px 0;
}

.fp-demand-test-page.fp-infomercial .fp-versus-label {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  letter-spacing: 0.04em;
}

.fp-demand-test-page.fp-infomercial .fp-versus-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px 0;
  font-family: Arial, sans-serif;
  font-size: 0.92rem;
  line-height: 1.4;
}

.fp-demand-test-page.fp-infomercial .fp-versus-table th,
.fp-demand-test-page.fp-infomercial .fp-versus-table td {
  border: 3px solid #000;
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}

.fp-demand-test-page.fp-infomercial .fp-versus-table thead th {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  background: #000;
  color: #fff;
}

.fp-demand-test-page.fp-infomercial .fp-versus-table thead th.fp-versus-new {
  background: var(--fp-red);
  color: #fff;
}

.fp-demand-test-page.fp-infomercial .fp-versus-table tbody th {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  background: #f0f0f0;
  width: 22%;
}

.fp-demand-test-page.fp-infomercial .fp-versus-table tbody td.fp-versus-old {
  background: #eee;
}

.fp-demand-test-page.fp-infomercial .fp-versus-table tbody td.fp-versus-new {
  background: #fffde0;
}

.fp-demand-test-page.fp-infomercial .fp-story-kicker {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.1rem;
  line-height: 1.35;
  margin: 0;
  text-transform: uppercase;
}

.fp-demand-test-page.fp-infomercial .fp-story-kicker a {
  color: inherit;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-teaser {
  margin: 0 0 12px 0;
  font-family: Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: bold;
  line-height: 1.4;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-teaser a {
  color: var(--fp-gold);
  text-decoration: underline;
}

.fp-demand-test-page.fp-infomercial .fp-metrics-illus {
  font-size: 0.85em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ccc;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-examples {
  margin-top: 36px;
  background: #fff;
  color: #000;
  padding: clamp(15px, 4vw, 20px);
  border: 4px solid var(--fp-gold);
  text-align: left;
  box-shadow: 6px 6px 0 #000;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-examples .fp-section-title {
  margin-top: 0;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-examples-lead {
  margin: 0 0 16px 0;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-example-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 3px solid #000;
  background: #fffde0;
  text-decoration: none;
  color: #000;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.1s ease;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-example-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
  text-decoration: none;
  color: #000;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-example-tag {
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-example-code {
  font-family: Consolas, Monaco, monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fp-gold);
}

.fp-demand-test-page.fp-infomercial .fp-pitch-example-title {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: bold;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-example-score {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.1rem;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-example-cta {
  margin-top: 4px;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
}

.fp-demand-test-page.fp-infomercial .fp-hp-thread-demo {
  margin: 0;
  padding: 0;
  border: 3px solid #000;
  background: #000;
}

.fp-demand-test-page.fp-infomercial .fp-hp-thread-demo img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}

.fp-demand-test-page.fp-infomercial .fp-hp-thread-demo figcaption {
  padding: 10px 12px;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  background: #f5f5f5;
  color: #000;
  border-top: 3px solid #000;
}

.fp-demand-test-page.fp-infomercial .fp-faq {
  margin-top: 40px;
  background: #000;
  color: #fff;
  padding: 24px 20px;
  border: 4px solid var(--fp-gold);
  text-align: left;
}

.fp-demand-test-page.fp-infomercial .fp-faq .fp-section-title {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: var(--fp-gold);
}

.fp-demand-test-page.fp-infomercial .fp-faq-item {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #333;
}

.fp-demand-test-page.fp-infomercial .fp-faq-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.fp-demand-test-page.fp-infomercial .fp-faq-item--last {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.fp-demand-test-page.fp-infomercial .fp-faq-section-title {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  color: var(--fp-gold);
}

.fp-demand-test-page.fp-infomercial .fp-cc-logos {
  margin: 0 auto 1.5rem;
  display: block;
}

.fp-demand-test-page.fp-infomercial .fp-referred-notice {
  margin-top: 20px;
  background: #fff;
  color: #000;
  padding: 10px;
  font-weight: bold;
  border: 3px solid #000;
}

.fp-demand-test-page.fp-infomercial .fp-referral-explainer {
  margin-top: 40px;
  background: #fff;
  color: #000;
  padding: 20px;
  border: 4px solid var(--fp-gold);
  text-align: left;
  box-shadow: 6px 6px 0 #000;
}

.fp-demand-test-page.fp-infomercial .fp-ref-step {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  align-items: center;
}

.fp-demand-test-page.fp-infomercial .fp-ref-step--last {
  margin-bottom: 0;
}

.fp-demand-test-page.fp-infomercial .fp-ref-num {
  background: var(--fp-gold);
  border: 3px solid #000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Arial Black', sans-serif;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.fp-demand-test-page.fp-infomercial .fp-ref-step p {
  margin: 0;
}

.fp-demand-test-page.fp-infomercial .fp-referral-steps {
  font-family: Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.4;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-examples-lead {
  color: #333;
  margin-top: 0;
}

.fp-demand-test-page.fp-infomercial .fp-day1-section {
  margin-top: 1.5rem;
}

.fp-demand-test-page.fp-infomercial .fp-faq-a a {
  color: var(--fp-gold);
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-bar span {
  width: var(--bar-width, 0%);
}

/* Inline link in benefits list */
.fp-demand-test-page.fp-infomercial .fp-benefits-list a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fp-demand-test-page.fp-infomercial .fp-benefits-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fp-demand-test-page.fp-infomercial .fp-faq-link {
  color: var(--fp-gold);
}

.fp-demand-test-page.fp-infomercial .fp-faq {
  margin-top: 40px;
  background: #000;
  color: #fff;
  padding: 24px 20px;
  border: 4px solid var(--fp-gold);
  text-align: left;
}

.fp-demand-test-page.fp-infomercial .fp-day1-section {
  margin-top: 1.5rem;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-examples-lead {
  color: #333;
  margin-top: 0;
}

.fp-demand-test-page.fp-infomercial .fp-micro-print {
  font-size: 0.8rem;
  margin-top: 10px;
  color: #ccc;
}

.fp-demand-test-page.fp-infomercial .fp-trust-scoring-lead {
  margin-top: 1rem;
  margin-bottom: 0;
}

.fp-demand-test-page.fp-infomercial .fp-section-title {
  color: var(--fp-gold);
  margin-top: 0;
}

.fp-demand-test-page.fp-infomercial .fp-faq-q {
  margin: 0 0 6px 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--fp-gold);
}

.fp-demand-test-page.fp-infomercial .fp-faq-a {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ddd;
}

.fp-demand-test-page.fp-infomercial .fp-referral-explainer .fp-ref-num {
  color: #000;
}

@media (max-width: 480px) {
  /* 2026-06-20: aligned from 560px to the project-standard
     small-phone cutoff (480px). See the breakpoint scale
     comment at the @media (max-width: 768px) header rule. */
  .fp-demand-test-page.fp-infomercial .fp-versus-table {
    font-size: 0.78rem;
  }

  .fp-demand-test-page.fp-infomercial .fp-versus-table th,
  .fp-demand-test-page.fp-infomercial .fp-versus-table td {
    padding: 6px 8px;
  }

  .fp-demand-test-page.fp-infomercial .fp-versus-table tbody th {
    width: 26%;
  }
}


.fp-demand-test-page.fp-infomercial .fp-legal-fine {
  margin: 10px 0 0;
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #ccc;
  text-align: left;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Font metrics tuned in SVG user units (see index.njk tspans) */

/* Checkout form */
.fp-checkout-form {
  margin-top: 40px;
  background: var(--fp-red);
  padding: clamp(15px, 4vw, 30px);
  border: 6px solid var(--fp-gold);
  box-shadow: 8px 8px 0 #000;
}


.fp-form-error {
  color: #fff;
  background: #000;
  padding: 10px;
  margin-top: 15px;
  font-weight: bold;
  font-size: 1.2rem;
}


.fp-benefits-list {
  text-align: left;
  margin: 40px auto;
  max-width: 650px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  color: #fff;
  text-shadow: 3px 3px 0 #000;
  line-height: 1.4;
  list-style: none;
  padding: 0;
}
.fp-benefits-list li {
  margin-bottom: 15px;
  position: relative;
  padding-left: 40px;
}
.fp-benefits-list li::before {
  content: "⭐";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fp-gold);
}
.fp-benefits-list li span {
  color: #fff;
}
.fp-benefits-list li strong {
  color: var(--fp-gold);
}
.fp-benefits-list li strong a {
  color: inherit;
}
.fp-benefits-list li strong a:hover {
  color: #fff;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fp-demand-test-page.fp-infomercial .fp-footer {
  text-align: center;
  padding: 30px;
  font-size: 1rem;
  color: #fff;
  font-weight: bold;
  background: #000;
  border-top: 4px solid var(--fp-gold);
}

@media (max-width: 768px) {
  .fp-guarantee-row {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   FOUNDING PITCHER SUCCESS PAGE
   ═══════════════════════════════════════════════════════════════════ */


.ws-icon {
  width: 154px;
  height: 180px;
}

.ws-icon img {
  width: 100%;
  height: auto;
  display: block;
}


/* ─── Referral card ─────────────────────────────────────────────── */


/* ─── Stats ────────────────────────────────────────────────────── */


/* ── Wall opt-in card on success page ── */


.ws-wall-opt-label {
  font-size: 0.875rem;
  color: var(--hp-text);
  cursor: pointer;
  user-select: none;
}

.ws-wall-opt-label strong {
  color: var(--hp-primary);
}


/* ═══════════════════════════════════════════════════════════════════
   FOUNDING PITCHERS — Progress Bar
   ═══════════════════════════════════════════════════════════════════ */

.fp-bar-section {
  background: #000;
  border-bottom: 4px solid var(--fp-gold);
  padding: 10px 16px;
  display: block;
}

.fp-bar-inner {
  max-width: 800px;
  margin: 0 auto;
}

.fp-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 4px;
}

.fp-bar-label {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--fp-gold);
  text-shadow: 1px 1px 0 #000;
}

.fp-bar-count {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.fp-bar-track-wrap {
  margin-top: 2px;
}

.fp-bar-track {
  position: relative;
  height: 24px;
  background: rgba(255,255,255,0.12);
  border: 2px solid var(--fp-gold);
  border-radius: 4px;
  overflow: visible;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

.fp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff0fd6, #00eaff);
  border-radius: 2px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(0,234,255,0.5);
  min-width: 2px;
}

.fp-bar-goal-marker {
  position: absolute;
  left: 100%;
  top: -28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fp-bar-goal-label {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--fp-gold);
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}

.fp-bar-goal-marker::after {
  content: "";
  display: block;
  width: 2px;
  height: 24px;
  background: var(--fp-gold);
  margin-top: 2px;
}

.fp-bar-dates {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}


.fp-bar-date-key {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--fp-gold);
  text-shadow: 1px 1px 0 #000;
}


.fp-bar-status {
  margin: 6px 0 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffff00;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════
   FOUNDING PITCHERS — Wall
   ═══════════════════════════════════════════════════════════════════ */

.fp-wall {
  display: none;
  margin-top: 20px;
}

.fp-wall:not([hidden]) {
  display: block;
}

.fp-wall-inner {
  background: #000;
  border: 4px solid var(--fp-gold);
  box-shadow: 6px 6px 0 #000;
  padding: 20px;
}


.fp-wall-title {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  margin: 0;
  text-align: center;
}


.fp-wall-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}


.fp-wall-empty {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  color: #888;
  text-align: center;
  margin: 0;
  font-style: italic;
}

/* ── Checkout form tweaks for name + wall opt-in ── */


.fp-wall-opt-label {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  user-select: none;
}

.fp-wall-opt-label strong {
  color: var(--fp-gold);
}

@media (max-width: 480px) {
  /* 2026-06-20: aligned from 520px to the project-standard
     small-phone cutoff (480px). See the breakpoint scale
     comment at the @media (max-width: 768px) header rule. */
  .fp-bar-count {
    font-size: 0.75rem;
  }
  .fp-bar-label {
    font-size: 0.7rem;
  }
  .fp-bar-status {
    font-size: 0.65rem;
  }
}

/* ── Realignment: hero counter, risk shield, day-1, pitch previews, trust, founder, testimonials ── */

.fp-demand-test-page.fp-infomercial .fp-hero-counter {
  margin: 0.75rem auto 1.25rem;
  padding: 0.65rem 1rem;
  max-width: 520px;
  background: #000;
  border: 4px solid var(--fp-gold);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  text-transform: uppercase;
  color: var(--fp-gold);
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 0.02em;
}

.fp-demand-test-page.fp-infomercial .fp-risk-shield {
  margin: 1.25rem auto 1.5rem;
  max-width: 640px;
  padding: 1rem 1.25rem;
  background: #fff;
  color: #000;
  border: 5px solid var(--fp-red);
  box-shadow: 6px 6px 0 #000;
  text-align: left;
}

.fp-demand-test-page.fp-infomercial .fp-risk-shield-title {
  margin: 0 0 0.5rem;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--fp-red);
}

.fp-demand-test-page.fp-infomercial .fp-risk-shield p {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.45;
}

.fp-demand-test-page.fp-infomercial .fp-day1-section {
  margin-top: 2rem;
  padding: 1.5rem 1rem;
  background: #fff;
  color: #000;
  border: 4px solid var(--fp-gold);
  box-shadow: 8px 8px 0 #000;
  text-align: left;
}

.fp-demand-test-page.fp-infomercial .fp-day1-section--timeline {
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

.fp-demand-test-page.fp-infomercial .fp-day1-section .fp-section-title {
  color: #000;
  margin-top: 0;
}

.fp-demand-test-page.fp-infomercial .fp-day1-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0;
  align-items: stretch;
  justify-content: center;
}

.fp-demand-test-page.fp-infomercial .fp-day1-step {
  flex: 1 1 160px;
  max-width: none;
  padding: 1rem;
  background: #000;
  color: #fff;
  border: 3px solid var(--fp-red);
  text-align: center;
}

@media (min-width: 640px) {
  .fp-demand-test-page.fp-infomercial .fp-day1-step {
    max-width: 220px;
  }
}

.fp-demand-test-page.fp-infomercial .fp-day1-step-num {
  display: block;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 2rem;
  color: var(--fp-gold);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.fp-demand-test-page.fp-infomercial .fp-day1-step-title {
  display: block;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.fp-demand-test-page.fp-infomercial .fp-day1-step-desc {
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0;
}

.fp-demand-test-page.fp-infomercial .fp-day1-arrow {
  align-self: center;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.75rem;
  color: var(--fp-red);
  flex: 0 0 auto;
}

.fp-demand-test-page.fp-infomercial .fp-day1-kicker {
  margin: 0;
  font-weight: bold;
  font-size: 0.95rem;
}

.fp-demand-test-page.fp-infomercial .fp-timeline-figure {
  margin: 1.25rem auto 1rem;
  padding: 0;
  max-width: 480px;
}

.fp-demand-test-page.fp-infomercial .fp-timeline-img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-frame {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #0b0f14;
  border: 4px solid #000;
  box-shadow: 5px 5px 0 var(--fp-gold);
  overflow: hidden;
  transition: transform 0.12s ease;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-frame:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--fp-gold);
  text-decoration: none;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: #1a2332;
  border-bottom: 1px solid #2f3336;
  font-size: 0.65rem;
  font-family: Consolas, Monaco, monospace;
  color: #9ca3af;
  flex-wrap: wrap;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-body {
  padding: 0.75rem;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-score {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #34d399;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(52, 211, 153, 0.08);
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-ring-value {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.1rem;
  color: #34d399;
  line-height: 1;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-ring-label {
  font-size: 0.45rem;
  text-transform: uppercase;
  color: #9ca3af;
  letter-spacing: 0.04em;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-metrics {
  flex: 1;
  display: grid;
  gap: 0.25rem;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-metric {
  display: grid;
  grid-template-columns: 4.5rem 1fr 2rem;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.6rem;
  color: #e7e9ea;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-bar {
  height: 4px;
  background: #2f3336;
  border-radius: 2px;
  overflow: hidden;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-bar span {
  display: block;
  height: 100%;
  width: var(--bar-width, 0%);
  background: linear-gradient(90deg, #e51923, #fbbf24);
  border-radius: 2px;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-title {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-code {
  font-family: Consolas, Monaco, monospace;
  font-size: 0.65rem;
  color: #fbbf24;
}

.fp-demand-test-page.fp-infomercial .fp-pitch-preview-cta {
  display: block;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.7rem;
  font-weight: bold;
  background: var(--fp-red);
  color: var(--fp-gold);
  text-transform: uppercase;
}

.fp-demand-test-page.fp-infomercial .fp-trust-scoring {
  margin-top: 2rem;
  padding: 1.5rem 1rem;
  background: #000;
  border: 4px solid var(--fp-teal);
  text-align: left;
}

.fp-demand-test-page.fp-infomercial .fp-trust-scoring .fp-section-title {
  color: var(--fp-teal);
}

.fp-demand-test-page.fp-infomercial .fp-trust-scoring-lead,
.fp-demand-test-page.fp-infomercial .fp-trust-scoring-list {
  font-family: Arial, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ddd;
}

.fp-demand-test-page.fp-infomercial .fp-trust-scoring-list {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
}

.fp-demand-test-page.fp-infomercial .fp-trust-scoring-list li {
  margin-bottom: 0.5rem;
}

.fp-demand-test-page.fp-infomercial .fp-testimonials {
  margin-top: 2rem;
  padding: 1.25rem 1rem;
  border: 4px dashed var(--fp-gold);
  background: rgba(0, 0, 0, 0.35);
  text-align: left;
}

.fp-demand-test-page.fp-infomercial .fp-testimonials-note {
  font-size: 0.75rem;
  color: #ccc;
  margin: 0 0 1rem;
  font-style: italic;
}

.fp-demand-test-page.fp-infomercial .fp-testimonial-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 600px) {
  .fp-demand-test-page.fp-infomercial .fp-testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.fp-demand-test-page.fp-infomercial .fp-testimonial-card {
  margin: 0;
  padding: 1rem;
  background: #fff;
  color: #000;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 var(--fp-red);
}

.fp-demand-test-page.fp-infomercial .fp-testimonial-card blockquote {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.4;
}

.fp-demand-test-page.fp-infomercial .fp-testimonial-card cite {
  font-size: 0.8rem;
  font-style: normal;
  color: #444;
}

@media (max-width: 640px) {
  .fp-demand-test-page.fp-infomercial .fp-day1-arrow {
    display: none;
  }
}

/* ─── System home (/) — modern infomercial product-spot ─────────────
   The home page is a single product-feature beat:
     • slim FOUNDING PITCHERS progress bar (the only live-status beat,
       rendered in the site-wide promo slot — see
       site-promo-slot.njk + promo-founding-pitcher.njk)
     • hero: title + master description + primary CTA
     • top-pitch: a single off-white "now on the air" card
     • slim system explainer
   No sales letter, no objection handling, no second card. The pitch
   page does the closing. The home page only does recognition.

   2026-06-12: the previous home-only "fp-infomercial-chrome.njk"
   partial (the loud decorative "as seen on" SVG seal) is archived
   under src/_includes/_ARCHIVED/. The home page no longer carries
   any decorative "as seen on" seal. */

.fp-demand-test-page.fp-infomercial.hp-system-home {
  /* Deeper, more modern TV-blue.  The demand-test sales page keeps
     its loud pure blue (--fp-blue) so the long-form sales letter
     still reads "90s infomercial".  Only the home page gets the
     modernized field. */
  background: #0a1633;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 214, 10, 0.06), transparent 60%),
    linear-gradient(180deg, #0e1a3a 0%, #07112a 100%);
}

.fp-demand-test-page.fp-infomercial.hp-system-home .fp-infobar {
  font-size: 0.78rem;
  padding: 4px 8px;
}

.fp-demand-test-page.fp-infomercial.hp-system-home .fp-infobar-text {
  font-size: 0.78rem;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 0.04em;
}

/* Bevel: rounded corners + soft inset highlight + offset shadow.
   Applied to the home page CTAs. The sales page's loud
   .fp-btn-primary (gold + 4px black border + 6px offset shadow)
   is intentionally untouched. */
.hp-system-home a.hp-cta {
  /* WCAG 2.2 AA: text #000 on #f5c400 = 11.2:1 (AAA). The previous
     gradient (#ffea4d → #ffd60a → #e6b800) gave some color-blindness
     simulators a perceived-contrast below 4.5:1 because the top
     highlight was nearly the same yellow as the text. Solid yellow
     + black is unambiguous for any visual-simulator audit. The
     `a.hp-cta` element+class selector (under `.hp-system-home`)
     gives this rule a specificity of (0, 3, 1) — three classes
     and one element — which beats the `.fp-demand-test-page
     .fp-infomercial a` rule at site.css:1031-1034 (specificity
     (0, 2, 1), two classes and one element). Without that
     ancestor, the infomercial rule wins and paints the CTA's
     "See the Pitch" text bright yellow on the same yellow
     background, making it invisible. */
  --hp-cta-bg: #f5c400;
  --hp-cta-bg-hover: #ffd60a;
  --hp-cta-fg: #000000;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hp-cta-fg);
  background: var(--hp-cta-bg);
  padding: 0.85rem 1.5rem;
  border: 2px solid #000000;
  border-radius: 10px;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 6px 0 #000000,
    0 10px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  text-shadow: none;
}

.hp-system-home a.hp-cta:hover {
  transform: translateY(2px);
  background: var(--hp-cta-bg-hover);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 4px 0 #000000,
    0 6px 12px rgba(0, 0, 0, 0.4);
  color: var(--hp-cta-fg);
  text-decoration: none;
}

.hp-system-home a.hp-cta:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 1px 0 #000000;
}

.hp-system-home a.hp-cta:focus-visible {
  outline: 3px solid #ffd60a;
  outline-offset: 3px;
}

.hp-cta-arrow {
  font-size: 1.1em;
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.15s ease;
}

.hp-system-home a.hp-cta:hover .hp-cta-arrow {
  transform: translateX(3px);
}

.hp-system-home a.hp-cta--ghost {
  --hp-cta-bg: transparent;
  --hp-cta-bg-hover: rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #f5f5f5;
  border: 2px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.3);
  text-transform: none;
  font-weight: 700;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  letter-spacing: 0;
}

.hp-system-home a.hp-cta--ghost:hover {
  color: #ffd60a;
  border-color: rgba(255, 214, 10, 0.7);
  background: rgba(255, 214, 10, 0.06);
}

.hp-system-home a.hp-cta--card {
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 4px 0 #000000,
    0 6px 12px rgba(0, 0, 0, 0.3);
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hp-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem clamp(2rem, 5vw, 3rem);
  position: relative;
}

.hp-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.hp-hero-copy {
  min-width: 0;
  text-align: left;
}

.hp-hero-figure {
  margin: 0;
  min-width: 0;
}

.hp-hero-illustration {
  display: block;  
  height: auto;
  max-width: 830px;
  margin-left: auto;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.45));
  border-radius: 18px;
}

@media (max-width: 860px) {
  .hp-hero-inner {
    grid-template-columns: 1fr;
  }
  /* 2026-06-14: collapse the .hp-hero-copy wrapper so its children
     (eyebrow, title, lead, CTAs, secondary CTA, and the crowd) become
     direct grid children of .hp-hero-inner. This lets us re-order the
     three visual blocks at narrow widths via `order`:
       1. copy text (default order: 0)
       2. the triumphant pitcher (.hp-hero-figure, order: 1)
       3. the crowd walking in toward the pitcher (.hp-hero-crowd, order: 2)
     The wide-viewport two-column grid above is unaffected: the
     contract test pins both layouts. */
  .hp-hero-copy {
    display: contents;
  }
  /* Re-apply the narrow-viewport centering that the old
     `.hp-hero-copy { text-align: center }` rule provided, on the
     inner elements that need it (the wrapper is now invisible to
     text-align). */
  .hp-hero-eyebrow,
  .hp-hero-title,
  .hp-hero-lead,
  .hp-hero-cta-row {
    justify-content: center;
  }
  /* The pitcher (figure) sits between the copy text and the crowd
     at narrow widths. */
  .hp-hero-figure {
    order: 1;
  }
  /* The crowd, last in the rendered column — the audience arriving
     at the pitcher's page, walking in from below. */
  .hp-hero-crowd {
    order: 2;
  }
  .hp-hero-illustration {
    margin: 0 auto;
    max-width: 360px;
  }
}

.hp-hero-eyebrow {
  display: inline-block;
  margin: 0 0 0.85rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffd60a;
  text-shadow: 1px 1px 0 #000;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(255, 214, 10, 0.5);
  border-radius: 999px;
}

.hp-hero-title {
  margin: 0 0 1rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: clamp(2.2rem, 6.4vw, 4rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.5),
    3px 4px 0 #0a1633;
  text-transform: none;
}

.hp-hero-lead {
  margin: 0 0 1.75rem;
  max-width: 560px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.hp-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: flex-start;
  align-items: center;
  margin: 0 0 1.25rem;
}

/* 2026-06-11: quiet secondary link to the system pitch. Sits under
   the primary "See the top pitch" + "Browse all pitches" CTAs in
   the hero. Visually subordinate — same color as body copy, small
   underline on hover, no border, no background — so the hero keeps
   the single primary-CTA beat. The arrow is kept for visual
   consistency with the primary CTA's affordance.
   2026-06-14 update: the link target moved from the
   `/p/system/` explainer pitch (the "what is Honest Pitches"
   HP-system row, slug: the-system-pitch) to a direct deep link
   to the studio's pitch-new shell
   (`{{ env.STUDIO_URL }}/pitches/new`). The CSS rules below are
   unchanged — the link still has the same quiet secondary visual
   treatment. The variable name in the template (`systemUrl`)
   is retained for diff size; the comment in
   `src/index.njk` (2026-06-14) and the
   `pitchUrlScheme.contract.test.ts` and
   `homePageBuild.contract.test.ts` test pins document the
   target change. */
.hp-system-home a.hp-hero-secondary-link {
  color: rgba(245, 245, 245, 0.78);
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.hp-system-home a.hp-hero-secondary-link:hover,
.hp-system-home a.hp-hero-secondary-link:focus-visible {
  color: #ffd60a;
  border-bottom-color: rgba(255, 214, 10, 0.6);
  outline: none;
}

/* ── HP Code jump form (2026-06-15) ───────────────────────────────
   The home page is the entry point for two distinct visitor populations:
     (1) visitors who don't know any HP code yet — the "see the top
         pitch" + "browse all" CTAs above serve them;
     (2) visitors who already have an HP code (printed on a flyer,
         sent in a DM, on a business card) and just want to land on
         that pitch. This form is for population (2).
   The form is a labelled <form action="/hp/" method="get"> whose
   inline JS handler rewrites the submit target to the per-code
   static redirect at /hp/{code}/index.html (which 301s to the
   canonical /p/{hpCode}/{seoSlug}/ pitch page — see src/hp-redirect.njk).
   For no-JS users, the form falls through to /hp/?code=… and Bunny
   CDN returns 404; acceptable since the home page is a TV-style
   infomercial and the operator confirms every visitor has JS.
   Visual treatment: solid dark surface with a gold border + a yellow
   "Go" button that mirrors the .hp-cta primary CTA's language
   without sharing its specific yellow/black contrast pair (the form
   lives on a near-black surface, the primary CTA is on the same
   surface — they're peers). The input is large enough to be a
   finger-friendly tap target on mobile (>= 1rem font-size, >= 0.5rem
   padding all around) and uses an explicit text color (not `inherit`,
   not the infomercial's --fp-gold) so it never reads white-on-white
   or yellow-on-yellow under any future palette change. */
.hp-hero-jumpform {
  display: block;
  max-width: 560px;
  margin: 0 0 1.5rem;
  padding: clamp(0.85rem, 2vw, 1.1rem);
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 214, 10, 0.55);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.35);
}

/* 2026-06-17: the form moved into the right column (.hp-hero-figure)
   so it now sits directly above the pitcher illustration. On wide
   viewports the form is the first child of the figure and should
   right-align to match the hero image's `margin-left: auto` (see
   `.hp-hero-illustration` below), giving the right column a clean
   right-anchored visual. The margin-top is reset to 0 because the
   form is the first thing in the column — there is nothing above
   it to push it away from. */
.hp-hero-figure > .hp-hero-jumpform {
  margin-left: auto;
  margin-right: 0;
  margin-top: 0;
}
  text-align: left;
}

.hp-hero-jumpform-label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 0 0.65rem;
  cursor: text;
}

.hp-hero-jumpform-eyebrow {
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffd60a;
  text-shadow: 1px 1px 0 #000;
}

.hp-hero-jumpform-hint {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(0.92rem, 2vw, 1.02rem);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}

.hp-hero-jumpform-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hp-system-home .hp-hero-jumpform-input {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.7rem 0.85rem;
  color: #0a1633;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 8px;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.15);
  -webkit-appearance: none;
  appearance: none;
}

.hp-system-home .hp-hero-jumpform-input::placeholder {
  color: rgba(10, 22, 51, 0.45);
  letter-spacing: 0.04em;
}

.hp-system-home .hp-hero-jumpform-input:focus {
  outline: 3px solid #ffd60a;
  outline-offset: 2px;
  background: #ffffff;
  color: #0a1633;
}

.hp-system-home .hp-hero-jumpform-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  color: #000000;
  background: #ffd60a;
  border: 2px solid #000000;
  border-radius: 8px;
  cursor: pointer;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 4px 0 #000000,
    0 6px 12px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.hp-system-home .hp-hero-jumpform-submit:hover {
  background: #ffe34a;
  transform: translateY(2px);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 2px 0 #000000,
    0 4px 8px rgba(0, 0, 0, 0.4);
}

.hp-system-home .hp-hero-jumpform-submit:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 1px 0 #000000;
}

.hp-system-home .hp-hero-jumpform-submit:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.hp-hero-jumpform-example {
  display: block;
  margin: 0.55rem 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

.hp-hero-jumpform-example code {
  font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem;
  padding: 0.05rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: #ffd60a;
}

@media (max-width: 860px) {
  /* 2026-06-17: the form moved into .hp-hero-figure, so on narrow
     viewports it is a child of the figure (not a child of the
     copy's `display: contents` promotion). It renders at the top
     of the figure's stacked children — the form comes first in
     source order, the pitcher illustration comes second — and the
     figure itself is `order: 1` in the grid, so the rendered order
     at narrow widths is: copy, form, pitcher, crowd. That matches
     the wide-viewport visual story: the form is always a peer of
     the pitcher, never a separate page section. */
  .hp-hero-jumpform {
    margin-left: auto;
    margin-right: auto;
  }
  .hp-hero-jumpform-row {
    flex-direction: column;
    align-items: stretch;
  }
  .hp-system-home .hp-hero-jumpform-submit {
    width: 100%;
    justify-content: center;
  }
}

/* 2026-06-20 (mobile responsiveness): trim the form so it stops
   eating a third of the first viewport at phone widths. The hint
   becomes a single line, padding tightens, the row stays inline
   (input + button side-by-side) so the form is one row instead of
   two stacked rows. Aligned to the new mobile cutoff of 768px
   (Tailwind `md` / Bootstrap `md` de facto standard). */
@media (max-width: 768px) {
  .hp-hero-jumpform {
    padding: 0.75rem 0.85rem;
    margin-bottom: 1rem;
  }
  .hp-hero-jumpform-label {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
  }
  .hp-hero-jumpform-hint {
    /* Drop to one line by hiding the wrap and trusting overflow.
       The full hint lives in the `aria-describedby` example text
       below the row for assistive tech. */
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hp-hero-jumpform-row {
    flex-direction: row; /* keep inline so the form stays one row */
    align-items: stretch;
  }
  .hp-system-home .hp-hero-jumpform-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    padding: 0.55rem 0.7rem;
  }
  .hp-system-home .hp-hero-jumpform-submit {
    flex: 0 0 auto;
    font-size: 0.95rem;
    padding: 0.55rem 1rem;
  }
  .hp-hero-jumpform-example {
    font-size: 0.75rem;
    margin-top: 0.35rem;
  }
}

@media (max-width: 480px) {
  .hp-hero-jumpform {
    padding: 0.7rem 0.75rem;
  }
}

/* 2026-06-10: small crowd illustration under the hero copy, walking
   toward the triumphant pitcher on the right. The crowd is the audience
   arriving at the pitcher's page. It replaces the prior visible
   "Using an AI agent?" blurb; the /llms.txt hint is still in the DOM
   as a `.sr-only` span so crawlers pick it up. */
.hp-hero-crowd {
  margin: 0.25rem 0 0;
  max-width: 560px;
  display: block;
}

.hp-hero-crowd-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 342px;
  object-fit: contain;
  object-position: right bottom;
}

@media (max-width: 860px) {
  .hp-hero-crowd {
    margin-left: auto;
    margin-right: auto;
  }
  .hp-hero-crowd-img {
    max-height: 180px;
  }
}

/* ── Top pitch ────────────────────────────────────────────────── */
.hp-top-pitch {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.5rem clamp(2rem, 5vw, 3rem);
}

.hp-top-pitch-eyebrow {
  display: block;
  margin: 0 0 0.4rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.hp-top-pitch-heading {
  margin: 0 0 1rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
}

/* Card surface.
   The redesign (2026-06-09) keeps the same off-white card / navy
   border / TV-style beveled drop-shadow as before — the 90s-
   infomercial look is part of the brand — but the layout inside
   the card changes: HP code goes to the upper-right, the body
   becomes a 2-column grid (thumbnail left, content right) on
   >=640px viewports, and the HonestScore becomes a small ring
   in the footer. */
.hp-top-pitch-card {
  position: relative;
  background: #fafafa;
  color: #0a1633;
  border: 2px solid #0a1633;
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 0 rgba(10, 22, 51, 0.4),
    0 18px 36px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.hp-top-pitch-card::before {
  /* TV scanline cue, very subtle */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 3px,
    rgba(10, 22, 51, 0.025) 3px,
    rgba(10, 22, 51, 0.025) 4px
  );
  border-radius: inherit;
}

/* HP code badge — upper-right corner of the card. The viewer-
   facing identifier (not authoring metadata). Two-line layout:
   "HP CODE" eyebrow + the code itself, monospace. */
.hp-top-pitch-code {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1rem);
  right: clamp(0.85rem, 2.4vw, 1.25rem);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  padding: 0.3rem 0.55rem;
  background: rgba(10, 22, 51, 0.06);
  border: 1px solid rgba(10, 22, 51, 0.18);
  border-radius: 6px;
  text-align: right;
  /* Keep the right padding aligned with the card border so the
     right edge of the badge sits inside the rounded corner. */
  margin-right: 0;
}

.hp-top-pitch-code-label {
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 22, 51, 0.55);
  line-height: 1;
}

.hp-top-pitch-code-value {
  font-family: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0a1633;
  line-height: 1.1;
}

/* Body grid: thumbnail on the left, byline + title + description +
   audience on the right. Stacks vertically below 640px. The HP
   code badge sits absolutely on top, so the body padding-right
   reserves space for it on wide viewports. */
.hp-top-pitch-body {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.5rem);
  align-items: start;
  margin-top: 0.4rem;
  /* Reserve room for the absolute-positioned HP code badge so the
     title never slides under it. Slightly more than the badge's
     own width for breathing room. */
  padding-right: 7.5rem;
}

.hp-system-home .hp-top-pitch-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #e5e7eb;
  text-decoration: none;
  border: 1px solid rgba(10, 22, 51, 0.18);
  position: relative;
  color: inherit;
}

.hp-top-pitch-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Avoid the 1px ghost-border some browsers add to <img>. */
  border: 0;
}

/* Letter placeholder when the pitch has no thumbnail. Mirrors the
   @creator grid's `.pitch-thumb-placeholder` so the two surfaces
   feel like the same family, but uses the brand navy instead of
   the gray used in the @creator grid (the @creator grid is
   lighter visual weight; this is the marquee card). */
.hp-system-home .hp-top-pitch-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, #0a1633, #1e3a8a);
  color: rgba(255, 255, 255, 0.78);
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  /* Sized for the first two words of the title (uppercased), e.g.
     "FOUNDING PITCHER" or "DRTV CLASSIC". The clamp keeps single-
     word titles readable on narrow viewports while letting two-
     word phrases fill the 16:9 thumbnail on desktop. The text is
     hard-capped at the first two words in the template, so a
     single-line layout is sufficient. */
  font-size: clamp(1rem, 2.6vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  word-break: break-word;
  /* Override the infomercial `a` rule's underline so the
     placeholder span renders the gradient background as designed. */
  text-decoration: none;
}

.hp-top-pitch-content {
  min-width: 0; /* allow grid item to shrink so the title can wrap */
}

/* Byline: "By @handle [verified]". Quiet line above the title. */
.hp-top-pitch-byline {
  margin: 0 0 0.4rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.82rem;
  line-height: 1.3;
  color: rgba(10, 22, 51, 0.7);
}

/* Card link colors live INSIDE the `.hp-system-home` ancestor
   selector on purpose: the home page <main> carries both the
   `.hp-system-home` class and the `.fp-demand-test-page .fp-infomercial`
   pair, and the infomercial pair sets every <a> child to the
   bright-yellow `--fp-gold` token (site.css:1031-1034). That rule
   is a class+class+tag selector with specificity (0, 2, 1), which
   beats any descendant selector that's only class+tag (0, 1, 1) or
   just class (0, 1, 0). Scoping our link rules under
   `.hp-system-home` AND including the trailing `a` element
   selector where the rule targets an anchor (the byline handle
   IS the <a>, so the selector is `.hp-system-home a.hp-top-pitch-handle`,
   not `.hp-system-home .hp-top-pitch-handle`) raises the card's
   specificity to (0, 3, 1) — three classes and one element — which
   beats the infomercial's (0, 2, 1) and lets the card render
   readable colors without touching the 90s palette on the rest
   of the page. The `homePageBuild.contract.test.ts` WCAG pin on
   the exact #000000 hex still applies — this section is the one
   source of truth for the card's link color. */
.hp-system-home a.hp-top-pitch-handle {
  color: #0a1633;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 22, 51, 0.25);
  padding-bottom: 1px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.hp-system-home a.hp-top-pitch-handle:hover,
.hp-system-home a.hp-top-pitch-handle:focus-visible {
  color: var(--hp-primary, #e51923);
  border-bottom-color: var(--hp-primary, #e51923);
}

.hp-system-home .hp-top-pitch-title {
  margin: 0 0 0.5rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  line-height: 1.22;
  font-weight: 900;
  color: #0a1633;
}

.hp-system-home .hp-top-pitch-title a {
  /* Explicit black (#000000) on the off-white card with a permanent
     underline. Black on #fafafa = 21:1, the strongest contrast the
     card can offer. The `.hp-system-home` ancestor raises this rule's
     specificity above the `.fp-demand-test-page.fp-infomercial a`
     rule at site.css:1031-1034 (which paints every <a> on the home
     page bright yellow) — without that ancestor, the yellow rule
     wins and the title becomes unreadable on the off-white card.
     The homePageBuild.contract.test.ts pin on this exact hex prevents
     the next contributor from re-introducing that inheritance. Hover
     slides to brand red. */
  color: #000000;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

.hp-system-home .hp-top-pitch-title a:hover,
.hp-system-home .hp-top-pitch-title a:focus-visible {
  color: var(--hp-primary, #e51923);
  text-decoration-color: var(--hp-primary, #e51923);
}

.hp-top-pitch-description {
  margin: 0 0 0.55rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(10, 22, 51, 0.85);
}

.hp-top-pitch-audience {
  margin: 0 0 0.4rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(10, 22, 51, 0.7);
}

.hp-top-pitch-audience strong {
  color: #0a1633;
  font-weight: 800;
}

.hp-top-pitch-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(10, 22, 51, 0.12);
}

/* Small HonestScore ring. Reuses the token vocabulary from the
   pitch-page hero card (`.honestscore-ring` / `.honestscore-value`)
   but at a much smaller scale and using `--hp-gold` so the home
   page card reads as a single visual unit. The score value + the
   "HonestScore (illustrative)" label stack vertically next to
   the ring so the score is the dominant element on the left. */
.hp-top-pitch-score {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.hp-top-pitch-score-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 3px solid #f59e0b;
  background: rgba(10, 22, 51, 0.04);
  font-variant-numeric: tabular-nums;
}

.hp-top-pitch-score-value {
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  color: #0a1633;
  letter-spacing: -0.01em;
}

.hp-top-pitch-score-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(10, 22, 51, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.hp-top-pitch-score-label .fp-metrics-illus {
  font-size: 0.62rem;
  color: rgba(10, 22, 51, 0.5);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  margin-top: 1px;
}

/* ── System explainer ─────────────────────────────────────────── */
.hp-system-about {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.5rem clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.hp-about-title {
  margin: 0 0 0.85rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.hp-about-lead {
  margin: 0 auto 0.95rem;
  max-width: 640px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1rem, 2.1vw, 1.1rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.hp-about-lead strong {
  color: #ffd60a;
  font-weight: 800;
}

.hp-about-links {
  margin: 0;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

.hp-about-links a {
  color: #ffd60a;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 214, 10, 0.45);
  padding-bottom: 1px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.hp-about-links a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

.hp-about-dot {
  display: inline-block;
  margin: 0 0.55rem;
  color: rgba(255, 255, 255, 0.35);
}

/* ── Directory listings ("as listed on") ──────────────────────────
   2026-06-17: launch / directory sites that link to Honest Pitches
   often require their badge to be visible on the listed page. This
   section is the home page's answer. It sits at the very bottom of
   <main>, below the system explainer, so it never competes with the
   hero or the top-pitch card for attention. The badges are 3rd-party
   images served from each directory's CDN; the section does not
   re-host them, and the contract test pins the <img>'s src to the
   external origin. */
.hp-listings {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.75rem) 1.5rem clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.hp-listings-heading {
  margin: 0 0 0.85rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hp-listings-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-listings-item {
  margin: 0;
  line-height: 0;
}

.hp-listings-link {
  display: inline-block;
  line-height: 0;
  /* The 3rd-party badges are designed to sit on a flat background;
     give the link a transparent hit-area that matches the badge's
     intrinsic dimensions so the focus ring is bounded. */
  border-radius: 4px;
  transition: opacity 0.15s ease;
}

.hp-listings-link:hover,
.hp-listings-link:focus-visible {
  opacity: 0.82;
}

.hp-listings-link:focus-visible {
  outline: 2px solid #ffd60a;
  outline-offset: 2px;
}

.hp-listings-badge {
  display: block;
  width: 180px;
  height: 40px;
}

/* Hide the legacy "loud" home variants (story-box / hero-counter)
   that some sub-templates still wire in.  The home page no longer
   uses these classes (the loud 90s chrome — formerly in
   fp-infomercial-chrome.njk, now archived — never included them
   either).  We keep them quiet as a defense in depth. */
.fp-demand-test-page.fp-infomercial.hp-system-home .fp-section-twist,
.fp-demand-test-page.fp-infomercial.hp-system-home .fp-hero-counter {
  display: none !important;
}

@media (max-width: 768px) {
  /* 2026-06-20: aligned from 640px to the project-standard mobile
     cutoff (768px) so the home top-pitch card collapses on the
     same breakpoint the new mobile nav appears. See the
     breakpoint scale comment at the @media (max-width: 768px)
     header rule. */
  .hp-hero-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .hp-cta,
  .hp-cta--ghost {
    width: 100%;
    justify-content: center;
  }
  /* Stack the thumbnail above the content on narrow viewports
     and drop the right-side reservation for the absolute HP code
     badge so the title can use the full card width. */
  .hp-top-pitch-body {
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  .hp-top-pitch-code {
    /* Sit at top-right of the card, not on top of the thumbnail,
       so it doesn't visually collide with the stacked layout. */
    top: 0.6rem;
    right: 0.6rem;
  }
  .hp-top-pitch-card-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .hp-top-pitch-card-footer .hp-cta {
    width: 100%;
    justify-content: center;
  }
}

.fp-subpage .fp-hero--sub {
  padding: 2rem 1rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   SUBPAGE CONTENT — /how-it-works/, /faq/
   Modernized, system-aligned look for content subpages. Same shared
   sub-header / sub-nav / sub-footer chrome as the rest of the site;
   cream paper field, system type, no infomercial wrapper. The founding-
   pitcher sales page keeps its loud .fp-infomercial skin intentionally.
   ═══════════════════════════════════════════════════════════════════ */

.subpage-content {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) 1.25rem clamp(2.5rem, 6vw, 4rem);
}

/* ── Subpage hero (used by /how-it-works/, /faq/, future content pages) ── */
.subpage-content .subpage-hero {
  margin: 0 0 2.5rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--hp-border);
}

.subpage-content .subpage-eyebrow {
  display: inline-block;
  margin: 0 0 0.65rem;
  padding: 0.2rem 0.6rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
  border-radius: 999px;
}

.subpage-content h1 {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--hp-text);
  margin: 0 0 0.65rem;
}

.subpage-content .subpage-lead {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--hp-text);
  margin: 0 0 0.4rem;
  max-width: 56ch;
}

.subpage-content .subpage-sub {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--hp-text-muted);
  margin: 0 0 0.85rem;
  max-width: 56ch;
}

.subpage-content .subpage-back-link {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  color: var(--hp-text-muted);
  margin: 0;
  line-height: 1.5;
}

.subpage-content .subpage-back-link a {
  color: var(--hp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.subpage-content .subpage-back-link a:hover {
  color: var(--hp-primary-dark);
}

/* ── Hero (replaces .fp-hero--sub on mechanics + faq) ──────────── */
.subpage-content .fp-hero--sub {
  text-align: left;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--hp-border);
  margin-bottom: 2.5rem;
}

.subpage-content .fp-hero-inner {
  gap: 0.75rem;
  text-align: left;
}

.subpage-content .fp-product-title {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--hp-text);
  text-shadow: none;
  margin: 0;
  line-height: 1.1;
}

.subpage-content .fp-tagline {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: none;
  color: var(--hp-text-muted);
  text-shadow: none;
  margin: 0;
  line-height: 1.4;
  max-width: 56ch;
}

.subpage-content .fp-subtagline {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-style: normal;
  color: var(--hp-text-muted);
  text-shadow: none;
  margin: 0;
  line-height: 1.5;
  max-width: 56ch;
}

.subpage-content .fp-story-lead {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  color: var(--hp-text-muted);
  margin: 0.75rem 0 0;
  line-height: 1.5;
}

/* ── Sections: calm cards, not infomercial stamps ─────────────── */
.subpage-content .fp-day1-section,
.subpage-content .fp-referral-explainer,
.subpage-content .fp-trust-scoring,
.subpage-content .fp-testimonials,
.subpage-content .fp-story-box,
.subpage-content .fp-risk-shield,
.subpage-content .fp-faq {
  margin: 0 0 2rem;
  padding: 1.5rem 1.5rem;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg, 12px);
  box-shadow: none;
  text-align: left;
  color: var(--hp-text);
}

.subpage-content .fp-day1-section--timeline {
  padding: 1.5rem;
}

.subpage-content .fp-timeline-figure {
  max-width: 360px;
  margin: 0.75rem auto 1rem;
  padding: 0;
}

.subpage-content .fp-day1-kicker {
  font-size: 0.95rem;
  color: var(--hp-text-muted);
  margin: 0;
  line-height: 1.55;
}

/* ── Section headings: quiet, system type ──────────────────────── */
.subpage-content .fp-section-title {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hp-text);
  margin: 0 0 1rem;
  line-height: 1.25;
}

.subpage-content .fp-section-twist {
  background: transparent;
  color: var(--hp-primary);
  padding: 0;
}

/* ── Benefits list: clean, bulleted ────────────────────────────── */
.subpage-content .fp-benefits-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--hp-text);
  text-shadow: none;
  text-transform: none;
  line-height: 1.6;
  max-width: none;
  display: grid;
  gap: 0.625rem;
}

.subpage-content .fp-benefits-list li {
  position: relative;
  margin: 0;
  padding: 0.625rem 0.75rem 0.625rem 2rem;
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-md, 8px);
}

.subpage-content .fp-benefits-list li::before {
  content: "✓";
  position: absolute;
  left: 0.75rem;
  top: 0.625rem;
  font-weight: 900;
  color: var(--hp-success);
  font-size: 1rem;
  line-height: 1.4;
}

.subpage-content .fp-benefits-list li span,
.subpage-content .fp-benefits-list li strong {
  color: var(--hp-text);
  text-shadow: none;
  font-weight: 600;
}

.subpage-content .fp-benefits-list li a {
  color: var(--hp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.subpage-content .fp-benefits-list li a:hover {
  color: var(--hp-primary-dark);
}

/* ── Risk shield: a calm callout, not a 90s TV stamp ──────────── */
.subpage-content .fp-risk-shield {
  border-left: 4px solid var(--hp-success);
  background: #f0fdf4;
}

.subpage-content .fp-risk-shield-title {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: none;
  color: var(--hp-text);
  margin: 0 0 0.5rem;
  text-shadow: none;
}

.subpage-content .fp-risk-shield p {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--hp-text);
  text-shadow: none;
  margin: 0;
}

/* ── Trust scoring: clean list ────────────────────────────────── */
.subpage-content .fp-trust-scoring-lead {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hp-text);
  margin: 0 0 1rem;
  text-shadow: none;
}

.subpage-content .fp-trust-scoring-list {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hp-text);
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  text-shadow: none;
}

.subpage-content .fp-trust-scoring-list li {
  margin-bottom: 0.5rem;
}

.subpage-content .fp-trust-scoring-list li:last-child {
  margin-bottom: 0;
}

.subpage-content .fp-trust-scoring a {
  color: var(--hp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.subpage-content .fp-trust-scoring a:hover {
  color: var(--hp-primary-dark);
}

/* ── Testimonials: 2-up grid, clean cards ─────────────────────── */
.subpage-content .fp-testimonials-note {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.8rem;
  color: var(--hp-text-muted);
  font-style: italic;
  margin: 0 0 1rem;
  text-shadow: none;
}

.subpage-content .fp-testimonial-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .subpage-content .fp-testimonial-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.subpage-content .fp-testimonial-card {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--hp-bg);
  color: var(--hp-text);
  border: 1px solid var(--hp-border);
  border-left: 4px solid var(--hp-primary);
  border-radius: var(--hp-radius-md, 8px);
  box-shadow: none;
}

.subpage-content .fp-testimonial-card blockquote {
  margin: 0 0 0.5rem;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--hp-text);
}

.subpage-content .fp-testimonial-card cite {
  font-size: 0.8rem;
  font-style: normal;
  color: var(--hp-text-muted);
}

/* ── Referral / viral-loop steps: horizontal, numbered ────────── */
.subpage-content .fp-referral-steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--hp-text);
  text-shadow: none;
  text-transform: none;
  line-height: 1.5;
  align-items: start;
}

@media (min-width: 720px) {
  .subpage-content .fp-referral-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.subpage-content .fp-ref-step {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: flex-start;
  text-align: left;
  margin: 0;
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-md, 8px);
  padding: 1rem;
}

.subpage-content .fp-ref-num {
  width: 32px;
  height: 32px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  background: var(--hp-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  flex-shrink: 0;
}

.subpage-content .fp-ref-step p {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--hp-text);
  line-height: 1.55;
  margin: 0;
  text-shadow: none;
}

.subpage-content .fp-ref-step--last {
  margin: 0;
}

/* ── Story box: calm quote, no TV black/gold ──────────────────── */
.subpage-content .fp-story-box {
  background: var(--hp-bg);
  border-left: 4px solid var(--hp-primary);
}

.subpage-content .fp-vent-quote {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--hp-text);
  background: transparent;
  border-left: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.subpage-content .fp-story-lead {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--hp-text);
  margin: 0 0 0.75rem;
  text-shadow: none;
  text-transform: none;
}

.subpage-content .fp-story-kicker {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  margin: 0;
  text-shadow: none;
}

.subpage-content .fp-story-kicker a {
  color: var(--hp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── FAQ: clean list, no neon ─────────────────────────────────── */
.subpage-content .fp-faq {
  background: var(--hp-surface);
  color: var(--hp-text);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg, 12px);
  padding: 1.5rem;
}

.subpage-content .fp-faq .fp-section-title {
  margin: 0 0 1.25rem;
}

.subpage-content .fp-faq-item {
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hp-border);
}

.subpage-content .fp-faq-item:first-of-type {
  padding-top: 0;
}

.subpage-content .fp-faq-item:last-child,
.subpage-content .fp-faq-item--last {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.subpage-content .fp-faq-q {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--hp-text);
  text-shadow: none;
  margin: 0 0 0.4rem;
  line-height: 1.35;
}

.subpage-content .fp-faq-a {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--hp-text);
  text-shadow: none;
  margin: 0;
}

.subpage-content .fp-faq-a a {
  color: var(--hp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.subpage-content .fp-faq-a a:hover {
  color: var(--hp-primary-dark);
}

/* ── "You will get" lead-in for the benefits section ──────────── */
.subpage-content .fp-you-get {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--hp-text);
  text-shadow: none;
  margin: 0 0 0.75rem;
}

/* ── Mobile rhythm ───────────────────────────────────────────── */
@media (max-width: 480px) {
  /* 2026-06-20: aligned from 560px to the project-standard
     small-phone cutoff (480px). See the breakpoint scale
     comment at the @media (max-width: 768px) header rule. */
  .subpage-content {
    padding: 1.5rem 1rem 2.5rem;
  }
  .subpage-content .fp-day1-section,
  .subpage-content .fp-referral-explainer,
  .subpage-content .fp-trust-scoring,
  .subpage-content .fp-testimonials,
  .subpage-content .fp-story-box,
  .subpage-content .fp-risk-shield,
  .subpage-content .fp-faq {
    padding: 1.25rem;
  }
}

.pitch-page .pitch-lead {
  font-size: 1.1rem;
  margin: 0 0 1.5rem;
}

.pitch-framework-badge,


.pitch-page-price--contact,

.pitch-block {
  margin: 0 0 1.5rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--hp-border);
}

.pitch-block-heading {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pitch-block-body {
  line-height: 1.65;
}

.honestscore-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  background: var(--hp-surface);
  border: 3px solid var(--hp-border);
  margin: 2rem 0;
}

.honestscore-ring {
  text-align: center;
}

.honestscore-value {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
}

.metrics-illustration-note,
.fp-metrics-illus {
  font-size: 0.85rem;
  color: var(--hp-text-muted);
}


/* ── Site-wide promo slot ───────────────────────────────────────────
   The `.site-promo-slot` is the stable DOM region directly under
   the page nav. It is always rendered (so the page layout does
   not shift when a promo is added or cleared) and its contents
   are driven by `_data/sitePromo.js` (active: "founding-pitcher"
   fills it, active: null leaves it empty). The slot itself is
   invisible — it is just a structural container.

   The current occupant of the slot, `promo-founding-pitcher.njk`,
   is styled further down (`.fp-sitewide-promo`). Each new promo
   should ship its own include AND its own `.fp-sitewide-promo-*`
   styles. The slot itself is intentionally class-agnostic. */
.site-promo-slot {
  /* The slot is a thin wrapper — it has no background, no
     padding, no border. The promo include inside it (when
     filled) carries its own chrome (background, infobar,
     border-bottom rule). The slot exists so the page can
     always rely on `.site-promo-slot` being present in the
     DOM even when the promo is cleared. */
  position: relative;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--hp-text, #1f1b16);
}

.site-promo-slot--empty {
  /* Empty slot — render an aria-labeled, zero-height region so
     the slot still exists in the layout (and the layout doesn't
     shift when the slot is later filled) but doesn't take up
     visible space. The `aria-label` and `data-promo="none"`
     let screen readers and tests confirm the slot is present. */
  display: block;
  min-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ── Promo: Founding Pitcher demand-test ────────────────────────────
   The current occupant of `.site-promo-slot`. Layout is a
   two-row grid:
     • Row 1 (`.fp-sitewide-top`):    flex row of [seal | infobar]
     • Row 2 (`.fp-sitewide-main`):   2-col grid of [bar | CTAs]
                                      with the CTAs vertically
                                      stacked on the right

   On desktop the bar takes the full remaining width and the
   CTAs sit in a fixed-width column to its right. On mobile
   (< 720 px) the layout collapses to a single column. */
.fp-sitewide-promo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.75rem;
  /* The band is the 90s infomercial by default on EVERY page. It
     is the load-bearing "special internet offer" pitch the user
     wants site-wide, so the deep-blue + gold-border loud palette
     lives in the base rule here. A previous version tried to
     opt the home page in via `.hp-system-home .fp-sitewide-promo`,
     but the slot is a SIBLING of <main>, not a descendant, so
     that selector never matched. The "loud" palette is now the
     base. */
  background: var(--fp-blue, #0a1f4d);
  border-bottom: 4px solid var(--fp-gold, #f8c000);
  color: #f9f9f9;
}

/* ── Row 1: seal + infobar ──────────────────────────────────────── */
.fp-sitewide-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}


.fp-sitewide-promo .fp-infobar {
  /* Full-size loud infobar. The previous "slim" variant was for
     the abandoned --quiet page override; the band is loud on every
     page now, so the infobar gets the full 90s treatment. */
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 10px;
  font-size: 1.2rem;
  line-height: 1.2;
  border-bottom: 2px solid var(--fp-gold, #f8c000);
  margin: 0;
}

.fp-sitewide-promo .fp-infobar-text {
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.2rem;
  color: var(--fp-gold, #f8c000);
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 0.02em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Row 2: bar (left) + CTAs (right, stacked) ──────────────────── */
.fp-sitewide-main {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.fp-sitewide-promo .fp-bar-section {
  /* Loud TV card — black field with the gold 90s bevel. The bar
     is the focal point of the band, so the card gets a thicker
     border and more padding than the default inline bars. */
  min-width: 0;
  background: #000;
  border: 3px solid var(--fp-gold, #f8c000);
  border-radius: 8px;
  padding: 1rem;
  margin: 0;
  height: 100%
}

/* Badge-to-the-left-of-bar wrapper. The grid in .fp-sitewide-main
   stays `[bar-wrap | CTAs]`; this 3-col grid makes the bar-wrap
   itself `[badge | bar-card | benefits-card]` on desktop. The
   badge + benefits card are fixed-width (the seal never squashes,
   the benefits copy never wraps weirdly), and the bar card gets
   the remaining space so its progress fill + dates have room to
   breathe. The badge is the same `founding-pitcher-badge.png`
   used on the /founding-pitcher/ hero — re-used here as the
   visual seal next to the live counter so the bar's identity is
   unmistakable on every page. */
.fp-sitewide-bar-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.fp-sitewide-badge {
  /* 96px desktop — the seal is anchored to the bar's vertical
     centre, scales down on mobile, and never fights the CTAs for
     horizontal room (the bar card flexes; the badge is fixed). */
  width: 155px;
  height: 155px;
  object-fit: contain;
  display: block;
  /* Slight glow that echoes the gold border on the bar card so the
     two read as a single composite seal. */
  filter: drop-shadow(0 0 4px rgba(248, 192, 0, 0.35));
}

/* Benefits card — sits to the right of the bar card. A quiet
   companion to the loud black/gold bar: white surface, dark
   text, thin gold border so it ties into the bar's palette
   without competing with it. The three perks are the most
   visually scannable, dollar-value-anchored subset of
   `founder.benefits[]` — badge for life, 10 pitch credits, and
   the $348 Verified Creator year. Copy is hand-curated here
   rather than lifted from the data file, so the side card can
   evolve independently of the marketing-copy source of truth. */
.fp-sitewide-benefits {
  /* `align-self: stretch` is set in the grid item so the card
     matches the bar's vertical height even when the bar grows
     to fit the dates + status line. */
  align-self: stretch;
  min-width: 220px;
  max-width: 260px;
  background: var(--hp-surface, #fff);
  color: var(--hp-text, #1f1b16);
  border: 1px solid var(--fp-gold, #f8c000);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.35;
  /* Sit visually with the bar's loud black/gold card — same
     8px-ish border-radius family, just a slimmer gold border. */
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.fp-sitewide-benefits-title {
  margin: 0 0 0.4rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fp-red, #c40000);
  /* Sits the title against the white surface, with the same
     uppercase-TV-card register as the bar's `FOUNDING PITCHERS`
     label. */
}

.fp-sitewide-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.fp-sitewide-benefits-item {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.4rem;
  align-items: start;
}

.fp-sitewide-benefits-mark {
  /* Gold star — echoes the badge's gold palette without
     competing with the seal. `aria-hidden` is on the markup
     so screen readers don't announce a literal "star". */
  color: var(--fp-gold, #f8c000);
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.fp-sitewide-benefits-text {
  /* Tight tracking on the perks so each line lands in <= 2
     visual lines at the 220-260px width. */
  color: var(--hp-text, #1f1b16);
}

.fp-sitewide-promo .fp-bar-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--fp-gold, #f8c000);
  text-shadow: 1px 1px 0 #000;
}

.fp-sitewide-promo .fp-bar-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}

.fp-sitewide-promo .fp-bar-track {
  height: 14px;
  background: #000;
  border: 2px solid #fff;
  border-radius: 4px;
  overflow: hidden;
}

.fp-sitewide-promo .fp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff0000 0%, #c00 100%);
  border-radius: 4px 0 0 4px;
  transition: width 600ms ease-out;
}

.fp-sitewide-promo .fp-bar-end-marker {
  /* Show the GOAL: tag overlay on the loud bar. */
  display: block;
}

.fp-sitewide-promo .fp-bar-dates {
  display: flex;
  gap: 1.25rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0.4rem;
}

.fp-sitewide-promo .fp-bar-date-key {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  opacity: 0.85;
  color: var(--fp-gold, #f8c000);
}

.fp-sitewide-promo .fp-bar-status {
  font-size: 0.75rem;
  color: var(--fp-gold, #f8c000);
  margin: 0.35rem 0 0;
  font-weight: 700;
}

/* ── Conversion row: two CTAs, vertically stacked, on the right ── */
.fp-sitewide-cta-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
  min-width: 180px;
}

.fp-banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid transparent;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
  transition: transform 80ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}

.fp-banner-cta:hover {
  transform: translateY(-1px);
}

.fp-banner-cta:focus-visible {
  outline: 3px solid var(--fp-gold, #f8c000);
  outline-offset: 2px;
}

/* Primary CTA — "$1 buy now Founding Pitcher". Loud, high-contrast,
   matches the infomercial palette: red field, gold bevel, white
   text. The primary CTA must always be visually dominant so the
   conversion surface is unmistakable. */
.fp-banner-cta--primary {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: var(--fp-red, #c40000);
  color: #ffffff;
  border-color: var(--fp-gold, #f8c000);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.fp-banner-cta--primary:hover {
  background: #a00000;
  color: var(--fp-gold, #f8c000);
}

.fp-banner-cta--primary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #000;
}

/* Cap-closed state. The runtime in founding-pitcher.js adds this
   class once the public `count` reaches FOUNDING_PITCHER_CAP (100).
   The CTA is also `aria-disabled="true"` and `tabindex="-1"`, with
   the `href` removed. The visual is "greyed out" — same shape as
   the primary, but a desaturated red + reduced cursor affordance. */
.fp-banner-cta--primary.fp-banner-cta--closed,
.fp-banner-cta--primary[aria-disabled="true"] {
  background: #6b6b6b;
  color: #d4d4d4;
  border-color: #b8b8b8;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
}
.fp-banner-cta--primary.fp-banner-cta--closed:hover,
.fp-banner-cta--primary[aria-disabled="true"]:hover {
  background: #6b6b6b;
  color: #d4d4d4;
}

/* Secondary CTA — "Learn more". Quieter, ghost button. Always
   stacks below the primary CTA. */
.fp-banner-cta--secondary {
  background: var(--hp-surface, #fff);
  color: var(--hp-text, #1f1b16);
  border-color: var(--hp-border, #d4c5a9);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.fp-banner-cta--secondary:hover {
  background: var(--hp-surface, #fff);
  border-color: var(--hp-text, #1f1b16);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Mobile rhythm (< 768 px) — collapse the two-row grid to a
   single column. Seal + infobar stack first, then the bar takes
   the full width, then the two CTAs stack full-width below.
   2026-06-20: aligned from 720px to the project-standard mobile
   cutoff (768px). See the breakpoint scale comment at the
   @media (max-width: 768px) header rule. */
@media (max-width: 768px) {
  .fp-sitewide-top {
    flex-wrap: wrap;
  }
  .fp-sitewide-promo .fp-infobar-text {
    white-space: normal;
    font-size: 0.75rem;
  }
  .fp-sitewide-main {
    grid-template-columns: 1fr;
  }
  .fp-sitewide-cta-row {
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .fp-banner-cta {
    flex: 1 1 100%;
    text-align: center;
  }
  .fp-sitewide-promo .fp-bar-dates {
    flex-direction: column;
    gap: 0.25rem;
  }
  /* On mobile, the bar-wrap collapses from a horizontal
     `[badge | bar | benefits]` 3-col grid to a single column
     stack so the badge doesn't get crushed to a sliver next to
     a full-width bar card, and the benefits card takes its own
     full-width row below the bar. The badge centres above the
     card; the benefits card keeps its quiet white surface so it
     still reads as a separate companion, not a banner element. */
  .fp-sitewide-bar-wrap {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .fp-sitewide-badge {
    justify-self: center;
    width: 72px;
    height: 72px;
  }
  .fp-sitewide-benefits {
    max-width: none;
    align-self: stretch;
  }
}

/* ── Site-wide promo: history note ─────────────────────────────────
   2026-06-12: the "As seen on" decorative seal (home-only loud
   variant in `fp-infomercial-chrome.njk`, now archived under
   src/_includes/_ARCHIVED/; and the site-wide slot's small
   "fp-as-seen" wrapper) was removed entirely. The site-wide
   band leans on the red infobar for the loud 90s beat. The
   home page no longer stacks a decorative seal above the slot.

   The previous revision put the slot's "loud inner" styles
   behind `.hp-system-home` / `.fp-demand-test-page` /
   `.fp-demand-test-flow` page-class overrides, but the slot is
   a SIBLING of <main>, not a descendant, so those selectors
   never fired. The slot's loud inner styling is the base
   behaviour of `.fp-sitewide-promo` and applies everywhere. */

/* ═══════════════════════════════════════════════════════════════════
   /how-it-works/ — MVP explainer (comic + SVG diagrams)
   ═══════════════════════════════════════════════════════════════════ */

.mechanics-page .mech-section {
  margin: 0 0 2rem;
  padding: 1.5rem;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-lg, 12px);
}

.mechanics-page .mech-lead {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--hp-text);
  margin: 0 0 1rem;
  max-width: 62ch;
}

.mechanics-page .mech-subtitle {
  font-size: 1rem;
  font-weight: 800;
  color: var(--hp-text);
  margin: 1.5rem 0 0.75rem;
}

.mechanics-page .mech-bullet-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.mechanics-page .mech-bullet-list li {
  position: relative;
  margin: 0;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-md, 8px);
  font-size: 0.95rem;
  line-height: 1.5;
}

.mechanics-page .mech-bullet-list li::before {
  content: "✓";
  position: absolute;
  left: 0.75rem;
  font-weight: 900;
  color: var(--hp-success);
}

.mechanics-page .mech-figure {
  margin: 0.75rem 0 0;
  padding: 0;
}

.mechanics-page .mech-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hp-radius-md, 8px);
  border: 1px solid var(--hp-border);
  background: #fff;
}

.mechanics-page .mech-figure--comic img {
  border: none;
  background: transparent;
}

.mechanics-page .mech-figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--hp-text-muted);
  text-align: center;
}

.mechanics-page .mech-step-copy {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: var(--hp-text-muted);
  line-height: 1.5;
}

.mechanics-page .mech-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.mechanics-page .mech-path {
  padding: 1rem;
  border-radius: var(--hp-radius-md, 8px);
  border: 1px solid var(--hp-border);
  background: var(--hp-bg);
}

.mechanics-page .mech-path--feed {
  border-top: 3px solid #e51923;
}

.mechanics-page .mech-path--honest {
  border-top: 3px solid #059669;
}

.mechanics-page .mech-path-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mechanics-page .mech-path--feed .mech-path-title { color: #b91c1c; }
.mechanics-page .mech-path--honest .mech-path-title { color: #047857; }

.mechanics-page .mech-step-list,
.mechanics-page .mech-benefit-list {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--hp-text);
}

.mechanics-page .mech-step-list li,
.mechanics-page .mech-benefit-list li {
  margin-bottom: 0.5rem;
}

.mechanics-page .mech-step-desc {
  display: block;
  color: var(--hp-text-muted);
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.mechanics-page .mech-metrics {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #047857;
}

.mechanics-page .mech-result {
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  border-radius: var(--hp-radius-md, 8px);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mechanics-page .mech-result--negative {
  background: #1f2937;
  color: #f9fafb;
}

.mechanics-page .mech-platform-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.mechanics-page .mech-platform-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-md, 8px);
}

.mechanics-page .mech-platform-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--hp-primary);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
}

.mechanics-page .mech-platform-step p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--hp-text-muted);
  line-height: 1.5;
}

.mechanics-page .mech-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 0;
}

@media (max-width: 640px) {
  .mechanics-page .mech-cta-row .btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PRICING PAGE — /pricing/
   ═══════════════════════════════════════════════════════════════════ */

.pricing-page .pricing-callout {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--hp-radius-lg, 12px);
  border: 1px solid var(--hp-border);
}

.pricing-page .pricing-callout--live {
  background: #ecfdf5;
  border-color: #6ee7b7;
}

.pricing-page .pricing-callout--planned {
  background: #fffbeb;
  border-color: #fcd34d;
}

.pricing-page .pricing-callout-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}

.pricing-page .pricing-section-title {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 800;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.pricing-page .pricing-section-lead,
.pricing-page .pricing-section-note {
  margin: 0 0 0.75rem;
  line-height: 1.55;
  color: var(--hp-text);
  max-width: 65ch;
}

.pricing-page .pricing-section-note {
  color: var(--hp-text-muted);
  font-size: 0.95rem;
}

.pricing-page .pricing-product-card {
  margin-bottom: 1.5rem;
}

.pricing-page .pricing-product-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.pricing-page .pricing-product-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  flex: 1 1 12rem;
}

.pricing-page .pricing-product-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.pricing-page .pricing-amount {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--hp-primary);
}

.pricing-page .pricing-cadence {
  font-size: 0.85rem;
  color: var(--hp-text-muted);
  text-transform: lowercase;
}

.pricing-page .pricing-status-badge {
  margin: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}

.pricing-page .pricing-status-badge--live {
  background: #059669;
  color: #fff;
}

.pricing-page .pricing-includes,
.pricing-page .pricing-free-list,
.pricing-page .pricing-plan-list {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
  line-height: 1.55;
}

.pricing-page .pricing-includes li + li,
.pricing-page .pricing-free-list li + li,
.pricing-page .pricing-plan-list li + li {
  margin-top: 0.35rem;
}

.pricing-page .pricing-muted {
  color: var(--hp-text-muted);
}

.pricing-page .pricing-refund {
  margin: 1rem 0 0;
}

.pricing-page .pricing-cta-row {
  margin: 1.25rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

/* 2026-06-27 (pricing page buy/learn split): the primary CTA on
   the live-product card is the loud yellow "Buy Founding Pitcher"
   button (the same bevel + 6px black offset shadow as the home
   page's `.hp-cta--primary`, but scoped to `.pricing-page` so the
   rule does not depend on `.hp-system-home` ancestor). The
   secondary "Learn more" button is a quiet ghost button — same
   gold border + transparent background, the same hover treatment
   the home page ghost CTA uses. The two-button row stacks on
   viewports narrower than 560px (the @media block below).

   The `class="hp-cta hp-cta--primary"` markup on the old template
   did not render visibly on the pricing page because the home
   page's `.hp-system-home a.hp-cta` rule is ancestor-scoped —
   `.pricing-page` has neither `.hp-system-home` nor `.fp-demand-test-page`
   on the same element, so the rules never matched. Replaced with
   `.pricing-cta--primary` / `.pricing-cta--secondary` to give the
   pricing page its own button styles that don't depend on the
   home page's CSS scope. Contract test pins both class names. */
.pricing-page .pricing-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  border: 2px solid #000000;
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.pricing-page .pricing-cta:focus-visible {
  outline: 3px solid #ffd60a;
  outline-offset: 3px;
}

/* WCAG 2.2 AA: text #000 on #f5c400 = 11.2:1 (AAA). Matches the
   home page's `.hp-cta--primary` rationale (see site.css:2992-3005). */
.pricing-page .pricing-cta--primary {
  color: #000000;
  background: #f5c400;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 6px 0 #000000,
    0 10px 18px rgba(0, 0, 0, 0.45);
}

.pricing-page .pricing-cta--primary:hover {
  color: #000000;
  background: #ffd60a;
  transform: translateY(2px);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 4px 0 #000000,
    0 6px 12px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}

.pricing-page .pricing-cta--primary:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 1px 0 #000000;
}

/* Secondary = quiet ghost. Same gold accent on hover so the two
   buttons feel related; transparent body so the card's white
   background reads through. */
.pricing-page .pricing-cta--secondary {
  color: #5a4a00;
  background: transparent;
  border-color: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.12);
  font-size: clamp(0.9rem, 1.9vw, 1.05rem);
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0;
}

.pricing-page .pricing-cta--secondary:hover {
  color: #000000;
  border-color: #f5c400;
  background: rgba(245, 196, 0, 0.1);
  text-decoration: none;
}

@media (max-width: 559.98px) {
  .pricing-page .pricing-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .pricing-page .pricing-cta {
    justify-content: center;
    text-align: center;
  }
}

.pricing-page .pricing-table-wrap {
  overflow-x: auto;
  margin-top: 0.75rem;
}

.pricing-page .pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.pricing-page .pricing-table th,
.pricing-page .pricing-table td {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hp-border);
  text-align: left;
  vertical-align: top;
}

.pricing-page .pricing-table thead th {
  background: var(--hp-bg);
  font-weight: 700;
}

.pricing-page .pricing-table tbody th[scope="row"] {
  font-weight: 600;
  background: var(--hp-surface);
}

.pricing-page .pricing-future-version {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--hp-text-muted);
}

.pricing-page .pricing-includes-label {
  margin: 1rem 0 0;
  font-weight: 600;
}

/* ============================================================
   2026-06-19 (SEO content architecture): /learn/, /compare/,
   /examples/ styles. The classes are scoped to .guide-page,
   .compare-page, .learn-hub, .compare-hub, .examples-hub,
   .examples-vertical, and the .example-card-* / .guide-*
   helpers. They re-use the existing CSS variables
   (--hp-primary, --hp-border, --hp-bg, --hp-surface,
   --hp-text, --hp-text-muted) so no new design system is
   introduced. Most components collapse to single-column
   under 720px.
   ============================================================ */

/* ---------- Guide + compare shared chrome ---------- */
.guide-page,
.compare-page,
.learn-hub,
.compare-hub,
.examples-hub,
.examples-vertical {
  max-width: 880px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.guide-toc {
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 2rem;
}

.guide-toc-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hp-text-muted);
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.guide-toc-list {
  list-style: decimal;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--hp-text);
}

.guide-toc-list li {
  margin: 0.25rem 0;
}

.guide-toc-list a {
  color: var(--hp-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guide-section {
  margin: 2rem 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--hp-border);
}

.guide-section-h {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

.guide-section-body p {
  margin: 0 0 0.85rem;
  line-height: 1.6;
  color: var(--hp-text);
}

/* ---------- CTA block (shared by guides + compares) ---------- */
.guide-cta {
  background: linear-gradient(180deg, var(--hp-bg) 0%, var(--hp-surface) 100%);
  border: 1px solid var(--hp-border);
  border-radius: 12px;
  padding: 1.75rem;
  margin: 2.5rem 0 1.5rem;
  text-align: left;
}

.guide-cta-h {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.guide-cta-lead {
  margin: 0 0 1rem;
  color: var(--hp-text-muted);
  line-height: 1.5;
}

.guide-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.guide-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.7rem 1.1rem;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.guide-cta-btn--primary {
  background: var(--hp-primary);
  color: #fff;
}

.guide-cta-btn--primary:hover {
  background: var(--hp-primary-dark, var(--hp-primary));
}

.guide-cta-btn--ghost {
  background: transparent;
  color: var(--hp-text);
  border-color: var(--hp-border);
}

.guide-cta-btn--ghost:hover {
  border-color: var(--hp-text);
}

.guide-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hp-border);
  color: var(--hp-text-muted);
  font-size: 0.85rem;
}

.guide-footer-meta,
.guide-footer-related {
  margin: 0.25rem 0;
}

/* ---------- Learn hub cards ---------- */
.learn-grid-cards,
.compare-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}

.learn-card,
.compare-card {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--hp-border);
  border-radius: 10px;
  background: var(--hp-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.learn-card:hover,
.compare-card:hover {
  border-color: var(--hp-primary);
  transform: translateY(-1px);
}

.learn-card-eyebrow,
.compare-card-eyebrow {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
  margin: 0 0 0.5rem;
}

.learn-card-title,
.compare-card-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.learn-card-title a,
.compare-card-title a {
  color: var(--hp-text);
  text-decoration: none;
}

.learn-card-title a:hover,
.compare-card-title a:hover {
  color: var(--hp-primary);
  text-decoration: underline;
}

.learn-card-desc,
.compare-card-desc {
  margin: 0 0 0.75rem;
  color: var(--hp-text-muted);
  line-height: 1.45;
  font-size: 0.92rem;
}

.learn-card-foot,
.compare-card-foot {
  margin: 0;
  font-size: 0.85rem;
  color: var(--hp-text-muted);
}

.learn-card-foot a,
.compare-card-foot a {
  color: var(--hp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.learn-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.learn-related-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hp-border);
}

.learn-related-list li:last-child {
  border-bottom: 0;
}

/* ---------- Compare table ---------- */
.compare-table-section {
  margin: 1.5rem 0 2rem;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 0;
}

.compare-table th,
.compare-table td {
  padding: 0.85rem;
  border: 1px solid var(--hp-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.compare-table-side {
  background: var(--hp-bg);
}

.compare-table-side--right {
  background: var(--hp-surface);
  border-left: 3px solid var(--hp-primary);
}

.compare-table-eyebrow {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
  margin: 0 0 0.35rem;
}

.compare-table-name {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
}

.compare-table-summary {
  margin: 0;
  color: var(--hp-text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.compare-table-row-label {
  font-weight: 600;
  background: var(--hp-bg);
  width: 22%;
}

.compare-table-cell {
  color: var(--hp-text);
}

.compare-table-cell--right {
  background: var(--hp-surface);
}

.compare-table-verdict {
  padding: 1rem 0.85rem;
  background: var(--hp-bg);
  font-style: italic;
  color: var(--hp-text);
}

.compare-table-verdict strong {
  font-style: normal;
  color: var(--hp-primary);
  margin-right: 0.5rem;
}

.compare-verdict {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--hp-primary);
  background: var(--hp-bg);
  border-radius: 0 8px 8px 0;
}

.compare-verdict h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 800;
}

.compare-verdict p {
  margin: 0;
  line-height: 1.55;
}

/* ---------- Example cards ---------- */
.example-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}

.example-card {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--hp-border);
  border-radius: 10px;
  background: var(--hp-surface);
}

.example-card--missing {
  border-style: dashed;
  background: transparent;
  opacity: 0.92;
}

.example-card-hp {
  margin: 0 0 0.35rem;
}

.example-card-hp code {
  font-size: 0.78rem;
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  color: var(--hp-text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.example-card-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.example-card-title a {
  color: var(--hp-text);
  text-decoration: none;
}

.example-card-title a:hover {
  color: var(--hp-primary);
  text-decoration: underline;
}

.example-card-soon {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--hp-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.example-card-body {
  margin: 0 0 0.75rem;
  color: var(--hp-text);
  line-height: 1.5;
  font-size: 0.92rem;
}

.example-card-foot {
  margin: 0;
  font-size: 0.85rem;
  color: var(--hp-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.example-card-cta {
  color: var(--hp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.example-card-price,
.example-card-score {
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hp-text);
}

.example-card-note {
  font-style: italic;
}

.examples-verticals-list,
.examples-why {
  margin: 1.25rem 0 2rem;
}

.examples-verticals-list {
  list-style: none;
  padding: 0;
}

.examples-verticals-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hp-border);
}

.examples-verticals-list li:last-child {
  border-bottom: 0;
}

.examples-why p {
  line-height: 1.6;
  color: var(--hp-text);
}

/* ─── Smart 404 — “channel not found” infomercial TV static ───────
   Standalone page (src/404.html) served by Bunny for unknown URLs.
   Loud late-night-TV “no signal” beat; keeps the smart redirect logic
   in <head> untouched. */

.hp-404-page {
  --hp-404-blue: #0a1633;
  --hp-404-blue-deep: #07112a;
  --hp-404-gold: #ffd60a;
  --hp-404-red: #ff0000;
  margin: 0;
  min-height: 100vh;
  background: var(--hp-404-blue);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255, 214, 10, 0.08), transparent 55%),
    linear-gradient(180deg, #0e1a3a 0%, var(--hp-404-blue-deep) 100%);
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

.hp-404-header {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

.hp-404-logo {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
  line-height: 1;
}

.hp-404-logo span {
  color: var(--hp-404-gold);
}

.hp-404-infobar {
  background: var(--hp-404-red);
  border-bottom: 4px solid var(--hp-404-gold);
  text-align: center;
  padding: 6px 8px;
}

.hp-404-infobar-text {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(0.72rem, 2.4vw, 1.05rem);
  color: var(--hp-404-gold);
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 0.04em;
}

.hp-404-infobar-pulse {
  color: #ffffff;
  animation: hp-404-infobar-blink 0.55s steps(2, end) infinite;
}

@keyframes hp-404-infobar-blink {
  50% { opacity: 0; }
}

.hp-404-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.hp-404-stage {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .hp-404-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 2.5rem;
  }
}

.hp-404-tv {
  perspective: 800px;
}

.hp-404-tv-bezel {
  background: linear-gradient(145deg, #2a2a2a 0%, #111 40%, #0a0a0a 100%);
  border: 6px solid #1a1a1a;
  border-radius: 18px;
  padding: 1rem 1rem 1.25rem;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.08);
}

.hp-404-tv-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 3px solid #000;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
}

.hp-404-tv-static {
  /*
   * 2026-07-09 (master, per operator's "Set this image as the
   * background of our static TV mockup on the 404 page
   * @honest-pitches-web-public/src/assets/analog-tv-static.webp"):
   * the static noise is now a real CRT-noise PNG/WebP at
   * `/assets/analog-tv-static.webp` instead of two layered CSS
   * gradient stacks. The image is passthrough-copied by Eleventy
   * (`eleventy.config.js#addPassthroughCopy("src/assets")`), so
   * the URL is same-origin and the static site's CSP
   * `img-src 'self' data: ...` already permits it.
   *
   * Geometry: drop the prior `inset: -50%; width: 200%; height: 200%;`
   * oversize (which only made sense for the gradient pattern, so
   * the tile translation in `hp-404-static-flicker` had somewhere
   * to scroll within the clipped `.hp-404-tv-screen` box). For an
   * image, `inset: 0; background-size: cover; background-position:
   * center` fills the 4:3 screen cleanly at any viewport size.
   *
   * Flicker preserved: the `hp-404-static-flicker` keyframe now
   * applies a small `background-position` translation (a 1-3%
   * jitter) instead of a `transform: translate(...)`. A
   * `transform` on a `background-image` container is a no-op for
   * the painted image — it only moves the box, not the picture
   * inside it. The `prefers-reduced-motion: reduce` block at
   * line 5660 already kills this animation for users who opt
   * out, so a11y behaviour is unchanged.
   */
  position: absolute;
  inset: 0;
  background-image: url("/assets/analog-tv-static.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: hp-404-static-flicker 0.35s steps(3) infinite;
}

@keyframes hp-404-static-flicker {
  0% { background-position: 0% 0%; }
  33% { background-position: -2% 1%; }
  66% { background-position: 1% -2%; }
  100% { background-position: 0% 0%; }
}

.hp-404-tv-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 4px
  );
  mix-blend-mode: multiply;
}

.hp-404-tv-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.35),
    2px 2px 0 #000;
}

.hp-404-tv-channel {
  margin: 0 0 0.35rem;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  letter-spacing: 0.2em;
  color: var(--hp-404-gold);
  opacity: 0.95;
}

.hp-404-tv-headline {
  margin: 0;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(2rem, 8vw, 3.25rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: #ffffff;
  animation: hp-404-headline-jitter 2.5s ease-in-out infinite;
}

@keyframes hp-404-headline-jitter {
  0%, 100% { transform: translate(0, 0); }
  48% { transform: translate(0, 0); }
  49% { transform: translate(-1px, 0); }
  50% { transform: translate(1px, 1px); }
  51% { transform: translate(0, 0); }
}

.hp-404-tv-sub {
  margin: 0.75rem 0 0;
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.hp-404-tv-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding-right: 0.25rem;
}

.hp-404-tv-knob {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #666, #222 70%);
  border: 2px solid #000;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.hp-404-tv-knob--small {
  width: 18px;
  height: 18px;
}

.hp-404-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hp-404-lead {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.hp-404-path {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.92em;
  padding: 0.1rem 0.35rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 214, 10, 0.35);
  border-radius: 4px;
  color: var(--hp-404-gold);
  word-break: break-all;
}

.hp-404-jumpform {
  margin: 0;
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--hp-404-red);
}

.hp-404-page .hp-hero-jumpform-eyebrow,
.hp-404-page .hp-hero-jumpform-hint {
  color: #ffffff;
}

.hp-404-page .hp-hero-jumpform-input {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 2px solid #000;
  border-radius: 6px;
  background: #ffffff;
  color: #0a1633;
}

.hp-404-page .hp-hero-jumpform-input::placeholder {
  color: rgba(10, 22, 51, 0.45);
}

.hp-404-page .hp-hero-jumpform-input:focus {
  outline: 3px solid var(--hp-404-gold);
  outline-offset: 2px;
}

.hp-404-page .hp-hero-jumpform-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.65rem 1.1rem;
  border: 2px solid #000;
  border-radius: 8px;
  background: var(--hp-404-gold);
  color: #000;
  cursor: pointer;
  box-shadow: 0 4px 0 #000;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hp-404-page .hp-hero-jumpform-submit:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #000;
}

.hp-404-page .hp-hero-jumpform-example {
  color: rgba(255, 255, 255, 0.75);
}

.hp-404-page .hp-hero-jumpform-example code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--hp-404-gold);
}

.hp-404-section-title {
  margin: 0 0 0.75rem;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--hp-404-gold);
}

.hp-404-section-title em {
  font-style: normal;
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--hp-404-red);
  text-underline-offset: 3px;
}

.hp-404-channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.hp-404-channel-list a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 214, 10, 0.35);
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.hp-404-channel-list a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--hp-404-gold);
  transform: translateX(3px);
  text-decoration: none;
}

.hp-404-channel-code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  background: #000;
  color: var(--hp-404-gold);
  border-radius: 4px;
  white-space: nowrap;
}

.hp-404-channel-title {
  font-size: 0.95rem;
  line-height: 1.35;
}

.hp-404-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hp-404-nav-link {
  font-size: 0.92rem;
  color: var(--hp-404-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hp-404-nav-link:hover {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .hp-404-tv-static,
  .hp-404-tv-headline,
  .hp-404-infobar-pulse {
    animation: none;
  }
}

@media (max-width: 767px) {
  .hp-404-main {
    padding-top: 1.5rem;
  }

  .hp-404-page .hp-hero-jumpform-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hp-404-page .hp-hero-jumpform-submit {
    width: 100%;
    justify-content: center;
  }

  .hp-404-channel-list a {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}