/* ═══════════════════════════════════════════════════
   MR-CLU.com homepage refresh (mock, 2026-10-09)
   Scroll-driven story on top of redesign.css. Every animated value comes
   from one custom property per scene (--p, 0..1) written by js/refresh.js,
   so the browser only recomputes transforms and opacity while scrolling.
   prefers-reduced-motion flattens every scene to a static layout.
   ═══════════════════════════════════════════════════ */

:root {
  --bg: #080808;
  --panel: #0c0c0c;
  --line: #222222;
  --line-2: #333333;
  --text: #ffffff;
  --muted: #999999;
  --dim: #777777;
  --faint: #555555;
  --teal: #40DCA5;
  --amber: #f59e0b;
}

.rf-root { background: var(--bg); min-height: 100vh; font-family: 'VT323', 'Courier New', monospace; color: var(--text); }
.rf-trails { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; }
.rf-scanlines { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px); }
main { position: relative; z-index: 1; }

/* Top progress bar, sits under the fixed nav */
.rf-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 9500; pointer-events: none; }
.rf-progress span { display: block; height: 100%; width: 100%; background: var(--teal); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); box-shadow: 0 0 10px rgba(64,220,165,0.7); }

/* ── Shared type and buttons ── */
.rf-eyebrow { font-size: 16px; letter-spacing: 4px; color: var(--teal); text-transform: uppercase; }
.rf-blink { animation: blink 1.4s steps(1) infinite; }
.rf-fine { font-size: 15px; color: var(--faint); letter-spacing: 2px; }
.rf-amber-link { font-size: 17px; color: var(--amber); letter-spacing: 1px; text-decoration: none; }
.rf-teal { color: var(--teal); }
.rf-amber { color: var(--amber); }
.rf-num { display: inline-block; font-size: 15px; letter-spacing: 3px; color: var(--teal); border: 1px solid rgba(64,220,165,0.4); padding: 2px 10px; margin-bottom: 14px; }
.rf-num--amber { color: var(--amber); border-color: rgba(245,158,11,0.4); }
.rf-logo { display: block; width: min(300px, 80%); height: auto; image-rendering: pixelated; margin: 0 0 18px; }
.rf-note { font-size: 14px; color: var(--faint); letter-spacing: 1px; margin: 10px 0 0; }
.rf-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-top: 22px; }
.rf-row--center { justify-content: center; }

.rf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 51px; padding: 0 22px; font-family: inherit; font-size: 20px; line-height: 1; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; border: 2px solid; }
.rf-btn--solid { border-color: #fff; background: #fff; color: #080808; }
.rf-btn--outline { border-color: #fff; background: transparent; color: #fff; }
.rf-btn--ghost { border-color: var(--line-2); background: transparent; color: var(--muted); }
.rf-btn--teal { border-color: var(--teal); background: var(--teal); color: #06110e; }
.rf-btn--amber { border-color: var(--amber); background: transparent; color: var(--amber); }
.rf-btn--lg { min-height: 60px; font-size: 24px; letter-spacing: 3px; padding: 0 36px; }

.rf-window { border: 1px solid var(--line-2); background: var(--panel); box-shadow: 0 30px 90px rgba(0,0,0,0.6); }
.rf-winbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--faint); letter-spacing: 1px; white-space: nowrap; overflow: hidden; }
.rf-winbar span:last-child { letter-spacing: 2px; }

/* ── Scenes: a tall section with a sticky, viewport-high stage ── */
.rf-scene { position: relative; }
.rf-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.rf-chapter { width: 100%; max-width: 1280px; margin: 0 auto; padding: 120px 72px 40px 24px; }
.rf-chapter h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 400; letter-spacing: 2px; margin: 0 0 14px; line-height: 1.1; }
.rf-chapter__head p { font-size: 20px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 520px; }
.rf-chapter--split { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: 56px; align-items: center; }
.rf-chapter--flip .rf-chapter__head { order: 0; }

/* ═══ 01 HERO ═══ */
/* The hero is not pinned: its animation runs on a timer (js/refresh.js runHero), so the stage is just one screen tall. */
.rf-hero .rf-sticky { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
.rf-hero__grid { width: 100%; max-width: 1280px; margin: 0 auto; padding: 130px 72px 30px 24px; display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; gap: 48px; align-items: center; }
.rf-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; }
.rf-hero__logo { margin: 0; line-height: 0; }
.rf-hero__logo img { width: min(420px, 92%); height: auto; image-rendering: pixelated; display: block; }
.rf-hero__line { margin: 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: 1px; }
.rf-hero__line em { font-style: normal; color: #ffffff; }
.rf-hero__lede { margin: 0; font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 470px; }
.rf-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; max-width: 470px; }
.rf-dl .rf-btn { width: 100%; padding: 0 8px; letter-spacing: 1px; }
.rf-dl .cv-dl { display: flex; }
/* Secondary row under the downloads, as on the live homepage: same grid, quieter outline buttons. */
.rf-dl--more { margin-top: -4px; }
.rf-dl--more .rf-btn { min-height: 46px; font-size: 19px; letter-spacing: 2px; }

/* The composite. JS writes, per frame:
   on .rf-rig   --fl (tilt flattens 0..1), --sc (panel shrinks into the editor 0..1), --ed (editor fades in 0..1)
   on each .rf-piece  --t (0 = exploded, 1 = landed)
   on each .rf-drop   --t (0 = above the screen, 1 = landed; may overshoot slightly for the bounce) */
.rf-rig { --fl: 0; --sc: 0; --ed: 0; position: relative; margin: 0 3% 0 5%; }
.rf-editor { position: relative; z-index: 1; border: 1px solid rgba(51,51,51, var(--ed)); background: rgba(12,12,12, var(--ed)); box-shadow: 0 30px 90px rgba(0,0,0, calc(var(--ed) * 0.6)); }
.rf-editor__bar { opacity: var(--ed); }
.rf-editor__screen { position: relative; }
.rf-editor__img { display: block; width: 100%; height: auto; opacity: var(--ed); }
/* The panel sits exactly over Afterglow's spot in the editor screenshot (measured: x 424, y 298, w 752 of 1600x1000). */
.rf-ag { position: absolute; left: 26.5%; top: 29.8%; width: 47%; aspect-ratio: 16 / 9; container-type: inline-size; perspective: 1500px; z-index: 2;
  transform: translateY(calc((1 - var(--sc)) * 6%)) scale(calc(1 + (1 - var(--sc)) * 0.8)); transform-origin: 50% 46%; }
.rf-ag__tilt { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(calc((1 - var(--fl)) * 48deg)) rotateZ(calc((1 - var(--fl)) * -22deg)); }
.rf-ag__base { position: absolute; left: 0; width: 100%; display: block; backface-visibility: hidden; }
.rf-ag__base--sky { top: 0; height: 55.556%; transform: translateZ(calc((1 - var(--fl)) * -30px)); }
.rf-ag__base--floor { top: 55.556%; height: 44.444%; transform: translateZ(calc((1 - var(--fl)) * -110px)); }
.rf-piece { --t: 0; position: absolute; display: block; max-width: none;
  transform:
    translate3d(calc(var(--dx) * 1cqw * (1 - var(--t))), calc((var(--dy) + 12) * 1cqw * (1 - var(--t))), calc(var(--dz) * 1px * (1 - var(--t))))
    rotateX(calc(var(--rx) * 1deg * (1 - var(--t)))) rotateY(calc(var(--ry) * 1deg * (1 - var(--t)))) rotateZ(calc(var(--rz) * 1deg * (1 - var(--t))));
  outline: 1px solid rgba(64,220,165, calc((1 - var(--t)) * 0.9));
  box-shadow: 0 0 calc((1 - var(--t)) * 24px) rgba(64,220,165, calc((1 - var(--t)) * 0.35)), 0 calc((1 - var(--t)) * 30px) 40px rgba(0,0,0, calc((1 - var(--t)) * 0.6)); }
.rf-piece--sun { outline: 0; box-shadow: none; filter: drop-shadow(0 0 calc((1 - var(--t)) * 14px) rgba(64,220,165,0.5)); }
/* Layouts that drop in around the editor once the panel has landed (positions follow the live homepage collage) */
.rf-drop { --t: 0; position: absolute; z-index: 3; border: 1px solid var(--line-2); background: var(--panel); box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  opacity: clamp(0, calc(var(--t) * 6), 1);
  transform: translateY(calc((1 - var(--t)) * -115vh)) rotate(calc(var(--r) * 1deg + (1 - var(--t)) * var(--spin) * 1deg)) scale(calc(1 + (1 - var(--t)) * 0.15)); }
.rf-drop img { display: block; width: 100%; height: auto; }
.rf-drop--tape { left: -9%; top: -13%; width: 46%; }
.rf-drop--prism { right: -6%; top: -11%; width: 42%; }
.rf-drop--kowloon { right: -8%; top: 22%; width: 15%; z-index: 4; }
.rf-drop--fathom { left: -8%; bottom: -16%; width: 34%; }

/* Scroll cue at the foot of the hero: fades in when the hero animation ends (.is-shown, js/refresh.js),
   fades out again once the visitor scrolls (.is-gone). */
.rf-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--teal); text-decoration: none; font-size: 18px; letter-spacing: 4px; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.rf-scroll.is-shown { opacity: 0.85; pointer-events: auto; }
.rf-scroll.is-shown.is-gone { opacity: 0; pointer-events: none; }
.rf-scroll:hover, .rf-scroll:focus-visible { opacity: 1; color: #fff; }
.rf-scroll i { display: block; width: 18px; height: 18px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); animation: rfNudge 1.6s ease-in-out infinite; }
@keyframes rfNudge { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(7px) rotate(45deg); } }

/* ═══ TIMELAPSE ═══ */
.rf-video { padding: 120px 24px 90px; }
.rf-video__inner { max-width: 960px; margin: 0 auto; }
.rf-video h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 400; letter-spacing: 2px; margin: 0 0 28px; }
/* YouTube embed block, same as the live homepage and cluview.html */
.yt-embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.yt-embed__link { position: absolute; inset: 0; display: block; }
.yt-embed__link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-embed__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 10px 22px; font-size: 22px; letter-spacing: 3px; text-transform: uppercase; color: var(--teal); background: rgba(8,8,8,0.88); border: 2px solid var(--teal); box-shadow: 0 10px 40px rgba(0,0,0,0.7); }
.yt-embed__link:hover .yt-embed__play, .yt-embed__link:focus-visible .yt-embed__play { color: #080808; background: var(--teal); }
.yt-embed__link:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

/* ═══ 05 TEMPLATES WALL ═══ */
.rf-templates { position: relative; min-height: 150vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 120px 24px; border-top: 1px solid var(--line); }
.rf-wall { position: absolute; inset: 0; perspective: 1400px; overflow: hidden; }
.rf-wall::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(8,8,8,0.5) 0%, rgba(8,8,8,0.2) 45%, rgba(8,8,8,0.85) 90%), linear-gradient(to bottom, #080808 0%, transparent 18%, transparent 82%, #080808 100%); }
.rf-wall__plane { position: absolute; left: 50%; top: 50%; width: 135%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; transform: translate(-50%, -50%) rotateX(28deg) rotateZ(-14deg); }
.rf-wall__col { display: flex; flex-direction: column; gap: 18px; transform: translate3d(0, calc(var(--wp, 0) * var(--s, 1) * 260px), 0); will-change: transform; }
.rf-wall__col img { width: 100%; height: auto; display: block; border: 1px solid #1d1d1d; }
.rf-wall__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.rf-templates__card { position: relative; z-index: 2; max-width: 720px; text-align: center; padding: 40px 36px; background: rgba(8,8,8,0.82); border: 1px solid var(--line-2); backdrop-filter: blur(6px); }
.rf-templates__card h2 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 400; letter-spacing: 2px; margin: 0 0 14px; }
.rf-templates__card p { font-size: 20px; line-height: 1.55; color: var(--muted); margin: 0 auto; max-width: 600px; }
.rf-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.rf-packs img { width: 100%; height: auto; display: block; border: 1px solid var(--line-2); transition: transform 0.25s, border-color 0.25s; }
.rf-packs a:hover img { transform: translateY(-4px); border-color: var(--teal); }
.rf-templates__card .rf-row { justify-content: center; }

/* ═══ 06 VU1 ═══ */
/* Not pinned: nothing happens on scroll here, so the section is one screen of normal flow. */
.rf-vu1 { border-top: 1px solid var(--line); }
.rf-vu1 .rf-sticky { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
.rf-vu1 .rf-chapter--split { grid-template-columns: minmax(320px, 5fr) 7fr; }
.rf-vu1 .rf-chapter { padding-top: 104px; padding-bottom: 20px; }
.rf-vu1 .rf-logo { width: min(240px, 70%); }
/* VU1 dashboard cards. Proportions follow DialCard in the VU1 app (214 x 256, margins 12/10,
   spacing 8, face 172) and colours follow assets/theme_clu.qss; sizes are in cqw so a card
   scales as one piece. */
.rf-vu1__stage { width: 100%; min-width: 0; }
.rf-dials { width: min(100%, 540px, calc((100vh - 230px) * 0.83)); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vu-card { margin: 0; container-type: inline-size; aspect-ratio: 214 / 256; display: flex; flex-direction: column; padding: 4.7% 5.6%; border: 1px solid #222222; background: transparent; font-family: 'VT323', 'Courier New', monospace; }
.vu-banner { display: flex; align-items: center; gap: 2.8cqw; padding: 0.9cqw 3.7cqw; background: #111111; border: 1px solid #222222; white-space: nowrap; }
.vu-grip { color: #555555; font-size: 8cqw; line-height: 1; }
.vu-dot { font-size: 7.4cqw; line-height: 1; }
.vu-name { flex: 1; color: #ffffff; font-size: 8.7cqw; font-weight: 600; line-height: 1.2; }
.vu-val { color: #F59E0B; font-size: 8.7cqw; font-weight: 700; line-height: 1.2; }
.vu-face { width: 80.4cqw; aspect-ratio: 1; margin: 3.7cqw auto; }
.vu-face svg { display: block; width: 100%; height: 100%; }
.vu-foot { display: flex; justify-content: space-between; padding: 0 2.8cqw; white-space: nowrap; }
.vu-src { color: #666666; font-size: 6.9cqw; letter-spacing: 0.5cqw; overflow: hidden; text-overflow: ellipsis; }
.vu-edit { color: #F59E0B; font-size: 6.9cqw; letter-spacing: 0.5cqw; }

/* ═══ 07 SPEC CARD ═══ */
.rf-spec { height: 240vh; border-top: 1px solid var(--line); }
.rf-deck { position: relative; height: min(64vh, 600px); container-type: size; }
.rf-spec .rf-chapter__head, .rf-vu1 .rf-chapter__head { position: relative; z-index: 30; }
.rf-deck__card { --k: calc(var(--i) - 2); position: absolute; left: 50%; top: 50%; width: auto; height: 74%; max-width: 40%; object-fit: cover; object-position: top; border: 1px solid #2a2a2a; box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  transform: translate(-50%, -50%) translateX(calc(var(--k) * var(--e, 0) * 19cqw)) translateY(calc(var(--e, 0) * var(--k) * var(--k) * 4%)) rotate(calc(var(--k) * var(--e, 0) * 9deg + (1 - var(--e, 0)) * var(--k) * 2deg));
  z-index: 10; }
/* Layering (MR.CLU's call): centre card on top, Racing Red next, the outer two behind,
   Candy Floss (2nd card) at the very back. */
.rf-deck__card:nth-child(4) { z-index: 15; }
.rf-deck__card:nth-child(2) { z-index: 5; }
.rf-deck__card:nth-child(3) { z-index: 20; }

/* ═══ 08 CLU'D IN ═══ */
.rf-cludin { height: 240vh; border-top: 1px solid var(--line); }
.rf-chapter__head--row { display: grid; grid-template-columns: minmax(220px, 3fr) 8fr; gap: 40px; align-items: start; margin-bottom: 28px; }
.rf-chapter__head--row p { max-width: 640px; }
.rf-badge { display: inline-block; vertical-align: middle; font-size: 14px; color: var(--amber); letter-spacing: 2px; border: 1px solid rgba(245,158,11,0.4); padding: 2px 8px; animation: badgePulse 3s ease-in-out infinite; }
.rf-trace { position: relative; }
.rf-trace__svg { display: block; width: 100%; height: min(30vh, 260px); }
.rf-trace__grid { stroke: #1f1f1f; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rf-trace__line { fill: none; stroke: var(--amber); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0) * 1.15); filter: drop-shadow(0 0 4px rgba(245,158,11,0.7)); }
.rf-trace__spike { position: absolute; left: var(--sx, 70%); top: var(--sy, 30%); opacity: var(--so, 0); transition: opacity 0.4s; pointer-events: none; }
.rf-trace__ring { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 20px rgba(255,255,255,0.4); animation: badgePulse 1.4s ease-in-out infinite; }
.rf-trace__label { position: absolute; left: 34px; top: -14px; width: 300px; font-size: 17px; line-height: 1.3; color: #fff; background: rgba(8,8,8,0.92); border: 1px solid var(--amber); padding: 8px 12px; }
.rf-trace__plot { position: relative; }
.rf-trace__axis span { position: absolute; right: 10px; transform: translateY(-120%); font-size: 13px; color: var(--faint); letter-spacing: 1px; pointer-events: none; }
.rf-note--in { padding: 0 14px 10px; }

/* ═══ 09 JOIN ═══ */
.rf-join { padding: 120px 24px 90px; border-top: 1px solid var(--line); background: #0a0a0a; }
.rf-join__inner { max-width: 1240px; margin: 0 auto; }
.rf-join__head { text-align: center; margin-bottom: 48px; }
.rf-join__head .rf-eyebrow { margin-bottom: 14px; }
.rf-join__head h2 { font-size: clamp(32px, 4vw, 54px); font-weight: 400; letter-spacing: 2px; margin: 0 0 12px; }
.rf-join__head p { font-size: 19px; color: var(--dim); max-width: 640px; margin: 0 auto; line-height: 1.6; }
.rf-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rf-tier { position: relative; border: 1px solid var(--line); background: var(--panel); padding: 34px 30px; display: flex; flex-direction: column; gap: 18px; }
.rf-tier--teal { border-color: rgba(64,220,165,0.5); }
.rf-tier--teal h3 { color: var(--teal); }
.rf-tier--amber { border-color: var(--line-2); }
.rf-tier--amber h3 { color: var(--amber); }
.rf-tier__flag { position: absolute; top: 0; right: 0; background: var(--teal); color: #06110e; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; padding: 7px 16px; }
.rf-tier__lvl { font-size: 14px; color: var(--faint); letter-spacing: 3px; }
.rf-tier h3 { font-size: 28px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
.rf-tier__price { font-size: 48px; line-height: 1; }
.rf-tier__price span { font-size: 20px; color: var(--faint); }
.rf-tier__price--sm { font-size: 30px; line-height: 1.4; letter-spacing: 2px; }
.rf-tier__price--sm span { font-size: 17px; color: var(--muted); }
.rf-tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; flex: 1; }
.rf-tier li { position: relative; padding-left: 22px; font-size: 17px; color: rgba(255,255,255,0.85); line-height: 1.4; }
.rf-tier li::before { content: '\25A0'; position: absolute; left: 0; color: var(--faint); }
.rf-tier--teal li::before { content: '\25C6'; color: var(--teal); }
.rf-tier--amber li::before { content: '\25C6'; color: var(--amber); }

/* ═══ OUTRO ═══ */
.rf-outro { padding: 100px 24px; border-top: 1px solid var(--line); text-align: center; }
.rf-outro video { width: min(420px, 80vw); height: auto; background: transparent; mix-blend-mode: lighten; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.rf-outro__line { font-size: 22px; color: var(--dim); letter-spacing: 1px; margin: 4px auto 26px; max-width: 560px; }

/* Prose stays in the site's reading face (redesign.css); only the size is set here */
.rf-hero__lede, .rf-chapter__head p, .rf-templates__card p, .rf-join__head p { font-size: 18px !important; color: #b8b8b8; }

/* ── Reveal on enter (non-pinned blocks) ── */
.rf-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.8,.2,1); }
.rf-reveal.is-in { opacity: 1; transform: none; }
.rf-tiers .rf-reveal:nth-child(2) { transition-delay: 0.1s; }
.rf-tiers .rf-reveal:nth-child(3) { transition-delay: 0.2s; }

/* ── Chapter rail ── */
.rf-rail { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 8000; display: flex; flex-direction: column; gap: 6px; }
.rf-rail a { position: relative; display: block; text-decoration: none; color: var(--faint); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }
.rf-rail a b { font-weight: 400; width: 30px; text-align: center; padding: 1px 0; border: 1px solid #222; background: rgba(8,8,8,0.8); }
.rf-rail a b { display: block; }
.rf-rail a span { position: absolute; right: calc(100% + 8px); top: 50%; margin-top: -0.6em; line-height: 1.2; opacity: 0; transform: translateX(6px); transition: opacity 0.2s, transform 0.2s; white-space: nowrap; background: rgba(8,8,8,0.85); padding: 0 6px; }
.rf-rail:hover a span, .rf-rail a:focus-visible span { opacity: 1; transform: none; }
.rf-rail a.is-active { color: var(--teal); }
.rf-rail a.is-active b { border-color: var(--teal); color: #06110e; background: var(--teal); }
.rf-rail a:hover { color: #fff; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .rf-hero__grid, .rf-chapter--split, .rf-vu1 .rf-chapter--split { grid-template-columns: 1fr; gap: 28px; }
  .rf-hero__grid { padding-top: 120px; }
  .rf-rig { max-width: 600px; width: 88%; margin: 40px auto 0; }
  .rf-chapter { padding-top: 110px; }
  .rf-chapter__head p { font-size: 18px; }
  .rf-tiers { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .rf-chapter__head--row { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 1100px) and (max-height: 900px) {
  /* Short laptop screens: the stacked hero cannot fit text and rig; drop the long lede */
  .rf-hero__lede { display: none; }
}
@media (max-width: 800px) {
  .rf-rail { display: none; }
  .rf-scroll { display: none; }
  .rf-chapter, .rf-hero__grid { padding-left: 16px; padding-right: 16px; }
  .rf-hero__lede, .rf-amber-link, .rf-hero .rf-fine { display: none; }
  .rf-hero__grid { padding-top: 104px; gap: 18px; }
  .rf-rig { margin-top: 30px; width: 80%; }
  .rf-hero__line { font-size: 24px; }
  .rf-dl { grid-template-columns: 1fr; }
  .rf-dl--more { grid-template-columns: 1fr 1fr; }
  .rf-dl--more .rf-btn { font-size: 16px; letter-spacing: 1px; }
  .rf-dials { width: min(100%, 380px); }
  .rf-vu1 .rf-chapter__head p, .rf-vu1 .rf-fine { display: none; }
  .rf-spec .rf-chapter__head p { font-size: 17px; }
  .rf-deck { height: 40vh; }
  .rf-packs { grid-template-columns: 1fr; }
  .rf-trace__label { width: 200px; font-size: 15px; left: auto; right: 30px; top: 28px; }
  .rf-btn { font-size: 18px; }
}

/* ── Reduced motion: no pinning, everything shown in its finished state ── */
@media (prefers-reduced-motion: reduce) {
  .rf-scene { height: auto !important; }
  .rf-sticky { position: relative; height: auto; min-height: 0; overflow: visible; padding: 40px 0; }
  .rf-rig { --fl: 1 !important; --sc: 1 !important; --ed: 1 !important; }
  .rf-piece, .rf-drop { --t: 1 !important; }
  .rf-trace__spike { display: none; }
  .rf-wall__col { transform: none; }
  .rf-deck__card { --e: 1; }
  .rf-trace__line { stroke-dashoffset: 0; }
  .rf-scroll i { animation: none; }
  .rf-reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════
   Product page: CLU VIEW (cluview.html, mock 2026-10-09)
   ═══════════════════════════════════════════════════ */
.cv-wrap { max-width: 1240px; margin: 0 auto; }
.cv-section { position: relative; padding: 100px 24px; border-top: 1px solid var(--line); }
.cv-h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 400; letter-spacing: 2px; margin: 0 0 18px; line-height: 1.1; }
.cv-lead { max-width: 700px; color: #b8b8b8; margin: 0 0 18px; font-size: 18px !important; }
.cv-teal-link { font-size: 17px; color: var(--teal); letter-spacing: 1px; text-decoration: none; }
.cv-caption { font-size: 14px; color: var(--muted); margin: 0; }

/* Hero */
.cv-hero { position: relative; padding: 140px 24px 90px; overflow: hidden; }
/* The homepage template wall drifts behind the hero; darker on the left so the copy and buttons stay readable. */
.cv-hero .rf-wall { z-index: 0; }
.cv-hero .rf-wall::after { background:
  linear-gradient(to right, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.86) 38%, rgba(8,8,8,0.55) 70%, rgba(8,8,8,0.7) 100%),
  linear-gradient(to bottom, #080808 0%, transparent 16%, transparent 80%, #080808 100%); }
.cv-hero__grid { position: relative; z-index: 1; }
.cv-hero__grid { max-width: 1280px; margin: 0 auto; padding-right: 48px; display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; gap: 56px; align-items: center; }
.cv-hero__shot { position: relative; }
.cv-hero__shot .rf-window img { display: block; width: 100%; height: auto; }
.cv-inset { position: absolute; z-index: 3; border: 1px solid var(--line-2); background: var(--panel); box-shadow: 0 20px 60px rgba(0,0,0,0.8); }
.cv-inset img { display: block; width: 100%; height: auto; }
.cv-inset span { display: block; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); background: rgba(8,8,8,0.95); padding: 7px 12px; border-top: 1px solid var(--line); }
.cv-inset--filters { right: -22px; bottom: -40px; width: 300px; --r: 1.5deg; transform: rotate(var(--r)); }
/* Load-in: the editor rises into place, then the inset drops on with a small bump. */
@keyframes cvRise { from { opacity: 0; transform: translateY(40px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes cvDrop { 0% { opacity: 0; transform: translateY(-70vh) rotate(calc(var(--r) + 10deg)); } 70% { opacity: 1; transform: translateY(8px) rotate(var(--r)); } 100% { opacity: 1; transform: rotate(var(--r)); } }
.cv-pop { animation: cvRise 0.7s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--delay, 0s); }
.cv-drop { animation: cvDrop 0.8s cubic-bezier(.3,.7,.3,1) both; animation-delay: var(--delay, 0s); }

/* Feature tour: every step sits in the same grid cell; the active one shows. */
.cv-tour { height: 520vh; border-top: 1px solid var(--line); }
.cv-tour__stage { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 110px 72px 30px 24px; display: grid; grid-template-rows: 1fr auto; height: 100%; }
.cv-step { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 56px; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.cv-step.is-active { opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0s; }
.cv-step__text { display: flex; flex-direction: column; gap: 16px; transform: translateY(24px); transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
.cv-step.is-active .cv-step__text { transform: none; }
.cv-step__num { font-size: 16px; letter-spacing: 4px; color: var(--teal); }
.cv-step__text h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 400; letter-spacing: 2px; margin: 0; line-height: 1.1; }
.cv-step__text p { margin: 0; color: #b8b8b8; font-size: 18px !important; }
.cv-step__text p.cv-step__more { font-size: 16px !important; color: var(--dim); }
.cv-step__text strong { color: #cccccc; }
.cv-step__text a { color: var(--teal); text-underline-offset: 3px; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-tags span { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); padding: 4px 12px; }
.cv-step__visual { position: relative; transform: translateX(40px) scale(0.97); transition: transform 0.7s cubic-bezier(.2,.8,.2,1); }
.cv-step.is-active .cv-step__visual { transform: none; }
.cv-step__visual img { display: block; width: 100%; height: auto; }
.cv-vis--build { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; max-height: 62vh; }
.cv-vis--build .rf-window { overflow: hidden; max-height: 62vh; }
.cv-vis--build .rf-window:nth-child(2) { margin-top: 40px; }
.cv-vis__inset { position: absolute; right: -20px; bottom: -28px; width: 32%; box-shadow: 0 14px 44px rgba(0,0,0,0.8); }
.cv-vis--style .cv-vis__inset { max-height: 56%; overflow: hidden; }
.cv-vis--store .cv-vis__inset { width: 46%; }
.cv-vis--rules .rf-window { max-width: 640px; margin: 0 auto; }
.cv-vis--deploy { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cv-mode { background: var(--panel); padding: 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.cv-mode h3 { font-size: 24px; font-weight: 400; letter-spacing: 1px; margin: 0; }
.cv-mode p { margin: 0; color: var(--dim); font-size: 16px !important; }
.cv-badge { font-size: 13px; color: var(--amber); letter-spacing: 2px; vertical-align: middle; margin-left: 6px; }
.cv-tour__ticks { list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cv-tour__ticks li { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); display: flex; flex-direction: column; gap: 6px; }
.cv-tour__ticks i { display: block; height: 3px; background: #1a1a1a; position: relative; overflow: hidden; }
.cv-tour__ticks i::after { content: ''; position: absolute; inset: 0; background: var(--teal); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.cv-tour__ticks li.is-active { color: var(--teal); }

/* Videos and guides */
.yt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.cv-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.cv-guide { border: 1px solid var(--line); background: var(--panel); padding: 26px 28px; }
.cv-guide h2 { font-size: 26px; font-weight: 400; letter-spacing: 1px; margin: 0 0 8px; }
.cv-guide p { margin: 0; color: #b8b8b8; }
.cv-guide a { color: var(--teal); text-underline-offset: 3px; }

/* Templates marquee */
.cv-templates { overflow: hidden; }
.cv-templates__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.cv-marquee { overflow: hidden; margin: 0 -24px 18px; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.cv-marquee__track { display: flex; gap: 18px; width: max-content; animation: cvMarquee 120s linear infinite; }
.cv-marquee--right .cv-marquee__track { animation-direction: reverse; animation-duration: 140s; }
.cv-marquee:hover .cv-marquee__track { animation-play-state: paused; }
.cv-marquee img { height: 180px; width: auto; display: block; border: 1px solid #1d1d1d; }
@keyframes cvMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Comparison, requirements, FAQ, final CTA */
.cv-reqfaq { display: grid; grid-template-columns: minmax(280px, 2fr) 3fr; gap: 56px; align-items: start; }
.cv-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.cv-list li { position: relative; padding-left: 22px; color: #b8b8b8; }
.cv-list li::before { content: '\25A0'; position: absolute; left: 0; color: var(--faint); }
.cv-warn { border: 1px solid rgba(245,158,11,0.4); background: rgba(245,158,11,0.06); padding: 16px 18px; }
.cv-warn p { margin: 0; color: rgba(255,255,255,0.85); }
.cv-warn span, .cv-warn a { color: var(--amber); }
.cv-final { text-align: center; }
.cv-final .cv-lead { margin-left: auto; margin-right: auto; }
.cv-final__fine { margin: 22px 0 0; }
.cv-final__fine a { color: var(--dim); text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .cv-hero__grid, .cv-reqfaq { grid-template-columns: minmax(0, 1fr); padding-right: 0; }
  .cv-hero__shot { max-width: 680px; }
}
/* Phones and tablets: the tour is not pinned; the five steps stack with their screenshots. */
@media (max-width: 900px) {
  .cv-tour { height: auto; }
  .cv-tour .rf-sticky { position: relative; height: auto; overflow: visible; display: block; }
  .cv-tour__stage { display: block; height: auto; padding: 70px 16px 30px; }
  .cv-step { display: block; opacity: 1; visibility: visible; margin-bottom: 70px; }
  .cv-step__text, .cv-step__visual { transform: none; }
  .cv-step__visual { margin-top: 22px; }
  .cv-vis--build, .cv-vis--build .rf-window { max-height: none; }
  .cv-vis--build .rf-window { max-height: 420px; }
  .cv-vis__inset { position: relative; right: auto; bottom: auto; width: 60%; margin: -30px 0 0 auto; }
  .cv-tour__ticks { display: none; }
  .yt-pair, .cv-guides { grid-template-columns: 1fr; }
  .cv-section { padding: 70px 16px; }
  .cv-hero { padding: 110px 16px 70px; }
  .cv-hero .rf-wall::after { background: rgba(8,8,8,0.86); }
  .cv-inset--filters { width: 46%; right: -6px; bottom: -24px; }
  .cv-marquee img { height: 120px; }
  /* Two outline buttons must fit 343px: let their labels wrap instead of widening the column. */
  .rf-dl--more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rf-dl--more .rf-btn { white-space: normal; line-height: 1.1; padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-pop, .cv-drop { animation: none; }
  .cv-marquee__track { animation: none; }
  .cv-tour { height: auto; }
  .cv-tour .rf-sticky { position: relative; height: auto; overflow: visible; display: block; }
  .cv-tour__stage { display: block; height: auto; }
  .cv-step { display: grid; opacity: 1; visibility: visible; margin-bottom: 70px; }
  .cv-step__text, .cv-step__visual { transform: none; transition: none; }
  .cv-tour__ticks { display: none; }
}

/* The product page keeps its description everywhere (the homepage hides its shorter one on small screens). */
.cv-hero .rf-hero__lede { display: block; }

/* ═══════════════════════════════════════════════════
   Product page: VU1 (vu1.html, mock 2026-10-09). Builds on the CLU VIEW page classes.
   ═══════════════════════════════════════════════════ */
.vu-hero__logo img { width: min(360px, 92%); }
.vu-hero__stage { position: relative; }
/* Soft orange backlight behind the dial cards, the colour the app shows in its dashboard. */
.vu-hero__stage::before { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,102,0,0.18), rgba(255,102,0,0.06) 55%, transparent 75%); }
.vu-hero .rf-dials { position: relative; }
.vu-warn-wrap { position: relative; padding: 10px 24px 70px; }
.vu-warn { max-width: 900px; margin: 0 auto; padding: 22px 26px; }
.vu-warn h3 { margin: 0 0 8px; color: var(--amber); font-size: 22px; font-weight: 400; letter-spacing: 1px; }
.vu-warn strong { color: #ffffff; }
.vu-warn a { color: var(--teal); text-underline-offset: 3px; }
/* Three-step tour: shorter section, ticks share the width evenly whatever the step count. */
.cv-tour--3 { height: 340vh; }
.cv-tour__ticks { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.cv-vis--single .rf-window { max-width: 680px; margin: 0 auto; }
.vu-vis__faces { width: 40%; }
@media (max-width: 900px) {
  .cv-tour--3 { height: auto; }
  .vu-warn-wrap { padding: 0 16px 50px; }
  .vu-hero__stage { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-tour--3 { height: auto; }
}

/* ═══════════════════════════════════════════════════
   Product page: Spec Card (speccard.html, mock 2026-10-09). Builds on the CLU VIEW page classes.
   ═══════════════════════════════════════════════════ */
.sc-hero__logo img { width: 100%; }
/* Copy, button and small print centred under the logo: the logo's width sets the column. */
.sc-hero .rf-hero__copy { width: min(440px, 100%); align-items: center; text-align: center; }
.sc-hero .rf-hero__lede { max-width: none; }
.sc-dl { grid-template-columns: auto; justify-content: center; }
.sc-dl .rf-btn { padding: 0 34px; }

/* Hero card deal: cards fly up from below the table and each lands in its place in the fan.
   JS (runDeal) writes --t per card (0 = waiting below, 1 = dealt) on a 2.4 s timer after load.
   Spacing uses table units (cqw/cqh), so narrow and wide cards fan out evenly. */
.sc-hero__deal { position: relative; }
.sc-deal__table { position: relative; height: min(64vh, 580px); container-type: size; }
.sc-deal__card { --t: 0; --k: calc(var(--i) - 3); position: absolute; left: 50%; top: 50%; height: 84%; margin: 0; z-index: calc(10 + var(--i));
  transform: translate(-50%, -50%)
    translate(calc(var(--k) * var(--t) * 10.5cqw), calc((1 - var(--t)) * 90cqh + var(--t) * var(--k) * var(--k) * 0.8cqh))
    rotate(calc(var(--k) * var(--t) * 5deg + (1 - var(--t)) * var(--r0) * 1deg));
  opacity: clamp(0, calc(var(--t) * 3), 1); }
.sc-deal__card a { display: block; height: 100%; }
.sc-deal__card img { display: block; height: 100%; width: auto; border: 1px solid #2a2a2a; box-shadow: 0 24px 60px rgba(0,0,0,0.75); transition: transform 0.25s; }
.sc-deal__card a:hover img, .sc-deal__card a:focus-visible img { transform: translateY(-10px); }
.sc-deal__card figcaption { display: none; }
.sc-deal__foot { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 8px; min-height: 30px; }
.sc-deal__caption { margin: 0; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; }
.sc-deal__note { margin: 10px auto 0; max-width: 560px; text-align: center; font-size: 15px; line-height: 1.5; color: var(--muted); letter-spacing: 0.5px; }
.sc-deal__note strong { font-weight: 400; color: #ffffff; }
.sc-deal__caption strong { font-weight: 400; color: #ffffff; margin-right: 12px; }
.sc-deal__caption span { color: var(--teal); }

/* Six layouts: control crops collage + copy */
.sc-layouts { display: grid; grid-template-columns: 6fr 6fr; gap: 56px; align-items: center; }
.sc-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sc-control { display: block; overflow: hidden; }
.sc-control img { display: block; width: 100%; height: auto; }
.sc-control--colour { margin-top: 36px; }
.sc-control--heading { grid-column: 1; }
.sc-control--tag { grid-column: 2; }
.sc-uses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 28px; }
.sc-vs { max-width: 760px; }
.sc-faq { max-width: 760px; }

@media (max-width: 1100px) {
  .sc-layouts { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the deal becomes a sideways swipe row with captions under each card. */
@media (max-width: 900px) {
  .sc-deal__table { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; container-type: normal; padding: 22px 0 10px; height: auto; }
  .sc-deal__card { position: static; transform: none; opacity: 1; height: 58vh; flex: 0 0 auto; scroll-snap-align: center; }
  .sc-deal__card figcaption { display: block; margin-top: 8px; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; }
  .sc-deal__card figcaption strong { font-weight: 400; margin-right: 8px; }
  .sc-deal__card figcaption span { color: var(--teal); }
  .sc-deal__card a { height: calc(100% - 30px); }
  .sc-deal__foot { display: none; }
  .sc-uses { grid-template-columns: 1fr; }
  .sc-dl { grid-template-columns: 1fr; justify-content: stretch; width: 100%; }
  .sc-hero .rf-hero__copy { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-deal__table { display: flex; gap: 14px; overflow-x: auto; container-type: normal; height: auto; }
  .sc-deal__card { position: static; transform: none; opacity: 1; height: 480px; flex: 0 0 auto; }
  .sc-deal__card a { height: 100%; }
  .sc-deal__foot { display: none; }
}

/* ═══════════════════════════════════════════════════
   Product page: CLU'D IN (cludin.html, mock 2026-10-09). Builds on the CLU VIEW page classes.
   Amber is this product's accent, as on the live page.
   ═══════════════════════════════════════════════════ */
.cd-hero__logo img { width: min(360px, 92%); }
/* Frame-time trace behind the hero: the same path the homepage draws, drawn once on load. */
.cd-hero__trace { position: absolute; left: 0; top: 30%; width: 100%; height: 48%; z-index: 0; pointer-events: none; opacity: 0.22; }
.cd-hero__trace path { fill: none; stroke: var(--amber); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(245,158,11,0.8)); animation: cdDraw 2.6s cubic-bezier(.3,.6,.3,1) 0.3s forwards; }
@keyframes cdDraw { to { stroke-dashoffset: 0; } }
.cd-badge { align-self: flex-start; font-size: 15px; color: var(--amber); letter-spacing: 4px; border: 1px solid rgba(245,158,11,0.4); padding: 6px 14px; text-transform: uppercase; animation: badgePulse 3s ease-in-out infinite; }
.cd-btn { border-color: var(--amber); background: var(--amber); color: #080808; }
.cd-btn:hover { color: #080808; }
.cd-shot-note { margin: 10px 0 0; text-align: right; font-size: 14px; color: var(--faint); letter-spacing: 1px; }
.cd-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cd-aside { margin-top: 24px; max-width: 760px; }
.cd-num { color: var(--amber); }
/* Deep dives: the copy sticks while the tall screens scroll past it. */
.cd-dive__grid { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 56px; align-items: start; }
.cd-dive__text { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 14px; }
.cd-dive__text .cv-h2 { margin: 0; }
.cd-dive__shots { display: flex; flex-direction: column; gap: 18px; }
.cd-dive__shots img { display: block; width: 100%; height: auto; }
.cd-note { max-width: 900px; margin: 0 auto; }
.cd-note__body { padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; }
.cd-note__body p { margin: 0; color: rgba(255,255,255,0.82); }
.cd-note__body p.cd-note__teal { color: var(--teal); }
.cd-join { margin-top: 36px; }
.cd-meanwhile { font-size: clamp(24px, 3vw, 34px); color: var(--muted); }
.cd-guide { max-width: 760px; margin: 50px auto 0; text-align: left; }
@media (max-width: 1100px) {
  .cd-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .cd-features { grid-template-columns: 1fr; }
  .cd-dive__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cd-dive__text { position: static; }
  .cd-badge { letter-spacing: 2px; font-size: 13px; }
  .cd-shot-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-hero__trace path { animation: none; stroke-dashoffset: 0; }
  .cd-badge { animation: none; }
}

/* ═══════════════════════════════════════════════════
   Templates page (templates.html, mock 2026-10-09). Builds on the product page classes.
   The community store, "Built one yourself?" and "How it works" sections are copied from the
   live page by tools/build-pages.py and keep their own inline styles.
   ═══════════════════════════════════════════════════ */
/* Hero: centred copy over the template wall, shaded darkest in the middle. */
.tp-hero { min-height: 60vh; padding-top: 130px; padding-bottom: 60px; display: flex; align-items: center; justify-content: center; }
.tp-hero .rf-wall::after { background:
  radial-gradient(ellipse 60% 60% at 50% 50%, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.8) 45%, rgba(8,8,8,0.45) 100%),
  linear-gradient(to bottom, #080808 0%, transparent 16%, transparent 80%, #080808 100%); }
.tp-hero__inner { position: relative; z-index: 1; max-width: 900px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.tp-hero__inner h1 { margin: 0; font-size: clamp(38px, 5vw, 64px); font-weight: 400; letter-spacing: 2px; line-height: 1.05; }
.tp-hero__lede { margin: 0; max-width: 720px; font-size: 19px !important; color: #b8b8b8; }
.tp-hero__lede a { color: #ffffff; text-underline-offset: 3px; }
.tp-hero__lede strong { color: var(--teal); font-weight: 400; }
.tp-hero__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-size: 16px; letter-spacing: 2px; color: var(--muted); }
.tp-hero__tags i { font-style: normal; margin-right: 4px; }
/* Monolith: image and copy side by side */
.tp-split { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.tp-split__img { display: block; overflow: hidden; }
.tp-split__img img { display: block; width: 100%; height: auto; transition: transform 0.4s; }
.tp-split__img:hover img { transform: scale(1.03); }
.tp-eyebrow { display: block; margin-bottom: 10px; color: var(--amber); }
/* Member packs */
.tp-packs { display: grid; gap: 20px; margin-top: 20px; }
.tp-packs--two { grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
.tp-packs--four { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
.tp-pack { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); transition: border-color 0.25s, transform 0.25s; }
.tp-pack:hover { border-color: rgba(245,158,11,0.6); transform: translateY(-4px); }
.tp-pack__img { display: block; overflow: hidden; border-bottom: 1px solid var(--line); background: #000; }
.tp-pack__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.tp-pack__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tp-pack__count { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); }
.tp-pack h3 { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: 1px; }
.tp-pack p { margin: 0; color: #b8b8b8; flex: 1; }
.tp-packs--four .tp-pack p { font-size: 15px !important; }
.tp-pack__link { font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); text-decoration: none; margin-top: 6px; }
.tp-pack__link:hover { color: #ffffff; }
@media (max-width: 1100px) {
  .tp-split { grid-template-columns: minmax(0, 1fr); }
  .tp-packs--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .tp-hero { min-height: 0; padding: 120px 16px 70px; }
  .tp-hero .rf-wall::after { background: rgba(8,8,8,0.86); }
  .tp-hero__tags { font-size: 14px; flex-direction: column; align-items: center; }
  .tp-packs--two, .tp-packs--four { grid-template-columns: minmax(0, 1fr); }
}

/* Buttons inside step copy keep their own colours (the step link colour is for inline links). */
.cv-step__text .rf-btn--teal { color: #06110e; }
.cv-step__text .rf-btn--solid { color: #080808; }

/* ═══════════════════════════════════════════════════
   Phones: centre the content (MR.CLU, 2026-10-09). Desktop layout is unchanged.
   Kept left-aligned on purpose: FAQ answers, bullet lists, the CLU'D IN dev note (a text file) and
   the community store (copied from the live page). Placed last so it wins over the rules above.
   ═══════════════════════════════════════════════════ */
@media (max-width: 800px) {
  /* Copy blocks */
  .rf-hero__copy, .rf-chapter__head, .rf-chapter__head--row, .cv-step__text, .cd-dive__text,
  .tp-split .cv-step__text, .sc-layouts__copy { align-items: center; text-align: center; }
  .rf-hero__copy > *, .cv-step__text > *, .cd-dive__text > * { margin-left: auto; margin-right: auto; }
  .rf-hero__line, .rf-hero__lede, .rf-chapter__head p, .cv-lead, .cv-step__text p { margin-left: auto; margin-right: auto; }
  .cv-h2, .rf-chapter h2, .rf-build__head h2, .rf-video h2, .tp-eyebrow { text-align: center; }
  .cv-wrap > .cv-lead, .cd-aside, .sc-vs { text-align: center; }
  .rf-num, .cv-step__num { align-self: center; }
  /* Logos and badges */
  .rf-hero__logo img, .rf-logo, .vu-hero__logo img, .sc-hero__logo img, .cd-hero__logo img { margin-left: auto; margin-right: auto; }
  .cd-badge { align-self: center; }
  /* Buttons, tags and small print */
  .rf-row, .cv-tags, .cd-join { justify-content: center; }
  .rf-dl { width: 100%; }
  .rf-fine, .cv-caption, .cd-shot-note, .rf-amber-link, .cv-teal-link { text-align: center; }
  .cv-templates__head { flex-direction: column; align-items: center; text-align: center; }
  /* Pictures and stages sit in the middle of the screen */
  .cv-hero__shot, .rf-rig, .vu-hero__stage, .rf-dials, .tp-split__img, .rf-deck { margin-left: auto; margin-right: auto; }
  /* Auto side margins shrink a flex item to its content; the deck's cards are absolutely placed, so give it the full width. */
  .rf-deck { width: 100%; }
  /* Cards */
  .cv-mode, .cv-guide, .tp-pack__body, .rf-tier, .vu-warn { text-align: center; }
  .tp-pack__body { align-items: center; }
  .rf-tier { align-items: center; }
  .rf-tier ul { text-align: left; }
  .cd-guide { text-align: center; }
  .cv-warn p, .rf-note { text-align: center; }
  /* Requirements: heading centred, list and warning stay readable */
  .cv-req .cv-h2, .cv-faq .cv-h2, .sc-faq .cv-h2 { text-align: center; }
  /* Footer (shared chrome; its inline styles need !important here) */
  footer div[style*="flex-direction: column"] { align-items: center !important; text-align: center; }
  footer img { align-self: center !important; }
  footer p { margin-left: auto !important; margin-right: auto !important; }
  footer div[style*="justify-content: space-between"] { flex-direction: column; gap: 8px; text-align: center; }
}

/* ═══════════════════════════════════════════════════
   Articles, /sensor-panel and the setup guide (mock 2026-10-09).
   Article body and sidebar are copied from the live pages by tools/build-articles.py and keep
   their own inline styles; these rules add the new hero, the composites and the heading style.
   ═══════════════════════════════════════════════════ */
/* Article hero: meta row and title on the left, the app's composite on the right. */
.ar-hero { position: relative; overflow: hidden; padding: 150px 24px 70px; }
.ar-hero__grid { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.ar-hero__copy { display: flex; flex-direction: column; gap: 4px; }
.ar-hero__copy h1 { margin: 0; font-size: clamp(34px, 4.2vw, 56px); font-weight: 400; letter-spacing: 1px; line-height: 1.08; text-wrap: pretty; }
.ar-hero__visual { position: relative; min-width: 0; }
/* Templates article: no side visual; the copy sits centred over the template wall. */
.ar-hero--wall { min-height: 62vh; display: flex; align-items: center; }
.ar-hero--wall .ar-hero__grid { grid-template-columns: minmax(0, 1fr); max-width: 900px; text-align: center; }
.ar-hero--wall .ar-hero__copy > div { justify-content: center; }
.ar-hero--wall .ar-hero__visual { display: none; }
.ar-hero--wall .rf-wall::after { background:
  radial-gradient(ellipse 60% 60% at 50% 50%, rgba(8,8,8,0.93) 0%, rgba(8,8,8,0.82) 45%, rgba(8,8,8,0.5) 100%),
  linear-gradient(to bottom, #080808 0%, transparent 16%, transparent 80%, #080808 100%); }
/* Editor collage (free software comparison): the editor rises, two layouts drop onto its corners. */
.ar-collage { position: relative; padding: 0 0 60px 0; }
.ar-collage .rf-window img { display: block; width: 100%; height: auto; }
.ar-drop--a { left: -6%; bottom: 4px; width: 46%; }
.ar-drop--b { right: -3%; bottom: -10px; width: 40%; }
/* The homepage rig sits a little smaller beside article copy. */
.ar-hero--rig .ar-hero__visual { padding: 50px 50px 40px 30px; }
.ar-hero--rig .rf-rig { margin: 0; }
/* Spec card deal beside the title: the table keeps a fixed shape so the fan stays inside its column. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .ar-deal .sc-deal__table { height: auto; aspect-ratio: 5 / 4; max-height: 520px; }
  .ar-deal .sc-deal__card { height: 68%; }
}
@media (max-width: 900px) { .ar-deal .sc-deal__card { height: 44vh; } }

/* Body: the live article and sidebar, given the new heading style and more air. */
.ar-main { position: relative; z-index: 1; padding: 30px 24px 100px; }
.ar-wrap { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.ar-body { display: flex; flex-direction: column; gap: 26px; min-width: 0; max-width: 780px; }
.ar-body h2 { font-size: clamp(26px, 2.9vw, 36px); font-weight: 400; letter-spacing: 1.5px; line-height: 1.15; margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.ar-body h2:first-child { margin-top: 0; }
.ar-body figure img, .ar-body > div img { border: 1px solid var(--line-2); }
.ar-aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 16px; font-family: 'VT323', 'Courier New', monospace; }
.ar-aside > div { transition: border-color 0.25s, transform 0.25s; }
.ar-aside > div:hover { transform: translateY(-3px); }

/* Device frames: small screens with a bezel, used for the USB article and /sensor-panel. */
.dv { position: absolute; margin: 0; transform: rotate(var(--r, 0deg)); }
.dv__screen { background: #050505; border: 1px solid #3a3a3a; padding: 6px; border-radius: 6px; box-shadow: 0 26px 70px rgba(0,0,0,0.8), inset 0 0 0 4px #121212; }
.dv__screen img { display: block; width: 100%; height: auto; border-radius: 2px; }
.dv figcaption { margin-top: 10px; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); text-align: center; }
.dv-stage { position: relative; height: min(56vh, 520px); }
.dv-badge { position: absolute; top: 0; left: 0; margin: 0; border: 1px solid rgba(245,158,11,0.5); padding: 4px 10px; z-index: 5; }
.dv-stage .dv--a { left: 0; top: 16%; width: 44%; z-index: 2; }
.dv-stage .dv--b { left: 22%; bottom: 0; width: 54%; z-index: 3; }
.dv-stage .dv--c { right: 2%; top: 4%; width: 26%; z-index: 1; }

/* /sensor-panel */
.sp-hero { padding-bottom: 110px; }
.sp-hero__brand { display: inline-flex; align-items: center; gap: 10px; }
.sp-hero__brand img { height: 32px; width: auto; image-rendering: pixelated; }
.sp-hero__brand span { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #06110e; background: #87f7d4; padding: 3px 10px; }
.sp-hero__h1 { margin: 0; font-size: clamp(40px, 4.6vw, 64px); font-weight: 400; line-height: 1; letter-spacing: 1px; }
.sp-screens { position: relative; aspect-ratio: 16 / 11; margin-top: 30px; }
.sp-screens .dv--monitor figcaption { position: absolute; top: -30px; left: 0; margin: 0; }
.sp-screens .dv--monitor { position: absolute; left: 0; top: 4%; width: 78%; z-index: 1; }
.sp-screens .dv--monitor .dv__screen { border-radius: 4px; padding: 8px 8px 14px; }
.sp-screens .dv--strip { left: 6%; bottom: 0; width: 62%; z-index: 3; }
.sp-screens .dv--tall { right: 0; top: 0; width: 15%; z-index: 2; }
.sp-screens .dv--small { right: 12%; bottom: 8%; width: 30%; z-index: 4; }
.sp-split { grid-template-columns: 5fr 7fr; }
.sp-split .cv-step__text p { color: #b8b8b8; }
.sp-split .cv-step__text a, .sp-cards a, .sp-faq a, .cv-final .cv-lead a { color: var(--teal); text-underline-offset: 3px; }
.sp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.sp-cards .cv-mode { border: 1px solid var(--line); transition: border-color 0.25s, transform 0.25s; }
.sp-cards .cv-mode:hover { border-color: rgba(64,220,165,0.5); transform: translateY(-4px); }
.sp-cards .rf-reveal:nth-child(2) { transition-delay: 0.08s; }
.sp-cards .rf-reveal:nth-child(3) { transition-delay: 0.16s; }
.sp-cards .rf-reveal:nth-child(4) { transition-delay: 0.24s; }
/* Small line drawings of each screen type, CSS only. */
.sp-icon { display: block; position: relative; height: 46px; margin-bottom: 6px; }
.sp-icon::before { content: ''; position: absolute; left: 0; bottom: 0; border: 2px solid var(--teal); border-radius: 3px; box-shadow: 0 0 14px rgba(64,220,165,0.25); }
.sp-icon--hdmi::before { width: 54px; height: 34px; }
.sp-icon--monitor::before { width: 70px; height: 40px; bottom: 6px; }
.sp-icon--monitor::after { content: ''; position: absolute; left: 27px; bottom: 0; width: 16px; height: 6px; background: var(--teal); }
.sp-icon--usb::before { width: 32px; height: 44px; }
.sp-icon--lianli::before { width: 86px; height: 22px; }
.sp-note { margin: 22px 0 0; color: #8a8a8a; max-width: 900px; }
.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.sp-stats p { margin: 0; border: 1px solid var(--line); background: var(--panel); padding: 20px 22px; color: #9a9a9a; font-size: 16px !important; line-height: 1.55; }
.sp-stats strong { font-family: 'VT323', 'Courier New', monospace; font-size: 22px; font-weight: 400; letter-spacing: 1px; color: #ffffff; }
.sp-stats p:nth-child(4n+2) { transition-delay: 0.06s; }
.sp-stats p:nth-child(4n+3) { transition-delay: 0.12s; }
.sp-stats p:nth-child(4n+4) { transition-delay: 0.18s; }
.sp-steps { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-steps li { border: 1px solid var(--line); background: var(--panel); padding: 12px 18px; color: #b8b8b8; font-family: Arial, sans-serif; font-size: 16px; }
.sp-steps span { color: var(--teal); font-family: 'VT323', 'Courier New', monospace; font-size: 20px; margin-right: 6px; }
.sp-steps strong { color: #ffffff; font-weight: 400; }
.sp-small { font-size: 15px !important; color: #8a8a8a !important; }
.sp-next { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.sp-next__card { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); background: var(--panel); padding: 22px 22px 20px; text-decoration: none; color: inherit; transition: border-color 0.25s, transform 0.25s; }
a.sp-next__card:hover { border-color: rgba(64,220,165,0.55); transform: translateY(-4px); }
.sp-next__task { font-size: 24px; letter-spacing: 1px; color: #ffffff; }
.sp-next__check { font-family: Arial, sans-serif; font-size: 15px; line-height: 1.55; color: #9a9a9a; flex: 1; }
.sp-next__link { font-size: 17px; letter-spacing: 1px; color: var(--teal); }
.sp-next__link a { color: var(--teal); }
.sp-faq { max-width: 900px; }
.sp-faq__list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sp-faq details[open] .sp-caret { transform: rotate(90deg); }
.sp-start { margin: 0 0 14px; font-size: 20px; font-weight: 400; letter-spacing: 4px; color: var(--teal); }
.cv-final .cv-lead { margin-left: auto; margin-right: auto; }
.cv-final .sp-start { text-align: center; }

/* Setup guide: the five starter templates deal onto the stack on load. */
@keyframes guideDeal { from { opacity: 0; translate: 0 70vh; rotate: 14deg; } 75% { opacity: 1; translate: 0 -6px; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.clu-guide-template-card { animation: guideDeal 0.75s cubic-bezier(.3,.7,.3,1) both; }
.clu-guide-template-card.card-minimal { animation-delay: 0.1s; }
.clu-guide-template-card.card-work { animation-delay: 0.25s; }
.clu-guide-template-card.card-streaming { animation-delay: 0.4s; }
.clu-guide-template-card.card-gaming { animation-delay: 0.55s; }
.clu-guide-template-card.card-default { animation-delay: 0.8s; }

@media (max-width: 1100px) {
  .sp-screens { max-width: 720px; width: 100%; margin: 50px auto 0; }
  .sp-cards, .sp-stats, .sp-next { grid-template-columns: repeat(2, 1fr); }
  .sp-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .ar-hero { padding: 120px 16px 50px; }
  .ar-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ar-wrap { grid-template-columns: minmax(0, 1fr); }
  .ar-aside { position: static; }
  .ar-collage { max-width: 640px; margin: 0 auto; width: 100%; }
  .dv-stage { max-width: 560px; margin: 0 auto; width: 100%; height: 420px; }
  .ar-hero--rig .rf-rig { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 800px) {
  .ar-hero__copy { align-items: center; text-align: center; }
  .ar-hero__copy > div { justify-content: center; }
  .ar-body h2 { text-align: center; }
  .ar-aside > div { text-align: center; }
  .ar-aside > div > * { align-self: center; }
  .sp-hero__brand { align-self: center; }
  .sp-cards .cv-mode, .sp-next__card { text-align: center; align-items: center; }
  .sp-icon { width: 90px; margin-left: auto; margin-right: auto; }
  .sp-icon::before { left: 50%; transform: translateX(-50%); }
  .sp-icon--monitor::after { left: 50%; transform: translateX(-50%); }
  .sp-note, .sp-small { text-align: center; }
  .sp-stats p { text-align: center; }
  .cv-h2 { text-align: center; }
  /* Setup guide hero and step headings */
  .clu-guide-breadcrumb, .clu-guide-hero > div:first-child { text-align: center; justify-content: center; }
  .clu-guide-lede { margin-left: auto; margin-right: auto; }
  .clu-guide-meta { justify-content: center; }
}
@media (max-width: 600px) {
  .sp-cards, .sp-stats, .sp-next { grid-template-columns: minmax(0, 1fr); }
  .dv-stage { height: 300px; }
  .dv figcaption { font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
  .dv-stage .dv--a { left: 2%; top: 20%; }
  .dv-stage .dv--a figcaption { position: absolute; left: 0; right: 0; top: -28px; margin: 0; }
  .dv-stage .dv--c { right: 4%; }
  .dv-stage .dv--c { top: 12%; }
  .dv-stage .dv--c figcaption { position: absolute; left: -40%; right: -40%; top: -28px; margin: 0; }
  .sp-screens .dv--tall figcaption { display: none; }
  .ar-drop--a { left: -2%; }
  .ar-drop--b { right: -1%; }
}
@media (prefers-reduced-motion: reduce) {
  .clu-guide-template-card { animation: none; }
}

/* ═══════════════════════════════════════════════════
   Phones: no empty band above the hero (MR.CLU, 2026-10-11). Desktop layout is unchanged.
   At 900px and below the nav is static (redesign.css) and scrolls with the page, so the top padding
   that clears the fixed desktop nav was showing as blank space. Placed last so it wins.
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .rf-hero__grid { padding-top: 28px; }
  .cv-hero, .tp-hero, .ar-hero { padding-top: 40px; }
}
/* Homepage on phones: the finished panel should be on the first screen with the downloads, so the
   two download buttons sit side by side (as on desktop) and the gaps tighten. */
@media (max-width: 800px) {
  .rf-hero .rf-sticky { min-height: 0; }
  .rf-hero__grid { padding-top: 20px; gap: 14px; }
  .rf-hero__copy { gap: 12px; }
  .rf-hero .rf-dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .rf-hero .rf-dl .rf-btn { font-size: 16px; letter-spacing: 0.5px; gap: 6px; padding: 0 4px; }
  .rf-hero .rf-rig { margin-top: 18px; }
}
/* Stacked hero (1100px and below): the open Linux menu hangs over the rig underneath it, and the
   template pictures there (z-index 3) drew on top of the menu. Lift the copy while the menu is open. */
@media (max-width: 1100px) {
  .rf-hero.cv-menu-open .rf-hero__copy { z-index: 5; }
}
/* Stacked layout (1100px and below): Spec Card and CLU'D IN are taller than one screen there, so the
   pinned stage (one screen high, overflow hidden, content centred) clipped the logo at the top and the
   visual at the bottom (MR.CLU's phone, 2026-10-11). Unpin them; js/refresh.js then runs each scene as
   the block scrolls into view. Wider screens keep the pinned scenes. */
@media (max-width: 1100px) {
  .rf-spec, .rf-cludin { height: auto; }
  .rf-spec .rf-sticky, .rf-cludin .rf-sticky { position: relative; height: auto; overflow: visible; }
}