/* ==========================================================================
   courses-hub.css — /courses/sample/
   ==========================================================================
   The revenue page. Everything here is in service of one job: make eleven
   courses look like a shelf worth buying from.

   THE DESIGN DECISIONS THAT MATTER
   --------------------------------
   1. THE PRODUCT IS THE DECORATION. The hero's background is the real course
      art, in three perspective columns drifting at different rates. It says
      "there is a catalogue here" before a word of the headline is read, and it
      costs nothing extra because the posters are already on the page below.
   2. ONE HUE PER TRACK. --h is set once per card from its track, and every
      accent inside it derives from that. Six shelves become six colours of
      glass rather than eleven identical grey boxes.
   3. THE CARD IS A LAYERED OBJECT. On a pointer device the poster, the body
      and the price sit at different Z, so tilting the card parallaxes its own
      contents. That is what separates a 3D card from a card with a shadow.
   4. CARDS ARRIVE STANDING UP. Each rotates from flat as it enters, driven by
      its own scroll progress rather than a fixed delay, so the sequence
      follows the reader instead of running ahead of them.

   TRANSFORM DISCIPLINE
   --------------------
   Nothing here is animated by writing `transform` from JavaScript. Every
   moving element composes custom properties — --py for parallax, --tx/--ty for
   tilt, --p for rise progress — inside a single `transform` declared in this
   file. GSAP's reveals write `transform` on their own targets and the last
   writer would silently win; this codebase has already paid for that twice.
   ========================================================================== */

.page-crx {
  --crx-ink:   #07070c;
  --crx-line:  rgb(190 200 230 / .14);
  --crx-glass: rgb(16 18 28 / .74);
  color-scheme: dark;
}
body.page-crx { background: var(--crx-ink); }
.page-crx .container { position: relative; z-index: 1; }

/* ── ATMOSPHERE ─────────────────────────────────────────────────────────────
   Three fixed layers, one transform write per frame regardless of page length. */
.crxSky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.crxSky > * { position: absolute; inset: -25% -10%; will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
.crxSky__aurora {
  background:
    radial-gradient(40% 36% at 12% 16%, hsl(265 85% 55% / .26), transparent 66%),
    radial-gradient(36% 32% at 86% 14%, hsl(25 90% 55% / .18), transparent 64%),
    radial-gradient(44% 40% at 72% 80%, hsl(190 85% 50% / .18), transparent 68%);
  filter: blur(64px);
  animation: crxDrift 26s ease-in-out infinite alternate;
}
@keyframes crxDrift { to { background-position: 5% -4%, -4% 5%, -5% -5%; filter: blur(80px); } }
.crxSky__grid {
  inset: 48% -60% -34% -60%;
  background-image:
    linear-gradient(rgb(190 200 230 / .1) 1px, transparent 1px),
    linear-gradient(90deg, rgb(190 200 230 / .1) 1px, transparent 1px);
  background-size: 74px 74px;
  transform: translate3d(0, var(--py, 0px), 0) perspective(300px) rotateX(63deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(to bottom, black, transparent 64%);
}
.crxSky__motes {
  background-image:
    radial-gradient(1.7px 1.7px at 14% 22%, rgb(255 255 255 / .5), transparent),
    radial-gradient(1.5px 1.5px at 70% 16%, hsl(265 85% 80% / .55), transparent),
    radial-gradient(2px 2px at 44% 74%, hsl(25 90% 72% / .5), transparent),
    radial-gradient(1.5px 1.5px at 88% 58%, rgb(255 255 255 / .35), transparent),
    radial-gradient(1.6px 1.6px at 26% 56%, hsl(190 85% 78% / .45), transparent);
}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.crxBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7ch;
  padding: .9rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .3s, background .3s;
}
.crxBtn--sm { padding: .55rem 1.1rem; }
.crxBtn--primary {
  background: linear-gradient(120deg, var(--y-yellow), hsl(25 95% 62%));
  color: #17130a; font-weight: 600;
  box-shadow: 0 12px 36px -14px hsl(35 95% 55% / .9);
}
.crxBtn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 46px -14px hsl(35 95% 55% / 1); }
.crxBtn--ghost {
  border-color: var(--crx-line); color: var(--text-hi);
  background: rgb(255 255 255 / .04); backdrop-filter: blur(8px);
}
.crxBtn--ghost:hover { border-color: hsl(35 90% 62% / .6); transform: translateY(-2px); background: rgb(255 255 255 / .07); }
.crxBtn__play {
  width: 0; height: 0; flex: none;
  border-left: 8px solid var(--y-yellow);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE HERO
   ══════════════════════════════════════════════════════════════════════════ */
.crxHero {
  position: relative; z-index: 1; isolation: isolate;
  padding-block: clamp(var(--s-6), 3vw, var(--s-10)) clamp(var(--s-10), 6vw, var(--s-20));
  overflow: hidden;
}

/* ── THE POSTER WALL ────────────────────────────────────────────────────────
   Three columns, yawed away from the viewer and scrolling at three speeds.
   The runs are printed twice in the markup so the loop has no seam, and the
   whole wall is masked out behind the copy — otherwise the headline is sitting
   on top of eleven busy photographs and neither wins. */
.crxWall {
  position: absolute; inset: -12% -4% -20%; z-index: -1;
  display: flex; justify-content: flex-end; gap: clamp(.6rem, 1.4vw, 1.2rem);
  perspective: 1400px; perspective-origin: 80% 40%;
  pointer-events: none;
}
.crxWall__col {
  width: clamp(9rem, 15vw, 15rem); flex: none;
  transform: rotateY(-18deg) rotateX(4deg) rotateZ(calc(var(--c) * .6deg - .6deg));
  transform-style: preserve-3d;
}
.crxWall__run {
  display: grid; gap: clamp(.6rem, 1.4vw, 1.2rem);
  /* --py is the scroll parallax; the marquee runs on its own clock so the wall
     is alive even before anyone scrolls. Different durations per column are
     what stop the three reading as one sheet. */
  transform: translate3d(0, var(--py, 0px), 0);
  animation: crxRun linear infinite;
  animation-duration: calc(64s + var(--c) * 16s);
  animation-direction: var(--dir, normal);
}
.crxWall__col:nth-child(2) .crxWall__run { --dir: reverse; }
@keyframes crxRun { to { translate: 0 -50%; } }
.crxWall__card {
  margin: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid rgb(255 255 255 / .09);
  box-shadow: 0 20px 50px -26px #000;
}
.crxWall__card img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
/* The wall is atmosphere, not content: it is dimmed hard and faded out under
   the copy so the type never has to fight a photograph for contrast. */
.crxWall__fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--crx-ink) 34%, rgb(7 7 12 / .82) 56%, rgb(7 7 12 / .55)),
    linear-gradient(to bottom, var(--crx-ink), transparent 22% 72%, var(--crx-ink));
}

.crxHero__in {
  display: grid; align-items: center; gap: clamp(var(--s-6), 4vw, var(--s-12));
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: clamp(26rem, 46vw, 34rem);
}
.crxHero__copy { max-width: 40rem; }
.crxHero__k {
  display: inline-flex; align-items: center; gap: .7ch; margin: 0 0 var(--s-3);
  font-family: var(--font-mono); font-size: .62rem; color: var(--y-yellow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.crxHero__dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: hsl(150 80% 55%);
  box-shadow: 0 0 0 0 hsl(150 80% 55% / .6); animation: crxPulse 2.4s ease-out infinite;
}
@keyframes crxPulse { 70%, 100% { box-shadow: 0 0 0 .7rem hsl(150 80% 55% / 0); } }
.crxHero__h1 {
  margin: 0 0 var(--s-4);
  font-size: clamp(2rem, 1.05rem + 3.1vw, 3.4rem);
  line-height: 1.05; letter-spacing: -.035em; color: #fff;
}
.crxHero__accent {
  background: linear-gradient(100deg, var(--y-yellow), hsl(25 95% 66%) 55%, hsl(320 85% 72%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.crxHero__sub { margin: 0; max-width: 52ch; color: var(--text-mid); font-size: var(--fs-body); line-height: 1.6; }

.crxHero__stats {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-3) clamp(var(--s-5), 3vw, var(--s-8));
}
.crxHero__stats li { display: grid; gap: 1px; }
.crxHero__stats b {
  font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.crxHero__stats span {
  font-family: var(--font-mono); font-size: .55rem; color: var(--text-lo);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.crxHero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ── YUNA ───────────────────────────────────────────────────────────────── */
.crxGuide {
  position: relative; display: block; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; text-align: left;
  width: clamp(10rem, 16vw, 14rem);
}
.crxGuide__plate {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: 16px;
  border: 1px solid hsl(35 90% 62% / .35);
  background: rgb(12 12 20 / .6);
  box-shadow: 0 26px 60px -26px #000;
  transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .4s;
}
.crxGuide:hover .crxGuide__plate, .crxGuide:focus-visible .crxGuide__plate {
  transform: translateY(-4px);
  border-color: hsl(35 95% 68% / .95);
  box-shadow: 0 0 0 1px hsl(35 95% 62% / .3), 0 34px 74px -24px hsl(35 90% 40% / .7);
}
.crxGuide:focus-visible { outline: 2px solid var(--y-yellow); outline-offset: 6px; border-radius: 18px; }
.crxGuide__plate img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  filter: saturate(.95) brightness(.92);
  transition: transform 1s cubic-bezier(.22,1,.36,1), filter .5s;
}
.crxGuide:hover .crxGuide__plate img { transform: scale(1.05); filter: saturate(1.05) brightness(1); }
.crxGuide__scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .05) 0 1px, transparent 1px 4px);
}
.crxGuide__live {
  position: absolute; left: .6rem; top: .6rem; z-index: 2;
  padding: .16rem .5rem .16rem 1.1rem; border-radius: 999px;
  background: rgb(6 6 12 / .82); border: 1px solid hsl(150 80% 55% / .5);
  background-image: radial-gradient(circle at .55rem 50%, hsl(150 85% 58%) 2.2px, transparent 2.4px);
  font-family: var(--font-mono); font-size: .5rem; letter-spacing: .16em; color: hsl(150 80% 70%);
}
/* Bottom-right, not centred: centred it sits on her mouth, which on a card
   whose whole subject is a face is the one place it cannot go. */
.crxGuide__play {
  position: absolute; right: .7rem; bottom: 3.4rem; z-index: 2;
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: rgb(8 8 14 / .68); border: 1px solid hsl(35 95% 70% / .8);
  backdrop-filter: blur(6px);
  animation: crxRipple 2.8s ease-out infinite;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.crxGuide__play::after {
  content: ''; margin-left: 3px;
  border-left: 10px solid var(--y-yellow);
  border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent;
}
.crxGuide:hover .crxGuide__play { transform: scale(1.1); }
@keyframes crxRipple { 70%, 100% { box-shadow: 0 0 0 1.2rem hsl(35 95% 60% / 0); } }
.crxGuide__foot {
  position: absolute; inset: auto 0 0; z-index: 2;
  display: grid; gap: 1px; padding: 1.6rem .8rem .7rem;
  background: linear-gradient(transparent, rgb(6 6 12 / .92) 55%);
}
.crxGuide__foot b { font-size: var(--fs-sm); color: #fff; }
.crxGuide__foot i {
  font-style: normal; font-family: var(--font-mono); font-size: .5rem;
  color: var(--y-yellow); letter-spacing: .1em; text-transform: uppercase;
}
.crxGuide__say {
  position: absolute; right: calc(100% + .7rem); top: .4rem; z-index: 3;
  width: max-content; max-width: 12rem;
  padding: .55rem .8rem; border-radius: 12px 12px 2px 12px;
  border: 1px solid hsl(35 90% 62% / .4);
  background: rgb(14 14 22 / .96); backdrop-filter: blur(8px);
  font-size: .78rem; line-height: 1.35; color: var(--text-hi);
  box-shadow: 0 14px 34px -16px #000;
  animation: crxSay 5.5s ease-in-out 1.2s infinite;
}
.crxGuide__say::after {
  content: ''; position: absolute; right: -5px; bottom: 8px;
  width: 9px; height: 9px; rotate: 45deg;
  background: rgb(14 14 22 / .96);
  border-right: 1px solid hsl(35 90% 62% / .4); border-bottom: 1px solid hsl(35 90% 62% / .4);
}
@keyframes crxSay { 0%, 88%, 100% { transform: translateY(0); } 94% { transform: translateY(-4px); } }

/* ── SECTION FURNITURE ──────────────────────────────────────────────────── */
.crxSection { position: relative; z-index: 1; padding-block: clamp(var(--s-10), 6vw, var(--s-20)); }
.crxSection--alt { background: linear-gradient(180deg, transparent, rgb(12 14 24 / .7) 12% 88%, transparent); }
.crxHead { max-width: 44rem; margin: 0 auto clamp(var(--s-7), 3.5vw, var(--s-10)); text-align: center; }
.crxHead__k {
  margin: 0 0 var(--s-3); font-family: var(--font-mono); font-size: .6rem;
  color: var(--y-yellow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.crxHead h2 { margin: 0 0 var(--s-3); font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.8rem); letter-spacing: -.03em; color: #fff; }
.crxHead p { margin: 0; color: var(--text-mid); }
.crxHead__a {
  background: linear-gradient(100deg, var(--y-yellow), hsl(25 95% 68%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── TRACK PILLS ────────────────────────────────────────────────────────── */
.crxPills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
  margin-bottom: clamp(var(--s-6), 3vw, var(--s-8));
}
.crxPill {
  display: inline-flex; align-items: center; gap: .6ch;
  padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--crx-line); background: rgb(255 255 255 / .03);
  color: var(--text-mid); font-size: var(--fs-sm); text-decoration: none;
  transition: border-color .3s, color .3s, background .3s, transform .3s;
  --h: 40;
}
.crxPill span {
  font-family: var(--font-mono); font-size: .58rem; color: var(--text-lo);
  padding: .1rem .35rem; border-radius: 5px; background: rgb(255 255 255 / .06);
}
.crxPill:hover { transform: translateY(-2px); border-color: hsl(var(--h) 85% 62% / .6); color: var(--text-hi); }
.crxPill.is-on {
  border-color: hsl(var(--h) 90% 62% / .8); color: #fff;
  background: hsl(var(--h) 85% 55% / .14);
}
.crxPill.is-on span { background: hsl(var(--h) 85% 55% / .25); color: hsl(var(--h) 90% 82%); }

/* ══════════════════════════════════════════════════════════════════════════
   THE CARDS
   ══════════════════════════════════════════════════════════════════════════
   The whole card is a link (via a stretched hit area) so any part of it is
   clickable, while the poster, body and price still sit at different Z and
   parallax against one another when the card tilts. */
.crxGrid {
  display: grid; gap: clamp(var(--s-4), 2vw, var(--s-6));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  perspective: 1600px;
}
.crxCard {
  position: relative; display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--crx-line);
  background: linear-gradient(168deg, hsl(var(--h) 70% 55% / .1), transparent 56%), var(--crx-glass);
  backdrop-filter: blur(12px);
  transform-style: preserve-3d;
  /* --p is the rise progress (0 → 1) written by the observer; --tx/--ty are
     the pointer tilt. Composed here so neither can clobber the other. */
  transform:
    perspective(1200px)
    translateY(calc((1 - var(--p, 1)) * 42px))
    rotateX(calc((1 - var(--p, 1)) * 14deg + var(--tx, 0deg)))
    rotateY(var(--ty, 0deg));
  opacity: calc(.15 + var(--p, 1) * .85);
  transition: opacity .6s ease, box-shadow .4s, border-color .3s,
              transform .5s cubic-bezier(.22,1,.36,1);
}
.crxCard:hover {
  border-color: hsl(var(--h) 88% 62% / .7);
  box-shadow: 0 0 0 1px hsl(var(--h) 88% 62% / .3), 0 34px 76px -28px hsl(var(--h) 85% 30% / .95);
}
/* The stretched hit area. A whole-card <a> wrapping headings would put a
   heading inside a link on every card; this keeps the markup honest and still
   makes the entire surface clickable. */
.crxCard__hit { position: absolute; inset: 0; z-index: 4; }
.crxCard:focus-within { outline: 2px solid hsl(var(--h) 90% 65%); outline-offset: 3px; }

.crxCard__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.crxCard__art picture, .crxCard__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.crxCard__art img {
  filter: saturate(.92) brightness(.82);
  transform: scale(1.02);
  transition: transform 1s cubic-bezier(.22,1,.36,1), filter .5s;
}
.crxCard:hover .crxCard__art img { transform: scale(1.08); filter: saturate(1.05) brightness(.95); }
.crxCard__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgb(10 10 16 / .95) 4%, transparent 46%),
    radial-gradient(80% 70% at 12% 100%, hsl(var(--h) 85% 45% / .45), transparent 66%);
}
.crxCard__none {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-size: 3.6rem;
  color: hsl(var(--h) 85% 70% / .55);
  background: linear-gradient(150deg, hsl(var(--h) 70% 40% / .3), transparent);
}
.crxCard__track, .crxCard__save {
  position: absolute; z-index: 2; padding: .22rem .6rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: .55rem;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.crxCard__track {
  left: .7rem; top: .7rem;
  border: 1px solid hsl(var(--h) 85% 62% / .5); background: rgb(6 6 12 / .7);
  color: hsl(var(--h) 90% 80%);
}
.crxCard__save {
  right: .7rem; top: .7rem;
  border: 1px solid hsl(150 80% 55% / .5); background: hsl(150 70% 22% / .85);
  color: hsl(150 85% 78%);
}

.crxCard__body {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); flex: 1;
  transform: translateZ(1px);   /* keeps the text above the poster when tilted */
}
.crxCard__name { margin: 0; font-size: var(--fs-lg); line-height: 1.25; color: #fff; text-wrap: balance; }
.crxCard__blurb { margin: 0; color: var(--text-mid); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.crxCard__who {
  display: flex; gap: .7ch; margin: var(--s-1) 0 0;
  font-size: .78rem; color: hsl(var(--h) 85% 78%); line-height: var(--lh-snug);
}
.crxCard__who span { font-size: .5rem; line-height: 1.9; }
.crxCard__meta {
  list-style: none; margin: auto 0 0; padding: var(--s-4) 0 0;
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  border-top: 1px solid var(--crx-line);
  font-size: .72rem; color: var(--text-lo);
}
.crxCard__meta b { color: var(--text-hi); font-variant-numeric: tabular-nums; }
.crxCard__lvl {
  padding: .06rem .5rem; border-radius: 999px;
  background: rgb(255 255 255 / .06); color: var(--text-mid);
}
.crxCard__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding-top: var(--s-3);
}
.crxCard__price b {
  font-family: var(--font-display); font-size: 1.25rem; color: #fff;
  font-variant-numeric: tabular-nums;
}
.crxCard__price s { margin-left: .5ch; font-size: .78rem; color: var(--text-lo); }
.crxCard__go { font-size: var(--fs-sm); color: hsl(var(--h) 90% 78%); white-space: nowrap; }
.crxCard__go i { font-style: normal; display: inline-block; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.crxCard:hover .crxCard__go i { transform: translateX(5px); }

.crxEmpty { text-align: center; color: var(--text-mid); }

/* ── THE ROUTE ──────────────────────────────────────────────────────────── */
.crxSteps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; gap: var(--s-5); grid-template-columns: repeat(4, minmax(0, 1fr));
}
.crxSteps::before {
  content: ''; position: absolute; left: 0; right: 0; top: 1.5rem; height: 1px;
  background: linear-gradient(90deg, var(--y-yellow), hsl(25 90% 60%), hsl(320 85% 65%), transparent);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  transition: transform 1.5s cubic-bezier(.22,1,.36,1);
}
.crxStep { animation: crxRise .6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes crxRise { from { opacity: 0; transform: translateY(22px); } }
.crxStep__n {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; border: 1px solid hsl(35 90% 60% / .45);
  background: var(--crx-ink);
  box-shadow: 0 0 0 6px hsl(35 90% 55% / .07);
  font-family: var(--font-display); color: var(--y-yellow);
}
.crxStep h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-h3); color: #fff; }
.crxStep p { margin: 0; color: var(--text-mid); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* ── WHY US ─────────────────────────────────────────────────────────────── */
.crxWhy {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  perspective: 1200px;
}
.crxWhy__card {
  padding: var(--s-6); border-radius: 16px;
  border: 1px solid var(--crx-line); background: var(--crx-glass);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .4s;
  animation: crxRise .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i) * 90ms);
}
.crxWhy__card:hover { border-color: hsl(35 90% 62% / .55); box-shadow: 0 26px 60px -26px #000; }
.crxWhy__n { font-family: var(--font-mono); font-size: .7rem; color: var(--y-yellow); letter-spacing: var(--tracking-eyebrow); }
.crxWhy__card h3 { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-lg); color: #fff; }
.crxWhy__card p { margin: 0 0 var(--s-4); color: var(--text-mid); font-size: var(--fs-sm); line-height: var(--lh-body); }
.crxWhy__card a { font-size: var(--fs-sm); color: var(--y-yellow); }

/* ── CLOSING ────────────────────────────────────────────────────────────── */
.crxClose { position: relative; z-index: 1; padding-block: clamp(var(--s-12), 7vw, var(--s-24)); text-align: center; }
.crxClose__in { max-width: 44rem; margin-inline: auto; }
.crxClose h2 { margin: 0 0 var(--s-4); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.9rem); letter-spacing: -.03em; color: #fff; }
.crxClose p { margin: 0 auto; max-width: 46ch; color: var(--text-mid); }
.crxClose .crxHero__cta { justify-content: center; margin-top: var(--s-7); }

/* ══════════════════════════════════════════════════════════════════════════
   THE WALKTHROUGH
   ══════════════════════════════════════════════════════════════════════════
   The veil is TRANSPARENT while the reticle is up: the reticle dims the page
   itself with a box-shadow spread wide enough to cover any viewport, and the
   lit rectangle is the shadow's hole. Painting a veil underneath as well means
   the hole reveals the veil rather than the card. */
.crxBrief { position: fixed; inset: 0; z-index: 900; }
.crxBrief[hidden] { display: none; }
.crxBrief__veil { position: absolute; inset: 0; background: transparent; animation: crxFade .4s ease both; }
.crxBrief.is-blind .crxBrief__veil { background: rgb(4 4 9 / .82); backdrop-filter: blur(3px); }
@keyframes crxFade { from { opacity: 0; } }

.crxBrief__ring {
  position: absolute; border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 100vmax rgb(4 4 9 / .82);
  border: 1px solid hsl(35 95% 65% / .8);
  /* NO transition by default. The reticle is re-measured every frame while
     the page scrolls, and an eased position means it is permanently chasing
     the card instead of sitting on it — during a beat change it lagged far
     enough behind to be drawn around empty space. The ease is added back
     for the half-second it takes to move BETWEEN targets, which is the only
     time it is wanted. */
  transition: none;
}
.crxBrief__ring.is-moving {
  transition: left .5s cubic-bezier(.22,1,.36,1), top .5s cubic-bezier(.22,1,.36,1),
              width .5s cubic-bezier(.22,1,.36,1), height .5s cubic-bezier(.22,1,.36,1);
}
.crxBrief__ring[hidden] { display: none; }
.crxBrief__corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--y-yellow); }
.crxBrief__corner--tl { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.crxBrief__corner--tr { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.crxBrief__corner--bl { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.crxBrief__corner--br { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

.crxBrief__stage {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end;
  padding: 0 clamp(var(--s-4), 3vw, var(--s-10)) clamp(var(--s-4), 2.5vw, var(--s-8));
  max-width: 78rem; margin-inline: auto; pointer-events: none;
}
.crxBrief__stage > * { pointer-events: auto; }
.crxBrief__char {
  position: relative; margin: 0 -2.5rem 0 0; width: clamp(8rem, 13vw, 13rem);
  animation: crxEnter .55s cubic-bezier(.22,1,.36,1) both;
  filter: drop-shadow(0 18px 40px rgb(0 0 0 / .7));
}
@keyframes crxEnter { from { opacity: 0; transform: translate(-24px, 18px); } }
.crxBrief__char img {
  display: block; width: 100%; height: auto; border-radius: 14px 14px 0 0;
  mask-image: linear-gradient(to bottom, black 84%, transparent);
}
.crxBrief__char::before {
  content: ''; position: absolute; inset: 0;
  border: 1px solid hsl(35 90% 62% / .45); border-bottom: 0; border-radius: 14px 14px 0 0;
  mask-image: linear-gradient(to bottom, black 62%, transparent);
}
.crxBrief__halo {
  position: absolute; inset: 8% -18% -6%;
  background: radial-gradient(50% 55% at 50% 55%, hsl(35 90% 55% / .34), transparent 70%);
  filter: blur(26px); z-index: -1;
}
.crxBrief__box {
  position: relative; align-self: end;
  border-radius: 16px; border: 1px solid hsl(35 90% 60% / .32);
  background: linear-gradient(150deg, rgb(16 16 26 / .97), rgb(8 8 14 / .97));
  backdrop-filter: blur(16px);
  box-shadow: 0 -6px 60px -18px hsl(35 95% 50% / .4), 0 30px 70px -30px #000;
  padding: var(--s-4) clamp(var(--s-5), 2.4vw, var(--s-7));
  animation: crxBox .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes crxBox { from { opacity: 0; transform: translateY(20px); } }
.crxBrief__box::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--y-yellow), transparent);
}
.crxBrief__meta { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.crxBrief__avatar {
  display: block; width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: 50%; overflow: hidden; border: 1px solid hsl(35 90% 62% / .6);
  box-shadow: 0 0 0 3px hsl(35 90% 55% / .12);
}
.crxBrief__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crxBrief__id { display: grid; gap: 1px; min-width: 0; }
.crxBrief__id b { font-size: var(--fs-sm); color: #fff; }
.crxBrief__id i {
  font-style: normal; font-family: var(--font-mono); font-size: .56rem;
  color: var(--y-yellow); letter-spacing: .08em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crxBrief__count { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; color: var(--text-lo); }
.crxBrief__count b { color: var(--y-yellow); }
/* min-height stops the box resizing between a one-line beat and a three-line
   one, which on a fourteen-beat tour is fourteen small jolts. Kept as tight as
   the longest pitch allows, because every pixel here is a pixel of the course
   card behind it. */
.crxBrief__text { margin: 0 0 var(--s-3); min-height: 3.6em; color: var(--text-hi); font-size: var(--fs-body); line-height: 1.5; }
.crxBrief__text::after { content: '▍'; color: var(--y-yellow); opacity: 0; }
.crxBrief.is-typing .crxBrief__text::after { opacity: 1; animation: crxBlink .8s steps(1) infinite; }
@keyframes crxBlink { 50% { opacity: 0; } }
.crxBrief__bar { height: 2px; border-radius: 2px; background: rgb(255 255 255 / .1); overflow: hidden; }
.crxBrief__bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--y-yellow), hsl(25 95% 62%));
  transition: width .35s ease;
}
.crxBrief__acts { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.crxBrief__nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.crxBrief__skip, .crxBrief__back {
  border: 0; background: none; font: inherit; font-size: var(--fs-sm);
  color: var(--text-lo); cursor: pointer; padding: .4rem 0; transition: color .25s;
}
.crxBrief__skip:hover, .crxBrief__back:hover { color: var(--text-hi); }
/* The way IN, offered at the moment somebody is interested rather than after
   the tour has ended and they have to remember the name. */
.crxBrief__open {
  font-size: var(--fs-sm); color: var(--y-yellow); text-decoration: none;
  border-bottom: 1px solid hsl(35 90% 60% / .4); padding-bottom: 1px;
}
.crxBrief__open[hidden] { display: none; }
.crxBrief__caret {
  width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}

.crxReplay {
  position: fixed; right: clamp(.8rem, 2vw, 1.4rem); bottom: clamp(.8rem, 2vw, 1.4rem);
  z-index: 800;
  display: inline-flex; align-items: center; gap: .7ch;
  padding: .4rem 1rem .4rem .4rem; border-radius: 999px;
  border: 1px solid hsl(35 90% 60% / .4);
  background: rgb(10 10 18 / .92); backdrop-filter: blur(10px);
  color: var(--text-hi); font: inherit; font-size: var(--fs-sm); cursor: pointer;
  box-shadow: 0 12px 34px -14px #000;
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s;
}
.crxReplay:hover { transform: translateY(-2px); border-color: hsl(35 95% 65% / .95); }
.crxReplay__face { width: 2rem; height: 2rem; border-radius: 50%; overflow: hidden; flex: none; }
.crxReplay__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crxBrief:not([hidden]) ~ .crxReplay { opacity: 0; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 72rem) {
  .crxGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crxWhy  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crxSteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crxSteps::before { display: none; }

  /* Yuna turns from a column into a bar. A portrait beside the copy here would
     take a third of the screen; dropping her entirely loses the one thing that
     says the walkthrough exists. */
  .crxHero__in { grid-template-columns: 1fr; min-height: 0; }
  .crxHero__copy { max-width: none; }
  .crxGuide { width: 100%; }
  .crxGuide__plate {
    display: flex; align-items: center; gap: var(--s-4);
    aspect-ratio: auto; padding: var(--s-3); border-radius: 999px;
  }
  .crxGuide__plate img { width: 3.2rem; height: 3.2rem; flex: none; border-radius: 50%; object-position: 50% 8%; }
  .crxGuide__scan, .crxGuide__live { display: none; }
  .crxGuide__play {
    position: static; order: 3; margin-left: auto;
    width: 2.2rem; height: 2.2rem; animation: none;
  }
  .crxGuide__play::after { border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; }
  .crxGuide__foot { position: static; padding: 0; background: none; }
  .crxGuide__say {
    position: static; max-width: none; width: auto; order: 2;
    padding: 0; border: 0; background: none; box-shadow: none; animation: none;
    font-size: var(--fs-sm); color: var(--text-mid);
  }
  .crxGuide__say::after { display: none; }
  .crxGuide:hover .crxGuide__plate, .crxGuide:hover .crxGuide__plate img { transform: none; }

  /* Two columns of poster wall instead of three, pulled further off-canvas so
     the copy still sits on near-solid ink. */
  .crxWall__col:nth-child(3) { display: none; }
}
@media (max-width: 52rem) {
  /* The wall is atmosphere. On a phone it is atmosphere competing with the
     only column of text there is, so it goes — and takes eleven image decodes
     off the critical path of the smallest device. */
  .crxWall { display: none; }
  .crxBrief__stage { grid-template-columns: 1fr; padding-inline: var(--s-3); }
  .crxBrief__char {
    position: absolute; right: var(--s-3); bottom: 100%; margin: 0 0 -2.5rem;
    width: 6.5rem; z-index: -1;
  }
  .crxBrief__text { font-size: var(--fs-sm); min-height: 6em; }
  .crxBrief__box { padding: var(--s-4); }
  .crxReplay__t { display: none; }
  .crxReplay { padding: .4rem; }
}
@media (max-width: 46rem) {
  .crxGrid { grid-template-columns: 1fr; }
  .crxWhy  { grid-template-columns: 1fr; }
  .crxSteps { grid-template-columns: 1fr; }
  .crxHero__cta { display: grid; }
  .crxHero__cta .crxBtn { width: 100%; }
}
/* A landscape phone cannot afford the portrait at all — it would cover the
   card being pointed at. */
@media (max-height: 34rem) {
  .crxBrief__char { display: none; }
  .crxBrief__text { min-height: 0; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────────────
   With motion off this is a heading, eleven course links with their real
   prices and curricula, four steps and a call to action — which is the whole
   page. Note the card opacity has to be forced back to 1: it is driven by --p,
   which nothing will be writing. */
@media (prefers-reduced-motion: reduce) {
  .crxSky > *, .crxWall__run { transform: none; animation: none; }
  .crxCard, .crxStep, .crxWhy__card, .crxBrief__char, .crxBrief__box, .crxBrief__veil { animation: none; }
  .crxCard { transform: none; opacity: 1; }
  .crxCard, .crxCard__art img, .crxWhy__card, .crxGuide__plate, .crxGuide__plate img,
  .crxBrief__ring, .crxBtn, .crxPill, .crxCard__go i { transition: none; }
  .crxGuide__play, .crxGuide__say, .crxHero__dot, .crxBrief__text::after { animation: none; }
  .crxSteps::before { transform: scaleX(1); transition: none; }
}