/* Periodically Nerdy: chemistry in deep space */
:root {
  --abyss: #07120d;      /* page base: deep forest-space green */
  --moss: #0f1f18;       /* raised surfaces */
  --line: rgba(180, 225, 200, 0.14);
  --mint: #8ff0bf;       /* phosphor highlight */
  --malachite: #22a874;  /* primary action */
  --malachite-hi: #2fc488;
  --paper: #edf4ef;      /* body text */
  --muted: #a2b8ab;
  --brass: #e6b866;      /* warm second accent, used sparingly */

  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --step-4: clamp(2.5rem, 1.4rem + 4.6vw, 5.2rem);

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --r-sm: 10px;
  --r-lg: 22px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--abyss);
  color: var(--paper);
  font: 400 var(--step-0)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--mint); color: var(--abyss); padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; }

/* The particle field sits behind everything and stays put while the page scrolls */
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* touch screens: the canvas fills the tallest view, so the address bar hiding never stretches it */
#field.field--stable { bottom: auto; height: 100vh; height: 100lvh; }
@media (pointer: coarse) {
  .vignette, .sky { bottom: auto; height: 100vh; height: 100lvh; }
  /* scroll-moved layers get their own GPU layer, so the title and text above them never repaint */
  .intro-copy, .intro-copy .subject-bars, .chem-bubbles i, .phys-streaks i, .eq-track { will-change: transform, opacity; }
  /* the home opener is held with position: fixed instead of sticky: phone browsers re-sync sticky
     layers while scrolling, which made the sign and the copy under it wobble. Fixed never moves.
     (The home page is only the opener, so the two look the same.) */
  .hero.intro:not(.intro--static) .intro-stage { position: fixed; top: 0; left: 0; right: 0; z-index: 2; }
}
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4, 11, 8, 0.85) 100%);
}
/* space layer: shooting stars and the background rocket, above the particles, below the content */
.sky { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.shooting-star {
  position: absolute; top: 0; left: 0; width: 180px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(143, 245, 194, 0.6) 60%, #fff);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
  transform-origin: right center;
  opacity: 0;
}
.shooting-star::after {
  content: ""; position: absolute; right: -2px; top: -2px; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.8);
}
.rocket {
  position: absolute; top: 0; left: 0; width: 40px;
  opacity: 0; filter: drop-shadow(0 0 14px rgba(255, 201, 77, 0.35));
  will-change: transform, opacity;
}
.rk-flame { transform-origin: 20px 66px; animation: flame .12s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scaleY(0.75) scaleX(0.9); opacity: .8; } to { transform: scaleY(1.15) scaleX(1.05); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sky { display: none; } }

main, .foot { position: relative; z-index: 2; }
main { overflow-x: clip; } /* the tilted ribbon overhangs the edges */

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 { font-family: var(--body); font-size: var(--step-1); font-weight: 600; line-height: 1.3; }
.lede { font-size: var(--step-1); color: var(--muted); max-width: 34em; line-height: 1.55; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- element tiles (the brand mark) ---------- */
.tile {
  position: relative; display: inline-grid; place-items: center;
  width: 56px; aspect-ratio: 1; flex: none;
  border: 1.5px solid var(--mint); border-radius: 8px;
  background: rgba(143, 240, 191, 0.06);
  color: var(--mint);
}
.tile b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; }
.tile small { position: absolute; top: 4px; left: 6px; font-size: 0.7rem; font-weight: 600; opacity: 0.8; }
.tile--logo { width: 40px; border-radius: 6px; }
.tile--logo b { font-size: 0.95rem; }
.tile--logo small { font-size: 0.55rem; top: 2px; left: 4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 1.5px solid var(--malachite); border-radius: 999px;
  background: var(--malachite); color: #02130c;
  font: 600 1rem/1 var(--body); text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--malachite-hi); border-color: var(--malachite-hi); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--paper); border-color: rgba(237, 244, 239, 0.32); }
.btn--ghost:hover { background: rgba(143, 240, 191, 0.08); border-color: var(--mint); color: var(--mint); }
.btn--small { min-height: 42px; padding: 0 18px; font-size: 0.95rem; }
.btn--wide { width: 100%; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 14px var(--gutter);
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: rgba(7, 18, 13, 0.78);
  background: rgba(7, 18, 13, 0.88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 0.98rem; padding: 0 2px; transition: color .18s ease; }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--paper); }
.menu { display: none; }
/* below 1080px the five links no longer fit on one line, so the menu button takes over */
@media (max-width: 1080px) {
  .nav-links, .nav > .btn { display: none; }
  .menu {
    display: grid; gap: 6px; place-content: center; margin-left: auto;
    width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
    background: rgba(7, 18, 13, 0.6); cursor: pointer;
  }
  .menu span { display: block; width: 18px; height: 1.5px; background: var(--paper); transition: transform .2s ease; }
  .menu[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
}

.mobile-nav {
  position: fixed; inset: 70px 0 auto 0; z-index: 49;
  display: grid; gap: 4px; padding: 12px var(--gutter) 24px;
  background: rgba(7, 18, 13, 0.96); border-bottom: 1px solid var(--line);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a:not(.btn) { padding: 14px 0; font-size: 1.15rem; text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: 16px; }

/* ---------- scenes ---------- */
.scene { position: relative; padding: clamp(96px, 14vh, 160px) 0; }
.copy { max-width: 560px; }
.wrap--right { display: flex; justify-content: flex-end; }

/* hero */
.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 120px; }
.hero .lede { margin-top: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* hero lockup: the brand name, with "Nerdy" spelled in real elements (N, Er, Dy) */
.copy--hero { max-width: 760px; }
.lockup { margin: 0; display: grid; gap: clamp(10px, 1.4vw, 18px); }
.lockup-word {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 5.6vw, 5.6rem); line-height: 0.95; letter-spacing: -0.045em;
  background: linear-gradient(100deg, var(--paper) 0%, var(--paper) 55%, #b9f5d3 80%, #ffd98a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lockup-tiles { display: flex; gap: clamp(8px, 1.1vw, 16px); perspective: 700px; }
.etile {
  --c: #2fd88a; --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%;
  position: relative; display: grid; place-items: center;
  width: clamp(92px, 9.6vw, 156px); aspect-ratio: 1;
  border: 2px solid var(--c); border-radius: clamp(10px, 1vw, 16px);
  background:
    radial-gradient(120px 120px at var(--gx) var(--gy), color-mix(in srgb, var(--c) 34%, transparent), transparent 70%),
    color-mix(in srgb, var(--c) 9%, rgba(7, 18, 13, 0.75));
  color: var(--c);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
  box-shadow: 0 0 0 0 transparent, inset 0 0 30px color-mix(in srgb, var(--c) 14%, transparent);
}
.etile.is-live { transition: transform .08s linear, box-shadow .3s ease; box-shadow: 0 18px 60px -18px var(--c), inset 0 0 40px color-mix(in srgb, var(--c) 22%, transparent); }
/* everything inside a tile is sized from the tile's own width (cqw), so the atomic number, symbol,
   name and mass keep their own space at any tile size */
.etile { container-type: inline-size; }
.etile b { font-family: var(--display); font-weight: 600; font-size: 38cqw; letter-spacing: -0.04em; line-height: 1; transform: translateZ(30px); margin-top: -14cqw; }
.etile small { position: absolute; top: 7cqw; left: 9cqw; font-weight: 600; font-size: 11cqw; line-height: 1; }
.etile i { position: absolute; bottom: 18cqw; font-style: normal; font-size: 9cqw; line-height: 1; color: var(--paper); opacity: 0.85; }
.etile em { position: absolute; bottom: 7cqw; font-style: normal; font-size: 8cqw; line-height: 1; color: var(--muted); }.etile--n { --c: #2fd88a; }
.etile--er { --c: #ffc94d; }
.etile--dy { --c: #2ec9b7; }
.tagline {
  margin-top: clamp(26px, 3vw, 40px);
  font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  line-height: 1.1; letter-spacing: -0.025em; max-width: 24em;
  background: linear-gradient(90deg, #8ff5c2, #c6f36b 50%, #ffc94d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  width: fit-content;
}
.hero .tagline + .lede { margin-top: 16px; }

/* marquee band of topics between the hero and the course content */
/* a tilted double ribbon: element-tagged topics on top, finer terms sliding the other way below */
.marquee {
  position: relative; z-index: 2;
  margin: clamp(10px, 2vw, 30px) -4vw;
  transform: rotate(-2.2deg);
  display: grid;
}
.marquee-row {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-row:first-child {
  padding: clamp(14px, 1.8vw, 22px) 0;
  background: linear-gradient(90deg, rgba(47, 216, 138, 0.16), rgba(46, 201, 183, 0.12) 50%, rgba(255, 201, 77, 0.14));
  border-block: 1px solid rgba(143, 245, 194, 0.28);
  box-shadow: 0 20px 60px -30px rgba(47, 216, 138, 0.5);
  background-color: rgba(7, 18, 13, 0.55);
}
.marquee-row--rev { padding: 12px 0; background: rgba(4, 11, 8, 0.7); border-bottom: 1px solid var(--line); }
/* tracks are moved by app.js as you scroll; children use margins (not gap) so the doubled
   content loops seamlessly at exactly half the track width */
.marquee-track { display: flex; align-items: center; width: max-content; will-change: transform; }
.marquee-track > * { margin-right: clamp(22px, 2.4vw, 40px); }
.marquee-row--rev .marquee-track > * { margin-right: 22px; }

.mq {
  --c: #2fd88a;
  display: inline-flex; align-items: center; gap: clamp(14px, 1.3vw, 20px);
  font-family: var(--display); font-weight: 800; font-size: clamp(1.45rem, 3vw, 2.8rem);
  letter-spacing: -0.035em; white-space: nowrap; color: var(--paper);
  transition: color .25s ease, text-shadow .25s ease;
}
.mq b {
  position: relative; display: grid; place-items: center; flex: none;
  width: 1.5em; aspect-ratio: 1; border-radius: 0.22em;
  border: 2px solid var(--c); color: var(--c);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 28%, transparent), color-mix(in srgb, var(--c) 8%, rgba(7, 18, 13, 0.6)) 70%);
  font-weight: 600; font-size: 0.6em; letter-spacing: -0.02em; line-height: 1; padding-top: 0.12em;
  box-shadow: 0 0 24px -6px var(--c), inset 0 0 14px color-mix(in srgb, var(--c) 18%, transparent);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.mq b small { position: absolute; top: 0.18em; left: 0.24em; font-size: 0.34em; font-weight: 700; opacity: 0.85; }
.mq:hover { color: var(--c); text-shadow: 0 0 24px color-mix(in srgb, var(--c) 55%, transparent); }
.mq:hover b { transform: rotate(-6deg) scale(1.08); box-shadow: 0 0 34px -4px var(--c), inset 0 0 18px color-mix(in srgb, var(--c) 28%, transparent); }
.mq--t { --c: #2ec9b7; }
.mq--l { --c: #c6f36b; }
.mq--y { --c: #ffc94d; }
/* tiny orbiting atom between topics */
.mq-atom { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(143, 245, 194, 0.45); transform: rotate(-30deg) scaleY(0.45); }
.mq-atom::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #ffc94d; box-shadow: 0 0 10px #ffc94d; transform: scaleY(2.2); }
.mq-atom::after { content: ""; position: absolute; top: -3px; left: 8px; width: 5px; height: 5px; border-radius: 50%; background: #8ff5c2; box-shadow: 0 0 8px #8ff5c2; transform: scaleY(2.2); }
/* second row: real chemistry equations */
.mq-eq {
  font-family: "Cambria Math", "Times New Roman", serif; font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.3rem); white-space: nowrap; color: #c9ffe4; opacity: 0.85;
}
.mq-eq sub, .mq-eq sup { font-size: 0.65em; }
.mq-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #ffc94d; box-shadow: 0 0 10px #ffc94d; }

/* custom cursor (fine pointers only, added by app.js) */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor label, .has-cursor select { cursor: none; }
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none; border-radius: 50%;
  transform: translate3d(-100px, -100px, 0);
}
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--paper); }
.cursor-ring {
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1.5px solid rgba(237, 244, 239, 0.7);
  display: grid; place-items: center;
  transition: width .25s ease, height .25s ease, margin .25s ease, border-color .25s ease, background-color .25s ease, opacity .2s ease;
}
.cursor-ring.is-link { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--mint); background: rgba(143, 245, 194, 0.08); }
.cursor-ring.is-text { opacity: 0; }
/* over the 3D shape the ring swells into a soft gold circle */
.cursor-ring.is-object { width: 84px; height: 84px; margin: -42px 0 0 -42px; border-color: #ffc94d; background: rgba(255, 201, 77, 0.14); box-shadow: 0 0 30px rgba(255, 201, 77, 0.35); }
body[data-over-object] { cursor: none; }

/* topics: element tiles in a grid */
.topics .lede { margin-top: 18px; }
.elements {
  list-style: none; padding: 0; margin: 64px 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.el {
  padding: 28px 24px 30px;
  background: rgba(7, 18, 13, 0.6);
  transition: background-color .25s ease;
}
.el:hover { background: rgba(14, 32, 24, 0.8); }
.el h3 { margin-top: 20px; font-size: 1.08rem; }
.el p { margin-top: 6px; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

/* bundles */
.bundles .lede { margin-top: 18px; }
.hint { margin-top: 14px; max-width: 40em; font-size: 0.95rem; color: var(--muted); }
.copy--plans { max-width: 600px; }
.plans { display: grid; gap: 14px; margin-top: 40px; }
.plan {
  display: grid; grid-template-columns: 56px 1fr auto; column-gap: 20px; align-items: start;
  padding: 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: rgba(7, 18, 13, 0.76);
  transition: border-color .25s ease, background-color .25s ease;
}
.plan:hover, .plan:focus-within { border-color: rgba(143, 240, 191, 0.45); }
.plan .tile { grid-row: 1 / span 2; }
.plan h3 { grid-column: 2; font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.015em; }
.plan-for { grid-column: 2; margin-top: 6px; color: var(--muted); font-size: 0.95rem; }
.plan-price { grid-column: 3; grid-row: 1; text-align: right; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.plan-price span { display: block; font-family: var(--display); font-weight: 800; font-size: 2.1rem; letter-spacing: -0.04em; color: var(--paper); line-height: 1; margin-bottom: 4px; }
.plan-week { grid-column: 3; grid-row: 2; text-align: right; margin-top: 6px; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.plan-list { grid-column: 2 / -1; list-style: none; padding: 16px 0 0; margin: 16px 0 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; border-top: 1px solid var(--line); }
.plan .btn { grid-column: 2 / -1; justify-self: start; }
.plan-list li { position: relative; padding-left: 20px; font-size: 0.92rem; }
.plan-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--mint);
}
.plan--mix { border-color: rgba(143, 240, 191, 0.55); background: rgba(12, 36, 26, 0.86); box-shadow: 0 0 0 1px rgba(143, 240, 191, 0.12), 0 30px 80px -30px rgba(34, 168, 116, 0.45); }
.plan--mix .tile { border-color: #c6f36b; color: #c6f36b; background: rgba(198, 243, 107, 0.08); }
.plan[data-key="individual"] .tile { border-color: #ffc94d; color: #ffc94d; background: rgba(255, 201, 77, 0.08); }

/* how it works */
.how .copy, .faq .copy { max-width: 540px; }
.how .lede { margin-top: 14px; }

/* reaction pathway: element tiles joined by a glowing line, ending in the product */
.pathway {
  --tile: 64px;
  position: relative; list-style: none; padding: 0; margin: 44px 0 0;
  display: grid; gap: 14px;
}
/* the reaction line runs behind the tiles, green into gold */
.pathway::before {
  content: ""; position: absolute; left: calc(var(--tile) / 2 - 1px); top: 32px; bottom: 40px; width: 2px;
  background: linear-gradient(#2fd88a, #2ec9b7 35%, #c6f36b 65%, #ffc94d);
  opacity: 0.55; border-radius: 2px;
}
/* a spark travels down the line once the section is on screen */
.pathway::after {
  content: ""; position: absolute; left: calc(var(--tile) / 2 - 5px); top: 32px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px #fff, 0 0 24px #8ff5c2;
  opacity: 0;
}
.pathway.is-on::after { animation: spark 3.2s cubic-bezier(.5, 0, .3, 1) .2s infinite; }
@keyframes spark {
  0% { top: 32px; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 44px); opacity: 0; }
}

.step {
  --c: #2fd88a;
  position: relative; display: grid; grid-template-columns: var(--tile) 1fr; gap: 20px; align-items: center;
  padding: 10px 18px 10px 0;
  border-radius: 14px;
  transition: background-color .25s ease;
}
.step:hover { background: color-mix(in srgb, var(--c) 7%, transparent); }
.step-tile {
  position: relative; display: grid; place-items: center;
  width: var(--tile); aspect-ratio: 1; border-radius: 12px;
  border: 1.5px solid var(--c); color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, var(--abyss));
  box-shadow: 0 0 0 6px var(--abyss), 0 10px 30px -12px var(--c);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.step:hover .step-tile { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 0 6px var(--abyss), 0 14px 40px -10px var(--c); }
.step-tile b { font-family: var(--display); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.03em; }
.step-tile small { position: absolute; top: 4px; left: 7px; font-size: 0.66rem; font-weight: 600; }
.step h3 { font-size: 1.12rem; }
.step p { margin-top: 4px; color: var(--muted); font-size: 0.98rem; }
.step--pk { --c: #2fd88a; }
.step--tm { --c: #2ec9b7; }
.step--lv { --c: #c6f36b; }
.step--pg { --c: #8ff5c2; }
.step--cf { --c: #ffc94d; margin-top: 10px; padding-top: 18px; border-top: 1px dashed color-mix(in srgb, #ffc94d 40%, transparent); border-radius: 0; }
.step--cf .step-tile { background: linear-gradient(140deg, #ffc94d, #ff9a4a); color: #241503; border-color: transparent; box-shadow: 0 0 0 6px var(--abyss), 0 0 40px -6px #ffc94d; }
.step--cf h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; color: #ffd98a; }
.step--cf:hover { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .pathway.is-on::after { animation: none; }
}

/* about */
.about .copy p { margin-top: 20px; color: var(--muted); max-width: 34em; }
.about .copy p:first-of-type { margin-top: 28px; }
.about .aside { padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.95rem; }
.about .aside a { color: var(--mint); text-underline-offset: 3px; }

/* faq */
.qa { margin-top: 36px; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.08rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 1.5px solid var(--mint); border-bottom: 1.5px solid var(--mint);
  transform: rotate(45deg) translateY(-3px); transition: transform .25s ease;
}
.qa details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.qa details p { padding: 0 0 22px; color: var(--muted); max-width: 36em; }

/* book */
.book { padding-bottom: clamp(96px, 16vh, 180px); }
.book .lede { margin-top: 14px; }

/* the booking form as a periodic table */
.ptable {
  max-width: 980px; margin: 48px auto 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "nm nm em em gc"
    "in gr mx ms ms"
    "go go go ms ms"
    "note note note note note";
}
/* booking pages with the Zoom calendar: the calendar gets its own full-width row */
.ptable:has(.cell--cal) {
  grid-template-areas:
    "nm nm em em gc"
    "in gr mx ms ms"
    "cal cal cal cal cal"
    "go go go go go"
    "note note note note note";
}
.cell--cal { grid-area: cal; --c: #8ff5c2; justify-content: flex-start; padding-top: 44px; }
.subj--phys .cell--cal { --c: #2ec9b7; }
.cal-head { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.cal-sub { color: var(--muted); font-size: 0.95rem; margin-top: 2px; }
.cal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; margin-top: 16px; }
.cal.is-off { display: none; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-bar b { font-family: var(--display); font-weight: 600; }
.cal-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(7, 18, 13, 0.6); color: var(--paper); font-size: 1.4rem; cursor: pointer; }
.cal-nav:disabled { opacity: 0.3; cursor: default; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-week span { font-size: 0.75rem; color: var(--muted); font-weight: 600; padding: 4px 0; }
.cal-day { position: relative; min-height: 44px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; transition: background-color .2s ease, transform .15s ease; }
.cal-day:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 20%, transparent); transform: translateY(-1px); }
.cal-day:disabled { border-color: transparent; background: none; color: rgba(162, 184, 171, 0.35); cursor: default; }
.cal-day.is-picked { background: var(--c); color: #04140c; border-color: var(--c); }
.cal-day.has-time::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #ffc94d; }
.cal-label { font-weight: 600; margin-bottom: 8px; }
.cal-hint { color: var(--muted); font-weight: 400; }
.cal-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cal-slot { display: grid; place-items: center; min-height: 48px; padding: 6px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); background: rgba(7, 18, 13, 0.6); color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; }
.cal-slot small { font-size: 0.7rem; font-weight: 400; color: var(--muted); }
.cal-slot:hover { border-color: var(--c); }
.cal-slot.is-on { background: color-mix(in srgb, #ffc94d 22%, rgba(7, 18, 13, 0.9)); border-color: #ffc94d; box-shadow: 0 0 0 1px #ffc94d; }
.cal-chosen { list-style: none; padding: 0; margin: 14px 0 10px; display: grid; gap: 6px; }
.cal-chosen li { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 10px; border-radius: 12px; background: rgba(255, 201, 77, 0.1); border: 1px solid rgba(255, 201, 77, 0.35); font-size: 0.92rem; }
.cal-zoom { padding: 2px 8px; border-radius: 6px; background: #2d8cff; color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; }
.cal-x { margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--paper); font-size: 1.3rem; cursor: pointer; }
.cal-x:hover { background: rgba(255, 255, 255, 0.08); }
.cal-tz { margin-top: 10px; color: var(--muted); font-size: 0.8rem; }
.cal-embed { grid-column: 1 / -1; width: 100%; min-height: 680px; border: 0; border-radius: 12px; background: #fff; }
@media (max-width: 760px) { .cal { grid-template-columns: 1fr; } }
/* ---------- the jump to lightspeed (home hero, js/warp.js) ---------- */
.sbar--mini { min-height: 54px; padding: 6px 14px 6px 8px; gap: 12px; font: inherit; text-align: left; cursor: pointer; width: 100%; border-style: dashed; background: linear-gradient(100deg, rgba(255, 201, 77, 0.1), rgba(7, 18, 13, 0.7)); }
.sbar--mini .sbar-tile { width: 40px; height: 40px; border-radius: 50%; }
.sbar--mini .sbar-text b { font-size: 0.95rem; letter-spacing: -0.01em; }
.sbar--mini .sbar-text small { font-size: 0.78rem; color: #ffd98a; letter-spacing: 0.06em; text-transform: uppercase; }
.sbar--mini:hover .sbar-tile svg, .sbar--mini:focus-visible .sbar-tile svg { animation: warp-twinkle 1.2s ease-in-out infinite; }
@keyframes warp-twinkle { 50% { transform: scale(1.18) rotate(20deg); } }
.warp-lock, .warp-lock body { overflow: hidden; }
/* the dive: the real page rushes toward you and past you, centred on the star button (origins set in warp.js) */
.warp-dive body > *:not(.warp):not(script) { animation: warp-dive 1.7s cubic-bezier(.55, .02, .7, .3) forwards; will-change: transform, opacity; }
@keyframes warp-dive { 0% { transform: scale(1); opacity: 1; filter: blur(0); } 45% { opacity: 0.95; filter: blur(1px); } 100% { transform: scale(6.5); opacity: 0; filter: blur(9px); } }
/* coming back: the page settles from slightly enlarged and transparent into place */
.warp-return body > *:not(.warp):not(script) { animation: warp-return .8s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes warp-return { from { transform: scale(1.18); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
.warp { position: fixed; inset: 0; z-index: 9000; display: none; background: transparent; color: var(--paper); transition: background-color 1.2s ease, opacity .7s ease; }
.warp.is-leaving { opacity: 0; pointer-events: none; }
.warp.is-dark { background: var(--abyss); } /* the site's own deep green, never black */
.warp.is-open { display: block; }
.warp canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.warp-flash { position: absolute; inset: 0; background: radial-gradient(circle, #fffbe6, #c6f36b 40%, transparent 75%); opacity: 0; pointer-events: none; }
.warp.is-arrived .warp-flash { animation: warp-flash 1.6s ease-out; }
@keyframes warp-flash { 0% { opacity: 0; } 20% { opacity: 0.5; } 100% { opacity: 0; } }
.warp-close { position: absolute; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(237, 244, 239, 0.3); background: rgba(2, 7, 5, 0.6); color: var(--paper); cursor: pointer; }
.warp-copy { position: absolute; z-index: 2; left: 50%; bottom: max(8vh, 40px); width: min(680px, calc(100% - 32px)); transform: translate(-50%, 24px); text-align: center; opacity: 0; pointer-events: none; transition: opacity 1.2s ease .6s, transform 1.2s cubic-bezier(.2, .8, .2, 1) .6s; }
.warp.is-arrived .warp-copy { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.warp-kicker { font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: #ffd98a; }
.warp-quote { margin-top: 10px; font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; text-shadow: 0 4px 40px rgba(2, 7, 5, 0.9); }
.warp-sub { margin: 14px auto 0; max-width: 46ch; color: #c3d4ca; font-size: clamp(0.95rem, 2vw, 1.1rem); text-shadow: 0 2px 16px #020705; }
.warp-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.has-cursor .warp, .has-cursor .warp * { cursor: auto; }
.has-cursor .warp button, .has-cursor .warp a { cursor: pointer; }
@media (max-width: 640px) { .warp-go .btn { flex: 1 1 100%; } }
/* the Chemistry / Physics bars waiting at the end of the jump */
.warp-bars { margin: 22px auto 0; text-align: left; width: min(520px, 100%); }
/* the hero's single "Jump in" button: a bit larger and solid now that it's the only one */
.sbar--jump { min-height: 72px; padding: 10px 20px 10px 10px; border-style: solid; background: linear-gradient(100deg, rgba(255, 201, 77, 0.16), rgba(7, 18, 13, 0.75)); box-shadow: 0 20px 60px -30px #ffc94d; }
.sbar--jump .sbar-tile { width: 50px; height: 50px; }
/* the jump icon: a star you rush toward. It glows slowly while waiting; pressing the button sends
   the light streaks rushing in toward it, like the jump itself */
.jump-icon { overflow: hidden; background: radial-gradient(circle, rgba(255, 201, 77, 0.22), rgba(7, 18, 13, 0.6) 70%); }
.jump-icon svg { width: 82%; height: 82%; overflow: visible; }
.jump-glow { transform-origin: 24px 24px; animation: jump-breathe 3.2s ease-in-out infinite; }
.jump-star { transform-origin: 24px 24px; animation: jump-breathe-star 3.2s ease-in-out infinite; }
.jump-streaks { transform-origin: 24px 24px; opacity: 0.75; transition: transform .45s cubic-bezier(.3, 0, .2, 1), opacity .3s ease; }
.sbar--jump:hover .jump-streaks, .sbar--jump:focus-visible .jump-streaks { transform: scale(0.82) rotate(45deg); opacity: 1; }
.sbar--jump:active .jump-streaks { transform: scale(0.6) rotate(45deg); opacity: 1; transition-duration: .18s; }
.sbar--mini.sbar--jump:hover .sbar-tile svg, .sbar--mini.sbar--jump:focus-visible .sbar-tile svg { animation: none; }
@keyframes jump-breathe { 50% { transform: scale(1.22); opacity: 0.85; } }
@keyframes jump-breathe-star { 50% { transform: scale(1.08) rotate(8deg); } }
.sbar--jump .sbar-text b { font-size: 1.3rem; }
.sbar--jump .sbar-text small { font-size: 0.82rem; text-transform: none; letter-spacing: 0; color: #ffd98a; }
@media (max-width: 600px) {
  .intro .sbar--jump { min-height: 66px; }
  .intro .sbar--jump .sbar-text b { font-size: 1.2rem; }
  .intro .sbar--jump .sbar-text small { font-size: 0.78rem; }
}
/* phones: the hero ends with the tagline and three bars, all on one screen */
@media (max-width: 600px) {
  .intro .intro-copy .lede { display: none; }
  .intro .tagline { margin-top: 14px; }
  .intro .subject-bars { margin-top: 16px; gap: 10px; }
  .intro .sbar { min-height: 60px; }
  .intro .sbar--mini { min-height: 50px; }
  .sbar--mini .sbar-text b { font-size: 0.84rem; line-height: 1.25; }
  .sbar--mini .sbar-text small { font-size: 0.68rem; }
}
/* short phones (iPhone SE and similar): a more compact opener so all three bars still fit */
@media (max-width: 600px) and (max-height: 740px) {
  .intro-stage { padding-top: 160px; }
  .intro .lockup-word { font-size: 8.4vw; }
  .intro .etile { width: calc((100vw - 2 * var(--gutter) - 24px) / 3.9); }
  .intro .tagline { margin-top: 10px; font-size: 1.25rem; }
  .intro .subject-bars { margin-top: 12px; gap: 8px; }
  .intro .sbar { min-height: 54px; padding-block: 6px; }
  .intro .sbar-tile { width: 40px; height: 40px; }
  .intro .sbar--mini { min-height: 46px; }
}
@media (max-width: 600px) and (max-height: 600px) {
  .intro-stage { padding-top: 104px; }
  .intro .tagline { display: none; }
  .intro .sbar-text small { display: none; }
}
/* ---------- About page: teacher portraits (3D renders) ---------- */
.about-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.tphoto {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%;
  position: relative; margin: 0; justify-self: center; width: min(100%, 440px); padding: 10px; border-radius: 24px;
  border: 1.5px solid color-mix(in srgb, var(--c) 50%, transparent);
  background: color-mix(in srgb, var(--c) 10%, rgba(7, 18, 13, 0.85));
  box-shadow: 0 50px 100px -45px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 6%, transparent), inset 0 0 40px color-mix(in srgb, var(--c) 14%, transparent);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.tphoto.is-live { transition: transform .1s linear; }
.tphoto img { display: block; width: 100%; height: auto; border-radius: 16px; }
.tphoto::after { content: ""; position: absolute; inset: 10px; border-radius: 16px; pointer-events: none; background: radial-gradient(420px 420px at var(--gx) var(--gy), rgba(255, 255, 255, 0.16), transparent 60%); opacity: 0; transition: opacity .4s ease; }
.tphoto.is-live::after { opacity: 1; }
.tphoto figcaption {
  position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(4, 11, 8, 0.78); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  font-size: 0.88rem; font-weight: 600; transform: translateZ(40px); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tphoto figcaption b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--c); color: var(--c); font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
/* pop-out version: the scene sits in a glowing frame, the teacher (a cut-out of the same picture) stands
   in front of it with her head rising above the frame, and element tiles float closest to you.
   Each layer sits at its own depth, so tilting the card moves them apart. */
.tphoto--pop { padding: 0; background: none; border: 0; box-shadow: none; aspect-ratio: 4 / 5; }
.tphoto--pop::after { display: none; }
.tp-frame {
  position: absolute; left: 0; right: 0; bottom: 0; top: 14%; overflow: hidden; border-radius: 24px;
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); background: #06110c;
  box-shadow: 0 50px 100px -45px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 6%, transparent), inset 0 0 50px color-mix(in srgb, var(--c) 18%, transparent);
}
.tp-frame img { position: absolute; left: 0; top: -16.28%; width: 100%; height: 116.28%; max-width: none; border-radius: 0; filter: brightness(0.82) saturate(1.1); }
.tp-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(380px 380px at var(--gx) var(--gy), rgba(255, 255, 255, 0.14), transparent 60%); opacity: 0; transition: opacity .4s ease; }
.tphoto--pop.is-live .tp-frame::after { opacity: 1; }
.tp-cut { position: absolute; inset: 0; transform: translateZ(46px); pointer-events: none; clip-path: inset(0 0 0 0 round 0 0 24px 24px); }
.tp-cut img { width: 100%; height: 100%; border-radius: 0; filter: drop-shadow(0 22px 28px rgba(2, 7, 5, 0.55)) drop-shadow(0 0 16px color-mix(in srgb, var(--c) 35%, transparent)); }
.tp-float {
  position: absolute; left: var(--x); top: var(--y); width: clamp(48px, 14%, 64px); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 12px; border: 2px solid var(--c); color: var(--c); font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 2.4vw, 1.35rem);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 8%, rgba(7, 18, 13, 0.9)) 70%);
  box-shadow: 0 0 26px -4px var(--c), 0 18px 30px -12px rgba(0, 0, 0, 0.7);
  transform: translateZ(var(--z)) rotate(var(--r)); pointer-events: none;
}
.tp-float small { position: absolute; top: 4px; left: 6px; font-family: var(--body); font-size: 0.6rem; font-weight: 700; }
.tphoto--pop figcaption { left: 16px; right: 16px; bottom: 16px; transform: translateZ(70px); }
@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr; gap: 28px; }
  .about-hero .tphoto { order: -1; width: min(82%, 360px); }
  .tphoto { width: min(88%, 380px); }
  .tphoto figcaption { font-size: 0.8rem; left: 16px; right: 16px; bottom: 16px; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* the chooser on the general Book page */
.book-choose { margin-top: 30px; }
.bundles-pick { display: contents; border: 0; margin: 0; padding: 0; }
.cell {
  --c: #2fd88a;
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  min-height: 136px; padding: 40px 16px 14px;
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 6%, rgba(7, 18, 13, 0.86));
  transition: border-color .2s ease, background-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.cell:focus-within { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent), 0 20px 50px -24px var(--c); }
.cell-no { position: absolute; top: 10px; left: 14px; font-size: 0.8rem; font-weight: 600; color: var(--c); }
.cell-sym {
  position: absolute; top: 8px; right: 14px;
  font-family: var(--display); font-weight: 600; font-size: 1.7rem; letter-spacing: -0.03em; line-height: 1;
  color: var(--c); opacity: 0.9;
}
.cell label:not(.pick) { font-weight: 600; font-size: 0.92rem; }
.cell input:not([type="radio"]), .cell textarea {
  width: 100%; min-height: 44px; padding: 8px 2px;
  border: 0; border-bottom: 1.5px solid rgba(180, 225, 200, 0.3); border-radius: 0;
  background: transparent; color: var(--paper);
  font: 400 1.05rem/1.4 var(--body);
}
.cell textarea { resize: vertical; flex: 1; min-height: 120px; border: 1.5px solid rgba(180, 225, 200, 0.22); border-radius: 8px; padding: 10px 12px; }
.cell input::placeholder, .cell textarea::placeholder { color: #6f877a; }
.cell input:focus, .cell textarea:focus { outline: none; border-color: var(--c); }
.cell [aria-invalid="true"] { border-color: #ff8f8f; }
.opt { font-weight: 400; color: var(--muted); }
.err { color: #ffadad; font-size: 0.86rem; }

.cell--nm { grid-area: nm; }
.cell--em { grid-area: em; --c: #2ec9b7; }
.cell--gc { grid-area: gc; --c: #8ff5c2; }
.cell--ms { grid-area: ms; --c: #2ec9b7; justify-content: flex-start; padding-top: 44px; }
.pick--gr { grid-area: gr; --c: #2fd88a; }
.pick--mx { grid-area: mx; --c: #c6f36b; }
.pick--in { grid-area: in; --c: #ffc94d; }

/* bundle tiles: radio buttons drawn as element squares */
.pick { cursor: pointer; justify-content: flex-end; align-items: flex-start; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .cell-sym { position: static; font-size: 2.6rem; margin-bottom: auto; margin-top: -6px; align-self: center; }
.pick-name { font-weight: 600; font-size: 0.9rem; }
.pick-mass { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--paper); }
.pick:hover { border-color: var(--c); transform: translateY(-2px); }
.pick:has(input:checked) {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 22%, rgba(7, 18, 13, 0.86));
  box-shadow: 0 0 0 1px var(--c), 0 22px 60px -22px var(--c);
}
.pick:has(input:checked)::after {
  content: "Selected"; position: absolute; top: 10px; right: 12px;
  font-size: 0.72rem; font-weight: 600; color: #04140c; background: var(--c);
  padding: 3px 8px; border-radius: 999px;
}
.pick:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 3px; }

.cell--go {
  grid-area: go; --c: #2fd88a;
  min-height: 110px; cursor: pointer; text-align: left; color: #04140c;
  background: linear-gradient(120deg, #2fd88a, #8ff5c2 60%, #ffc94d);
  border-color: transparent;
  font: inherit;
}
.cell--go .cell-no, .cell--go .cell-sym { color: #04140c; }
.cell--go:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -24px #2fd88a; }
.go-label { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.45rem); letter-spacing: -0.02em; }
.form-note { grid-area: note; color: var(--mint); font-size: 0.95rem; min-height: 1.4em; text-align: center; }

/* ---------- Teacher resources page ---------- */
.res-hero { min-height: 78svh; }
/* the resources page has no 3D shape above its headline, so it doesn't need the home hero's top gap */
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .hero.res-hero { padding-top: 120px; min-height: 0; }
  /* phones: open a band above the title where the page's design shows at full strength (scene.js fits it there) */
  .hero.res-hero[data-shape]:not(.about-hero) { padding-top: max(270px, 34svh); }
}
.res-kicker { font-size: 0.92rem; color: var(--muted); margin-bottom: 18px; }
.res-kicker a { color: var(--mint); text-decoration: none; }
.res-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.res-title {
  font-family: var(--display); font-weight: 800; font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 1; letter-spacing: -0.04em; text-wrap: balance;
}
.res-hero .lede { margin-top: 22px; }
.res-group { padding-block: clamp(64px, 10vh, 110px); }
.res-group .lede { margin-top: 10px; }
.res-list { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* cards with a cover: the cover carries the element tile, so the small one is hidden */
.res:has(.res-cover) { grid-template-columns: 1fr; align-content: start; }
.res:has(.res-cover) .res-tile { display: none; }
.res:has(.res-cover) .res-buy { grid-column: 1; margin-top: auto; padding-top: 14px; }
.res:has(.res-cover) .res-body h3 { margin-top: 2px; }
.res-list--mega { grid-template-columns: repeat(3, 1fr); }
.res {
  --c: #2fd88a;
  display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto; gap: 6px 18px; align-items: start;
  padding: 22px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  background: color-mix(in srgb, var(--c) 6%, rgba(7, 18, 13, 0.88));
  transition: border-color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.res:hover { border-color: var(--c); transform: translateY(-2px); box-shadow: 0 22px 50px -28px var(--c); }
.res-tile {
  position: relative; grid-row: 1 / span 2; display: grid; place-items: center;
  width: 60px; aspect-ratio: 1; border-radius: 10px;
  border: 1.5px solid var(--c); color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.res-tile b { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.03em; }
.res-tile small { position: absolute; top: 4px; left: 6px; font-size: 0.62rem; font-weight: 600; }
.res-body h3 { font-size: 1.05rem; line-height: 1.3; }
.res-body p { margin-top: 6px; color: var(--muted); font-size: 0.94rem; line-height: 1.5; }
.res-buy { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.res-price { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; }
.res-list--mega .res { grid-template-columns: 1fr; padding: 26px; }
.res-list--mega .res-tile { grid-row: auto; width: 72px; }
.res-list--mega .res-tile b { font-size: 1.6rem; }
.res-list--mega .res-buy { grid-column: 1; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.res-list--mega .res-body h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.015em; margin-top: 8px; }
.res-list--mega .res-price { font-size: 1.7rem; }
.res-note { margin-top: 28px; font-size: 0.85rem; color: var(--muted); }
.res-cta-actions { justify-content: center; }

@media (max-width: 1080px) { .res-list, .res-list--mega { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .res-list, .res-list--mega { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .res { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, var(--c) 6%, rgba(7, 18, 13, 0.9)); } }

/* ---------- bundle covers: static JPG, swapped for a live animated cover by covers.js ---------- */
.res-cover {
  --k: 0.3;
  position: relative; grid-column: 1 / -1; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px; margin-bottom: 12px; background: #061009;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.res-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.res-cover.is-live img { visibility: hidden; }
.live-cover {
  --c: #2fd88a;
  position: absolute; top: 0; left: 0; width: 1200px; height: 675px;
  transform: scale(var(--k)); transform-origin: 0 0;
  color: #edf4ef; font-family: var(--body);
  background:
    radial-gradient(560px 460px at 880px 330px, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%),
    radial-gradient(420px 320px at 80px 640px, rgba(46, 201, 183, 0.12), transparent 70%),
    linear-gradient(160deg, #0a1f16, #061009);
}
.lc-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(143, 245, 194, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 245, 194, .05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(700px 500px at 850px 330px, #000, transparent 75%); -webkit-mask-image: radial-gradient(700px 500px at 850px 330px, #000, transparent 75%); }
.lc-art { position: absolute; right: 40px; top: 70px; width: 560px; height: 470px; overflow: visible; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 70%, transparent)); }
.lc-art * { transform-box: view-box; }
.lc-tile { position: absolute; left: 64px; top: 56px; width: 92px; height: 92px; border-radius: 14px; border: 3px solid var(--c); color: var(--c); display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, #07120d); box-shadow: 0 0 30px -6px var(--c); }
.lc-tile b { font-family: var(--display); font-weight: 600; font-size: 38px; letter-spacing: -0.03em; }
.lc-tile small { position: absolute; top: 6px; left: 9px; font-weight: 700; font-size: 15px; }
.lc-icon { width: 74%; height: 74%; filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 60%, transparent)); }
.lc-ribbon { position: absolute; left: 172px; top: 80px; padding: 10px 20px; border-radius: 999px; background: var(--c); color: #04140c; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.02em; }
.lc-brand { position: absolute; right: 56px; top: 50px; font-family: var(--display); font-weight: 600; font-size: 18px; color: rgba(237, 244, 239, 0.7); }
.lc-title { position: absolute; left: 64px; top: 186px; width: 600px; font-family: var(--display); font-weight: 800; font-size: 60px; line-height: 1.02; letter-spacing: -0.04em; }
.lc-title--long { font-size: 50px; }
.lc-formula { position: absolute; left: 64px; bottom: 150px; padding: 10px 18px; border-radius: 12px; border: 2px solid color-mix(in srgb, var(--c) 60%, transparent); background: rgba(4, 11, 8, 0.6); font-family: "Cambria Math", "Times New Roman", serif; font-style: italic; font-size: 34px; color: #fff; }
.lc-chips { position: absolute; left: 64px; right: 64px; bottom: 54px; display: flex; flex-wrap: wrap; gap: 10px; }
.lc-chips span { padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 21px; background: rgba(4, 11, 8, 0.72); border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); }
.lc-chips b { color: var(--c); margin-right: 6px; }

/* the motion: everything is paused unless the cover is on screen */
.live-cover [class^="a-"], .live-cover [class*=" a-"] { animation-play-state: paused; }
.is-playing .live-cover [class^="a-"], .is-playing .live-cover [class*=" a-"] { animation-play-state: running; }
.a-swing { animation: lc-swing 2.4s ease-in-out infinite alternate; }
.a-barA { animation: lc-bar 1.2s ease-in-out infinite alternate; }
.a-barB { animation: lc-bar 1.2s ease-in-out infinite alternate-reverse; }
.a-slide { animation: lc-slide 2.6s ease-in-out infinite alternate; }
.a-bob { animation: lc-stretch 1.4s ease-in-out infinite alternate; }
.a-bobmass { animation: lc-drop 1.4s ease-in-out infinite alternate; }
.a-bob--slow { animation-duration: 1.9s; }
.a-turn { animation: lc-turn 2.4s ease-in-out infinite alternate; }
.a-down { animation: lc-down 2.4s ease-in-out infinite alternate; }
.a-up { animation: lc-up 2.4s ease-in-out infinite alternate; }
.a-spin { animation: lc-spin 6s linear infinite; }
.a-pulse { animation: lc-pulse 1.6s ease-in-out infinite alternate; }
.a-pulse--2 { animation-delay: -0.8s; }
.a-roll { animation: lc-roll 3s ease-in-out infinite alternate; }
.a-roll--short { animation-name: lc-roll-short; }
.a-nudge { animation: lc-nudge 1.8s ease-in-out infinite alternate; }
.a-draw { stroke-dasharray: 1; animation: lc-draw 3.2s linear infinite; }
.a-fill { animation: lc-fade 1.6s ease-in-out infinite alternate; }
.a-bubble { animation: lc-bubble 2.1s ease-in infinite; }
.a-talk { opacity: 0; animation: lc-talk 5.4s ease-in-out infinite; }
.a-glow { animation: lc-fade 1.8s ease-in-out infinite alternate; }
.a-write { stroke-dasharray: 1; animation: lc-write 4.5s ease-in-out infinite; }
@keyframes lc-talk { 0%, 100% { opacity: 0; } 6%, 14% { opacity: 1; } 20% { opacity: 0; } }
@keyframes lc-write { 0% { stroke-dashoffset: 1; } 70%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes lc-swing { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes lc-bar { from { transform: scaleY(1); } to { transform: scaleY(0.15); } }
@keyframes lc-slide { from { transform: translate(-20px, -11px); } to { transform: translate(40px, 22px); } }
@keyframes lc-stretch { from { transform: scaleY(1); } to { transform: scaleY(1.15); } }
@keyframes lc-drop { from { transform: translateY(0); } to { transform: translateY(var(--d, 20px)); } }
@keyframes lc-turn { from { transform: rotate(0); } to { transform: rotate(41deg); } }
@keyframes lc-down { from { transform: translateY(-20px); } to { transform: translateY(20px); } }
@keyframes lc-up { from { transform: translateY(20px); } to { transform: translateY(-20px); } }
@keyframes lc-spin { to { transform: rotate(360deg); } }
@keyframes lc-pulse { from { transform: scale(0.94); } to { transform: scale(1.06); } }
@keyframes lc-roll { from { transform: translateX(0); } to { transform: translateX(200px); } }
@keyframes lc-roll-short { from { transform: translateX(0); } to { transform: translateX(110px); } }
@keyframes lc-nudge { from { transform: translateX(-10px); } to { transform: translateX(24px); } }
@keyframes lc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lc-fade { from { opacity: 0.3; } to { opacity: 1; } }
@keyframes lc-bubble { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-90px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-cover [class^="a-"], .live-cover [class*=" a-"] { animation: none !important; } .a-draw { stroke-dasharray: none; } }
/* phones: skip the glow filter (expensive to redraw while animating) and keep buttons finger-sized */
@media (max-width: 900px), (hover: none) { .lc-art { filter: none; } }
@media (max-width: 720px) { .res .btn--small { min-height: 44px; padding: 0 20px; } .brand { min-height: 44px; } }

/* resources page: slow drifting colour glows behind the molecule canvas */
.res-nebula { --tint: 47, 216, 138; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* moved by molecules.js with your scroll and pointer, not on a timer */
.res-nebula i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: 0.55; will-change: transform; }
.res-nebula i:nth-child(1) { left: -20vmax; top: -25vmax; background: radial-gradient(closest-side, rgba(var(--tint), 0.3), transparent); }
.res-nebula i:nth-child(2) { right: -25vmax; top: 20vh; background: radial-gradient(closest-side, rgba(46, 201, 183, 0.22), transparent); }
.res-nebula i:nth-child(3) { left: 10vw; bottom: -35vmax; background: radial-gradient(closest-side, rgba(255, 201, 77, 0.14), transparent); }

/* resources page layers moved by molecules.js with transforms (cheap for the graphics chip) */
.res-lattice { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat; will-change: transform; }
.res-wash {
  --tint: 47, 216, 138;
  position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: 110vmax; height: 110vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--tint), 0.1), rgba(var(--tint), 0.035) 50%, transparent);
  transform: translate3d(50vw, 50vh, 0) translate(-50%, -50%); will-change: transform;
}

/* covers are clickable: a small enlarge badge appears on hover/focus */
.res .res-cover { cursor: zoom-in; }
.res .res-cover::after {
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(4, 11, 8, 0.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23edf4ef' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
  border: 1px solid rgba(237, 244, 239, 0.25); opacity: 0.85; transition: opacity .2s ease, transform .2s ease;
}
.res .res-cover:hover::after, .res .res-cover:focus-visible::after { opacity: 1; transform: scale(1.08); }
.res .res-cover:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (hover: hover) { .res .res-cover::after { opacity: 0; } }

/* the big viewer */
.lightbox {
  width: min(1100px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow: auto;
  padding: clamp(14px, 3vw, 28px); border: 1px solid rgba(143, 245, 194, 0.28); border-radius: 22px;
  background: #081510; color: var(--paper);
  box-shadow: 0 40px 120px -30px rgba(47, 216, 138, 0.45);
}
.lightbox::backdrop { background: rgba(2, 8, 5, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox[open] { animation: pop-in .35s cubic-bezier(.2, .9, .2, 1.1); }
.has-cursor .lightbox, .has-cursor .lightbox * { cursor: auto; }
.has-cursor .lightbox button, .has-cursor .lightbox a { cursor: pointer; }
.lb-close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(7, 18, 13, 0.85); color: var(--paper); cursor: pointer; }
.lb-close:hover { border-color: var(--mint); color: var(--mint); }
.lb-frame { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 38px; }
.lb-stage { margin: 0; cursor: default; }
.lb-nav { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(7, 18, 13, 0.8); color: var(--paper); cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.lb-nav:hover { border-color: var(--mint); color: var(--mint); }
.lb-info { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 18px; padding: 0 60px; }
.lb-title { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: -0.02em; }
.lb-count { margin-top: 4px; color: var(--muted); font-size: 0.9rem; }
.lb-buy { display: flex; align-items: center; gap: 16px; }
.lb-price { font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; }
@media (max-width: 720px) {
  .lb-frame { grid-template-columns: 1fr 1fr; }
  .lb-stage { grid-column: 1 / -1; grid-row: 1; }
  .lb-prev { grid-row: 2; justify-self: start; } .lb-next { grid-row: 2; justify-self: end; }
  .lb-info { padding: 0; }
  .lb-buy { width: 100%; justify-content: space-between; }
}

/* ---------- Course package details page ---------- */
.pkg-section { padding-block: clamp(56px, 9vh, 100px); }
.pkg.res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(18px, 2.4vw, 30px); }
.pkg.res:hover { transform: none; }
.pkg .res-cover { margin: 0; grid-column: auto; }
.pkg--flip .res-cover { order: 2; }
.pkg-step { font-size: 0.9rem; color: var(--c); font-weight: 600; }
.pkg-title { margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.05; }
.pkg-lede { margin-top: 12px; color: var(--muted); font-size: 1.05rem; max-width: 36em; }
.pkg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.pkg-cols h4 { margin: 0 0 10px; font-size: 0.95rem; font-weight: 600; }
.pkg-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pkg-list li { position: relative; padding-left: 22px; font-size: 0.95rem; color: var(--paper); line-height: 1.45; }
.pkg-list li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c); }
.pkg .res-buy.pkg-buy { grid-column: auto; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.pkg-buy p { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pkg-per { color: var(--muted); font-size: 0.92rem; }
.pkg .res-price { font-size: 1.9rem; }

.compare-wrap { margin: 36px auto 0; max-width: 980px; overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: rgba(7, 18, 13, 0.82); }
.compare { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare th, .compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.compare thead th { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; padding-top: 20px; }
.compare tbody th { text-align: left; font-weight: 500; color: var(--muted); }
.compare tfoot td, .compare tfoot th { border-bottom: 0; padding-bottom: 20px; }
.compare .is-mix { background: rgba(198, 243, 107, 0.06); }
.compare thead .is-mix { color: #c6f36b; }
.compare .yes { color: #8ff5c2; font-weight: 600; }
.compare .no { color: rgba(162, 184, 171, 0.6); }

/* phones: the comparison table fits the screen instead of scrolling sideways */
@media (max-width: 640px) {
  .compare { min-width: 0; table-layout: fixed; }
  .compare th, .compare td { padding: 10px 6px; font-size: 0.8rem; }
  .compare thead th { font-size: 0.78rem; padding-top: 14px; }
  .compare tbody th { width: 34%; font-size: 0.78rem; }
  .compare tfoot .btn { min-height: 44px; min-width: 44px; padding: 0 10px; font-size: 0.8rem; width: 100%; }
}
@media (max-width: 860px) {
  .pkg.res { grid-template-columns: 1fr; }
  .pkg--flip .res-cover { order: 0; }
  .pkg-cols { grid-template-columns: 1fr; }
  .pkg-buy { flex-direction: column; align-items: stretch; }
  .pkg-buy .btn { width: 100%; }
}

/* package cards on the home page: details link next to the book button */
.plan-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.plan .plan-actions .btn { grid-column: auto; justify-self: auto; }
.plan-more { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--mint); font-weight: 600; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.plan-more:hover { color: var(--paper); }
@media (max-width: 640px) { .plan-actions { grid-column: 1 / -1; flex-direction: column; align-items: stretch; } .plan-more { justify-content: center; } }

.about-more { margin-top: 22px; }
/* ---------- About page ---------- */
.now-teaching { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.nt {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 8%, rgba(7, 18, 13, 0.6));
  font-weight: 600; font-size: 0.95rem;
}
.nt b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--c); color: var(--c); font-family: var(--display); font-weight: 600; font-size: 0.85rem; }
.about-block .copy p { margin-top: 18px; color: var(--muted); max-width: 36em; }
.about-block .copy h2 + p { margin-top: 24px; }
.about-block em { color: var(--paper); font-style: italic; }
.values { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; }
.values li { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); background: color-mix(in srgb, var(--c) 6%, rgba(7, 18, 13, 0.7)); }
.values .vt { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; border: 1.5px solid var(--c); color: var(--c); font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.values .vt small { position: absolute; top: 3px; left: 6px; font-family: var(--body); font-size: 0.62rem; font-weight: 700; }
.values h3 { font-size: 1.02rem; }
.values p { margin: 2px 0 0 !important; font-size: 0.92rem; }

.edu { list-style: none; padding: 0; margin: 44px auto 0; max-width: 1080px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.edu-item {
  display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  background: color-mix(in srgb, var(--c) 6%, rgba(7, 18, 13, 0.8));
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.edu-item:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 20px 50px -26px var(--c); }
.edu-tile {
  position: relative; display: grid; place-items: center; width: 84px; aspect-ratio: 1; border-radius: 12px;
  border: 2px solid var(--c); color: var(--c);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 6%, rgba(7, 18, 13, 0.7)) 70%);
  box-shadow: 0 0 26px -8px var(--c);
}
.edu-tile b { font-family: var(--display); font-weight: 600; font-size: 1.9rem; letter-spacing: -0.03em; margin-top: -10px; }
.edu-tile small { position: absolute; top: 5px; left: 8px; font-size: 0.7rem; font-weight: 700; }
.edu-tile i { position: absolute; bottom: 6px; font-style: normal; font-size: 0.62rem; color: var(--paper); opacity: 0.8; }
.edu-item h3 { font-size: 1rem; line-height: 1.3; }
.edu-where { margin-top: 4px; color: var(--c); font-size: 0.86rem; font-weight: 600; }
.edu-item p:not(.edu-where) { margin-top: 8px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.about-edu .lede { margin-top: 14px; }
/* tablets and phones: the credentials become a vertical timeline, tiles joined by a glowing line */
@media (max-width: 1080px) {
  .edu { --t: 72px; position: relative; grid-template-columns: 1fr; max-width: 620px; gap: 6px; margin-top: 36px; }
  .edu::before {
    content: ""; position: absolute; left: calc(16px + var(--t) / 2 - 1px); top: 46px; bottom: 46px; width: 2px; border-radius: 2px;
    background: linear-gradient(#2fd88a, #2ec9b7 25%, #c6f36b 50%, #8ff5c2 75%, #ffc94d); opacity: 0.55;
  }
  .edu-item {
    position: relative; flex-direction: row; align-items: center; gap: 18px; padding: 14px 16px;
    border-color: transparent; background: transparent;
  }
  .edu-item:hover { transform: none; box-shadow: none; background: color-mix(in srgb, var(--c) 7%, transparent); border-color: transparent; }
  .edu-tile { width: var(--t); flex: none; box-shadow: 0 0 0 6px var(--abyss), 0 0 26px -8px var(--c); }
  .edu-tile b { font-size: 1.6rem; }
  .edu-item h3 { font-size: 1.02rem; }
  .edu-where { font-size: 0.84rem; }
  .edu-item p:not(.edu-where) { margin-top: 4px; font-size: 0.9rem; }
  .values li { background: color-mix(in srgb, var(--c) 6%, rgba(7, 18, 13, 0.9)); }
}
@media (max-width: 480px) {
  .edu { --t: 60px; }
  .edu-item { gap: 14px; padding: 12px 10px; align-items: flex-start; }
  .edu::before { left: calc(10px + var(--t) / 2 - 1px); }
  .edu-tile b { font-size: 1.35rem; margin-top: -8px; }
  .edu-tile i { font-size: 0.55rem; bottom: 5px; }
  .about-edu .lede { font-size: 1rem; }
}

/* ---------- scroll-linked reactions (reveal.js sets --p from 0 to 1 as things scroll in) ---------- */
/* headings: each word rises, sharpens and brightens in turn */
.rv-on [data-rv="words"] .rv-w {
  --w: clamp(0, calc(var(--p, 1) * (var(--n) + 3) - var(--i)), 1);
  display: inline-block;
  opacity: calc(0.08 + var(--w) * 0.92);
  translate: 0 calc((1 - var(--w)) * 0.55em);
  filter: blur(calc((1 - var(--w)) * 6px));
}
/* boxes: rise, settle from slightly smaller, and fade in, staggered within each group */
.rv-on [data-rv="box"] {
  --b: clamp(0, calc(var(--p, 1) * 1.35 - var(--d, 0) * 0.07), 1);
  opacity: calc(var(--b));
  translate: 0 calc((1 - var(--b)) * 46px);
  scale: calc(0.95 + var(--b) * 0.05);
}
@media (max-width: 720px) {
  .rv-on [data-rv="box"] { translate: 0 calc((1 - var(--b)) * 28px); }
  .rv-on [data-rv="words"] .rv-w { filter: none; }
}

/* ---------- pinned opener (home hero, driven by js/intro.js) ---------- */
.hero.intro { display: block; height: 210svh; min-height: 0; padding: 0; }
.intro-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; padding-top: 72px; }
.intro .wrap { position: relative; z-index: 2; }
.intro-tiles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ft {
  --e: 0; --k: 1; --c: #2fd88a;
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--s) * var(--k)); aspect-ratio: 1; border-radius: 14%;
  display: grid; place-items: center;
  border: 2px solid var(--c); color: var(--c);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 7%, rgba(7, 18, 13, 0.82)) 70%);
  box-shadow: 0 0 34px -8px var(--c), inset 0 0 26px color-mix(in srgb, var(--c) 14%, transparent);
  transform: translate(-50%, -50%) translate(calc(var(--dx) * var(--e)), calc(var(--dy) * var(--e))) rotate(calc(var(--r) + var(--spin) * var(--e)));
  will-change: transform;
}
.ft b { font-family: var(--display); font-weight: 600; font-size: calc(var(--s) * var(--k) * 0.36); letter-spacing: -0.03em; line-height: 1; margin-top: -8%; }
.ft small { position: absolute; top: 7%; left: 10%; font-size: calc(var(--s) * var(--k) * 0.11); font-weight: 700; }
.ft i { position: absolute; bottom: 8%; font-style: normal; font-size: calc(var(--s) * var(--k) * 0.085); color: var(--paper); opacity: 0.8; }
/* the copy under the sign rises in as the tiles clear */
.intro-copy { opacity: var(--c1, 0); transform: translateY(calc((1 - var(--c1, 0)) * 40px)); }
.intro-copy .subject-bars { opacity: var(--c2, 0); transform: translateY(calc((1 - var(--c2, 0)) * 30px)); pointer-events: none; }
.intro.is-copy .subject-bars { pointer-events: auto; }
/* reduced motion: no pinning, no flying tiles, everything simply shown */
.intro--static.hero.intro { height: auto; }
.intro--static .intro-stage { position: relative; height: auto; min-height: 100svh; }
.intro--static .intro-tiles { display: none; }
/* phones held upright: flask at the top of the stage, sign and copy below it */
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .hero.intro { padding: 0; height: 200svh; }
  .intro-stage { align-items: flex-start; padding-top: max(32svh, 220px); }
  .ft { --k: 0.58; }
  /* phones: their own tile layout, five across the top and seven across the bottom, so no tile
     ever sits on the "Periodically N Er Dy" sign in the middle */
  .intro-tiles .ft:nth-child(1)  { --x: 12% !important; --y: 15% !important; --dx: -60vw !important; --dy: -40vh !important; }  /* H  */
  .intro-tiles .ft:nth-child(2)  { --x: 72% !important; --y: 71% !important; --dx: 60vw !important; --dy: 40vh !important; }  /* Au */
  .intro-tiles .ft:nth-child(3)  { --x: 87% !important; --y: 15% !important; --dx: 60vw !important; --dy: -40vh !important; }  /* C  */
  .intro-tiles .ft:nth-child(4)  { --x: 89% !important; --y: 58% !important; --dx: 70vw !important; --dy: 10vh !important; }  /* Na */
  .intro-tiles .ft:nth-child(5)  { --x: 86% !important; --y: 29% !important; --dx: 70vw !important; --dy: -20vh !important; }  /* O  */
  .intro-tiles .ft:nth-child(6)  { --x: 83% !important; --y: 89% !important; --dx: 50vw !important; --dy: 45vh !important; }  /* Cl */
  .intro-tiles .ft:nth-child(7)  { --x: 47% !important; --y: 90% !important; --dx: 0vw !important; --dy: 55vh !important; }  /* Fe */
  .intro-tiles .ft:nth-child(8)  { --x: 31% !important; --y: 13% !important; --dx: -20vw !important; --dy: -55vh !important; }   /* He */
  .intro-tiles .ft:nth-child(9)  { --x: 13% !important; --y: 82% !important; --dx: -60vw !important; --dy: 40vh !important; }  /* Ne */
  .intro-tiles .ft:nth-child(10) { --x: 14% !important; --y: 29% !important; --dx: -70vw !important; --dy: -20vh !important; }  /* Cu */
  .intro-tiles .ft:nth-child(11) { --x: 37% !important; --y: 67% !important; --dx: -50vw !important; --dy: 50vh !important; }  /* Ag */
  .intro-tiles .ft:nth-child(12) { --x: 12% !important; --y: 59% !important; --dx: -70vw !important; --dy: 10vh !important; }  /* U  */
}
/* short screens (landscape phones): drop the intro paragraph so the bars fit */
@media (max-height: 700px) {
  .intro .lede { display: none; }
  .intro .tagline { margin-top: 14px; }
  .intro .subject-bars { margin-top: 16px; }
}

/* ---------- subject bars (home hero) ---------- */
.subject-bars { display: grid; gap: 12px; margin-top: 30px; max-width: 520px; }
.sbar {
  --c: #2fd88a;
  display: flex; align-items: center; gap: 16px; min-height: 74px; padding: 10px 18px 10px 10px;
  border-radius: 18px; text-decoration: none; color: var(--paper);
  border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 16%, rgba(7, 18, 13, 0.85)), rgba(7, 18, 13, 0.75));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s ease, box-shadow .25s ease;
}
.sbar:hover, .sbar:focus-visible { transform: translateX(6px); border-color: var(--c); box-shadow: 0 18px 50px -24px var(--c); }
.sbar-tile {
  position: relative; flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px;
  border: 2px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: 0 0 22px -6px var(--c);
}
.sbar-tile b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.03em; }
.sbar-tile small { position: absolute; top: 3px; left: 6px; font-size: 0.62rem; font-weight: 700; }
.sbar-text { display: grid; gap: 2px; flex: 1; }
.sbar-text b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; }
.sbar-text small { color: var(--muted); font-size: 0.9rem; }
.sbar-go { flex: none; color: var(--c); transition: transform .25s ease; }
.sbar:hover .sbar-go { transform: translateX(4px); }

/* ---------- subject pages ---------- */
.subj-head { display: flex; align-items: center; gap: 18px; }
.subj-tile {
  position: relative; flex: none; display: grid; place-items: center; width: clamp(72px, 9vw, 104px); aspect-ratio: 1; border-radius: 16px;
  border: 2.5px solid var(--c); color: var(--c);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 6%, rgba(7, 18, 13, 0.7)) 70%);
  box-shadow: 0 0 30px -8px var(--c);
}
.subj-tile b { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.03em; margin-top: -10%; }
.subj-tile small { position: absolute; top: 6px; left: 9px; font-size: 0.72rem; font-weight: 700; }
.subj-tile i { position: absolute; bottom: 7px; font-style: normal; font-size: 0.62rem; color: var(--paper); opacity: 0.8; }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.sp {
  --c: #2fd88a;
  display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  background: color-mix(in srgb, var(--c) 6%, rgba(7, 18, 13, 0.88));
}
.sp .sp-cover { margin: 0 0 6px; cursor: zoom-in; }
.sp .sp-cover:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.sp--mix { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 30px 80px -40px var(--c); }
.sp-tile { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; border: 1.5px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.sp-tile b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.sp-tile small { position: absolute; top: 3px; left: 6px; font-size: 0.62rem; font-weight: 700; }
.sp h3 { margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; }
.sp-for { color: var(--muted); font-size: 0.96rem; flex: 1; }
.sp-price { color: var(--muted); font-size: 0.92rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.sp-price b { font-family: var(--display); font-weight: 800; font-size: 2.2rem; letter-spacing: -0.04em; color: var(--paper); }
.sp-price span { flex-basis: 100%; font-size: 0.86rem; }
.sp-actions { display: grid; gap: 4px; margin-top: 6px; }
.sp-actions .btn { width: 100%; }
.sp-actions .plan-more { justify-content: center; }
@media (max-width: 900px) { .sp-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }
@media (max-width: 640px) {
  .sbar { min-height: 66px; gap: 12px; }
  .sbar-tile { width: 46px; height: 46px; }
  .sbar-text b { font-size: 1.15rem; }
  .sbar-text small { font-size: 0.82rem; }
}

/* discount applied in the booking table */
.discount-banner {
  max-width: 980px; margin: 28px auto 0; padding: 12px 18px; border-radius: 12px;
  border: 1px solid rgba(255, 201, 77, 0.5); background: rgba(255, 201, 77, 0.1); color: #ffe2a3;
  text-align: center; font-weight: 500;
}
.discount-banner b { font-family: var(--display); font-weight: 600; color: #ffc94d; letter-spacing: 0.02em; }
.pick-mass s { color: var(--muted); font-family: var(--body); font-weight: 400; font-size: 0.8em; margin-right: 6px; }

/* ---------- Book now pop-up with the spin wheel ---------- */
.spin {
  width: min(880px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 0; border: 1px solid rgba(143, 245, 194, 0.3); border-radius: 24px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(47, 216, 138, 0.16), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, rgba(255, 201, 77, 0.12), transparent 60%),
    #081510;
  color: var(--paper);
  box-shadow: 0 40px 120px -30px rgba(47, 216, 138, 0.45);
}
/* the pop-up sits above the custom cursor, so it uses the normal one */
.has-cursor .spin, .has-cursor .spin * { cursor: auto; }
.has-cursor .spin button, .has-cursor .spin a { cursor: pointer; }
.spin::backdrop { background: rgba(2, 8, 5, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.spin[open] { animation: pop-in .45s cubic-bezier(.2, .9, .2, 1.1); }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
.spin-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(7, 18, 13, 0.7); color: var(--paper); cursor: pointer;
}
.spin-close:hover { border-color: var(--mint); color: var(--mint); }
.spin-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding: clamp(24px, 4vw, 48px); }
.wheel-wrap { position: relative; width: 100%; max-width: 360px; aspect-ratio: 1; margin: 0 auto; }
.wheel {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 18px 40px rgba(47, 216, 138, 0.35));
  overflow: visible;
}
.wheel-spin { transform-box: fill-box; transform-origin: center; transition: transform 5s cubic-bezier(.12, .8, .1, 1); }
.wheel text { font-family: var(--display); font-weight: 600; fill: #04140c; }
.wheel .sym { font-size: 15px; }
.wheel .lbl { font-size: 8.5px; font-family: var(--body); font-weight: 700; }
.wheel text.miss { fill: #a2b8ab; }
.wheel .lbl.miss { font-size: 7.5px; }
.code-row { margin-top: 10px; }
.wheel-pointer {
  position: absolute; top: -6px; left: 50%; z-index: 2; transform: translateX(-50%);
  width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #fff;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.wheel-hub {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 26%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: #081510; border: 3px solid #ffc94d; box-shadow: 0 0 30px rgba(255, 201, 77, 0.5);
}
.wheel-hub b { font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.4rem); color: #ffc94d; letter-spacing: -0.03em; }
.spin-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; letter-spacing: -0.035em; }
.spin-sub { margin-top: 12px; color: var(--muted); font-size: 1.05rem; }
.spin-actions { display: grid; gap: 6px; margin-top: 26px; }
.spin-later { min-height: 44px; border: 0; background: none; color: var(--muted); font: 500 0.95rem var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.spin-later:hover { color: var(--paper); }
.spin-result { margin-top: 22px; display: grid; gap: 14px; animation: pop-in .4s ease; }
.spin-result strong { color: #ffc94d; }
.code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.06em;
  padding: 8px 16px; border: 2px dashed #ffc94d; border-radius: 10px; color: #ffc94d; background: rgba(255, 201, 77, 0.08);
}
.spin-fine { margin-top: 18px; font-size: 0.82rem; color: var(--muted); }

/* inline button in the bundles section to open the offer */
.offer-inline {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 18px; padding: 6px 18px 6px 6px;
  border: 1px solid rgba(255, 201, 77, 0.55); border-radius: 999px;
  background: rgba(255, 201, 77, 0.08); color: var(--paper);
  font: 600 0.95rem var(--body); cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.offer-inline:hover { transform: translateY(-2px); border-color: #ffc94d; background: rgba(255, 201, 77, 0.14); }
.offer-fab-tile {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#2fd88a 0 25%, #2ec9b7 0 50%, #c6f36b 0 75%, #ffc94d 0);
  color: #04140c; font-family: var(--display); font-weight: 800; font-size: 0.8rem;
  animation: fab-spin 6s linear infinite;
}
@keyframes fab-spin { 0%, 80% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .spin-grid { grid-template-columns: 1fr; gap: 18px; padding: 56px 20px 24px; text-align: center; }
  .wheel-wrap { max-width: 250px; }
  .code-row { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-spin { transition-duration: .8s; }
  .offer-fab-tile { animation: none; }
}

/* footer */
.foot { border-top: 1px solid var(--line); background: rgba(4, 11, 8, 0.9); padding: 36px 0; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--paper); }
.copy-small { margin-left: auto; color: var(--muted); font-size: 0.9rem; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .elements { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-links, .nav > .btn { display: none; }
  .menu {
    display: grid; gap: 6px; place-content: center; margin-left: auto;
    width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
    background: rgba(7, 18, 13, 0.6); cursor: pointer;
  }
  .menu span { display: block; width: 18px; height: 1.5px; background: var(--paper); transition: transform .2s ease; }
  .menu[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .hero { padding-top: 96px; padding-bottom: 72px; }
  /* blur is expensive on phones while the particles animate; use solid panels instead */
  .el, .plan, .marquee-row:first-child { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .el { background: rgba(7, 18, 13, 0.5); }
  .elements { background: rgba(180, 225, 200, 0.1); }
  .el h3, .el p { text-shadow: 0 0 2px #07120d, 0 1px 10px #07120d, 0 0 18px rgba(7, 18, 13, 0.9); }
  .plan { background: rgba(7, 18, 13, 0.86); }
  .plan--mix { background: rgba(12, 36, 26, 0.92); }
  .scene:not(.hero) { padding: 80px 0; }
  .foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* portrait phones and tablets: one column, with the top of the hero left open for the atom.
   Landscape phones keep the side-by-side layout (scene.js uses the same query). */
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .wrap--right { justify-content: flex-start; }
  .hero { align-items: flex-start; padding-top: max(300px, 44svh); min-height: 0; }
  /* the field sits behind text here, so give copy a soft backing */
  .how .copy, .about .copy, .faq .copy, .copy--plans > .h2, .copy--plans > p {
    background: radial-gradient(120% 100% at 30% 50%, rgba(7, 18, 13, 0.7), transparent 80%);
  }
}
/* landscape phones: keep text to one side and narrower so the shape has room */
@media (max-width: 900px) and (orientation: landscape) and (min-width: 601px) {
  .copy, .copy--hero, .copy--plans { max-width: 54%; }
  .hero { min-height: 100svh; }
  .lockup-word { font-size: 2.4rem; }
  .etile { width: clamp(84px, 11vw, 104px); }
  .etile b { margin-top: -6cqw; }
  .etile i { bottom: 9cqw; }
  .etile em { display: none; }
}
@media (max-width: 640px) {
  .lede { font-size: 1.1rem; }
  .lockup-word { font-size: 9.2vw; }
  .etile { width: calc((100vw - 2 * var(--gutter) - 24px) / 3.4); }
  /* phones: keep the atomic number, symbol and name in their own spaces (no overlap) */
  .etile b { margin-top: -6cqw; }
  .etile i { bottom: 9cqw; }
  .etile em { display: none; }
  .hero .lede { margin-top: 20px; }
  .actions { margin-top: 28px; }
  .elements { margin-top: 40px; }
  .el { padding: 18px 16px 20px; }
  .el .tile { width: 44px; }
  .el .tile b { font-size: 1.05rem; }
  .el .tile small { font-size: 0.6rem; top: 2px; left: 4px; }
  .el h3 { margin-top: 14px; font-size: 0.98rem; }
  .el p { font-size: 0.86rem; }
  /* compact periodic-table form on phones: name + email share a row, packages sit three across */
  .book .lede { font-size: 1rem; }
  .ptable {
    margin-top: 28px; gap: 8px;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "nm nm nm em em em"
      "gc gc gc gc gc gc"
      "in in gr gr mx mx"
      "ms ms ms ms ms ms"
      "go go go go go go"
      "note note note note note note";
  }
  .ptable:has(.cell--cal) {
    grid-template-areas:
      "nm nm nm em em em"
      "gc gc gc gc gc gc"
      "in in gr gr mx mx"
      "cal cal cal cal cal cal"
      "ms ms ms ms ms ms"
      "go go go go go go"
      "note note note note note note";
  }
  .cell { min-height: 0; padding: 28px 12px 10px; border-radius: 10px; gap: 4px; }
  .cell-no { top: 8px; left: 10px; font-size: 0.7rem; }
  .cell-sym { top: 6px; right: 10px; font-size: 1.15rem; }
  .cell label:not(.pick) { font-size: 0.82rem; }
  .cell input:not([type="radio"]) { min-height: 40px; font-size: 16px; padding: 6px 0; }
  .cell textarea { min-height: 84px; font-size: 16px; }
  .cell--ms { padding-top: 30px; }
  .pick { min-height: 112px; padding: 26px 8px 10px; }
  .pick .cell-sym { font-size: 1.7rem; margin-top: -4px; }
  .pick-name { font-size: 0.8rem; line-height: 1.2; }
  .pick-mass { font-size: 0.95rem; }
  .pick-mass s { display: block; font-size: 0.72rem; margin: 0; }
  .pick:has(input:checked)::after { content: none; }
  .cell--go { min-height: 72px; padding-top: 26px; }
  .go-label { font-size: 1.05rem; }
  .discount-banner { margin-top: 20px; font-size: 0.92rem; }
  .plan { grid-template-columns: 56px 1fr; padding: 20px; column-gap: 16px; }
  .plan-price, .plan-week { grid-column: 2; grid-row: auto; text-align: left; }
  .plan-price { margin-top: 16px; }
  .plan-price span { display: inline; margin-right: 6px; }
  .plan-list { grid-column: 1 / -1; }
  .plan .btn { grid-column: 1 / -1; justify-self: stretch; }
  .copy-small { margin-left: 0; }
  .brand-name { font-size: 0.92rem; }
  .actions .btn { flex: 1 1 100%; }
}

/* ---------- home hero: the 3D lab bench (js/hero-tools.js) ---------- */
.intro-tiles canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- subject pages: shared pieces ---------- */
.subj .res-hero { overflow: hidden; }
/* equation band: glides sideways with your scroll (js/subject.js) */
.eq-band { position: relative; z-index: 2; overflow: hidden; padding: 18px 0; border-block: 1px solid var(--line); background: rgba(7, 18, 13, 0.7); }
.eq-track { display: flex; width: max-content; will-change: transform; }
.eq-track span { flex: none; padding: 0 28px; font-family: "Cambria Math", "Times New Roman", serif; font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--paper); white-space: nowrap; }
.eq-track span::after { content: "◆"; margin-left: 56px; font-style: normal; font-size: 0.6em; color: var(--accent, var(--mint)); vertical-align: middle; }

/* topic cards open an animated scene */
.elements[data-topics] .el { position: relative; cursor: pointer; transition: background-color .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }
.elements[data-topics] .el:hover { transform: translateY(-3px); }
.elements[data-topics] .el:focus-visible { outline: 2px solid var(--accent, var(--mint)); outline-offset: -4px; }
.el-play { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--accent, var(--mint)); border: 1px solid color-mix(in srgb, var(--accent, #8ff0bf) 40%, transparent); background: color-mix(in srgb, var(--accent, #8ff0bf) 8%, transparent); transition: background-color .2s ease; }
.el:hover .el-play { background: color-mix(in srgb, var(--accent, #8ff0bf) 18%, transparent); }
.elements--ten { grid-template-columns: repeat(5, 1fr); }
.elements--ten .el { padding: 24px 18px 24px; }
@media (max-width: 1080px) { .elements--ten { grid-template-columns: repeat(2, 1fr); } }

/* flat topic scene (fallback when 3D isn't available) */
.tp-stage { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; color: var(--accent, #2fd88a); background: radial-gradient(120% 90% at 60% 40%, rgba(47, 216, 138, 0.1), transparent 70%), #06110c; border: 1px solid var(--line); }
.tp-svg { width: 100%; height: 100%; display: block; }
.tp-svg text { font-family: var(--display); font-weight: 600; stroke: none; }
.tp-svg * { transform-box: view-box; }
.tp-desc { margin-top: 6px; color: var(--muted); max-width: 46ch; }
.tp-spin { animation: tp-spin var(--t, 6s) linear infinite; }
.tp-rock { animation: tp-rock var(--t, 2.4s) ease-in-out infinite alternate; }
.tp-move { animation: tp-move var(--t, 2s) ease-in-out infinite alternate; }
.tp-go { animation: tp-go var(--t, 2.8s) cubic-bezier(.55, 0, 1, .45) infinite; }
.tp-pulse { animation: tp-pulse var(--t, 1.6s) ease-in-out infinite alternate; }
.tp-draw { stroke-dasharray: 1; animation: tp-draw var(--t, 3s) linear infinite; }
.tp-sy { animation: tp-sy var(--t, 2s) ease-in-out infinite alternate; }
.tp-rise { animation: tp-rise 2s ease-in infinite; }
.tp-dip { animation: tp-dip var(--t, 1.6s) ease-in-out infinite; }
.tp-peak { animation: tp-peak var(--t, 1.6s) ease-in-out infinite; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
@keyframes tp-rock { from { transform: rotate(calc(var(--a, 10deg) * -1)); } to { transform: rotate(var(--a, 10deg)); } }
@keyframes tp-move { from { transform: translate(0, 0); } to { transform: translate(var(--mx, 0px), var(--my, 0px)); } }
@keyframes tp-go { 0% { transform: translateX(0); opacity: 0; } 10%, 85% { opacity: 1; } 100% { transform: translateX(var(--mx, 200px)); opacity: 0; } }
@keyframes tp-pulse { from { opacity: 0.3; } to { opacity: 1; } }
@keyframes tp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tp-sy { from { transform: scaleY(var(--s0, 1)); } to { transform: scaleY(var(--s1, 0.5)); } }
@keyframes tp-rise { from { transform: translateY(0); opacity: 0.9; } to { transform: translateY(-110px); opacity: 0; } }
@keyframes tp-dip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.1); } }
@keyframes tp-peak { 0%, 100% { transform: scaleY(0.1); } 50% { transform: scaleY(1); } }

/* labs: shared frame */
.lab { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; padding: clamp(14px, 2.4vw, 24px); border-radius: var(--r-lg); border: 1px solid var(--line); background: rgba(7, 18, 13, 0.82); }
.lab-label { margin-top: 18px; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lab-label:first-child { margin-top: 0; }
.lab-label b { color: var(--paper); }
.lab-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lab-note { margin-top: 14px; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 900px) { .lab { grid-template-columns: 1fr; } }
/* phones: tool screens sized for the narrow screen, and the molecule flask sits below its message */
@media (max-width: 640px) {
  .lab { margin-top: 32px; padding: 12px; }
  .lab-screen { min-height: 260px; }
  .mlab-stage { min-height: 440px; }
  .mlab-stage canvas { top: 78px; height: calc(100% - 78px); }
  .mlab-status { top: 10px; left: 10px; right: 10px; padding: 8px 12px; font-size: 0.9rem; }
  .mlab-goals { grid-template-columns: 1fr; }
  .ph-beaker { min-height: 260px; }
}
/* phones: the 3D shape can sit behind the hero text, so give the words a soft dark backing */
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .hero.res-hero .copy { position: relative; isolation: isolate; }
  .hero.res-hero .copy::before { content: ""; position: absolute; inset: -28px -20px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(7, 18, 13, 0.82), rgba(7, 18, 13, 0.5) 65%, transparent); }
  .hero.res-hero .lede { text-shadow: 0 1px 10px #07120d, 0 0 2px #07120d; color: #c3d4ca; }
}
/* covers shown small (phone package cards): drop the fine print, enlarge the title */
.lc-small .lc-chips, .lc-small .lc-formula, .lc-small .lc-brand { display: none; }
.lc-small .lc-title { top: 200px; width: 560px; font-size: 76px; }
.lc-small .lc-ribbon { font-size: 30px; padding: 12px 24px; }
.lc-small .lc-tile { width: 112px; height: 112px; }

/* ---------- chemistry: the wet lab (rounded glass, bubbles, warm green and gold) ---------- */
.subj--chem { --accent: #2fd88a; }
.chem-bubbles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.chem-bubbles i {
  position: absolute; left: var(--x); bottom: -40px; width: var(--s); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(143, 245, 194, 0.45);
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.5), rgba(143, 245, 194, 0.08) 45%, transparent 70%);
  transform: translate3d(0, calc(var(--sy, 0) * -0.9px * var(--v)), 0);
  opacity: 0.75;
}
.subj--chem .elements { border-radius: 28px; }
.subj--chem .el { overflow: hidden; }
.subj--chem .el::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(to top, rgba(47, 216, 138, 0.16), transparent); transition: height .45s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.subj--chem .el:hover::after, .subj--chem .el:focus-visible::after { height: 70%; }
.lab--chem { border-radius: 30px; border-color: rgba(47, 216, 138, 0.25); box-shadow: inset 0 0 80px rgba(47, 216, 138, 0.05); }
/* molecule lab */
.mlab-stage { position: relative; min-height: 380px; border-radius: 24px; background: radial-gradient(70% 60% at 50% 60%, rgba(47, 216, 138, 0.1), transparent 70%), #06110c; border: 1px solid var(--line); overflow: hidden; }
.mlab-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mlab-status { position: absolute; left: 14px; right: 14px; top: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(7, 18, 13, 0.82); border: 1px solid var(--line); font-weight: 600; font-size: 0.98rem; transition: border-color .3s ease, color .3s ease; }
.mlab-status.is-win { border-color: #ffc94d; color: #ffe08a; }
.atom-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.atom-btn {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 64px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--c); color: var(--c); font: inherit;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 24%, transparent), color-mix(in srgb, var(--c) 6%, #07120d) 70%);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}
.atom-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px -12px var(--c); }
/* one-column lab (tablets, phones): compact atom keys, six across when there's room */
@media (max-width: 900px) {
  .atom-btns { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .atom-btn { aspect-ratio: auto; min-height: 72px; }
  .atom-btn b { font-size: 1.25rem; margin-top: 0; }
  .atom-btn i { display: none; }
}
@media (max-width: 480px) { .atom-btns { grid-template-columns: repeat(3, 1fr); } }
.atom-btn:active { transform: scale(.94); }
.atom-btn b { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin-top: -10%; }
.atom-btn small { position: absolute; top: 5px; left: 8px; font-size: 0.66rem; font-weight: 700; }
.atom-btn i { position: absolute; bottom: 6px; font-style: normal; font-size: 0.62rem; color: var(--paper); opacity: 0.8; }
.mlab-goals { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mlab-goals li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--line); color: var(--muted); font-size: 0.82rem; }
.mlab-goals .mg-f { font-family: var(--display); font-weight: 600; color: var(--muted); filter: blur(3px); transition: filter .4s ease, color .4s ease; }
.mlab-goals li.found { border-style: solid; border-color: rgba(255, 201, 77, 0.6); color: var(--paper); }
.mlab-goals li.found .mg-f { filter: none; color: #ffc94d; }
/* pH explorer */
.ph { --liq: #4cc86c; align-items: center; }
.ph-beaker { display: grid; place-items: center; min-height: 340px; border-radius: 24px; background: radial-gradient(60% 60% at 50% 60%, color-mix(in srgb, var(--liq) 22%, transparent), transparent 70%), #06110c; border: 1px solid var(--line); transition: background .5s ease; }
.ph-glass { position: relative; width: min(200px, 50%); aspect-ratio: 0.8; border: 3px solid rgba(237, 244, 239, 0.7); border-top: none; border-radius: 0 0 26px 26px; }
.ph-glass::before { content: ""; position: absolute; top: -3px; left: -14px; right: -14px; height: 3px; background: rgba(237, 244, 239, 0.7); border-radius: 2px; }
.ph-liquid { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 62%; border-radius: 0 0 20px 20px; overflow: hidden; background: linear-gradient(to top, color-mix(in srgb, var(--liq) 100%, #000 15%), color-mix(in srgb, var(--liq) 75%, transparent)); box-shadow: 0 0 40px -6px var(--liq); transition: background .5s ease, box-shadow .5s ease; }
.ph-liquid i { position: absolute; bottom: -12px; width: 10px; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.55); animation: ph-bub 2.6s ease-in infinite; }
.ph-liquid i:nth-child(1) { left: 20%; } .ph-liquid i:nth-child(2) { left: 45%; animation-delay: -.8s; width: 7px; } .ph-liquid i:nth-child(3) { left: 66%; animation-delay: -1.5s; } .ph-liquid i:nth-child(4) { left: 82%; animation-delay: -2.1s; width: 6px; }
@keyframes ph-bub { to { transform: translateY(-150px); opacity: 0; } }
.ph-read { display: flex; align-items: baseline; gap: 12px; }
.ph-read span { font-family: var(--display); font-weight: 600; color: var(--muted); font-size: 1.2rem; }
.ph-read b { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem, 7vw, 5rem); line-height: 1; color: var(--liq); transition: color .4s ease; }
.ph-kind { margin-top: 6px; font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.ph-ex, .ph-conc { margin-top: 6px; color: var(--muted); }
.ph-ex b, .ph-conc b { color: var(--paper); font-weight: 600; }
.ph-slider { width: 100%; margin-top: 22px; height: 44px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.ph-slider::-webkit-slider-runnable-track { height: 14px; border-radius: 8px; background: linear-gradient(90deg, #e8222b, #f7941d, #fde047, #4cc86c, #2a9fd6, #6b3fb8); }
.ph-slider::-moz-range-track { height: 14px; border-radius: 8px; background: linear-gradient(90deg, #e8222b, #f7941d, #fde047, #4cc86c, #2a9fd6, #6b3fb8); }
.ph-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -8px; border-radius: 50%; background: #fff; border: 4px solid var(--liq); box-shadow: 0 0 18px var(--liq); }
.ph-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--liq); }
.ph-scale { display: flex; gap: 8px; margin-top: 10px; }
.ph-scale button { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: rgba(7, 18, 13, 0.6); color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; }
.ph-scale button:hover { border-color: var(--liq); }

/* ---------- physics: blueprint and motion (crisp panels, teal readouts, measurement grid) ---------- */
.subj--phys { --accent: #2ec9b7; background: #06110f; }
.blueprint {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(46, 201, 183, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 201, 183, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(46, 201, 183, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 201, 183, 0.035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
}
.subj--phys main, .subj--phys .foot { position: relative; z-index: 1; }
.phys-streaks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.phys-streaks i { position: absolute; top: var(--y); left: -10%; width: var(--w); height: 1.5px; background: linear-gradient(90deg, transparent, rgba(46, 201, 183, 0.7), #c6f36b); transform: translate3d(calc(var(--sy, 0) * 1.2px * var(--v)), 0, 0); opacity: 0.6; }
.subj--phys .subj-tile { border-radius: 6px; }
.hud { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hud li { display: flex; gap: 8px; align-items: baseline; padding: 7px 12px; border: 1px solid rgba(46, 201, 183, 0.4); border-radius: 4px; background: rgba(6, 17, 15, 0.7); font-size: 0.9rem; }
.hud span { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.hud b { color: #2ec9b7; font-variant-numeric: tabular-nums; }
.subj--phys .eq-band { background: rgba(6, 17, 15, 0.8); }
/* corner brackets instead of round glass */
.subj--phys .elements { border-radius: 4px; }
.subj--phys .el { background: linear-gradient(#2ec9b7, #2ec9b7) top left / 14px 2px no-repeat, linear-gradient(#2ec9b7, #2ec9b7) top left / 2px 14px no-repeat, linear-gradient(#2ec9b7, #2ec9b7) bottom right / 14px 2px no-repeat, linear-gradient(#2ec9b7, #2ec9b7) bottom right / 2px 14px no-repeat, rgba(6, 17, 15, 0.78); }
.subj--phys .el:hover { background-color: rgba(10, 30, 27, 0.9); }
.subj--phys .el .tile { border-radius: 3px; border-color: #2ec9b7; color: #2ec9b7; }
.subj--phys .sp, .subj--phys .res { border-radius: 6px; }
.lab--phys { border-radius: 6px; border-color: rgba(46, 201, 183, 0.3); background: linear-gradient(#2ec9b7, #2ec9b7) top left / 22px 2px no-repeat, linear-gradient(#2ec9b7, #2ec9b7) top left / 2px 22px no-repeat, linear-gradient(#2ec9b7, #2ec9b7) bottom right / 22px 2px no-repeat, linear-gradient(#2ec9b7, #2ec9b7) bottom right / 2px 22px no-repeat, rgba(6, 17, 15, 0.88); }
.lab-screen { position: relative; min-height: 360px; border-radius: 4px; border: 1px solid rgba(46, 201, 183, 0.25); overflow: hidden; background: linear-gradient(rgba(46, 201, 183, 0.06) 1px, transparent 1px) 0 0 / 30px 30px, linear-gradient(90deg, rgba(46, 201, 183, 0.06) 1px, transparent 1px) 0 0 / 30px 30px, #050e0c; }
.lab-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.lab-controls { display: grid; align-content: start; gap: 6px; }
.ctl { display: grid; gap: 4px; margin-top: 8px; }
.ctl span { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ctl b { color: #2ec9b7; font-variant-numeric: tabular-nums; }
.ctl input[type="range"] { width: 100%; height: 44px; accent-color: #2ec9b7; cursor: pointer; }
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 16px 0 0; }
.readout div { padding: 10px 12px; border: 1px solid rgba(46, 201, 183, 0.3); border-radius: 4px; background: rgba(5, 14, 12, 0.8); }
.readout dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.readout dd { margin: 2px 0 0; font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: #c6f36b; font-variant-numeric: tabular-nums; }
.energy { display: grid; gap: 8px; margin-top: 16px; }
.energy-bar { position: relative; height: 34px; border-radius: 4px; border: 1px solid rgba(46, 201, 183, 0.3); overflow: hidden; background: rgba(5, 14, 12, 0.8); }
.energy-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--f, 0.5)); background: linear-gradient(90deg, rgba(46, 201, 183, 0.35), #2ec9b7); }
.energy-bar--k i { background: linear-gradient(90deg, rgba(255, 201, 77, 0.35), #ffc94d); }
.energy-bar span { position: relative; display: flex; align-items: center; height: 100%; padding: 0 12px; font-size: 0.85rem; font-weight: 600; text-shadow: 0 1px 4px #000; }
#pendCanvas { cursor: grab; }
#pendCanvas:active { cursor: grabbing; }
#pendCanvas:focus-visible { outline: 2px solid #2ec9b7; outline-offset: -2px; }

/* ---------- the 3D topic room (js/room.js) ---------- */
.room { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #020604; color: var(--paper); overflow: hidden; }
.room::backdrop { background: #000; }
.room[open] { animation: room-in .6s ease; }
@keyframes room-in { from { opacity: 0; } }
.room canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.room canvas:active { cursor: grabbing; }
.room-bars::before, .room-bars::after { content: ""; position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 2; pointer-events: none; transition: transform 1.4s cubic-bezier(.6, 0, .2, 1); }
.room-bars::before { top: 0; } .room-bars::after { bottom: 0; }
.room.is-in .room-bars::before { transform: translateY(-55%); } .room.is-in .room-bars::after { transform: translateY(55%); }
.room-fade { position: absolute; inset: 0; z-index: 3; background: #000; pointer-events: none; opacity: 1; transition: opacity 1.2s ease; }
.room.is-in .room-fade { opacity: 0; }
.room-top { position: absolute; z-index: 4; top: max(14px, env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none; }
.room-title { pointer-events: auto; opacity: 0; transform: translateY(10px); transition: opacity .8s ease 1.2s, transform .8s ease 1.2s; }
.room.is-in .room-title { opacity: 1; transform: none; }
.room-title small { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, var(--mint)); }
.room-title h2 { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 3vw, 2rem); letter-spacing: -0.02em; text-shadow: 0 2px 20px #000; }
.room-close { pointer-events: auto; flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(237, 244, 239, 0.3); background: rgba(2, 6, 4, 0.7); color: var(--paper); cursor: pointer; }
.room-close:hover { border-color: var(--mint); color: var(--mint); }
.room-bottom { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.room-law { max-width: 560px; padding: 14px 16px; border-radius: 14px; background: rgba(2, 6, 4, 0.72); border: 1px solid rgba(237, 244, 239, 0.14); opacity: 0; transform: translateY(12px); transition: opacity .8s ease 1.8s, transform .8s ease 1.8s; }
.room.is-in .room-law { opacity: 1; transform: none; }
.room-law b { display: block; font-family: "Cambria Math", "Times New Roman", serif; font-style: italic; font-size: 1.35rem; color: #ffe08a; }
.room-law p { margin-top: 4px; color: var(--muted); font-size: 0.95rem; }
.room-hud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.room-hud span { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(46, 201, 183, 0.35); font-size: 0.85rem; font-variant-numeric: tabular-nums; color: #c6f36b; background: rgba(2, 6, 4, 0.6); }
.room-nav { display: flex; gap: 8px; align-items: center; }
.room-nav button { min-width: 48px; height: 48px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(237, 244, 239, 0.3); background: rgba(2, 6, 4, 0.7); color: var(--paper); font: inherit; font-weight: 600; cursor: pointer; }
.room-nav button:hover { border-color: var(--mint); color: var(--mint); }
.room-hint { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 8px 14px; border-radius: 999px; background: rgba(2, 6, 4, 0.6); font-size: 0.85rem; color: var(--muted); pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.room.show-hint .room-hint { opacity: 1; }
.has-cursor .room, .has-cursor .room * { cursor: auto; }
.has-cursor .room canvas { cursor: grab; }
.has-cursor .room button { cursor: pointer; }
@media (max-width: 640px) {
  .room-law { padding: 10px 12px; }
  .room-law b { font-size: 1.1rem; }
  .room-law p { font-size: 0.85rem; }
  .room-nav { width: 100%; justify-content: space-between; }
}

/* ---------- touch screens (phones and tablets only; mouse screens never match) ---------- */
@media (hover: none) {
  html { -webkit-tap-highlight-color: transparent; }
  /* a tap must not leave cards lifted or shifted, as hover styles stick after a touch */
  .mq:hover b, .step:hover .step-tile, .pick:hover, .cell--go:hover, .res:hover, .edu-item:hover,
  .sbar:hover, .sbar:hover .sbar-go, .offer-inline:hover, .elements[data-topics] .el:hover, .atom-btn:hover,
  .cal-day:hover:not(:disabled) { transform: none; }
  .res:hover, .cell--go:hover, .atom-btn:hover, .edu-item:hover { box-shadow: none; }
  .sbar--mini:hover .sbar-tile svg { animation: none; }
  .sbar--jump:hover .jump-streaks { transform: none; opacity: 0.75; }
  .sbar--jump:active .jump-streaks { transform: scale(0.6) rotate(45deg); opacity: 1; }
  /* instead, a quick press-down while the finger is on it */
  .btn:active, .sbar:active, .pick:active, .atom-btn:active, .cal-day:active:not(:disabled),
  .offer-inline:active, .menu:active, .elements[data-topics] .el:active {
    transform: scale(0.97); transition-duration: .08s;
  }
  .mobile-nav a:not(.btn):active { color: var(--c, #2fd88a); }
  /* a lighter nav bar: no live blur over the moving background */
  .nav.is-solid { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7, 18, 13, 0.94); }
}
/* ---------- grade switch: Grade 11 / Grade 12 swaps the topic board (js/topics.js) ---------- */
.grade-switch {
  --acc: var(--accent, #2fd88a);
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  width: min(360px, 100%); margin: 30px auto 0; padding: 6px;
  border: 1px solid var(--line); border-radius: 22px; background: rgba(7, 18, 13, 0.78);
}
.grade-switch::before { /* the glowing tile that slides to the chosen grade */
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 9px);
  border-radius: 16px; border: 1.5px solid var(--acc);
  background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: 0 0 34px -10px var(--acc);
}
.grade-switch.is-ready::before { transition: transform .45s cubic-bezier(.2, .8, .2, 1); } /* glides only once the page has set it */
.grade-switch[data-active="12"]::before { transform: translateX(calc(100% + 6px)); }
.gs-btn {
  position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 12px; border: 0; border-radius: 16px; background: none;
  font: inherit; color: var(--muted); cursor: pointer; transition: color .25s ease;
}
.gs-btn small { font-size: 0.82rem; font-weight: 600; }
.gs-btn b { font-family: var(--display); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1; transition: color .25s ease; }
.gs-btn[aria-selected="true"] { color: var(--paper); }
.gs-btn[aria-selected="true"] b { color: var(--acc); }
.gs-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.subj--phys .grade-switch, .subj--phys .grade-switch::before, .subj--phys .gs-btn { border-radius: 4px; }
.board .elements { margin-top: 32px; }
/* the new board's tiles flip in one after another */
.board.is-dealt .el { animation: board-deal .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes board-deal { from { opacity: 0; transform: perspective(800px) rotateX(-72deg) translateY(16px); } to { opacity: 1; transform: none; } }
@media (hover: none) { .gs-btn:active { transform: scale(0.97); } }

/* phones: topic boxes. Two narrow columns can't fit the "See it in motion" pill on one line, so it
   becomes a round play button lined up with the element tile; the text sits on a solid panel
   (no glow behind the letters, which smudged them) */
@media (max-width: 640px) {
  .el { background: rgba(7, 18, 13, 0.84); }
  .subj--phys .el { background-color: rgba(6, 17, 15, 0.9); }
  .el h3, .el p { text-shadow: none; }
  .el h3 { line-height: 1.25; text-wrap: balance; }
  .el p { line-height: 1.45; text-wrap: pretty; }
  /* the tile and the play button share the top row, so they always line up */
  .elements[data-topics] .el { display: grid; grid-template-columns: 1fr auto; align-content: start; align-items: center; padding-right: 14px; }
  .elements[data-topics] .el > :not(.tile):not(.el-play) { grid-column: 1 / -1; }
  .elements[data-topics] .el > .tile { justify-self: start; }
  .elements[data-topics] .el-play {
    grid-column: 2; grid-row: 1; margin: 0;
    width: 36px; height: 36px; min-height: 0; padding: 0; justify-content: center;
    font-size: 0; gap: 0; border-radius: 50%;
  }
  .elements[data-topics] .el-play svg { width: 13px; height: 13px; margin-left: 2px; }
  .subj--phys .elements[data-topics] .el-play { border-radius: 4px; }
}

/* phone menu: fits short screens, scrolls inside itself, slides in */
@media (max-width: 1080px) {
  .mobile-nav { max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; animation: menu-in .22s ease-out; }
  .mobile-nav a:not(.btn) { min-height: 48px; display: flex; align-items: center; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}