/* ==========================================================================
   v3 additions — For Good Club, Direction 02 dark editorial
   Loaded after theme.css, page.css and v2.css, and scoped to .v3 so nothing
   here can reach v1 or v2. Tokens only, no new colours or fonts.
   ========================================================================== */

/* ---------- The five ----------
   The per-role fees are back, so .method-row keeps its own four-column grid
   (number / title / detail / right-aligned fee) and page.css keeps styling the
   fee cell in lime. Nothing to override here. */

/* ---------- The ranked verdict ----------
   The argument is that one item outranks the others, so the first row is the
   only one that gets the lime rule and the larger number. The rest step back
   deliberately. */
.v3 .ranked { display: grid; gap: 0; border-top: 1px solid var(--pg-line); }
.v3 .rank {
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: 20px 32px; align-items: baseline;
  padding: clamp(24px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--pg-line);
}
.v3 .rank__n {
  font-size: 13px; font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em; opacity: 0.58;
}
.v3 .rank__text { display: grid; gap: 10px; }
.v3 .rank__title {
  margin: 0; font-size: clamp(20px, 2.2vw, 30px); font-weight: 500;
  line-height: 1.08; letter-spacing: -0.025em; color: var(--pg-fg);
}
.v3 .rank__body { margin: 0; font-size: 15px; line-height: 1.6; opacity: 0.72; max-width: 35rem; }

.v3 .rank--first { border-bottom-color: var(--fgc-lime); }
.v3 .rank--first .rank__n { opacity: 1; color: var(--fgc-lime); font-size: 15px; }
.v3 .rank--first .rank__title { font-size: clamp(24px, 3vw, 40px); }
.v3 .rank--first .rank__body { opacity: 0.85; }

@media (max-width: 720px) {
  .v3 .rank { grid-template-columns: 44px minmax(0, 1fr); gap: 12px 16px; }
}


/* Route one carries words where route two carries a figure, so it is set a
   step down to stop the phrase wrapping mid-column. */
.v3 .versus__col:not(.versus__col--alt) .versus__figure {
  font-size: clamp(32px, 3.8vw, 56px);
}

/* ---------- Cleared results ----------
   Every line here traces to the cleared proof list, so the figure leads and
   the sentence explains it. */
.v3 .wins { list-style: none; margin: 0; padding: 0; display: grid; }
.v3 .win {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px 32px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--pg-line);
}
.v3 .win:last-child { border-bottom: 1px solid var(--pg-line); }
.v3 .win__fig {
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 700;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--fgc-lime);
}
.v3 .win__txt { font-size: 15px; line-height: 1.6; opacity: 0.8; max-width: 35rem; }
@media (max-width: 640px) {
  .v3 .win { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---------- The closing quote ----------
   The section ends on the client who wishes she had started sooner, so it sits
   on its own with room around it. */
.v3 .closing-quote { max-width: 34ch; }
.v3 .closing-quote .h3 { font-family: var(--font-serif); font-style: italic; }
.v3 .closing-quote__by {
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.55;
}

/* ---------- Three things, three columns ----------
   v2 ran these two across with the third centred underneath. v3 puts all three
   on one line, so the icon sits above its text rather than beside it and the
   three columns read as a set. Below 860px it stacks, same as before. */
.v3 .walk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 48px); }
.v3 .walk-grid > :last-child { grid-column: auto; max-width: none; justify-self: stretch; }
.v3 .walk { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.v3 .walk__body { font-size: 15px; }
@media (max-width: 960px) and (min-width: 861px) {
  .v3 .walk__title { font-size: 19px; }
  .v3 .walk__body { font-size: 14px; }
}
@media (max-width: 860px) {
  .v3 .walk-grid { grid-template-columns: 1fr; }
  .v3 .walk { grid-template-columns: auto minmax(0, 1fr); }
}

/* ---------- Proof portrait, half the size ----------
   v2 gave the portrait the 1fr track (via order: -1) so it ran about 670px at
   1440 and dominated the section. v3 sizes the picture column explicitly at
   21rem, roughly half, and lets the words take the rest. The stacked layout
   below 900px is unchanged. */
.v3 .split-ed--flip { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: center; }
.v3 .split-ed--flip .split-ed__img { order: 0; }
@media (max-width: 900px) {
  .v3 .split-ed--flip { grid-template-columns: 1fr; }
  .v3 .split-ed--flip .split-ed__img { max-width: 20rem; }
}

/* ---------- Mobile touch targets ----------
   Most of the page was already fine: the accordion rows run 74-92px and the
   registration buttons are full-width. These four were not. WCAG 2.5.8 asks for
   24px minimum and Apple's guidance is 44px, so 44 is the bar used here. The
   visual size of each control is unchanged; the tappable box grows around it. */
.v3 .nav-toggle { min-height: 44px; }   /* it was already 53px wide; only the height was short */
.v3 .carousel__btn { width: 44px; height: 44px; }
/* Only above 400px: page.css deliberately hides this pill on narrower phones,
   and a bare `display` here would override that and push the header off-screen. */
@media (min-width: 401px) {
  .v3 .site-header__cta { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 900px) {
  .v3 .site-nav a { min-height: 44px; display: flex; align-items: center; }
  /* The wordmark is the only way back to the top on a phone, so it gets a
     real box rather than the height of its own text. */
  .v3 .site-header__mark { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- Short phones ----------
   On a 667px-tall screen (iPhone SE) the second session button lands just under
   the fold. The three chips above the form repeat what the note under the
   buttons already says, so on short viewports they come out and both dates fit. */
@media (max-width: 480px) and (max-height: 720px) {
  .v3 .hero .facts { display: none; }
  .v3 .hero__body { padding-top: 8px; }
}

/* ---------- Headline fit ----------
   "Do the work of five hires" is the longest line and it just misses at the two
   extremes: 900px in an 873px column at 1440, and 297px in a 265px column at
   320. Both are a few per cent, so the type steps down rather than the words
   changing. Everything between 361px and 1199px is untouched. */
/* The theme sizes the h1 on viewport width, but the hero copy column doesn't
   track the viewport: once the split layout kicks in around 1050px the column
   drops to 574px and then grows again, so any vw curve either wraps at 1100 or
   is too small at 1440. Sizing the headline off its own column fixes it at
   every width instead of at the ones I happened to test. The vw clamp stays as
   the fallback for browsers without container query units. */
@media (min-width: 901px) {
  .v3 .hero__copy { container-type: inline-size; }
  .v3 .hero__title { font-size: clamp(44px, 5.4vw, 88px); }
  @supports (font-size: 1cqw) {
    .v3 .hero__title { font-size: min(clamp(44px, 5.4vw, 88px), 10.2cqw); }
  }
}

/* ==========================================================================
   Mobile: type hierarchy and page length
   ========================================================================== */

/* ---------- Hierarchy ----------
   Measured at 390px before this block: h1 30, h2 34, then nine levels crammed
   between 14 and 24 (h3 24, rank 24, chant 24, method 22, numbered 20, acc 20,
   case 20, walk 19, path 19). The section titles were bigger than the page
   title, and everything under them read as one undifferentiated tier.

   This sets four clear steps instead: page title, section title, sub-head,
   component title, then two body sizes. The h1 goes to 33px, which is the
   largest "Do the work of five hires" fits at 390 without wrapping. */
@media (max-width: 560px) {
  /* Capped at 33px, but sized off the copy column so it can never wrap: the
     column is 265px at 320, 320 at 375 and 335 at 390. */
  .v3 .hero__copy { container-type: inline-size; }
  .v3 .hero__title { font-size: 30px; line-height: 1.02; letter-spacing: -0.032em; }
  @supports (font-size: 1cqw) {
    /* "Do the work of 5 hires" is short enough now to fill the column, so the
       page title finally sits above the section titles on a phone. Measured
       headroom at 10.8cqw: 265px column takes 29, 335 takes 37, 375 takes 42. */
    .v3 .hero__title { font-size: min(40px, 10.8cqw); }
  }
  .v3 .h2--loud { font-size: 33px; line-height: 0.98; letter-spacing: -0.038em; }

  /* Sub-heads: the lines that carry an argument on their own. */
  .v3 .h3,
  .v3 .reframe__claim,
  .v3 .chant,
  .v3 .rank__title,
  .v3 .leave__line { font-size: 23px; line-height: 1.16; }
  .v3 .rank--first .rank__title { font-size: 26px; }

  /* Component titles: one tier, so they stop competing with the sub-heads. */
  .v3 .method-row__title,
  .v3 .numbered__title,
  .v3 .acc__btn,
  .v3 .case__name,
  .v3 .walk__title,
  .v3 .path__line { font-size: 18px; line-height: 1.25; }

  /* The asides step back rather than sitting level with the headings. */
  .v3 .dialogue { font-size: 18px; }
}

/* ---------- Review wall ----------
   Nine full-width screenshots ran 2,895px on a phone, about an eighth of the
   whole page. They are proof by volume rather than something anyone reads line
   by line, so two columns from 400px up shows more at once and halves the
   height. Below 400px they stay single column, where two would be too narrow
   to register as screenshots at all. */
@media (min-width: 360px) and (max-width: 759px) {
  .v3 .reviews { columns: 2; column-gap: 10px; }
  .v3 .review { margin-bottom: 10px; }
}

/* Last, so it beats the 560px block above: at 320 the copy column is only 265px
   and 33px would wrap the first line. */
@media (max-width: 360px) {
  .v3 .h2--loud { font-size: 27px; }
}

/* ---------- Freedom Brand mark ----------
   U+2122, not the emoji-variation form, so it stays a typographic glyph in the
   headline font rather than rendering as a colour emoji on some platforms. At
   display sizes the raw glyph sits too low and too large, so it is set as a
   proper superscript with its own tracking. */
.v3 .tm {
  font-size: 0.32em; vertical-align: super; letter-spacing: 0;
  margin-left: 0.06em; font-weight: 500; line-height: 1;
}

/* ==========================================================================
   Section depth
   --------------------------------------------------------------------------
   The page was two tones: black and #0E0E0C. This gives it a four-step ladder
   so sections read as distinct planes rather than one long scroll.

   Each step also redefines --pg-alt, which every card surface on the page
   already derives from (.versus__col, .path, .case__media, .q-card and the
   rest). So a card is always one step lighter than the section holding it,
   and the depth stays the right way up without overriding a single component.

   Placement is deliberate, not alternating:
     sec-0  pure black, kept for the three emotional beats (the reframe, what
            it's for, the catch) so they read as space rather than as panels
     sec-1  the connective sections
     sec-2  the content-dense ones
     sec-3  used exactly once, on the money section, the peak of the argument
   No two adjacent sections share a step.
   ========================================================================== */
.v3 .sec-0 { background: #000000; --pg-alt: #0C0C0B; }
.v3 .sec-1 { background: #0A0A09; --pg-alt: #151513; }
.v3 .sec-2 { background: #121210; --pg-alt: #1D1D1A; }
.v3 .sec-3 { background: #191916; --pg-alt: #252521; }

/* Borders were tuned against near-black; on the lighter steps they need to
   come up a touch or the card edges disappear. */
.v3 .sec-2 { --pg-line: rgba(255, 249, 238, 0.14); }
.v3 .sec-3 { --pg-line: rgba(255, 249, 238, 0.17); }