/* ==========================================================================
   students.css — /students/ and /students/sample/
   ==========================================================================
   Layers on notes-picker.css for the tour and replay button, so the student
   journey looks like one product end to end.

   THE MARKS ARE CSS, THE SCENES ARE PHOTOGRAPHS. Five pillar marks drawn with
   masks and gradients — no image request, they inherit the accent colour, and
   they cannot be the thing that fails to load on a phone connection the night
   before an exam. The photographs carry the warmth the marks cannot, and are
   lazy WebP so they cost nothing until they are near the viewport.

   Hue custom properties are named after the pillar KEYS (--c-notes,
   --c-courses, …) so the markup can write `--h: var(--c-<?= $key ?>)` and the
   two can never drift apart.
   ========================================================================== */

.page-stu {
  --pk-line: rgb(255 255 255 / .1);
  --pk-card: rgb(255 255 255 / .04);
  --pk-pane: rgb(18 18 22 / .96);
  --pk-veil: rgb(6 6 8 / .74);
  /* One hue per pillar, so a tile is recognisable before it is read. */
  --c-notes:   40;
  --c-courses: 265;
  --c-quiz:    150;
  --c-cards:   320;
  --c-events:  200;
}
.theme-light .page-stu {
  --pk-line: rgb(15 18 26 / .13);
  --pk-card: rgb(15 18 26 / .03);
  --pk-pane: rgb(255 255 255 / .97);
  --pk-veil: rgb(20 22 30 / .55);
}
.page-stu .section, .stuHero { position: relative; z-index: 1; }
.page-stu .stuSection { padding-block: clamp(var(--s-10), 6vw, var(--s-16)); }
.page-stu .stuSection + .stuSection:not(.section--alt) { border-top: 1px solid var(--pk-line); }

/* ── PARALLAX SKY ───────────────────────────────────────────────────────────
   Four fixed layers at four rates. Fixed rather than absolute so they cost one
   transform write per frame regardless of page length. */
.stuSky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.stuSky > * { position: absolute; inset: -20%; will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }
.stuSky__l {
  background:
    radial-gradient(38% 42% at 18% 24%, hsl(var(--c-notes) 90% 60% / .16), transparent 62%),
    radial-gradient(34% 38% at 82% 20%, hsl(var(--c-courses) 85% 65% / .14), transparent 64%),
    radial-gradient(42% 40% at 60% 82%, hsl(var(--c-quiz) 70% 55% / .12), transparent 66%);
  filter: blur(40px);
}
.stuSky__g {
  inset: 40% -50% -30% -50%;
  background-image:
    linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: translate3d(0, var(--py, 0px), 0) perspective(340px) rotateX(58deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
.stuSky__m {
  background-image:
    radial-gradient(1.6px 1.6px at 14% 20%, rgb(255 255 255 / .5), transparent),
    radial-gradient(1.6px 1.6px at 70% 16%, rgb(255 255 255 / .4), transparent),
    radial-gradient(2px 2px   at 44% 74%, hsl(var(--c-notes) 90% 65% / .55), transparent),
    radial-gradient(1.6px 1.6px at 88% 60%, rgb(255 255 255 / .35), transparent),
    radial-gradient(1.6px 1.6px at 26% 56%, rgb(255 255 255 / .3), transparent);
}
/* The fastest layer — a few bright motes that visibly outrun the page. */
.stuSky__b {
  background-image:
    radial-gradient(2.4px 2.4px at 8% 66%, hsl(var(--c-cards) 85% 70% / .5), transparent),
    radial-gradient(2.4px 2.4px at 92% 34%, hsl(var(--c-events) 85% 70% / .45), transparent),
    radial-gradient(2px 2px at 56% 12%, hsl(var(--c-courses) 85% 72% / .45), transparent);
}

/* ── PILLAR MARKS (pure CSS) ────────────────────────────────────────────── */
.stuArt {
  display: block; width: 1.5rem; height: 1.5rem;
  background: currentColor;
  mask-repeat: no-repeat; mask-size: contain; mask-position: center;
}
.stuArt--lg { width: 2.2rem; height: 2.2rem; }
.stuArt--papers { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M7 3h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); }
.stuArt--play   { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='2' y='4' width='20' height='14' rx='2'/%3E%3Cpath d='M10 8.5v5l4.5-2.5z' fill='black'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E"); }
.stuArt--target { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='black'/%3E%3C/svg%3E"); }
.stuArt--trophy { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 5H4v2a3 3 0 0 0 3 3M17 5h3v2a3 3 0 0 1-3 3M12 14v4M9 21h6'/%3E%3C/svg%3E"); }
/* Two offset rectangles — a deck of cards, legible at 1.5rem. */
.stuArt--cards  { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='6' width='12' height='15' rx='2'/%3E%3Cpath d='M8 3h11a2 2 0 0 1 2 2v12'/%3E%3C/svg%3E"); }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.stuHero { padding-block: clamp(var(--s-8), 6vw, var(--s-16)) clamp(var(--s-8), 4vw, var(--s-12)); }
.stuHero__top { max-width: 44rem; margin-bottom: clamp(var(--s-7), 3.5vw, var(--s-10)); }
.stuHero__h1 {
  font-size: clamp(2.4rem, 1.2rem + 5vw, 4.4rem);
  line-height: 1.02; letter-spacing: -.035em; margin: var(--s-3) 0 var(--s-4);
}
.stuHero__h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.stuHero__h1 .w > i {
  display: inline-block; font-style: inherit; transform: translateY(105%);
  animation: pkUp .8s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--wi, 0) * 60ms);
}
.stuHero__sub { color: var(--text-mid); font-size: var(--fs-lg); max-width: 34ch; margin: 0; }

/* The only button in the hero, and it starts the tour rather than duplicating
   a link that is already a tile six inches below it. */
.stuHero__tour {
  display: inline-flex; align-items: center; gap: .7ch;
  margin-top: var(--s-6); padding: .5rem 1rem .5rem .7rem;
  border-radius: 999px; border: 1px solid var(--pk-line);
  background: var(--pk-card); color: var(--text-mid);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  transition: border-color .3s, color .3s, transform .3s;
}
.stuHero__tour:hover { border-color: rgb(240 198 74 / .5); color: var(--text-hi); transform: translateY(-2px); }
.stuHero__tourDot {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--y-yellow);
  box-shadow: 0 0 0 4px rgb(240 198 74 / .16);
  animation: stuBlip 2.4s ease-in-out infinite;
}
@keyframes stuBlip { 50% { box-shadow: 0 0 0 8px rgb(240 198 74 / 0); } }

/* ── THE GATEWAY ────────────────────────────────────────────────────────────
   Two large tiles and a rail of three. The proportions are the argument: the
   two things people arrive for get a photograph and a third of the width
   each, and the other three get a compact strip. */
.stuGate {
  display: grid; gap: clamp(var(--s-3), 1.6vw, var(--s-5));
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .82fr);
  perspective: 1600px;
}
.stuGate__rail {
  display: grid; gap: clamp(var(--s-3), 1.4vw, var(--s-4)); align-content: stretch;
  transform: translate3d(0, var(--py, 0px), 0);
}

.stuTile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--pk-line);
  background: linear-gradient(165deg, rgb(255 255 255 / .06), rgb(255 255 255 / .015) 62%), var(--surface-1);
  text-decoration: none; color: inherit;
  /* --py is the scroll parallax written by JS, --tx/--ty the pointer tilt.
     Three sources composed in one declaration so none of them can clobber
     another the way a JS-written `transform` would. */
  transform: translate3d(0, var(--py, 0px), 0) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transform-style: preserve-3d;
  transition: border-color .35s, box-shadow .45s, transform .35s cubic-bezier(.22,1,.36,1);
  animation: pkRise .7s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 90ms + .1s);
}
.theme-light .stuTile { background: linear-gradient(165deg, #fff, #f7f7f9 62%); }
.stuTile:hover, .stuTile:focus-visible {
  border-color: hsl(var(--h) 80% 62% / .55);
  box-shadow: 0 0 0 1px hsl(var(--h) 80% 62% / .3), 0 34px 74px -26px rgb(0 0 0 / .9);
}
.stuTile:focus-visible { outline: 2px solid hsl(var(--h) 85% 65%); outline-offset: 3px; }

/* ── large tile ── */
.stuTile--lg { min-height: clamp(19rem, 26vw, 25rem); }
.stuTile__ph { position: absolute; inset: 0; }
.stuTile__ph picture, .stuTile__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stuTile__ph img {
  filter: saturate(.72) contrast(1.05) brightness(.62);
  transform: scale(1.06);
  transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter .6s;
}
.stuTile--lg:hover .stuTile__ph img { transform: scale(1.13); filter: saturate(.95) contrast(1.05) brightness(.7); }
/* The scrim is the tile's own colour, so the photograph reads as part of the
   pillar rather than as a stock photo dropped behind it. */
.stuTile__glow {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgb(8 8 10 / .94) 12%, rgb(8 8 10 / .55) 48%, transparent 78%),
    radial-gradient(90% 70% at 20% 100%, hsl(var(--h) 85% 45% / .5), transparent 68%);
  transition: opacity .5s;
}
.stuTile--lg .stuTile__in {
  position: relative; z-index: 1;
  display: grid; align-content: end; gap: var(--s-2);
  height: 100%; padding: clamp(var(--s-5), 2.4vw, var(--s-7));
}
.stuTile__ico {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: var(--s-2);
  border-radius: 50%; border: 1px solid hsl(var(--h) 80% 62% / .45);
  background: radial-gradient(circle at 32% 28%, hsl(var(--h) 85% 58% / .3), rgb(10 10 12 / .6));
  color: hsl(var(--h) 90% 74%);
  backdrop-filter: blur(6px);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
}
.stuTile:hover .stuTile__ico { transform: translateZ(30px) scale(1.06); box-shadow: 0 0 0 6px hsl(var(--h) 80% 60% / .12); }
.stuTile__k {
  font-family: var(--font-mono); font-size: .6rem; color: hsl(var(--h) 85% 74%);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.stuTile__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.05;
  letter-spacing: -.025em; color: #fff;
}
.stuTile__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin-top: var(--s-2); }
.stuTile__stat { font-size: .68rem; color: rgb(255 255 255 / .6); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.stuTile__stat b {
  font-family: var(--font-display); font-size: 1.7rem; color: hsl(var(--h) 88% 74%);
  font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none;
}
.stuTile__sub { font-size: .72rem; color: rgb(255 255 255 / .5); }
.stuTile__go {
  display: inline-flex; align-items: center; gap: .5ch; margin-top: var(--s-3);
  font-size: var(--fs-sm); color: #fff;
}
.stuTile__go i { font-style: normal; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.stuTile:hover .stuTile__go i { transform: translateX(5px); }

/* ── small tile ──
   Icon, name, count, arrow. Nothing else fits and nothing else is needed —
   the row further down does the explaining. */
.stuTile--sm {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); min-height: 0;
}
.stuTile--sm .stuTile__ico { width: 2.7rem; height: 2.7rem; margin: 0; flex: none; }
.stuTile__txt { display: grid; gap: 2px; min-width: 0; }
.stuTile__txt b { font-size: var(--fs-base); color: var(--text-hi); }
.stuTile__txt i {
  font-style: normal; font-size: .7rem; color: var(--text-lo);
  font-variant-numeric: tabular-nums;
}
.stuTile__arrow {
  margin-left: auto; color: hsl(var(--h) 85% 70%); font-size: 1.1rem;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.stuTile--sm:hover .stuTile__arrow { transform: translateX(5px); }
/* A hairline of the tile's hue down the leading edge — enough to tell three
   otherwise identical strips apart at a glance. */
.stuTile--sm::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 2px;
  background: hsl(var(--h) 85% 62%); opacity: .55;
  transition: opacity .3s, top .35s, bottom .35s;
}
.stuTile--sm:hover::before { opacity: 1; top: 4%; bottom: 4%; }

@media (max-width: 74rem) {
  .stuGate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stuGate__rail { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .stuGate { grid-template-columns: 1fr; }
  .stuGate__rail { grid-template-columns: 1fr; }
  .stuTile--lg { min-height: 15rem; }
}

/* ── HEADINGS ───────────────────────────────────────────────────────────── */
.stuHead { text-align: center; max-width: 46rem; margin-inline: auto; }
.stuHead h2 { font-size: clamp(1.7rem, 1.1rem + 2.3vw, 2.7rem); letter-spacing: -.03em; margin: 0 0 var(--s-2); }
.stuHead .stuTube__k { justify-content: center; }

/* ── THE FIVE, EXPLAINED ────────────────────────────────────────────────────
   Alternating rows. The photograph sits in a 3D frame that drifts against the
   scroll, so the section has depth without a single extra element. */
/* The gap has to clear the badge, which hangs a full radius above its row —
   without the top margin the first photograph rides up into the section
   subheading. */
.stuRows {
  display: grid; gap: clamp(var(--s-10), 5.5vw, var(--s-16));
  margin-top: clamp(var(--s-8), 4.5vw, var(--s-12));
  perspective: 1400px;
}
.stuRow {
  display: grid; gap: clamp(var(--s-5), 3vw, var(--s-10));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
}
.stuRow:nth-child(even) .stuRow__art { order: 2; }

.stuRow__art { position: relative; }
.stuRow__frame {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--pk-line);
  aspect-ratio: 16 / 10;
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .9);
  transform: translate3d(0, var(--py, 0px), 0) rotateY(6deg) rotateX(2deg);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.stuRow:nth-child(even) .stuRow__frame { transform: translate3d(0, var(--py, 0px), 0) rotateY(-6deg) rotateX(2deg); }
.stuRow__frame:hover,
.stuRow:nth-child(even) .stuRow__frame:hover { transform: translate3d(0, var(--py, 0px), 0) rotateY(0deg) rotateX(0deg); }
.stuRow__frame picture, .stuRow__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stuRow__frame img {
  filter: saturate(.78) brightness(.78);
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter .6s;
}
.stuRow__frame:hover img { transform: scale(1.09); filter: saturate(1) brightness(.9); }
.stuRow__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(200deg, transparent 40%, rgb(6 6 8 / .5)),
    radial-gradient(80% 70% at 15% 100%, hsl(var(--h) 85% 45% / .42), transparent 68%);
}
/* The mark, lifted off the photograph in Z so the row has a foreground. */
.stuRow__badge {
  position: absolute; left: clamp(-1rem, -1.6vw, -.6rem); top: clamp(-1rem, -1.6vw, -.6rem);
  display: grid; place-items: center; width: 4.4rem; height: 4.4rem;
  border-radius: 50%; border: 1px solid hsl(var(--h) 80% 62% / .5);
  background: radial-gradient(circle at 32% 28%, hsl(var(--h) 85% 55% / .34), var(--surface-1) 72%);
  color: hsl(var(--h) 90% 74%);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / .9);
  backdrop-filter: blur(8px);
}
/* The index sits on the INNER corner — the side the copy is on. On the outer
   corner it runs into the container edge and gets sliced in half. */
.stuRow__n {
  position: absolute; right: -.2rem; bottom: -1.4rem;
  font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); line-height: 1;
  color: hsl(var(--h) 70% 60% / .16); letter-spacing: -.05em; pointer-events: none;
}
.stuRow:nth-child(even) .stuRow__n { right: auto; left: -.2rem; }

.stuRow__k {
  margin: 0 0 var(--s-2); font-family: var(--font-mono); font-size: .6rem;
  color: hsl(var(--h) 85% 72%);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.stuRow__copy h3 { margin: 0 0 var(--s-3); font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); letter-spacing: -.025em; }
.stuRow__line { margin: 0 0 var(--s-5); color: var(--text-mid); font-size: var(--fs-base); line-height: var(--lh-relaxed); max-width: 42ch; }
.stuRow__gives { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-2); }
.stuRow__gives li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--fs-sm); color: var(--text-mid);
}
.stuRow__gives li::before {
  content: ''; position: absolute; left: 0; top: .34em;
  width: .75rem; height: .75rem; border-radius: 50%;
  border: 1px solid hsl(var(--h) 80% 62% / .6);
  background: radial-gradient(circle, hsl(var(--h) 85% 62%) 34%, transparent 36%);
}
.stuRow__cta {
  display: inline-flex; align-items: center; gap: .6ch;
  padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid hsl(var(--h) 80% 62% / .45);
  background: hsl(var(--h) 80% 55% / .1);
  color: hsl(var(--h) 88% 76%); font-size: var(--fs-sm); text-decoration: none;
  transition: background .3s, border-color .3s, transform .3s;
}
.stuRow__cta i { font-style: normal; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.stuRow__cta:hover { background: hsl(var(--h) 80% 55% / .2); border-color: hsl(var(--h) 85% 65% / .8); transform: translateY(-2px); }
.stuRow__cta:hover i { transform: translateX(4px); }

@media (max-width: 58rem) {
  .stuRow { grid-template-columns: 1fr; gap: var(--s-6); }
  .stuRow:nth-child(even) .stuRow__art { order: 0; }
  .stuRow__frame,
  .stuRow:nth-child(even) .stuRow__frame { transform: translate3d(0, var(--py, 0px), 0); }
  .stuRow__badge { width: 3.4rem; height: 3.4rem; left: -.4rem; top: -.4rem; }
  .stuRow__n { display: none; }
}

/* ── STEPS ──────────────────────────────────────────────────────────────── */
.stuSteps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); position: relative; }
@media (min-width: 60rem) { .stuSteps { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } }
.stuSteps::before {
  content: ''; position: absolute; left: 0; right: 0; top: 1.4rem; height: 2px;
  background: linear-gradient(90deg, hsl(var(--c-notes) 85% 60%), hsl(var(--c-quiz) 65% 58%), hsl(var(--c-cards) 80% 62%), hsl(var(--c-events) 80% 60% / .25));
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}
@media (max-width: 60rem) { .stuSteps::before { display: none; } }
.stuStep { animation: pkRise .55s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.stuStep__dot {
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  border: 1px solid rgb(240 198 74 / .4); background: var(--surface-1);
  box-shadow: 0 0 0 5px rgb(240 198 74 / .07);
  font-family: var(--font-display); color: var(--y-yellow);
  position: relative; z-index: 1;
}
.stuStep h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-lg); }
.stuStep p { margin: 0 0 var(--s-3); color: var(--text-mid); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.stuStep a { font-size: var(--fs-sm); color: var(--y-yellow); }

/* ── YOUTUBE ────────────────────────────────────────────────────────────────
   A real embed, but built on click. A raw iframe costs every visitor ~1MB of
   third-party JavaScript and a cookie whether or not they ever press play; a
   poster plus one click costs nothing until they mean it. */
.stuTube {
  display: grid; gap: clamp(var(--s-6), 3vw, var(--s-10));
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(var(--s-7), 3.5vw, var(--s-10));
  perspective: 1500px;
}
@media (max-width: 64rem) { .stuTube { grid-template-columns: 1fr; } }

.stuTube__k {
  display: inline-flex; align-items: center; gap: .6ch; margin: 0 0 var(--s-3);
  font-family: var(--font-mono); font-size: .62rem; color: #ff5c5c;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.stuTube__play {
  display: grid; place-items: center; width: 1.5rem; height: 1.1rem;
  border-radius: 5px; background: #ff3d3d;
}
.stuTube__play::after {
  content: ''; width: 0; height: 0; margin-left: 2px;
  border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}

.stuTube__screen { position: relative; }
.stuTube__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--pk-line);
  background: linear-gradient(150deg, #16161c, #202028);
  box-shadow: 0 34px 80px -30px rgb(0 0 0 / .95);
  transform: rotateY(-7deg) rotateX(3deg);
  transition: transform .7s cubic-bezier(.22,1,.36,1);
  z-index: 2;
}
.stuTube__screen:hover .stuTube__frame { transform: rotateY(-2deg) rotateX(1deg); }
/* Once the iframe exists the tilt has to go — a rotated iframe makes the
   YouTube controls hard to hit and the text soft. */
.stuTube__frame.is-live,
.stuTube__screen:hover .stuTube__frame.is-live { transform: none; }
.stuTube__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.stuTube__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) brightness(.78);
  transition: filter .5s, transform .8s cubic-bezier(.22,1,.36,1), opacity .35s;
}
.stuTube__frame:hover .stuTube__poster { filter: saturate(1) brightness(.9); transform: scale(1.03); }
.stuTube__poster.is-swapping { opacity: 0; }
.stuTube__glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .08) 50%, transparent 60%);
}
.stuTube__btn {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 4.4rem; height: 3.1rem;
  border: 0; border-radius: 12px; background: #ff3d3d; cursor: pointer;
  box-shadow: 0 12px 34px -8px rgb(255 61 61 / .7);
  animation: stuPulse 2.8s ease-in-out infinite;
  transition: transform .3s, background .3s;
}
.stuTube__btn::after {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.stuTube__btn:hover { transform: translate(-50%, -50%) scale(1.08); background: #ff2020; }
@keyframes stuPulse { 50% { box-shadow: 0 12px 34px -8px rgb(255 61 61 / .35); } }
/* Two ghost frames behind, so it reads as a channel rather than one video. */
.stuTube__stack { position: absolute; inset: 0 0 auto; aspect-ratio: 16 / 9; }
.stuTube__stack span {
  position: absolute; inset: 0; border-radius: var(--radius-lg);
  border: 1px solid var(--pk-line); background: var(--surface-1);
  transform: translate3d(calc(var(--i) * .9rem + 1rem), calc(var(--i) * -.7rem - .8rem), calc(var(--i) * -40px - 40px))
             rotateY(-7deg) rotateX(3deg);
  opacity: calc(.45 - var(--i) * .18);
}
/* The ghosts sit about 2rem to the right of the player. That is free while the
   tube is two columns and the player only takes 60% of the row — but the
   moment it collapses to one column the player is as wide as the container and
   the overhang becomes horizontal page scroll. So they are hidden at exactly
   the breakpoint where the tube collapses, not at a rounder number: at 820px
   the spill was 4px of sideways scroll on the whole document. */
@media (max-width: 64rem) { .stuTube__stack { display: none; } }
.stuTube__now { margin: var(--s-4) 0 0; font-size: var(--fs-sm); color: var(--text-mid); }

/* The rail. Real thumbnails from i.ytimg.com — cookieless, and the only
   honest poster for a video is the video's own. */
.stuTube__side { display: grid; gap: var(--s-4); justify-items: start; }
.stuTube__rail { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); width: 100%; }
.stuTube__pick {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-2); border-radius: var(--radius);
  border: 1px solid transparent; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color .3s, background .3s, transform .3s;
  animation: pkRise .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.stuTube__pick:hover { border-color: var(--pk-line); background: var(--pk-card); transform: translateX(3px); }
.stuTube__pick.is-on { border-color: rgb(255 61 61 / .5); background: rgb(255 61 61 / .07); }
.stuTube__pick img { width: 6.4rem; height: 3.6rem; flex: none; object-fit: cover; border-radius: 7px; }
.stuTube__pick span { display: grid; gap: 2px; min-width: 0; }
.stuTube__pick b {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-hi);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stuTube__pick i { font-style: normal; font-size: .68rem; color: var(--text-lo); }

/* ── WHY THE COURSES ────────────────────────────────────────────────────── */
.stuWhy {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  perspective: 1200px;
  margin-top: clamp(var(--s-7), 3.5vw, var(--s-10));
}
.stuWhy__card {
  padding: var(--s-6); border-radius: var(--radius-lg);
  border: 1px solid var(--pk-line);
  background: linear-gradient(165deg, rgb(255 255 255 / .05), rgb(255 255 255 / .012) 62%), var(--surface-1);
  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: pkRise .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.theme-light .stuWhy__card { background: linear-gradient(165deg, #fff, #f7f7f9 62%); }
.stuWhy__card:hover { border-color: hsl(var(--c-courses) 80% 65% / .5); box-shadow: 0 24px 56px -22px rgb(0 0 0 / .8); }
.stuWhy__n {
  font-family: var(--font-mono); font-size: .7rem;
  color: hsl(var(--c-courses) 85% 72%); letter-spacing: var(--tracking-eyebrow);
}
.stuWhy__card h3 { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-lg); }
.stuWhy__card p { margin: 0; color: var(--text-mid); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* ── FREE / PAID, ONE LINE ──────────────────────────────────────────────── */
.stuSplit {
  display: grid; gap: var(--s-3); margin: clamp(var(--s-7), 3.5vw, var(--s-10)) 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  font-size: var(--fs-sm); color: var(--text-mid);
}
.stuSplit > span {
  display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5);
  border-radius: var(--radius); border: 1px solid var(--pk-line); background: var(--pk-card);
}
.stuSplit b {
  justify-self: start; padding: .16rem .6rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  background: rgb(255 255 255 / .07); color: var(--text-mid);
}
.stuSplit__free { border-color: rgb(120 220 160 / .35); }
.stuSplit__free b { background: rgb(120 220 160 / .16); color: rgb(150 235 190); }
.stuSplit__paid b { background: hsl(var(--c-courses) 70% 60% / .18); color: hsl(var(--c-courses) 85% 75%); }

/* ── WHO MADE IT ────────────────────────────────────────────────────────────
   Four checkable facts on one line. Explicit column counts, not auto-fit:
   auto-fit fitted FIVE tracks at desktop width and left the fourth fact
   floating with a column of empty space beside it. Four items want four
   columns, then two, then one. */
.stuProof {
  list-style: none; margin: clamp(var(--s-7), 3.5vw, var(--s-10)) 0 0; padding: 0;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 62rem) { .stuProof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .stuProof { grid-template-columns: 1fr; } }
.stuProof__item {
  display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-5); border-radius: var(--radius-lg);
  border: 1px solid var(--pk-line); background: var(--pk-card);
  transition: border-color .3s, transform .35s cubic-bezier(.22,1,.36,1);
  animation: pkRise .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.stuProof__item:hover { border-color: rgb(240 198 74 / .45); transform: translateY(-3px); }
.stuProof__item b {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); line-height: 1;
  color: var(--y-yellow); font-variant-numeric: tabular-nums;
}
/* Direct child only. The unscoped version also matched the counter's own
   <span> inside the <b>, so "10,000" rendered at caption size with a full-size
   "+" glued to it. */
.stuProof__item > span { font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-snug); }
.stuProof__foot { margin: var(--s-6) 0 0; text-align: center; }

/* ── QUESTIONS ──────────────────────────────────────────────────────────────
   Native <details>: it works with JavaScript off, the browser owns the
   keyboard behaviour, and it is the same five entries that feed the FAQPage
   schema — so the markup cannot promise Google something a visitor is not
   shown. */
.stuFaq__wrap { max-width: 52rem; }
.stuFaq { display: grid; gap: var(--s-2); margin-top: clamp(var(--s-6), 3vw, var(--s-8)); }
.stuFaq__item {
  border: 1px solid var(--pk-line); border-radius: var(--radius);
  background: var(--pk-card); overflow: hidden;
  transition: border-color .3s;
}
.stuFaq__item:hover, .stuFaq__item[open] { border-color: rgb(240 198 74 / .4); }
.stuFaq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); cursor: pointer;
  font-size: var(--fs-base); color: var(--text-hi);
  list-style: none;
}
.stuFaq__item summary::-webkit-details-marker { display: none; }
/* A drawn chevron rather than the platform triangle, which is a different
   glyph, colour and size in every browser. */
.stuFaq__item summary::after {
  content: ''; flex: none; width: .6rem; height: .6rem;
  border-right: 2px solid var(--y-yellow); border-bottom: 2px solid var(--y-yellow);
  rotate: 45deg; translate: 0 -.15rem;
  transition: rotate .3s cubic-bezier(.22,1,.36,1), translate .3s;
}
.stuFaq__item[open] summary::after { rotate: -135deg; translate: 0 .1rem; }
.stuFaq__item p {
  margin: 0; padding: 0 var(--s-5) var(--s-5);
  color: var(--text-mid); font-size: var(--fs-sm); line-height: var(--lh-relaxed);
}

/* ── REDUCED MOTION ─────────────────────────────────────────────────────────
   Everything above is decoration. With motion off the page is a heading, five
   links, a video and five explanations — which is the whole page anyway. */
@media (prefers-reduced-motion: reduce) {
  .stuSky > * { transform: none; }
  .stuHero__h1 .w > i, .stuTile, .stuStep, .stuWhy__card, .stuTube__pick,
  .stuProof__item { animation: none; transform: none; }
  .stuProof__item, .stuFaq__item, .stuFaq__item summary::after { transition: none; }
  .stuTile, .stuTile__ph img, .stuTile__ico, .stuTile__go i, .stuTile__arrow,
  .stuRow__frame, .stuRow__frame img, .stuTube__frame, .stuTube__poster,
  .stuWhy__card, .stuSteps::before, .stuHero__tour { transition: none; }
  .stuRow__frame, .stuRow:nth-child(even) .stuRow__frame { transform: none; }
  .stuTube__frame { transform: none; }
  .stuTube__btn, .stuHero__tourDot { animation: none; }
  .stuSteps::before { transform: scaleX(1); }
}