/* free-weeks.css — Meta lead-ad "thank you" landing page (/free-weeks)
 *
 * Deliberately plain, same philosophy as vsl.css: no nav, no theme toggle, no
 * footer menu. What design effort exists goes into VISUAL WEIGHT, not
 * decoration — this page carries three asks (open a PDF, book a call, join a
 * free community) and only ONE of them may look like a commitment.
 *
 * Tokens come from base/variables.css so this page cannot drift from the rest
 * of the site. Nothing here may override .book-* — that's shared with three
 * other pages (book.html, vsl.html, greg-week27.html) via book.css.
 */

.fw-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2rem) 4rem;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.fw-hero {
    text-align: center;
    padding-bottom: 8px;
}

.fw-eyebrow {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    /* --accent (#2563eb) is tuned for FILLED surfaces (button backgrounds) —
       as 15px bold TEXT on --bg-base it measures 3.57:1, under WCAG 1.4.3's
       4.5:1 floor (15px bold doesn't clear the "large text" 3:1 exemption,
       which needs >=18.66px bold). --accent-text (#60a5fa) is the token
       variables.css documents for exactly this case ("Accent-colored text on
       dark backgrounds") and measures 7.25:1 here. */
    color: var(--accent-text, #60a5fa);
    margin: 0 0 14px;
}

.fw-hero__title {
    font-size: clamp(26px, 4.6vw, 38px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0 0 14px;
    color: var(--text-primary);
}

/* One sentence of the headline carries the accent so the eye has a single
 * place to land. --accent-text is the dark-surface text variant of the accent
 * (the plain --accent measures too dark on this background for body-size text). */
.fw-hero__accent {
    /* Its own line(s): otherwise the blue sentence starts mid-line and blurs
       into the white one. text-wrap:balance on the h1 keeps each half tidy. */
    display: block;
    color: var(--accent-text, #60a5fa);
}

.fw-hero__sub {
    font-size: var(--font-size-md, 1rem);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 58ch;
    margin: 0 auto 22px;
}

/* The PDF link — deliberately the lightest thing on the page (~10% visual
 * weight). No background, no border, no button padding: a filled or
 * bordered secondary CTA next to the primary booking CTA forces a System-2
 * "which one?" decision that a plain text link never does.
 * NN/g: https://www.nngroup.com/articles/first-impressions-human-automaticity/
 * Baymard: https://baymard.com/learn/button-design (48% of sites fail to
 * differentiate primary vs secondary buttons). */
.fw-ghost-link {
    display: inline-block;
    padding: 8px 4px;   /* vertical padding only — keeps the ≥24px WCAG 2.5.8
                            target size without ever looking like a button */
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--border-strong);
}
.fw-ghost-link:focus-visible {
    color: var(--accent-text);
    text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .fw-ghost-link:hover {
        color: var(--accent-text);
        text-decoration-color: currentColor;
    }
}
.fw-ghost-link__meta {
    font-weight: 400;
    color: var(--text-tertiary);
}

/* ─── Section dividers ──────────────────────────────────────────────────── */

.fw-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 40px 0;
}

/* ─── The one filled block: the booking invite ─────────────────────────── */

.fw-book-invite {
    text-align: center;
}

.fw-book-invite__title {
    font-size: clamp(22px, 3.6vw, 28px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.fw-book-invite__sub {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 48ch;
    margin: 0 auto 24px;
}

/* The widget itself is styled entirely by book.css (.book-widget etc) — this
 * section only un-inherits the centered text-align from .fw-book-invite for
 * the two panels that need left-aligned form fields / day-time chips.
 * .book-confirm is DELIBERATELY excluded: book.css already sets its own
 * text-align: center (checkmark + heading + copy are all meant centered) —
 * adding it here would out-specificity that rule (.fw-book-invite .book-confirm
 * beats book.css's bare .book-confirm) and silently left-align a panel that
 * was designed centered. */
.fw-book-invite .book-widget,
.fw-book-invite .book-form-section {
    text-align: left;
}

/* The CLA-unaware exit, directly under the booking widget.
 *
 * --text-tertiary would be the visually quieter choice and is what .fw-quiet
 * uses at the page foot, but this is a full sentence a reader is meant to
 * READ rather than a repeated footer affordance, so it takes
 * --text-secondary to clear WCAG AA as body text. The de-emphasis comes from
 * size, placement and the rule above it, not from failing contrast.
 *
 * The rule is a real top border rather than an <hr>: it separates this line
 * from the widget visually without adding a semantic break a screen reader
 * has to announce. */
.fw-book-invite__aside {
    max-width: 48ch;
    margin: var(--space-lg, 1.5rem) auto 0;
    padding-top: var(--space-md, 1rem);
    border-top: 1px solid var(--border-subtle);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ─── Quiet secondary exit (join-free) ─────────────────────────────────── */

.fw-quiet {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-tertiary);
    margin: 0 0 8px;
}

.fw-quiet-link {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 4px 2px;
}
.fw-quiet-link:focus-visible {
    text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .fw-quiet-link:hover {
        text-decoration-color: currentColor;
    }
}

/* ─── What's inside: substance + PDF fallback ──────────────────────────── */

.fw-games {
    margin-top: 48px;
    padding-top: 8px;
}

.fw-games__heading {
    font-size: clamp(20px, 3.2vw, 24px);
    font-weight: 800;
    text-align: center;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.fw-games__sub {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    text-align: center;
    max-width: 48ch;
    margin: 0 auto 24px;
}

.fw-games__weeks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

/* The bonus session is NOT a third week, and it must not be squeezed into
   a third column: .fw-shell caps at 720px, so three columns land at ~200px
   each and "Standing Game 2: Destabilizing with the Single Leg" wraps to
   four lines. Spanning the row keeps the two Foundations weeks paired and
   makes the bonus read as an addition rather than an orphan.
   `1 / -1` is safe here because the columns are EXPLICIT at every
   breakpoint (2 cols, then 1fr under 768px) -- a negative grid line only
   collapses when the track list is implicit. */
.fw-games__week--bonus {
    grid-column: 1 / -1;
}

.fw-games__week {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl, 16px);
    padding: 18px 20px;
}

.fw-games__week-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-text);
    margin: 0 0 10px;
}

.fw-games__list {
    margin: 0;
    padding-left: 1.3em;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}
.fw-games__list li {
    margin-bottom: 6px;
}
.fw-games__list li:last-child {
    margin-bottom: 0;
}


/* ─── Greg proof stats ──────────────────────────────────────────────────────
 * Sits between the hero and the booking CTA. Proof, never a CTA: no button
 * chrome, no links, nothing focusable. Every figure here must also be live in
 * paid creative — see the HTML comment on .fw-stats for why.
 */

.fw-stats {
    margin: 4px 0 0;
}

.fw-stats__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Three stats: two faces on top, then the last card across the full row.
       auto-fit fitted three per row in the 656px shell and squeezed each card;
       a fixed pair gives each card the width its label and 92px face actually
       need, and the odd last card spans both columns (rule below) so it is
       never orphaned at the left of a half-empty row. */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.fw-stats__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.fw-stats__item {
    background: var(--bg-card, #12141c);
    border: 1px solid var(--border-subtle, #232735);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    /* Reserve height so the booking CTA below never shifts as fonts settle.
       CLS budget for this page is < 0.1 (quality-checks.md). */
    min-height: 96px;
    justify-content: center;
}

.fw-stats__figure {
    /* --accent-text (#60a5fa), NOT --accent: at this size on --bg-card the
       filled-surface token measures under the 4.5:1 floor. Same reasoning as
       .fw-eyebrow above. */
    color: var(--accent-text, #60a5fa);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.15;
}

.fw-stats__label {
    color: var(--text-secondary, #9aa3b2);
    font-size: 13px;
    line-height: 1.35;
}


/* Who Greg is — a face above the facts. Without it the stats read as
 * disembodied claims; with it they read as one person's record. The 128px
 * headshot crop that was here rendered at 56px, which is small enough that
 * the face carried nothing; this is the 520px mat portrait at 88px, where a
 * reader can actually see who is making the claims.
 */

.fw-stats__who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
}

.fw-stats__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid var(--border-subtle, #232735);
}

.fw-stats__whotext {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.fw-stats__name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary, #e8ebf2);
    line-height: 1.2;
}

.fw-stats__role {
    font-size: 13px;
    color: var(--text-secondary, #9aa3b2);
    line-height: 1.3;
}

/* ─── Social proof: four coach videos ───────────────────────────────────────
 * Facade pattern — a poster image plus a play affordance, with the Bunny
 * iframe mounted only on interaction (free-weeks.js). Loading four iframes
 * eagerly would cost the LCP < 2.5s budget for no benefit, since most
 * visitors play none of them.
 */

.fw-proof {
    margin: 28px 0 0;
}

.fw-proof__heading {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary, #e8ebf2);
    text-align: center;
    margin: 0 0 16px;
}

/* Stacked one per row rather than four across: a portrait clip shown at
 * thumbnail size carries no information, and each coach now has a rating and
 * their own words under the video, which is the part that actually persuades.
 * The video is capped rather than full-width so a 9:16 clip does not turn the
 * section into four screens of scroll. */
.fw-proof__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.fw-proof__card {
    margin: 0;
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fw-proof__card + .fw-proof__card {
    border-top: 1px solid var(--border-subtle, #232735);
    padding-top: 22px;
}

.fw-video {
    position: relative;
    display: block;
    width: 320px;
    max-width: 100%;
    /* Matches the 540x960 poster so nothing reflows once the image decodes. */
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card, #12141c);
    border: 1px solid var(--border-subtle, #232735);
    cursor: pointer;
}

.fw-video:focus-visible {
    outline: 3px solid var(--accent-text, #60a5fa);
    outline-offset: 2px;
}

.fw-video__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fw-video__play {
    position: absolute;
    /* 44px min touch target (WCAG 2.2 AA, 2.5.8). */
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    transition: transform 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .fw-video:hover .fw-video__play {
        transform: translate(-50%, -50%) scale(1.07);
    }
}

.fw-video__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.fw-proof__cap {
    margin: 12px 2px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.fw-proof__cap .fw-proof__stars {
    /* Gold. Scoped under .fw-proof__cap on purpose: the generic
       `.fw-proof__cap span` rule below (grey caption text) has higher
       specificity than a bare `.fw-proof__stars`, which is what turned the
       stars silver. Gold on the dark card measures well past 3:1 for a
       graphical object, and the glyph shape carries the meaning on its own so
       colour is never the only cue. */
    color: #f5b301;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 6px;
}

.fw-proof__quote {
    margin: 0 0 8px;
    max-width: 44ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary, #a8afbe);
}

.fw-proof__cap b {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #e8ebf2);
}

.fw-proof__cap span {
    font-size: 12px;
    color: var(--text-tertiary, #6b7280);
    line-height: 1.3;
}

.fw-proof__disclosure {
    margin-top: 5px;
    font-size: 11px;
    color: var(--text-tertiary, #6b7280);
    line-height: 1.35;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .fw-games__weeks {
        grid-template-columns: 1fr;
    }

    /* 2x2 keeps the stats block short enough that the booking CTA still
       clears the fold at 375px — a hero block that pushes the CTA below the
       fold costs measurable conversion (foundrycro.com landing-page video
       benchmarks). Four-across would also crush each label to ~80px. */
    .fw-stats__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 320px hardening — no horizontal scroll on the oldest iPhone SE */
@media (max-width: 360px) {
    .fw-shell {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ─── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fw-ghost-link,
    .fw-quiet-link,
    .fw-video__play {
        transition: none;
    }

        @media (hover: hover) and (pointer: fine) {
        .fw-video:hover .fw-video__play {
            transform: translate(-50%, -50%);
        }
    }
}

/* ── Booking-form prefill note ─────────────────────────────────────────────
 *
 * Injected by free-weeks.js only when a Meta lead was actually matched, so
 * a page that never prefills carries no trace of this block.
 *
 * The Clear control is a real <button> because it performs an action rather
 * than navigating — that keeps keyboard activation, focus, and the screen
 * reader's announcement correct without any ARIA. It inherits the page's
 * focus-visible ring from global.css.
 */
.fw-prefill-note {
    display: flex;
    flex-wrap: wrap;          /* at 320px the button drops to its own line */
    align-items: center;
    gap: var(--space-xs, 0.5rem);
    margin: 0 0 var(--space-lg, 1.5rem);
    padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-elevated);
    /* --text-secondary, not --text-tertiary: this sentence explains why the
     * coach's own details are already on screen, so it has to clear WCAG AA
     * as body text (quality-checks.md § Accessibility). */
    color: var(--text-secondary);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
}
.fw-prefill-note__clear {
    /* 44px is the touch-target floor; the visual chrome stays text-sized. */
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-text);
    font: inherit;
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    .fw-prefill-note__clear:hover {
        text-decoration-thickness: 2px;
    }
}

/* ─── Gym marquee ───────────────────────────────────────────────────────────
   Lifted verbatim from lp.css (/class-planning, /retention) rather than
   loading that whole landing-page stylesheet into this page, which has its
   own design and would risk cascade collisions. Same class names on purpose:
   it is the same component, so the two can never drift into conflicting
   rules for the same selector.
   A duplicated track slides half its own width, so the loop is seamless.
   Chips sit on a LIGHT ground because gym logos are mostly dark marks on
   transparent and vanish on our background. */
.rt-strip { padding: 4px 0 26px; border-bottom: 1px solid var(--border-subtle); }
.rt-strip .rt-eyebrow { text-align: center; color: var(--text-tertiary);
  margin-bottom: 4px; font-size: 13px; }
.rt-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.rt-wall { position: relative; overflow: hidden; padding: 4px 0; margin-top: 14px; }
.rt-wall::before, .rt-wall::after { content: ""; position: absolute; top: 0; bottom: 0;
  width: 9%; z-index: 2; pointer-events: none; }
.rt-wall::before { left: 0; background: linear-gradient(90deg, var(--bg-base), transparent); }
.rt-wall::after { right: 0; background: linear-gradient(270deg, var(--bg-base), transparent); }
.rt-track { display: flex; gap: 20px; width: max-content;
  animation: rtGymScroll 80s linear infinite; }
@keyframes rtGymScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rt-wall:hover .rt-track { animation-play-state: paused; }
.rt-gym { flex: 0 0 auto; width: 150px; display: flex; flex-direction: column;
  align-items: center; gap: 9px; }
.rt-gym .rt-chip { width: 150px; height: 92px; border-radius: 13px; background: #fbfbfc;
  display: flex; align-items: center; justify-content: center; padding: 15px;
  box-shadow: 0 9px 22px -14px rgba(0,0,0,.6); }
/* 14 of the 24 marks are LIGHT on transparent and vanish on the pale chip.
   Those carry rt-chip--dark in the markup. Missed on the first copy, which
   rendered every one of them white on white. */
.rt-gym .rt-chip--dark { background: #15171b; border: 1px solid #2b2f36; box-shadow: none; }
.rt-gym img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block; }
.rt-gym span { font-size: 11.5px; line-height: 1.25; color: var(--text-tertiary);
  text-align: center; max-width: 150px; }
@media (prefers-reduced-motion: reduce) {
  .rt-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ─── A face on the two competitor stats ────────────────────────────────────
   Gavin and Deandre are named and pictured with their consent (owner,
   2026-09-14). Their credentials are NOT interchangeable: Gavin took second
   at the 2026 ADCC WORLD Championship, Deandre first at ADCC West Coast
   TRIALS. Never move a photo to the other one's stat. */
.fw-stats__item--face { padding-top: 14px; }
.fw-stats__face {
  /* 140px on wide screens; min(...,100%) lets it shrink inside a ~143px card at
     320px instead of overflowing. Source is 520x520, so it stays sharp at 2x. */
  width: min(140px, 100%); height: auto; aspect-ratio: 1 / 1;
  border-radius: 50%; object-fit: cover;
  display: block; margin: 0 auto 10px;
  border: 2px solid var(--border-subtle);
}