/* Unseat audit v2 — landing page (/1/score)
 * Port of Landing from prototype landing.jsx. Uses tokens.css + motion.css.
 */

html, body { background: var(--bg-deep); }
body.audit-v2 {
  margin: 0;
  color: #e8e5f0;
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.lp-root {
  background: var(--bg-deep);
  color: #e8e5f0;
}

/* ───────────────────────────────────────────────────────────
   Shared helpers
─────────────────────────────────────────────────────────── */
.lp-grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lp-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-violet);
  margin-bottom: 14px;
}

/* ───────────────────────────────────────────────────────────
   HERO
─────────────────────────────────────────────────────────── */
.hero-section {
  background: var(--bg-deep);
  /* Top padding leaves 48px between brand header and ticker per
     LP polish spec §5. Bottom padding is 48px (trust strip →
     hero section end gap from §5). The 64px between hero end
     and audit-preview content is provided by audit-preview-
     section's own padding-top — keep both halves of the
     inter-section gap accountable to their owning section. */
  padding: 48px 40px 48px;
  position: relative;
  overflow: hidden;
}

.hero-ambient-1,
.hero-ambient-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-ambient-1 {
  background-image:
    radial-gradient(circle at 20% 30%, rgba(97,67,249,0.22) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(255,143,122,0.12) 0%, transparent 45%);
  filter: blur(40px);
}
.hero-ambient-2 {
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* Ambient orb — a single pronounced radial glow biased to the top-left
   of the hero. Brand-purple core fading through brand-violet to
   transparent. Sits underneath .hero-ambient-1/2 (source order),
   so the grid texture still reads on top of the glow. Previous
   .hero-ambient-1 at 0.22/0.12 alphas was so faint the dark hero
   read as blank — this is the visible atmospheric layer the page
   has been missing. No motion. */
.hero-orb {
  position: absolute;
  top: -180px;
  left: -160px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(143, 62, 186, 0.32) 0%,
      rgba(97, 67, 249, 0.18) 35%,
      transparent 70%);
  filter: blur(90px);
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero-orb {
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    height: 480px;
    filter: blur(70px);
  }
}
@media (max-width: 480px) {
  .hero-orb {
    width: 360px;
    height: 360px;
    filter: blur(50px);
    top: -100px;
  }
}

.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  /* Stack hero content above .hero-orb / .hero-ambient-* so background
     glows never compete with H1, form, or testimonial readability. */
  z-index: 2;
  width: 100%;
}

/* Legacy .hero-split kept as a no-op so any inline rule overrides
   don't blow up; the new single-column layout uses .hero-center. */
.hero-split { display: contents; }

.hero-center {
  /* Single-column centered hero per Score_Page_Design_Brief.md
     §"Layout: Single Column, Centered". Widened 820 → 1280 so
     the default headline ("Your buyers asked [Engine] who to
     pick.") fits on one line, and the longest ?h=pipeline
     variant ("Your pipeline isn't leaking. [Engine] is sending
     leads elsewhere.") stays at 2 lines. */
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-h1 {
  font-family: var(--font-display);
  /* Top-1% SaaS LP hero H1 — 56px desktop / weight 700 / -0.02em
     letter-spacing reads modern + commanding (Linear, Cal.com,
     Apollo). Prior values (max 44.8px / weight 800 / -0.035em)
     read polite and dated. Clamp upper-bound 56 ensures `?h=waste`
     (the longest variant) still wraps to ≤2 lines on ≥1280px
     viewports. Bottom margin is zero — adjacent .hero-subhead
     controls the H1 → subhead gap via its own margin-top so the
     spacing spec lives in one place. */
  font-size: clamp(1.875rem, 4.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.10;
  letter-spacing: -0.02em;
  margin: 0;
  color: #FFFFFF;
  text-wrap: balance;
}

/* ───────────────────────────────────────────────────────────
   HERO H1 ENGINE WORD (static "ChatGPT" everywhere)
   Was a 5-word rotator (ChatGPT / Gemini / Perplexity / Claude /
   Copilot) cycling on a 12.5s loop. Killed in feat/lp-static-
   engine: the multi-engine coverage now lives in the subhead
   ("across ChatGPT, Perplexity, Gemini, and Claude") and the H1
   carries a single, static engine word. ChatGPT is the lead
   engine since it dominates buyer-research share of voice; the
   other three are the supporting cast.
─────────────────────────────────────────────────────────── */
.hero-h1-engine {
  display: inline;
  color: #FFFFFF;
  font: inherit;
  white-space: nowrap;
}

.hero-sub {
  font-size: 1.08rem;
  line-height: 1.5;
  color: #c9c3d8;
  margin: 0 0 22px;
  max-width: 540px;
  text-wrap: pretty;
}

/* ───────────────────────────────────────────────────────────
   HERO TICKER (eyebrow, above H1)
   Plain centered eyebrow per LP polish spec §6.1 — was a
   purple-tinted pill; pills read like info chips, not eyebrows.
   12px / 600 / uppercase / 0.08em is the cold-traffic eyebrow
   convention (Linear, Vercel). Dot is rendered via the ●
   character in the markup, not CSS background — keeps it on
   the same text baseline as the count.
─────────────────────────────────────────────────────────── */
.hero-ticker {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}
.hero-ticker-dot {
  /* ● character (U+25CF) lives in the markup, not background.
     Small + green to read as a live-status indicator without
     stealing focus from the H1 directly below. No animation —
     a blinking eyebrow distracts on a high-intent LP. */
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  color: #22C55E;
  margin-right: 8px;
  line-height: 1;
  transform: translateY(-1px);
}
.hero-ticker-count {
  /* Number inherits eyebrow color/size; <strong> tag gives it
     visual weight without changing tone. Number sits inline with
     the label, separated by a thin space so "460 SaaS audits"
     reads as a single phrase. */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.hero-ticker-label {
  /* Span exists so it can carry its own weight if needed; for
     now it just inherits the eyebrow defaults. */
  font-weight: 600;
}

/* ───────────────────────────────────────────────────────────
   HERO SUBHEAD (under H1, above promises strip)
   Identical copy across all hook variants — no JS swap. <strong>
   inside emphasizes "AI Visibility Score" and "30 seconds" (the
   two value-prop nouns). Spec §4: 22px desktop / 17px mobile,
   weight 400 default, weight 600 inside <strong>, line-height
   1.45, max-width 720px, centered.
─────────────────────────────────────────────────────────── */
.hero-subhead {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
  max-width: 720px;
  margin: 24px auto 0;
  text-align: center;
  text-wrap: pretty;
}
.hero-subhead strong {
  font-weight: 600;
  color: #FFFFFF;
}

/* ───────────────────────────────────────────────────────────
   HERO PROMISES STRIP (3 bullets between subhead and form)
   Constant across all hooks. First bullet (the score itself) is
   wrapped in <strong> per spec §6.4 to anchor the primary
   promise. Desktop = single inline row; mobile (≤768px) stacks
   vertical with tighter gap. Bullet checkmarks (✓) are weight
   700 green, sit on the same text baseline as the bullet copy.
─────────────────────────────────────────────────────────── */
.hero-promises {
  list-style: none;
  padding: 0;
  /* 32px above (subhead → bullets) and 32px below (bullets → form)
     per LP polish spec §5. Owning both gaps on the bullets element
     keeps the form macro reusable on other pages without inheriting
     hero-specific spacing. */
  margin: 32px 0 32px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 32px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.hero-promise {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.hero-promise strong {
  font-weight: 600;
  color: #FFFFFF;
}
.hero-promise-check {
  /* ✓ character (U+2713) rendered as text — single-line height,
     accent-green, sits flush against the bullet copy via 8px
     right-margin (no inter-character spacing inside the <li>). */
  display: inline-block;
  font-weight: 700;
  color: #22C55E;
  font-size: 15px;
  line-height: 1;
  margin-right: 8px;
}

/* ── Domain field ─────────────────────────────────────────── */
.domain-form {
  max-width: 560px;
  width: 100%;
  /* In .hero-center (single-column centered hero) the form is
     centered via the parent flex's align-items. margin: 0 auto
     keeps it centered in other contexts too. */
  margin: 0 auto;
}
.domain-field {
  /* Outer bordered container per LP polish spec §6.5 — wraps the
     globe icon + domain input + CTA button as a single row. Matches
     .identity-field-input's affordance so the form reads as one
     coherent block. Focus state (when inner input gets :focus-within)
     transitions border to spec green. The .is-focused class is set
     by the form JS for browsers without :focus-within (we keep both
     for redundancy). Removes prior purple glow box-shadow. */
  display: flex;
  gap: 6px;
  padding: 6px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.domain-field:focus-within,
.domain-field.is-focused {
  border-color: #22C55E;
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}
.domain-field-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  flex: 1;
  min-width: 0;
}
.domain-field input {
  /* Inner input is borderless + transparent — the outer .domain-field
     owns the affordance. 16px font prevents iOS Safari auto-zoom on
     focus; padding 14px 0 matches the outer container's vertical
     rhythm. */
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-display);
  border: none;
  background: transparent;
  color: #FFFFFF;
  outline: none;
}
.domain-field input::placeholder { color: rgba(255, 255, 255, 0.45); }
.domain-globe { flex-shrink: 0; color: rgba(255, 255, 255, 0.45); }
.domain-chip {
  width: 20px; height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.domain-cta {
  /* Primary CTA per LP polish spec §3/§4 — solid #22C55E bg with
     near-black (#0A0A0F) text. Dark-on-green is the modern top-1%
     SaaS LP convention (Linear, Cal.com, Apollo) and out-contrasts
     white-on-green for accessibility. 17px / weight 700 / 14px×24px
     padding / 10px radius. Arrow inside the button gets 6px left
     margin via the macro markup. Pulse-glow animation preserved
     for residual "this is alive" cue on idle; on hover it stops
     and a steady shadow takes over. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 24px;
  background: #22C55E;
  color: #0A0A0F;
  border: none;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 200ms ease;
  animation: ctaPulseGlow 3s ease-in-out infinite;
}
.domain-cta:hover {
  background: #16A34A;
  animation: none;
  box-shadow: 0 6px 22px rgba(34, 197, 94, 0.35);
}
.domain-cta:active {
  transform: translateY(1px);
  animation: none;
}
.domain-cta:focus-visible {
  outline: 2px solid #22C55E;
  outline-offset: 3px;
  animation: none;
}
.domain-field.is-validated .domain-cta { background: #16A34A; }
@keyframes ctaPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50%      { box-shadow: 0 0 20px 6px rgba(34, 197, 94, 0.15); }
}
.domain-hint {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: #8a8498;
  letter-spacing: 0.04em;
  min-height: 18px;
  transition: color 0.2s;
}
.domain-hint.is-validated { color: #86efac; }

/* ───────────────────────────────────────────────────────────
   CITATION → CONVERSATION (light)
─────────────────────────────────────────────────────────── */
.cite-section {
  background: #f8f6f2;
  color: #1a1035;
  padding: 88px 40px 120px;
}
.cite-inner { max-width: 1100px; margin: 0 auto; }
.cite-head { max-width: 760px; margin-bottom: 44px; }
.cite-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #1a1035;
  margin: 0 0 14px;
  text-wrap: balance;
}
.cite-sub {
  font-size: 0.98rem;
  font-weight: 600;
  color: #1a1035;
  margin: 0;
}
.cite-intro { max-width: 760px; margin-bottom: 36px; }
.cite-intro p { margin: 0 0 14px; }
.cite-intro p:last-child { margin-bottom: 0; font-weight: 600; color: #1a1035; }
.cite-intro .lead { font-size: 1rem; color: #4a4560; line-height: 1.65; }
.cite-intro .emph { font-size: 0.98rem; color: #1a1035; line-height: 1.65; font-weight: 600; }

.citation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

.ai-mockup {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(26,16,53,0.1);
  box-shadow: 0 12px 32px rgba(26,16,53,0.08);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.ai-mockup-head {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(26,16,53,0.06);
  background: #fafaf7;
  display: flex; align-items: center; justify-content: space-between;
}
.ai-mockup-engine {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #6b6580;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ai-mockup-engine-dot {
  width: 7px; height: 7px;
  background: var(--brand-violet);
  border-radius: 50%;
  animation: lpPulse 2.4s ease-in-out infinite;
}
.ai-mockup-date {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #a39ead;
  letter-spacing: 0.08em;
}
.ai-mockup-body { padding: 18px 20px 20px; }
.ai-mockup-prompt {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: #1a1035;
  margin-bottom: 14px;
  line-height: 1.35;
  text-wrap: balance;
  min-height: 2.5em;
}
.ai-mockup-rows {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.ai-mockup-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid rgba(26,16,53,0.08);
  border-radius: 8px;
}
.ai-mockup-rank {
  width: 20px; height: 20px;
  background: rgba(26,16,53,0.06);
  color: #4a4560;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.64rem;
  font-weight: 800;
  font-family: var(--font-display);
}
.ai-mockup-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1035;
}
.ai-mockup-note {
  font-weight: 400;
  color: #8a8498;
  margin-left: 6px;
  font-size: 0.78rem;
}
.ai-mockup-check { color: var(--brand-violet); }
.ai-mockup-missing {
  padding: 12px 14px;
  background: rgba(237,59,62,0.06);
  border: 1px dashed rgba(237,59,62,0.35);
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
}
.ai-mockup-missing-dash {
  width: 20px; height: 20px;
  background: rgba(237,59,62,0.12);
  color: #ed3b3e;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.ai-mockup-missing-body { flex: 1; min-width: 0; }
.ai-mockup-missing-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a1035;
  text-decoration: line-through;
  text-decoration-color: rgba(237,59,62,0.5);
}
.ai-mockup-missing-tag {
  font-size: 0.76rem;
  color: #b91c1c;
  margin-top: 2px;
  font-weight: 600;
}
.ai-mockup-missing-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: #ed3b3e;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}

.cite-payoff {
  max-width: 780px;
  margin: 0 0 52px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1035;
  line-height: 1.45;
  text-wrap: balance;
}

/* Agency vs Suite compare */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(26,16,53,0.08);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.compare-col {
  padding: 32px 32px 30px;
}
.compare-col--agency {
  background: rgba(237,59,62,0.04);
  border-right: 1px solid rgba(26,16,53,0.08);
}
.compare-col--suite { background: rgba(97,67,249,0.04); }
.compare-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.compare-col--agency .compare-eyebrow { color: var(--brand-red); }
.compare-col--suite .compare-eyebrow { color: var(--brand-violet); }
.compare-big {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.compare-col--agency .compare-big { color: var(--brand-red); }
.compare-col--suite .compare-big { color: var(--brand-violet); }
.compare-unit {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1035;
  margin-bottom: 14px;
}
.compare-unit sup {
  font-weight: 500;
  font-size: 0.7em;
  color: #6b6580;
}
.compare-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.compare-list li {
  font-size: 0.88rem;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.compare-col--agency .compare-list li { color: #4a4560; }
.compare-col--suite .compare-list li { color: #1a1035; }
.compare-col--agency .compare-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 10px; height: 2px;
  background: var(--brand-red);
  opacity: 0.6;
}
.compare-col--suite .compare-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 11px; height: 11px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16'><path d='M3 8l3 3 7-7' fill='none' stroke='%236143F9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
}
.cite-footnote {
  margin-top: 14px;
  font-size: 0.76rem;
  color: #8a8498;
  line-height: 1.5;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.cite-footnote .cite-source { color: #a39ead; }

/* ───────────────────────────────────────────────────────────
   MID CTA (dark)
─────────────────────────────────────────────────────────── */
.midcta-section {
  background: var(--bg-deep);
  color: #e8e5f0;
  padding: 120px 40px;
  position: relative;
  overflow: hidden;
}
.midcta-aura {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px; height: 500px;
  background: radial-gradient(ellipse, rgba(97,67,249,0.15) 0%, transparent 65%);
  filter: blur(60px);
  pointer-events: none;
}
.midcta-inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.midcta-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 16px;
  text-wrap: balance;
}
.midcta-lead {
  font-size: 1.08rem;
  color: #c9c3d8;
  line-height: 1.55;
  margin: 0 auto 40px;
  max-width: 620px;
}
.midcta-card {
  background: rgba(17,17,24,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(143,62,186,0.2);
  border-radius: 16px;
  padding: 36px 40px;
  margin: 0 auto 40px;
  max-width: 640px;
  text-align: left;
}
.midcta-card-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-purple);
  margin-bottom: 22px;
  text-align: center;
}
.promise-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.promise-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  align-items: flex-start;
}
.promise-big {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: right;
}
.promise-unit {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.promise-text {
  font-size: 0.9rem;
  color: #a9a3b8;
  line-height: 1.55;
}
.midcta-assurance {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #8a8498;
  letter-spacing: 0.06em;
}
.midcta-domain-wrap { max-width: 520px; margin: 0 auto; }

/* ───────────────────────────────────────────────────────────
   FAQ (light)
─────────────────────────────────────────────────────────── */
.faq-section {
  background: #f8f6f2;
  color: #1a1035;
  padding: 96px 40px;
}
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq-head { margin-bottom: 40px; }
.faq-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #1a1035;
  margin: 0;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: #fff;
  border: 1px solid rgba(26,16,53,0.08);
  border-radius: 12px;
  padding: 20px 26px;
  transition: all 0.25s;
}
.faq-item[open],
.faq-item.is-open {
  background: rgba(97,67,249,0.05);
  border-color: rgba(97,67,249,0.25);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: #1a1035;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-toggle {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(97,67,249,0.12);
  color: var(--brand-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s;
}
.faq-item[open] .faq-toggle,
.faq-item.is-open .faq-toggle {
  background: var(--grad-brand);
  color: #fff;
  transform: rotate(180deg);
}
.faq-a {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #4a4560;
}

/* ───────────────────────────────────────────────────────────
   FINAL CTA (dark)
─────────────────────────────────────────────────────────── */
.finalcta-section {
  background: var(--bg-deep);
  color: #e8e5f0;
  padding: 130px 40px 110px;
  position: relative;
  overflow: hidden;
}
.finalcta-aura {
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 700px;
  background: radial-gradient(ellipse, rgba(97,67,249,0.2) 0%, rgba(255,143,122,0.08) 40%, transparent 65%);
  filter: blur(60px);
  pointer-events: none;
}
.finalcta-inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.finalcta-h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 20px;
  text-wrap: balance;
}
.finalcta-lead {
  font-size: 1.05rem;
  color: #c9c3d8;
  line-height: 1.55;
  margin: 0 auto 8px;
  max-width: 580px;
}
.finalcta-emph {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 36px;
}
.finalcta-domain-wrap { max-width: 540px; margin: 0 auto; }
.finalcta-assurance {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #8a8498;
  letter-spacing: 0.06em;
}
.finalcta-tagline {
  margin-top: 72px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ───────────────────────────────────────────────────────────
   FOOTER
─────────────────────────────────────────────────────────── */
.lp-footer {
  background: var(--bg-deep);
  color: #8a8498;
  padding: 32px 40px 48px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.82rem;
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.lp-footer a { color: #c9b6ff; text-decoration: none; margin: 0 8px; }
.lp-footer a:hover { text-decoration: underline; }
.lp-footer-disclaimer {
  /* Standard trademark + Meta non-affiliation language. Small font,
     desaturated, mono — clearly subordinate to the © line above. The
     marks shown elsewhere on the page (ChatGPT, Claude, Gemini,
     Perplexity, Copilot) are used under nominative-fair-use; the
     Meta non-affiliation line is required-by-convention for sites
     running Meta ad traffic. */
  margin-top: 16px;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.55;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
}
.lp-footer-disclaimer p {
  margin: 0 0 6px;
}
.lp-footer-disclaimer p:last-child {
  margin-bottom: 0;
}

/* ───────────────────────────────────────────────────────────
   STICKY MOBILE CTA
─────────────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  padding: 12px 16px;
  background: rgba(10,10,15,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(143,62,186,0.2);
  display: none;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: #22c55e;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 18px;
  border-radius: 10px;
  font-family: var(--font-display);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sticky-cta-btn:hover { background: #16a34a; }
.sticky-cta-btn:active { background: #15803d; }
body.has-sticky-cta { padding-bottom: 80px; }

/* ───────────────────────────────────────────────────────────
   RESPONSIVE
   Breakpoints per LP polish spec §4/§6: 1280 tablet / 768 mobile
   / 600 trust-strip-stack / 480 iPhone-SE. Below-hero sections
   (audit-preview, cite, midcta, finalcta, faq)
   keep their own historical breakpoint logic.
─────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  /* Tablet H1 per spec §4: 44px / 700 / -0.02em / 1.12 */
  .hero-h1 {
    font-size: 44px;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 900px) {
  .hero-section { padding: 40px 24px 48px; }
  .hero-center { max-width: 100%; }
  .hero-sub { max-width: 100%; }
  .audit-preview-section { padding: 64px 24px 72px; }
  .audit-preview-section-inner { max-width: 100%; }
  .hero-audit-preview { padding: 22px 22px 18px; }
  .post-testimonial-cta { padding: 0 24px 32px; }
  .cite-section { padding: 72px 24px 88px; }
  .citation-grid { grid-template-columns: 1fr; gap: 18px; }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-col--agency { border-right: none; border-bottom: 1px solid rgba(26,16,53,0.08); }
  .midcta-section { padding: 88px 24px; }
  .midcta-card { padding: 28px 24px; }
  .finalcta-section { padding: 96px 24px 80px; }
  .faq-section { padding: 72px 24px; }
  /* Sticky bottom CTA shows on tablet + mobile after the hero
     scrolls out of view (JS toggles .is-visible). Hidden by
     default on desktop where the in-page CTAs are visible. */
  .sticky-cta { display: block; }
}

@media (max-width: 768px) {
  /* Mobile H1 per spec §4: 36px / 700 / -0.015em / 1.15 */
  .hero-h1 {
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.015em;
  }
  /* Mobile subhead per spec §4: 17px / 1.4 (tightened from 1.5 in
     polish pass 2). */
  .hero-subhead {
    font-size: 17px;
    line-height: 1.4;
  }
  /* Bullets stack vertical per spec §5: gap 12px, left-aligned
     inside the centered hero so they don't drift center-by-row. */
  .hero-promises {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 32px auto;
    max-width: 360px;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .hero-section { padding: 36px 18px 36px; }
  .audit-preview-section { padding: 56px 18px 60px; }
  .audit-preview-section-h2 { font-size: 1.5rem; }
  .hero-audit-preview { padding: 18px 16px; border-radius: 16px; }
  /* Stack dial above meta on narrow widths so the meta copy has
     full readable column-width instead of getting squeezed next
     to the 128px dial. */
  .hero-audit-preview-score-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-audit-preview-dial-wrap,
  .hero-audit-preview-dial { width: 112px; height: 112px; }
  .hero-audit-preview-dial-num { font-size: 2.1rem; }
  .hero-audit-preview-fix-rank { gap: 8px; }
  .hero-audit-preview-fix-metric { align-items: flex-start; }
  .post-testimonial-cta { padding: 0 18px 28px; }
  .post-testimonial-cta-line { font-size: 0.98rem; }
  /* Form: stack input + button vertically on narrow phones so
     the CTA gets full-width touch target. Field heights tighter
     (smaller vertical padding) with larger text inside per
     mobile-feedback round on 2026-05-12: "smaller fields,
     bigger text". */
  .domain-field { flex-direction: column; gap: 8px; padding: 6px; }
  .domain-field-inner { padding: 2px 12px; min-height: 44px; }
  .domain-field input { padding: 11px 0; font-size: 16px; }
  .domain-cta { padding: 14px 18px; justify-content: center; width: 100%; font-size: 16px; }
  .cite-section { padding: 56px 16px 72px; }
  /* Hide mid/post-testimonial in-page CTAs on mobile — the
     sticky bottom bar always carries the action, so duplicating
     forms on the scroll just adds drag. Headlines + promise
     cards stay visible for the informational beat. */
  .post-testimonial-cta { display: none; }
  .midcta-domain-wrap { display: none; }
  .midcta-assurance { display: none; }
  .midcta-section { padding: 56px 16px 32px; }
  .midcta-card { padding: 24px 18px; }
  .promise-row { grid-template-columns: 56px 1fr; gap: 14px; }
  .promise-big { font-size: 2.4rem; }
  .finalcta-section { padding: 80px 16px 72px; }
  .faq-section { padding: 56px 16px; }
  .faq-item { padding: 16px 18px; }
  .lp-footer { padding: 24px 18px 40px; font-size: 0.75rem; }
}

@media (max-width: 768px) {
  /* Testimonial drops to 16px quote + tighter top-margin on phones.
     Avatar shrinks from 64 → 56 so it doesn't dominate the narrow
     column. */
  .hero-testimonial {
    max-width: 90%;
    margin-top: 28px;
  }
  .hero-testimonial-avatar {
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
  }
  .hero-testimonial-quote {
    font-size: 16px;
    line-height: 1.55;
  }
  .hero-testimonial-attribution {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .hero-section { padding: 28px 14px 28px; }
  /* iPhone-SE H1 per spec §4: 30px / 700 / -0.01em / 1.18 */
  .hero-h1 {
    font-size: 30px;
    line-height: 1.18;
    letter-spacing: -0.01em;
  }
  .audit-preview-section { padding: 48px 14px 52px; }
  .audit-preview-section-h2 { font-size: 1.35rem; }
  .hero-audit-preview-fix-num { font-size: 1.2rem; }
  .hero-audit-preview-fix-title { font-size: 0.95rem; }
  .hero-audit-preview-fix-body { font-size: 0.84rem; }
  .cite-title { font-size: 1.65rem; }
}

/* ───────────────────────────────────────────────────────────
   ENGINE COVERAGE ROW (inside hero, between subhead and bullets)
   Compact, label-less mark strip signaling cross-engine coverage.
   Moved from below-hero to inside-hero (top-1% conversion pattern:
   reframe product scope BEFORE the form, so users enter the
   conversion with the right mental model). Hierarchy stays
   intact: Brooklyn's testimonial is the higher-leverage trust
   signal and continues to anchor the hero close.
   Mono treatment via fill: currentColor on inlined SVGs.
─────────────────────────────────────────────────────────── */
.engine-coverage {
  /* Inside-hero placement: no background, no padding; let
     .hero-center's column gap + this element's margins control
     vertical rhythm. The .hero-engine-row modifier is a marker
     for future variants — base rules already assume inside-hero. */
  margin: 14px 0 4px;
  width: 100%;
}
.engine-coverage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  width: 100%;
}
.engine-coverage-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.62);
  transition: color 150ms ease;
}
.engine-coverage-item:hover {
  color: rgba(255, 255, 255, 0.95);
}
.engine-coverage-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}
.engine-coverage-mark > svg {
  width: 100%;
  height: 100%;
  display: block;
}
.engine-coverage-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: inherit;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .engine-coverage {
    margin: 10px 0 2px;
  }
  .engine-coverage-list {
    gap: 14px 18px;
  }
  .engine-coverage-mark {
    width: 16px;
    height: 16px;
  }
  .engine-coverage-label {
    font-size: 11px;
  }
}

/* ───────────────────────────────────────────────────────────
   AUDIT PREVIEW SECTION (standalone, below hero)
   Per brief: "moved below the fold as a 'Here's what your
   report looks like' section." Holds the audit-preview card
   that previously lived in the hero right column.
─────────────────────────────────────────────────────────── */
.audit-preview-section {
  background: var(--bg-deep);
  /* Top padding is 64px per LP polish spec §6.8 — the inter-section
     gap between hero end and "Here's what your report looks like."
     Was previously clamp(40-80px), which combined with hero's
     padding-bottom produced a 180-220px visual gap that broke
     scan rhythm. Bottom padding preserved at its prior fluid value. */
  padding: 64px 40px clamp(56px, 7vh, 96px);
  position: relative;
}
.audit-preview-section-inner {
  max-width: 720px;
  margin: 0 auto;
}
.audit-preview-section-head {
  text-align: center;
  margin-bottom: 32px;
}
.audit-preview-section-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 6px 0 0;
}

/* ───────────────────────────────────────────────────────────
   HERO AUDIT PREVIEW CARD (now inside .audit-preview-section)
   Real-component preview: Unseat Rating dial + #1-priority fix
   block, populated with sample data. Same visual language as the
   reveal page so cold traffic sees the exact thing they'll get.
─────────────────────────────────────────────────────────── */
.hero-audit-preview {
  /* Lifted card that visually floats above the page background.
     Base is a slightly purple-tinted dark gray (#22223a) sitting
     about 8% lighter than the page's --bg-deep so it reads as
     a "screenshot of a real report" floating on top, not part
     of the page. Subtle amber radial echoes the 61/100 score's
     mid-range band. */
  background:
    radial-gradient(circle at 100% 0%, rgba(224,164,41,0.06) 0%, transparent 55%),
    linear-gradient(180deg, rgba(143,62,186,0.04) 0%, rgba(143,62,186,0) 70%),
    #22223a;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 26px 28px 22px;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.04) inset;
  position: relative;
  overflow: hidden;
}
.hero-audit-preview::before {
  /* faint grid texture echoing hero-ambient-2, keeps card from
     reading flat against the hero gradient backdrop */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, transparent 65%);
  mask-image: radial-gradient(ellipse at top right, black 0%, transparent 65%);
  pointer-events: none;
}
.hero-audit-preview > * { position: relative; z-index: 1; }

.hero-audit-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.hero-audit-preview-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-violet);
}
.hero-audit-preview-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-violet);
  box-shadow: 0 0 8px var(--brand-violet);
  animation: lpPulse 2.4s ease-in-out infinite;
}
.hero-audit-preview-sample {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8498;
  padding: 3px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 4px;
}

/* Score dial — adapted from .rv-dial in reveal.css ─────────── */
.hero-audit-preview-score-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 18px;
}
.hero-audit-preview-dial-wrap {
  position: relative;
  width: 128px;
  height: 128px;
  flex-shrink: 0;
}
.hero-audit-preview-dial {
  position: absolute;
  inset: 0;
  width: 128px;
  height: 128px;
}
.hero-audit-preview-dial-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-audit-preview-dial-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-audit-preview-dial-denom {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8498;
  margin-top: 4px;
}
.hero-audit-preview-score-meta { min-width: 0; flex: 1; }
.hero-audit-preview-score-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 4px;
}
.hero-audit-preview-score-tag {
  font-family: var(--font-display);
  font-size: 0.84rem;
  color: #a8a3b8;
  line-height: 1.5;
  margin: 0;
}

/* #1 priority fix — adapted from .free-fix-card on results.html */
.hero-audit-preview-fix-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.hero-audit-preview-fix-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff 0%, #c9b6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.hero-audit-preview-fix-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(237,59,62,0.10);
  border: 1px solid rgba(237,59,62,0.25);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff8f7a;
}
.hero-audit-preview-fix-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ED3B3E;
  box-shadow: 0 0 8px #ED3B3E;
}
.hero-audit-preview-fix-spacer { flex: 1; }
.hero-audit-preview-fix-metric {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.hero-audit-preview-fix-metric-num {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.hero-audit-preview-fix-metric-denom {
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b6580;
  margin-left: 1px;
}
.hero-audit-preview-fix-metric-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8498;
  margin-top: 4px;
}
.hero-audit-preview-fix-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.hero-audit-preview-fix-body {
  font-family: var(--font-display);
  font-size: 0.88rem;
  line-height: 1.55;
  color: #c9c3d8;
  margin: 0;
}
.hero-audit-preview-fix-body code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 1px 6px;
  background: rgba(143,62,186,0.14);
  border: 1px solid rgba(143,62,186,0.22);
  border-radius: 4px;
  color: #e8d8ff;
}

/* ───────────────────────────────────────────────────────────
   HERO AUDIT PREVIEW — 6 audit-area grid
   Below the #1 fix block. 2×3 grid on desktop, single column on
   mobile. Each cell: violet check icon + bold name + muted desc.
─────────────────────────────────────────────────────────── */
.hero-audit-preview-areas {
  margin-top: 18px;
}
.hero-audit-preview-areas-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 20%, rgba(255,255,255,0.10) 80%, transparent 100%);
  margin-bottom: 18px;
}
.hero-audit-preview-areas-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-violet);
  margin-bottom: 14px;
}
.hero-audit-preview-areas-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}
@media (max-width: 560px) {
  .hero-audit-preview-areas-grid { grid-template-columns: 1fr; gap: 12px; }
}
.hero-audit-preview-area {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.hero-audit-preview-area-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(143,62,186,0.16);
  border: 1px solid rgba(143,62,186,0.32);
  color: var(--brand-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.hero-audit-preview-area-body { min-width: 0; flex: 1; }
.hero-audit-preview-area-name {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.hero-audit-preview-area-desc {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  color: #a8a3b8;
  line-height: 1.4;
}
.hero-audit-preview-areas-tagline {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  color: #c9c3d8;
  text-align: center;
  letter-spacing: -0.005em;
}

.hero-audit-preview-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(143,62,186,0.22);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-audit-preview-foot-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-violet);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(97,67,249,0.4);
}

/* ───────────────────────────────────────────────────────────
   POST-TESTIMONIAL CTA (between hero and cite-section)
   Slim, copy-free. Just a one-liner + the domain form. The
   testimonial above carries the lead-in; this gives readers
   an immediate next action while Brooklyn's quote is fresh.
─────────────────────────────────────────────────────────── */
.post-testimonial-cta {
  background: var(--bg-deep);
  padding: 0 40px 40px;
}
.post-testimonial-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.post-testimonial-cta-line {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #c9c3d8;
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}

/* ───────────────────────────────────────────────────────────
   CTA RISK-REVERSAL LINE
   Single inline whisper directly under .domain-hint. Verbatim:
   "Free. 30 seconds. No card. No sales call. Ever." Reads as
   reassurance, not a form widget. Per LP polish spec §4: 14px /
   400 / 1.4 / rgba(255,255,255,0.45) — quietest text on the
   page so it whispers, not competes.
─────────────────────────────────────────────────────────── */
.domain-assurance {
  /* Tightened from 16 → 4 to bring the risk-reversal line up
     close to the button — pre-deploy the gap was ~46px (button →
     domain-hint reserved 28px → assurance 16px margin); now ~32px.
     The empty domain-hint slot still reserves space so the
     assurance doesn't jump when validation messages appear. */
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0;
  text-align: center;
}

/* ───────────────────────────────────────────────────────────
   HERO TESTIMONIAL (Brooklyn Grotte quote, sits below the form)
   Italic body, roman attribution. Curly typographic quotes
   render at U+201C/U+201D in the markup. Headshot is a 64×64
   circle centered above the quote — small enough to read as
   attribution support, not a photo block. Sits as the closing
   social-proof anchor before the audit-preview section.
─────────────────────────────────────────────────────────── */
.hero-testimonial {
  max-width: 640px;
  margin: 36px auto 0;
  padding: 0;
  text-align: center;
}

.hero-testimonial-avatar {
  /* 64px circle, centered above the quote. Subtle 2px ring in the
     same amber tint as the trust-badge stars so the photo reads as
     part of the social-proof block, not a stray asset. object-fit
     cover handles non-square source images defensively. */
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35);
}

.hero-testimonial-quote {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0;
}

.hero-testimonial-attribution {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.hero-testimonial-name {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  margin-bottom: 4px;
}

.hero-testimonial-credentials {
  display: block;
  font-weight: 400;
}

.hero-testimonial-role {
  color: rgba(255, 255, 255, 0.6);
}

.hero-testimonial-sep {
  color: rgba(255, 255, 255, 0.3);
}

.hero-testimonial-spend {
  color: rgba(255, 255, 255, 0.6);
}

/* ───────────────────────────────────────────────────────────
   REDUCED MOTION
─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-ticker-dot { animation: none; }
  .ai-mockup-engine-dot { animation: none; }
  .sticky-cta { transition: none; }
  .hero-audit-preview-eyebrow-dot { animation: none; }
  /* Kill the CTA pulse-glow for motion-sensitive users; keep
     the button solid green with a steady (non-animating) shadow. */
  .domain-cta { animation: none; box-shadow: 0 4px 18px rgba(34, 197, 94, 0.2); }
}

/* ───────────────────────────────────────────────────────────
   HEADER TAGLINE (logo · "AI Visibility Audits for Brands")
   The base .unseat-header-inner rule lives in tokens.css (max-
   width + auto margin). This block adds the flex layout that the
   tagline needs without touching tokens.css. The override is
   safe at equal specificity because landing.css loads after
   tokens.css in the template, so cascade order wins. Tagline
   hidden at ≤600px per LP polish pass 2 §10.
─────────────────────────────────────────────────────────── */
.unseat-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.unseat-tagline {
  display: inline-flex;
  align-items: center;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .unseat-tagline {
    display: none;
  }
}