/* ============================================================================
   MAKE ABS GREAT AGAIN
   American athletic-department print (1940s) on a modern editorial grid.
   Aged newsprint ground, flag red as the single sharp accent, type does the
   shouting. No neon, no glass, no gradient text. See ../.impeccable.md.
   ========================================================================= */

/* ---------- tokens ----------
   Flag palette, played quietly. The three colours are Old Glory Red (#B31942),
   Old Glory Blue (#0A3161) and flag white, but the white is warmed toward
   newsprint and the blue does double duty as the body ink. That is the whole
   trick: the text itself is flag blue rather than black, so the page reads
   American without a single star or stripe drawn on it.
   Nothing here is pure #000 or #fff. */
:root {
  --paper:      oklch(0.962 0.010 86);   /* flag white, warmed to newsprint */
  --paper-2:    oklch(0.933 0.015 84);
  --paper-3:    oklch(0.890 0.020 82);

  --ink:        oklch(0.255 0.078 258);  /* Old Glory Blue, used as the ink */
  --ink-2:      oklch(0.365 0.070 258);
  --ink-soft:   oklch(0.480 0.052 258);

  --red:        oklch(0.505 0.185 19);   /* Old Glory Red */
  --red-deep:   oklch(0.425 0.160 19);
  /* Deliberately MORE saturated than --ink, not darker. The two dark sections
     sit near each other, and if navy only differed in lightness they would
     read as the same colour badly printed. */
  --navy:       oklch(0.305 0.125 258);  /* the field of the flag */
  --brass:      oklch(0.905 0.030 250);  /* pale star white, on dark grounds */

  --rule:       color-mix(in oklch, var(--ink) 18%, transparent);
  --rule-light: color-mix(in oklch, var(--paper) 24%, transparent);

  --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body:    "Archivo", ui-sans-serif, system-ui, sans-serif;

  /* Fluid modular scale, ~1.28 ratio at the small end, wider at the top. */
  --t-xs:   clamp(0.72rem, 0.69rem + 0.15vw, 0.80rem);
  --t-sm:   clamp(0.86rem, 0.82rem + 0.20vw, 0.97rem);
  --t-base: clamp(1.02rem, 0.97rem + 0.26vw, 1.18rem);
  --t-lg:   clamp(1.22rem, 1.10rem + 0.60vw, 1.62rem);
  --t-xl:   clamp(1.75rem, 1.35rem + 1.90vw, 2.75rem);
  --t-2xl:  clamp(2.40rem, 1.55rem + 3.60vw, 4.80rem);
  --t-3xl:  clamp(3.20rem, 1.30rem + 7.20vw, 8.40rem);

  /* Spacing rhythm: deliberately uneven, not one padding everywhere. */
  --s-1: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --s-2: clamp(0.9rem, 0.80rem + 0.50vw, 1.35rem);
  --s-3: clamp(1.6rem, 1.35rem + 1.10vw, 2.60rem);
  --s-4: clamp(2.8rem, 2.10rem + 3.00vw, 5.20rem);
  --s-5: clamp(4.5rem, 3.00rem + 6.50vw, 9.50rem);

  --gutter: clamp(1.15rem, 0.55rem + 3vw, 5rem);
  --measure: 62ch;
}

/* ---------- reset ---------- */
*, *::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;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Newsprint halftone. Two offset dot fields, extremely low contrast: it should
   read as paper grain, not as a visible pattern. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--ink) 8%, transparent) 0.5px, transparent 0.6px),
    radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--red) 5%, transparent) 0.5px, transparent 0.6px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: var(--s-2); z-index: 100;
}
.skip:focus { left: var(--s-2); top: var(--s-2); }

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .75s cubic-bezier(.16,1,.3,1) var(--d, 0s),
    transform .75s cubic-bezier(.16,1,.3,1) var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 var(--s-2);
}
.eyebrow--light { color: var(--brass); }

.lead {
  font-size: var(--t-lg);
  line-height: 1.42;
  max-width: 42ch;
  color: var(--ink-2);
}

/* The only literal flag reference on the page: a three band rule, red / white /
   blue, used as a divider. Everything else stays palette-only. Used sparingly
   on purpose, one per screenful at most, or it stops reading as restraint. */
.rule-flag { position: relative; padding-top: calc(var(--s-2) + 6px); border-top: 0 !important; }
.rule-flag::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--red)     0 30%,
    var(--paper-3) 30% 44%,
    var(--navy)    44% 100%);
}
.sec--dark .rule-flag::before,
.sec--challenge .rule-flag::before {
  background: linear-gradient(90deg,
    var(--red)   0 30%,
    var(--paper) 30% 44%,
    var(--brass) 44% 100%);
}

.pull {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-xl);
  line-height: .94;
  text-transform: uppercase;
  color: var(--red);
  margin-top: var(--s-3);
  border-top: 3px solid var(--red);
  padding-top: var(--s-2);
}

.link-quiet {
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color .25s, color .25s;
}
.link-quiet:hover { color: var(--red); border-color: var(--red); }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85em 1.6em;
  border: 2px solid var(--btn-bg);
  border-radius: 0;                     /* print, not app chrome */
  cursor: pointer;
  position: relative;
  transition: transform .28s cubic-bezier(.16,1,.3,1), background .28s, color .28s, border-color .28s;
}
.btn::after {                            /* offset block, like a print shadow */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  z-index: -1;
  transform: translate(6px, 6px);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.btn:hover { transform: translate(3px, 3px); }
.btn:hover::after { transform: translate(0, 0); }
.btn:active { transform: translate(6px, 6px); }

.btn--lg { font-size: var(--t-base); padding: 1em 2em; }
.btn--sm { font-size: var(--t-xs); padding: .6em 1.1em; }
.btn--full { width: 100%; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: var(--paper);
}
.btn--ghost::after { background: var(--red); }
.btn--ghost:hover { color: var(--ink); background: var(--paper); }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--gutter);
  background: color-mix(in oklch, var(--paper) 97%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
}
.nav__mark { text-decoration: none; font-family: var(--display); line-height: 1; }
.nav__maga {
  display: block;
  font-weight: 900;
  font-size: 1.15rem;
  line-height: .88;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--red);
}
.nav__full {
  display: block;
  font-family: var(--body);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav__links { display: none; gap: var(--s-3); margin-left: auto; }
.nav__links a {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .2s;
}
.nav__links a:hover { color: var(--red); }
.nav .btn { margin-left: auto; }
@media (min-width: 62rem) {
  .nav__links { display: flex; }
  .nav .btn { margin-left: 0; }
}

/* ---------- hero ---------- */
.hero {
  padding: var(--s-4) var(--gutter);
  position: relative;
}
.hero__grid {
  display: grid;
  gap: var(--s-4);
  align-items: center;
}
/* Single column and type-led. There is no hero photograph, so the headline is
   the image. A stock or placeholder portrait would have been worse than none. */
.hero__type { max-width: 46rem; }

.hero__h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-3xl);
  line-height: .82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.hero__h1 span { display: block; }
/* Break the grid: indent alternating words so the block isn't a flat slab. */
.hero__h1 span:nth-child(2) { margin-left: .10em; }
.hero__h1 span:nth-child(3) { margin-left: .04em; }
.hero__h1 span:nth-child(4) { margin-left: .16em; }
.hero__accent {
  color: var(--red);
  position: relative;
}

.hero__lede {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
  border-top: 3px solid var(--ink);
  padding-top: var(--s-2);
  margin-bottom: var(--s-2);
  max-width: 20ch;
}
.hero__sub { max-width: 46ch; color: var(--ink-2); }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.hero__portrait { margin: 0; position: relative; }
.hero__stamp {
  position: absolute;
  right: calc(var(--s-2) * -1);
  bottom: var(--s-3);
  background: var(--red);
  color: var(--paper);
  padding: var(--s-2) var(--s-2) var(--s-1);
  display: flex;
  align-items: baseline;
  gap: .5em;
  transform: rotate(-3deg);
  box-shadow: 6px 6px 0 var(--ink);
}
.hero__stamp-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 3.2rem;
  line-height: .8;
}
.hero__stamp-txt {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.25;
}

/* placeholders — deliberately obvious so they can't ship by accident */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(45deg,
      var(--paper-2) 0 10px,
      var(--paper-3) 10px 20px);
  border: 2px dashed var(--ink-soft);
  display: grid;
  place-items: center;
}
.ph__label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: var(--s-1);
}
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--vertical { aspect-ratio: 9 / 16; }

/* ---------- ticker ---------- */
.ticker {
  background: var(--red);
  color: var(--paper);
  border-block: 3px solid var(--ink);
  overflow: hidden;
  padding: var(--s-1) 0;
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 1.2em;
  width: max-content;
  animation: slide 38s linear infinite;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ticker__dot { color: var(--brass); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ---------- section shell ---------- */
.sec {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-5) var(--gutter);
  position: relative;
}
@media (min-width: 60rem) {
  .sec {
    grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr);
    gap: var(--s-4);
  }
}
.sec__num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 2rem + 4vw, 6.5rem);
  line-height: .8;
  color: color-mix(in oklch, var(--ink) 14%, transparent);
  margin: 0;
}
.sec__num--light { color: color-mix(in oklch, var(--paper) 26%, transparent); }
.sec__body { min-width: 0; }

.sec__h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-2xl);
  line-height: .86;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s-3);
}
.sec__h2 em { font-style: italic; color: var(--red); }

.sec--dark, .sec--challenge {
  background: var(--ink);
  color: var(--paper);
}
.sec--dark .lead, .sec--challenge .lead { color: color-mix(in oklch, var(--paper) 78%, var(--ink)); }

/* ---------- 01 argument ---------- */
.argument__cols {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
@media (min-width: 48rem) {
  .argument__cols { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

.tenets {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
}
.tenets li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s-2);
  align-items: start;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .tenets li { grid-template-columns: 4.5rem 16rem 1fr; align-items: baseline; }
}
.tenets__n {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--red);
}
.tenets h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-lg);
  line-height: 1;
  text-transform: uppercase;
  grid-column: 2 / -1;
}
@media (min-width: 48rem) { .tenets h3 { grid-column: auto; } }
.tenets p { grid-column: 2 / -1; color: var(--ink-soft); font-size: var(--t-sm); }
@media (min-width: 48rem) { .tenets p { grid-column: auto; max-width: 40ch; } }

/* ---------- 02 interviews ----------
   Lou's ask: 6 videos, 2 rows of 3, smaller windows, centred on the page.
   The grid is capped and auto-margined rather than stretched full width,
   because six 9:16 players at full column width is a wall of phone-shaped
   boxes. Captions were dropped with the swap: he supplied videos, not
   titles, and inventing titles for a client's own clips is not our call. */
.reel {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-4) auto;
  grid-template-columns: 1fr;
  max-width: 22rem;
  justify-items: center;
}
@media (min-width: 34rem) {
  .reel { grid-template-columns: repeat(2, 1fr); max-width: 34rem; }
}
@media (min-width: 52rem) {
  /* 3 across, so 6 videos land as exactly 2 rows. */
  .reel { grid-template-columns: repeat(3, 1fr); max-width: 46rem; }
}
.reel__item { width: 100%; }

/* 9:16 for Shorts. The iframe fills the box so the embed can't letterbox. */
.embed {
  position: relative;
  aspect-ratio: 9 / 16;
  background: color-mix(in oklch, var(--paper) 8%, var(--ink));
  border: 2px solid color-mix(in oklch, var(--paper) 28%, transparent);
}
.embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sec--dark .ph {
  background: repeating-linear-gradient(45deg,
    color-mix(in oklch, var(--paper) 8%, var(--ink)) 0 10px,
    color-mix(in oklch, var(--paper) 13%, var(--ink)) 10px 20px);
  border-color: color-mix(in oklch, var(--paper) 35%, transparent);
}
.sec--dark .ph__label { color: color-mix(in oklch, var(--paper) 60%, var(--ink)); }

/* ---------- 03 plan ---------- */
.sec--plan { background: var(--paper-2); }
.plan__wrap {
  display: grid;
  gap: var(--s-4);
  align-items: start;
}
@media (min-width: 58rem) {
  .plan__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--s-4); }
}

.checks { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.checks li {
  position: relative;
  padding-left: 1.9em;
  margin-bottom: .7em;
  color: var(--ink-2);
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: .95em; height: .5em;
  border-left: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  transform: rotate(-45deg);
}

.signup {
  background: var(--paper);
  border: 3px solid var(--ink);
  padding: var(--s-3);
  box-shadow: 10px 10px 0 var(--red);
}
.signup__h {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-xl);
  line-height: .9;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.field { display: block; margin-bottom: var(--s-2); border: 0; padding: 0; }
.field__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .35em;
}
.field input[type="text"],
.field input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: var(--t-base);
  padding: .65em .75em;
  background: var(--paper-2);
  border: 2px solid var(--ink-soft);
  border-radius: 0;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}
.field input:focus { border-color: var(--red); background: var(--paper); outline: none; }
.field input[aria-invalid="true"] { border-color: var(--red); background: color-mix(in oklch, var(--red) 8%, var(--paper)); }

.choices { display: flex; flex-wrap: wrap; gap: .4em; }
.choices label { position: relative; }
.choices input { position: absolute; opacity: 0; width: 0; height: 0; }
.choices span {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .55em .9em;
  border: 2px solid var(--ink-soft);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.choices input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choices input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; }

.signup__intro { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s-3); }

.signup__fine {
  font-size: var(--t-xs);
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--s-2);
}
.signup__msg {
  font-size: var(--t-sm);
  font-weight: 600;
  margin-top: var(--s-2);
}
.signup__msg[data-tone="ok"]  { color: var(--red-deep); }
.signup__msg[data-tone="err"] { color: var(--red); }

/* ---------- 04 tiers ---------- */
.tiers {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
  align-items: start;
}
@media (min-width: 56rem) {
  /* Deliberately NOT three equal columns. The middle tier is the offer. */
  .tiers { grid-template-columns: 1fr 1.35fr 1fr; gap: var(--s-3); }
}
.tier {
  border-top: 3px solid var(--ink);
  padding-top: var(--s-2);
}
.tier__kicker {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--s-1);
}
.tier__price {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem);
  line-height: .85;
  margin: 0 0 .1em;
}
.tier__price--big { font-size: clamp(3.4rem, 2rem + 5vw, 5.6rem); color: var(--red); }
.tier__cur { font-size: .5em; vertical-align: .5em; margin-right: .05em; }
.tier__per { font-size: .32em; font-weight: 700; letter-spacing: .04em; }
.tier__note { font-size: var(--t-xs); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-2); }
/* Body copy only. :not([class]) keeps this off .tier__price / __kicker / __note,
   which would otherwise lose the cascade to this more specific selector and
   silently render at body size. */
.tier p:not([class]) { font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s-2); }
.tier__name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem);
  line-height: .88;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.tier__name--plain { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); }
/* A quotation, not a label. Display face kept for family, but dropped to
   reading size and out of caps so it can actually be read as a sentence. */
.tier__name--quote {
  font-family: var(--body);
  font-size: clamp(1.02rem, 0.94rem + 0.4vw, 1.22rem);
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
}
/* Same, for a note that is a sentence rather than a two word tag. */
.tier__note--sentence {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  font-weight: 500;
}
.tier__note--light { color: var(--brass); margin-top: var(--s-2); margin-bottom: 0; }
.tier--feature {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
  padding: var(--s-3);
  box-shadow: 10px 10px 0 var(--red);
}
.tier--feature .tier__kicker { color: var(--brass); }
.tier--feature p:not([class]) { color: color-mix(in oklch, var(--paper) 76%, var(--ink)); }
.tier--feature .tier__price--big { color: var(--paper); }
.tier--feature .btn { --btn-bg: var(--paper); --btn-fg: var(--ink); margin-top: var(--s-2); }

/* ---------- 05 challenge ---------- */
.sec--challenge { background: var(--navy); }
.challenge__sub {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-xl);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brass);
  margin: calc(var(--s-2) * -1) 0 var(--s-3);
}
.challenge__meta {
  margin-top: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  border-top: 2px solid var(--rule-light);
  padding-top: var(--s-2);
  display: inline-block;
}

/* ---------- closer ---------- */
.closer {
  padding: var(--s-5) var(--gutter);
  text-align: center;
  background: var(--paper);
  border-top: 3px solid var(--ink);
}
.closer__h {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-2xl);
  line-height: .84;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

/* ---------- footer ---------- */
.foot {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-4) var(--gutter);
}
.foot__grid { display: grid; gap: var(--s-3); }
@media (min-width: 52rem) {
  .foot__grid { grid-template-columns: 1fr auto; align-items: start; }
  .foot__legal { grid-column: 1 / -1; }
}
.foot__mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-xl);
  line-height: .9;
  text-transform: uppercase;
  margin-bottom: .2em;
}
.foot__tag {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
}
.foot__social { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.foot__social a {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--rule-light);
  padding-bottom: 2px;
  transition: border-color .2s, color .2s;
}
.foot__social a:hover { color: var(--brass); border-color: var(--brass); }
.foot__legal {
  font-size: var(--t-xs);
  line-height: 1.6;
  color: color-mix(in oklch, var(--paper) 55%, var(--ink));
  border-top: 1px solid var(--rule-light);
  padding-top: var(--s-2);
  margin-top: var(--s-2);
  max-width: var(--measure);
}

/* ============================================================================
   QUESTIONNAIRE  /plan/
   Replaces the Google Form. Same paper, same print logic, but this is a task
   the visitor has to finish, so the page is quieter than the marketing site:
   no reveals, no ticker, one column, one question block at a time.
   ========================================================================= */

.q-page { display: flex; flex-direction: column; min-height: 100vh; }

.q-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-2) var(--gutter);
  border-bottom: 2px solid var(--ink);
}
.q-back {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.q-back:hover { color: var(--red); }
.q-step-count {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.q-wrap {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--s-4) var(--gutter) var(--s-5);
}

.q-h1 {
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}
.q-h1 em { font-style: italic; color: var(--red); }

.q-lead {
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 0 0 var(--s-3);
}

/* Progress. A hairline, not a chunky app widget. */
.q-bar {
  display: block;
  height: 4px;
  background: var(--paper-3);
  margin-bottom: var(--s-4);
}
.q-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--red);
  transition: width .35s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) { .q-bar__fill { transition: none; } }

.q-kicker {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 .4em;
}
.q-h2 {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}

/* ---------- fields ---------- */
.q-f { display: block; margin: 0 0 var(--s-3); border: 0; padding: 0; }

.q-label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .3em;
  padding: 0;                            /* legend inherits odd padding */
}
.q-req {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-left: .5em;
}
.q-help {
  display: block;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin-bottom: .5em;
}

.q-f input[type="text"],
.q-f input[type="email"],
.q-f input[type="tel"],
.q-f textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-base);
  padding: .65em .75em;
  background: var(--paper-2);
  border: 2px solid var(--ink-soft);
  border-radius: 0;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}
.q-f textarea { resize: vertical; line-height: 1.5; }
.q-f input:focus,
.q-f textarea:focus { border-color: var(--red); background: var(--paper); outline: none; }
.q-f input[aria-invalid="true"] {
  border-color: var(--red);
  background: color-mix(in oklch, var(--red) 8%, var(--paper));
}

/* auto-fit, not a hard 3, so a two-field row fills the width instead of
   leaving a phantom third column. The row needs its own bottom margin: the
   children have theirs zeroed, so without this the next question collides. */
.q-row {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin-bottom: var(--s-3);
}
.q-row .q-f { margin-bottom: 0; }

/* Choices reuse the print-pill language from the homepage. Tap targets are
   generous on purpose: most of this traffic is a thumb on a phone. */
.q-opts { display: flex; flex-wrap: wrap; gap: .5em; }
.q-opts--stack { flex-direction: column; align-items: flex-start; }
.q-opt { position: relative; }
.q-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.q-opt span {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: .6em 1em;
  border: 2px solid var(--ink-soft);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.q-opt input:checked + span {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.q-opt input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

.q-hp { position: absolute; left: -9999px; }

.q-final {
  border-top: 3px solid var(--ink);
  padding-top: var(--s-3);
  margin-top: var(--s-4);
}
.q-final__h {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 .5em;
}
.q-final__p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

.q-msg { font-size: var(--t-sm); font-weight: 600; margin: var(--s-2) 0 0; min-height: 1.4em; }
.q-msg[data-tone="err"] { color: var(--red); }
.q-msg[data-tone="ok"]  { color: var(--red-deep); }

.q-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-3);
}
/* .btn--ghost is written for the dark sections, where paper-on-navy is right.
   On this paper ground that would be near-invisible, so the ghost is re-cut
   in ink here rather than shipping a white button on a white page. */
/* .btn--ghost is written for the dark sections: transparent face, paper text.
   Both halves break here. The text needs to be ink on paper, AND the face has
   to be opaque, because .btn::after paints a red block behind every button and
   a transparent face lets it show straight through, turning the print shadow
   into a red fill. */
.q-nav .btn--ghost {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  border-color: var(--ink);
}
.q-nav .btn--ghost:hover { --btn-fg: var(--paper); --btn-bg: var(--ink); }

.q-note {
  font-size: var(--t-sm);
  border-left: 3px solid var(--red);
  padding-left: var(--s-2);
  color: var(--ink-2);
}

.q-done { max-width: var(--measure); }

.q-foot {
  border-top: 2px solid var(--ink);
  padding: var(--s-2) var(--gutter);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.q-foot p { margin: 0; }

/* The `hidden` attribute is a UA rule, and ANY author `display` beats it on
   cascade origin. .btn is display:inline-flex and .q-bar is display:block, so
   without this the step buttons would all show at once and the progress bar
   would survive the success screen. Scoped to this page so it cannot surprise
   anything on the marketing site. */
.q-page [hidden] { display: none !important; }

/* Past step 1 the intro has done its job. Leaving the full masthead on all six
   steps means scrolling the same three paragraphs six times on a phone, so it
   collapses to just the wordmark once they are underway. */
.q-page.is-deep .q-lead { display: none; }
.q-page.is-deep .q-h1 { font-size: var(--t-xl); margin-bottom: var(--s-2); }

/* ============================================================================
   PLAN SETTINGS  /rules/
   Lou only. Same paper and print language as the rest, but this is a control
   panel rather than a page to be read, so it is denser and wider.
   ========================================================================= */

.q-wrap--wide { max-width: 62rem; }

.rules-group {
  border-top: 3px solid var(--ink);
  padding-top: var(--s-3);
  margin-bottom: var(--s-4);
}
.rules-group .q-h2 { margin-bottom: var(--s-2); }

/* The per-goal and per-activity-level blocks. Indented and ruled so it is
   obvious which fields belong to which heading, which matters when there are
   four near-identical groups down the page. */
.rules-sub {
  border-left: 3px solid var(--rule);
  padding-left: var(--s-2);
  margin: var(--s-3) 0;
}
.rules-sub .q-kicker { text-transform: uppercase; }

/* The one setting with a consequence outside this page, so it gets its own
   block and changes colour with its state. Red while plans are going to
   strangers, calm while they are being held. */
.rules-live {
  border: 3px solid var(--ink);
  padding: var(--s-3);
  margin-bottom: var(--s-4);
  background: var(--paper-2);
}
.rules-live[data-on="1"] {
  border-color: var(--red);
  background: color-mix(in oklch, var(--red) 7%, var(--paper));
}
.rules-toggle {
  display: flex;
  align-items: center;
  gap: .75em;
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  cursor: pointer;
}
.rules-toggle input { width: 1.35em; height: 1.35em; accent-color: var(--red); flex: none; }

.rules-preview {
  border-top: 3px solid var(--ink);
  padding-top: var(--s-3);
  margin-top: var(--s-5);
}
.rules-preview .q-opts { margin: var(--s-2) 0 var(--s-3); }
.rules-frame {
  width: 100%;
  height: 70vh;
  border: 2px solid var(--ink);
  background: var(--paper);
}

/* Lou, 2026-08-29, twice in one minute from a 384px phone:
   "Please match all the fonts the same. It suddenly changes and doesn't look
   good." He tapped both class-less paragraphs in the argument section.

   #argument is the ONLY place on the site where .lead sits in the same prose
   flow as unstyled paragraphs. In the other four sections .lead opens the
   section and is followed by a list or cards, so the size step reads as
   hierarchy. Here it is followed by more prose, so it reads as the font
   changing partway through one passage. On his phone the two columns collapse
   to one, which puts all four paragraphs in a single line of sight and makes it
   obvious. It looks fine on desktop, which is why it survived.

   Scoped to this section on purpose: .lead is used five times across the site
   and the other four are doing their job. */
.argument__cols p:not([class]) {
  font-size: var(--t-lg);
  line-height: 1.42;
  color: var(--ink-2);
  max-width: 42ch;
}