/* xf-lmride.css. Les Mills Virtual Cycling launch: the homepage launch hero (.lmh) and the /ride/ page (.rz-*).
   Brand Guide 2.2. ONE extra colour: Ultraviolet #8A6BFF (no per-programme colours). Grain gradient at WEB level (.40),
   tokens inlined from tokens-2.2.css so this file does not depend on any other staged release.
   Small text sits in the black zone. Fonts (Anybody XC, InterV) and the base :root come from the page. */

/* ---- Tokens (copied from tokens-2.2.css, web level only) ---- */
:root{
  --lm-uv:#8A6BFF;
  --grain-web-opacity:.40; --grain-web-fallback-opacity:.18; --grain-web-size:200px;
  --grain-web-noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/><feComponentTransfer><feFuncR type='linear' slope='4' intercept='-1.5'/><feFuncG type='linear' slope='4' intercept='-1.5'/><feFuncB type='linear' slope='4' intercept='-1.5'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.gg{ --gg-rgb:255 75 43; --gg-k:1;
  --b1-rx:90%;  --b1-ry:62%; --b1-x:88%; --b1-y:96%;  --b1-a:.72;   /* main pool */
  --b2-rx:95%;  --b2-ry:30%; --b2-x:8%;  --b2-y:104%; --b2-a:.36;   /* long tail sweeping along the edge */
  --b3-rx:60%;  --b3-ry:40%; --b3-x:62%; --b3-y:70%;  --b3-a:.16;   /* lift: carries the glow up and across */
  --b4-rx:40%;  --b4-ry:24%; --b4-x:78%; --b4-y:40%;  --b4-a:0;     /* optional fourth blob, off by default */
  --gg-noise:var(--grain-web-noise); --gg-size:var(--grain-web-size); --gg-grain:var(--grain-web-opacity);
  position:relative; isolation:isolate; overflow:hidden; background:var(--xf-black,#0A0A0A); color:var(--xf-white,#FFFFFF); }
.gg-light{ --gg-noise:var(--grain-light-noise); --gg-size:var(--grain-light-size); --gg-grain:var(--grain-light-opacity); }
.gg-web  { --gg-noise:var(--grain-web-noise);   --gg-size:var(--grain-web-size);   --gg-grain:var(--grain-web-opacity); }
.gg-heavy{ --gg-noise:var(--grain-heavy-noise); --gg-size:var(--grain-heavy-size); --gg-grain:var(--grain-heavy-opacity); }
.accent-ember     { --gg-rgb:255 75 43; }
.accent-uv        { --gg-rgb:138 107 255; }
.accent-afterglow { --gg-rgb:244 165 140; --gg-k:.56; }  /* main pool peaks at .40 (guide 4.6.7) */
.accent-green     { --gg-rgb:0 182 46;    --gg-k:.35; }  /* numbered-list Story only, peak .25 so no green fill passes 2% (4.3); NEEDS RATIFICATION (4.6.9) */
.gg > .gg-glow, .gg > .gg-grain{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.gg > .gg-glow{ background:
  radial-gradient(ellipse var(--b1-rx) var(--b1-ry) at var(--b1-x) var(--b1-y), rgb(var(--gg-rgb) / calc(var(--b1-a) * var(--gg-k))) 0%, rgb(var(--gg-rgb) / calc(var(--b1-a) * var(--gg-k) * 0.9)) 12%, rgb(var(--gg-rgb) / calc(var(--b1-a) * var(--gg-k) * 0.7)) 25%, rgb(var(--gg-rgb) / calc(var(--b1-a) * var(--gg-k) * 0.45)) 40%, rgb(var(--gg-rgb) / calc(var(--b1-a) * var(--gg-k) * 0.25)) 55%, rgb(var(--gg-rgb) / calc(var(--b1-a) * var(--gg-k) * 0.11)) 70%, rgb(var(--gg-rgb) / calc(var(--b1-a) * var(--gg-k) * 0.035)) 85%, rgb(var(--gg-rgb) / 0) 100%),
  radial-gradient(ellipse var(--b2-rx) var(--b2-ry) at var(--b2-x) var(--b2-y), rgb(var(--gg-rgb) / calc(var(--b2-a) * var(--gg-k))) 0%, rgb(var(--gg-rgb) / calc(var(--b2-a) * var(--gg-k) * 0.9)) 12%, rgb(var(--gg-rgb) / calc(var(--b2-a) * var(--gg-k) * 0.7)) 25%, rgb(var(--gg-rgb) / calc(var(--b2-a) * var(--gg-k) * 0.45)) 40%, rgb(var(--gg-rgb) / calc(var(--b2-a) * var(--gg-k) * 0.25)) 55%, rgb(var(--gg-rgb) / calc(var(--b2-a) * var(--gg-k) * 0.11)) 70%, rgb(var(--gg-rgb) / calc(var(--b2-a) * var(--gg-k) * 0.035)) 85%, rgb(var(--gg-rgb) / 0) 100%),
  radial-gradient(ellipse var(--b3-rx) var(--b3-ry) at var(--b3-x) var(--b3-y), rgb(var(--gg-rgb) / calc(var(--b3-a) * var(--gg-k))) 0%, rgb(var(--gg-rgb) / calc(var(--b3-a) * var(--gg-k) * 0.9)) 12%, rgb(var(--gg-rgb) / calc(var(--b3-a) * var(--gg-k) * 0.7)) 25%, rgb(var(--gg-rgb) / calc(var(--b3-a) * var(--gg-k) * 0.45)) 40%, rgb(var(--gg-rgb) / calc(var(--b3-a) * var(--gg-k) * 0.25)) 55%, rgb(var(--gg-rgb) / calc(var(--b3-a) * var(--gg-k) * 0.11)) 70%, rgb(var(--gg-rgb) / calc(var(--b3-a) * var(--gg-k) * 0.035)) 85%, rgb(var(--gg-rgb) / 0) 100%),
  radial-gradient(ellipse var(--b4-rx) var(--b4-ry) at var(--b4-x) var(--b4-y), rgb(var(--gg-rgb) / calc(var(--b4-a) * var(--gg-k))) 0%, rgb(var(--gg-rgb) / calc(var(--b4-a) * var(--gg-k) * 0.9)) 12%, rgb(var(--gg-rgb) / calc(var(--b4-a) * var(--gg-k) * 0.7)) 25%, rgb(var(--gg-rgb) / calc(var(--b4-a) * var(--gg-k) * 0.45)) 40%, rgb(var(--gg-rgb) / calc(var(--b4-a) * var(--gg-k) * 0.25)) 55%, rgb(var(--gg-rgb) / calc(var(--b4-a) * var(--gg-k) * 0.11)) 70%, rgb(var(--gg-rgb) / calc(var(--b4-a) * var(--gg-k) * 0.035)) 85%, rgb(var(--gg-rgb) / 0) 100%); }
/* The grain: neutral grey fractal noise, overlay blend, masked to the glow so the black zone stays clean. */
.gg > .gg-grain{ background-image:var(--gg-noise); background-size:var(--gg-size) var(--gg-size); opacity:var(--gg-grain); mix-blend-mode:overlay;
  -webkit-mask-image:
    radial-gradient(ellipse var(--b1-rx) var(--b1-ry) at var(--b1-x) var(--b1-y), rgb(0 0 0 / calc(min(var(--b1-a) * 8, 1) * 1)) 0%, rgb(0 0 0 / calc(min(var(--b1-a) * 8, 1) * 0.85)) 30%, rgb(0 0 0 / calc(min(var(--b1-a) * 8, 1) * 0.5)) 55%, rgb(0 0 0 / calc(min(var(--b1-a) * 8, 1) * 0.15)) 80%, transparent 100%),
    radial-gradient(ellipse var(--b2-rx) var(--b2-ry) at var(--b2-x) var(--b2-y), rgb(0 0 0 / calc(min(var(--b2-a) * 8, 1) * 1)) 0%, rgb(0 0 0 / calc(min(var(--b2-a) * 8, 1) * 0.85)) 30%, rgb(0 0 0 / calc(min(var(--b2-a) * 8, 1) * 0.5)) 55%, rgb(0 0 0 / calc(min(var(--b2-a) * 8, 1) * 0.15)) 80%, transparent 100%),
    radial-gradient(ellipse var(--b3-rx) var(--b3-ry) at var(--b3-x) var(--b3-y), rgb(0 0 0 / calc(min(var(--b3-a) * 8, 1) * 1)) 0%, rgb(0 0 0 / calc(min(var(--b3-a) * 8, 1) * 0.85)) 30%, rgb(0 0 0 / calc(min(var(--b3-a) * 8, 1) * 0.5)) 55%, rgb(0 0 0 / calc(min(var(--b3-a) * 8, 1) * 0.15)) 80%, transparent 100%),
    radial-gradient(ellipse var(--b4-rx) var(--b4-ry) at var(--b4-x) var(--b4-y), rgb(0 0 0 / calc(min(var(--b4-a) * 8, 1) * 1)) 0%, rgb(0 0 0 / calc(min(var(--b4-a) * 8, 1) * 0.85)) 30%, rgb(0 0 0 / calc(min(var(--b4-a) * 8, 1) * 0.5)) 55%, rgb(0 0 0 / calc(min(var(--b4-a) * 8, 1) * 0.15)) 80%, transparent 100%);
  mask-image:
    radial-gradient(ellipse var(--b1-rx) var(--b1-ry) at var(--b1-x) var(--b1-y), rgb(0 0 0 / calc(min(var(--b1-a) * 8, 1) * 1)) 0%, rgb(0 0 0 / calc(min(var(--b1-a) * 8, 1) * 0.85)) 30%, rgb(0 0 0 / calc(min(var(--b1-a) * 8, 1) * 0.5)) 55%, rgb(0 0 0 / calc(min(var(--b1-a) * 8, 1) * 0.15)) 80%, transparent 100%),
    radial-gradient(ellipse var(--b2-rx) var(--b2-ry) at var(--b2-x) var(--b2-y), rgb(0 0 0 / calc(min(var(--b2-a) * 8, 1) * 1)) 0%, rgb(0 0 0 / calc(min(var(--b2-a) * 8, 1) * 0.85)) 30%, rgb(0 0 0 / calc(min(var(--b2-a) * 8, 1) * 0.5)) 55%, rgb(0 0 0 / calc(min(var(--b2-a) * 8, 1) * 0.15)) 80%, transparent 100%),
    radial-gradient(ellipse var(--b3-rx) var(--b3-ry) at var(--b3-x) var(--b3-y), rgb(0 0 0 / calc(min(var(--b3-a) * 8, 1) * 1)) 0%, rgb(0 0 0 / calc(min(var(--b3-a) * 8, 1) * 0.85)) 30%, rgb(0 0 0 / calc(min(var(--b3-a) * 8, 1) * 0.5)) 55%, rgb(0 0 0 / calc(min(var(--b3-a) * 8, 1) * 0.15)) 80%, transparent 100%),
    radial-gradient(ellipse var(--b4-rx) var(--b4-ry) at var(--b4-x) var(--b4-y), rgb(0 0 0 / calc(min(var(--b4-a) * 8, 1) * 1)) 0%, rgb(0 0 0 / calc(min(var(--b4-a) * 8, 1) * 0.85)) 30%, rgb(0 0 0 / calc(min(var(--b4-a) * 8, 1) * 0.5)) 55%, rgb(0 0 0 / calc(min(var(--b4-a) * 8, 1) * 0.15)) 80%, transparent 100%); }
@supports not (mix-blend-mode:overlay){ .gg > .gg-grain{ opacity:var(--grain-web-fallback-opacity); mix-blend-mode:normal; } .gg-heavy > .gg-grain{ opacity:var(--grain-heavy-fallback-opacity); } }
/* Everything placed on the artefact sits ABOVE the grain. Grain never covers type or logo. */
.gg > .gg-content{ position:relative; z-index:2; }
/* Compositions: set one on the .gg root. */
.gg-pool-bottom-right{ }  /* default */
.gg-pool-bottom-left { --b1-x:12%; --b2-x:92%; --b3-x:38%; --b4-x:22%; }
.gg-pool-top-right   { --b1-y:4%;  --b2-y:-4%; --b3-y:30%; --b4-y:60%; }
.gg-pool-right-edge  { --b1-x:104%; --b1-y:58%; --b1-rx:70%; --b1-ry:85%; --b2-x:96%; --b2-y:104%; --b2-rx:70%; --b2-ry:34%; --b3-x:72%; --b3-y:30%; --b3-rx:44%; --b3-ry:42%; }
@media print{ .gg{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
@media (prefers-reduced-motion:reduce){ .gg > .gg-grain{ animation:none; } }

/* ---- Buttons (the XF button: green primary, ghost). 52px high, above the 48px touch minimum ---- */
.lm-btn{font-family:var(--body,'InterV','Inter',Arial,sans-serif);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:52px;min-width:48px;border-radius:4px;padding:0 22px;cursor:pointer;text-decoration:none;transition:background 200ms cubic-bezier(.4,0,.2,1),border-color 200ms cubic-bezier(.4,0,.2,1);line-height:1.2}
.lm-btn--g{background:var(--green,#00B62E);color:var(--black,#0A0A0A);border:1px solid var(--green,#00B62E)}
.lm-btn--g:hover{background:var(--green-hover,#009E28);border-color:var(--green-hover,#009E28)}
.lm-btn--o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34)}
.lm-btn--o:hover{border-color:#fff}
.lm-btn:focus-visible,.rz a:focus-visible,.rz button:focus-visible,.rz summary:focus-visible,.lmh a:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.lm-btn{transition:none}}

/* =====================================================================
   HOMEPAGE LAUNCH HERO (.lmh). Shown only while html.lm-on (set before first paint by the head script)
   ===================================================================== */
/* Laurence, 23 Oct: the Les Mills footage is the point of the page and plays CLEAR. The film sits on the plain black ground: no filter, scrim,
   tint, blend or grain over it. The Ultraviolet grain gradient lives only on the ground around it (.gg-glow/.gg-grain are z-index 0 under
   .gg-content; the film box is opaque and z-index 3), modelled on /students/ and the Blue Light card. */
/* Homepage hero v3 (Laurence, 23 Oct): FULL-BLEED like the original hero (.hero in the live page): the film fills the section edge to edge,
   text lower left, and the ONLY layer over the footage is the original hero's neutral black bottom scrim (same gradient, no colour, no blend).
   No glow and no grain on this hero. Ultraviolet only as the eyebrow dash.
   HOMEPAGE ACCENT CEILING: drawn Ultraviolet is never more than 20 percent of the hero. Measured by tools/accent-share.py */
.lmh{display:none;position:relative;min-height:74vh;min-height:74svh;align-items:flex-end;overflow:hidden;background:#0A0A0A;color:#fff}
html.lm-on .lmh{display:flex}
.lmh__film{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0A0A0A}
.lmh__film img,.lmh__film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:none;mix-blend-mode:normal}
@media (min-width:900px){.lmh__film img,.lmh__film video{object-position:50% 50%}}
.lmh__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,#0A0A0A 0%,rgba(10,10,10,.55) 46%,rgba(10,10,10,.22) 100%)}   /* = the original .hero__scrim, neutral black only */
/* Option (d), Laurence 23 Oct: DESKTOP ONLY, a deeper NEUTRAL BLACK bottom band behind the text (same colour as the original scrim, no tint;
   the upper picture keeps the original .22). The lightest of the tested curves that passes on every 5 fps frame of The Trip 2.4 to 11.7 s at 1440 and 1920
   (tools/frame-contrast.py, tests/frame-contrast/). Phone keeps the original scrim: it already passes. */
@media (min-width:900px){.lmh__scrim{background:linear-gradient(to top,#0A0A0A 0,rgba(10,10,10,.9) 240px,rgba(10,10,10,.8) 370px,rgba(10,10,10,.4) 440px,rgba(10,10,10,.22) 520px,rgba(10,10,10,.22) 100%)}}
.lmh__inner{position:relative;z-index:2;width:100%;padding-top:clamp(40px,7vw,72px);padding-bottom:clamp(40px,7vw,72px)}
.lmh .eyebrow::before{background:var(--lm-uv)}
/* /ride/ film (unchanged): clear, framed on the black ground, above the glow */
.rz-film{position:relative;z-index:3;overflow:hidden;background:#0A0A0A;border-radius:6px;isolation:isolate}
.rz-film img,.rz-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;mix-blend-mode:normal}
.lmh__film video,.rz-film video{opacity:0;transition:opacity .8s ease}
.lmh__film video.is-on,.rz-film video.is-on{opacity:1}
.lmh h1{font-family:var(--disp,'Anybody XC','Arial Narrow',sans-serif);font-weight:800;font-style:italic;text-transform:uppercase;line-height:.9;letter-spacing:.004em;font-size:clamp(76px,16vw,200px);padding-top:.08em}
.lmh h1 .stop{color:var(--green,#00B62E)}
.lmh__d{margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#F5F5F3}
.lmh .lede{margin-top:14px;max-width:34ch;color:#fff;font-size:clamp(17px,2vw,20px);line-height:1.5}
.lmh__act{margin-top:24px}
@media (prefers-reduced-motion:reduce){.lmh__film video,.rz-film video,.ride__media video{display:none}}

/* =====================================================================
   RIDE PAGE (.rz)
   ===================================================================== */
.rz{background:var(--black,#0A0A0A);color:#fff}
.rz .skip{position:absolute;left:-9999px;top:0;background:#fff;color:#0A0A0A;padding:12px 16px;z-index:200;font-weight:600}
.rz .skip:focus{left:8px;top:8px}
.rz-eb{display:flex;align-items:center;gap:10px;font-weight:600;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:#C7C7C5;margin:0 0 16px}
.rz-eb::before{content:'';width:22px;height:2px;background:var(--green,#00B62E);flex:none}
.rz-h2{font-family:var(--disp,'Anybody XC','Arial Narrow',sans-serif);font-weight:800;font-style:italic;text-transform:uppercase;line-height:.9;letter-spacing:.004em;font-size:clamp(46px,9vw,104px);padding-top:.1em}
.rz-h2 .stop,.rz-h1 .stop{color:var(--green,#00B62E)}
.rz-sec{padding:clamp(56px,9vw,112px) 0}
.rz-sec--line{border-top:1px solid var(--hair,rgba(255,255,255,.12))}
.rz-intro{margin-top:16px;max-width:52ch;color:#C7C7C5;font-size:clamp(16px,1.8vw,19px);line-height:1.6}

/* Hero */
/* Same rule as the homepage: the film plays clear on black; the grain pool sits on the ground beside it */
.rz-hero{background:#0A0A0A}
.rz-hero.gg{--b1-x:0%;--b1-y:92%;--b1-rx:80%;--b1-ry:22%;--b1-a:.72;--b2-x:100%;--b2-y:96%;--b2-rx:70%;--b2-ry:14%;--b2-a:.30;--b3-a:0;--b4-a:0}
@media (min-width:900px){.rz-hero.gg{--b1-y:70%;--b1-rx:50%;--b1-ry:46%;--b2-y:94%;--b2-ry:16%}}
.rz-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:16px;padding-bottom:clamp(48px,7vw,80px)}
.rz-film{aspect-ratio:4/5}
@media (min-width:900px){
  .rz-hero__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(32px,4vw,64px);min-height:max(560px,80svh);padding-top:48px}
  .rz-film{order:2;aspect-ratio:16/9}
  .rz-hero__text{order:1}
}
.rz-h1{font-family:var(--disp,'Anybody XC','Arial Narrow',sans-serif);font-weight:800;font-style:italic;text-transform:uppercase;line-height:.86;letter-spacing:.004em;font-size:clamp(110px,30vw,200px);padding-top:.06em;margin:0}
@media (min-width:900px){.rz-h1{font-size:clamp(120px,13vw,220px)}}
.rz-hero__d{margin:10px 0 0;font-size:clamp(15px,1.8vw,19px);font-weight:600;color:#F5F5F3}
.rz-hero .lede{margin:16px 0 0;max-width:46ch;font-size:clamp(17px,2vw,21px);line-height:1.5;color:#fff}
.rz-hero__act{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.rz-hero__when{margin-top:20px;font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#F5F5F3}
.rz-hero .rz-eb{color:#F5F5F3}

/* PHASE VISIBILITY (generated by build.py). Every phase-dependent element carries data-ph="PHASE ...". The page script sets html[data-phase]; without JS only NOJS (HOLD wording) shows. */
html[data-phase="TEASE"] [data-ph]:not([data-ph~="TEASE"]){display:none}
html[data-phase="COMING_SOON"] [data-ph]:not([data-ph~="COMING_SOON"]){display:none}
html[data-phase="BOOKING_OPEN"] [data-ph]:not([data-ph~="BOOKING_OPEN"]){display:none}
html[data-phase="LAUNCH_DAY"] [data-ph]:not([data-ph~="LAUNCH_DAY"]){display:none}
html[data-phase="LIVE"] [data-ph]:not([data-ph~="LIVE"]){display:none}
html[data-phase="HOLD"] [data-ph]:not([data-ph~="HOLD"]){display:none}
html:not([data-phase]) [data-ph]:not([data-ph~="NOJS"]){display:none}
html.ph-after [data-dated]{display:none}
html:not(.ph-after) [data-undated]{display:none}
.qa-badge{position:fixed;left:12px;bottom:12px;z-index:300;background:#fff;color:#0A0A0A;font:600 12px/1 InterV,Arial,sans-serif;letter-spacing:.08em;padding:8px 10px;border-radius:3px}
.rz-pow,.rz-next{margin:18px 0 0;font-size:clamp(17px,2vw,20px);color:#F5F5F3;max-width:52ch}
.rz-next{font-weight:600}
.rz-pow[hidden],.rz-next[hidden]{display:none}

/* Cadence bar: format only, never data. Every fourth bar in the one accent. */
.cad{display:flex;align-items:flex-end;gap:5px;height:var(--cad-h,56px)}
.cad i{flex:1 1 0;min-width:3px;height:var(--h);background:rgba(245,245,243,.55);border-radius:1px}
.cad i:nth-child(4n+1){background:var(--lm-uv)}
.cad--band{--cad-h:clamp(48px,8vw,96px);padding:0}
.cad--band i{background:rgba(245,245,243,.28)}
.cad--band i:nth-child(4n+1){background:var(--lm-uv)}
.cad--band{gap:4px}@media (max-width:600px){.cad--band{gap:2px}.cad--band i{min-width:2px}}
.rz-band{background:#0A0A0A;border-top:1px solid var(--hair,rgba(255,255,255,.12));border-bottom:1px solid var(--hair,rgba(255,255,255,.12));padding:clamp(16px,3vw,28px) 0}

/* Three rides */
.rides{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){.rides{grid-template-columns:repeat(3,1fr);gap:24px}}
.ride{background:var(--g500,#1C1C1A);border:1px solid var(--hair,rgba(255,255,255,.12));border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.ride__media{position:relative;aspect-ratio:4/5;background:#111110;overflow:hidden}
.ride__media img,.ride__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ride__media video{opacity:0;transition:opacity .8s ease}
.ride__media video.is-on{opacity:1}
/* Card footage plays clear too: no grade, tint, blend or scrim. The ride number sits on a small black plate, not on the picture. */
.ride__no{position:absolute;left:0;top:0;z-index:2;font-family:var(--disp,'Anybody XC','Arial Narrow',sans-serif);font-weight:800;font-style:italic;font-size:44px;line-height:1;color:#fff;background:#0A0A0A;padding:.18em .32em .04em .28em;border-bottom-right-radius:6px}
/* Placeholder panel, kept for any programme whose NO_TEXT footage is missing (none on 23 Oct) */
.ride__ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:20px;background:#0f0f0e;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px)}
.ride__ph .cad{--cad-h:46%;height:46%}
.ride__ph .cad i{background:rgba(245,245,243,.5)}
.ride__ph .cad i:nth-child(4n+1){background:var(--lm-uv)}
.ride__tag{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#C7C7C5;border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:6px 10px;background:rgba(10,10,10,.6)}
.ride__body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.ride__k{margin:0;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#C7C7C5}
.ride__name{margin:0;font-family:var(--body,'InterV','Inter',Arial,sans-serif);font-weight:700;font-size:clamp(26px,3vw,32px);line-height:1.1;letter-spacing:-.01em;color:#fff}
.ride__line{margin:0;font-size:17px;line-height:1.55;color:#F5F5F3}
.ride__meta{margin:auto 0 0;padding-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.ride__meta span{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#C7C7C5;border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:6px 10px}
.ride .cad{--cad-h:34px;margin-top:6px}
.rz-new{margin-top:clamp(24px,3vw,36px);font-size:clamp(17px,2vw,20px);color:#F5F5F3;max-width:52ch}
.rz-new b{font-weight:700}

/* How it works */
.steps{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:32px}}
.step{border-top:1px solid rgba(255,255,255,.28);padding:20px 0 28px}
.step__n{font-family:var(--disp,'Anybody XC','Arial Narrow',sans-serif);font-weight:800;font-style:italic;font-size:clamp(64px,9vw,104px);line-height:.95;color:#fff;padding-top:.1em}
.step__t{margin:10px 0 0;font-size:clamp(19px,2.2vw,24px);font-weight:600;line-height:1.3;color:#fff}
.step__d{margin:8px 0 0;font-size:17px;line-height:1.55;color:#C7C7C5;max-width:34ch}

/* Class plan */
.plan{display:grid;grid-template-columns:1fr;gap:20px;margin-top:clamp(28px,4vw,48px);min-height:320px}
@media (min-width:900px){.plan{grid-template-columns:1fr 1fr;gap:24px}}
.plan-club{background:var(--g500,#1C1C1A);border:1px solid var(--hair,rgba(255,255,255,.12));border-radius:8px;padding:22px 22px 8px;min-height:240px}
.plan-club__h{margin:0;font-family:var(--disp,'Anybody XC','Arial Narrow',sans-serif);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(34px,5vw,48px);line-height:.95;padding-top:.12em}
.plan-club__sub{margin:6px 0 0;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#C7C7C5}
.plan-day{margin-top:22px}
.plan-day__h{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#C7C7C5}
.cls{display:grid;grid-template-columns:64px 1fr;gap:4px 14px;align-items:start;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);min-height:56px}
.cls__t{font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;color:#fff;line-height:1.3}
.cls__n{font-size:17px;font-weight:600;line-height:1.35;color:#fff}
.cls__p{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cls__p span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#C7C7C5;border:1px solid rgba(255,255,255,.24);border-radius:3px;padding:3px 8px}
.cls__p .is-full{color:#0A0A0A;background:#F5F5F3;border-color:#F5F5F3}
.cls__p .is-low{color:#fff;border-color:#fff}
.plan-club__foot{padding:16px 0 18px;border-top:1px solid rgba(255,255,255,.14)}
.plan.is-short .plan-day[data-more]{display:none}
.plan-more{grid-column:1/-1;justify-self:start}
.plan-state{grid-column:1/-1;background:var(--g500,#1C1C1A);border:1px solid var(--hair,rgba(255,255,255,.12));border-radius:8px;padding:clamp(24px,4vw,40px);min-height:240px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.plan-state p{margin:0;font-size:clamp(18px,2.2vw,22px);line-height:1.45;color:#fff;max-width:40ch}
.plan-state .sub{font-size:16px;color:#C7C7C5}
.plan-state .lm-btn{align-self:flex-start}
.plan-note{grid-column:1/-1;margin:0;padding:12px 16px;border:1px solid rgba(255,255,255,.28);border-radius:6px;font-size:15px;color:#F5F5F3}
.skel{height:14px;border-radius:3px;background:rgba(255,255,255,.1);margin:18px 0}
.skel:nth-child(2n){width:70%}
@media (prefers-reduced-motion:no-preference){.skel{animation:rzp 1.4s ease-in-out infinite}@keyframes rzp{50%{opacity:.45}}}
.rz-app{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rz-app a.lnk{font-size:15px;color:#C7C7C5;text-decoration:underline;text-underline-offset:3px;min-height:48px;display:inline-flex;align-items:center;padding:0 4px}
.rz-app a.lnk:hover{color:#fff}

/* FAQ */
.faq{margin-top:clamp(24px,4vw,40px);border-top:1px solid rgba(255,255,255,.2)}
.faq details{border-bottom:1px solid rgba(255,255,255,.2)}
.faq summary{list-style:none;cursor:pointer;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;font-size:clamp(18px,2vw,21px);font-weight:600;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:28px;font-weight:400;line-height:1;color:#fff;flex:none;width:48px;text-align:center}
.faq details[open] summary::after{content:'\2212'}
.faq .a{padding:0 0 22px;max-width:62ch;font-size:17px;line-height:1.6;color:#C7C7C5}

/* Close */
.rz-close{min-height:420px;display:flex;align-items:flex-end}
.rz-close.gg{--b1-a:.66;--b2-a:.30;--b3-a:.14}
.rz-close__inner{position:relative;width:100%;padding-top:clamp(56px,9vw,112px);padding-bottom:clamp(56px,9vw,112px)}
.rz-close .rz-h2{max-width:11ch}
.rz-close .rz-intro{color:#F5F5F3}

/* Wide screens: the page breathes */