/* American Family Revolution — enrollment landing page styles.
   Standalone static site; no build step, no web fonts. One progressive-
   enhancement script (the video play plate) — see index.html.

   This page REPLACES the Wix site at www.americanfamilyrevolution.com and keeps
   its composition on purpose — bone ground, the giant red wordmark centered
   above the fold, the portrait intro video, an "AFR Overview" block, a We HQ
   copyright line — so a returning visitor lands somewhere they recognise. What
   changed is the ask: the Wix page collected names for a waitlist, this one
   sends people straight into the app to enrol.

   ─── Type ───────────────────────────────────────────────────────────────────
   The Wix site set headings in Helvetica Bold and body in DIN Neuzeit Grotesk,
   i.e. it renders as a plain grotesque for nearly everyone. So this page uses a
   SYSTEM SANS stack rather than the We HQ --serif token: matching AFR's own
   register also happens to be the zero-fetch choice. The wordmark carries the
   real letterforms and it ships as vector artwork, so nothing here depends on a
   font that may not be installed.

   ─── Color ──────────────────────────────────────────────────────────────────
   Everything comes from the generated brand.css (brand/wehq.tokens.json is the
   source of truth — see wehq_landing/styles/main.css for the full note). Two
   AFR-specific rules on top of it:

     • The wordmark artwork wears AFR's DISPLAY red #ED230D, baked into the SVGs
       by brand/gen-logos.mjs. It is not referenced here and must never be: at
       3.8:1 against bone it can carry no text.
     • Every ACTION — buttons, links, rules, numerals — uses the --red token
       (#C81D0A), the same hue darkened until a bone label clears AA at 5.1:1.

   Token names under Fight Camp v2.0.0 lie by design (--navy is gunmetal, --gold
   is steel). Read the `role` string in the token file, never the key. */

/* ─── Reset / base ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

:root {
  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  /* Display headings run heavy, uppercase and tightly tracked — the poster
     register the wordmark sets. Weight 800 resolves to Helvetica Neue Black /
     Arial Bold depending on platform; both hold the line. */
  --display-weight: 800;
}

body {
  margin: 0;
  color: var(--ink);
  /* --paper-hi is the lightest bone in the palette and the closest match to the
     Wix page's near-white ground; --paper is kept for the recessed bands. */
  background: var(--paper-hi);
  font-family: var(--sans);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 2px; }

p { text-wrap: pretty; }

::selection { background: var(--red); color: var(--cream); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 100;
  background: var(--navy);
  color: var(--on-navy);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  text-decoration: none;
  transition: top 160ms var(--ease);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── Layout primitives ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.container--narrow { max-width: 56rem; }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--soft {
  background: var(--paper);
  border-block: 1px solid var(--line-soft);
}
.section--dark {
  background: var(--navy);
  color: var(--on-navy);
}

/* ─── Display type ───────────────────────────────────────────────────────── */
.display {
  font-weight: var(--display-weight);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

/* Section headings: red, uppercase, with the short rule the Wix infographic
   used under each of its column titles. */
.section-title {
  font-size: clamp(1.55rem, 4.4vw, 2.35rem);
  color: var(--red);
  text-align: center;
}
.section-title::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin: 0.85rem auto 0;
  background: var(--red);
}
.section--dark .section-title { color: var(--on-navy); }
.section--dark .section-title::after { background: var(--on-navy); }

/* ─── Buttons ────────────────────────────────────────────────────────────── */
/* Squared, matte, hairline-keylined — no pills, no gradients, no glow. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  border: 1px solid var(--red-strong);
  border-radius: var(--radius);
  background: var(--red);
  color: var(--cream);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}
.cta:hover { background: var(--red-strong); }
.cta:active { transform: translateY(1px); }
.cta svg { flex: none; }

.cta--lg {
  padding: 1.15rem 2.5rem;
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
}
.cta--sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
}
/* On the gunmetal band the red button loses its ground contrast, so the closing
   CTA inverts to a bone plate with red type — same weight, more separation. */
.cta--invert {
  background: var(--on-navy);
  border-color: var(--on-navy);
  color: var(--red-strong);
}
.cta--invert:hover { background: #FFFFFF; }

/* --soft is --invert translated onto a LIGHT ground, for the header. Same idea
   — the plate goes quiet and the type carries the red — but a bone plate on
   bone paper has no edge, so the hairline does the work the dark band did.
   The hairline is RED, not --line: it ties the header action to the closing
   one, and 1px of red costs nothing next to a filled block of it.

   Why the header CTA is not the solid red .cta: on desktop it sits ~200px
   above an identical red button in the hero, both in view at once, so the page
   opened with two equally loud calls to the same action and the red stopped
   meaning "press this". Now the hero button is the only filled red on the
   fold. The label gains contrast rather than losing it: --red-strong on
   --paper-hi measures 7.45:1, against 5.07:1 for bone on the filled red. */
.cta--soft {
  background: var(--paper-hi);
  border-color: var(--red);
  color: var(--red-strong);
  box-shadow: var(--shadow-sm);
}
.cta--soft:hover { background: #FFFFFF; border-color: var(--red-strong); }

/* ─── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-hi);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}
/* The AFR monogram, 1.9282:1 tight to its ink box. */
.header-mark { display: block; width: clamp(72px, 14vw, 92px); }

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2.75rem, 7vw, 4.5rem);
}
/* The full lockup, 3.7067:1 — extremely wide even stacked on two lines, so it
   is width-bound and centered rather than sized off a cap height. */
.hero__wordmark {
  width: min(46rem, 88vw);
  margin-inline: auto;
}
/* No red headline between the wordmark and these lines: the artwork is already
   a wall of display red, and a second red statement under it read as two
   competing reds (the wordmark's #ED230D against the action #C81D0A) rather
   than one system. The wordmark makes the announcement; these lines say what
   it is. Red at the top of the page now belongs to the wordmark and the
   button — the thing you look at, and the thing you press.
   The first line carries the separation the headline used to. */
.hero__date {
  margin: 0.85rem auto 0;
  max-width: 40rem;
  font-size: clamp(1.0625rem, 2.6vw, 1.25rem);
  color: var(--ink-soft);
  text-wrap: balance;
}
.hero__date:first-of-type { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.hero__date--tight { margin-top: 0.25rem; }
.hero__date strong { color: var(--ink); font-weight: 700; }
.hero__actions { margin-top: clamp(1.5rem, 3.5vw, 2rem); }

/* ─── Challenge: intro video beside the 40-day promise ───────────────────── */
/* Mirrors the Wix layout, where the same portrait video sat left of the signup
   panel. The panel is now the promise list — nothing to fill in, one place to go. */
.challenge-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center;
  grid-template-columns: 1fr;
  justify-items: center;
}
@media (min-width: 56rem) {
  .challenge-grid {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    justify-items: stretch;
  }
}

/* The source file is 406x720. The ratio is declared so the box is reserved
   before any of the video loads — no layout shift, and nothing downloads until
   somebody presses play (preload="none" + a poster). */
.video-frame {
  position: relative;
  width: 100%;
  max-width: 20rem;
}
.intro-video {
  display: block;
  width: 100%;
  aspect-ratio: 406 / 720;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy);
  box-shadow: var(--shadow-md);
}

/* The play plate. Injected by the script at the end of index.html and removed
   on first play, so it only ever covers the POSTER — it can never sit over
   moving video or fight the native control bar. Nothing here renders without
   that script.

   The whole poster is the hit target, not just the plate: this is the one
   thing on the page competing with the enrol button for a click, so it gets
   the biggest target it can have. */
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Pushes the plate from 50% to ~61% of the height — off the speaker's chin
     and onto his chest. The poster is a portrait and the face is the whole
     reason it works; dead-centre is the convention but here it covers the one
     thing worth seeing. Padding, not a transform, so the hit target stays the
     full frame. */
  padding-top: 22%;
  padding-inline: 0;
  padding-bottom: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.video-play__plate {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border: 1px solid var(--red-strong);
  border-radius: var(--radius);
  /* Action red and cream — the same plate as .cta, because it is the same kind
     of promise. Never the display red the wordmark wears. */
  background: var(--red);
  color: var(--cream);
  box-shadow: var(--shadow-md);
  transition: background 140ms var(--ease), transform 140ms var(--ease);
}
/* Optical centering: a triangle's visual mass sits left of its bounding box. */
.video-play__plate svg { margin-left: 0.2rem; }
.video-play:hover .video-play__plate { background: var(--red-strong); }
.video-play:active .video-play__plate { transform: translateY(1px); }

.promise {
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-md);
}
.promise__title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.35rem, 3.4vw, 1.85rem);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
/* No numerals and no row rules — a rule between every item is a table border,
   and small leading-zero figures in a fixed gutter read as row IDs. The order
   still lives in the <ol>; what carries it visually is a stack of red keyline
   ticks, which is the placard the training floor already uses. */
.promise__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.15rem;

  /* The brand's DARK-REGISTER red (brand.css [data-theme="dark"] --red), used
     here as a local constant because this page is light-only and never sets
     data-theme. The light --red is a foreground color on BONE: on this gunmetal
     plate it measures 2.9:1 and these marks all but disappear. The brightened
     value reaches 4.47:1 — short of what red TYPE would need here, but every
     mark it paints is decorative (the list is ordered without them), so seeing
     it is the whole bar. Never put text in it on this panel. */
  --mark-red: #E15647;
}
.promise__list li {
  border-left: 3px solid var(--mark-red);
  padding: 0.1rem 0 0.1rem 1.15rem;
  font-size: clamp(1.125rem, 2.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
}

/* The last promise is not the same KIND of thing as the ones above it: those
   happen inside your house, this one is a country. It breaks the stack and
   lands in display caps so the panel arrives somewhere instead of listing four
   equal rows. Bound to :last-child — a fifth promise would move the breakout
   onto it, so add one deliberately. */
.promise__list li:last-child {
  margin-top: 1.9rem;
  padding: 1.5rem 0 0;
  border-left: 0;
  border-top: 1px solid var(--on-navy-line);
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  font-weight: var(--display-weight);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.14;
}
.promise__list li:last-child::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: 0.9rem;
  background: var(--mark-red);
}

/* ─── AFR Overview ───────────────────────────────────────────────────────── */
.overview { text-align: center; }
.overview__body {
  margin: 1.75rem auto 0;
  max-width: 46rem;
  font-size: clamp(1.125rem, 2.7vw, 1.375rem);
  line-height: 1.55;
}
.overview__body + .overview__body { margin-top: 1.15rem; }
.overview__body strong { font-weight: 700; }

/* ─── Closing CTA band ───────────────────────────────────────────────────── */
.cta-band { text-align: center; }
.cta-band__headline {
  margin: 0 auto;
  max-width: 24rem;
  font-size: clamp(1.75rem, 5vw, 2.6rem);
}
.cta-band p {
  margin: 1rem auto clamp(1.5rem, 3.5vw, 2rem);
  max-width: 34rem;
  color: var(--on-navy-muted);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 2.5rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--muted);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1rem;
}
.site-footer a { color: var(--ink-soft); }

/* ─── Legal documents ────────────────────────────────────────────────────── */
/* Long-form prose, the only such surface on this site — the enrollment page is
   all display type and short runs. Set narrower than `.container--narrow` and a
   touch larger than body copy, because a privacy policy is read, not scanned.
   The pages themselves are GENERATED from legal/*.md; see legal/gen.mjs. */
.legal {
  max-width: 44rem;
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
}
.legal h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: var(--display-weight);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.legal__updated {
  margin: 0 0 2.5rem;
  color: var(--muted);
  font-style: italic;
}
.legal h2 {
  margin: 2.5rem 0 0.65rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.legal p,
.legal li { color: var(--ink-soft); line-height: 1.7; }
.legal ul { padding-left: 1.35rem; }
.legal li { margin-bottom: 0.55rem; }
.legal__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
}

/* ─── 404 ────────────────────────────────────────────────────────────────── */
.notfound {
  text-align: center;
  padding-block: clamp(4rem, 12vw, 8rem);
}
.notfound h1 {
  margin: 0;
  font-size: clamp(4rem, 18vw, 8rem);
  font-weight: var(--display-weight);
  letter-spacing: -0.03em;
  color: var(--red);
  line-height: 1;
}
.notfound p { margin: 1rem auto 2rem; max-width: 32rem; }

/* ─── Motion ─────────────────────────────────────────────────────────────── */
/* Scroll-reveal only, as progressive enhancement: gated behind both the feature
   query and the motion preference, so the page is fully visible with no JS, no
   support, and no CLS. Same discipline as wehq_landing. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}