/*
  styles.css — ReplyMasters (a service of 7 Figure Fast Track)
  Vanilla CSS3. No preprocessor, no framework, no build step.
  Mobile-first; desktop rules live inside min-width media queries.
  V2: same color/token system as V1 — additions
  only for the new trust strip, DIY value-framing section, mobile
  example expansion, and the elevated positioning statement.
*/

/* ---------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------- */
:root {
  /* Palette: clean, credible, premium, human, simple (brief Section 30).
     Light background + generous white space, restrained accent color. */
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f8fb;
  --color-bg-dark: #0f1720;
  --color-text: #1a2233;
  --color-text-muted: #55617a;
  --color-text-on-dark: #eef1f6;
  --color-text-on-dark-muted: #aab3c5;
  --color-border: #e4e7ee;
  --color-border-strong: #cbd1de;

  --color-accent: #1d4ed8;        /* confident blue — primary CTA */
  --color-accent-hover: #1739ab;
  --color-accent-soft: #e8eefd;
  --color-gold: #b8862c;          /* restrained "fast track" gold, used sparingly */
  --color-gold-soft: #fbf1de;

  --color-success-bg: #eaf7ef;
  --color-success-text: #1f7a3d;
  --color-warn-bg: #fdf3e7;
  --color-warn-text: #9a5b12;
  --color-negative-bg: #fdeeee;
  --color-negative-text: #a5311f;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.12);

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  --max-width: 1180px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0ms; --transition-base: 0ms; }
}

/* ---------------------------------------------------------------
   2. Reset / base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Never suppress default focus rings without replacing them (Section 23). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 1rem; }

/* V2: tightened from --space-7/--space-8 (and the desktop
   bump reduced further, from --space-7 to --space-6) to compress
   overall page length per the conversion-density objective — still
   generous, not cramped (see REVIEW_NOTES.md for the measured
   before/after; the initial pass under-shot the 20-30% desktop target,
   this second pass closed most of that gap). */
section { padding-block: var(--space-5); }
@media (min-width: 800px) { section { padding-block: var(--space-6); } }

.section-inner { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-4); }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); line-height: 1.2; font-weight: 800; letter-spacing: -0.005em; }
h3 { font-size: 1.2rem; line-height: 1.35; font-weight: 700; }

.section-head { max-width: 760px; margin-bottom: var(--space-5); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: 1.05rem; }

.lede { font-size: 1.15rem; color: var(--color-text-muted); }

/* ---------------------------------------------------------------
   3. Buttons
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  min-height: 48px; /* touch target */
}
.btn:active { transform: translateY(1px); }
/* Disabled/sending state — applies to the form's
   submit button while a request is in flight or after a completed
   success, so the state is visually obvious, not just programmatic. */
.btn:disabled,
.btn[aria-busy="true"] {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-md); }

.btn-secondary {
  background: #fff;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn-block { width: 100%; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.05rem; }

.microcopy { font-size: 0.85rem; color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------------------------------------------------------------
   4. Header / nav
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
/* V2 wordmark treatment: stronger typographic
   ReplyMasters wordmark + a simple abstract mark (a checkmark inside a
   rounded square) instead of the V1 "7F" prototype-style monogram.
   Colors unchanged — same navy/blue/gold family as V1. */
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-gold));
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 18px; height: 18px; }
.nav-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
}
.nav-toggle .bar { display: block; width: 20px; height: 2px; background: var(--color-text); margin: 4px 0; }

.nav-links {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  flex-direction: column;
  gap: var(--space-3);
}
.nav-links.is-open { display: flex; }
.nav-links a { font-weight: 600; padding: 0.4rem 0; }
.nav-links .btn { align-self: flex-start; }

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .nav-links {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    gap: var(--space-5);
  }
  .nav-links a:not(.btn) { font-weight: 600; color: var(--color-text-muted); }
  .nav-links a:not(.btn):hover { color: var(--color-text); }
}

/* ---------------------------------------------------------------
   5. Hero
   --------------------------------------------------------------- */
.hero { padding-block: var(--space-6); background: linear-gradient(180deg, var(--color-bg-subtle), #fff 70%); }
.hero-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-7); } }

.hero-copy p.lede { margin-top: var(--space-4); max-width: 46ch; }
.hero-support { margin-top: var(--space-3); font-weight: 600; }
.hero-cta { margin-top: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }

.hero-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.hero-card .offer-count { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.hero-card .offer-label { color: var(--color-text-muted); margin-top: 0.4rem; }
.hero-card .offer-price { margin-top: var(--space-4); display: flex; align-items: baseline; gap: 0.5rem; }
.hero-card .offer-price .amount { font-size: 2rem; font-weight: 800; color: var(--color-accent); }
.hero-card .offer-price .terms { color: var(--color-text-muted); font-size: 0.95rem; }
.hero-card .btn { margin-top: var(--space-4); }
.hero-card .review-preview { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--color-border); font-size: 0.92rem; color: var(--color-text-muted); }

/* Personalized-hero emphasis (V2, Section 7): lets the "your replies
   are already written" line carry more visual weight than the plain
   "we found N reviews" line, within the same H1. */
.h1-emphasis { color: var(--color-accent); }

.stars { color: var(--color-gold); letter-spacing: 0.1em; font-size: 0.95rem; }

/* Trust strip (V2, Section 6): factual service attributes only —
   never a fabricated social-proof/trust-badge treatment. */
.trust-strip {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.trust-strip .check {
  color: var(--color-success-text);
  font-weight: 800;
  flex-shrink: 0;
}

.mechanism-line { margin-top: var(--space-3); font-size: 1.02rem; font-weight: 600; max-width: 50ch; }

/* ---------------------------------------------------------------
   6. Pain section
   --------------------------------------------------------------- */
.pain-copy { max-width: 62ch; margin-inline: auto; text-align: center; }
.pain-copy p { font-size: 1.12rem; color: var(--color-text-muted); margin-top: var(--space-3); }
.pain-conclusion {
  margin-top: var(--space-5);
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 800;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------
   7. How it works — steps
   --------------------------------------------------------------- */
.steps { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.step-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.step-number {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.step-card p { margin-top: var(--space-2); color: var(--color-text-muted); }

.callout {
  margin-top: var(--space-5);
  text-align: center;
  font-weight: 700;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

/* ---------------------------------------------------------------
   8. Review example cards (product demonstration)
   --------------------------------------------------------------- */
.example-grid { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .example-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .example-grid { grid-template-columns: repeat(3, 1fr); } }

.example-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.example-review { padding: var(--space-4); border-bottom: 1px dashed var(--color-border); }
.example-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.example-review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.reviewer-name { font-weight: 700; font-size: 0.95rem; }
.example-review p { color: var(--color-text-muted); font-size: 0.95rem; }
.example-response { padding: var(--space-4); background: var(--color-bg-subtle); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.response-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent); }
.example-response p { font-size: 0.95rem; }
.example-tag {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-gold);
  background: var(--color-gold-soft);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}

.example-disclaimer {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Mobile example expansion (V2, Section 11). Below the 700px point
   where the grid is still single-column, the 2 "extra" cards start
   visually hidden and the toggle button is shown; at/above 700px the
   grid already displays every card, so the toggle is hidden and any
   collapsed state is irrelevant (extras render normally as grid
   items). Cards stay in the DOM either way — never removed, never
   marked [hidden] — so this never fights assistive tech or no-JS. */
.examples-expand-toggle {
  display: inline-flex;
  margin-top: var(--space-4);
}
@media (max-width: 699px) {
  .example-extra { display: none; }
  .example-extra.is-shown { display: flex; }
}
@media (min-width: 700px) {
  .examples-expand-toggle { display: none; }
}

/* Response-quality teaching line, merged directly under the example
   grid instead of a separate full-height section (V2, Section 12). */
.quality-note {
  margin-top: var(--space-5);
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  max-width: 56ch;
  margin-inline: auto;
}

.section-closer {
  text-align: center;
  margin-top: var(--space-5);
  font-size: 1.15rem;
  font-weight: 700;
}

/* Elevated positioning statement (V2, Section 14) — visually promoted
   above a normal .section-closer for the single most important
   differentiation line on the page. */
.position-statement {
  text-align: center;
  margin-top: var(--space-6);
  max-width: 760px;
  margin-inline: auto;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-weight: 800;
  line-height: 1.35;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  color: var(--color-text);
}

/* Editorial/internal link beneath the comparison section */
.editorial-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 700;
  transition: color var(--transition-fast);
}

.editorial-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.editorial-link:visited {
  color: var(--color-accent);
}

/* ---------------------------------------------------------------
   9. Comparison table -> stacked cards on mobile
   --------------------------------------------------------------- */
.compare-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 420px; } /* V2: 2-column table, was 3 */
.compare-table caption { text-align: left; font-weight: 700; padding-bottom: var(--space-3); }
.compare-table th, .compare-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.compare-table th[scope="col"]:last-child, .compare-table td:last-child {
  background: var(--color-accent-soft);
  font-weight: 600;
}
.compare-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 700px) {
  .compare-wrap { overflow-x: visible; }
  .compare-table, .compare-table thead, .compare-table tbody, .compare-table th, .compare-table td, .compare-table tr {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .compare-table thead { position: absolute; left: -9999px; }
  .compare-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    background: #fff;
  }
  .compare-table td { border: none; padding: 0.4rem 0; }
  .compare-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.15rem;
  }
  .compare-table td:last-child { background: none; border-top: 1px dashed var(--color-border-strong); margin-top: 0.4rem; padding-top: 0.5rem; }
}

/* ---------------------------------------------------------------
   9b. DIY value-framing section (V2, Section 15 — NEW)
   --------------------------------------------------------------- */
.diy-grid {
  display: grid;
  gap: var(--space-5);
  max-width: 900px;
  margin-inline: auto;
  align-items: center;
}
@media (min-width: 760px) { .diy-grid { grid-template-columns: 1.1fr 0.9fr; } }

.diy-list { display: flex; flex-direction: column; gap: 0.6rem; }
.diy-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--color-text-muted);
  font-size: 0.98rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--color-border);
}
.diy-list li:last-child { border-bottom: none; }
.diy-list .diy-step-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
}

.diy-contrast {
  text-align: center;
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
}
.diy-contrast p.diy-or {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 800;
  color: #fff;
}
.diy-contrast p.diy-support {
  margin-top: var(--space-3);
  color: var(--color-text-on-dark-muted);
  font-size: 0.98rem;
}

/* ---------------------------------------------------------------
   10. Pricing
   --------------------------------------------------------------- */
.pricing-grid { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.price-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* V2 (Section 16): the "Most common" badge/is-featured treatment was
   removed — no purchase data exists to support it. All three price
   cards now carry equal visual authority by design. */
.price-card .amount { font-size: 2rem; font-weight: 800; }
.price-card .range { color: var(--color-text-muted); }

.pricing-note { text-align: center; margin-top: var(--space-5); color: var(--color-text-muted); }
.pricing-cta { text-align: center; margin-top: var(--space-4); }

/* Personalized single-offer card reuses .hero-card styling. */
.single-offer-wrap { max-width: 460px; margin-inline: auto; }

/* ---------------------------------------------------------------
   11. (V1's separate Response-quality section was removed in V2 —
   its 3 teaching points now live as .example-kicker labels on the
   example cards plus the .quality-note line under the example grid.
   See Section 8/8b above.)
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   12. Risk reversal
   --------------------------------------------------------------- */
.policy-card {
  max-width: 760px;
  margin-inline: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-bg-subtle);
}
.policy-card p + p { margin-top: var(--space-3); }
.policy-highlight { font-weight: 700; }
/* V2 (Section 19): the purchases-are-final line is now last and
   visually de-emphasized — the correction/make-it-right promises lead. */
.policy-muted { color: var(--color-text-muted); font-size: 0.92rem; }

/* ---------------------------------------------------------------
   13. Founding client section — NOT currently used on the generic
   (pre-purchase) page as of V2. Kept
   here, unused, because the concept is preserved for a future
   POST-PURCHASE feature — see README.md. Do not reintroduce this
   markup on the pre-purchase page without a new explicit instruction.
   --------------------------------------------------------------- */
.founding-card {
  max-width: 820px;
  margin-inline: auto;
  border: 1px dashed var(--color-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-gold-soft);
}
.founding-card h3 { margin-top: var(--space-3); }
.founding-card p + p, .founding-card p + h3 { margin-top: var(--space-3); }
.founding-card ul { margin-top: var(--space-2); }
.founding-card li { position: relative; padding-left: 1.4rem; margin-top: 0.4rem; color: var(--color-text-muted); }
.founding-card li::before { content: "•"; position: absolute; left: 0; color: var(--color-gold); font-weight: 800; }

/* ---------------------------------------------------------------
   14. Founder section
   --------------------------------------------------------------- */
.founder-grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 800px) { .founder-grid { grid-template-columns: 220px 1fr; } }
.founder-photo {
  width: 160px; height: 160px; border-radius: 50%;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-inline: auto;
}
@media (min-width: 800px) { .founder-photo { width: 200px; height: 200px; margin-inline: 0; } }
/* V3: real founder photo replaces the placeholder. object-fit
   crops the portrait into the circle; object-position favors the face
   over the torso/hands visible lower in the source photo. */
img.founder-photo { object-fit: cover; object-position: center 18%; }
.founder-copy p + p { margin-top: var(--space-3); }
.founder-signoff { margin-top: var(--space-4); font-weight: 700; }

/* ---------------------------------------------------------------
   15. FAQ accordion
   --------------------------------------------------------------- */
.faq-list { max-width: 780px; margin-inline: auto; border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: none;
  border: none;
  padding: var(--space-4) 0.25rem;
  text-align: left;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-text);
}
.faq-question .icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  transition: transform var(--transition-base);
}
.faq-item.is-open .faq-question .icon { transform: rotate(45deg); border-color: var(--color-accent); color: var(--color-accent); }
.faq-answer { padding: 0 0.25rem var(--space-4); color: var(--color-text-muted); max-width: 68ch; }

/* ---------------------------------------------------------------
   16. Final CTA
   --------------------------------------------------------------- */
.final-cta {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  text-align: center;
  border-radius: var(--radius-lg);
  margin-inline: var(--space-4);
  padding: var(--space-7) var(--space-4);
}
.final-cta .container { max-width: 640px; }
.final-cta h2 { color: #fff; }
.final-cta p { color: var(--color-text-on-dark-muted); margin-top: var(--space-3); }
.final-cta .btn-primary { margin-top: var(--space-5); background: var(--color-gold); }
.final-cta .btn-primary:hover { background: #a0761f; }
.final-cta .microcopy { color: var(--color-text-on-dark-muted); }

@media (min-width: 640px) {
  .final-cta { margin-inline: auto; max-width: calc(var(--max-width) - 2 * var(--space-4)); }
}

/* ---------------------------------------------------------------
   17. Lead-capture modal
   --------------------------------------------------------------- */
body.modal-open { overflow: hidden; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 32, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  z-index: 300;
}
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; padding: var(--space-4); }
}

.modal-card {
  background: #fff;
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-5);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 640px) {
  .modal-card { border-radius: var(--radius-lg); }
}

.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.modal-close {
  background: none; border: none;
  font-size: 1.4rem; line-height: 1;
  color: var(--color-text-muted);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}
.modal-close:hover { color: var(--color-text); background: var(--color-bg-subtle); }

.modal-card p.lede { font-size: 1rem; margin-top: var(--space-2); }

.form-field { margin-top: var(--space-4); }
.form-field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35rem; }
.form-field input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
}
.form-field input:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 1px; }

#audit-form-errors {
  margin-top: var(--space-3);
  background: var(--color-negative-bg);
  color: var(--color-negative-text);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 0.9rem;
}
#audit-form-errors li { margin-left: 1.1rem; list-style: disc; }

/* V3: this element now carries genuine success OR failure text
   (previously it only ever showed one honest, neutral "check your
   email app" message, so a single green treatment was fine). A real
   failure must never be displayed with success-green styling — that
   would visually contradict the text and mislead the visitor into
   thinking a failed submission succeeded. Default/.is-success stays
   green; .is-error switches to the existing negative/error tokens. */
#audit-form-status {
  margin-top: var(--space-3);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 0.92rem;
  font-weight: 600;
}
#audit-form-status.is-error {
  background: var(--color-negative-bg);
  color: var(--color-negative-text);
}

.modal-consent { margin-top: var(--space-3); font-size: 0.8rem; color: var(--color-text-muted); }
.modal-submit { margin-top: var(--space-4); }

/* ---------------------------------------------------------------
   17b. Legal pages (Privacy / Terms) — V3
   --------------------------------------------------------------- */
.legal-main { padding-block: var(--space-6); }
@media (min-width: 800px) { .legal-main { padding-block: var(--space-7); } }
.legal-content { max-width: 720px; margin-inline: auto; }
.legal-content .effective-date { color: var(--color-text-muted); font-size: 0.9rem; margin-top: var(--space-2); margin-bottom: var(--space-5); }
.legal-content > p.lede { margin-top: var(--space-3); }
.legal-content h2 { font-size: 1.35rem; margin-top: var(--space-6); margin-bottom: var(--space-3); }
.legal-content h2:first-of-type { margin-top: var(--space-5); }
.legal-content p { margin-top: var(--space-3); color: var(--color-text); }
.legal-content ul, .legal-content ol { margin-top: var(--space-3); padding-left: 1.4rem; }
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { margin-top: 0.5rem; color: var(--color-text); }
.legal-content a { color: var(--color-accent); text-decoration: underline; }
.legal-content strong { font-weight: 700; }
.legal-back-link { display: inline-block; margin-top: var(--space-6); font-weight: 600; }

/* ---------------------------------------------------------------
   18. Footer
   --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-6);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.footer-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.footer-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-links a:hover { color: var(--color-text); text-decoration: underline; }

/* ---------------------------------------------------------------
   19. Utility
   --------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
[hidden] { display: none !important; }