/* Brand fonts, served from pepy.in itself: faster than a third-party font
   service and no visitor data leaves the site. Latin subsets. */
@font-face { font-family: 'Unbounded'; src: url('/assets/vendor/fonts/unbounded.woff2') format('woff2'); font-weight: 500 900; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/vendor/fonts/dm-sans.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/vendor/fonts/space-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/vendor/fonts/space-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/assets/vendor/fonts/caveat.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }
/* Devanagari, for the Hindi pages: Baloo 2 to shout, Mukta to talk (both OFL).
   Subset to Devanagari plus spaces and punctuation; they come after the Latin
   fonts on English pages, so only Devanagari text pulls them in. ₹ is in the
   files but not the range, so the English price does not either. */
@font-face { font-family: 'Baloo 2'; src: url('/assets/vendor/fonts/baloo-2.woff2') format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0020-002F, U+003A-003F, U+00A0, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: 'Mukta'; src: url('/assets/vendor/fonts/mukta-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0020-002F, U+003A-003F, U+00A0, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: 'Mukta'; src: url('/assets/vendor/fonts/mukta-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0020-002F, U+003A-003F, U+00A0, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+0900-097F, U+1CD0-1CFF, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }

/* ==========================================================================
   Pepy — site styles  ·  "loud & drawn-on"

   The look: warm paper, chunky type, stickers at an angle, thick ink outlines
   with hard offset shadows, highlighter swipes and hand-drawn doodles. Tidy
   underneath (one container, one rhythm), deliberately a little messy on top.

   Structure: tokens → primitives → shared blocks → page blocks → responsive.
   The old token names (--teal-ink, --amber-ink, --dim…) are kept because the
   SVG figures reference them; only their values changed.
   ========================================================================== */

:root {
  /* ink + surfaces */
  --ink:        #121016;
  --ink-soft:   #2b2733;
  --muted:      #4a4453;
  --muted-soft: #5a5463;
  --dim:        #5f5868;
  --dim-soft:   #6a6372;
  --paper:      #FFF4E0;
  --panel:      #FFE7BD;
  --white:      #FFFDF8;
  --night:      #121016;
  --night-line: #121016;
  --night-text: #E9E6EE;

  /* One accent: lime. Everything else is ink, paper and white. */
  --lime:      #D4FF3A;
  --lime-soft: #F1FFC2;
  --lime-deep: #4A5D00;   /* lime family as readable text on paper (7:1) */
  --soft:      #F4F1EA;   /* quiet fill for secondary cards */

  /* The signature: lime-and-ink diagonal stripes. Used only where a hard
     shadow would be and on the footer's edge — never behind text. */
  --stripes: repeating-linear-gradient(135deg, var(--ink) 0 4px, var(--lime) 4px 9px);

  /* legacy names, remapped — figures and old blocks still read these */
  --teal:        var(--lime);
  --teal-ink:    var(--lime-deep);
  --teal-deep:   var(--ink);
  --teal-dim:    #CFCAD6;
  --teal-bright: var(--lime);
  --amber:       var(--lime);
  --amber-ink:   #6b6474;   /* the "wrong way" in figures: plain grey */
  --amber-deep:  var(--ink);

  /* outlines + shadows: the whole look hangs off these */
  --line:      2.5px solid var(--ink);
  --line-bold: 3px solid var(--ink);
  --pop:       5px 5px 0 var(--ink);
  --pop-big:   8px 8px 0 var(--ink);
  --pop-sm:    3px 3px 0 var(--ink);
  --radius:    22px;

  --rule:        rgba(18, 16, 22, .14);
  --rule-strong: rgba(18, 16, 22, .2);
  --rule-btn:    var(--ink);

  /* type — Unbounded for shouting, DM Sans for talking, Space Mono for
     labels, Caveat for the scribbled-in-the-margin bits. */
  --display: 'Unbounded', 'Baloo 2', 'Arial Black', system-ui, sans-serif;
  --serif:   'DM Sans', 'Mukta', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:    var(--serif);
  --mono:    'Space Mono', 'Mukta', ui-monospace, Menlo, monospace;
  --hand:    'Caveat', 'Baloo 2', 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Moving between pages cross-fades like an app, and the nav stays put. */
@view-transition { navigation: auto; }
.site-nav { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
/* The tilted ribbon runs past both edges on purpose. `clip` (unlike hidden)
   stops a phone from widening the whole page to fit it. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background-color: var(--paper);
  /* notebook dot grid */
  background-image: radial-gradient(rgba(18, 16, 22, .045) 1.3px, transparent 1.4px);
  background-size: 26px 26px;
}

a { color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--teal-ink); }

::selection { background: var(--lime); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  border: var(--line);
  border-radius: 999px;
  transition: top .2s ease;
}
.skip-link:focus { top: 8px; color: var(--ink); }

/* --------------------------------------------------------------- doodles -- */

.doodle { position: absolute; display: block; pointer-events: none; z-index: 2; }
.doodle--sparkle { color: var(--lime); }
.doodle--star    { color: var(--lime); }
.doodle--squiggle{ color: var(--ink); }

@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--r, 0deg)); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Highlighter swipe behind a word or two. */
.hl {
  position: relative;
  white-space: nowrap;
  z-index: 0;
  padding-inline: .08em;
}
.hl::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -.12em; right: -.12em;
  top: .12em; bottom: .02em;
  background: var(--hl, var(--lime));
  border-radius: .18em .5em .22em .6em;
  transform: rotate(-1.6deg) skewX(-6deg);
}
.hl--lime { --hl: var(--lime); }

/* A word scribbled out, by hand. */
.scribble {
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  color: var(--muted-soft);
}
.scribble::after {
  content: '';
  position: absolute;
  left: -6%; right: -6%;
  top: 50%;
  height: .5em;
  transform: translateY(-45%) rotate(-3deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 26C40 10 60 30 96 16s60 14 100-6M8 32c50-18 90 4 186-18' fill='none' stroke='%23121016' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------------------------------------------------------------- layout -- */

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 28px; }

.section { padding: 84px 28px 20px; }
.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.section__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 3.8vw, 50px);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0 0 8px;
  max-width: 16em;
  text-wrap: balance;
}
.section__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  padding: 8px 16px;
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--pop-sm);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.section__label { margin-bottom: 30px; }

/* Eyebrows become little stickers. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--pop-sm);
  transform: rotate(-1.5deg);
}
.eyebrow--teal { background: var(--lime); }
.step { font-size: 12px; margin-bottom: 18px; }

.t-teal  { color: var(--teal-ink); font-style: normal; }
.t-amber { color: var(--amber-ink); font-style: normal; }

.band { background: var(--panel); border-block: var(--line-bold); }
.band--top { margin-top: 60px; }
.band__inner { padding-block: 80px; }

/* ------------------------------------------------------------------- nav -- */

.site-nav {
  position: sticky;
  top: 12px;
  z-index: 30;
  padding-inline: 16px;
  margin-top: 12px;
  font-family: var(--mono);
}
.site-nav .site-nav__inner { padding-inline: 30px 12px; }   /* beats .wrap; the slanted mark needs room from the pill edge */
.site-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 8px 30px;
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--pop);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--lime);
  border: var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }
.nav-toggle__top,
.nav-toggle__mid,
.nav-toggle__bot { transition: opacity .2s ease, transform .2s ease; transform-origin: 50% 50%; }
.site-nav.is-open .nav-toggle__mid { opacity: 0; }
.site-nav.is-open .nav-toggle__top { transform: translateY(6px) rotate(45deg); }
.site-nav.is-open .nav-toggle__bot { transform: translateY(-6px) rotate(-45deg); }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand:hover { color: var(--ink); }

/* The logo: the drawn wordmark (site/logo.mjs). Lime letters, an ink outline
   and a hard ink shadow like every card on the site; the y ends in an arrow.
   Each placement can recolour it through these three properties. */
.logomark {
  --lm-fill: var(--lime);
  --lm-line: var(--ink);
  --lm-shadow: var(--ink);
}
/* Letters are strokes; the arrowhead is a filled shape with the same outline. */
.logomark .lm-stroke { fill: none; }
.logomark .lm-fill   .lm-stroke { stroke: var(--lm-fill); }
.logomark .lm-fill   .lm-solid  { fill: var(--lm-fill); }
.logomark .lm-line   .lm-stroke { stroke: var(--lm-line); }
.logomark .lm-line   .lm-solid  { fill: var(--lm-line); stroke: var(--lm-line); }
.logomark .lm-shadow .lm-stroke { stroke: var(--lm-shadow); }
.logomark .lm-shadow .lm-solid  { fill: var(--lm-shadow); stroke: var(--lm-shadow); }

.logo { display: inline-flex; align-items: center; }
.logomark { display: block; width: 150px; height: auto; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover .logomark { transform: rotate(-3deg) scale(1.06); }
@media (prefers-reduced-motion: no-preference) {
  .site-nav .logomark { animation: lm-in .7s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
  /* the arrow is the logo's one quirk: it shoots up once the word has landed,
     and nudges upward when you point at the logo */
  .site-nav .lm-solid { animation: lm-arrow .55s cubic-bezier(.3, 1.8, .5, 1) .6s both; }
  .brand:hover .lm-solid { animation: lm-nudge .5s ease both; }
}
@keyframes lm-arrow { from { opacity: 0; transform: translateY(26px); } }
@keyframes lm-nudge { 40% { transform: translateY(-10px); } }
@keyframes lm-in { from { opacity: 0; transform: translateY(14px) rotate(-8deg) scale(.8); } }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
}
.site-nav__links a {
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 999px;
  transition: background .15s ease;
}
.site-nav__links a:hover { background: var(--panel); color: var(--ink); }
.site-nav__links a[aria-current="page"] { background: var(--ink); color: var(--lime); }

.site-nav__links .nav-cta {
  margin-left: 8px;
  padding: 11px 18px;
  background: var(--ink);
  color: var(--lime);
  border: var(--line);
  box-shadow: var(--pop-sm);
  transform: rotate(2deg);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* --------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--ink);
  border: var(--line-bold);
  border-radius: 999px;
  padding: 15px 26px;
  white-space: nowrap;
  box-shadow: var(--pop);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.btn--solid { background: var(--lime); }
.btn--ghost { background: var(--white); }
.btn--ghost:hover { background: var(--lime-soft); }
.btn--teal { background: var(--ink); color: var(--lime); font-size: 17px; padding: 18px 30px; }

/* ------------------------------------------------------------------ tags -- */

.tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.tag--teal  { background: var(--lime); }
.tag--amber { background: var(--lime); }
.tag--muted { background: var(--white); color: var(--muted); }
.tag--quiet { border: 0; color: var(--dim-soft); padding-inline: 0; }

/* ------------------------------------------------------------ page heroes -- */

.page-hero { padding: 80px 28px 40px; }
.page-hero__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 28px 0 24px;
  max-width: 13em;
}
.page-hero__lede {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.5;
  max-width: 32em;
  margin: 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

/* ------------------------------------------------------------ hero split -- */

.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px 60px;
  align-items: center;
  padding-block: 40px 70px;
}
.hero-split > * { min-width: 0; }
.hero-split__text { position: relative; }
.hero-split__spark { width: 46px; height: 46px; right: 4%; top: -18px; color: var(--ink); }
.hero-split__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(42px, 5.3vw, 76px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 24px 0 20px;
  text-wrap: balance;
}
.hero-split__lede {
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.5;
  max-width: 26em;
  margin: 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.stage-wrap { position: relative; }
/* Short enough that the promises below still make the first screen on a laptop. */
.hero-split pepy-stage { height: clamp(340px, 34vw, 460px); }
.stage-wrap__star  { width: 64px; height: 64px; left: -26px; top: -28px; transform: rotate(-12deg); }

/* ---------------------------------------------------------------- ticker -- */

.ticker {
  overflow: hidden;
  border-block: var(--line-bold);
  background: var(--lime);
  transform: rotate(-1deg);
  margin: 10px -20px;
  position: relative;
  z-index: 3;
}
.ticker__track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker__run { display: flex; align-items: center; flex-shrink: 0; }
.ticker__item {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: -.03em;
  padding: 14px 22px;
  white-space: nowrap;
}
.ticker__spark { position: static; width: 30px; height: 30px; color: var(--white); flex-shrink: 0; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ usps -- */

/* The three promises: a full-width row straight under the hero, so they are
   the second thing anyone reads. Picture, big number, what it means. */
.usps {
  grid-column: 1 / -1;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.usp {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 6px;
  align-items: center;
  padding: 22px 24px;
  border: 3px solid transparent;
  border-radius: var(--radius);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.usp:nth-child(3) { color: var(--white); }
.usp__icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  background: var(--white);
  color: var(--ink);
  border: var(--line);
  border-radius: 50%;
}
.usp:nth-child(3) .usp__icon { background: var(--lime); }
.usp__icon .icon { width: 36px; height: 36px; stroke-width: 3.5; }
.usp__value {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  align-self: end;
}
.usp:nth-child(3) .usp__value { color: var(--lime); }
/* The promises land one after another, so each gets read. */
@media (prefers-reduced-motion: no-preference) {
  .usps .usp { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
  .usps.is-revealed .usp { opacity: 1; transform: none; }
  .usps.is-revealed .usp:hover { transform: translateY(-4px); }
  .usps.is-revealed .usp:nth-child(2) { transition-delay: .12s; }
  .usps.is-revealed .usp:nth-child(3) { transition-delay: .24s; }
}
.usp__label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  align-self: start;
}

/* ----------------------------------------------------------------- moves -- */

.moves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.move {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 26px;
  border: var(--line-bold);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease;
}
.move:nth-child(4n+1) { background: var(--lime);   --tilt: 0deg; }
.move:nth-child(4n+2) { background: var(--white);  --tilt: 0deg; }
.move:nth-child(4n+3) { background: var(--lime);   --tilt: 0deg; }
.move:nth-child(4n+4) { background: var(--ink); color: var(--white); --tilt: 0deg; box-shadow: 5px 5px 0 var(--lime); }
.move:nth-child(4n+4) .move__key,
.move:nth-child(4n+4) .move__line { color: var(--white); }
.move:nth-child(4n+4) .move__num { -webkit-text-stroke-color: var(--lime); }
.move:nth-child(4n+4) .move__icon { background: var(--lime); }
.move.is-revealed { transform: rotate(var(--tilt)); }
.move__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.move__icon {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  background: var(--white);
  border: var(--line);
  border-radius: 50%;
  color: var(--ink);
}
.move__icon .icon { width: 38px; height: 38px; }
.icon { width: 44px; height: 44px; display: block; stroke-width: 3; }
.move__num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.move__key {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ink);
}
.move__line { font-size: 16px; line-height: 1.45; margin: 0; color: var(--ink); text-wrap: pretty; }

/* ----------------------------------------------------------------- doors -- */

.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border: var(--line-bold);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  padding: 28px;
  min-height: 260px;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease;
}
.door::after {                       /* a colour blob bleeding off the corner */
  content: '';
  position: absolute;
  right: -46px; top: -46px;
  width: 150px; height: 150px;
  border-radius: 46% 54% 60% 40%;
  background: var(--blob, var(--lime));
  border: var(--line-bold);
  z-index: 0;
}
.door > * { position: relative; z-index: 1; }
.door:nth-child(3n+1) { --blob: var(--lime); }
.door:nth-child(3n+2) { --blob: var(--lime); }
.door:nth-child(3n+3) { --blob: var(--lime); }
.door__icon { color: var(--ink); }
.door__icon .icon { width: 56px; height: 56px; }
.door__label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}
.door__line {
  font-family: var(--display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -.035em;
  margin: 0;
  flex: 1;
}
.door__more {
  align-self: flex-start;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border: var(--line);
  border-radius: 999px;
  background: var(--blob);
}

/* --------------------------------------------------------- read vs. see -- */

.compare {
  margin: 0;
  color: var(--ink);
  border: 3px solid transparent;
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 40px);
}
.compare__svg { display: block; width: 100%; overflow: visible; }
.compare__svg--tall { display: none; }
.compare__old { color: var(--dim-soft); opacity: .45; }
.compare__arrow { color: var(--ink); }
.compare__arrow path { stroke-width: 4; }
.compare__new { color: var(--ink); }
.compare__new path { stroke-width: 3.5; }
.compare__new path:first-child { fill: rgba(212, 255, 58, .55); }
.compare__dot { color: var(--lime); stroke: var(--ink); stroke-width: 2; }
.compare__track { fill: rgba(18, 16, 22, .1); }
.compare__fill { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }
.compare__fill-old { fill: var(--dim-soft); opacity: .6; }
.compare__label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  fill: var(--dim);
}
.compare__label.is-accent { fill: var(--teal-ink); }
.compare__note { font-family: var(--hand); font-size: 20px; font-weight: 700; fill: var(--dim); }
.compare__note.is-accent { fill: var(--teal-ink); }

/* -------------------------------------------------------------- exploded -- */

.exploded {
  margin: 0;
  color: var(--ink);
  background: var(--soft);
  border: var(--line-bold);
  border-radius: var(--radius);
  box-shadow: var(--pop-big);
  padding: 30px;
  display: grid;
  place-items: center;
}
.exploded__svg { display: block; width: 100%; max-width: 320px; }
.exploded__solid path { stroke-width: 3.2; }
.exploded__solid g:nth-child(1) path { fill: var(--lime); }
.exploded__solid g:nth-child(2) path { fill: var(--white); }
.exploded__solid g:nth-child(3) path { fill: var(--lime); }
.exploded__seam { color: var(--ink); opacity: .7; }
.exploded__turn { color: var(--ink); }

/* ----------------------------------------------------------------- minis -- */

.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.mini-grid--bordered { margin-top: 0; }
.mini {
  background: var(--white);
  border: var(--line);
  border-radius: 18px;
  box-shadow: var(--pop-sm);
  padding: 22px;
}
.mini__key {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--lime);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 12px;
}
.mini:nth-child(3n+2) .mini__key { background: var(--white); }
.mini:nth-child(3n+3) .mini__key { background: var(--white); }
.mini__body { font-size: 17px; line-height: 1.5; margin: 0; color: var(--ink-soft); text-wrap: pretty; }

.band__lead {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 22px 0 0;
  max-width: 18em;
}

.split__icon {
  display: inline-grid;
  place-items: center;
  width: 72px; height: 72px;
  margin-bottom: 20px;
  color: var(--ink);
  background: var(--lime);
  border: var(--line);
  border-radius: 50%;
  box-shadow: var(--pop-sm);
  transform: rotate(-6deg);
}
.split__icon .icon { width: 40px; height: 40px; }
.audience__art { display: flex; justify-content: center; position: relative; }
.audience__art .icon {
  width: clamp(150px, 20vw, 230px);
  height: auto;
  padding: 30px;
  background: var(--art, var(--lime));
  border: var(--line-bold);
  border-radius: 42% 58% 50% 50% / 52% 44% 56% 48%;
  box-shadow: var(--pop-big);
  transform: rotate(-4deg);
  stroke-width: 2.5;
}
.audience:nth-of-type(3n+2) .audience__art { --art: var(--white); }
.audience:nth-of-type(3n+3) .audience__art { --art: var(--lime); }
.section--tight { padding-top: 60px; }

/* --------------------------------------------------------------- notices -- */

/* A sticky note, taped on. */
.notice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  max-width: 760px;
  background: var(--white);
  border: var(--line-bold);
  border-radius: 6px 6px 26px 6px;
  box-shadow: var(--pop-big);
  padding: 40px 34px 32px;
  transform: rotate(-.8deg);
}
.notice::before {
  content: '';
  position: absolute;
  top: -16px; left: 50%;
  width: 110px; height: 30px;
  margin-left: -55px;
  background: rgba(255, 253, 248, .75);
  border: 2px dashed rgba(18, 16, 22, .35);
  transform: rotate(-4deg);
}
.notice--large { max-width: none; background: var(--white); }
.notice__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.15;
  letter-spacing: -.035em;
  margin: 0;
}
.notice__body { font-size: 18px; line-height: 1.5; margin: 0; color: var(--ink); max-width: 40em; text-wrap: pretty; }

/* The content model, as a staircase of stickers. */
.hierarchy { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 14px; }
.hierarchy__step {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 16px 22px;
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--pop-sm);
  width: fit-content;
  max-width: 100%;
}
.hierarchy__step:nth-child(2) { margin-left: 40px; }
.hierarchy__step:nth-child(3) { margin-left: 80px; }
.hierarchy__step:nth-child(4) { margin-left: 120px; }
.hierarchy__key {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  background: var(--lime);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 12px;
  min-width: 8.5em;
  text-align: center;
}
.hierarchy__step:nth-child(2) .hierarchy__key { background: var(--white); }
.hierarchy__step:nth-child(3) .hierarchy__key { background: var(--lime); }
.hierarchy__step:nth-child(4) .hierarchy__key { background: var(--white); }
.hierarchy__body { font-size: 17px; color: var(--ink); }

/* -------------------------------------------------------------- products -- */

.product-rows { display: flex; flex-direction: column; gap: 24px; padding-block: 24px 40px; }
.product-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  border: var(--line-bold);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  padding: 32px;
}
.product-row--live { background: var(--lime); }
.product-row--coming { background: var(--white); }
.product-row__index {
  font-family: var(--display);
  font-weight: 900;
  font-size: 32px;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.product-row__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.product-row__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -.035em;
  margin: 0;
}
.product-row__summary { font-size: 18px; line-height: 1.5; margin: 0 0 8px; max-width: 40em; text-wrap: pretty; }
.product-row__aside { font-family: var(--mono); font-size: 12px; text-align: right; line-height: 1.7; }

/* --------------------------------------------------------- how it works -- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-block: 56px;
}
.split > * { min-width: 0; }
.split--wide-right { grid-template-columns: 1fr 1.1fr; }
.split--wide-left  { grid-template-columns: 1.1fr 1fr; }
.split--wide-left .split__figure { order: 2; }
.split--wide-left .split__text   { order: 1; }

.split__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.split__body {
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 22px;
  color: var(--ink-soft);
  max-width: 30em;
  text-wrap: pretty;
}
.split__note {
  font-family: var(--hand);
  font-size: 22px;
  font-weight: 700;
  color: var(--muted);
  margin: 0;
  transform: rotate(-2deg);
  display: inline-block;
}

/* The adaptive-question tree, on a dark card. */
.diagram {
  background: var(--night);
  border: var(--line-bold);
  border-radius: var(--radius);
  box-shadow: 8px 8px 0 var(--lime);
  padding: 28px;
  overflow: hidden;
}
.diagram__svg { display: block; }

.timebars {
  margin: 0;
  background: var(--white);
  border: var(--line-bold);
  border-radius: var(--radius);
  box-shadow: var(--pop-big);
  padding: 30px;
}
.timebars__svg { display: block; overflow: visible; }
.timebars__svg--tall { display: none; }

/* The session report, as a sticker-y phone card. */
.report {
  border: 3px solid transparent;
  border-radius: 26px;
  padding: 26px 28px;
}
.report__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 2px dashed var(--rule-strong);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.report__title { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.03em; }
.report__flag {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  background: var(--soft);
  border: 2px solid var(--ink);
  padding: 3px 10px;
  border-radius: 999px;
  transform: rotate(3deg);
}
.report__label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--dim);
  margin-bottom: 10px;
}
.report__bars { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.report__row-head { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.report__pct { font-family: var(--mono); font-weight: 700; }
.report__track { height: 16px; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.report__bar { height: 100%; width: 0; transition: width 1.1s cubic-bezier(.3, 1.3, .5, 1); border-right: 2px solid var(--ink); }
.report__bar--good { background: var(--lime); }
.report__bar--warn { background: #E4F59A; }
.report__bar--bad  { background: var(--dim-soft); }
.report__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 15px; font-weight: 600; }
.report__note { background: var(--lime-soft); border: 2px solid var(--ink); border-radius: 14px; padding: 12px 14px; }
.report__note:nth-child(2) { background: var(--soft); }
.report__note-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 5px;
}

/* -------------------------------------------------------------- audience -- */

.audience { align-items: center; padding-block: 50px; }

.thread {
  margin: 0;
  background: var(--white);
  border: var(--line-bold);
  border-radius: var(--radius);
  box-shadow: var(--pop-big);
  padding: 30px;
}
.thread__svg { display: block; overflow: visible; }
.thread__svg:not(.thread__svg--tall) g[font-family] { font-size: 14px; }
.thread__svg--tall { display: none; }

/* --------------------------------------------------------------- the CTA -- */

.cta { margin-top: 90px; margin-bottom: 20px; }
.band + .cta { margin-top: 70px; }
.cta__inner {
  position: relative;
  padding: clamp(40px, 7vw, 90px) clamp(26px, 6vw, 80px);
  color: var(--ink);
  border: 3px solid transparent;
  border-radius: 36px;
}
.cta .btn--teal { box-shadow: 5px 5px 0 var(--white); }
.cta .btn--teal:hover { color: var(--lime); box-shadow: 7px 7px 0 var(--white); }
.cta__star   { width: 80px; height: 80px; right: 7%; top: -34px; transform: rotate(14deg); color: var(--white); }
.cta__squiggle { width: 150px; height: 30px; left: clamp(26px, 6vw, 80px); top: 26px; color: var(--ink); }
.cta h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 5.4vw, 70px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 18px 0 22px;
  max-width: 14em;
  color: var(--ink);
}
.cta__body {
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 30em;
  margin: 0 0 36px;
  text-wrap: pretty;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.cta__aside { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.cta__routes {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 16px;
  color: var(--ink);
}
.cta__routes li {
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  padding: 10px 18px 10px 10px;
  box-shadow: var(--pop-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cta__route-key {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--lime);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
}
.cta__routes li:nth-child(2) .cta__route-key { background: var(--white); }
.cta__routes li:nth-child(3) .cta__route-key { background: var(--lime); }

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  margin-top: 70px;
  background: var(--ink);
  color: var(--night-text);
  border-top: var(--line-bold);
  overflow: hidden;
}
.site-footer__inner {
  padding: 64px 28px 30px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
}
.site-footer__brand { margin-bottom: 20px; }
.site-footer__tagline { font-family: var(--hand); font-size: 24px; font-weight: 700; color: var(--lime); transform: rotate(-3deg); }
.site-footer__blurb {
  font-size: 17px;
  line-height: 1.55;
  color: var(--night-text);
  max-width: 30em;
  margin: 0;
  text-wrap: pretty;
}
.site-footer__links {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 2.2;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__links a { color: var(--white); }
.site-footer__links a:hover { color: var(--lime); }
.site-footer__links a.is-mail { color: var(--lime); }
.site-footer__legal { margin-top: 14px; color: #9a92a8; font-weight: 400; font-size: 12px; }

/* The page ends on the mark itself, big, so it is the last thing remembered. */
.site-footer__giant {
  color: var(--lime);
  padding-block: 10px clamp(24px, 4vw, 56px);
  user-select: none;
}
.site-footer__giant .logomark { width: min(620px, 78%); margin: 0 auto; }
.site-footer .brand .logo { color: var(--lime); }

/* --------------------------------------------------------------- stripes -- */

/* Key cards cast a striped shadow instead of a solid one. The card's own fill
   and border move to ::after and the stripes sit on ::before, offset, both in
   an isolated stack, so hover lifts never let the stripes cross the content. */
.usp, .compare, .report, .cta__inner {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  --stripe-x: 8px;
  --stripe-y: 8px;
}
.usp::before, .compare::before, .report::before, .cta__inner::before,
.usp::after,  .compare::after,  .report::after,  .cta__inner::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: var(--line-bold);
  pointer-events: none;
}
.usp::after, .compare::after, .report::after, .cta__inner::after {
  z-index: -1;
  background: var(--card-bg, var(--white));
}
.usp::before, .compare::before, .report::before, .cta__inner::before {
  z-index: -2;
  background: var(--stripes);
  transform: translate(var(--stripe-x), var(--stripe-y));
  transition: transform .2s ease;
}
.usp:nth-child(1) { --card-bg: var(--lime); }
.usp:nth-child(2) { --card-bg: var(--white); }
.usp:nth-child(3) { --card-bg: var(--ink); }
.cta__inner       { --card-bg: var(--lime); --stripe-x: 12px; --stripe-y: 12px; }
@media (hover: hover) {
  .usp:hover::before { transform: translate(11px, 11px); }
}

/* The footer opens on a thin band of the same stripes. */
.site-footer { border-top: 0; }
.site-footer::before { content: ''; display: block; height: 12px; background: var(--stripes); border-bottom: var(--line-bold); }

/* ----------------------------------------------------------------- hover -- */

/* Lifts and wiggles only where there is a real pointer. On a phone a tap would
   otherwise leave the card stuck in its hover pose. */
@media (hover: hover) {
  .section__link:hover { color: var(--ink); background: var(--lime); transform: translate(-2px, -2px) rotate(-2deg); box-shadow: 5px 5px 0 var(--ink); }
  .brand:hover .logo { transform: rotate(2deg) scale(1.05); }
  .site-nav__links .nav-cta:hover { background: var(--ink); color: var(--lime); transform: rotate(-2deg) translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
  .btn:hover { color: inherit; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
  .usp:hover { transform: translateY(-4px); box-shadow: var(--pop-big); }
  .move:hover { transform: rotate(0) translateY(-6px); box-shadow: var(--pop-big); }
  .door:hover { color: var(--ink); transform: translate(-3px, -3px); box-shadow: var(--pop-big); }
  .product-row--live:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: var(--pop-big); }
  .door.is-revealed:hover { transform: translate(-3px, -3px); }
  .move.is-revealed:hover { transform: rotate(0) translateY(-6px); }
}

/* Touch gets a press instead: the card sinks into its shadow. */
@media (hover: none) {
  .btn:active, .usp:active, .door.door:active, .move.move:active, .section__link:active, .site-nav__links .nav-cta:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 var(--ink);
  }
}

/* ---------------------------------------------------------- NEET states -- */
/* /courses/neet/states and each state page (D62). Bars are SVG with static
   widths (no style="" under the CSP); the table scrolls inside its wrapper. */

.st-title { font-size: clamp(30px, 6.4vw, 76px); max-width: 15em; overflow-wrap: break-word; }
.st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; }
.st-card { min-width: 0; display: grid; align-content: start; gap: 12px; background: var(--white); border: var(--line); border-radius: 18px; box-shadow: var(--pop-sm); padding: 22px; }
.st-card--lime { background: var(--lime); }
.st-card > p { margin: 0; }
.st-card__key { justify-self: start; font: 700 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 10px; }
.st-card__line { font-size: 17px; line-height: 1.4; font-weight: 600; }
.st-big { font: 800 clamp(40px, 5vw, 60px)/1 var(--display); letter-spacing: -.02em; }
.st-big span { display: block; margin-top: 6px; font: 600 15px/1.3 var(--sans); letter-spacing: 0; }
.st-fine { font-size: 14px; line-height: 1.45; color: var(--ink-soft); margin: 0; max-width: 60em; }
.st-after { margin-top: 16px; }

.st-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.st-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; }
.st-bar__label { font: 700 12px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.st-bar__num { font: 800 20px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.st-bar__svg, .st-split { grid-column: 1 / -1; display: block; width: 100%; height: 16px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.st-split { height: 22px; }
.st-bar__track { fill: var(--soft); }
.st-bar__fill { fill: var(--lime); }
.st-bar__fill--ink, .st-split__private { fill: var(--ink); }
.st-split__govt { fill: var(--lime); }
.st-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.st-legend li { display: inline-flex; align-items: center; gap: 8px; }
.st-swatch { width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 4px; }
.st-swatch--govt { background: var(--lime); }
.st-swatch--private { background: var(--ink); }

.st-routes .mini { min-width: 0; }
.st-routes .mini__body a, .st-sources a { overflow-wrap: anywhere; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--lime-deep); }
.st-note { gap: 10px; }
.st-pepy { font: 800 clamp(20px, 2.4vw, 28px)/1.3 var(--display); letter-spacing: -.01em; max-width: 30em; margin: 0; text-wrap: pretty; }
.st-links { margin-top: 20px; }

.st-table-wrap { max-width: 100%; overflow-x: auto; background: var(--white); border: var(--line); border-radius: 18px; box-shadow: var(--pop-sm); }
.st-table-wrap:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.st-table { width: 100%; min-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.st-table th, .st-table td { padding: 12px 16px; text-align: right; border-bottom: 1.5px solid var(--teal-dim); white-space: nowrap; }
.st-table thead th { font: 700 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--panel); border-bottom: 2px solid var(--ink); }
.st-table th[scope="row"], .st-table thead th:first-child { text-align: left; }
.st-table tbody th a { font-weight: 700; color: var(--ink); }
.st-table tfoot th, .st-table tfoot td { background: var(--lime); border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; }

.st-sources { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; font-size: 15px; line-height: 1.5; max-width: 75ch; }
.st-sources__for { display: block; font: 700 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 620px) {
  .st-card { padding: 18px; }
  .st-table th, .st-table td { padding: 10px 12px; }
}

/* ---------------------------------------------------------------- reveal -- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px) scale(.98);
  transition: opacity .6s ease, transform .6s cubic-bezier(.3, 1.4, .5, 1);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.move.is-revealed { transform: rotate(var(--tilt)); }

/* Safety net: if reveal.js never runs (blocked, failed fetch), show everything
   after 3 s rather than an apparently empty page. reveal.js switches it off as
   it starts. With JavaScript off, noscript.css shows everything at once. */
[data-reveal]:not(.is-revealed),
.usps:not(.is-revealed) .usp { animation: reveal-failsafe 0s 3s forwards; }
.reveal-on [data-reveal],
.reveal-on .usps .usp { animation: none; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; gap: 40px; padding-block: 48px 60px; }
  .hero-split .stage-wrap { order: 2; }   /* the promises come before the model */
  .moves { grid-template-columns: 1fr 1fr; gap: 24px; }
  .usps { gap: 16px; }
  .usp { grid-template-columns: 1fr; grid-template-rows: auto; }
  .usp__icon { grid-row: auto; margin-bottom: 6px; }
  .mini-grid { grid-template-columns: 1fr; gap: 18px; }
  .doors { grid-template-columns: 1fr; }
  .cta__routes { flex-direction: column; align-items: flex-start; }
  .audience { gap: 36px; }
  .audience__art { justify-content: flex-start; }
  .split,
  .split--wide-right,
  .split--wide-left { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .band__inner { padding-block: 64px; }
  .product-row { grid-template-columns: auto 1fr; }
  .product-row__aside { grid-column: 2; text-align: left; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 16px; }
  .compare__svg--wide { display: none; }
  .compare__svg--tall { display: block; }
  .thread__svg:not(.thread__svg--tall) { display: none; }
  .thread__svg--tall { display: block; }
  .hierarchy__step { flex-direction: column; align-items: flex-start; gap: 8px; border-radius: 20px; }
  .hierarchy__step:nth-child(2) { margin-left: 12px; }
  .hierarchy__step:nth-child(3) { margin-left: 24px; }
  .hierarchy__step:nth-child(4) { margin-left: 36px; }
  .page-hero { padding: 36px 16px 16px; }
  .page-hero__title { margin: 20px 0 16px; }
  .section { padding: 48px 16px 8px; }
  .hero-split { padding-block: 36px 50px; gap: 22px; }
  .hero-split .stage-wrap { margin-top: 30px; }
  .stage-wrap__star { left: -8px; width: 50px; height: 50px; }
  .report__notes { grid-template-columns: 1fr; }
  /* Figures drawn at 620 wide shrink their labels to ~6px on a phone. SVG
     text sizes are in viewBox units, so bump them to read at ~13px. */
  .timebars__svg:not(.timebars__svg--tall) { display: none; }
  .timebars__svg--tall { display: block; }
  .timebars__svg--tall .compare__label { font-size: 14px; }
  .timebars__svg--tall .compare__note  { font-size: 22px; }
  .diagram__svg g[font-family] { font-size: 18px; }
  .hero-split__spark { display: none; }
  .timebars { padding: 22px 20px 30px; }
  /* Lesson moves: a 2×2 grid of compact cards, not four screens of scroll. */
  .moves { grid-template-columns: 1fr 1fr; gap: 12px; }
  .move { padding: 14px 14px 16px; gap: 8px; border-radius: 18px; box-shadow: var(--pop-sm); }
  .move:nth-child(4n+4) { box-shadow: 3px 3px 0 var(--lime); }
  .move__top { margin-bottom: 4px; }
  .move__icon { width: 46px; height: 46px; }
  .move__icon .icon { width: 26px; height: 26px; }
  .move__num { font-size: 28px; -webkit-text-stroke-width: 1.5px; }
  .move__key { font-size: 14px; }
  .move__line { font-size: 15px; line-height: 1.45; }

  /* Audience doors: a swipeable row that peeks the next card, like an app. */
  .doors {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -16px;
    padding: 4px 16px 18px;
    scrollbar-width: none;
  }
  .doors::-webkit-scrollbar { display: none; }
  .door { flex: 0 0 78%; min-height: 230px; scroll-snap-align: start; scroll-margin-left: 16px; padding: 22px; }
  .door__line { font-size: 20px; }

  .section__head { margin-bottom: 22px; }
  .section__label { margin-bottom: 20px; }
  .compare { padding: 18px; }
  .band--top { margin-top: 36px; }
  .band__inner { padding-block: 48px; }
  .cta { margin-top: 56px; }
  .site-footer { margin-top: 48px; }
  .audience { gap: 18px; padding-block: 34px; }
  .audience__art { order: -1; }
  .audience__art .icon { width: 104px; padding: 18px; box-shadow: var(--pop); }

  /* The promises as three quick rows: picture, number, what it means. They
     have to land before the thumb moves, so they stay compact and line up. */
  .usps { grid-template-columns: auto auto 1fr; gap: 10px; margin: 0; }
  .usp {
    grid-column: 1 / -1;
    grid-template-columns: auto auto 1fr;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
    column-gap: 12px;
    padding: 10px 14px;
    border-radius: 18px;
    --stripe-x: 5px;
    --stripe-y: 5px;
  }
  .usp__icon { grid-row: auto; width: 40px; height: 40px; }
  .usp__icon .icon { width: 24px; height: 24px; stroke-width: 4; }
  .usp__value { font-size: 21px; align-self: center; }
  .usp__label { font-size: 14px; align-self: center; line-height: 1.3; }
  .cta__actions .btn { width: 100%; justify-content: center; font-size: 16px; padding: 16px 20px; }
  .cta .btn--teal { box-shadow: 4px 4px 0 var(--white); }
  .cta__routes { gap: 10px; }
  .hero-split__title { margin: 22px 0 18px; }
  .hero__actions { margin-top: 24px; }
  .hero-split pepy-stage { height: 340px; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-split__spark { width: 34px; height: 34px; right: 0; }
  .product-row { padding: 22px; gap: 16px; }
  .compare, .thread, .timebars, .exploded, .diagram { padding: 20px; }
  .compare, .report { --stripe-x: 6px; --stripe-y: 6px; }
  .notice { padding: 36px 22px 26px; }
  .cta__inner { border-radius: 26px; --stripe-x: 7px; --stripe-y: 7px; }
  .cta__star { width: 56px; height: 56px; top: -24px; }
  .ticker { margin-inline: -30px; }

  /* Mobile menu: the pill opens into a card under the bar. */
  .site-nav { padding-inline: 10px; top: 8px; margin-top: 8px; }
  .logomark { width: 124px; }
  .site-nav .site-nav__inner { padding: 7px 8px 7px 22px; }
    .nav-toggle { display: inline-flex; }
  .site-nav__links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px;
    background: var(--white);
    border: var(--line-bold);
    border-radius: 24px;
    box-shadow: var(--pop);
  }
  .site-nav.is-open .site-nav__links { display: flex; }
  @media (prefers-reduced-motion: no-preference) {
    .site-nav__links {
      transition: opacity .22s ease, transform .22s cubic-bezier(.3, 1.4, .5, 1), display .22s allow-discrete;
    }
    @starting-style {
      .site-nav.is-open .site-nav__links { opacity: 0; transform: translateY(-10px) scale(.98); }
    }
  }
  .site-nav__links a { padding: 14px 16px; font-size: 15px; }
  .site-nav__links .nav-cta { justify-content: center; margin: 8px 0 0; padding: 15px; transform: none; }
  .site-footer__inner { padding: 48px 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transition: none; }
  .report__bar { transition: none; }
}

/* ------------------------------------------------------------------
   Universal brand + courses (restructure, September 2026)
   ------------------------------------------------------------------ */

/* Approved app screens, used as pictures of the product. */
.app-phone { display: block; width: 100%; max-width: 250px; height: auto; filter: drop-shadow(6px 8px 0 rgba(18, 16, 22, .9)); }
.hero-phones { position: relative; display: flex; justify-content: center; align-items: flex-start; min-height: 440px; }
.hero-phones .app-phone { width: min(250px, 44%); }
.hero-phones .app-phone:first-child { position: relative; z-index: 1; transform: rotate(-3deg); }
.hero-phones .app-phone + .app-phone { margin: 56px 0 0 -40px; transform: rotate(4deg); }
.phone-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.phone-row .app-phone { width: 230px; }

/* "First course" pill under the hero buttons. */
.first-course { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font: 700 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--white); border: 2.5px solid var(--ink); border-radius: 999px; padding: 10px 16px; box-shadow: 3px 3px 0 var(--ink); color: var(--ink); text-decoration: none; }
.first-course b { background: var(--lime); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 8px; }
.first-course:hover { background: var(--lime-soft); color: var(--ink); }
@media (max-width: 640px) { .first-course { font-size: 11px; gap: 8px; } }

.course-note { margin-top: 14px; }

/* Course page blocks. */
.subject-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.subject-list li { background: var(--white); border: 2.5px solid var(--ink); border-radius: 18px; padding: 18px; box-shadow: 4px 4px 0 var(--ink); display: grid; gap: 6px; }
.subject-list b { font: 800 22px/1.1 var(--display); }
.subject-list .tag { justify-self: start; }
.price-card { display: grid; gap: 10px; max-width: 520px; background: var(--lime); border: 2.5px solid var(--ink); border-radius: 22px; padding: 26px; box-shadow: 6px 6px 0 var(--ink); }
.price-card .eyebrow { justify-self: start; }
.price-card__big { font: 800 56px/1 var(--display); margin: 0; }
.price-card p { margin: 0; }
.lang-list { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-list span { border: 2px solid var(--ink); border-radius: 999px; padding: 6px 12px; background: var(--white); font-weight: 600; }
.section__note { margin-top: 12px; }

/* Pilot sign-up form (decision D27). */
.pilot-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 22px; text-align: left; max-width: 720px; }
.pilot-form label { display: grid; gap: 6px; font: 700 13px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.pilot-form label span { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }
.pilot-form input, .pilot-form select { font: 500 16px/1.2 var(--sans); padding: 13px 14px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--white); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pilot-form input:focus-visible, .pilot-form select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pilot-form__check { grid-column: 1 / -1; display: flex !important; gap: 10px; align-items: center; text-transform: none !important; letter-spacing: 0 !important; font: 500 14px/1.4 var(--sans) !important; }
.pilot-form__check input { width: 20px; height: 20px; box-shadow: none; flex: none; }
.pilot-form__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pilot-form .btn { grid-column: 1 / -1; justify-self: start; }
.pilot-form__note { grid-column: 1 / -1; margin: 0; font-size: 14px; opacity: .75; }
@media (max-width: 640px) { .pilot-form { grid-template-columns: 1fr; } }

/* Long-form pages: legal pages. */
.prose { max-width: 70ch; font-size: 17px; line-height: 1.65; padding-bottom: 60px; }
.prose h2 { font: 800 24px/1.2 var(--display); margin: 36px 0 10px; }
.prose p, .prose li { margin: 0 0 12px; }
.prose ul { padding-left: 1.2em; }
.prose .prose__meta { font-size: 14px; opacity: .7; }

.site-footer__legal-links a { text-decoration: none; }

.split__phone { margin: 0; display: flex; justify-content: center; }
.band__note { margin-top: 18px; font-size: 15px; }
.mini-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .mini-grid--two { grid-template-columns: 1fr; } }

/* Tighter rhythm for the restructured pages: the old spacing was sized for a
   sparser site and left 100–160px holes between sections. */
.section { padding-top: 52px; }
.section--tight { padding-top: 40px; }
.split { padding-block: 26px; }
.cta { margin-top: 56px; }
.band + .cta { margin-top: 48px; }
.band--top { margin-top: 40px; }
.band__inner { padding-block: 56px; }
.page-hero { padding-bottom: 16px; }
@media (max-width: 620px) {
  .section { padding-top: 36px; }
  .split { padding-block: 18px; gap: 24px; }
  .cta { margin-top: 40px; }
  .band__inner { padding-block: 40px; }
}

/* Section labels are .eyebrow stickers, and .eyebrow resets margin to 0 after
   .section__label sets it, so the label sat on whatever came next. */
.eyebrow.section__label { margin-bottom: 22px; }
@media (max-width: 620px) { .eyebrow.section__label { margin-bottom: 16px; } }
.notice > .eyebrow { margin-bottom: 14px; }
.price-card > .eyebrow { margin-bottom: 8px; }

/* Course → Subject → Chapter → Topic, with a real example at each level. */
.levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.levels__step { position: relative; display: grid; align-content: start; gap: 8px; background: var(--white); border: 2.5px solid var(--ink); border-radius: 18px; padding: 18px; box-shadow: 4px 4px 0 var(--ink); }
.levels__step:last-child { background: var(--lime); }
.levels__key { justify-self: start; font: 700 11px/1 var(--mono); letter-spacing: .08em; border: 2px solid var(--ink); border-radius: 999px; padding: 5px 9px; background: var(--white); }
.levels__example { font: 800 20px/1.15 var(--display); letter-spacing: -.01em; }
.levels__note { font-size: 14px; line-height: 1.4; }
.levels__step:not(:last-child)::after { content: "→"; position: absolute; right: -28px; top: 50%; transform: translateY(-50%); font: 700 20px/1 var(--mono); }
@media (max-width: 860px) {
  .levels { grid-template-columns: 1fr; gap: 30px; }
  .levels__step:not(:last-child)::after { content: "↓"; right: auto; left: 24px; top: auto; bottom: -27px; transform: none; }
}

/* ------------------------------------------------------------------
   Hindi (/hi/…) and the language toggle
   ------------------------------------------------------------------ */

/* The link to the page's twin, before the nav CTA. Its own script's system
   font, so an English page never downloads a Devanagari font for one word. */
.site-nav__links .nav-lang { border: 2px solid var(--ink); padding: 8px 14px; margin-left: 4px; }
.site-nav__links .nav-lang:lang(hi) { font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; }
/* Between the phone menu and a wide screen the extra link must still fit on
   one line: tighter pills, no wrapping inside a label. */
.site-nav__links:has(.nav-lang) a { white-space: nowrap; }
@media (min-width: 621px) and (max-width: 860px) {
  .site-nav__links:has(.nav-lang) { gap: 2px; }
  .site-nav__links:has(.nav-lang) a { padding-inline: 9px; }
  .site-nav__links:has(.nav-lang) .nav-cta { margin-left: 4px; padding-inline: 12px; }
}
@media (min-width: 621px) and (max-width: 760px) {
  .site-nav:has(.nav-lang) .logomark { width: 112px; }
  .site-nav__links:has(.nav-lang) { font-size: 12px; }
  .site-nav__links:has(.nav-lang) a { padding-inline: 7px; }
  .site-nav__links:has(.nav-lang) .nav-lang { padding-inline: 9px; }
}

/* The 13 subtitle languages are each in their own script, set in the system's
   fonts like the rest of them; that keeps Mukta off the English course page. */
.lang-list span { font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
@media (max-width: 620px) {
  .site-nav__links .nav-lang { margin: 4px 0 0; padding: 12px 16px; text-align: center; }
}

/* Questions on the course page: the question, then the answer first. */
.qa { display: grid; gap: 14px; max-width: 820px; }
.qa__item { background: var(--white); border: 2.5px solid var(--ink); border-radius: 18px; padding: 20px 22px; box-shadow: 4px 4px 0 var(--ink); }
.qa__q { font: 800 20px/1.25 var(--display); letter-spacing: -.01em; margin: 0 0 8px; }
.qa__a { margin: 0; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
@media (max-width: 620px) { .qa__item { padding: 18px; } .qa__q { font-size: 18px; } }

/* Devanagari hangs marks above and below the line, so Hindi headings get room
   (Latin headlines here are set at line-height 1) and no tracking, which pulls
   conjuncts apart. Labels go up a size: Devanagari reads small at Latin label sizes. */
/* Devanagari first on Hindi pages, so spaces and punctuation between Hindi
   words match them (Space Mono's wide space reads as gaps). Latin letters and
   digits still fall through to the brand fonts. */
html:lang(hi) {
  --display: 'Baloo 2', 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --serif:   'Mukta', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'Mukta', 'Space Mono', ui-monospace, Menlo, monospace;
}
html:lang(hi) :is(h1, h2, h3, p, a, span, b, div, li, label, button, s, select, option, text) { letter-spacing: normal; }
:lang(hi) :is(.hero-split__title, .page-hero__title, .cta h2) { line-height: 1.25; }
:lang(hi) :is(.section__title, .split__title, .band__lead, .notice__title, .product-row__name, .levels__example, .subject-list b, .move__key, .usp__value, .report__title, .qa__q, .price-card__big) { line-height: 1.3; }
:lang(hi) .ticker__item { line-height: 1.3; padding-block: 10px; }
:lang(hi) .hero-split__title { font-size: clamp(44px, 5.6vw, 80px); }
:lang(hi) :is(.eyebrow, .mini__key, .section__link, .first-course, .skip-link) { font-size: 14px; }
:lang(hi) :is(.tag, .levels__key, .report__label, .report__note-label, .report__flag) { font-size: 13px; }
:lang(hi) :is(.product-row__aside) { font-size: 14px; }
:lang(hi) .pilot-form label { font-size: 15px; }
:lang(hi) .compare__label { font-size: 17px; }
/* Baloo 2's line box is much taller than its letters; fit the highlighter and
   the scribble to the letters, as they sit on Unbounded. */
:lang(hi) .hl::before { top: .3em; bottom: .3em; }
:lang(hi) .scribble::after { top: 44%; }