/* Academy page, October 12, 2026, round 4 (Fable). The System page's language on the Academy: navy and
   court blue surfaces, lime actions, heavy Outfit headings with the curvy lime underline on the key
   words, one icon system (lime line icons on navy tiles), 16 px film frames (12 on phones), calm
   reveals, and muted films that start after first paint and pause offscreen (media-playback.js).
   Every section sits on the site's 1280 px shell, so headings and media share one left edge with the
   header and footer. The hero montage keeps the exact size of the System page step media, with the
   five points beside it. Mr. Niaki restored a copy of the System training loop here on October 15,
   2026, round 79, reversing the October 12 decision. Both pages keep the complete loop. The shot carousel (academy-1012-shots.js) is the one
   full width strip: tall stills with the shot name over a navy fade. Loaded after styles.css. */
.academy-1012 { --warm: #f4f2eb; --warm-ink: #0b1226; --warm-muted: #4b5570; --warm-body: #2a3350; --warm-line: rgba(11, 18, 38, 0.14); --court: #111d36; --court-lit: #172746; --stage: #070b14; --quiet: #a8b5ca; --soft: #d5deee; background: var(--navy); }
html, body { scroll-snap-type: none; }
.academy-1012 main { overflow: clip; }
.academy-1012 button { font-family: inherit; }
.academy-1012 img, .academy-1012 video { max-width: 100%; }
.academy-1012 .icon { flex-shrink: 0; }
.academy-1012 .section-title { font-weight: 800; letter-spacing: -0.03em; }
.academy-1012 .band { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.academy-1012 .band-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; max-width: 18ch; text-wrap: balance; }
.academy-1012 .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; }
.academy-1012 .band-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); }
.academy-1012 .band-head .band-deck { margin-top: 0; }
.academy-1012 .text-link { gap: 10px; }
/* Anchors other pages and the hero buttons land on sit clear of the sticky header. */
.academy-1012 [id] { scroll-margin-top: 88px; }

/* 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; }
/* In the hero row the film settles first and the five points follow a beat later. */
.js .hero-stage .stage-media { transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
.js .hero-stage .hero-points { transition: opacity 0.9s var(--ease) 0.16s, transform 1.1s var(--ease) 0.16s; }
.js .hero-stage:not(.is-in) .stage-media { opacity: 0; transform: translateY(14px); }
.js .hero-stage:not(.is-in) .hero-points { opacity: 0; transform: translateX(16px); }
.js .quadrants [data-reveal]:nth-child(2), .js .level-cards [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.js .quadrants [data-reveal]:nth-child(3), .js .level-cards [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
.js .quadrants [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

/* Media frames. One corner radius (16 px) and one shadow for every large frame on the page.
   The Academy film has no pause control (founder rule, Oct 13, 2026: only the camera films may be paused). */
.media-frame { position: relative; overflow: hidden; border-radius: 16px; background: var(--stage); box-shadow: 0 24px 60px #0006, 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; }

/* 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; }

/* The icon system: a 24 grid, 1.75 lime strokes, round caps, on a 48 px navy tile with a soft lime
   halo. The same tile opens the hero points, the four quadrants and the three plan steps. */
.pillar-icon { flex: 0 0 auto; 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; fill: none; stroke: var(--lime); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pillar-icon .pillar-dot { fill: var(--lime); stroke: none; }

/* 1. Hero: the log in pill, the headline and the two actions, then the Academy montage in the System
   page's step frame (62 percent of the row) with the five points beside it. */
.academy-1012 .hero { position: relative; padding-block: clamp(24px, 3vw, 36px) clamp(48px, 6vw, 80px); background: linear-gradient(180deg, #121d38 0%, #0c1220 26%, #0a1020 52%, var(--navy) 100%); }
.hero-intro { max-width: 1250px; margin-top: 72px; margin-inline: auto; text-align: center; }
.hero-pill-row { margin: 0 0 20px; }
.hero-pill-row .hero-login-pill { margin-bottom: 0; }
.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; }
/* The curvy underline scales with the headline: a heavier stroke and more room than under a band title. */
.hero h1 .hl-mark { padding-bottom: calc(clamp(14px, 1.4vw, 20px) + 4px); }
.hero h1 .title-swoosh { height: clamp(14px, 1.4vw, 20px); stroke-width: 9; }
.hero .actions { justify-content: center; gap: 10px 14px; margin-top: 28px; }
/* The row shares the System page step grid: media, an empty rail column, then the writing. */
.hero-stage { --rail: clamp(56px, 5.6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.24fr) var(--rail) minmax(0, 0.76fr); grid-template-areas: "media . text"; align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.academy-1012 .stage-media { grid-area: media; margin: 0; min-width: 0; aspect-ratio: auto; background: transparent; }
.hero-frame { aspect-ratio: 16 / 9; }
.stage-note { margin: 12px 0 0; color: var(--quiet); font-size: 12px; line-height: 1.5; text-wrap: pretty; }
.stage-note strong { color: var(--muted); font-weight: 700; }
.hero-points { grid-area: text; list-style: none; margin: 0; padding: 0; min-width: 0; }
.hero-points li { display: flex; align-items: flex-start; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); color: var(--soft); font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty; }
.hero-points li:first-child { padding-top: 0; border-top: 0; }
.hero-points li:last-child { padding-bottom: 0; }
.hero-points .pillar-icon { margin-top: -4px; }
.hero-points .pillar-text { min-width: 0; }
.hero-points strong { color: var(--ink); font-weight: 800; }

/* 2. Train every aspect of your game, on warm white: four quadrants, each a photo, its icon, its
   title and its sentence. Lime strokes on the warm paper would wash out, so the tile carries the
   navy and the lime stays crisp. */
.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; }
.academy-band .band-deck { color: var(--warm-muted); }
.quadrants { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 3.6vw, 48px) clamp(24px, 3vw, 40px); }
.quadrant { position: relative; min-width: 0; }
.quadrant-frame { aspect-ratio: 3 / 2; box-shadow: 0 24px 60px #0b122638, inset 0 0 0 1px #0b122614; }
.quadrant-copy { display: flex; align-items: flex-start; gap: 16px; margin-top: 18px; }
.quadrant-text { min-width: 0; }
.quadrant h3 { color: var(--warm-ink); font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.quadrant p { margin: 6px 0 0; color: var(--warm-body); font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
/* Tactical v5 is cropped to the 3:2 window with the founder, pointing hand, court and P badge whole. */
#path-tactical .quadrant-frame img { object-position: 50% 50%; }
.academy-band :focus-visible { outline-color: var(--warm-ink); }

/* 3. Start where you are: three still level cards on one lime rail, each a photo, the level, one
   line and one link. The whole card is the link's target. */
.levels { background: var(--court); }
.level-cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 40px); padding-top: 30px; }
.level-cards::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--lime); opacity: 0.42; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%); pointer-events: none; }
.level-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.level-card::before { content: ""; position: absolute; top: -36px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 7px #c8e84a1f, 0 0 28px #c8e84a66; pointer-events: none; }
.level-card > img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 50% 50%; border-radius: 16px; background: var(--stage); box-shadow: 0 24px 60px #0006, inset 0 0 0 1px #ffffff14; }
/* All three level photos are matching 4:3 crops with the same player height and ground line. */
.level-card[data-level="beginner"] > img { object-position: 50% 50%; }
.level-card-copy { display: flex; flex-direction: column; flex: 1; padding-top: 20px; }
.level-card h3 { font-size: clamp(22px, 1.8vw, 26px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; transition: color 0.2s; }
.level-card p { margin: 10px 0 16px; color: var(--muted); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; max-width: 34ch; text-wrap: pretty; }
.level-card-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: auto; color: var(--lime); font-size: 13px; font-weight: 600; line-height: 1.4; }
.level-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.level-card:focus-within { outline: 2px solid var(--lime); outline-offset: 8px; border-radius: 6px; }
.level-card-link:focus-visible { outline: none; }
@media (hover: hover) {
  .level-card:hover h3 { color: var(--lime); }
}
/* The founder film slot stays out of the page until founder-video.js finds a same origin video
   (data-video-src on figure.levels-film) and marks the figure is-ready. Then it sits above the cards. */
.levels-film { display: none; position: relative; width: 100%; max-width: 960px; margin: 0 auto clamp(28px, 3vw, 40px); border-radius: 16px; overflow: hidden; background: var(--stage); box-shadow: 0 24px 60px #0006, inset 0 0 0 1px #ffffff14; }
.levels-film.is-ready { display: block; }
.levels-film picture, .levels-film img, .levels-film video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; }
.levels-film img { object-fit: cover; object-position: 50% 40%; }
.levels-film video { background: #000; object-fit: contain; }

/* 4. Master every shot: one calm, continuously moving strip of tall shot cards, built from carousel.json
   by academy-1012-shots.js. Each card is a 4:5 still with a deep navy fade over its bottom third and the
   shot name large in white over the fade, inside the card. The strip runs edge to edge and its first
   card starts on the shell's left edge. The track height is reserved from the card width, so the band
   does not move when the cards arrive. Hover, focus, swipe, the keyboard and the Pause button all stop
   the motion. */
.shots { background: var(--court); overflow: hidden; }
.shots .band-head { margin-bottom: clamp(16px, 2.4vw, 26px); }
.shots-carousel { --card-w: clamp(216px, 21vw, 300px); --card-gap: clamp(14px, 1.6vw, 20px); --edge: clamp(16px, 4vw, 56px); position: relative; }
.shots-viewport { position: relative; overflow-x: auto; overflow-y: hidden; min-height: calc(var(--card-w) * 1.25 + 38px); padding-block: 12px 26px; padding-inline: max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter))); scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%); }
.shots-viewport::-webkit-scrollbar { display: none; }
.shots-viewport:focus-visible { outline: none; box-shadow: inset 0 2px 0 var(--lime), inset 0 -2px 0 var(--lime); }
.shots-track { display: flex; gap: var(--card-gap); width: max-content; list-style: none; margin: 0; padding: 0; }
.shots-track .shotcard { flex: 0 0 var(--card-w); width: var(--card-w); min-width: 0; }
.shots-track .shotphoto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: var(--stage); box-shadow: 0 18px 44px #0005, inset 0 0 0 1px #ffffff14; }
.shots-track .shotphoto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* The fade: deep navy at the foot of the card, gone a third of the way up, eased so no band shows. */
.shots-track .shotphoto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, #090d1a00 0%, #090d1a38 18%, #090d1a9e 42%, #090d1ae0 70%, #090d1af5 100%); pointer-events: none; }
.shots-track .shotname { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; margin: 0; color: #fff; font-size: clamp(22px, 1.9vw, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; text-wrap: balance; text-shadow: 0 1px 2px #0008, 0 2px 14px #0006; }
.shots-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; }
.shots-control { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid #ffffff3d; border-radius: 999px; background: #091326e6; color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; line-height: 1.2; cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.shots-control:hover { border-color: var(--lime); }
.shots-control:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.shots-step { width: 44px; padding: 0; }
.shots-step[data-shots-step="previous"] .icon { transform: rotate(180deg); }
.shots-glyph { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shots-glyph [data-glyph-play] path { fill: currentColor; }
.shots-note { margin: 0 0 0 auto; color: var(--quiet); font-size: 12px; line-height: 1.5; }

/* 5. Join the Academy: one short band, one door, and the camera independence line under it. */
.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; }
.join-line { display: block; margin-top: 20px; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.45; max-width: 44ch; text-wrap: balance; }

/* 6. 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, and the
   shot strip is a still row that scrolls by hand (the script never starts it). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .academy-1012 *, .academy-1012 *::before, .academy-1012 *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .hero-stage:not(.is-in) .stage-media, .js .hero-stage:not(.is-in) .hero-points { opacity: 1; transform: none; }
  .shots-toggle { display: none !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. The Master every shot deck carries its own mark (round 6), whose
   lane makes that line 4 px deeper (6 px lane, 2 px given back), so it keeps 10 px and the deck's
   baseline stays on the title's last line, as on every other band head. */
@media (min-width: 761px) {
  .band-head .band-deck { margin-bottom: 14px; }
  .shots .band-head .band-deck { margin-bottom: 10px; }
}
@media (min-width: 1000px) {
  /* The deck takes whatever width is left beside the title (up to its 56ch), so it never drops under it. */
  .band-head .band-deck { flex: 1 1 0; min-width: 0; text-align: right; text-wrap: balance; }
}
@media (min-width: 861px) and (max-height: 900px) {
  .academy-1012 .hero { padding-top: 22px; }
  .hero .actions { margin-top: 22px; }
  .hero-stage { margin-top: clamp(28px, 3.5vw, 44px); }
}
@media (max-width: 1120px) {
  /* Give the five points a little more of the row once the frame narrows. */
  .hero-stage { grid-template-columns: minmax(0, 1.16fr) var(--rail) minmax(0, 0.84fr); }
  .hero-points li { gap: 14px; padding: 10px 0; font-size: 15px; }
  .hero-points .pillar-icon { width: 40px; height: 40px; padding: 8px; margin-top: -2px; }
}
@media (min-width: 861px) and (max-width: 999px) {
  .academy-1012 .nav-shell { padding-inline: 24px; }
  .academy-1012 .nav-cta { gap: 8px; }
}
@media (max-width: 999px) {
  .questions .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 860px) {
  .hero-intro { margin-top: 32px; }
  /* The hero row stacks: the film, then the five points under it, both on the step column. */
  .hero-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "text"; row-gap: 26px; max-width: 520px; margin-inline: auto; }
  .hero-points li:first-child { padding-top: 12px; border-top: 1px solid var(--line); }
  .js .hero-stage:not(.is-in) .hero-points { transform: translateY(14px); }
}
@media (max-width: 760px) {
  /* The quadrants, the cards and the steps stack, one under the other. */
  .quadrants { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 560px; margin-inline: auto; }
  .level-cards { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 0; max-width: 520px; margin-inline: auto; }
  .level-cards::before, .level-card::before { display: none; }
  .level-card p { max-width: none; }
  .shots-controls { gap: 10px; }
  .shots-note { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 700px) {
  .academy-1012 .band { padding-block: 48px; }
  .academy-1012 .hero { padding-top: 28px; padding-bottom: 48px; }
  .hero h1 { font-size: clamp(33.6px, 9.44vw, 57.6px); }
  /* On phones the headline wraps on its own, "Your personalized", "online padel coach", "for every level.",
     and the underlined words stay together because the mark is an inline block. */
  .hero h1 .hl-mark { padding-bottom: 16px; }
  .hero h1 .title-swoosh { height: 12px; stroke-width: 7; }
  .hero .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero .actions a { justify-content: center; width: 100%; }
  .hero-stage { margin-top: 36px; }
  .media-frame, .level-card > img, .levels-film, .shots-track .shotphoto { border-radius: 12px; }
  .pillar-icon, .hero-points .pillar-icon { width: 40px; height: 40px; padding: 8px; margin-top: -2px; }
  .quadrant-copy { gap: 14px; }
  .quadrant h3 { font-size: 20px; }
  .shots-carousel { --card-w: clamp(196px, 58vw, 236px); --card-gap: 12px; }
  .shots-track .shotname { left: 16px; right: 16px; bottom: 14px; font-size: 22px; }
  .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; }
  .shots-carousel { --card-w: 188px; }
  .shots-track .shotname { font-size: 20px; }
}

/* Oct 12, 2026, round 5: the lesson count sits directly under the H1 as one block, centred on the same axis
   (auto margins inside the centred intro), clearly bigger and bolder than body copy and clearly under the
   headline. "Over 300 lessons" carries the titles' curvy lime underline: the mark keeps 9 px of its own
   room below the words and the stroke sits in that lane, so it never touches the letters. The mark gives
   3 px of that lane back to the line below, which leaves the stroke clear of the next line's tall letters.
   With the 0.015em tracking, the first sentence measures 33.7ch in Outfit and "game. No" would need 35.9ch, so
   35ch gives wide screens one sentence per line whatever the size. */
.hero-stat { margin: 18px auto 0; max-width: 35ch; color: var(--ink); font-size: clamp(20px, 1.85vw, 27px); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; text-wrap: pretty; }
.hero-stat strong { font-weight: 800; }
.hero-stat .hl-mark { padding-bottom: 9px; margin-bottom: -3px; }
.hero-stat .title-swoosh { height: 9px; stroke-width: 5; }
/* The same mark at point size under "Over 300 lessons" in the first hero point: a 6 px lane, a 3.5 px stroke. */
.hero-points .hl-mark { padding-bottom: 6px; margin-bottom: -2px; }
.hero-points .title-swoosh { height: 6px; stroke-width: 3.5; }
@media (max-width: 700px) {
  .hero-stat { margin-top: 14px; font-size: clamp(18px, 5vw, 21px); line-height: 1.4; }
  .hero-stat .hl-mark { padding-bottom: 7px; margin-bottom: -2px; }
  .hero-stat .title-swoosh { height: 7px; stroke-width: 4; }
}

/* Oct 12, 2026, round 6 (founder notes): the count is over 300 lessons and it is highlighted wherever it appears.
   On the page's navy and court blue surfaces the words themselves are lime (hl-lime), 12 to 1 or better against
   every surface they sit on, under the same curvy lime stroke in its own lane below the letters. The hero count keeps
   its weight 800. The hero point and the Master every shot deck carry the count at 600 so the lime reads crisp at
   15 to 18 px. The deck's mark takes the point size lane: 6 px, a 3.5 px stroke, 2 px given back to the line below. */
.hl-mark.hl-lime { color: var(--lime); }
.hero-points .hl-lime, .band-deck .hl-lime { font-weight: 600; }
.band-deck .hl-mark { padding-bottom: 6px; margin-bottom: -2px; }
.band-deck .title-swoosh { height: 6px; stroke-width: 3.5; }

/* r47: the camera independence statement precedes the lesson count, using the existing lime highlight. */
.hero .academy-access { margin: 18px auto 0; max-width: 56ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; text-wrap: pretty; }
.hero .academy-access strong { display: inline-block; padding: 10px 14px; border-radius: 6px; color: var(--warm-ink); background: var(--lime); font-weight: 700; }

/* R79. The System training loop copied between the level cards and shot carousel.
   Keep these rules in step with the loop in home-1011.css. */
.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; }
}

@media (prefers-reduced-motion: reduce) {
  .loop-pulse { animation-play-state: paused !important; }
}