/* ══════════════════════════════════════════════════════════════════
   PETERNQ — trading mentorship one-pager
   Frame: Arkkhe "Daily Hero" #17 (dark fintech template)
   Fonts: default system stack (no webfonts by design)
   Hero = proportional 1440×810 stage, 1cqw = 14.4px of the mockup.
   NO entrance/load animations — hover and press states only.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Palette adopted 2026-09-17 from Peter's own colour-preview.html. The whole
     scale comes from that file, not just the accent — the layered near-blacks
     and solid hairlines are most of why it reads better than the flat-black +
     translucent-white it replaced. */
  --accent: #22D3EE;
  /* premium gold — the "perks in Mentorship included" row in the 1-on-1 list
     only. Not part of Peter's palette file; kept deliberately as a second
     accent marking the higher tier (his call, 2026-09-17). */
  --gold: #eab308;
  --ink: #F2F4F5;
  --bg: #08090B;
  --surface: #0E1014;
  --muted: #8A929E;
  --hairline: #1D2128;
  --glass: linear-gradient(246deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.06) 94.3%);
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ══════════════════════════════ HERO ══════════════════════════════ */

.hero {
  container-type: inline-size;
  padding: 12px;
}

.stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1440 / 810;
  border-radius: 1.944cqw;
  overflow: hidden;
  background: #000;
}

/* backdrop */
.bd--texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The photo has a green-yellow glow baked into it. CLAUDE.md said that could
     only be fixed by remaking the asset, but the texture is its own <img>
     element, so a filter on it touches nothing else on the page and costs no
     new file. ~135deg swings the green round to the blue side of the wheel and
     the slight desaturation stops the result going neon.
     If the accent ever moves off blue, this angle has to move with it. */
  filter: hue-rotate(105deg) saturate(0.85);
}

.bd--star {
  position: absolute;
  width: 107.9cqw;
  height: 110.6cqw;
  left: calc(50% - 42.38cqw);
  top: calc(50% - 11.97cqw);
  transform: translate(-50%, -50%);
}

/* giant headline */
.giant {
  position: absolute;
  left: 50%;
  /* 11.5cqw minus the 0.12em ink padding below, so the glyphs sit exactly
     where they did before the padding was added */
  top: calc(11.5cqw - 0.12em);
  /* z-order sandwich (client request 2026-09-01): base .giant (PETER) z1
     -> .art (chart) z2 -> .giant--front (NQ) z3. The chart runs OVER the
     PETER letters and UNDER the NQ letters. Explicit z-indexes, not DOM
     order — do not drop them to "clean up". */
  z-index: 1;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 600;
  /* 13.5cqw — reduced ~23% from the original 17.5cqw on client feedback
     (2026-08-29): the giant headline read too big. Fit re-measured at all
     sweep widths after the change. */
  font-size: 13.5cqw;
  line-height: 0.77;
  letter-spacing: -0.02em;
  white-space: nowrap;
  /* with background-clip: text, ink outside the border box gets no gradient
     painted (measured: Q's ink ends 12.6px past the box edge at 1440w, and
     ink height is 0.808em vs the 0.77em line box — the Q tail and right
     sliver rendered cut off). Symmetric padding grows the painted box past
     the ink extent; translateX(-50%) keeps it centered, and the top rule
     above subtracts the vertical shift. Do NOT balance this with negative
     margins — margin-right is ignored on a left-anchored absolute box and
     the text lands off-center. */
  padding: 0.12em 0.1em;
  -webkit-text-fill-color: transparent;
}

/* PETER carries the gradient. It must render IDENTICAL to the old whole-word
   gradient, so the background is the SAME gradient sized to the old painted
   box (PETERNQ padding box = 4.382em wide at this font/spacing, measured at
   1440w) and anchored where that box began (0.1em left of the text start).
   Only the span's clip window changed, not the gradient's geometry. */
.giant__peter {
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.2) 64.7%) no-repeat;
  background-size: 4.382em 100%;
  background-position: -0.1em 0;
  -webkit-background-clip: text;
  background-clip: text;
}

/* base copy: NQ is invisible here (transparent fill, no background) — the
   front copy paints it */

/* front copy: same element, same metrics, painted above the chart. Only NQ
   is visible — solid white. A span z-index inside .giant cannot do this:
   translateX(-50%) makes .giant a stacking context. */
.giant--front { z-index: 3; }
.giant--front .giant__peter { background: none; }
.giant--front .giant__nq { -webkit-text-fill-color: #ffffff; }

/* hero art — inline SVG stock chart (see index.html).
   Position derives from the wordmark ink, measured at 1440w (2026-09-01):
   the drawn line (viewBox x 85-635, centered at 360) is horizontally
   centered on the PETERNQ ink center (50.75cqw), its high point ends
   ~0.6cqw above the Q's ink top (12.88cqw) and its low point ~0.9cqw above
   the feature block (33.6cqw). 1 viewBox unit = 54.59/720 cqw. */
.art {
  position: absolute;
  left: 23.46cqw;
  top: 2.42cqw;
  width: 54.59cqw;
  height: 54.59cqw;
  z-index: 2; /* between base .giant (1) and .giant--front (3) */
}

.art__vector {
  position: absolute;
  /* offsets compensate the .art reposition above (was 10.33/5.9 when .art
     sat at 22.73/3.61) so this backdrop stays exactly where it was */
  left: 9.6cqw;
  top: 7.08cqw;
  width: 32.6cqw;
  height: 35.55cqw;
}

.art__chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* every stroke/fill in the SVG uses currentColor — this one line
     recolours the whole chart when --accent changes */
  color: var(--accent);
}

/* nav — pinned header (Kwon 2026-09-21).
   .nav-shell is fixed over the hero's exact box (the hero's 12px padding in
   from each edge) and is its own size container, so the nav's cqw values
   measure the same width they did inside .stage. At the top of the page the
   nav sits exactly where it always did, fully transparent. Once the page
   scrolls past 40px, the inline script in index.html flips --nav-p to 1 and
   the transition below carries the bar into a centred frosted-glass pill.
   --nav-p is a registered property so it can transition. Scroll-triggered,
   not an entrance animation, and no element opacity is involved. */
@property --nav-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.nav-shell {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 50; /* above the page, under the lightbox (100) */
  container-type: inline-size;
  pointer-events: none; /* the shell is as wide as the page — only the bar takes clicks */
}

.nav {
  position: absolute;
  left: calc(4.17cqw + 13.8cqw * var(--nav-p));
  right: calc(4.17cqw + 13.8cqw * var(--nav-p));
  top: calc(2.9cqw - 2.3cqw * var(--nav-p));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(0.45cqw * var(--nav-p)) calc(0.6cqw * var(--nav-p)) calc(0.45cqw * var(--nav-p)) calc(1.4cqw * var(--nav-p));
  border-radius: 1.6cqw;
  background: rgba(14, 16, 20, calc(0.72 * var(--nav-p))); /* dark enough that the muted links stay readable over the white result screenshots */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(0.12 * var(--nav-p)));
  -webkit-backdrop-filter: blur(calc(18px * var(--nav-p))) saturate(calc(1 + 0.4 * var(--nav-p)));
  backdrop-filter: blur(calc(18px * var(--nav-p))) saturate(calc(1 + 0.4 * var(--nav-p)));
  /* the pill settles at 80% size — full size read too big (Kwon 2026-09-21).
     Scaled from the top centre so it stays centred on the page. */
  transform: scale(calc(1 - 0.2 * var(--nav-p)));
  transform-origin: 50% 0;
  pointer-events: auto;
  transition: --nav-p 0.9s cubic-bezier(0.3, 1.15, 0.5, 1); /* long, soft ease with a slight settle past the end — "like water" (Kwon 2026-09-21) */
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.94cqw;
}

.brand__mark { width: 1.89cqw; height: 3.845cqw; }

.brand__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1cqw;
  line-height: 1.05;
  letter-spacing: 0.02em;
  /* wordmark is mixed-case "PeterNQ" — no uppercase transform */
}

.brand__dot { color: var(--accent); }

.nav__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: calc(5.56cqw - 2.8cqw * var(--nav-p)); /* links draw in with the pill */
  font-size: 1.11cqw;
}

.nav__links a { color: var(--muted); font-weight: 400; }
.nav__links a.is-active,
.nav__links a:hover { opacity: 1; font-weight: 700; }

.nav__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  gap: 1cqw;
  padding: 1.25cqw 1.39cqw;
  /* outline fades out as the glass bar forms — a box inside the pill read out
     of place (Kwon 2026-09-21) */
  border: 1px solid rgba(255, 255, 255, calc(0.2 * (1 - var(--nav-p))));
  border-radius: 1.11cqw;
  font-weight: 700;
  font-size: 1.11cqw;
}

.nav__cta img { width: 1.11cqw; height: 1.11cqw; }

/* feature block — carries the main hero copy */
.feature__glyph {
  position: absolute;
  left: 4.17cqw;
  top: 33.55cqw;
  width: 1.38cqw;
  height: 2.04cqw;
}

.feature {
  position: absolute;
  left: 8.73cqw;
  /* 31.4 not 33.6 — buys the gap Peter wanted above the CTA without pushing the
     button past the bottom of the stage (2026-09-16) */
  top: 31.4cqw;
  /* 25cqw: widened from 23 for the longer 2026-09-16 headline. Still clear of
     the chart's drawn band, which starts further right than .art's box edge. */
  width: 25cqw;
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
}

/* upright, not italic (Peter 2026-09-16). 1.5cqw with tight leading keeps the
   longer headline to four lines in the narrow column so it doesn't crowd the
   CTA below it. */
.feature__title {
  /* deliberately SMALLER than .feature__desc below it (Peter 2026-09-16) — the
     pain list is the lead-in, the promise line is the headline */
  font-weight: 700;
  font-size: 1.12cqw;
  font-style: italic;   /* Peter 2026-09-16 — lead-in only, the promise stays upright */
  line-height: 1.35;
  opacity: 0.85;
  text-wrap: balance;
}

.feature__desc {
  /* this line carries the promise, so it outranks the h1 above it visually */
  font-weight: 800;
  font-size: 1.5cqw;
  line-height: 1.3;
  opacity: 1;
}

/* CTA pair — two buttons: group course + 1-on-1 application */
.cta-row {
  position: absolute;
  left: 8.75cqw;
  /* pushed again for the longer headline (2026-09-16); measured against the
     stage bottom so the button still clears it */
  top: 50.2cqw;
  display: flex;
  gap: 1.1cqw;
}

.cta { display: flex; }

.cta__label {
  display: flex;
  align-items: center;
  height: 3.61cqw;
  padding: 0 1.39cqw;
  background: #fff;
  color: #000;
  border-radius: 1.11cqw;
  font-weight: 700;
  font-size: 1.11cqw;
  white-space: nowrap;
}

.cta__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.61cqw;
  width: 3.89cqw;
  background: var(--accent);
  border-radius: 1.11cqw;
}

.cta__arrow img { width: 1.11cqw; height: 1.11cqw; }

/* ghost = ONE outlined button since 2026-09-21 (Kwon), same idea as
   .cta--big below: the outline is on the anchor, the spans are its contents */
.cta--ghost {
  align-items: center;
  gap: 0.8cqw;
  height: 3.61cqw;
  padding: 0 1.2cqw 0 1.39cqw;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1.11cqw;
}

.cta--ghost .cta__label,
.cta--ghost .cta__arrow {
  height: auto;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
}

.cta--ghost .cta__label { color: #fff; }

.cta:hover .cta__label { background: var(--accent); color: #000; border-color: var(--accent); }
.cta--ghost:hover { background: var(--accent); border-color: var(--accent); }
.cta--ghost:hover .cta__label { background: none; }
/* the arrow svg is accent-coloured — turn it black on the accent fill */
.cta--ghost:hover .cta__arrow img { filter: brightness(0); }

/* hero primary — ONE oversized accent CTA into the funnel. A scaled-up
   variant of the standard cta (same label+arrow anatomy), not a new design
   language. Accent-filled so it's the first thing the eye lands on. */
/* ONE button since 2026-09-21 (Kwon): label and arrow used to be two accent
   blocks side by side, which read as two buttons. The anchor is now the
   button; the two spans are just its contents. Applies to every .cta--big
   (hero APPLY NOW, results JOIN NOW, join bar GAIN ACCESS). */
.cta--big {
  align-items: center;
  gap: 1cqw;
  height: 4.6cqw;
  padding: 0 2cqw 0 2.4cqw;
  border-radius: 1.4cqw;
  background: var(--accent);
}

.cta--big .cta__label,
.cta--big .cta__arrow {
  height: auto;
  width: auto;
  padding: 0;
  border-radius: 0;
  background: none;
}

.cta--big .cta__label { font-size: 1.5cqw; }

.cta--big .cta__arrow img { width: 1.4cqw; height: 1.4cqw; }

/* hero label only (Peter 2026-09-16) — a hair lighter than the pure #000 the
   join bar's identical button uses. Deliberately subtle; not a grey. */
.hero .cta--big .cta__label { color: #1a1a1a; }
.hero .cta--big:hover .cta__label { color: #1a1a1a; }

.cta--big:hover { background: #fff; }
.cta--big:hover .cta__label { background: none; }

/* quieter secondary route — sits in the old circular-badge slot, vertically
   centered against the big CTA's row. Hidden on mobile (the stat tile
   carries the results link there). */
.cta--results {
  position: absolute;
  right: 4.17cqw;
  top: 47.4cqw;
}

/* stat cards — glass with gradient accent border. Numbers are BRACKETED
   placeholders until Peter supplies real stats — never invent them. */
.stat {
  position: absolute;
  width: 11.11cqw;
  padding: 1.39cqw;
  border-radius: 1.53cqw;
  display: flex;
  flex-direction: column;
  gap: 1.25cqw;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(315deg, var(--accent), transparent 86%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.stat--prompts { left: 62.5cqw; top: 32.27cqw; }
/* top moved up 1cqw from the template's 42.83: the two-line "Years
   profitable trading" label makes the tile taller, and at 42.83 it sat
   ~7px from the stage's overflow-hidden bottom edge (measured 1001-1440w) */
.stat--learners { left: 46.35cqw; top: 41.83cqw; }

.stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.92cqw;
  height: 2.92cqw;
  border-radius: 0.69cqw;
  background: rgba(255, 255, 255, 0.1);
}

.stat__icon img { width: 1.39cqw; height: 1.39cqw; }

.stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1cqw;
  line-height: 1;
}

/* line-height 1.25, not 1: "Years profitable trading" wraps to two lines
   inside the tile width */
.stat__label { font-size: 0.97cqw; line-height: 1.25; color: var(--muted); }

/* wrapper around the two hero stat tiles. No box on desktop — the tiles stay
   absolutely positioned against .stage. Becomes a flex row on mobile. */
.stats { display: contents; }

/* sub-labels inside the grouped contact fieldset — quieter than a .q__label
   because the fieldset's legend is already carrying the heading */
.q__sublabel {
  display: block;
  margin: 18px 0 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.q--contact .q__input { margin-bottom: 0; }

/* mobile-only results link inside the Students-coached tile — desktop has
   the hero results button instead */
.stat__link { display: none; }

/* ══════════════════════════════ SECTIONS ══════════════════════════════ */

main { padding: 96px 0 32px; }

.section-head { text-align: center; margin-bottom: 96px; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.section-title {
  font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: 16px;
}

.section-lede {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto;
}

/* section line (results / mentorship) */
.line { margin-bottom: 112px; }

/* one heading-to-content gap for every section (Kwon 2026-09-21). It was
   16 / 40 / 16 / 18 / 40px across results / mentorship / 1-on-1 / FAQ /
   community; 20 keeps the tight feel Peter asked for on results, 1-on-1 and
   the FAQ and brings the other two into line. */
.line__head { max-width: 560px; margin-bottom: 20px; }

.line__eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.line__title {
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  margin-bottom: 12px;
}

.line__desc {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* the results and 1-on-1 standfirsts are one-line footnotes, not descriptions
   like the community one — Peter wanted them dropped back (2026-09-17) */
#results .line__desc,
#coaching .line__desc { font-size: 13px; }

/* student results — real screenshots (consent cleared 2026-08-29), six
   uniform tiles (client request, feedback round 2). 3:4 tile ratio: four of
   the six images are portrait between 0.55 and 0.89, so a 3:4 (0.75) crop
   loses the least across the set; the one 1096×569 landscape crops hardest
   and relies on the lightbox for its full view. auto-fill at 280px min
   collapses 3 → 2 → 1 columns with no media query. */

/* swipe affordance under the results standfirst — the peeking next tile alone
   wasn't obvious enough (Peter 2026-09-16) */
.results__hint {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.85;
}

/* horizontal slider, not a tall column (Peter 2026-09-16): six full-height
   screenshots stacked meant a long scroll past the same kind of image. As a
   snapping row it costs one screen and each shot is still shown whole.
   CSS scroll-snap only — no library, no JS. The tiles keep their natural
   aspect ratios (max-height + max-width, never a fixed ratio) because cropping
   these was the earlier complaint. */
.results {
  display: flex;
  align-items: center;
  /* No margin here on purpose. It would collapse against `.line__head`'s
     margin-bottom and only the larger of the two would apply, so the gap above
     the slider is controlled by the scoped rule below instead. */
  margin-top: 0;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  padding-bottom: 6px;
  /* the row is a drag/swipe surface; the bar adds noise on a dark panel */
  scrollbar-width: none;
}

.results::-webkit-scrollbar { display: none; }

/* tile is a <button> for keyboard access — reset the button chrome */
.result {
  display: block;
  flex: 0 0 auto;
  scroll-snap-align: center;
  padding: 0;
  margin: 0;
  line-height: 0;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
}

.result img {
  display: block;
  width: auto;
  height: auto;
  max-height: 440px;
  max-width: min(78vw, 380px);
}

/* lightbox — [hidden] must win over display:flex */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 12px;
}

/* 01 Community — two columns: bold hairline-separated perk rows (same
   visual language as the curriculum blocks) beside a square photo of Peter
   with the single community CTA under it. */
.community {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: start;
}

.community__list li {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}

.community__list li:first-child { border-top: 0; padding-top: 0; }

.community__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* square is a CSS crop (object-fit) — never bake it into the image file */
.community__photo {
  width: 100%;
  /* 4/5 not 1/1 since 2026-09-17 — Peter wanted it taller. The source is a tall
     portrait, so a squarer frame threw most of it away. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid var(--hairline);
}

/* "What's inside" curriculum grid — Peter's content blocks. More blocks are
   coming: new cards append into the grid and wrap automatically, no CSS
   change needed. */
.inside__heading {
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 24px);
  margin-bottom: 20px;
}

.inside {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* tightened 2026-09-17 — Peter found this block a long scroll on a phone */
  gap: 14px;
  margin-bottom: 8px;
}

.inside__card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--surface);
}

.inside__no {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 7px;
}

.inside__title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 9px;
}

.inside__intro {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 4px;
}

.inside__list li {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  padding: 6px 0;
  border-top: 1px solid var(--hairline);
}

.inside__list li:first-child { border-top: 0; padding-top: 4px; }

/* outcome line — the block's highlighted takeaway: bold + accent, pinned to
   the card bottom. No arrow glyph (Kwon's spec 2026-08-29). */
.inside__goal {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--hairline);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--accent);
}

/* closing statement — stands alone under the curriculum grid */
.inside__closing {
  max-width: 720px;
  /* the gap above this line is `.inside`'s margin-bottom, not a margin here —
     they collapse, so the larger of the two wins (Peter 2026-09-18) */
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.55;
}

/* the FAQ is a utility block, not a pitch — it gets less air than the offer
   sections above it (Peter 2026-09-18) */
#faq { margin-bottom: 76px; }

/* FAQ accordion. Native <details>/<summary>, so the open/close state, the
   keyboard handling and the screen-reader semantics all come from the browser —
   no JavaScript, in keeping with the zero-dependency rule. The only styling
   work is hiding the browser's default triangle and supplying our own marker.
   The marker's rotate is a state change on click, the same family as a hover or
   press state — it is NOT an entrance animation, and nothing here can leave an
   element stuck invisible. */
.faq { border-top: 1px solid var(--hairline); }

.faq__item { border-bottom: 1px solid var(--hairline); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  /* both lines are needed — the pseudo-element covers older WebKit */
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q:hover { color: var(--accent); }

.faq__mark {
  flex: none;
  display: flex;
  color: var(--accent);
  transition: transform 0.18s ease;
}

.faq__item[open] .faq__mark { transform: rotate(180deg); }

.faq__a {
  max-width: 640px;
  padding-bottom: 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* the assurance line above the join button. Accent hairline on the left so it
   reads as a promise set apart from the pitch above it, not another paragraph. */
.assurance {
  max-width: 720px;
  /* this margin is also the gap BELOW .inside__closing — the two collapse and
     the larger wins, so set the spacing between them here */
  margin-top: 34px;
  padding-left: 16px;
  border-left: 2px solid var(--accent);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.assurance strong { color: var(--ink); font-weight: 700; }

/* shared action button — the old tier CTA generalized for the join bar,
   the 1-on-1 card, and the final strip */
.btn {
  display: block;
  text-align: center;
  padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.15s, color 0.15s, box-shadow 0.25s ease-out;
}

.btn:hover { background: #fff; color: #000; }

.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.btn--accent:hover { background: #fff; border-color: #fff; }

/* the purchase action — "Join now" in the join bar and final strip reads
   bigger than every other button on the page */
.btn--big {
  padding: 20px 48px;
  border-radius: 18px;
  font-size: 18px;
}

/* mentorship join bar — "Get access" + checkout (the price lives on Whop
   only, by design), keeps the featured-glass emphasis the old group offer
   card carried */
/* in-section CTA — currently the one under the results slider. `container-type`
   because `.cta--big` is sized in cqw and these sections are not otherwise
   containers, same reason `.join` has one. */
.section-cta {
  container-type: inline-size;
  display: flex;
  justify-content: center;
  margin-top: 72px;
}

.join {
  position: relative;
  /* .cta--big is sized in cqw — without this the button inside would resolve
     those against the viewport instead of this bar and drift out of step with
     the identical one in the hero */
  container-type: inline-size;
  display: flex;
  align-items: center;
  /* single child since 2026-09-16 (the "Get access" line and the pointer arrow
     were removed) — centre it rather than pinning it left */
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  padding: 24px 28px;
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.join::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(315deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* pointer from the "Get access" line to the button — space-between puts it
   dead centre between the two. Decorative only; the button is still the link. */
.join__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* inline SVG drawn with currentColor, so it follows --accent on its own and
     is NOT another baked-hex asset to find-replace on an accent change */
  color: var(--accent);
}

.join__arrow svg { width: 48px; height: 16px; }

.join__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
}

/* OR divider — deliberately oversized: its job is pulling the scroll from
   the mentorship join bar down to the 1-on-1 option. Negative top margin
   eats part of the section's 112px bottom margin so the OR sits between
   the offers rather than orphaned. */
.or {
  /* pulled in tight on both sides (Peter 2026-09-18) — the divider is a beat
     between the two offers, so it has to feel connected to them. The negative
     top margin eats into the preceding `.line`'s 112px bottom margin. */
  margin-top: -68px;
  margin-bottom: 44px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* 1-on-1 — deliberately QUIETER than the group section: hairline border,
   flat background, no glass, no glow. Exclusive reads as understated. */
.solo {
  position: relative;
  padding: 36px;
  border-radius: 22px;
  background: var(--surface);
}

/* premium border — the same gradient-hairline treatment the stat cards and
   join bar carry, on a flat (non-glass) body so it still reads quieter
   than the mentorship bar */
.solo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(315deg, var(--accent), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.solo__list { margin-bottom: 24px; }

/* all rows bold, full ink — the coloured rows carry the hierarchy */
.solo__list li {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.45;
  /* tightened 2026-09-18 — 16px read as four separate statements, 9px was too
     cramped; 12 is where Peter settled */
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}

.solo__list li:first-child { border-top: 0; padding-top: 0; }

/* two highlight rows in the 1-on-1 list, deliberately different colours: gold
   marks what carries over from the Mentorship tier, accent marks what is extra
   on top of it. */
.solo__row--gold { color: var(--gold); }
.solo__row--accent { color: var(--accent); }

/* right-aligned, same size/prominence as the mentorship Join now */
.solo__btn {
  width: fit-content;
  margin-left: auto;
}

/* final CTA strip — both real CTAs on one slim line. align-items: center,
   not stretch, so the oversized Join now visibly out-sizes the 1-on-1
   button instead of stretching it to match. */
.strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}

/* socials as plain text links, not buttons (Kwon 2026-09-21) */
.strip { gap: 40px; }
.strip__link {
  font-weight: 700;
  font-size: 16px;
  color: var(--muted);
}
.strip__link:hover { color: var(--accent); }

/* ══════════════════════════════ SURVEY PAGE ══════════════════════════════ */

/* subpage nav band — same markup as the hero nav, px-scaled outside the stage */
.subnav { padding: 12px 12px 0; }

.subnav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface);
}

.subnav .brand { gap: 10px; }
.subnav .brand__mark { width: 22px; height: 44.6px; }
.subnav .brand__word { font-size: 13px; }
.subnav .nav__cta { width: auto; gap: 10px; padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.subnav .nav__cta img { width: 14px; height: 14px; }

.survey { max-width: 720px; padding-top: 96px; padding-bottom: 32px; }

.survey .section-head { text-align: left; margin-bottom: 24px; }
.survey .section-lede { margin: 0; font-size: 13px; }
.survey .section-title { margin-bottom: 8px; color: var(--gold); }

.q { margin-bottom: 40px; border: 0; }

.q__label {
  display: block;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  margin-bottom: 6px;
}

.q__help {
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
}

.q__label + .q__options,
.q__label + .q__input { margin-top: 14px; }

.q__input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
}

.q__input:focus {
  outline: none;
  border-color: var(--accent);
}

textarea.q__input { min-height: 120px; resize: vertical; }

.q__options { display: grid; gap: 10px; }

.q__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.q__option:hover { border-color: rgba(255, 255, 255, 0.35); }

.q__option input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-content: center;
}

.q__option input::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.q__option input:checked { border-color: var(--accent); }
.q__option input:checked::after { background: var(--accent); }

.q__option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.survey__submit {
  display: block;
  width: 100%;
  padding: 18px 0;
  background: var(--accent);
  color: #000;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.25s ease-out;
}

.survey__submit:hover { background: #fff; }

.survey__note {
  text-align: center;
  margin-top: 14px;
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
}

.survey__error {
  color: #f87171;
  opacity: 1;
  font-weight: 400;
}

/* confirmation state — shown in place of the form after submit */
.survey__done {
  display: none;
  padding: 48px 32px;
  border: 1px solid var(--accent);
  border-radius: 22px;
  text-align: center;
}

.survey__done.is-visible { display: block; }

.survey__done h2 { font-size: 24px; margin-bottom: 12px; }

.survey__done p {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.survey__done .survey__done-ig { margin-top: 20px; color: var(--ink); font-weight: 500; }
.survey__done-btn { margin-top: 20px; }

/* ══════════════════════════════ FOOTER ══════════════════════════════ */

/* risk disclaimer — deliberately small and quiet, but present on every page */
.footer__disclaimer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  max-width: 760px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
  opacity: 0.75;
}


.footer {
  border-top: 1px solid var(--hairline);
  padding: 48px 0;
  margin-top: 96px;
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.footer__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
}

.footer__line {
  font-weight: 300;
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
}

.footer__social {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 400;
}

.footer__social a { opacity: 0.6; }
.footer__social a:hover { opacity: 1; color: var(--accent); }

.footer__meta {
  text-align: right;
  font-weight: 300;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}

.footer__meta a:hover { color: var(--accent); }

/* press state — accent glow spreads out of the action buttons */
.btn,
.survey__submit {
  box-shadow: 0 0 20px 0 color-mix(in srgb, var(--accent) 0%, transparent);
}

.btn:active,
.survey__submit:active {
  box-shadow: 0 0 20px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ══════════════════════════════ MOBILE ══════════════════════════════ */

@media (max-width: 1000px) {

  .hero { padding: 8px; }

  .stage {
    aspect-ratio: auto;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    /* 113px top = 20 original + 45 nav + 28 gap the fixed nav no longer
       occupies in the flow, + 20 to restore the 32px nav-to-copy gap from
       2026-09-16 (it had drifted to 12px). */
    padding: 113px 14px 32px;   /* narrower side gutters (Peter 2026-09-16) */
    gap: 28px;
  }

  .bd--star {
    width: 200vw;
    height: 200vw;
    left: 50%;
    top: 30%;
  }

  .giant,
  .art,
  .nav,
  .feature,
  .cta-row,
  .stat {
    position: static;
    transform: none;
    width: auto;
    z-index: 1; /* flex items accept z-index even when static — keeps them above the absolute backdrop */
  }

  /* pinned header on phones (Kwon 2026-09-21): a full-width glass bar rather
     than the desktop pill. At the top of the page it sits exactly where the
     in-flow nav used to (28px down, 22px in) and is transparent. With
     --nav-p (see the desktop .nav comment) it tightens and frosts, and the
     logo slides to the centre by --brand-x — measured by the inline script,
     clamped so it never slides under Get access. */
  .nav-shell { top: 0; left: 0; right: 0; }
  .nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: calc(28px - 16px * var(--nav-p)) calc(22px - 6px * var(--nav-p)) 12px; /* sides and the button tighten so the logo has room to reach true centre on a 390px phone */
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, calc(0.1 * var(--nav-p)));
  }
  .brand { transform: translateX(calc(var(--brand-x, 0px) * var(--nav-p))); }
  /* anchor jumps land below the pinned bar (69px tall once scrolled) */
  section[id] { scroll-margin-top: 72px; }
  .nav__links { display: none; }
  .brand__mark { width: 22px; height: 44.6px; }
  .brand__word { font-size: 13px; }
  .nav__cta { width: auto; gap: 10px; padding: 12px calc(16px - 4px * var(--nav-p)); border-radius: 12px; font-size: 14px; }
  .nav__cta img { width: 14px; height: 14px; }

  .giant {
    order: 2;
    /* 14vw — reduced ~22% from 18vw with the desktop size (client feedback
       2026-08-29, kept proportional). The old 18vw was itself measured to
       fit with ≥24px margin at 320-768, so the smaller size only adds
       margin; re-measured in the width sweep anyway. */
    font-size: 14vw;
    line-height: 0.8;
    text-align: center;
    white-space: normal;
    /* reset the desktop ink padding — mobile is solid-fill text (no
       background-clip), so the ink-box workaround isn't needed and the
       padding would misalign the flex column */
    padding: 0;
    margin: 12px 0 0;
    /* solid fill instead of the desktop clipped-gradient: with line-height 0.8
       the glyph ink overflows the border box, and how background-clip: text
       paints outside the box is engine-sensitive. Solid text paints at full
       ink extent everywhere. */
    background: none;
    -webkit-text-fill-color: currentColor;
    color: rgba(255, 255, 255, 0.55);
  }

  /* no chart/wordmark overlap on mobile (flex column), so the front copy
     would just render a second headline — hide it. NQ stays opaque white
     here too; PETER drops the desktop gradient for the flat mobile color. */
  .giant--front { display: none; }
  .giant__peter { background: none; }
  .giant__nq { color: #fff; }

  /* Peter 2026-09-16: the oversized wordmark is hidden on PHONES ONLY. Stacked
     in the flex column it ate most of a screen before anyone reached the
     pitch, and the nav already carries the brand. The .giant block above is
     therefore inert at this width — left intact because desktop still uses it
     (the PETER / chart / NQ sandwich only exists there). */
  .giant { display: none; }

  .art {
    order: 3;
    position: relative; /* containing block for the absolutely-inset chart svg */
    left: auto; /* desktop left/top would apply as relative offsets */
    top: auto;
    width: 100%;
    /* height: auto is load-bearing: the desktop height (54.59cqw) otherwise
       leaks in and beats aspect-ratio, letterboxing the box. */
    height: auto;
    aspect-ratio: 1 / 1;
    /* MERGED SECTION (client request 2026-09-01): the chart is no longer its
       own band — the feature block + CTA overlay it. The art box is square
       (height = 100vw - 56px of hero+stage padding); this margin pulls the
       following flex items up over it so the text sits on the chart's drawn
       band. The art still PAINTS its full square behind them (flex items all
       carry z-index 1, so later DOM order — feature, cta, stats — wins). */
    /* The copy now starts at the TOP of the chart square rather than partway
       down it (Peter 2026-09-16) — the square's upper half is empty sky and it
       was pushing the pitch ~108px below the nav. The chart still paints its
       full square behind the copy, CTA and stat tiles.
       NOTE the 44px: it is the hero's 8px + stage's 14px padding on each side.
       It was 56px while the stage had 20px gutters — keep the two in step or
       the pull stops matching the square's real height. */
    margin: 0 0 calc(-1.07 * (100vw - 44px));
  }

  /* the drawn line is centered in its viewBox (x 85-635), so the chart
     needs no mobile re-centering offset */

  /* dim the chart to background texture — text overlays it now and wins
     every conflict. Selectors address the untouched inline SVG by attribute:
     [filter] = the glow pass, [mask] = the gradient fill, last-of-type = the
     price line (candles live inside the <g> and keep their 0.18). The line
     lands just above the candles' visibility; the glow nearly vanishes. */
  .art__chart > path[filter] { opacity: 0.15; }
  .art__chart > path[mask] { opacity: 0.5; }
  .art__chart > path:last-of-type { opacity: 0.26; }

  .art__vector { left: 19%; top: 11%; width: 60%; height: 65%; }

  .feature__glyph { display: none; }

  .feature { order: 5; gap: 10px; text-align: center; align-items: center; }
  /* larger + fully opaque: this is body copy sitting ON the dimmed art */
  /* Peter 2026-09-16: weight flipped. The product name is now a quiet label
     and the sentence under it carries the pitch — this is a sales page, the
     headline shouldn't be the loudest thing on it. */
  /* the pain-point question is the headline now (Peter 2026-09-16 — the
     "PNQ Mentorship" label was dropped entirely). Bold italic, tight leading,
     `text-wrap: balance` so the lines come out even instead of ragged. */
  .feature__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    max-width: none;
    opacity: 0.85;
    text-wrap: pretty;
  }
  .feature__desc {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    max-width: none;
    opacity: 1;
    text-wrap: pretty;
  }
  .feature { order: 5; gap: 13px; }

  .cta-row {
    order: 6;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 4px;  /* button sits close under the copy (Peter 2026-09-16) */
  }

  .cta { justify-content: center; }
  .cta__label { height: 52px; padding: 0 22px; border-radius: 16px; font-size: 16px; }
  .cta__arrow { height: 52px; width: 56px; border-radius: 16px; }
  .cta__arrow img { width: 16px; height: 16px; }

  /* the big CTA's cqw sizing would out-rank the generic mobile rules above —
     override it explicitly, slightly larger than the standard mobile cta */
  .cta--big { height: 56px; gap: 14px; padding: 0 24px 0 30px; border-radius: 16px; }
  .cta--big .cta__label { height: auto; padding: 0; font-size: 17px; }
  .cta--big .cta__arrow { height: auto; width: auto; }
  .cta--big .cta__arrow img { width: 18px; height: 18px; }

  /* results route lives in the stat tile on mobile, not the hero button */
  .cta--results { display: none; }

  /* trimmed 2026-09-16 (Peter) — these were pulling attention off the CTA,
     and full-width tiles left a lot of dead space to the right of the copy.
     Side by side, each half the row, they read as a small stat pair. */
  .stats {
    display: flex;
    order: 7;
    gap: 10px;
    align-items: stretch;      /* equal heights across the pair */
    justify-content: center;   /* the pair is content-width — centre it */
    margin-top: 18px;          /* breathing room under the CTA (Peter) */
  }
  /* two small content-width boxes sitting side by side (Peter 2026-09-16).
     flex-shrink stays on so they compress rather than overflow on 320px. */
  /* fit-content, not a fixed 60%: at a set width the tiles were far wider than
     their longest line and the whole right half of each box sat empty. */
  .stat { flex: 0 1 auto; width: fit-content; max-width: 100%; min-width: 0; padding: 12px 14px 12px 10px; border-radius: 16px; gap: 6px; }
  .stat--learners { order: 2; }
  .stat__icon { width: 32px; height: 32px; border-radius: 9px; }
  .stat__icon img { width: 16px; height: 16px; }
  .stat__num { font-size: 22px; }
  .stat__label { font-size: 12px; }

  .stat__link {
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
    color: var(--accent);
  }

  main { padding-top: 72px; }
  .section-head { margin-bottom: 64px; }
  .line { margin-bottom: 80px; }
  /* pull the slider out to the screen edges so the neighbouring shot peeks in
     and it reads as swipeable; the padding keeps the first one aligned with the
     section heading */
  .results {
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
    gap: 12px;
  }
  .result img { max-height: 360px; max-width: 76vw; }
  /* single column: list first, then photo + button as the closing unit —
     the pitch stays above the fold, the CTA sits right under Peter's face */
  .community { grid-template-columns: 1fr; gap: 36px; }
  .community__list li { font-size: 15px; padding: 14px 0; }
  .or { margin-top: -44px; margin-bottom: 34px; }
  .inside { grid-template-columns: 1fr; margin-bottom: 6px; }
  .section-cta { margin-top: 56px; }
  .join { flex-direction: column; margin-top: 40px; }
  .join .btn { width: 100%; }
  /* stacked on mobile — turn the pointer to face the button below it. The
     span reserves the rotated height so it doesn't collide with the button. */
  .join__arrow { height: 48px; }
  .join__arrow svg { transform: rotate(90deg); }
  #faq { margin-bottom: 56px; }
  .faq__q { font-size: 14px; padding: 12px 0; }
  .faq__a { font-size: 13.5px; padding-bottom: 14px; }
  .solo { padding: 24px; }
  .solo__btn { width: 100%; margin-left: 0; }
  .strip { gap: 32px; } /* text links sit side by side on phones too */

  .subnav { padding: 8px 8px 0; }
  .subnav__inner { padding: 14px 16px; }
  .survey { padding-top: 64px; }

  .footer { margin-top: 48px; } /* 96 + the 48 padding left ~144px of dead space above the footer text on phones */
  .footer__inner { flex-direction: column; }
  .footer__meta { text-align: left; }
}

/* reduced motion — last in the file so it outranks the rules it disables */
@media (prefers-reduced-motion: reduce) {
  /* glow still appears on press, but instantly — only the spread motion is removed */
  .btn,
  .survey__submit {
    transition-property: background, color;
  }
  .nav { transition-duration: 0.2s; transition-timing-function: ease-out; }
}