/* Homepage "The system", October 11, 2026, round 9, with the Fable design review of October 12.
   The approved launch look (navy and court blue surfaces, lime actions, heavy Outfit headings)
   with no boxes: three steps stacked as a vertical story in the hero (media left, writing right,
   a huge lime step marker and a lime rail running down), a professional film, four phones, the
   Academy on warm white with four pillar icons, the club columns, the founder, the training loop (moved
   here from the Academy page on Oct 12, 2026), the pricing band and the questions. Every section sits on the site's 1280 px shell, so headings and media share one
   left edge with the header and footer. Loaded after styles.css. */
.home-1011 { --warm: #f4f2eb; --warm-ink: #0b1226; --warm-muted: #4b5570; --warm-body: #2a3350; --warm-line: rgba(11, 18, 38, 0.14); --court: #111d36; --court-lit: #172746; --card: #0f192f; --stage: #070b14; --quiet: #a8b5ca; --soft: #d5deee; background: var(--navy); }
html, body { scroll-snap-type: none; }
.home-1011 main { overflow: clip; }
.home-1011 button { font-family: inherit; }
.home-1011 img, .home-1011 video { max-width: 100%; }
.home-1011 .icon { flex-shrink: 0; }
.home-1011 .section-title { font-weight: 800; letter-spacing: -0.03em; }
.home-1011 .band { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.home-1011 .band-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; max-width: 18ch; text-wrap: balance; }
.home-1011 .band-deck { margin-top: 12px; color: var(--muted); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; max-width: 56ch; text-wrap: pretty; }
.home-1011 .band-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.home-1011 .band-head .band-deck { margin-top: 0; }
.home-1011 .fine { color: var(--quiet); font-size: 12px; line-height: 1.55; max-width: 100ch; }
.home-1011 .fine + .fine { margin-top: 6px; }
.home-1011 .quiet-link { color: var(--muted); }
.home-1011 .quiet-link:hover { color: var(--ink); }

/* Calm reveal on scroll. Without JavaScript everything is simply visible. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 1s var(--ease); will-change: opacity, transform; }
.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }
/* Inside each hero row the media settles first and the writing follows a beat later. */
.js .step .step-media { transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
.js .step .step-head, .js .step .step-text { transition: opacity 0.9s var(--ease) 0.16s, transform 1.1s var(--ease) 0.16s; }
/* Keep the text's transform context after its reveal. Removing it can cause
   the absolutely positioned mobile connector to appear as a layout shift. */
.js .step.is-in .step-head, .js .step.is-in .step-text { transform: translate(0, 0); }
.js .step:not(.is-in) .step-media { opacity: 0; transform: translateY(14px); }
.js .step:not(.is-in) .step-head, .js .step:not(.is-in) .step-text { opacity: 0; transform: translateX(16px); }
.js .screen-row [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.js .screen-row [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
.js .screen-row [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

/* Media frames and the quiet pause control. media-playback.js shows the control once a film can move.
   Founder rule, Oct 13, 2026: only the two camera films carry a control. The other films cannot be paused. */
/* One corner radius (16 px) and one shadow for every large film frame on the page. */
.media-frame { position: relative; overflow: hidden; border-radius: 16px; background: var(--stage); box-shadow: inset 0 0 0 1px #ffffff14; }
.media-frame > video, .media-frame > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.media-frame.is-contain > video { object-fit: contain; }
.stage-control { position: absolute; right: 10px; bottom: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 60px; min-height: 32px; padding: 5px 11px; border: 1px solid #ffffff3d; border-radius: 999px; background: #091326e6; color: var(--ink); font: inherit; font-size: 12px; font-weight: 650; line-height: 1.2; letter-spacing: 0.01em; cursor: pointer; transition: border-color 0.2s; }
.stage-control > span { width: 36px; text-align: center; }
.stage-control:hover { border-color: var(--lime); }
.stage-control:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* The approved v6 camera film fills the available width with its whole 16 by 9 frame visible.
   The film's own navy is #0a111b. The hero and clubs backgrounds match it where the camera sits,
   and a short fade on each edge of the film hides the last trace of its rectangle. The fades stop
   well short of the camera: when fully open its parts reach 7% from the left edge, 2.8% from the
   right, 10% from the top and 12% from the bottom, so nothing is ever dimmed or cropped. */
.camera-float { position: relative; width: 100%; aspect-ratio: 16 / 9; isolation: isolate; }
.camera-float::before { content: ""; position: absolute; inset: 6% 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #2a3e7866 0%, #2a3e7822 55%, transparent 100%); filter: blur(18px); pointer-events: none; }
.camera-float > video { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 98%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 7%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 98%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 7%, #000 92%, transparent 100%); mask-composite: intersect; }
.camera-float .video-badge-picture { inset: 0; }
.camera-float .video-badge { top: 4cqw; right: 5cqw; }
.camera-float .stage-control { right: 5%; bottom: 8%; }
@media (max-width: 480px) {
  .camera-float .stage-control { right: 0; bottom: 0; }
}

/* 1. Hero: the headline and the two actions, then the three steps as a vertical story.
   Each row is media on the left and writing on the right, split by a slim lime rail that runs
   down the page. A huge lime "Step 1", "Step 2", "Step 3" opens every row. */
/* The gradient reaches the film's own navy (#0a111b) by the top of the steps and holds it through the
   camera row, so the camera frame has no visible edge. */
.home-1011 .hero { position: relative; padding-block: clamp(24px, 3vw, 36px) clamp(48px, 6vw, 80px); background: linear-gradient(180deg, #121d38 0%, #0c1220 14%, #0a111b 24%, #0a111b 40%, #090e1a 56%, #090d1a 100%); }
.hero-intro { max-width: 1250px; margin-top: 80px; margin-inline: auto; text-align: center; }
.hero h1 { font-size: clamp(44.8px, 5.76vw, 83.2px); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.hero h1 span { display: block; color: var(--lime); }
.hero-line { margin: 12px auto 0; max-width: 60ch; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; text-wrap: balance; }
.hero .actions { justify-content: center; gap: 10px 14px; margin-top: 20px; }
.hero-support { margin-top: 10px; color: var(--muted); font-size: 14px; }
/* --media-share is the media column's share of the row once the rail is taken out. It must match
   the fr split in .step so the rail, dots and arrows line up. */
.steps { --rail: clamp(56px, 5.6vw, 80px); --media-share: 0.62; --frame-ratio: 4 / 3; --rail-x: calc((100% - var(--rail)) * var(--media-share) + var(--rail) / 2); --steps-gap: clamp(56px, 6.5vw, 104px); position: relative; list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; row-gap: var(--steps-gap); }
/* The rail: one slim lime line down the whole story, fading in above Step 1 and out below Step 3. */
.steps::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--rail-x); width: 2px; margin-left: -1px; background: var(--lime); opacity: 0.42; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 93%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 93%, transparent 100%); pointer-events: none; }
.step { position: relative; display: grid; grid-template-columns: minmax(0, 1.24fr) var(--rail) minmax(0, 0.76fr); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr); grid-template-areas: "media rail ." "media rail head" "media rail text" "media rail ."; min-width: 0; }
.step-head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.step-text { grid-area: text; min-width: 0; }
.step-number { position: relative; display: block; width: 100%; color: var(--lime); font-size: clamp(47.6px, 6.29vw, 95.2px); font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; white-space: nowrap; }
/* The lime dot pins each marker to the rail. */
.step-number::before { content: ""; position: absolute; top: 50%; left: calc(-0.5 * var(--rail)); width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 7px #c8e84a1f, 0 0 28px #c8e84a66; }
.step-title { margin-top: 14px; color: var(--lime); font-size: clamp(24px, 2.3vw, 34px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.step-body { margin: 16px 0 0; color: var(--ink); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; max-width: 40ch; text-wrap: pretty; }
.step-note { margin: 12px 0 0; color: var(--quiet); font-size: 12px; line-height: 1.4; }
/* The frame is at least the shared 4 by 3 and stretches to the row when the writing is taller (Oct 13, 2026, round 7
   fixes: Step 2's lead makes its writing taller than the frame between 861 and 1075 px), so the media fills its row, the
   phone fills the height, and the arrow and the caption line up with the row's bottom instead of floating mid row. */
.step-media { grid-area: media; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; aspect-ratio: var(--frame-ratio); align-self: stretch; container-type: inline-size; }
/* A lime arrow on the rail carries the eye from one step down to the next. */
.step-media::after { content: ""; position: absolute; right: calc(-0.5 * var(--rail)); bottom: calc(-0.5 * var(--steps-gap)); width: 26px; height: 26px; transform: translate(50%, 50%); background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8e84a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4V20M6 14L12 20L18 14'/%3E%3C/svg%3E") center / 22px no-repeat; pointer-events: none; }
.step:last-child .step-media::after { display: none; }
/* All three media share a frame. The camera and lesson fill the width, and the phone fills the height. */
.step-phone .phone-demo { height: 100%; aspect-ratio: 402 / 856; width: auto; }
.step-phone .phone { height: 100%; }
.step-phone .phone-demo::before { content: ""; position: absolute; inset: -6% -40%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #2a3e7859 0%, #2a3e781f 55%, transparent 100%); filter: blur(22px); pointer-events: none; }
.lesson-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #1e1c43; box-shadow: 0 24px 60px #0006, inset 0 0 0 1px #ffffff14; }
.lesson-frame > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #1e1c43; }

/* The phone. The status bar and tab bar are part of each screen image, so the tab hit areas sit over them. */
.phone-demo { position: relative; isolation: isolate; }
.phone { position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 402 / 856; padding: 6px; border: 1.5px solid #3a4a68; border-radius: 32px; background: #0d1627; box-shadow: 0 30px 70px #0009, inset 0 0 0 1px #ffffff10; }
.phone-screen { position: relative; height: 100%; aspect-ratio: 390 / 844; border-radius: 26px; overflow: hidden; background: #0b1322; }
.phone-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s var(--ease); }
.phone-image.is-active { opacity: 1; }
.phone-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: max(24px, 9.8%); z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(24px, 1fr)) minmax(0, 1fr); }
.phone-tabs button { margin: 0; min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: transparent; font: inherit; cursor: pointer; }
.phone-tabs button:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.step-phone .stage-control { right: 14px; bottom: calc(10% + 14px); }

/* 2. The professional film. The black tape covers the sponsor boards along the bottom of the frame. */
.pro-band { background: var(--court); }
.pro-frame { aspect-ratio: 16 / 9; border-radius: 16px; box-shadow: 0 24px 60px #0006, inset 0 0 0 1px #ffffff14; }
.pro-tape { position: absolute; left: 0; right: 0; bottom: 0; height: 13.5%; z-index: 2; background: #000; pointer-events: none; }
.home-1011 .footage-disclosure { margin: 6px 0 0; max-width: 120ch; color: #8898b0; font-size: 9px; line-height: 1.5; letter-spacing: 0.01em; }

/* 3. Find the mistake. Four phones in a row, then the six features.
   22ch holds the title's two lines and leaves room for its deck to sit beside it, like the other bands. */
.home-1011 .flow-title { max-width: 22ch; }
.screen-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); align-items: start; }
.screen-item { min-width: 0; }
.screen-item h3 { margin-bottom: 14px; color: var(--ink); font-size: clamp(17px, 1.45vw, 21px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; text-align: center; }
.screen-item .phone { width: 100%; max-width: 260px; margin-inline: auto; aspect-ratio: auto; border-radius: 30px; box-shadow: 0 24px 56px #0008, inset 0 0 0 1px #ffffff10; }
.screen-item .phone-screen { height: auto; border-radius: 24px; }
.screen-item .phone-screen img { display: block; width: 100%; height: auto; }
.screen-note { margin: 16px 0 0; color: var(--quiet); font-size: 12px; text-align: center; }
.home-1011 .coach-insight-band { padding-bottom: clamp(56px, 7vw, 96px); }
.insight { margin-top: clamp(48px, 6vw, 84px); padding-top: clamp(36px, 4.5vw, 60px); border-top: 1px solid var(--line); }
.feature-grid { list-style: none; margin: clamp(26px, 3.4vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 44px); }
.feature-grid li { padding-top: 20px; border-top: 1px solid var(--line-strong); }
/* The six feature icons sit on the same navy tile with a lime halo as the pillar and club icons,
   so every icon on the page belongs to one system. */
.feature-grid svg { display: block; box-sizing: border-box; width: 48px; height: 48px; padding: 10px; border-radius: 13px; background: var(--warm-ink); box-shadow: 0 0 0 1px #c8e84a4d, 0 0 0 5px #c8e84a1a; color: var(--lime); }
.feature-grid strong { display: block; margin-top: 18px; font-size: 19px; letter-spacing: -0.015em; }
.feature-grid span { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 36ch; }
.feature-grid small { display: block; margin-top: 8px; color: #d5deee; font-size: 12.5px; line-height: 1.5; }
.feature-terms { margin-top: 28px; }
/* Oct 15, 2026, founder request: the two feature terms lines read smaller. 10px is the smallest legible size at AA contrast. */
.home-1011 .feature-terms, .home-1011 .feature-terms + .fine { font-size: 10px; line-height: 1.5; }

/* 4. The Academy, on warm white. The montage leads, bigger, and the four pillars read like titles
   beside it, each opened by its own lime line icon on a navy tile. */
.academy-band { background: var(--warm); color: var(--warm-ink); border-top: 0; color-scheme: light; }
.academy-band .section-title { color: var(--warm-ink); max-width: 22ch; }
/* The curved stroke sits in its own space below the words. Long phrases may wrap on narrow screens. */
.hl-mark { position: relative; display: inline-block; max-width: 100%; padding-bottom: 18px; background: transparent; color: inherit; vertical-align: baseline; }
.title-swoosh { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 14px; overflow: visible; fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; pointer-events: none; }
.academy-grid { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 48px); align-items: start; margin-top: clamp(24px, 3vw, 36px); }
.academy-frame { aspect-ratio: 16 / 9; box-shadow: 0 24px 60px #0b122638, inset 0 0 0 1px #0b122614; }
.pillars { margin: 0; }
.pillars p { display: flex; align-items: flex-start; gap: 16px; margin: 0; color: var(--warm-body); font-size: clamp(17px, 1.3vw, 20px); font-weight: 500; line-height: 1.4; letter-spacing: -0.012em; text-wrap: pretty; }
.pillars p + p { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--warm-line); }
.pillars strong { color: var(--warm-ink); font-weight: 800; }
.pillar-text { min-width: 0; }
/* The pillar icons: 24 grid, 1.75 lime strokes, round caps, on a 44 px navy tile with a soft lime halo.
   Lime strokes on the warm paper would wash out, so the tile carries the navy and the lime stays crisp. */
.pillar-icon { flex: 0 0 auto; box-sizing: border-box; width: 48px; height: 48px; margin-top: -6px; padding: 10px; border-radius: 13px; background: var(--warm-ink); box-shadow: 0 0 0 1px #c8e84a4d, 0 0 0 5px #c8e84a1a; fill: none; stroke: var(--lime); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pillar-icon .pillar-dot { fill: var(--lime); stroke: none; }
.academy-join { display: flex; flex-direction: column; align-items: flex-start; gap: 14px 28px; margin-top: clamp(28px, 3.6vw, 46px); padding-top: 26px; border-top: 1px solid var(--warm-line); }
.academy-access { margin: 16px 0 0; max-width: 56ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; text-wrap: pretty; }
.academy-access strong { display: inline-block; padding: 10px 14px; border-radius: 6px; color: var(--warm-ink); background: var(--lime); font-weight: 700; }
.academy-band .pillar-icon { margin-top: 0; }
.academy-band :focus-visible { outline-color: var(--warm-ink); }

/* 5. Clubs: the original camera and club film on the left, six benefits filling the right column.
   The band holds the camera film's navy (#0a111b) where the camera plays. */
.clubs { background: linear-gradient(180deg, #0c1427 0%, #0a111b 16%, #0a111b 62%, var(--navy) 100%); }
.clubs .band-deck { max-width: 34ch; }
.club-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 3.4vw, 48px); align-items: stretch; }
.club-media { display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: 28px; min-width: 0; }
.club-card { margin: 0; min-width: 0; }
.club-frame { aspect-ratio: 1600 / 656; box-shadow: 0 24px 60px #0006, inset 0 0 0 1px #ffffff14; }
.club-card figcaption { margin-top: 12px; color: var(--quiet); font-size: 12px; text-align: center; }
.club-card-camera figcaption { margin-top: 0; }
.club-copy { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; }
/* The six club features as a grid of tiles (round 80, Oct 15, 2026, Mr. Niaki: a clean grid of feature tiles, made
   our own): two columns of cards on the band's navy, each the page's 48 px icon tile over one short line, sharing the
   column's height with the media beside them. The bookings figure with its footnote and the referral commission with
   its qualifier stay under the tiles, then the two actions close the column. Under 860 px the tiles become rows (icon
   beside the words) in two columns, and under 700 px one per row. */
.club-features { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
.club-features li { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; min-width: 0; padding: 18px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px #ffffff14; color: var(--ink); font-size: clamp(15px, 1.2vw, 17px); font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.club-features .pillar-icon { width: 48px; height: 48px; margin-top: 0; }
.club-features .feature-text { min-width: 0; }
.club-proof { margin: 22px 0 0; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.club-proof a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px; }
.club-proof a:hover { color: var(--lime); }
.home-1011 .club-footnote { color: var(--quiet); margin-top: 10px; font-size: 12px; line-height: 1.6; }
.club-actions { align-items: center; gap: 14px 26px; margin-top: auto; padding-top: 28px; }

/* 6. A word from our founder. The full photo, in its own proportions. */
.founder { background: var(--court-lit); }
.founder-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.founder-photo { margin: 0; }
.founder-photo img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 50px #0006; }
.founder-name { margin-top: 20px; }
.founder-name strong { display: block; font-size: 24px; font-weight: 600; font-style: italic; line-height: 1.25; letter-spacing: -0.02em; }
.founder-name span { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
.founder-statement { margin: 20px 0 0; padding: 0; border: 0; }
.founder-statement p { color: var(--ink); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; max-width: 58ch; text-wrap: pretty; }
.founder-statement p + p { margin-top: 14px; }
.founder-motto { margin-top: 28px; color: var(--lime); font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.02em; }

/* 7. Choose your way to improve: one short band, two doors. */
.choose { background: linear-gradient(180deg, var(--court) 0%, #0c1529 100%); }
.choose-shell { display: flex; flex-direction: column; align-items: center; text-align: center; }
.choose .band-title { max-width: 16ch; }
.choose .band-deck { max-width: 44ch; }
.choose-actions { justify-content: center; gap: 12px 16px; margin-top: 28px; }

/* 8. Questions. */
.questions .faq-layout { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 32px 56px; align-items: start; }
.questions .faq-answer p + p { margin-top: 0; }
.faq-all-link { margin-top: 20px; }

/* Calm under reduced motion: nothing slides, nothing fades, every reveal is simply present. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-1011 *, .home-1011 *::before, .home-1011 *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .step:not(.is-in) .step-media, .js .step:not(.is-in) .step-head, .js .step:not(.is-in) .step-text { opacity: 1; transform: none; }
  .loop-pulse { animation-play-state: paused !important; }
}

/* Band heads: the deck's baseline meets the title's last line. The 14 px matches the room the curvy
   underline takes below the title. */
@media (min-width: 1000px) {
  .band-head .band-deck { margin-bottom: 14px; text-align: right; text-wrap: balance; }
}
/* Keep the compact rhythm on shorter desktop screens, with the intro's extra header clearance. */
@media (min-width: 861px) and (max-height: 900px) {
  .home-1011 .hero { padding-top: 22px; }
  .hero .actions { margin-top: 16px; }
  .steps { margin-top: clamp(28px, 3.5vw, 44px); }
}
@media (max-width: 1120px) {
  /* Give the writing a little more of the row once the step markers shrink. */
  .steps { --media-share: 0.58; }
  .step { grid-template-columns: minmax(0, 1.16fr) var(--rail) minmax(0, 0.84fr); }
  .step-number { font-size: clamp(44.2px, 6.46vw, 71.4px); }
  .screen-row { gap: 18px; }
  .screen-item h3 { font-size: 16px; }
}
@media (min-width: 861px) and (max-width: 999px) {
  .home-1011 .nav-shell { padding-inline: 24px; }
  .home-1011 .nav-cta { gap: 8px; }
}
@media (max-width: 999px) {
  .home-1011 .academy-grid, .founder-grid { grid-template-columns: minmax(0, 1fr); }
  .founder-photo { max-width: 560px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .screen-item .phone { max-width: 240px; }
  .questions .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 860px) {
  .hero-intro { margin-top: 32px; }
  /* Each step stacks: marker, title, media, then the writing. A short lime line with an arrow links the steps.
     Stacked, each media takes its own height: the films their 16 by 9, the phone a tall 2 by 3 frame. */
  .steps { --steps-gap: 64px; --frame-ratio: 16 / 9; max-width: 520px; margin-inline: auto; }
  .step-phone { --frame-ratio: 2 / 3; }
  /* On tablets the 520 px column would make the phone 780 px tall, so its frame stops at 560. */
  .step-phone .step-media { max-height: 560px; }
  .steps::before, .step-number::before, .step-media::after { display: none; }
  .step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "head" "media" "text"; row-gap: 18px; }
  .step-head { align-items: center; text-align: center; }
  .step-text { text-align: center; }
  .step-body { margin-inline: auto; }
  /* Stacked, the writing settles upward under its media instead of sliding in from the side. */
  .js .step:not(.is-in) .step-head, .js .step:not(.is-in) .step-text { transform: translateY(14px); }
  .step::after { content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--steps-gap) + 16px); width: 2px; height: calc(var(--steps-gap) - 30px); margin-left: -1px; background: linear-gradient(180deg, transparent, var(--lime) 40%); pointer-events: none; }
  .step-text::after { content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--steps-gap) + 12px); width: 12px; height: 12px; margin-left: -6px; border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(45deg); pointer-events: none; }
  .step:last-child::after, .step:last-child .step-text::after { display: none; }
  .club-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .club-copy { order: -1; }
  .club-features { flex: none; grid-auto-rows: auto; }
  .club-features li { flex-direction: row; align-items: center; min-height: 72px; padding: 12px 16px; }
}
@media (max-width: 700px) {
  .home-1011 .band { padding-block: 48px; }
  .home-1011 .coach-insight-band { padding-bottom: 48px; }
  .home-1011 .hero { padding-top: 28px; padding-bottom: 48px; }
  .hero h1 { font-size: clamp(33.6px, 9.44vw, 57.6px); }
  .hero h1 span { display: block; }
  .hero-line { margin-top: 12px; max-width: 34ch; font-size: 16px; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .actions a { justify-content: center; width: 100%; }
  .steps { margin-top: 36px; }
  .step-number { font-size: clamp(44.2px, 12.75vw, 54.4px); }
  .step-title { font-size: 24px; }
  .step-body { font-size: 16px; }
  .media-frame, .lesson-frame { border-radius: 12px; }
  .pillars p { gap: 14px; font-size: 17px; }
  .club-features { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .club-features li { min-height: 64px; font-size: 16px; }
  .club-features .pillar-icon { width: 40px; height: 40px; padding: 8px; }
  .club-proof { font-size: 16px; }
  .pillar-icon { width: 40px; height: 40px; padding: 8px; margin-top: -2px; }
  /* A calm swipe row: each phone snaps to centre and the next one peeks in from the edge. */
  .screen-row { display: flex; gap: 16px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; -webkit-overflow-scrolling: touch; }
  .screen-item { flex: 0 0 min(66vw, 250px); scroll-snap-align: center; }
  .screen-item .phone { max-width: none; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .academy-join { align-items: flex-start; flex-direction: column; }
  .founder-photo { max-width: none; }
  .choose-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .choose-actions a { justify-content: center; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 33.6px; }
  .stage-control { padding: 4px 9px; font-size: 11px; min-height: 30px; }
  .screen-item { flex-basis: 74vw; }
}

/* Founder statement highlight, Oct 12, 2026 (founder request: highlight this part). */
.founder-statement .founder-highlight { font-size: 1.12em; font-weight: 700; line-height: 1.75; color: var(--ink, #fff); }
.founder-statement .founder-underline { text-decoration-line: underline; text-decoration-color: var(--lime, #c8e84a); text-decoration-thickness: 0.16em; text-underline-offset: 0.22em; text-decoration-skip-ink: auto; }

/* Oct 12, 2026: a big action under each hero step (founder notes), and the honesty captions kept small. */
.step-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.step-cta { min-height: 52px; padding-inline: 22px; font-size: 16px; }
.store-button { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 14px; border-radius: 12px; background: #fff; color: #0b1226; text-decoration: none; box-shadow: 0 10px 30px #0004; transition: transform 0.2s ease; }
.store-button svg { flex: none; fill: currentColor; }
.store-button span { display: flex; flex-direction: column; line-height: 1.1; }
.store-button small { font-size: 11px; font-weight: 600; opacity: 0.7; }
.store-button strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.store-button:hover { transform: translateY(-1px); }
.store-button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.step-text .step-note { margin-top: 12px; font-size: 11px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .store-button { transition: none; } }
/* The founder highlight uses the same hand drawn lime stroke as the titles, line by line (box-decoration-break:
   clone gives every wrapped line its own stroke). Round 5 (Oct 12, 2026): the stroke sits fully under the words.
   Outfit's content box ends 0.28em under the baseline and its deepest descenders end at 0.22em, so a 0.46em band
   that starts 0.08em under the content box keeps the whole stroke about 0.15em clear of every descender, with the
   stroke's top about 0.37em under the baseline. The paragraph's 1.75 line height (above) keeps the stroke about
   0.2em clear of the tall letters on the line below, at every width from 320 to 1440. */
.founder-statement .founder-underline { text-decoration: none; padding-bottom: 0.54em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C48 3 82 13 126 9 S196 4 236 8' fill='none' stroke='%23c8e84a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 0.46em; background-position: 0 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* 6b. The PadelCue training loop, moved here from the Academy page (Oct 12, 2026, round 5, founder notes). It is the
   section directly under the founder's word. A centred head (the pill, the title, the paragraph), then a decorative
   ring beside four cards and one quiet camera line. Four numbered steps sit on a clock, 1 Play at 12, 2 Analyze at
   3, 3 Train at 6 and 4 Master at 9, running clockwise, with See it. Fix it. Master it. in the centre. One lime pulse
   travels the ring (a CSS animation). It waits until the figure has revealed (home-1011.js adds is-in to every
   data-reveal block as it enters the viewport) and it stays paused under reduced motion. The values match the
   Academy page's round 5 loop exactly. */
.loop { background: linear-gradient(180deg, var(--navy) 0%, #0c1529 100%); }
.loop .loop-head { flex-direction: column; align-items: center; gap: 0; margin-bottom: clamp(32px, 4vw, 52px); text-align: center; }
.loop .loop-head .band-title { max-width: 20ch; font-size: clamp(34px, 4vw, 56px); }
/* "See it. Fix it." stays together, so the narrowest phones read "See it. Fix it." then "Master it." */
.loop-title-lead { display: inline-block; }
.loop .loop-head .band-deck { flex: none; margin: 16px 0 0; max-width: 60ch; font-size: clamp(16px, 1.3vw, 19px); text-align: center; text-wrap: balance; }
.loop-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px 7px 12px; border: 1px solid #c8e84a4d; border-radius: 999px; background: #c8e84a12; color: var(--lime); font-size: 13px; font-weight: 650; line-height: 1.3; letter-spacing: 0.02em; }
.loop-pill-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #c8e84a26; }
.loop2-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.loop-figure { position: relative; }
.loop2-ring { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; overflow: visible; }
.loop-track { fill: none; stroke: #bbcef542; stroke-width: 2; }
.loop-pulse { fill: none; stroke: var(--lime); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 70 930; stroke-dashoffset: 556; animation: loop-pulse 9s linear infinite; }
.loop-pulse-glow { stroke-width: 12; opacity: 0.22; }
.js .loop-figure:not(.is-in) .loop-pulse { animation-play-state: paused; }
.js .loop-figure:not(.is-live) .loop-pulse { animation-play-state: paused; }
@keyframes loop-pulse { to { stroke-dashoffset: 1556; } }
.loop-arrows path { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.loop2-chip { fill: var(--court-lit); stroke: #c8e84a59; stroke-width: 1.5; }
.loop2-badge { fill: var(--lime); }
.loop2-num { font-size: 20px; font-weight: 800; fill: var(--navy); text-anchor: middle; }
.loop2-label { font-size: 21px; font-weight: 800; letter-spacing: 0.07em; fill: var(--ink); }
.loop2-center text { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; fill: var(--ink); text-anchor: middle; }
.loop2-center .loop2-center-lime { fill: var(--lime); }
.loop2-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.loop2-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px 22px 24px; border-radius: 16px; background: var(--court); box-shadow: inset 0 0 0 1px #ffffff14, 0 24px 60px #0004; }
.loop2-card-head { display: flex; align-items: center; gap: 14px; }
/* The home pillar icon carries a 6 px lift beside the Academy pillars. The loop card head centres its icon instead. */
.loop2-card .pillar-icon { margin-top: 0; }
.loop2-card-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--navy); font-size: 15px; font-weight: 800; }
.loop2-card h3 { margin: 0; font-size: clamp(20px, 1.6vw, 24px); font-weight: 800; letter-spacing: -0.01em; }
.loop2-card p { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.55; }
.loop-note { margin: 24px auto 0; max-width: 66ch; color: var(--quiet); font-size: 13px; line-height: 1.55; text-align: center; text-wrap: balance; }
@media (max-width: 999px) {
  .loop2-layout { grid-template-columns: minmax(0, 1fr); }
  .loop2-ring { max-width: 420px; }
}
@media (max-width: 700px) {
  .loop2-card .pillar-icon { margin-top: -2px; }
  .loop-note { font-size: 12px; }
}
@media (max-width: 560px) {
  .loop2-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .loop2-ring { max-width: 340px; }
}

/* 7. The lesson count, Oct 12, 2026, round 6 (founder notes): "Over 300 lessons" is highlighted wherever it appears.
   On navy the words themselves are lime (hl-lime, 12 to 1 against the hero gradient's lightest stop) under the
   titles' curvy lime stroke in its own lane below the letters. Step 3 opens with the count as a lead line above its
   body: ink, 18 to 22 px at weight 700, between the body (16 to 19 px) and the lime title (24 to 34 px). */
.hl-mark.hl-lime { color: var(--lime); }
.step-lead { margin: 16px 0 0; max-width: 40ch; color: var(--ink); font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.35; letter-spacing: -0.015em; text-wrap: pretty; container-type: inline-size; container-name: step-lead; }
.step-lead + .step-body { margin-top: 12px; }
/* Round 13 (Oct 13, 2026, founder notes): Step 1 carries "participating club" in the same lime mark inside its lead,
   and Step 2 opens with "Over 1 million points analyzed" as a lead line, the Step 3 device. The three step marks share
   one treatment: lime words at weight 700 under the 4 px curvy lime stroke, in a 7 px lane of which 5 px is room the
   line gives the stroke below the letters (the lead's line is 29 px, the line with its mark 34 px).
   Round 7 fixes (same day, verifier findings): inside the steps the mark flows as ordinary inline text and its stroke
   is painted by the mark's background, the titles' path, lime, 4 px stroke and round caps, stretched to the words. Text
   that is text wraps like text: WebKit's text-wrap: pretty can no longer break the line between the mark and the comma
   after the million, and the comma stays on "analyzed" at every width and text size. The lane is a zero width ::before
   box as tall as the line plus 5 px, top aligned so it only pushes the line down, the room the inline block device gave.
   The mark's SVG, which draws the stroke in the titles, is switched off here: a box after the words would hand WebKit a
   break opportunity before the comma. The background sits 1 px under the lead's text box and 3 px under the body's,
   where the inline block device placed the SVG. Nothing here uses box-decoration-break: clone, because clone switches
   text-wrap: pretty off in Chromium and WebKit and the leads rely on pretty (Step 3 keeps "any time." together at 320 px).
   Only when a lead is narrower than the million mark (13.1 of its own em, enlarged text or Android font scaling) does
   the container query below take over: every wrapped line of the mark then carries its own full stroke (clone) and the
   mark's line height opens 5 px above and below each of its lines, so the stroke clears the descenders above it and the
   tall letters of the line below. Pretty is moot there, the mark wraps anyway. */
.step-text .hl-mark { display: inline; padding-bottom: 8px; margin-bottom: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C48 3 82 13 126 9 S196 4 236 8' fill='none' stroke='%23c8e84a' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 7px; background-position: 0 100%; }
.step-text .hl-mark::before { content: ""; display: inline-block; width: 0; height: calc(1.35em + 5px); vertical-align: top; }
.step-text .title-swoosh { display: none; }
.step-body .hl-mark { padding-bottom: 10px; font-weight: 700; }
.step-body .hl-mark::before { height: calc(1.55em + 5px); }
@container step-lead (max-width: 13.1em) {
  .step-lead .hl-mark { line-height: calc(1.35em + 10px); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .step-lead .hl-mark::before { display: none; }
}
/* The Academy band sits on warm white, where lime text would be 1.2 to 1 against the paper, so there the count stays
   warm ink (16.6 to 1) at weight 700 under the same lime stroke, the band's own highlight device (see its H2). The
   subtitle sits directly under the H2 at the pillars' size, in the band's muted ink (6.6 to 1). */
.academy-band .band-deck { margin-top: 12px; max-width: 56ch; color: var(--warm-muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.academy-band .band-deck .hl-mark { padding-bottom: 7px; margin-bottom: -2px; color: var(--warm-ink); font-weight: 700; }
.academy-band .band-deck .title-swoosh { height: 7px; stroke-width: 4; }
@media (max-width: 860px) {
  /* Stacked, the lead centres under its media like the body. */
  .step-lead { margin-inline: auto; }
}
@media (max-width: 700px) {
  .step-lead { font-size: 18px; }
}