/* ---- paint the CANVAS, not just the body box ----
     `html` carries the app-wide `--color-bg: #0A0A0A`, a NEUTRAL grey. Because
     html has a background of its own, the body's colour is not propagated to
     the canvas -- body paints its own box only, and `h-full` pins that box to
     exactly one viewport. So #050810 covered the hero and the grey showed
     through everywhere past the first screen: the course path, the drills
     player, every gap between sections and the footer. The sections that
     looked right were the four that paint their own background.

     Two changes, and both are wanted. The body box grows to fit its content,
     and html is repainted for this page so nothing can show through even
     where the body box does not reach. */
  html:has(> body.crs-page){ background-color:#050810; }

  .crs-page{
    height:auto; min-height:100%;
    /* Edges are ONE periwinkle at three opacities, per the handoff:
       rgb(120,148,210) is lighter and bluer than the base, so a hairline
       reads as a lit edge rather than a drawn line. White at low alpha goes
       grey and dirty against #050810 -- do not substitute it. */
    --crs-ink:#04070D; --crs-line:rgba(120,148,210,.10);
    --crs-bd:rgba(120,148,210,.20); --crs-bd-hi:rgba(120,148,210,.34);
    --crs-red:#E32636; --crs-blue:#5BC3F9; --crs-text:#F4F8FD;
    --crs-muted:#A6B6CC; --crs-dim:#74869E;
    /* Orbitron (the app-wide --font-display) is doing too much work on a
       page this long. Redefining the variable rather than rewriting every
       rule means the whole page follows, including the course-path UI
       included from the academy, which reads the same variable.

       JetBrains Mono goes the same way. It was carrying every small-caps
       label -- the hero stat captions, the section kickers, NOW PLAYING,
       DRILL 01 / 03, durations, HD, FOCUS, the coach's role -- and at 9.5-11px
       with .1em tracking a monospace face is the least legible thing on the
       page. One variable each, so nothing has to be hunted down rule by
       rule. */
    --font-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    --font-mono:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    /* One flat colour for the whole page -- the base from
       media/background/BACKGROUND-COLORS.md, shared with every section
       designed in that batch.

       #050810 is a very dark blue-black, NOT black and NOT a neutral grey:
       the R5 G8 B16 bias is what makes the blue accent, the translucent navy
       card fills and the periwinkle hairlines read as one family. Flatten it
       towards grey and every translucent surface on the page loses its tint
       relationship. No page-level gradient behind it either -- depth is the
       job of the per-section layers. */
    background:#050810; color:var(--crs-text);
  }
  /* The nav is shared with every other page, so it keeps the app-wide display
     face: the Inter override above reached the GITGUD ACADEMY wordmark too,
     which made this the one page where the brand looked different (owner
     2026-09-15). */
  .crs-page .landing-nav{ --font-display:"Orbitron",system-ui,sans-serif; }

  /* ---- no page-level backdrop ----
     This page used to carry the homepage's two FIXED layers: a cyan glow over
     a red one over a navy vertical gradient, plus a 58px blueprint grid
     stretched across the whole viewport. Both are gone.

     Decoration is now per-section and masked, per the handoff: the FAQ has a
     92px grid faded out by the bottom of its list, the coaches band and the
     closing CTA each have one glow. An unmasked layer running the length of a
     9,000px page is what reads as a spreadsheet -- these fade out instead. */
  /* The drills player sets `--mono` on `.dlx` itself, so an inherited value
     from `.crs-page` would lose to it -- this needs the extra class to win.
     Scoped to this page on purpose: the member drills library still runs
     JetBrains Mono and is not part of this change.

     Same rule for its background. The player ships a full-height vertical
     gradient (#070d18 -> #03070f) plus a second red glow and a 58px grid --
     a page-level treatment inside a section, which is what the background
     handoff rules out, and the grid is the one that was removed page-wide.
     Flat base, one cyan glow kept at .16 (the handoff's ceiling is .2). */
  .crs-page .dlx{
    --mono:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    background:
      radial-gradient(1100px 620px at 50% -10%, var(--cyan-glow), transparent 58%),
      #050810;
  }
  .crs-page .dlx::before{ display:none; }
  .crs-page main{ overflow-x:hidden; }
  .crs-wrap{ max-width:80rem; margin:0 auto; padding:0 clamp(1rem,3vw,2rem); }
  .crs-kicker{ font-family:var(--font-mono),monospace; font-size:.68rem; letter-spacing:.28em;
    text-transform:uppercase; color:var(--crs-blue); margin:0 0 1rem; }
  .crs-h2{ font-family:var(--font-display),sans-serif; font-size:clamp(1.6rem,4vw,2.7rem);
    font-weight:800; line-height:1.05; margin:0 0 1rem; letter-spacing:-.01em; }
  .crs-lead{ font-size:1.02rem; line-height:1.7; color:var(--crs-muted); max-width:44rem; margin:0 0 2rem; }

  /* ---------------------------------------------------------------- HERO */
  /* Centred, not bottom-aligned. With `flex-end` the content sat at the
     foot of a 92vh block, so every line the headline lost became empty
     space at the top -- shortening the H1 to the keyword phrase left a
     260px hole under the nav. Centring splits the slack instead of
     piling it above, and the shorter min-height stops the hero being
     taller than it has content for. */
  .crs-hero{ position:relative; min-height:min(80vh,46rem); display:flex; align-items:center;
    overflow:hidden; }
  .crs-hero-media{ position:absolute; inset:0; z-index:0; }
  .crs-hero-media video, .crs-hero-media img{ width:100%; height:100%; object-fit:cover;
    filter:blur(9px) saturate(.75) contrast(1.1) brightness(.72);
    transform:scale(1.14); transform-origin:center; }
  .crs-hero-scrim{ position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(120% 80% at 15% 100%, rgba(4,7,13,.94) 20%, rgba(4,7,13,0) 70%),
      linear-gradient(180deg, rgba(4,7,13,.82) 0%, rgba(4,7,13,.32) 38%, rgba(4,7,13,.97) 100%); }
  .crs-hero-grain{ position:absolute; inset:0; z-index:2; opacity:.5; pointer-events:none;
    background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px); }
  .crs-hero-inner{ position:relative; z-index:3; width:100%; padding:3.5rem 0; }
  .crs-hero h1{ font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(2.1rem,6.2vw,4.1rem); line-height:1; letter-spacing:-.02em;
    margin:0 0 .7rem; max-width:20ch; text-wrap:balance; }
  /* The positioning line, directly under the H1. Deliberately NOT a heading:
     it would compete with the section H2s while saying nothing a search engine
     can use. */
  .crs-hero-tag{ font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(1.15rem,2.6vw,1.85rem); line-height:1.14; letter-spacing:-.01em;
    margin:0 0 1.1rem; max-width:26ch; color:#DCE7F5; }
  .crs-hero-tag em{ font-style:normal; color:var(--crs-blue); }
  .crs-hero-sub{ font-size:clamp(.95rem,1.6vw,1.12rem); line-height:1.65; color:#CBD8EA;
    max-width:38rem; margin:0 0 2rem; }
  .crs-rule{ display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:0 0 2.2rem;
    border-top:1px solid var(--crs-bd); border-bottom:1px solid var(--crs-bd); }
  .crs-rule div{ padding:.85rem clamp(.9rem,2.4vw,1.6rem); border-right:1px solid var(--crs-bd); }
  .crs-rule div:last-child{ border-right:0; }
  .crs-rule b{ display:block; font-family:var(--font-display),sans-serif; font-size:clamp(1.1rem,2.6vw,1.6rem);
    font-weight:800; line-height:1; }
  .crs-rule span{ display:block; margin-top:.3rem; font-family:var(--font-mono),monospace;
    font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--crs-dim); }
  .crs-actions{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }
  .crs-cta{ display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.8rem;
    background:var(--crs-red); color:#fff; font-weight:800; font-size:.95rem;
    text-decoration:none; clip-path:polygon(0 0, 100% 0, calc(100% - .7rem) 100%, 0 100%);
    transition:transform .16s, filter .16s; }
  .crs-cta:hover{ transform:translateY(-2px); filter:brightness(1.1); }
  .crs-ghost{ display:inline-flex; align-items:center; gap:.5rem; padding:.95rem 1.4rem;
    border:1px solid var(--crs-bd-hi); color:#DCE7F5; text-decoration:none; font-weight:600;
    font-size:.9rem; transition:background .16s; }
  .crs-ghost:hover{ background:rgba(91,195,249,.1); }

  .crs-sec{ padding:clamp(3.5rem,8vw,6.5rem) 0; }

  /* ---- "The Technique Transfers Across Simulators" (owner handoff) ----
     Ported from media/design_handoff_technique_transfers. Two columns over a
     darkened onboard photo: editorial copy left, a 2x2 grid of glass sim tiles
     right. The `.xfer-` prefix is the handoff's own and is kept so the two can
     be diffed against each other later.

     THE LOGOS RUN AT FULL COLOUR. The band this replaces greyed them out at
     62% opacity, which the handoff calls its main visual failure. ACC ships
     from the handoff as a PNG with the black plate knocked out -- the copy in
     `game_logos/` still has it, which is why this section does not reuse that
     folder.

     Inter throughout: the page already redefines --font-display to Inter, so
     no separate face is loaded. */
  .xfer{ position:relative; overflow:hidden;
    border-top:1px solid var(--crs-line); border-bottom:1px solid var(--crs-line);
    background:#050810;
    --xf-line:rgba(120,148,210,.10); --xf-line-2:rgba(120,148,210,.20);
    --xf-line-3:rgba(120,148,210,.34);
    --xf-dim:#B8C2D6; --xf-muted:#7C8AA4; --xf-muted-2:#4A5570; --xf-green:#2BD17E;
  }
  .xfer-bg{ position:absolute; inset:0; z-index:0; }
  .xfer-bg img{ width:100%; height:100%; object-fit:cover; object-position:60% 62%;
    filter:saturate(.55) contrast(1.05) brightness(.62); }
  .xfer-bg::after{ content:""; position:absolute; inset:0;
    background:
      linear-gradient(90deg,rgba(5,8,16,.98) 0%,rgba(5,8,16,.95) 34%,rgba(5,8,16,.72) 58%,rgba(5,8,16,.86) 100%),
      linear-gradient(180deg,rgba(5,8,16,.55),transparent 30%,rgba(5,8,16,.7)); }
  .xfer-grid{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
    background:
      repeating-linear-gradient(90deg,rgba(120,148,210,.07) 0 1px,transparent 1px 88px),
      repeating-linear-gradient(0deg,rgba(120,148,210,.07) 0 1px,transparent 1px 88px);
    -webkit-mask-image:linear-gradient(90deg,#000 0 62%,transparent 92%);
    mask-image:linear-gradient(90deg,#000 0 62%,transparent 92%); }
  .xfer-inner{ position:relative; z-index:2; max-width:80rem; margin:0 auto;
    padding:clamp(52px,6vw,84px) clamp(1rem,3vw,2rem);
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px);
    gap:clamp(32px,5vw,64px); align-items:center; }

  .xfer-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-weight:800;
    font-size:10px; letter-spacing:.2em; color:var(--crs-blue);
    border:1px solid rgba(91,195,249,.3); background:rgba(91,195,249,.07);
    border-radius:999px; padding:7px 14px; margin-bottom:20px; }
  .xfer-eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--crs-blue);
    box-shadow:0 0 8px var(--crs-blue); }
  .xfer h2{ font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(28px,3.3vw,44px); line-height:1.1; letter-spacing:-.025em;
    color:#fff; max-width:19ch; text-wrap:balance; margin:0; }
  .xfer h2 em{ font-style:normal; color:var(--crs-blue); }
  .xfer-copy{ margin:18px 0 0; font-size:15.5px; line-height:1.68; color:var(--xf-dim);
    max-width:56ch; text-wrap:pretty; }
  .xfer-copy strong{ color:#fff; font-weight:600; }
  .xfer-note{ margin:22px 0 0; padding-left:15px; border-left:2px solid var(--xf-line-3);
    font-size:13.5px; line-height:1.6; color:var(--xf-muted); max-width:50ch; text-wrap:pretty; }

  .xfer-sims{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .xfer-sim{ position:relative; border:1px solid var(--xf-line-2); border-radius:14px;
    background:linear-gradient(180deg,rgba(14,26,46,.72),rgba(6,12,22,.82));
    -webkit-backdrop-filter:blur(10px) saturate(150%); backdrop-filter:blur(10px) saturate(150%);
    padding:22px 18px 16px; display:flex; flex-direction:column; gap:14px;
    transition:border-color .2s, transform .2s, box-shadow .2s; }
  .xfer-sim:hover{ border-color:var(--xf-line-3); transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(2,6,16,.6); }
  .xfer-logo{ height:46px; display:flex; align-items:center; justify-content:center; }
  .xfer-logo img{ max-height:100%; max-width:100%; width:auto; object-fit:contain;
    filter:saturate(1.05); }
  .xfer-logo img.is-ir{ max-height:30px; }
  .xfer-logo img.is-acc{ max-height:38px; }
  .xfer-logo img.is-lmu{ max-height:34px; }
  .xfer-logo img.is-ams{ max-height:44px; }
  .xfer-foot{ display:flex; align-items:center; gap:7px; padding-top:12px;
    border-top:1px solid var(--xf-line); font-size:11px; font-weight:600;
    letter-spacing:.02em; color:var(--xf-muted); }
  .xfer-foot i{ width:5px; height:5px; border-radius:50%; background:var(--xf-green);
    box-shadow:0 0 6px rgba(43,209,126,.7); flex:0 0 auto; }
  .xfer-sim.is-lead{ border-color:rgba(227,38,54,.34);
    background:linear-gradient(180deg,rgba(40,14,22,.6),rgba(8,12,22,.85)); }
  .xfer-sim.is-lead .xfer-foot{ color:#F0A6AE; }
  .xfer-sim.is-lead .xfer-foot i{ background:var(--crs-red);
    box-shadow:0 0 6px rgba(227,38,54,.8); }
  .xfer-cap{ grid-column:1/-1; display:flex; align-items:center; gap:12px; margin-top:2px;
    font-size:11.5px; font-weight:500; color:var(--xf-muted-2); }
  .xfer-cap::before, .xfer-cap::after{ content:""; height:1px; flex:1; background:var(--xf-line-2); }

  @media (max-width:1000px){
    .xfer-inner{ grid-template-columns:1fr; gap:36px; }
    .xfer-bg img{ object-position:58% 58%; }
    .xfer-bg::after{ background:linear-gradient(180deg,rgba(5,8,16,.92) 0%,rgba(5,8,16,.88) 45%,rgba(5,8,16,.95) 100%); }
    .xfer-grid{ -webkit-mask-image:none; mask-image:none; opacity:.35; }
    .xfer h2{ max-width:24ch; }
  }
  @media (max-width:560px){ .xfer-sims{ grid-template-columns:1fr; } }

  /* ---- the drills band, on the same spine as the course stages ----
     `.acp-stage` draws a 2px lit track at left:17px with a 16px node at the
     top and indents its content by 52px. This repeats those three numbers
     rather than inventing a second left rail, so the drills continue the line
     the four course stages established instead of restarting beside it.
     The accent is the Racing Line category colour. */
  .crs-stage{ position:relative; padding-left:52px; }
  .crs-stage::before{
    content:""; position:absolute; left:17px; top:0; bottom:0; width:2px;
    background:linear-gradient(180deg, rgba(110,120,255,.62), rgba(110,120,255,.16));
  }
  .crs-stage::after{
    content:""; position:absolute; left:10px; top:10px; width:16px; height:16px;
    border-radius:50%; background:#0A1322; border:2px solid #6e78ff;
    box-shadow:0 0 16px rgba(110,120,255,.65);
  }
  @media (max-width:760px){ .crs-stage{ padding-left:34px; } .crs-stage::before{ left:9px; } .crs-stage::after{ left:2px; } }

  /* ---- the drills player, embedded ----
     The component ships as a self-contained card: rounded, bordered, on its own
     near-black gradient. Two things had to change to drop it into a marketing
     page. The card chrome came off, because on a full-bleed dark page it read
     as a grey box floating mid-section. And it stays INSIDE the page column --
     full-bleed was tried and its internal grid is sized for the app shell, so
     past about 80rem the playlist rail and the header stats overflowed off the
     right edge. Same gutter as every other section, so it lines up.

     The cyan glow it paints on top survives; that is the part worth keeping. */
  .crs-drills{ margin:1.5rem 0 0; }
  .crs-drills .dlx{
    border:0;
    border-radius:0;
    background:
      radial-gradient(1100px 620px at 50% -10%, var(--cyan-glow), transparent 58%),
      radial-gradient(1000px 700px at 92% 4%, color-mix(in srgb, var(--ac) 12%, transparent), transparent 60%);
  }
  /* Progress, favourites and the completed/in-review counters all describe an
     account. There isn't one here. */
  /* Present in the document because the component's script writes to them by
     id, but not shown: they all describe an account this visitor has not got. */
  .crs-drills .dlx-fav,
  .crs-drills .dlx-lprog,
  .crs-drills .dlx-stats,
  .crs-drills .dlx-catrail{ display:none; }

  /* ---- coaches roster (owner handoff) ----
     Ported from media/design_handoff_coaches_section. Replaces five equal
     tiles that printed the names ON the photographs -- which vanished
     entirely on the two light portraits -- with captions on solid panels and
     the founder promoted to a wider feature card.

     THE GREYSCALE AT REST IS LOAD-BEARING. The five source images are two
     transparent cutouts, a helmet close-up, a kart action shot and a studio
     headshot; desaturating them is what makes the row read as one set. The
     radial glow behind each subject is what the two cutouts sit on -- remove
     it and they float on flat panel. Colour arrives on hover.

     `object-position:50% 12%` is tuned to head placement across THIS set of
     five. Swap an image and re-check it. */
  .coaches{ position:relative; overflow:hidden; background:#050810;
    border-top:1px solid var(--crs-line); border-bottom:1px solid var(--crs-line);
    --co-line:rgba(120,148,210,.10); --co-line-2:rgba(120,148,210,.20);
    --co-line-3:rgba(120,148,210,.34); --co-dim:#B8C2D6; --co-muted:#7C8AA4; }
  .coaches::before{ content:""; position:absolute; left:50%; top:-8%;
    width:min(1100px,92%); height:46%; transform:translateX(-50%);
    pointer-events:none; filter:blur(28px);
    background:radial-gradient(ellipse at 50% 0%,rgba(91,195,249,.11),transparent 70%); }
  /* The handoff column is 1320px; this page's is 80rem. Using the page's own
     gutter keeps the roster's left edge on the same spine as the course path,
     the drills and the FAQ -- a 24px step between full-bleed bands is exactly
     the kind of thing that reads as broken. */
  .co-inner{ position:relative; z-index:2; max-width:80rem; margin:0 auto;
    padding:clamp(54px,6vw,88px) clamp(1rem,3vw,2rem); }

  .co-head{ display:flex; align-items:flex-end; justify-content:space-between;
    gap:36px; flex-wrap:wrap; margin-bottom:clamp(28px,3vw,40px); }
  .co-eyebrow{ display:inline-flex; align-items:center; gap:9px;
    font-family:var(--font-display),sans-serif; font-weight:700; font-size:11.5px;
    letter-spacing:.14em; color:var(--crs-blue); margin:0 0 16px; }
  .co-eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--crs-blue);
    box-shadow:0 0 8px var(--crs-blue); flex:0 0 auto; }
  .co-head h2{ font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(28px,3.4vw,46px); line-height:1.08; letter-spacing:-.028em;
    color:#fff; max-width:22ch; text-wrap:balance; margin:0; }
  .co-head h2 em{ font-style:normal; color:var(--crs-blue); }
  .co-links{ display:flex; gap:10px; flex-wrap:wrap; padding-bottom:4px; }
  .co-link{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px;
    border-radius:999px; border:1px solid var(--co-line-2); background:rgba(10,19,34,.6);
    font-size:13.5px; font-weight:600; color:var(--co-dim); text-decoration:none;
    transition:border-color .18s, color .18s, transform .18s, background .18s; }
  .co-link:hover{ color:#fff; border-color:var(--co-line-3);
    background:rgba(14,26,46,.8); transform:translateY(-2px); }
  .co-link svg{ width:14px; height:14px; stroke:currentColor; fill:none;
    stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

  .roster{ display:grid; grid-template-columns:1.36fr repeat(4,1fr); gap:14px; }
  .coach{ position:relative; display:flex; flex-direction:column;
    border:1px solid var(--co-line-2); border-radius:16px; overflow:hidden;
    background:linear-gradient(180deg,rgba(14,26,46,.72),rgba(6,12,22,.9));
    transition:border-color .22s, transform .22s, box-shadow .22s; }
  .coach:hover{ border-color:var(--co-line-3); transform:translateY(-4px);
    box-shadow:0 22px 50px rgba(2,6,16,.66); }
  .co-photo{ position:relative; flex:1; min-height:0; aspect-ratio:3/4; overflow:hidden;
    background:
      radial-gradient(ellipse 78% 62% at 50% 82%,rgba(91,195,249,.13),transparent 72%),
      linear-gradient(180deg,#0c1626,#070d18); }
  .co-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:50% 12%; filter:grayscale(1) contrast(1.06) brightness(.94);
    transition:filter .32s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
  .coach:hover .co-photo img{ filter:grayscale(0) contrast(1.02) brightness(1);
    transform:scale(1.035); }
  .co-photo::after{ content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,transparent 52%,rgba(6,12,22,.55) 82%,rgba(6,12,22,.9)); }
  .co-chip{ position:absolute; top:12px; left:12px; z-index:2; display:inline-flex;
    align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
    font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:#fff; background:rgba(227,38,54,.9); box-shadow:0 6px 18px rgba(227,38,54,.36); }

  .co-meta{ position:relative; z-index:2; padding:16px 17px 18px;
    border-top:1px solid var(--co-line); display:flex; flex-direction:column; gap:5px; }
  .co-meta b{ font-size:15.5px; font-weight:700; letter-spacing:-.012em; color:#fff; }
  .co-meta span{ font-size:12.5px; font-weight:500; color:var(--co-muted); line-height:1.45; }
  .coach.is-feature .co-meta b{ font-size:19px; }
  .co-cred{ margin:9px 0 0; padding-top:11px; border-top:1px solid var(--co-line);
    font-size:12.5px; line-height:1.55; color:var(--co-dim); text-wrap:pretty; }

  @media (max-width:1180px){
    .roster{ grid-template-columns:repeat(3,1fr); }
    .coach.is-feature{ grid-column:span 3; }
    .coach.is-feature .co-photo{ aspect-ratio:16/9; }
    .coach.is-feature .co-photo img{ object-position:50% 20%; }
  }
  @media (max-width:760px){
    .co-head{ align-items:flex-start; gap:22px; }
    .roster{ grid-template-columns:repeat(2,1fr); }
    .coach.is-feature{ grid-column:span 2; }
  }
  @media (max-width:440px){
    .roster{ grid-template-columns:1fr; }
    .coach.is-feature{ grid-column:span 1; }
    .coach.is-feature .co-photo{ aspect-ratio:3/4; }
  }

  /* ---- FAQ (owner handoff) ----
     Ported from media/design_handoff_faq_courses. The old version was a 50rem
     column of hairline rows pinned to the left of an 80rem section, so half
     the width sat empty. Now a sticky rail carries the heading and a help
     card, and the accordion takes the right two thirds.

     NO GRID LAYER. The handoff specifies a masked 92px technical grid behind
     this section; the page-wide grid was removed at the owner's request one
     message earlier, so putting one back here would contradict that. The soft
     blue glow is kept -- it is what stops the band reading as a flat slab.

     Item classes are scoped under `.faq` on purpose: `.q`, `.a` and `.qi` are
     short enough to collide with the drills player and the course path, both
     of which drop their own stylesheets into this page. */
  .faq{ position:relative; overflow:hidden; background:#050810;
    border-top:1px solid var(--crs-line);
    --fq-line:rgba(120,148,210,.10); --fq-line-2:rgba(120,148,210,.20);
    --fq-line-3:rgba(120,148,210,.34); --fq-dim:#B8C2D6; --fq-muted:#7C8AA4; }
  /* 92px cell in the same periwinkle as the hairlines, at 6% and half
     opacity, MASKED to the top-left so it is present behind the heading and
     gone by the bottom of the list. The mask is the whole point -- this is
     the one grid that survived, and it survives because it fades. */
  .faq::before{ content:""; position:absolute; inset:0;
    pointer-events:none; opacity:.5;
    background:
      repeating-linear-gradient(90deg,rgba(120,148,210,.06) 0 1px,transparent 1px 92px),
      repeating-linear-gradient(0deg,rgba(120,148,210,.06) 0 1px,transparent 1px 92px);
    -webkit-mask-image:radial-gradient(ellipse 70% 55% at 30% 0%,#000,transparent 78%);
    mask-image:radial-gradient(ellipse 70% 55% at 30% 0%,#000,transparent 78%); }
  .faq::after{ content:""; position:absolute; left:-6%; top:-14%;
    width:min(620px,60%); height:52%; pointer-events:none; filter:blur(30px);
    background:radial-gradient(ellipse at 30% 20%,rgba(91,195,249,.12),transparent 68%); }
  .faq-inner{ position:relative; z-index:2; max-width:80rem; margin:0 auto;
    padding:clamp(54px,6vw,92px) clamp(1rem,3vw,2rem);
    display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
    gap:clamp(32px,5vw,72px); align-items:start; }

  .faq-rail{ position:sticky; top:40px; }
  .faq-eyebrow{ display:inline-flex; align-items:center; gap:9px;
    font-family:var(--font-display),sans-serif; font-weight:700; font-size:11.5px;
    letter-spacing:.14em; color:var(--crs-blue); margin:0 0 16px; }
  .faq-eyebrow i{ width:6px; height:6px; border-radius:50%; background:var(--crs-blue);
    box-shadow:0 0 8px var(--crs-blue); flex:0 0 auto; }
  .faq-rail h2{ font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(28px,2.9vw,40px); line-height:1.1; letter-spacing:-.028em;
    color:#fff; text-wrap:balance; margin:0; }
  .faq-rail h2 em{ font-style:normal; color:var(--crs-blue); }
  .faq-rail > p{ margin:16px 0 0; font-size:14.5px; line-height:1.65;
    color:var(--fq-muted); max-width:40ch; text-wrap:pretty; }

  .faq-help{ margin-top:28px; border:1px solid var(--fq-line-2); border-radius:14px;
    background:linear-gradient(180deg,rgba(14,26,46,.7),rgba(6,12,22,.86)); padding:20px; }
  .faq-help b{ display:block; font-size:14.5px; font-weight:700; color:#fff; margin-bottom:6px; }
  .faq-help > span{ display:block; font-size:13px; line-height:1.6; color:var(--fq-muted);
    margin-bottom:15px; }
  .faq-help a{ display:inline-flex; align-items:center; gap:9px; padding:0 20px;
    min-height:46px; border-radius:10px; font-size:14px; font-weight:700; color:#fff;
    text-decoration:none; background:linear-gradient(180deg,#FF4A58,#b8202d);
    box-shadow:0 12px 26px rgba(227,38,54,.3); transition:transform .16s, filter .16s; }
  .faq-help a:hover{ color:#fff; transform:translateY(-2px); filter:brightness(1.07); }
  .faq-help a svg{ width:16px; height:16px; stroke:currentColor; fill:none;
    stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

  .faq-list{ display:flex; flex-direction:column; gap:10px; }
  .faq .qi{ border:1px solid var(--fq-line-2); border-radius:13px; overflow:hidden;
    background:linear-gradient(180deg,rgba(12,22,40,.6),rgba(6,12,22,.72));
    transition:border-color .2s, background .2s; }
  .faq .qi:hover{ border-color:var(--fq-line-3); }
  .faq .qi.is-open{ border-color:rgba(91,195,249,.4);
    background:linear-gradient(180deg,rgba(16,32,56,.82),rgba(7,14,26,.86)); }
  .faq .q{ display:flex; align-items:center; gap:18px; width:100%; padding:19px 20px;
    font-family:inherit; font-size:15.5px; font-weight:600; letter-spacing:-.008em;
    color:#fff; line-height:1.4; text-align:left; background:none; border:0; cursor:pointer; }
  .faq .q span{ flex:1; min-width:0; }
  .faq .q i{ position:relative; flex:0 0 auto; width:26px; height:26px; border-radius:50%;
    border:1px solid var(--fq-line-3); transition:border-color .2s, background .2s; }
  /* The two bars ARE the icon. Open state hides the vertical one to leave a
     minus -- so do not add a rotation on top of that, which renders as a lone
     vertical bar. */
  .faq .q i::before, .faq .q i::after{ content:""; position:absolute; top:50%; left:50%;
    background:var(--crs-blue); border-radius:1px; transform:translate(-50%,-50%);
    transition:opacity .2s, background .2s; }
  .faq .q i::before{ width:11px; height:1.6px; }
  .faq .q i::after{ width:1.6px; height:11px; }
  .faq .qi.is-open .q i{ border-color:var(--crs-blue); background:rgba(91,195,249,.14); }
  .faq .qi.is-open .q i::after{ opacity:0; }
  .faq .a{ display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .3s cubic-bezier(.3,.7,.2,1); }
  .faq .qi.is-open .a{ grid-template-rows:1fr; }
  .faq .a-in{ overflow:hidden; }
  .faq .a-in p{ margin:0; padding:0 20px 20px; font-size:14.5px; line-height:1.7;
    color:var(--fq-dim); max-width:70ch; text-wrap:pretty; }

  @media (prefers-reduced-motion:reduce){
    .faq .a{ transition:none; }
  }
  @media (max-width:980px){
    .faq-inner{ grid-template-columns:1fr; gap:32px; }
    .faq-rail{ position:static; }
    .faq-rail > p{ max-width:56ch; }
    .faq-help{ max-width:420px; }
    .faq::before{
      -webkit-mask-image:radial-gradient(ellipse 90% 40% at 50% 0%,#000,transparent 80%);
      mask-image:radial-gradient(ellipse 90% 40% at 50% 0%,#000,transparent 80%); }
  }
  @media (max-width:560px){
    .faq .q{ padding:17px 16px; gap:14px; font-size:14.5px; }
    .faq .a-in p{ padding:0 16px 18px; }
  }

  /* ---- closing CTA (owner handoff) ----
     Ported from media/design_handoff_closing_cta. Centred column over a
     formula onboard shot, with a red rule and glow bleeding down from the top
     edge so the section reads as the end of the page rather than one more
     band. `.close-` is the handoff's prefix, kept so the two can be diffed.

     `object-position:26% 42%` is not a taste call: the source photo carries an
     "iRacing.com" watermark, and that crop pushes it out of frame at every
     width. Do not recentre it. */
  .close{ position:relative; overflow:hidden; border-top:1px solid var(--crs-line);
    background:#050810; }
  .close-bg{ position:absolute; inset:0; z-index:0; }
  .close-bg img{ width:100%; height:100%; object-fit:cover; object-position:26% 42%;
    filter:saturate(.6) contrast(1.06) brightness(.72); }
  .close-bg::after{ content:""; position:absolute; inset:0;
    background:
      radial-gradient(72% 120% at 50% 46%,rgba(5,8,16,.5) 0%,rgba(5,8,16,.84) 52%,rgba(4,7,14,.96) 100%),
      linear-gradient(180deg,rgba(5,8,16,.86),transparent 34%,rgba(4,7,14,.9)); }
  .close-glow{ position:absolute; left:50%; top:-14%; width:min(760px,86%); height:56%;
    transform:translateX(-50%); z-index:1; pointer-events:none; filter:blur(22px);
    background:radial-gradient(ellipse at 50% 0%,rgba(227,38,54,.2),transparent 68%); }
  .close-rule{ position:absolute; left:0; right:0; top:0; height:2px; z-index:2;
    background:linear-gradient(90deg,transparent,rgba(227,38,54,.7) 50%,transparent); }
  .close-inner{ position:relative; z-index:3; max-width:960px; margin:0 auto;
    padding:clamp(60px,7vw,104px) clamp(24px,5vw,48px); text-align:center;
    display:flex; flex-direction:column; align-items:center; }
  .close h2{ font-family:var(--font-display),sans-serif; font-weight:800;
    font-size:clamp(30px,4.2vw,52px); line-height:1.06; letter-spacing:-.028em;
    color:#fff; max-width:20ch; text-wrap:balance; margin:0; }
  .close h2 em{ font-style:normal; color:var(--crs-blue); }
  .close-copy{ margin:24px 0 0; font-size:clamp(15.5px,1.5vw,18px); line-height:1.66;
    color:#B8C2D6; max-width:56ch; text-wrap:pretty; }
  .close-copy strong{ color:#fff; font-weight:600; }
  .close-cta{ margin-top:34px; display:inline-flex; align-items:center; gap:11px;
    padding:0 34px; min-height:60px; font-family:var(--font-display),sans-serif;
    font-weight:700; font-size:15.5px; letter-spacing:-.005em; color:#fff;
    text-decoration:none;
    background:linear-gradient(180deg,#FF4A58,#b8202d);
    clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,0 100%);
    box-shadow:0 18px 40px rgba(227,38,54,.4);
    transition:transform .16s, box-shadow .16s, filter .16s; }
  .close-cta:hover{ transform:translateY(-2px); filter:brightness(1.07);
    box-shadow:0 24px 50px rgba(227,38,54,.5); color:#fff; }
  .close-cta svg{ width:18px; height:18px; stroke:currentColor; fill:none;
    stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
  .close-fine{ display:inline-flex; align-items:center; gap:8px; margin-top:20px;
    font-weight:500; font-size:12.5px; letter-spacing:.05em; color:#7C8AA4; }
  .close-fine b{ color:#2BD17E; font-weight:700; }
  @media (max-width:640px){
    .close-cta{ width:100%; max-width:340px; justify-content:center; padding:0 22px; }
  }

  /* ---- the course path, without its JavaScript ----
     The member page ships `course-path.js`, which reveals stages and cards on
     scroll; the shared stylesheet therefore starts them at opacity 0. This
     page renders the same markup SERVER-SIDE and deliberately does not load
     that script, so without this override every course is invisible to a
     human while still being present for a crawler -- the worst of both. */
  .crs-path .acp-stage,
  .crs-path .acp-card,
  .crs-path .acp-sinfo,
  .crs-path .acp-rung{ opacity:1 !important; transform:none !important; }
  /* The path IS the section, so it starts straight under the hero -- the
     usual .crs-sec top padding just left a dead band. */
  #catalogue{ padding-top:0; }
  /* The course path ships edge-to-edge (max-width 1480, no gutter), which
     put its spine at x=17 while every other section on this page sits in
     the 80rem column starting at x=105. The two left rails were therefore
     105px apart and read as two unrelated devices. Same column, same
     gutter as `.crs-wrap`, so the course spine and the drills spine land
     on the same vertical line. */
  .crs-path .acp-page{
    padding:0 clamp(1rem,3vw,2rem);
    max-width:80rem;
    margin:0 auto;
  }
  /* The ladder is a set of jump links here, not a progress readout. */
  .crs-path .acp-fill{ display:none; }
  .crs-path .acp-amb{ display:none; }
  .crs-path .acp-ladder{ margin:0 0 2rem; }

  @media (max-width:900px){
    .crs-player{ grid-template-columns:1fr; }
    .crs-rail{ border-left:0; border-top:1px solid var(--crs-bd); }
  }