/* ==========================================================================
   MathonGo homepage
   Deployed as a WordPress template — see docs/maintaining.md
   ========================================================================== */

:root {
  /* Colour */
  --primary-50: #EBF4FF;
  --primary-100: #D6E9FF;
  --primary-200: #ADD3FF;
  --primary-300: #7AB7FF;
  --primary-400: #3D96FF;
  --primary-500: #0075FF;
  --primary-600: #0065DB;
  --primary-700: #0054B8;
  --primary-800: #00428F;
  --primary-900: #00316B;

  --gray-50: #F7F7F8;
  --gray-100: #E8E8ED;
  --gray-150: #EBEBEF;
  --gray-200: #D1D1DB;
  --gray-300: #A9A9BC;
  --gray-500: #6C6C89;
  --gray-600: #55556D;
  --gray-700: #3F3F50;
  --gray-900: #121217;

  --red-500: #F53D6B;
  --red-600: #F3164E;
  --green-50: #EEFBF4;
  --green-500: #2DCA72;
  --green-600: #26A95F;
  --yellow-50: #FFF9EB;
  --yellow-200: #FFE7AD;
  --yellow-500: #FFC233;
  --yellow-600: #FAAF00;
  --yellow-700: #C28800;
  --purple-50: #F8F6FF;
  --purple-200: #E0D8F8;
  --purple-500: #B7A4EE;
  --purple-600: #7C5CD6;
  --purple-700: #5B3FB0;

  /* Semantic */
  --ink: var(--gray-900);
  --ink-soft: var(--gray-600);
  --muted: var(--gray-500);
  --line: var(--gray-100);
  --line-strong: var(--gray-200);
  --surface: var(--gray-50);

  /* Also drives the hero's bottom padding, so the two stay in step. */
  --banner-overlap: 64px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(18, 18, 23, 0.05);
  --shadow-sm: 0 1px 2px rgba(18, 18, 23, 0.06), 0 1px 3px rgba(18, 18, 23, 0.10);
  --shadow-md: 0 2px 4px -1px rgba(18, 18, 23, 0.06), 0 4px 6px -1px rgba(18, 18, 23, 0.08);
  --shadow-lg: 0 4px 6px -2px rgba(18, 18, 23, 0.05), 0 10px 15px -3px rgba(18, 18, 23, 0.08);
  --shadow-xl: 0 10px 10px -5px rgba(18, 18, 23, 0.04), 0 20px 25px -5px rgba(18, 18, 23, 0.10);
  --shadow-2xl: 0 25px 50px -12px rgba(18, 18, 23, 0.25);
  /* Flat offset shadow — no blur, no spread; reads as a solid ledge. */
  --shadow-banner: 0 10px 0 rgba(18, 18, 23, 0.1);

  --shadow-overlay:
    0 2px 4px rgba(18, 18, 23, 0.04),
    0 5px 8px rgba(18, 18, 23, 0.04),
    0 10px 18px rgba(18, 18, 23, 0.03),
    0 24px 48px rgba(18, 18, 23, 0.03),
    0 0 0 1px rgba(18, 18, 23, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--primary-600); text-decoration: none; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; }

/* keep anchored sections clear of the sticky header */
section { scroll-margin-top: 88px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btn svg { width: 16px; height: 16px; flex: none; }

.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primary-100); }

.btn--lg { height: 48px; padding: 0 22px; font-size: 16px; line-height: 32px; }

.btn--block { width: 100%; }

.btn--primary { background: var(--primary-500); color: #fff; }
.btn--primary:hover { background: var(--primary-600); }

.btn--secondary {
  background: #fff;
  color: var(--gray-700);
  border-color: var(--line-strong);
}
.btn--secondary:hover { background: var(--gray-50); }
.btn--secondary:focus-visible { box-shadow: 0 0 0 4px var(--gray-150); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--primary-600);
}

.arrow-link svg { width: 14px; height: 14px; }

.arrow-link:hover { color: var(--primary-700); }

/* --------------------------------------------------------------------------
   Hellobar — rendered from HELLOBAR_CONFIG in index.html
   -------------------------------------------------------------------------- */

/* `display: flex` below outranks the UA's `[hidden] { display: none }` (same
   specificity, author sheet wins), so the JS `bar.hidden = true` would leave a
   dead 20px strip on screen — and a retiring bar frozen on its last frame.
   Restate the rule here so hiding actually hides. */
.hellobar[hidden] { display: none; }

.hellobar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 24px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
}

.hellobar--dark { background: var(--gray-900); color: #fff; }

/* Darker than --red-600: at #F3164E white tops out at 4.17:1, under AA for 14px. */
.hellobar--red {
  --bar-red: #D60F44;
  background: var(--bar-red);
  color: #fff;
}

.hellobar__text { font-weight: 500; }

.hellobar__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Full white — 70% only reached 2.56:1. */
.hellobar__count-label {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  margin-right: 2px;
}

.hellobar__cell {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  overflow: hidden;
  max-width: 6rem;               /* a from-value the collapse can animate out of */
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  transition: max-width 0.4s ease, padding 0.4s ease, margin 0.4s ease, opacity 0.25s ease;
}

/* Darker on red: a white wash separated it from the bar by only 1.07:1. */
.hellobar--red .hellobar__cell { background: rgba(0, 0, 0, 0.18); }

/* A unit that has run out eases shut, so the row re-centres instead of snapping. */
.hellobar__cell--gone {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin-right: -6px;            /* matches .hellobar__count's gap */
  opacity: 0;
}

/* Tabular figures — otherwise every digit change reflows and the bar twitches. */
.hellobar__cell b {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.hellobar__btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  background: #fff;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  transition: background-color 0.15s;
}

.hellobar--dark .hellobar__btn { color: var(--gray-900); }

/* lifts the label off white: 4.17 -> 5.24:1 */
.hellobar--red .hellobar__btn { color: var(--bar-red); }

.hellobar__btn:hover { background: var(--gray-100); }

/* Shine */

.hellobar--shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.14) 40%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.14) 60%,
    transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: hellobar-shine 8s ease-in-out infinite;
}

@keyframes hellobar-shine {
  0% { left: -60%; }
  28%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .hellobar--shine::after { animation: none; display: none; }
  .hellobar__cell { transition: none; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 72px;
}

.header__brand { flex: none; display: flex; align-items: center; }

.header__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Direct children only — the mega panel has its own anchors. */

.header__nav > a,
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  background: none;
  border: 0;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--gray-700);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.header__nav > a:hover,
.nav-link:hover { background: var(--gray-50); color: var(--ink); }

.ic { width: 16px; height: 16px; flex: none; }

.nav-link svg {
  width: 14px;
  height: 14px;
  color: var(--gray-300);
  transition: transform 0.15s;
}

.nav-item.is-open .nav-link { background: var(--gray-50); color: var(--ink); }

.nav-item.is-open .nav-link svg { transform: rotate(180deg); }

.nav-item { position: relative; }

.mega {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 480px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-overlay);
  padding: 12px;
  z-index: 60;
  text-align: left;
}

/* invisible bridge so the pointer can cross the gap without closing the menu */
.mega::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-item.is-open .mega { display: block; }

.mega__grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mega__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  color: inherit;
  min-width: 0;
  transition: background-color 0.15s, color 0.15s;
}

.mega__item:not(.mega__item--soon):hover { background: var(--gray-50); }

/* Icon slot is a fixed 40px on every row so all titles start on the same x. */
.mega__item > img { width: 32px; height: 32px; flex: none; margin-right: 8px; }

/* Combined products show both exam badges overlapping. */
.mega__pair { position: relative; width: 40px; height: 32px; flex: none; }

.mega__pair img { position: absolute; top: 2px; width: 28px; height: 28px; }

.mega__pair img:nth-child(1) { left: 0; }

.mega__pair img:nth-child(2) {
  left: 12px;
  z-index: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
}

.mega__item h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--gray-700);
  min-width: 0;
}

.mega__item:not(.mega__item--soon):hover h4 { color: var(--ink); }

.mega__item--soon { cursor: default; }

.mega__item--soon h4 { color: var(--muted); }

.soon {
  flex: none;
  margin-left: auto;
  padding: 1px 8px;
  background: var(--gray-100);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Highlight orbits the perimeter: ::before spins a conic gradient behind the card. */
.mega__pass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 2px 0;
  padding: 13px 15px;
  background: var(--purple-200);
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 15px;
  line-height: 24px;
}

.mega__pass::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);

  background: conic-gradient(
    transparent 0deg 230deg,
    rgba(183, 164, 238, 0.14) 268deg,
    rgba(183, 164, 238, 0.42) 302deg,
    rgba(183, 164, 238, 0.85) 328deg,
    #FBF8FF 344deg,
    rgba(124, 92, 214, 0.75) 351deg,
    rgba(124, 92, 214, 0.22) 355deg,
    transparent 360deg);
  animation: pass-orbit 5.5s linear infinite;
  z-index: -2;
  pointer-events: none;
}

.mega__pass::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: calc(var(--r-md) - 2px);
  background: var(--purple-50);
  transition: background-color 0.15s;
  z-index: -1;
  pointer-events: none;
}

@keyframes pass-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mega__pass::before { animation: none; }
}

.mega__pass:hover::after { background: #F0EAFF; }

.mega__pass b { font-weight: 600; }

.mega__pass-spark {
  width: 22px;
  height: 22px;
  flex: none;
  align-self: flex-start;
  margin-top: 2px;
  color: var(--purple-600);
}

.mega__pass-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mega__pass-title { display: flex; align-items: center; gap: 8px; }

.mega__pass-tag {
  flex: none;
  padding: 0 7px;
  background: var(--purple-700);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.mega__pass-desc {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-soft);
}

.mega__pass-arrow {
  width: 15px; height: 15px; flex: none;
  margin-left: auto;
  color: var(--purple-700);
  transition: transform 0.15s;
}

.mega__pass:hover .mega__pass-arrow { transform: translateX(3px); }

.mega__foot {
  display: flex;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding: 16px 14px 4px;
}

/* Hamburger */

.header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  border-radius: var(--r-md);
  padding: 0;
  cursor: pointer;
  color: var(--gray-700);
}

.header__toggle:hover { background: var(--gray-50); }

.header__toggle:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primary-100); }

.header__toggle-bars {
  position: relative;
  width: 22px;
  height: 16px;
}

.header__toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.15s ease, top 0.22s ease;
}

.header__toggle-bars span:nth-child(1) { top: 0; }
.header__toggle-bars span:nth-child(2) { top: 7.25px; }
.header__toggle-bars span:nth-child(3) { top: 14.5px; }

.header.nav-open .header__toggle-bars span:nth-child(1) {
  top: 7.25px;
  transform: rotate(45deg);
}

.header.nav-open .header__toggle-bars span:nth-child(2) { opacity: 0; }

.header.nav-open .header__toggle-bars span:nth-child(3) {
  top: 7.25px;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .header__toggle-bars span { transition: none; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  /* White under the header, easing into the tint, so the hero meets it seamlessly. */
  background: linear-gradient(to bottom, #fff 0%, var(--primary-50) 100%);
}

.hero__content {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
  padding: 64px 24px 56px;
}

/* main.js sets .has-banner once a banner renders, so the reserved space goes with it. */
.has-banner .hero__content { padding-bottom: calc(56px + var(--banner-overlap)); }

/* sits high against the taller portrait */
.hero__copy { max-width: 620px; align-self: start; padding-top: 8px; }

.hero__results { margin-top: 48px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink);
}

.hero__eyebrow-icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--yellow-600);
}

.hero__stats {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 20px;
}

.hero__stat + .hero__stat {
  padding-left: 28px;
  border-left: 1px solid var(--primary-200);
}

.hero__stat b {
  display: block;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hero__stat span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}

.hero h1 {
  font-size: clamp(2.125rem, 3.9vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Gold shine sweeping through the emphasised words */

.shine {
  font-weight: 800;
  color: var(--yellow-700);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .shine {
    /* Both ends the same gold, so the repeating tile has no seam */
    background-image: linear-gradient(90deg,
      var(--yellow-700) 0%,
      var(--yellow-700) 30%,
      var(--yellow-600) 42%,
      #FFEFC6 50%,
      var(--yellow-600) 58%,
      var(--yellow-700) 70%,
      var(--yellow-700) 100%);
    background-size: 200% auto;
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: text-shine 9s linear infinite;
  }
}

/* Travels exactly one tile width, so the loop restarts on an identical frame. */
@keyframes text-shine {
  from { background-position: 0% center; }
  to { background-position: -200% center; }
}

@media (prefers-reduced-motion: reduce) {
  .shine { animation: none; }
}

.hero__sub {
  max-width: 560px;
  margin-top: 20px;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.hero__cta .btn {
  height: 56px;
  padding: 0 28px;
  font-size: 17px;
  border-radius: 14px;
}

.hero__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  justify-self: center;
  width: min(560px, 100%);
  margin: 0;
}

/* The cutout ends abruptly at the waist — fade it rather than cut it */
.hero__photo {
  width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}

/* The tag SVG is a 225x149 canvas whose art occupies 170.3x65.1 at (26.2, 29.9). */
.hero__tag {
  --tag-scale: 2;
  display: block;
  overflow: hidden;
  width: calc(170.3px * var(--tag-scale));
  height: calc(65.1px * var(--tag-scale));
  max-width: 100%;
}

.hero__tag img {
  width: calc(225px * var(--tag-scale));
  max-width: none;
  margin: calc(-29.9px * var(--tag-scale)) 0 0 calc(-26.2px * var(--tag-scale));
}

/* --------------------------------------------------------------------------
   Promo banner — rendered from BANNER_CONFIG in index.html
   -------------------------------------------------------------------------- */

.banner {
  --banner-ratio: 2136 / 372;   /* every slide is cropped to this; keep exports matching */
  --banner-pad: 12px;           /* white matte between the card edge and the artwork */
  --banner-inner-r: var(--r-lg);
  position: relative;
  z-index: 1;
  padding-bottom: 88px;
  margin-top: calc(-1 * var(--banner-overlap));
}

.banner__card {
  position: relative;
  padding: var(--banner-pad);
  background: #fff;
  /* Concentric with the stage: outer radius = inner radius + the padding between. */
  border-radius: calc(var(--banner-inner-r) + var(--banner-pad));
  box-shadow: var(--shadow-lg);
}

.banner__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--banner-inner-r);
  background: var(--gray-100);  /* shows through until the image decodes */
  aspect-ratio: var(--banner-ratio);
}

/* Slides are stacked and cross-faded — no track to resync on resize. */
.banner__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;         /* inactive slides swallow no clicks */
  transition: opacity 0.5s ease;
}

.banner__slide.is-active { opacity: 1; pointer-events: auto; }

.banner__slide img { width: 100%; height: 100%; object-fit: cover; }

.banner__dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(18, 18, 23, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.banner__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.banner__dot:hover { background: rgba(255, 255, 255, 0.75); }

.banner__dot[aria-current="true"] { width: 24px; background: #fff; }

.banner__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .banner__slide { transition: none; }
  .banner__dot { transition: none; }
}

/* --------------------------------------------------------------------------
   Campus proof
   -------------------------------------------------------------------------- */

.campus { padding: 12px 0 96px; background: #fff; }

.campus__head { text-align: center; margin-bottom: 48px; }

.campus__head h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.campus__hl { color: var(--red-600); }

.campus__head p {
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Track holds the row twice, so shifting half its width lands on an identical frame. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee + .marquee { margin-top: 16px; }

.marquee__track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: marquee-scroll 90s linear infinite;
}

.marquee--reverse .marquee__track { animation-direction: reverse; }

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 8px)); }   /* half the track + half the gap */
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.campus__item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  height: 68px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}

.campus__item img {
  width: 38px;
  height: 38px;
  flex: none;
  object-fit: contain;
}

.campus__item span {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  color: var(--gray-700);
}

/* --------------------------------------------------------------------------
   Result proof
   -------------------------------------------------------------------------- */

.proof {
  --proof-overlap: 140px;   /* how far the white card covers the photo */
  position: relative;
  padding-bottom: 80px;
}

.proof__bg {
  width: 100%;
  height: clamp(280px, 30vw, 440px);
  object-fit: cover;
  object-position: center 35%;
  /* Fades to nothing, so the page background shows through — no overlay element. */
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}

.proof__card {
  position: relative;
  margin-top: calc(-1 * var(--proof-overlap));
  padding: 44px 40px 40px;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.proof__title {
  max-width: 780px;
  margin: 0 auto;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.proof__count {
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--red-600);
}

.proof__pct { color: var(--ink); }

.proof__rule {
  display: block;
  width: 44px;
  height: 3px;
  margin: 18px auto 36px;
  border-radius: 999px;
  background: var(--red-600);
}

.fcar {
  --fcar-w: 150px;
  --fcar-w-active: 236px;
  --fcar-gap: 14px;
  /* Pinning the viewport to the centred card stops the row's height dipping mid-transition. */
  --fcar-h: calc(var(--fcar-w-active) * 656 / 420);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

/* Outer cards dissolve rather than being sliced off at the viewport edge. */
.fcar__viewport {
  flex: 1;
  overflow: hidden;
  height: var(--fcar-h);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.fcar__track {
  display: flex;
  height: 100%;
  align-items: center;
  gap: var(--fcar-gap);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.fcar__item {
  position: relative;
  flex: none;
  width: var(--fcar-w);
  aspect-ratio: 420 / 656;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--gray-100);
  opacity: 0.5;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}

.fcar__item.is-active { width: var(--fcar-w-active); opacity: 1; }

.fcar__item img { width: 100%; height: 100%; object-fit: cover; }

.fcar__meta {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  padding: 44px 12px 14px;
  background: linear-gradient(to top,
    rgba(18, 18, 23, 0.92) 0%,
    rgba(18, 18, 23, 0.6) 55%,
    rgba(18, 18, 23, 0) 100%);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fcar__item.is-active .fcar__meta { opacity: 1; }

.fcar__meta b { font-size: 15px; font-weight: 700; line-height: 1.25; }

.fcar__meta span { font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--yellow-500); }

.fcar__nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--gray-700);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.fcar__nav:hover { background: var(--gray-50); color: var(--ink); }

.fcar__nav:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primary-100); }

.fcar__nav svg { width: 18px; height: 18px; }

/* Nothing may animate while the track wraps — the snap must land on an identical frame. */
.fcar.is-snapping .fcar__track,
.fcar.is-snapping .fcar__item,
.fcar.is-snapping .fcar__meta { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .fcar__track, .fcar__item, .fcar__meta { transition: none; }
}

/* Fixed column counts, not auto-fill: the "five rows" promise needs a known column count. */
.proof__wall {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px 10px;
  list-style: none;
  /* solid through row four, fifth row dissolves */
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
}

.pcent:nth-child(n+61) { display: none; }   /* 12 cols x 5 rows */

.pcent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.pcent img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--yellow-500);
  background: var(--gray-100);
}

/* Names stay on one line — a wrapped name breaks the grid rhythm */
.pcent b {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.pcent span {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--primary-600);
}

/* --------------------------------------------------------------------------
   Test series cards
   -------------------------------------------------------------------------- */

.series { padding: 24px 0 96px; background: #fff; }

.series__head { text-align: center; margin-bottom: 48px; }

.series__head h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.series__hl { color: var(--red-600); }

.series__head p {
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.series__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.scard {
  /* --art-a/--art-b are set per exam by the .scard--* modifiers below, which must stay after this rule. */
  --art-a: #F5F5F8;
  --art-b: #DFE2EA;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  transition: border-color 0.18s;
}

/* Hover is deliberately quiet: border darkens, tile grows. No lift, no shadow. */
.scard:hover { border-color: var(--gray-300); }

.scard:focus-visible {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 4px var(--primary-100);
}

.scard__art {
  position: relative;
  display: grid;
  place-items: center;
  margin: 16px 16px 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  background:
    radial-gradient(58% 46% at 50% 40%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 72%),
    linear-gradient(158deg, var(--art-a), var(--art-b));
}

/* Each pair is the logo's dominant colour at ~96% and ~90% lightness. JEE Main and NEET split the shared NTA logo. */
.scard--jee-main { --art-a: #FDF6EF; --art-b: #F5E4D4; }
.scard--jee-adv  { --art-a: #F5F5F8; --art-b: #DFE2EA; }
.scard--neet     { --art-a: #EFFDF5; --art-b: #D4F5E2; }
.scard--bitsat   { --art-a: #F1F1FB; --art-b: #D6D6F2; }
.scard--mhtcet   { --art-a: #EFF6FD; --art-b: #D4E3F5; }
.scard--ugee     { --art-a: #F5F5F8; --art-b: #DFE2EA; }
.scard--wbjee    { --art-a: #FEF2ED; --art-b: #FBDCD0; }
.scard--iat      { --art-a: #F3F0FC; --art-b: #DBD4F5; }
.scard--kcet     { --art-a: #FAF2F8; --art-b: #EFD9EB; }
.scard--viteee   { --art-a: #F2F2FA; --art-b: #D9DAEF; }

.scard--jee-both { --art-a: #FDF6EF; --art-b: #DFE2EA; }

.scard__tag {
  position: absolute;
  top: 10px;
  right: 10px;
  overflow: hidden;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--red-600);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.scard__tag::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.30) 40%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.30) 60%,
    transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: tag-shine 3.4s ease-in-out infinite;
}

@keyframes tag-shine {
  0% { left: -60%; }
  45%, 100% { left: 130%; }
}

.scard__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 84px;
  height: 84px;
  padding: 14px;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(18, 18, 23, 0.05);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.scard:hover .scard__tile { transform: scale(1.08); }

.scard__tile img { width: 100%; height: 100%; object-fit: contain; }

.scard__tile--pair { width: 124px; gap: 10px; }

.scard__tile--pair img { width: calc(50% - 5px); }

.scard__body { flex: 1; padding: 22px 20px 24px; }

.scard__body h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.scard__body p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.scard__points {
  margin-top: 14px;
  list-style: none;
  display: grid;
  gap: 8px;
}

.scard__points li {
  padding-left: 28px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
  background-repeat: no-repeat;
  background-position: 0 1px;
  background-size: 18px 18px;
}

.scard__point--part {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236C6C89'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H128a8,8,0,0,1,0-16h88A8,8,0,0,1,224,128ZM128,72h88a8,8,0,0,0,0-16H128a8,8,0,0,0,0,16Zm88,112H128a8,8,0,0,0,0,16h88a8,8,0,0,0,0-16ZM82.34,42.34,56,68.69,45.66,58.34A8,8,0,0,0,34.34,69.66l16,16a8,8,0,0,0,11.32,0l32-32A8,8,0,0,0,82.34,42.34Zm0,64L56,132.69,45.66,122.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0-11.32-11.32Zm0,64L56,196.69,45.66,186.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0-11.32-11.32Z'/%3E%3C/svg%3E");
}

.scard__point--full {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236C6C89'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V216a8,8,0,0,0,11.58,7.16L64,208.94l28.42,14.22a8,8,0,0,0,7.16,0L128,208.94l28.42,14.22a8,8,0,0,0,7.16,0L192,208.94l28.42,14.22A8,8,0,0,0,232,216V56A16,16,0,0,0,216,40Zm0,163.06-20.42-10.22a8,8,0,0,0-7.16,0L160,207.06l-28.42-14.22a8,8,0,0,0-7.16,0L96,207.06,67.58,192.84a8,8,0,0,0-7.16,0L40,203.06V56H216ZM60.42,167.16a8,8,0,0,0,10.74-3.58L76.94,152h38.12l5.78,11.58a8,8,0,1,0,14.32-7.16l-32-64a8,8,0,0,0-14.32,0l-32,64A8,8,0,0,0,60.42,167.16ZM96,113.89,107.06,136H84.94ZM136,128a8,8,0,0,1,8-8h16V104a8,8,0,0,1,16,0v16h16a8,8,0,0,1,0,16H176v16a8,8,0,0,1-16,0V136H144A8,8,0,0,1,136,128Z'/%3E%3C/svg%3E");
}

.scard__point--mocks {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236C6C89'%3E%3Cpath d='M231.65,194.55,198.46,36.75a16,16,0,0,0-19-12.39L132.65,34.42a16.08,16.08,0,0,0-12.3,19l33.19,157.8A16,16,0,0,0,169.16,224a16.25,16.25,0,0,0,3.38-.36l46.81-10.06A16.09,16.09,0,0,0,231.65,194.55ZM136,50.15c0-.06,0-.09,0-.09l46.8-10,3.33,15.87L139.33,66Zm6.62,31.47,46.82-10.05,3.34,15.9L146,97.53Zm6.64,31.57,46.82-10.06,13.3,63.24-46.82,10.06ZM216,197.94l-46.8,10-3.33-15.87L212.67,182,216,197.85C216,197.91,216,197.94,216,197.94ZM104,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V48A16,16,0,0,0,104,32ZM56,48h48V64H56Zm0,32h48v96H56Zm48,128H56V192h48v16Z'/%3E%3C/svg%3E");
}

.scard__point--analysis {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236C6C89'%3E%3Cpath d='M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V156.69l50.34-50.35a8,8,0,0,1,11.32,0L128,132.69,180.69,80H160a8,8,0,0,1,0-16h40a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V91.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31l-56,56V200H224A8,8,0,0,1,232,208Z'/%3E%3C/svg%3E");
}

.scard__foot {
  display: block;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

/* A span, not an anchor — the whole card is already the link. */
.scard__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--primary-600);
  transition: color 0.15s;
}

.scard__cta svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.18s;
}

.scard:hover .scard__cta { color: var(--primary-700); }

.scard:hover .scard__cta svg { transform: translateX(3px); }

.series__soon { margin-top: 64px; }

.series__soon-head { margin-bottom: 28px; text-align: center; }

.series__soon-head h3 {
  margin-top: 12px;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.series__soon-badge {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--purple-600);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.series__soon-badge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.30) 40%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.30) 60%,
    transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: tag-shine 3.4s ease-in-out infinite;
}

.series__soon-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.series__soon-grid .scard { flex: 0 1 calc(25% - 15px); }

/* the name row carries the height */
.series__soon-grid .scard__body { padding: 20px 20px 22px; }

/* Three logos share the tile on the widest combined series */
.scard__tile--trio { width: 164px; gap: 10px; }

.scard__tile--trio img { width: calc(33.333% - 7px); }

/* the title is the whole body — centre it on both axes */
.series__soon-grid .scard__body,
.courses .scard__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* Bell/tick trails the label and must not inherit the arrow slide. */
.scard__cta-bell,
.scard__cta-tick { width: 15px; height: 15px; }

.scard:hover .scard__cta-bell,
.scard:hover .scard__cta-tick { transform: none; }

.scard__cta.is-notified,
.scard:hover .scard__cta.is-notified { color: var(--green-600); }

.series__foot { margin-top: 32px; text-align: center; }

/* --------------------------------------------------------------------------
   Quizrr Pass
   -------------------------------------------------------------------------- */

.pass {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 40px;
  margin-bottom: 56px;
  padding: 36px 40px;
  border-radius: var(--r-xl);
  isolation: isolate;          /* keeps the glow behind every child, at any breakpoint */
  /* Deep aubergine rather than flat black */
  background:
    linear-gradient(125deg, #191233 0%, #2C1F5E 48%, #150F2B 100%);
  color: #fff;
}

.pass__glow {
  position: absolute;
  z-index: -1;
  top: -60%;
  right: 4%;
  width: 560px;
  height: 320%;
  background: radial-gradient(closest-side, rgba(146, 112, 245, 0.42), transparent 100%);
  pointer-events: none;
}

.pass__body { position: relative; }

.pass__flags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* the pill carries the colour, this carries the number */
.pass__save {
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pass__save b { font-weight: 700; }

/* Gold "Best Value" flag */
.pass__pill {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--yellow-600), #FFE08A 45%, var(--yellow-500));
  color: #4A3400;
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pass__pill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 40%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.45) 60%,
    transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: tag-shine 3.4s ease-in-out infinite;
}

.pass__title {
  display: block;
  max-width: 15ch;
  margin-top: 14px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.pass__sub {
  display: block;
  max-width: 46ch;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.pass__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: 24px;
  padding: 0 22px;
  border-radius: 14px;
  background: #fff;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 600;
  line-height: 32px;
  transition: background-color 0.15s;
}

.pass__cta svg { width: 18px; height: 18px; flex: none; transition: transform 0.18s; }

.pass__cta:hover { background: var(--yellow-500); }

.pass__cta:hover svg { transform: translateX(3px); }

.pass__cta:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35); }

/* Only the pass artwork tilts. --tilt-* and --shine-* are written by main.js. */
.pass__art {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  position: relative;
  display: block;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Follow the pointer closely; the slower easing above is for settling back to flat. */
.pass__art.is-tilting { transition: transform 0.08s linear; }

.pass__art-img { width: 100%; }

.pass__shine {
  position: absolute;
  top: 7.78%;
  right: 4.41%;
  bottom: 7.93%;
  left: 4.41%;
  border-radius: 4.75% / 9.06%;
  background-image: linear-gradient(105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.10) 44%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.10) 56%,
    transparent 66%);
  background-size: 260% 260%;
  background-position: var(--shine-x) var(--shine-y);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.pass__art:hover .pass__shine { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pass__cta, .pass__cta svg, .pass__art, .pass__shine { transition: none; }
  .pass__art { transform: none; }
  .pass__cta:hover svg { transform: none; }
  .pass__shine { display: none; }
  .pass__pill::after { animation: none; display: none; }
}

/* Pre-launch course cards — same shell and hover as a live card. */
.courses { padding-top: 0; }

.scard--soon .scard__body h3 { color: var(--gray-700); }

.scard__cta--soon { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .scard, .scard__tile, .scard__cta svg { transition: none; }
  .scard:hover .scard__tile { transform: none; }
  .scard:hover .scard__cta svg { transform: none; }
  .scard__tag::after,
  .series__soon-badge::after { animation: none; display: none; }
}

/* --------------------------------------------------------------------------
   PYQ book cards
   -------------------------------------------------------------------------- */

.pyq { padding-top: 0; }

.pyq__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.bcard {
  /* --art-a/--art-b wash the panel, --spine colours the binding, --stroke is the hover border. */
  --spine-w: 9px;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  transition: border-color 0.18s;
}

.bcard--physics {
  --art-a: #FFF5EC;
  --art-b: #FFE3CE;
  --spine: #C9541B;
  --stroke: #EE9A62;
}

.bcard--chemistry {
  --art-a: #F1FAF2;
  --art-b: #D8F0DC;
  --spine: #2E7D38;
  --stroke: #7BC589;
}

.bcard--maths {
  --art-a: #F0F7FE;
  --art-b: #D7E9F9;
  --spine: #2F7FB8;
  --stroke: #85BEE8;
}

/* Hover borrows the panel's own colour, so each card warms to its subject. */
.bcard:hover { border-color: var(--stroke); }

.bcard:focus-visible {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 4px var(--primary-100);
}

/* The book sets the height; the perspective lives here. */
.bcard__art {
  display: grid;
  place-items: center;
  margin: 16px 16px 0;
  padding: 32px 0 40px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(58% 46% at 50% 40%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 72%),
    linear-gradient(158deg, var(--art-a), var(--art-b));
  perspective: 1300px;
}

.bcard__book {
  position: relative;
  width: clamp(124px, 52%, 168px);
  aspect-ratio: 400 / 541;
  transform-style: preserve-3d;
}

/* Contact shadow — widens as the cover opens, the way a real book's footprint does. */
.bcard__book::after {
  content: "";
  position: absolute;
  left: 4%;
  right: -2%;
  bottom: -16px;
  height: 20px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(18, 18, 23, 0.26), transparent 72%);
  transition: transform 0.7s cubic-bezier(0.22, 0.68, 0.24, 1), opacity 0.7s;
}

/* Page stack — three leaves, each offset from the one above. */
.bcard__page {
  position: absolute;
  inset: 0;
  border-radius: 2px 5px 5px 2px;
  /* Cream outer edge — the sheet seen end-on, which makes the leaves read as a page block. */
  background: linear-gradient(90deg, #fff calc(100% - 3px), #EBE7DD calc(100% - 3px));
  transform-origin: var(--spine-w) center;
  transition: transform 0.65s cubic-bezier(0.22, 0.68, 0.24, 1);
  box-shadow: 0 3px 8px -6px rgba(18, 18, 23, 0.45);
}

.bcard__page--a { transform: translateZ(4px) translate(2px, 1px); }
.bcard__page--b { transform: translateZ(2px) translate(4px, 2px); }

/* Bottom leaf never moves */
.bcard__page--c {
  transform: translate(6px, 3px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) calc(100% - 3px), #EBE7DD calc(100% - 3px)),
    #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='271' fill='none'%3E%3Crect x='30' y='34' width='94' height='8' rx='4' fill='%23F3164E' fill-opacity='.45'/%3E%3Cg fill='%23D1D1DB'%3E%3Crect x='30' y='62' width='152' height='5' rx='2.5'/%3E%3Crect x='30' y='78' width='124' height='5' rx='2.5'/%3E%3Crect x='30' y='94' width='144' height='5' rx='2.5'/%3E%3Crect x='30' y='110' width='100' height='5' rx='2.5'/%3E%3Crect x='30' y='134' width='152' height='5' rx='2.5'/%3E%3Crect x='30' y='150' width='136' height='5' rx='2.5'/%3E%3Crect x='30' y='166' width='116' height='5' rx='2.5'/%3E%3Crect x='30' y='182' width='148' height='5' rx='2.5'/%3E%3Crect x='30' y='206' width='104' height='5' rx='2.5'/%3E%3Crect x='30' y='222' width='144' height='5' rx='2.5'/%3E%3Crect x='30' y='238' width='122' height='5' rx='2.5'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* The cover hinges off the spine's front edge, as a real one does. */
.bcard__cover {
  position: absolute;
  inset: 0;
  transform-origin: var(--spine-w) center;
  transform: translateZ(6px);
  transition: transform 0.65s cubic-bezier(0.22, 0.68, 0.24, 1), box-shadow 0.65s;
  border-radius: 2px 5px 5px 2px;
  box-shadow: 0 6px 16px -8px rgba(18, 18, 23, 0.5);
}

.bcard__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Hinge crease past the binding, sheen off the outer edge */
.bcard__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
      rgba(18, 18, 23, 0.22) var(--spine-w),
      rgba(18, 18, 23, 0.10) calc(var(--spine-w) + 6px),
      rgba(255, 255, 255, 0) calc(var(--spine-w) + 22px),
      rgba(255, 255, 255, 0.16));
}

/* The binding sits in front of everything and never rotates. */
.bcard__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--spine-w) + 2px);
  transform: translateZ(7px);
  border-radius: 3px 0 0 3px;
  background:
    linear-gradient(90deg,
      rgba(18, 18, 23, 0.46),
      rgba(18, 18, 23, 0.06) 34%,
      rgba(255, 255, 255, 0.12) 54%,
      rgba(18, 18, 23, 0.34) 88%,
      rgba(18, 18, 23, 0.58)),
    var(--spine);
}

/* Head and tail caps */
.bcard__spine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 5%),
    linear-gradient(rgba(18, 18, 23, 0) 95%, rgba(18, 18, 23, 0.30));
}

/* Open just enough to show the fanned page edges */
.bcard:hover .bcard__cover,
.bcard:focus-visible .bcard__cover {
  transform: translateZ(6px) rotateY(-36deg);
  box-shadow: 8px 12px 26px -12px rgba(18, 18, 23, 0.55);
}

/* Staggered so the leaves peel one after another */
.bcard:hover .bcard__page--a,
.bcard:focus-visible .bcard__page--a {
  transform: translateZ(4px) translate(2px, 1px) rotateY(-23deg);
  transition-delay: 0.07s;
}

.bcard:hover .bcard__page--b,
.bcard:focus-visible .bcard__page--b {
  transform: translateZ(2px) translate(4px, 2px) rotateY(-11deg);
  transition-delay: 0.14s;
}

.bcard:hover .bcard__book::after,
.bcard:focus-visible .bcard__book::after {
  transform: scaleX(1.1);
  opacity: 0.75;
}

.bcard__body {
  flex: 1;
  padding: 20px 20px 22px;
  text-align: center;
}

.bcard__body h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: var(--ink);
}

.bcard__body p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
}

.bcard__foot {
  display: block;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}

/* Same CTA as the series cards. A span, not an anchor. */
.bcard__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--primary-600);
  transition: color 0.15s;
}

.bcard__cta svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.18s;
}

.bcard:hover .bcard__cta,
.bcard:focus-visible .bcard__cta { color: var(--primary-700); }

/* a download arrow goes down, not sideways */
.bcard:hover .bcard__cta svg,
.bcard:focus-visible .bcard__cta svg { transform: translateY(2px); }

@media (prefers-reduced-motion: reduce) {
  .bcard, .bcard__cover, .bcard__page, .bcard__cta svg, .bcard__book::after { transition: none; }

  .bcard:hover .bcard__cover,
  .bcard:focus-visible .bcard__cover { transform: translateZ(6px); }

  .bcard:hover .bcard__page--a,
  .bcard:focus-visible .bcard__page--a { transform: translateZ(4px) translate(2px, 1px); }

  .bcard:hover .bcard__page--b,
  .bcard:focus-visible .bcard__page--b { transform: translateZ(2px) translate(4px, 2px); }

  .bcard:hover .bcard__cta svg,
  .bcard:focus-visible .bcard__cta svg { transform: none; }

  .bcard:hover .bcard__book::after,
  .bcard:focus-visible .bcard__book::after { transform: none; }
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

.products { padding-top: 0; }

.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pcard {
  position: relative;
  overflow: hidden;              /* crops the frames at the panel edge */
  display: flex;
  padding: 32px;
  border-radius: var(--r-xl);
  /* Border sits at the fill colour, invisible until hover darkens it. */
  border: 1px solid var(--pc-bg);
  background: var(--pc-bg);
  color: inherit;
  transition: border-color 0.18s;
}

.pcard:hover { border-color: var(--pc-stroke); }

.pcard:focus-visible {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 0 4px var(--primary-100);
}

.pcard--quizrr {
  --pc-bg: var(--purple-50);
  --pc-stroke: #B29CE8;
  --pc-accent: var(--purple-700);
  grid-column: 1 / -1;
  /* Top-aligned so the logo lines up with the top of the frame. */
  align-items: flex-start;
  min-height: 430px;
  border-color: var(--pc-stroke);   /* lead card — its edge is on at rest */
  --shine-angle: 0deg;              /* fallback, so the conic always resolves */
}

/* Hover thickens the edge to 2px and darkens the ring base for contrast on the pale panel. */
.pcard--quizrr:hover {
  margin: -1px;
  border-width: 2px;
  border-color: transparent;
  background-image:
    linear-gradient(var(--pc-bg), var(--pc-bg)),
    conic-gradient(from var(--shine-angle) at 50% 50%,
      var(--purple-600) 0%,
      rgba(255, 255, 255, 0.98) 6%,
      var(--purple-600) 16%,
      var(--purple-600) 100%);
  background-clip: padding-box, border-box;
  animation: pcard-shine 3.6s linear infinite;
}

@property --shine-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes pcard-shine {
  to { --shine-angle: 360deg; }
}

.pcard--marks-jee {
  --roll: 50s;                   /* 252px of travel */
  --pc-bg: var(--primary-50);
  --pc-stroke: var(--primary-300);
  --pc-accent: var(--primary-700);
}

.pcard--marks-neet {
  --roll: 59s;                   /* 294px — the longest list, so the longest cycle */
  --pc-bg: #EDF9F1;
  --pc-stroke: #7FCB9E;
  --pc-accent: #1F7A45;
}

.pcard--marks-upsc {
  --roll: 42s;
  --pc-bg: #FDF3EC;
  --pc-stroke: #EFA36E;
  --pc-accent: #B4551C;
}

/* Every block below the logo is a fixed height, so all three cards match without this. */
.pcard--marks-jee,
.pcard--marks-neet,
.pcard--marks-upsc {
  flex-direction: column;
  min-height: 685px;
}

/* Everything shares one centred axis. */
.pcard--marks-jee .pcard__copy,
.pcard--marks-neet .pcard__copy,
.pcard--marks-upsc .pcard__copy {
  align-items: center;
  text-align: center;
}

.pcard__copy {
  position: relative;
  z-index: 2;                    /* copy, then the frame, then the pills beneath */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pcard--quizrr .pcard__copy { width: min(340px, 42%); }

.pcard--marks-jee .pcard__copy,
.pcard--marks-neet .pcard__copy,
.pcard--marks-upsc .pcard__copy { width: 100%; }

/* Sized by height so the different wordmark widths read as one family. */
.pcard__logo {
  display: block;
  width: auto;
}

.pcard__logo--quizrr { height: 38px; }

.pcard__logo--marks { height: 24px; }

/* Download count */
.pcard__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--muted);
}

.pcard__meta svg { width: 15px; height: 15px; flex: none; }

.pcard__tag {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* The half cards lead with a statement */
.pcard__tag--lg {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.pbtn--quizrr {
  margin-top: 24px;
  padding: 0 20px;
  background: var(--purple-700);
  color: #fff;
}

.pbtn--quizrr:hover { background: #2E005B; }

.pcard__art {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* Frame sits low and right, cropped by the panel on two sides */
.pcard--quizrr .pcard__art {
  top: 32px;                     /* card padding — squares the frame with the logo */
  right: -72px;
  bottom: -28px;
  width: min(640px, 56%);
}

.pcard--marks-jee .pcard__art,
.pcard--marks-neet .pcard__art,
.pcard--marks-upsc .pcard__art {
  position: relative;            /* in flow now — the buttons sit above it */
  left: auto;
  right: auto;
  bottom: auto;
  align-self: stretch;
  margin: 28px 0 -33px;          /* cancels the card's bottom padding */
  height: 250px;
}

.pcard__features {
  height: 206px;
  overflow: hidden;
  margin-top: 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 13%, #000 87%, transparent);
}

/* --roll is per card: the sets differ in height, so a shared duration would scroll them at different speeds. */
.features__track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: features-roll var(--roll, 48s) linear infinite;
}

.features__set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

@keyframes features-roll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-50% - 4px)); }   /* half the track + half the gap */
}

/* Two real anchors — each app has two destinations, and both must be reachable. */
.pcard__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: auto;              /* pinned below the features, above the phone */
  padding-top: 24px;
}

.pbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pbtn svg { width: 17px; height: 17px; flex: none; }

.pbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--primary-100);
}

.pbtn--play {
  background: var(--gray-900);
  color: #fff;
}

.pbtn--play:hover { background: var(--gray-700); }

.pbtn--web {
  background: #fff;
  color: var(--gray-700);
  border-color: var(--line-strong);
}

.pbtn--web:hover { border-color: var(--gray-300); color: var(--ink); }

/* --------------------------------------------------------------------------
   Feature pills
   -------------------------------------------------------------------------- */

.pcard__pills {
  position: absolute;
  z-index: 0;                    /* under .pcard__art — that is the whole effect */
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pills__strip {
  overflow: hidden;
  /* Only the left edge fades; on the right the frame occludes. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%);
  mask-image: linear-gradient(90deg, transparent, #000 5%);
}

.pills__track {
  display: flex;
  width: max-content;
  gap: 12px;
  padding: 0 24px;
  animation: pills-roll 34s linear infinite;
}

/* Same direction as the first row, started halfway through so they never march in step. */
.pills__strip--b .pills__track { animation-delay: -17s; }

@keyframes pills-roll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 6px)); }   /* half the track + half the gap */
}

.pill {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: 44px;
  padding: 0 18px 0 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 18, 23, 0.06);
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ink);
  white-space: nowrap;
}

/* The icon carries the colour, the label never does. */
.pill__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--pill-tint);
}

.pill__icon svg { width: 18px; height: 18px; }

/* Compact variant */
.pill--sm {
  height: 34px;
  padding: 0 13px 0 5px;
  gap: 7px;
  font-size: 13px;
  line-height: 18px;
}

.pill--sm .pill__icon { width: 24px; height: 24px; }

.pill--sm .pill__icon svg { width: 14px; height: 14px; }

.pill--blue { --pill-tint: #DCEBFF; }
.pill--purple { --pill-tint: #E7DFFB; }
.pill--peach { --pill-tint: #FFE3C9; }
.pill--green { --pill-tint: #D9F2E1; }
.pill--pink { --pill-tint: #FFDDE4; }
.pill--sand { --pill-tint: #FFEFC7; }
.pill--mint { --pill-tint: #D3F1EE; }
.pill--lilac { --pill-tint: #EADFF7; }

@media (prefers-reduced-motion: reduce) {
  .pills__track { animation: none; }
  .pcard__pills {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --------------------------------------------------------------------------
   Device frames — drawn in CSS, screens filled by main.js
   -------------------------------------------------------------------------- */

/* No overflow clip — the phone's side button sits proud of the bezel. */
.frame {
  position: absolute;
  background: var(--gray-900);
}

.frame__screen {
  position: relative;
  overflow: hidden;
  display: block;
  height: 100%;
  /* Stand-in until the assets land */
  background: linear-gradient(155deg, #FFFFFF, #E9E9F1);
}

/* Width-fitted and top-pinned, NOT object-fit:cover — these captures are only the top ~70% of a screen. */
.frame__shot,
.frame__video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}

.frame__video {
  opacity: 0;
  transition: opacity 0.25s;
}

.frame.is-playing .frame__video { opacity: 1; }

/* Browser frame */
.frame--web {
  inset: 0 auto 0 0;
  overflow: hidden;
  width: 100%;
  border-radius: 12px 12px 0 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 18, 23, 0.10), var(--shadow-xl);
}

.frame--web .frame__screen { height: calc(100% - 36px); }

.frame__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--gray-50);
  border-radius: 12px 12px 0 0;
}

/* Three lights in one element */
.frame__dots {
  flex: none;
  width: 40px;
  height: 8px;
  background:
    radial-gradient(circle 4px at 4px 50%, #FF5F57 98%, transparent),
    radial-gradient(circle 4px at 20px 50%, #FEBC2E 98%, transparent),
    radial-gradient(circle 4px at 36px 50%, #28C840 98%, transparent);
}

.frame__url {
  flex: 1;
  max-width: 220px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 11px;
  line-height: 16px;
  color: var(--muted);
}

/* Phone frame */
.frame--phone {
  width: 216px;
  aspect-ratio: 9 / 19.5;
  padding: 9px;
  border-radius: 34px;
  box-shadow: 0 0 0 1px rgba(18, 18, 23, 0.55), var(--shadow-xl);
}

.frame--phone .frame__screen { border-radius: 26px; }

/* Island floats over the screen content */
.frame--phone .frame__screen::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 17px;
  border-radius: 999px;
  background: var(--gray-900);
  z-index: 2;
}

.frame--phone::after {
  content: "";
  position: absolute;
  top: 108px;
  right: -2px;
  width: 2px;
  height: 54px;
  border-radius: 0 2px 2px 0;
  background: #3A3A44;
}

/* One phone per card, centred in the panel */
.pcard--marks-jee .frame--phone,
.pcard--marks-neet .frame--phone,
.pcard--marks-upsc .frame--phone {
  left: 50%;
  top: 0;
  margin-left: -108px;               /* half of .frame--phone's width */
}

@media (prefers-reduced-motion: reduce) {
  .pcard, .pbtn, .frame__video { transition: none; }
  .features__track { animation: none; }

  /* Keep the thicker edge, drop the travelling highlight */
  .pcard--quizrr:hover {
    animation: none;
    background-image: none;
    border-color: var(--pc-stroke);
  }
}

/* --------------------------------------------------------------------------
   YouTube channels
   -------------------------------------------------------------------------- */

.yt { padding-top: 0; }

.ytmain {
  position: relative;
  min-height: 236px;
  margin-bottom: 20px;
  padding: 30px 330px 30px 36px;
  border: 1px solid var(--gray-50);
  border-radius: var(--r-xl);
  background: var(--gray-50);
  transition: border-color 0.18s;
}

.ytmain:hover { border-color: var(--line-strong); }

.ytmain__brands,
.ytcard__brands {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ytmain__brands img { height: 30px; width: auto; }

.ytrule {
  width: 1px;
  height: 22px;
  flex: none;
  background: var(--line-strong);
}

/* Shared YouTube lockup */
.ytlogo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ytlogo svg { width: 30px; height: 22px; flex: none; }

.ytmain__title {
  max-width: 24ch;
  margin-top: 18px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.ytmain__sub {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.ytmain__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
}

.ytmain__count { font-size: 15px; color: var(--ink-soft); }

.ytmain__count b { font-weight: 700; color: var(--ink); }

/* YouTube red on the flagship, near-black on the smaller channels */
.ytsub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--gray-900);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s;
}

.ytsub:hover { background: #000; }

.ytsub--red { background: #FF0000; }

.ytsub--red:hover { background: #D40000; }

.ytsub:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--gray-150); }

/* Bottom-anchored and taller than the panel, so the head rises above it */
.ytmain__photo {
  position: absolute;
  right: 28px;
  bottom: 0;
  width: auto;
  height: calc(100% + 44px);
  pointer-events: none;
}

/* The three focused channels */
.ytgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ytcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--gray-50);
  border-radius: var(--r-xl);
  background: var(--gray-50);
  transition: border-color 0.18s;
}

.ytcard:hover { border-color: var(--line-strong); }

.ytcard__logo { height: 28px; width: auto; }

.ytcard__desc { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* Buttons line up across cards whatever the description length */
.ytcard .ytsub { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .ytmain, .ytcard, .ytsub { transition: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* Cooler than --gray-50, so the footer separates without a top border. */
.footer {
  --footer-bg: #F5F9FF;
  --footer-line: #E3EBF6;
  /* No bottom padding — overflow here crops the sign-off at the page edge. */
  padding: 72px 0 0;
  overflow: hidden;
  background: var(--footer-bg);
}

/* Brand block is wider than the link columns */
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 48px 40px;
}

.footer__logo { display: inline-block; }

/* Deliberately larger than the header wordmark */
.footer__logo img { display: block; height: 48px; width: auto; }

.footer__addr {
  margin-top: 32px;
  font-size: 16px;
  font-style: normal;
  line-height: 1.6;
  color: var(--ink-soft);
}

.footer__mail {
  display: inline-block;
  margin-top: 20px;
  font-size: 16px;
  color: var(--ink-soft);
  transition: color 0.18s;
}

.footer__mail:hover { color: var(--primary-600); }

.footer__social {
  display: flex;
  gap: 14px;
  margin-top: 40px;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -6px;
  color: var(--ink);
  transition: color 0.18s;
}

.footer__social a:hover { color: var(--primary-600); }

.footer__social svg { width: 24px; height: 24px; }

.footer__social a:focus-visible {
  outline: none;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 4px var(--primary-100);
}

.footer__cols {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
}

.footer__col h2 {
  margin-bottom: 32px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
}

.footer__col a {
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
  transition: color 0.18s;
}

.footer__col a:hover { color: var(--primary-600); }

/* The hashtag is sized to span the footer edge to edge, so the type scale is derived. */
.footer__band {
  container-type: inline-size;
  margin-top: 40px;
  /* text-stroke can't take a gradient, so the fade masks the whole band. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.25) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, rgba(0, 0, 0, 0.25) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.footer__tag {
  font-family: "Anton", "Inter", system-ui, sans-serif;
  /* Fallback for engines without container units. */
  font-size: min(175px, calc(14.1vw - 6.8px));
  font-size: calc(100cqw / 7.018);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  /* Bleeds the line past the footer edge, where .footer's overflow crops it. Held
     just below the baseline so only the descender tails are cut and the word still
     reads — at -0.2em the cut landed 21px above the baseline, through the letters.
     In em, so the ratio holds at every breakpoint. */
  margin-bottom: -0.05em;
  /* Solid tint is the fallback; where text-stroke exists only the outline remains. */
  color: #E7EDF6;
  white-space: nowrap;
}

/* wrapped only so screen readers can skip it */

@supports (-webkit-text-stroke: 1px currentColor) {
  .footer__tag {
    color: transparent;

    -webkit-text-stroke: max(0.8px, 0.01em) #D7DFEC;
  }
}

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--footer-line);
}

.footer__copy { font-size: 15px; text-align: center; color: var(--muted); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .proof__wall { grid-template-columns: repeat(10, 1fr); }

  .pcent:nth-child(n+51) { display: none; }   /* 10 cols x 5 rows */

  .header__nav { gap: 2px; }
  .header__nav > a, .nav-link { padding: 0 10px; font-size: 15px; }

  .series__grid { gap: 16px; }

  .pyq__grid { gap: 16px; }

  .scard__body { padding: 20px 16px 22px; }
  .scard__foot { padding: 14px 16px; }
  .bcard__body { padding: 20px 16px 22px; }
  .bcard__foot { padding: 14px 16px; }
}

@media (max-width: 960px) {
  .hero__content {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 48px 24px 48px;
    justify-items: center;
    text-align: center;
  }

  .has-banner .hero__content { padding-bottom: calc(48px + var(--banner-overlap)); }

  .hero__copy { max-width: 640px; }

  .hero__sub { margin-left: auto; margin-right: auto; }

  .hero__stats { justify-content: center; }

  .hero__cta { justify-content: center; }

  .hero__media { width: min(460px, 100%); }

  .hero__tag { --tag-scale: 1.6; }

  .proof { --proof-overlap: 96px; }

  .proof__card { padding: 36px 24px 32px; }

  .proof__wall { grid-template-columns: repeat(8, 1fr); gap: 18px 8px; }

  .pcent:nth-child(n+41) { display: none; }   /* 8 cols x 5 rows */

  .fcar { --fcar-w: 128px; --fcar-w-active: 200px; }

  :root { --banner-overlap: 44px; }

  .banner { padding-bottom: 64px; }

  .series { padding: 8px 0 72px; }

  .series__head { margin-bottom: 32px; }

  .series__head p { font-size: 16px; }

  .series__grid { grid-template-columns: repeat(2, 1fr); }

  .series__soon-grid .scard { flex-basis: calc(50% - 10px); }

  .ytmain {
    min-height: 220px;
    padding: 28px 250px 28px 28px;
    text-align: center;
  }

  .ytmain__brands { justify-content: center; }

  .ytmain__title { max-width: none; }

  .ytmain__actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .ytmain__photo { right: 18px; height: calc(100% + 30px); }

  /* Two up, and the odd card centres itself */
  .ytgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ytcard {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
    align-items: center;
    text-align: center;
  }

  /* three narrow columns beat two plus an orphan */
  .bcard__art { padding: 24px 0 32px; }

  .products__grid { grid-template-columns: 1fr; }

  .pcard--marks-jee,
  .pcard--marks-neet,
  .pcard--marks-upsc { min-height: 0; }

  /* Not enough width to sit the frame beside the copy */
  .pcard--quizrr {
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
  }

  .pcard--quizrr .pcard__copy { width: 100%; max-width: 460px; }

  .pcard--quizrr .pcard__art {
    position: relative;
    inset: auto;
    align-self: stretch;
    width: auto;
    margin: 24px -33px -1px;
    height: 280px;
  }

  /* The row runs inline once the card stacks, bleeding to the panel edges. */
  .pcard__pills {
    position: static;
    align-self: stretch;         /* the card is a flex column here, and top-aligned */
    margin: 26px -33px 0;
  }

  /* Both ends fade once no frame overlaps the rows */
  .pills__strip {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }

  .pills__track { padding: 0 33px; }

  .frame--web { position: absolute; }

  .pass { margin-bottom: 44px; padding: 32px 28px; gap: 28px; }

  .pass__art { max-width: 380px; }

  /* Brand block takes a row of its own */
  .footer { padding: 56px 0 0; }

  .footer__top { grid-template-columns: 1fr; gap: 40px; }

  .footer__addr { margin-top: 24px; }

  .footer__social { margin-top: 28px; }

  .footer__bar { margin-top: 40px; }

  .footer__band { margin-top: 32px; }
}

@media (max-width: 760px) {
  .campus { padding: 8px 0 68px; }

  .series { padding: 4px 0 56px; }

  .series__grid { grid-template-columns: 1fr; }

  /* One card per row — the art panel shrinks to a band */
  .scard__art { aspect-ratio: auto; height: 132px; }

  .scard__tile { width: 72px; height: 72px; padding: 12px; }

  .scard__tile--pair { width: 108px; }

  .scard__tile--trio { width: 140px; gap: 8px; }

  .series__soon { margin-top: 40px; }

  .series__soon-head { margin-bottom: 20px; }

  .series__soon-grid { gap: 16px; }

  /* One book per row, so the cover reads at full size */
  .pyq__grid { grid-template-columns: 1fr; }

  .products__grid { gap: 16px; }

  .pcard { padding: 24px; }

  /* .pcard's shorthand above resets padding-bottom, so re-assert it */
  .pcard--quizrr { padding-bottom: 0; }

  .pcard--marks-jee .pcard__art,
  .pcard--marks-neet .pcard__art,
  .pcard--marks-upsc .pcard__art { height: 215px; margin-bottom: -25px; }

  .frame--phone { width: 176px; border-radius: 28px; padding: 7px; }

  .frame--phone .frame__screen { border-radius: 22px; }

  .frame--phone .frame__screen::before { width: 52px; height: 14px; top: 6px; }

  .pcard--marks-jee .frame--phone,
  .pcard--marks-neet .frame--phone,
  .pcard--marks-upsc .frame--phone { margin-left: -88px; }

  .pcard--quizrr .pcard__art { height: 210px; margin: 22px -25px -1px; }

  /* Card padding drops to 24px here, so the bleed must match */
  .pcard__pills { margin: 22px -25px 0; }

  .pills__track { padding: 0 25px; gap: 10px; }

  .pill { height: 40px; padding: 0 15px 0 5px; gap: 8px; font-size: 14px; }

  .pill__icon { width: 30px; height: 30px; }

  .bcard__art { padding: 28px 0 36px; }

  .bcard__book { width: 156px; }

  .series__soon-grid .scard { flex-basis: 100%; }

  /* The portrait is decorative — drop it rather than squeeze the copy */
  .ytmain {
    min-height: 0;
    padding: 24px 20px;
  }

  .ytmain__photo { display: none; }

  .ytmain__title { max-width: none; }

  .ytcard { flex-basis: 100%; max-width: none; padding: 20px; }

  .pass {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 36px;
    padding: 28px 20px;
    text-align: center;
  }

  .pass__body { display: contents; }

  .pass__flags { justify-content: center; gap: 12px; }

  .pass__save { font-size: 18px; line-height: 24px; }

  .pass__title { max-width: none; }

  .pass__sub { max-width: none; }

  .pass__art {
    order: 2;
    align-self: center;
    max-width: 400px;
    margin-top: 26px;
  }

  .pass__cta { order: 3; width: 100%; margin-top: 24px; }

  .series__foot { margin-top: 24px; }

  .campus__head { margin-bottom: 32px; }
  .campus__head p { font-size: 16px; }
  .campus__item { height: 60px; padding: 0 16px; gap: 10px; }
  .campus__item img { width: 32px; height: 32px; }
  .campus__item span { font-size: 14px; }
  .marquee__track { animation-duration: 60s; }

  .header__inner { height: 64px; }

  .header__toggle { display: flex; }

  .header__nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 8px 16px 16px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }

  .header.nav-open .header__nav { display: flex; }

  .header__nav > a, .nav-link { width: 100%; justify-content: flex-start; height: 44px; }

  /* Mega menus become inline accordions */
  .nav-item { width: 100%; }

  .nav-link { justify-content: space-between; }

  .mega {
    position: static;
    width: 100%;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 8px;
  }

  .mega::before { display: none; }

  .mega__pass { margin: 10px 0 0; }

  .mega__foot { margin-top: 8px; padding: 12px 12px 2px; flex-wrap: wrap; gap: 16px; }

  .hellobar { padding: 10px 16px; font-size: 13px; }

  .hero__cta { width: 100%; flex-direction: column; align-items: stretch; padding: 0 8px; }

  .hero__cta .btn { width: 100%; }

  .proof { --proof-overlap: 56px; padding-bottom: 48px; }

  .proof__card { padding: 28px 16px 24px; border-radius: var(--r-lg); }

  .proof__rule { margin: 14px auto 24px; }

  .proof__wall { grid-template-columns: repeat(4, 1fr); gap: 16px 6px; }

  .pcent:nth-child(n+21) { display: none; }   /* 4 cols x 5 rows */

  .fcar {
    --fcar-w: 96px;
    --fcar-w-active: 168px;
    --fcar-gap: 10px;
    gap: 6px;
    margin-bottom: 28px;
  }

  .fcar__nav { width: 32px; height: 32px; }

  .fcar__nav svg { width: 15px; height: 15px; }

  .fcar__meta { padding: 32px 10px 10px; }

  .fcar__meta b { font-size: 13px; }

  .fcar__meta span { font-size: 11px; }

  .pcent img { width: 52px; height: 52px; }

  .pcent b, .pcent span { font-size: 10px; }

  /* Taller crop on phones — match BANNER_CONFIG's mobile images */
  :root { --banner-overlap: 28px; }

  .banner {
    --banner-ratio: 1080 / 300;
    --banner-pad: 8px;
    --banner-inner-r: var(--r-md);
    padding-bottom: 52px;
  }

  .banner__dots { bottom: 10px; }

  /* Even tracks — the labels are free to wrap here */
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }

  .footer__col h2 { margin-bottom: 20px; font-size: 16px; }

  .footer__col ul { gap: 14px; }

  .footer__col a, .footer__addr, .footer__mail { font-size: 15px; }

  .footer__band { margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: var(--gray-900);
}

.field__req { color: var(--red-500); font-weight: 400; }

.field__box {
  display: flex;
  align-items: stretch;
  height: 48px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field__box:hover { border-color: var(--gray-300); }

.field__box:focus-within {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 1px var(--primary-500);
}

.field__input {
  flex: 1;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-900);
}

.field__input:focus { outline: none; }

.field__input::placeholder { color: var(--muted); }

/* Leading +91 add-on — a flush segment divided off the field. */
.field__addon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-right: 1px solid var(--gray-150);
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  user-select: none;
}

/* Inline SVG, never the emoji — Windows renders the flag glyph as the letters "IN". */
.field__flag { width: 20px; height: 20px; flex: none; display: block; }

.field__help {
  font-size: 14px;
  line-height: 20px;
  color: var(--red-500);
}

.field.is-error .field__box { border-color: var(--red-500); }

.field.is-error .field__box:focus-within { box-shadow: 0 0 0 1px var(--red-500); }

/* --------------------------------------------------------------------------
   Notify Me — modal on desktop, bottom sheet under 760px
   -------------------------------------------------------------------------- */

.notify {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.notify[hidden] { display: none; }

.notify__scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 23, 0.55);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.notify.is-open .notify__scrim { opacity: 1; }

.notify__panel {
  position: relative;
  width: 100%;
  max-width: 448px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2xl);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.notify.is-open .notify__panel { opacity: 1; transform: none; }

.notify__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.notify__close:hover { background: var(--gray-50); color: var(--ink); }

.notify__close:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--gray-150); }

.notify__close svg { width: 18px; height: 18px; }

/* Grab handle — sheet only */
.notify__grab { display: none; }

.notify__head { margin-bottom: 24px; }

.notify__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: var(--r-lg);
  background: var(--primary-50);
  color: var(--primary-600);
}

.notify__icon svg { width: 24px; height: 24px; }

.notify__head h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--ink);
}

.notify__sub {
  margin-top: 6px;
  font-size: 14px;
  line-height: 24px;
  color: var(--muted);
}

.notify__item { font-weight: 600; color: var(--ink); }

.notify__form { display: flex; flex-direction: column; gap: 16px; }

.notify__submit { margin-top: 4px; }

.notify__error {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: #FEF0F4;
  color: #AF0932;
  font-size: 14px;
  line-height: 20px;
}

/* display:flex would otherwise beat the `hidden` attribute */
.notify__error[hidden] { display: none; }

.notify__error svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

.notify__note {
  font-size: 13px;
  line-height: 20px;
  color: var(--muted);
  text-align: center;
}

/* Replaces the form in place, so the dialog keeps its size. */
.notify__done { text-align: center; padding: 8px 0 4px; }

.notify__done-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-600);
}

.notify__done-icon svg { width: 30px; height: 30px; }

.notify__done h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--ink);
}

.notify__done p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 24px;
  color: var(--muted);
}

.notify__done .btn { margin-top: 24px; }

.notify__wait {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 132px;
  font-size: 14px;
  color: var(--muted);
}

.notify__spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--gray-200);
  border-top-color: var(--primary-500);
  border-radius: 999px;
  animation: notify-spin 0.7s linear infinite;
}

@keyframes notify-spin { to { transform: rotate(360deg); } }

/* Notify cards are buttons, not links — strip the UA button styling. */
button.scard {
  width: 100%;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
}

@media (max-width: 760px) {
  /* Anchored to the bottom edge, full width, slides up */
  .notify { align-items: flex-end; padding: 0; }

  .notify__panel {
    max-width: none;
    max-height: 92vh;
    padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    /* --sheet-y is written by the drag handler; it falls back to closed (100%) / open (0). */
    transform: translateY(var(--sheet-y, 100%));
  }

  .notify.is-open .notify__panel { transform: translateY(var(--sheet-y, 0px)); }

  /* While the finger is down the panel tracks it 1:1 */
  .notify.is-dragging .notify__panel { transition: none; }

  .notify__grab {
    display: block;
    width: 40px;
    height: 4px;
    margin: 12px auto 16px;
    border-radius: 999px;
    background: var(--gray-200);
  }

  .notify__grab,
  .notify__head { touch-action: none; }

  .notify__close { top: 14px; right: 12px; }

  .notify__head { margin-bottom: 20px; }

  .notify__head h2 { font-size: 20px; line-height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .notify__scrim,
  .notify__panel { transition: none; }

  .notify__spinner { animation: none; }
}