/* Public site styles. Hand-written, no framework: these pages are ranked partly
   on how fast they render, and a content site needs almost none of a framework.

   THE LOOK: "Exam Desk" (redesign, 2026-10-16, designed in Google Stitch and
   approved by the owner). Warm cream paper, chocolate ink, and every playful
   shape is something from an aspirant's exam desk: OMR answer bubbles, the
   question palette, admit cards, highlighter strokes, red-pen notes, notebooks,
   the exam clock. The colours carry their exam-day meaning: green = answered,
   violet = marked for review, yellow = the highlighter, red pen = a teacher's
   note (and only that). Four soft-3D student mascots (mascots.js).
   LIGHT ONLY, by the owner's decision: there is no dark override, and
   color-scheme "only light" (here and in a meta tag) stops Chrome on Android
   from auto-darkening it.

   Every FILL colour that fails as text has a text-safe "-ink" partner, and
   every text/background pair is recomputed from this file by
   test/public-tokens.test.js: 4.5:1 for body text, 3:1 for large text only.

   Type: Plus Jakarta Sans (the brand face, preloaded, with a metric-matched
   fallback so the swap does not move the page), JetBrains Mono (--font-mono:
   exam codes, timers, question numbers) and Kalam (--font-hand: red-pen notes
   only) -- all vendored, public-site/assets.js. Question CONTENT stays on the
   system stack (--font-text): the latin subsets have no Greek, and a physics
   stem must not mix fonts letter by letter.

   Structure:
     1. tokens
     2. base elements + typography
     3. layout containers
     4. header / account widget / footer (footer: .footer-in .footer-promise
        .footer-row .footer-links .footer-base)
     5. shared components (buttons, cards, lists, tags, tables, pager)
     6. question-page components
     7. homepage sections (namespaced .sec-* .hero-* .desk-* .ticket* .folder*
        .statement* .omr* .score* .stamp* .built-* .exam-win* .pass* .plan*
        .notify* .notice* .notebook .nb-* .cta-x* .faq*)
     8. responsive, reduced motion, print */

/* --- 1. tokens ----------------------------------------------------------- */

:root {
  color-scheme: only light;

  /* Ink: chocolate, never black. */
  --ink: #4b2520;
  --ink-2: #5e4a45;
  --muted: #6e6461;

  --line: #eadccf;
  --line-2: #dcc9b9;

  /* Paper: the cream page, white cards. */
  --bg: #fff6ec;
  --card: #ffffff;
  --tint: #fbeee1;
  --paper: #fffbf6;
  /* The free-PYQ cards (pyq-pages.js): Full paper on butter, Chapter-wise on
     peach. Light fills under chocolate text; checked in public-tokens.test.js. */
  --butter: #fff3c4;
  --peach: #fde9dc;
  /* The yellow behind Arjun in arjun-test.webp, sampled from the file: a fill
     under a picture, never under text (the bubble on it is white). */
  --pic-yellow: #f0c754;

  /* "Brand" is the ink itself: links, focus rings, the dark buttons and bands. */
  --brand: #4b2520;
  --brand-dark: #2e1411;
  --brand-ink: #2e1411;
  --brand-soft: #f7e9dd;
  --brand-line: #e8d2c1;
  --on-brand: #ffffff;

  /* The highlighter: the primary button and the marker stroke behind words.
     Always under chocolate text (9.4:1), never under white. */
  --hl: #ffd54a;
  --hl-dark: #f5c524;

  /* Saffron is a FILL colour (the timer ring, the exam folders). As text it is
     --saffron-ink. --saffron-hl / -soft keep their old names for the <mark>
     and the tints. */
  --saffron: #f2762e;
  --saffron-hl: #ffd54a;
  --saffron-soft: #fff0d6;
  --saffron-ink: #b4500f;

  /* Exam-day colours, as on the real exam screen: answered, marked for review,
     the pen, the red pen. Each fill has a text-safe -ink partner. */
  --answered: #2fa36b;
  --answered-ink: #1e7a4e;
  --review: #7c5cff;
  --review-ink: #5b3fd6;
  --pen: #4e7bef;
  --pen-ink: #3a62d4;
  --redpen: #e5484d;
  --redpen-ink: #c42b33;

  /* Card fills that carry WHITE text (the folders, the notebooks): darker than
     their accent so white passes 4.5:1 on them. */
  --deck-green: #278658;
  --deck-blue: #4770d9;
  --deck-violet: #7859f7;
  /* The JEE folder and the scorecard numbers: the design's orange, 3% deeper,
     so white large text on it (and it as large text on white) reaches 3:1. */
  --deck-saffron: #eb722d;

  --good: #1e7a4e;
  --good-soft: #eaf6ef;
  --good-line: #bfe3ce;
  --warn: #b4500f;
  --warn-soft: #fff0d6;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-line: #fecaca;

  /* Subjects: the notebook colours, always next to the subject's name, never
     colour alone. These are the text-safe shades. */
  --physics: #3a62d4;
  --physics-soft: #edf2fd;
  --chemistry: #1e7a4e;
  --chemistry-soft: #eaf6ef;
  --maths: #b4500f;
  --maths-soft: #fff0e3;
  --biology: #5b3fd6;
  --biology-soft: #f1edff;

  --shadow-1: 0 1px 2px rgba(75, 37, 32, 0.06);
  --shadow-2: 0 12px 32px -12px rgba(75, 37, 32, 0.18), 0 2px 6px rgba(75, 37, 32, 0.05);
  --shadow-3: 0 28px 64px -24px rgba(75, 37, 32, 0.32), 0 6px 16px rgba(75, 37, 32, 0.07);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --s9: 96px;
  --s10: 128px;

  /* Reading measure for article-shaped pages; the landing page opts into the
     wider one per section. */
  --wrap: 860px;
  --wrap-wide: 1232px;

  --font: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --font-hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 2. base ------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Nothing on any page may cause a sideways scrollbar. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* An in-page link lands below the sticky header, not under it. */
[id] { scroll-margin-top: 88px; }

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }

img { max-width: 100%; }

/* One visible focus style for everything, so keyboard users are never lost. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

/* Offscreen until focused: the first Tab on any page jumps past the header.
   Clipped to a 1px box rather than pushed to left:-9999px -- a far-offscreen
   box is a classic source of phantom horizontal scroll. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  left: 0;
  top: 0;
  z-index: 100;
  background: var(--brand);
  color: var(--on-brand);
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  color: var(--on-brand);
}

h1, h2, h3, h4, h5 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; margin: var(--s5) 0 var(--s3); }
h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; margin: var(--s6) 0 var(--s3); }
h3 { font-size: 19px; line-height: 1.35; margin: var(--s5) 0 var(--s2); font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: 17px; line-height: 1.4; margin: var(--s5) 0 var(--s2); font-weight: 700; letter-spacing: -0.01em; }
h5 { font-size: 15px; line-height: 1.45; margin: var(--s4) 0 var(--s2); font-weight: 700; letter-spacing: 0; }

p { text-wrap: pretty; }

code {
  font: 0.9em/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
}
pre { overflow-x: auto; }
pre code { display: block; padding: var(--s3) var(--s4); }

blockquote {
  margin: var(--s5) 0;
  padding: 2px 0 2px var(--s4);
  border-left: 3px solid var(--saffron);
  color: var(--ink-2);
}

/* The browser's own <mark> is yellow-on-black; ours is a highlighter stroke. */
mark { background: var(--saffron-hl); color: inherit; }

.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}

.muted { color: var(--muted); }
.empty { color: var(--muted); }

/* Inline SVG icon (icons.js). Shared: the header's menu button uses it on every
   page, so it lives here and not with the homepage. */
.ico { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }

/* --- 3. layout ----------------------------------------------------------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }
.wrap-wide { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--s5); }

/* The landing page opts out of the reading measure so its sections can run
   full-bleed; each section re-establishes its own container inside. clip, not
   hidden: it stops decoration bleeding sideways without making a scroll box
   (which would break the sticky FAQ heading). */
.page-wide { display: block; overflow-x: clip; }

/* --- 4. header / footer -------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 246, 236, 0.9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* Without backdrop-filter the bar is just opaque, which is a fine outcome
   rather than a transparent unreadable one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--bg); }
}

/* Brand left, the four tabs in the middle, the account on the right: three
   columns, so the tabs sit on the page's centre line whatever the brand and
   account widths are. */
.site-header-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  max-width: var(--wrap-wide);
  min-height: 84px;
  margin: 0 auto;
  padding: 12px var(--s5);
}

/* The TestLikho logo (brand-logo.js): the chosen Stitch design, "Buddy Is the i"
   in its white die-cut sticker border. The SVG box holds the border and the soft
   shadow too, so the letters are about half its height. 46px keeps the header at
   84px: the laptop first-screen gate counts on that height. */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
  justify-self: start;
  border-radius: var(--r-sm);
}
.brand:hover { color: var(--ink); }
.brand-logo { display: block; height: 46px; width: auto; }
.footer-row .brand-logo { height: 44px; }
/* Only shown if the logo file cannot be read (brand-logo.js). */
.brand-name { font-weight: 800; font-size: 23px; letter-spacing: -0.03em; }

.site-nav { display: flex; gap: 36px; flex-wrap: wrap; align-items: center; justify-self: center; }
.site-nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 0;
}
/* A saffron highlighter stroke under the current and hovered link. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 3px;
  border-radius: 3px;
  background: var(--saffron);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--ink); }

.header-cta { justify-self: end; display: flex; align-items: center; gap: var(--s2); }

/* CSS-only mobile navigation. <details> is used rather than a checkbox hack so
   it is keyboard-operable and announced without a line of JavaScript. */
.nav-mobile { display: none; margin-left: auto; position: relative; }
.nav-mobile > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  touch-action: manipulation;
}
.nav-mobile > summary .ico { width: 22px; height: 22px; }
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary::marker { content: ""; }
.nav-mobile[open] > summary { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.nav-mobile-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(300px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-mobile-panel a {
  padding: 12px 14px;
  border-radius: var(--r);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
}
.nav-mobile-panel a:hover { background: var(--tint); color: var(--ink); }

/* --- account widget ------------------------------------------------------ */
/* The server renders the one "Log in" pill (.acct-login, a .cta-dark); the
   inline script swaps in .acct-wrap when a session exists. Both states are
   styled so neither can flash unstyled. */

.acct-wrap { position: relative; }
.acct-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  padding: 4px 12px 4px 4px;
  min-height: 40px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.acct-trigger:hover { border-color: var(--brand); }
.acct-trigger[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.acct-pic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
  background: var(--line-2);
}
.acct-first { font-weight: 700; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-arrow { color: var(--muted); font-size: 10px; }

.acct-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}
.acct-panel[hidden] { display: none; }
.acct-panel a, .acct-panel button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--r);
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
}
.acct-panel a:hover, .acct-panel button:hover,
.acct-panel a:focus-visible, .acct-panel button:focus-visible {
  background: var(--tint);
  color: var(--ink);
}
.acct-out { color: var(--danger) !important; }

/* The footer of the design: the promise as one big line, its last phrase on a
   highlighter stroke; then the brand and one row of links between two rules;
   then the copyright line. */
.site-footer {
  margin-top: var(--s9);
  padding: 64px 0 48px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 14.5px;
}
.footer-in { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--s5); }
.footer-promise {
  margin: 0 0 var(--s7);
  font-size: clamp(30px, 4.1vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
/* The footer is on every page: its stroke is drawn, never animated in. */
.footer-promise mark.hl { animation: none; background-size: 100% 74%; background-position: 0 64%; }
.footer-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 28px; }
/* 40px rows: comfortable to tap, well past the 24px floor. */
.footer-links a {
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 10px 0;
}
.footer-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--saffron);
  text-decoration-thickness: 2px;
}
.footer-base { margin: var(--s5) 0 0; font-size: 13px; color: var(--muted); }
/* The homepage's last section brings its own space; an article page needs the gap. */
.page-wide + .site-footer { margin-top: 0; }

/* --- 5. shared components ------------------------------------------------ */

/* The primary button: a highlighter-yellow pill under chocolate text, its arrow
   in a chocolate circle at the right end. Never a play icon. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--hl);
  color: var(--ink);
  text-decoration: none;
  padding: 11px 22px;
  min-height: 44px;
  border-radius: var(--r-full);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(75, 37, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.18s var(--ease-out), box-shadow 0.18s ease;
}
.cta:hover {
  background: var(--hl-dark);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(180, 120, 15, 0.6);
}
.cta:active { transform: translateY(0) scale(0.98); }
.cta .cta-ico {
  width: 30px;
  height: 30px;
  padding: 7px;
  margin: -4px -12px -4px 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: transform 0.18s var(--ease-out);
}
.cta:hover .cta-ico { transform: translateX(3px); }

.cta-sm { padding: 8px 18px; min-height: 40px; font-size: 14px; }
.cta-lg { padding: 14px 28px; min-height: 56px; font-size: 16px; }

/* The dark pill: "Log in" in the header. */
.cta-dark { background: var(--ink); color: #fff; }
.cta-dark:hover { background: var(--brand-dark); color: #fff; box-shadow: 0 12px 24px -12px rgba(46, 20, 17, 0.6); }
.cta-dark .cta-ico { background: #fff; color: var(--ink); }

.cta-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: none;
}
.cta-ghost:hover {
  background: var(--brand-soft);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin: var(--s4) 0;
  box-shadow: var(--shadow-1);
}
a.card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s var(--ease-out);
}
a.card:hover {
  border-color: var(--brand-line);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  color: var(--ink);
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }

.q-list { list-style: none; padding: 0; margin: var(--s5) 0; }
.q-list li {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s4) 18px;
  margin-bottom: 10px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.q-list li:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }
.q-list a {
  display: block;
  padding: 2px 0;
  font-family: var(--font-text);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.5;
}
.q-list a:hover { color: var(--brand-dark); text-decoration: underline; }
/* The whole card answers a tap, not just the words of the title. */
.q-list a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.q-meta { color: var(--muted); font-size: 13px; margin-top: 6px; }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 10px 0 0; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-full);
  padding: 3px 12px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.tag:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }

.crumbs { font-size: 13px; color: var(--muted); margin: var(--s4) 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { display: inline-block; padding: 3px 0; color: var(--muted); }
.crumbs a:hover { color: var(--brand); }

.pager { display: flex; gap: 10px; align-items: center; margin: var(--s6) 0; }
.pager a {
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink-2);
  border-radius: var(--r-full);
  padding: 9px 18px;
  text-decoration: none;
  font-weight: 600;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager .muted { color: var(--muted); font-size: 14px; }

table.plain { border-collapse: collapse; width: 100%; font-size: 15px; }
table.plain th, table.plain td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
}
table.plain th { color: var(--ink-2); font-weight: 700; }

/* --- 6. question page ---------------------------------------------------- */
/* Question content is on the system stack: see the header comment. */

.q-block { white-space: pre-line; font-family: var(--font-text); }
.q-stem { font-size: 17px; font-family: var(--font-text); }
.q-stem p { margin: 10px 0; }

.q-options { list-style: none; padding: 0; margin: var(--s4) 0; font-family: var(--font-text); }
.q-options li {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 11px 16px;
  margin-bottom: var(--s2);
  background: var(--card);
}
.q-options .label { font-weight: 700; margin-right: var(--s2); color: var(--ink-2); }
/* Correctness is never colour-alone: the row also carries the word "Correct". */
.q-options li.correct { border-color: var(--good-line); background: var(--good-soft); }
.correct-badge {
  color: var(--good);
  font-weight: 700;
  font-size: 12px;
  margin-left: var(--s2);
}
.answer-box {
  background: var(--good-soft);
  border: 1px solid var(--good-line);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  margin: var(--s5) 0;
  font-family: var(--font-text);
}
.answer-box strong { color: var(--good); }

.q-fig {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--s3) 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #fff;
}

.q-math { margin: var(--s3) 0; overflow-x: auto; }
.math svg { vertical-align: middle; max-width: 100%; }
.math-raw {
  background: var(--tint);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  font-size: 13px;
}

/* The signup gate on a question's full solution. */
.gate {
  border: 1px solid var(--brand-line);
  background: linear-gradient(180deg, var(--card) 0%, var(--brand-soft) 100%);
  border-radius: var(--r-lg);
  padding: var(--s5);
  margin: var(--s5) 0;
}
.gate h2 { margin-top: 0; font-size: 19px; }
.gate p { color: var(--ink-2); margin: 6px 0 var(--s4); }

/* --- 7. homepage --------------------------------------------------------- */

/* Section rhythm: each section sets its own padding (.sec.sec-x below). */
.sec { position: relative; padding: 56px 0; }
.sec-title {
  margin: 0;
  font-size: clamp(28px, 2.9vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
}
/* --- the Exam Desk: shared pieces ------------------------------------------- */

.mono { font-family: var(--font-mono); }
.br-sm { display: none; }
/* A red-pen note: Kalam, in the text-safe red. Only ever a few words. */
.pen { font-family: var(--font-hand); font-weight: 700; color: var(--redpen-ink); }

/* The highlighter stroke behind a phrase: a slightly ragged yellow band over
   the lower two thirds of the line. */
mark.hl {
  color: inherit;
  background: linear-gradient(100deg, rgba(255, 213, 74, 0) 0.4%, var(--hl) 1.6%, rgba(255, 213, 74, 0.94) 97%, rgba(255, 213, 74, 0) 99.4%) 0 78% / 100% 64% no-repeat;
  padding: 0 0.08em;
  margin: 0 -0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A filled OMR bubble with a white tick: the list bullet of the design. */
.omr-tick {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink);
}
.omr-tick::after {
  content: "";
  width: 9px;
  height: 5px;
  border: solid #fff;
  border-width: 0 0 2.2px 2.2px;
  transform: translateY(-1px) rotate(-45deg);
}

/* Sections alternate cream and white, as the design does. */
.sec-tickets, .sec-statement, .sec-score { background: var(--card); }
.sec-tickets { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.sec-title-c { text-align: center; font-size: clamp(30px, 3.2vw, 40px); }
.row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 32px;
}
.row-sub { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.row-head .cta-ghost { min-height: 44px; padding: 8px 20px; border-width: 2px; font-size: 14px; }

/* --- hero: the exam desk ---------------------------------------------------- */

/* --hero-pt / --hero-pb: the hero's top and bottom space, named so the
   rough-work layer below can reach the section's own edges at every size. */
.sec.sec-hero {
  --hero-pt: 48px;
  --hero-pb: 64px;
  padding: var(--hero-pt) 0 var(--hero-pb);
  overflow: hidden;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.hero-copy {
  position: relative;
  z-index: 1;
  padding-top: 12px;
}
/* The rough-work layer behind the hero (home.js heroDoodles), placed in the
   design's own coordinates: its 1280px page with 48px gutters is exactly this
   container's 1184px. Decoration only, on a desk-width screen only. */
/* Pinned to the SECTION's edges (not the content's), so a doodle near the top
   can never ride above the hero and be cut, whatever the top space is. */
.hero-doodles { position: absolute; top: calc(-1 * var(--hero-pt)); bottom: calc(-1 * var(--hero-pb)); left: 0; right: 0; pointer-events: none; }
.doodle { position: absolute; color: var(--ink); opacity: 0.08; }
svg.doodle { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.doodle-emc { left: 26.4%; top: 10px; font: 700 42px/1 var(--font-hand); }
.doodle-emc sup { font-size: 0.55em; }
.doodle-pi { left: -10px; bottom: 40px; width: 56px; }
.doodle-int { left: 42%; bottom: 100px; width: 32px; }
.doodle-ring { right: -28px; bottom: 130px; width: 60px; stroke-width: 2.5; }
.hero-trail { position: absolute; left: calc(50% - 200px); top: 120px; width: 200px; height: 230px; overflow: visible; }
.hero-trail-line { fill: none; stroke: var(--ink); stroke-opacity: 0.3; stroke-width: 1.5; stroke-dasharray: 6 6; stroke-linecap: round; }
.hero-trail-plane { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.hero-trail-fold { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.exam-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 6px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font: 700 12px/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.exam-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--answered); }
.hero-copy h1 {
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: initial;
}
/* The red-pen note beside "Get Selected.": zero height, so it never moves the
   text it annotates. Its place is measured in the h1's own font size. */
.hero-pen {
  --h: clamp(40px, 5vw, 64px);
  position: relative;
  z-index: 50;
  height: 0;
  margin: 0;
  top: calc(var(--h) * -0.95);
  left: calc(var(--h) * 6.62);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-4deg);
}
.hero-pen svg { width: 34px; height: 20px; fill: none; stroke: var(--redpen-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-copy .lede { margin: 20px 0 32px; max-width: 460px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 0 0 28px; }
.hero-actions .cta-lg { min-height: 52px; padding: 12px 22px 12px 24px; }
.hero-link {
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 2px solid transparent;
}
.hero-link:hover { color: var(--ink); border-bottom-color: var(--hl); }
.hero-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.hero-ticks li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.hero-ticks .omr-tick { width: 16px; height: 16px; }
.hero-ticks .omr-tick::after { width: 7px; height: 4px; border-width: 0 0 2px 2px; }

/* THE DESK. Drawn on a 580 x 560 stage in design pixels: every length is
   N * --u, and --u is one design pixel of the stage's current width, so the
   whole composition scales as one piece and keeps its proportions. On a phone
   the stage switches to the 350 x 420 phone composition (section 8). */
.desk { position: relative; z-index: 1; width: 100%; max-width: 580px; justify-self: end; container-type: inline-size; }
.desk-stage { --u: calc(100cqw / 580); position: relative; aspect-ratio: 580 / 560; }
/* No z-index here: the pieces stack against Meera one by one (the bubble in
   front of her; the clock, the card and the note behind, so her waving hand
   is never covered). */
.desk-deco { position: absolute; inset: 0; pointer-events: none; }
.desk-deco > * { position: absolute; }

.desk-sun {
  position: absolute;
  left: calc(150 * var(--u));
  top: calc(78 * var(--u));
  width: calc(330 * var(--u));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--saffron);
}

.desk-card {
  left: 0;
  top: calc(36 * var(--u));
  width: calc(280 * var(--u));
  height: calc(236 * var(--u));
  padding: calc(20 * var(--u));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(22 * var(--u));
  box-shadow: var(--shadow-2);
  transform: rotate(-6deg);
}
.desk-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 calc(12 * var(--u));
  padding-bottom: calc(10 * var(--u));
  border-bottom: 1px solid var(--tint);
  font: 700 calc(12 * var(--u)) / 1 var(--font-mono);
  color: var(--ink);
}
.desk-mark {
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: calc(5 * var(--u));
  font-size: calc(11 * var(--u));
  color: var(--answered-ink);
}
.desk-lines { margin: 0 0 calc(14 * var(--u)); display: grid; gap: calc(8 * var(--u)); }
.desk-lines b, .desk-opts b {
  display: block;
  height: calc(10 * var(--u));
  width: calc(var(--w) * 100%);
  border-radius: 999px;
  background: #efe7de;
}
.desk-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(9 * var(--u)); width: calc(150 * var(--u)); }
.desk-opts li { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.desk-opts b { height: calc(8 * var(--u)); }
.desk-opts i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border: calc(2 * var(--u)) solid var(--ink);
  border-radius: 50%;
  font: normal 700 calc(10 * var(--u)) / 1 var(--font-mono);
  color: var(--ink);
}
.desk-opts .is-picked i {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 calc(4 * var(--u)) var(--card), 0 0 0 calc(6 * var(--u)) var(--redpen);
}
.desk-opts .is-picked b { background: #d6c8bc; }
.desk-plus4 { position: absolute; left: calc(178 * var(--u)); top: calc(126 * var(--u)); font-size: calc(20 * var(--u)); transform: rotate(-8deg); }
.desk-note-dots { display: flex; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); }
.desk-note-dots i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--ink); }
.desk-note-dots i + i { opacity: 0.4; }

.desk-note {
  left: calc(-24 * var(--u));
  top: calc(-30 * var(--u));
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  padding: calc(10 * var(--u));
  background: #ffe779;
  border-right: 1px solid #e6cd5a;
  border-bottom: 1px solid #e6cd5a;
  box-shadow: var(--shadow-1), 0 6px 14px -8px rgba(75, 37, 32, 0.35);
  transform: rotate(-10deg);
  font: 700 calc(13 * var(--u)) / 1.15 var(--font-hand);
  color: var(--ink);
  z-index: 2;
}

/* Meera: the wrapper takes her place on the desk and the picture fills it.
   The drop-shadow sits on the PICTURE, so nothing that animates is under a
   filter (a blink would otherwise re-draw the blur on every change). */
.desk-meera {
  position: absolute;
  left: calc(168 * var(--u));
  bottom: calc(18 * var(--u));
  width: calc(336 * var(--u));
  aspect-ratio: 672 / 938;
  z-index: 20;
  transform-origin: 50% 100%;
}
.desk-meera-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 calc(18 * var(--u)) calc(24 * var(--u)) rgba(75, 37, 32, 0.22));
}

/* Her very subtle life, switched on by browser/home-motion.js (.is-live) once
   the blink frames have loaded: she breathes (0.4%, 4.6 s) and blinks twice
   every 9 s, at uneven moments. Only scale and opacity animate, both of which
   the browser runs off the main thread. The blink frames come from
   meera-pen-blink: --blink, and their box (--bx --by --bw --bh, --bs), are set
   by home.js heroMeera() from mascots.js MEERA_BLINK. */
.desk-blink { position: absolute; inset: 0; display: none; pointer-events: none; }
.desk-meera.is-live .desk-blink { display: block; }
.desk-blink i {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: var(--bw);
  height: var(--bh);
  background: var(--blink) 0 0 / 100% var(--bs) no-repeat;
  opacity: 0;
}
.desk-blink i.is-closed { background-position: 0 100%; }
.desk-meera.is-live { animation: vk-breathe 4.6s ease-in-out infinite; }
.desk-meera.is-live .desk-blink i { will-change: opacity; animation: vk-blink-half 9s step-end infinite; }
.desk-meera.is-live .desk-blink i.is-closed { animation-name: vk-blink-closed; }
.desk-meera.is-paused, .desk-meera.is-paused .desk-blink i { animation-play-state: paused; }
@keyframes vk-breathe { 50% { scale: 1 1.004; } }
@keyframes vk-blink-half {
  0% { opacity: 0; }
  35.556% { opacity: 1; }
  36% { opacity: 0; }
  36.778% { opacity: 1; }
  37.222% { opacity: 0; }
  85.556% { opacity: 1; }
  86% { opacity: 0; }
  86.778% { opacity: 1; }
  87.222% { opacity: 0; }
}
@keyframes vk-blink-closed {
  0% { opacity: 0; }
  36% { opacity: 1; }
  36.778% { opacity: 0; }
  86% { opacity: 1; }
  86.778% { opacity: 0; }
}

.desk-bubble {
  left: calc(380 * var(--u));
  top: calc(56 * var(--u));
  padding: calc(6 * var(--u)) calc(14 * var(--u));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(16 * var(--u));
  box-shadow: var(--shadow-1);
  font-size: calc(14 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  color: var(--ink);
  z-index: 45;
}
.desk-bubble::after {
  content: "";
  position: absolute;
  left: calc(20 * var(--u));
  bottom: calc(-6 * var(--u));
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  background: var(--card);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}

.desk-clock {
  right: 0;
  top: calc(118 * var(--u));
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-2);
  /* Behind Meera (20): her waving palm sits in front of the clock. */
  z-index: 15;
}
.desk-clock svg { position: absolute; inset: calc(6 * var(--u)); transform: rotate(-90deg); }
.desk-clock circle { fill: none; stroke-width: 7; }
.desk-clock-track { stroke: #f5e8dc; }
.desk-clock-run { stroke: var(--saffron); stroke-dasharray: 264; stroke-dashoffset: 52; stroke-linecap: round; }
.desk-clock b { font: 800 calc(13 * var(--u)) / 1 var(--font-mono); color: var(--ink); }
.desk-clock small { margin-top: calc(3 * var(--u)); font: 600 calc(8 * var(--u)) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

.desk-base {
  position: absolute;
  left: calc(96 * var(--u));
  bottom: 0;
  width: calc(470 * var(--u));
  height: calc(112 * var(--u));
  padding: 0 calc(36 * var(--u)) 0 calc(152 * var(--u));
  display: flex;
  align-items: center;
  background: var(--ink);
  border: calc(4 * var(--u)) solid var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow-3);
  z-index: 30;
}
.desk-scores { width: 100%; }
.desk-scores-head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 calc(8 * var(--u));
  font: 700 calc(11 * var(--u)) / 1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hl);
}
.desk-scores-head span + span { color: rgba(255, 255, 255, 0.72); font-size: calc(9 * var(--u)); }
.desk-score-row { display: flex; align-items: center; gap: calc(12 * var(--u)); margin: calc(5 * var(--u)) 0 0; }
.desk-score-name { width: calc(74 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; color: #fff; }
.desk-score-bar { flex: 1; height: calc(8 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.desk-score-bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; }
.desk-score-bar .is-saffron { background: var(--saffron); }
.desk-score-bar .is-green { background: var(--answered); }
.desk-score-val { width: calc(70 * var(--u)); text-align: right; font: calc(12 * var(--u)) / 1 var(--font-mono); color: rgba(255, 255, 255, 0.72); }
.desk-score-val b { color: #fff; }

.desk-arjun {
  position: absolute;
  left: 0;
  bottom: calc(10 * var(--u));
  width: calc(136 * var(--u));
  height: calc(236 * var(--u));
  overflow: hidden;
  background: var(--hl);
  border: calc(4 * var(--u)) solid var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  z-index: 40;
}
.desk-arjun img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* Arjun's twinkle, switched on by browser/home-motion.js (.is-live) after the
   page has loaded: every 5 s a tiny white star -- the hero's own 4-point
   sparkle shape -- shines at the tip of his thumbs-up and fades, turning a
   little. His picture never changes. The box has his picture's own shape,
   top-aligned like the picture in the capsule; the star's centre and width
   come from mascots.js ARJUN_TWINKLE (inline style from home.js heroArjun()).
   Only transform and opacity animate. */
.desk-twinkle { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 400 / 717; display: none; pointer-events: none; }
.desk-arjun.is-live .desk-twinkle { display: block; }
.desk-twinkle i {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
}
.desk-arjun.is-live .desk-twinkle i { will-change: transform, opacity; animation: vk-twinkle 5s ease-in-out infinite; }
.desk-arjun.is-paused .desk-twinkle i { animation-play-state: paused; }
@keyframes vk-twinkle {
  0%, 62% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(30deg); }
  78% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.75) rotate(55deg); }
  86%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(80deg); }
}

/* A four-point sparkle. */
.desk-spark {
  width: calc(20 * var(--u));
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.desk-spark-1 { left: calc(505 * var(--u)); top: calc(40 * var(--u)); background: var(--review); }
.desk-spark-2 { left: calc(150 * var(--u)); top: calc(300 * var(--u)); width: calc(16 * var(--u)); background: var(--answered); }

/* THE HERO'S ENTRANCE. The first screen is on screen before any script runs,
   so this is CSS, not browser/home-motion.js: the highlighter draws under
   "Score Higher.", the exam clock runs down to its mark, the two score bars
   fill. Text never waits: only decoration moves. Section 8 turns all of it
   off for a reader who asked for less motion. */
.hero-copy mark.hl { animation: vk-draw 0.7s var(--ease-out) 0.35s backwards; }
@keyframes vk-draw { from { background-size: 0% 64%; } }
.desk-clock-run { animation: vk-clock 1.4s var(--ease-out) 0.3s backwards; }
@keyframes vk-clock { from { stroke-dashoffset: 264; } }
.desk-score-bar i { transform-origin: left center; animation: vk-fill 0.9s var(--ease-out) 0.55s backwards; }
.desk-score-row + .desk-score-row .desk-score-bar i { animation-delay: 0.68s; }
@keyframes vk-fill { from { transform: scaleX(0); } }

/* --- free papers: admit-card tickets ------------------------------------------ */

.sec.sec-tickets {
  padding: 64px 0;
}
/* Three tickets in one row that fits the page, as the design draws it (home.js
   pickPapers takes three). A row that scrolled sideways to a fourth ticket was
   the owner's reason to change it (2026-10-16). Stacked from 900px down. */
.tickets {
  list-style: none;
  margin: 0;
  padding: 10px 0 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.ticket {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 132px;
  padding-left: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-1);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s var(--ease-out);
}
.ticket:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.ticket-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.ticket-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.ticket-thumb b {
  position: absolute;
  left: 7px;
  bottom: 6px;
  font: 700 9.5px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
}
.tone-saffron { background: var(--saffron); }
.tone-choc { background: var(--ink); }
.tone-green { background: var(--answered); }
.tone-yellow { background: var(--hl); }
.ticket-main { display: grid; gap: 3px; min-width: 0; padding: 14px 0; }
.ticket-code { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--saffron-ink); }
.ticket-title { display: block; padding: 3px 0; font-size: 16px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); text-decoration: none; }
.ticket-title:hover { color: var(--ink); }
/* The whole ticket answers a tap, not just its title. */
.ticket-title::after { content: ""; position: absolute; inset: 0; border-radius: 20px; z-index: 1; }
.ticket-meta { font-size: 12px; font-weight: 500; color: var(--muted); }
/* A narrow ticket breaks the line at the dot, never inside "Full paper". */
.ticket-meta > span { white-space: nowrap; }
.ticket-stub {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 90px;
  padding: 0 10px;
  border-left: 2px dashed var(--line-2);
  background: var(--paper);
  border-radius: 0 19px 19px 0;
}
/* The two notches of the perforation, cut out of the card's edges. */
.ticket-stub::before, .ticket-stub::after {
  content: "";
  position: absolute;
  left: -10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
}
.ticket-stub::before { top: -10px; clip-path: inset(50% 0 0 0); }
.ticket-stub::after { bottom: -10px; clip-path: inset(0 0 50% 0); }
.ticket-stub b { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1; }
.ticket-stub small { font: 600 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ticket-go {
  margin-top: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
}
.ticket-go .ico { width: 18px; height: 18px; }

/* --- exams: folders with tabs ------------------------------------------------- */

.sec.sec-exams {
  padding: 80px 0;
}
.sec-exams .sec-title-c { margin: 0 0 56px; }
.folders {
  list-style: none;
  margin: 0;
  padding: 34px 0 0;
  display: grid;
  grid-template-columns: 5fr 2fr 2fr 3fr;
  gap: 12px;
}
/* The card's top-left corner is square where its tab joins it. */
.folder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 420px;
  padding: 32px 20px 24px;
  border-radius: 0 24px 24px 24px;
  color: #fff;
  box-shadow: var(--shadow-2);
}
.folder-tab {
  position: absolute;
  left: 0;
  top: -30px;
  height: 32px;
  width: min(168px, 88%);
  padding: 0 18px;
  display: flex;
  align-items: center;
  border-radius: 16px 16px 0 0;
  background: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.folder-link { display: block; padding: 4px 0; color: inherit; text-decoration: none; }
.folder-link:hover { color: inherit; }
/* The whole folder answers a tap. */
.folder-link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.folder-title { position: relative; z-index: 2; display: block; margin-top: 8px; font-size: 24px; font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; }
/* The open card -- JEE as the server draws the page; on a desktop with a mouse,
   the one under the pointer (browser/home-motion.js) -- is the wide one: a
   bigger title, its pill under the title, its picture on its right. */
.folder.is-open .folder-title { font-size: 30px; }
.folder-pill {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(46, 20, 17, 0.42);
  color: #fff;
}
/* The picture and its mascot's motion layer (home.js jeeThink, neetBeat,
   ndaShine, moreWave: .folder-layer) share one box: across the foot of a
   narrow card, or on the right of the open card. The picture fades in from the
   top, and from the left by --fade-l: 0 on a narrow card (that gradient is then
   solid), 30% on the open one, so no edge of the picture shows on the card. It
   is registered so the hover can animate it. */
@property --fade-l { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.folder-pic, .folder-layer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 68%;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
}
.folder-pic {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 var(--fade-l));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 var(--fade-l));
  mask-composite: intersect;
}
.folder-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.folder-jee .folder-pic img { object-position: center top; }
/* Narrow screens (the 2 x 2 grid) always show every card narrow. */
@media (min-width: 901px) {
  .folder.is-open .folder-pic, .folder.is-open .folder-layer { width: 70%; height: 78%; border-radius: 0 0 24px 0; }
  .folder.is-open .folder-pic { --fade-l: 30%; }
}
/* A motion layer copies the picture's box but NOT its fade-in mask, and is
   shown once browser/home-motion.js switches it on (.is-live). */
.folder-layer { container-type: size; display: none; pointer-events: none; }
.folder-layer.is-live { display: block; }
/* Arjun's thought, on the JEE folder (home.js jeeThink): he looks up and to
   the right, so three white thought dots rise from beside his head toward that
   spot and a small spark lights there, then all fade; 6 s apart. Switched on
   by browser/home-motion.js (.is-live) after load. The layer (.folder-layer)
   copies the picture's box but NOT its fade-in mask, which covers the very
   space he looks at; inside it, a frame with his picture's 560:750 shape is
   cropped the way the picture is (object-fit: cover, centre top), so a
   position on his picture stays one on the page, in the open card and the
   narrow one alike. Only transform and opacity animate. */
.folder-think-in { position: absolute; top: 0; left: 50%; width: max(100cqw, calc(100cqh * 560 / 750)); aspect-ratio: 560 / 750; transform: translateX(-50%); }
.folder-think i { position: absolute; display: block; aspect-ratio: 1; background: #fff; opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
.folder-think .think-dot { border-radius: 50%; }
.folder-think .think-spark { clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.folder-think.is-live i { will-change: transform, opacity; animation: vk-think-dot 6s ease-out infinite; }
.folder-think.is-live .think-dot-2 { animation-delay: 0.25s; }
.folder-think.is-live .think-dot-3 { animation-delay: 0.5s; }
.folder-think.is-live .think-spark { animation-name: vk-think-spark; animation-delay: 0.8s; }
.folder-think.is-paused i { animation-play-state: paused; }
@keyframes vk-think-dot {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  5% { opacity: 0.95; transform: translate(-50%, -50%) scale(1); }
  30% { opacity: 0.95; transform: translate(-50%, -60%) scale(1); }
  38%, 100% { opacity: 0; transform: translate(-50%, -70%) scale(0.9); }
}
@keyframes vk-think-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  6% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(30deg); }
  20% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.8) rotate(55deg); }
  30%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(80deg); }
}
/* Meera's heartbeat, on the NEET folder (home.js neetBeat): a soft rose ring
   beats out from the model heart in her palm, twice in quick succession
   (lub-dub), every 2.8 s. Switched on by browser/home-motion.js (.is-live)
   after load. Like the thought above, the layer copies the picture's box but
   not its mask, and crops a 560:750 frame the way the picture is cropped:
   cover, centred, 12% from the top. Only transform and opacity animate. */
.folder-beat-in {
  position: absolute;
  left: 50%;
  top: calc((100cqh - max(100cqw, calc(100cqh * 560 / 750)) * 750 / 560) * 0.12);
  width: max(100cqw, calc(100cqh * 560 / 750));
  aspect-ratio: 560 / 750;
  transform: translateX(-50%);
}
.folder-beat i {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 140, 140, 0) 58%, rgba(255, 140, 140, 0.55) 74%, rgba(255, 140, 140, 0) 100%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}
.folder-beat.is-live i { will-change: transform, opacity; animation: vk-beat 2.8s ease-out infinite; }
.folder-beat.is-live .beat-2 { animation-delay: 0.3s; }
.folder-beat.is-paused i { animation-play-state: paused; }
@keyframes vk-beat {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  5% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.95); }
  26%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
/* Kabir's beret, on the NDA folder (home.js ndaShine): every 5 s a soft sheen
   sweeps across the dome of his beret, like light catching a smart cadet's
   cap. The sheen is a skewed light band inside .shine-beret, which is clipped
   to the beret's outline (mascots.js KABIR_BERET, traced from the picture), so
   it never crosses the green. Same box and crop as the heartbeat above;
   switched on after load; only transform animates. */
.folder-shine-in {
  position: absolute;
  left: 50%;
  top: calc((100cqh - max(100cqw, calc(100cqh * 560 / 750)) * 750 / 560) * 0.12);
  width: max(100cqw, calc(100cqh * 560 / 750));
  aspect-ratio: 560 / 750;
  transform: translateX(-50%);
}
.shine-beret { position: absolute; display: block; overflow: hidden; }
.shine-beret b {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-18deg);
}
.folder-shine.is-live .shine-beret b { will-change: transform; animation: vk-shine 5s ease-in-out infinite; }
.folder-shine.is-paused .shine-beret b { animation-play-state: paused; }
@keyframes vk-shine {
  0%, 62% { transform: translateX(-120%) skewX(-18deg); }
  84%, 100% { transform: translateX(260%) skewX(-18deg); }
}
/* Ananya's hello, on the "more exams" folder (home.js moreWave): she waves, so
   two short wave marks flick on at each side of her raised hand -- right, then
   left, as if the hand rocks -- then rest; one greeting every 5 s. In the
   card's ink, softened: white barely shows on this yellow. Same box and crop
   as the heartbeat; switched on after load. Each mark is one ")" arc (an
   SVG), tilted up and outward, mirrored into "(" on the left; its translateX
   runs along the arc's own bulge, so every mark drifts outward. Only transform
   and opacity animate. */
.folder-wave-in {
  position: absolute;
  left: 50%;
  top: calc((100cqh - max(100cqw, calc(100cqh * 560 / 750)) * 750 / 560) * 0.12);
  width: max(100cqw, calc(100cqh * 560 / 750));
  aspect-ratio: 560 / 750;
  transform: translateX(-50%);
}
.folder-wave i {
  position: absolute;
  display: block;
  aspect-ratio: 1 / 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 40'%3E%3Cpath d='M5 5Q17 20 5 35' fill='none' stroke='%234b2520' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0;
}
.folder-wave .wave-r { transform: translate(-50%, -50%) rotate(-40deg); }
.folder-wave .wave-l { transform: translate(-50%, -50%) rotate(40deg) scaleX(-1); }
.folder-wave.is-live i { will-change: transform, opacity; animation: vk-wave-r 5s ease-out infinite; }
.folder-wave.is-live .wave-l { animation-name: vk-wave-l; }
.folder-wave.is-live .wave-r2 { animation-delay: 0.08s; }
.folder-wave.is-live .wave-l1 { animation-delay: 0.45s; }
.folder-wave.is-live .wave-l2 { animation-delay: 0.53s; }
.folder-wave.is-paused i { animation-play-state: paused; }
@keyframes vk-wave-r {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-40deg) translateX(-20%) scale(0.85); }
  4% { opacity: 0.55; transform: translate(-50%, -50%) rotate(-40deg) translateX(0) scale(1); }
  9% { opacity: 0.55; transform: translate(-50%, -50%) rotate(-40deg) translateX(10%) scale(1); }
  14%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-40deg) translateX(30%) scale(1); }
}
@keyframes vk-wave-l {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(40deg) scaleX(-1) translateX(-20%) scale(0.85); }
  4% { opacity: 0.55; transform: translate(-50%, -50%) rotate(40deg) scaleX(-1) translateX(0) scale(1); }
  9% { opacity: 0.55; transform: translate(-50%, -50%) rotate(40deg) scaleX(-1) translateX(10%) scale(1); }
  14%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(40deg) scaleX(-1) translateX(30%) scale(1); }
}
/* Each fill with the text colour that passes on it (test/public-tokens.test.js). */
.folder-jee { background: var(--deck-saffron); color: #fff; }
/* Its tab label is small text: white cannot pass on orange, the darkest ink does. */
.folder-jee .folder-tab { color: var(--brand-dark); }
/* The open folder's pill sits under its title, over no picture. */
.folder.is-open .folder-pill { margin-top: 0; }
/* ...and it has more room either side, where the screen is wide enough. */
@media (min-width: 1101px) {
  .folder.is-open { padding-left: 28px; padding-right: 28px; }
}
.folder-neet { background: var(--ink); }
.folder-nda { background: var(--deck-green); }
.folder-more { background: var(--hl); color: var(--ink); }
.folder-more .folder-pill { background: rgba(255, 255, 255, 0.62); color: var(--ink); }
/* Hover, on a desktop with a mouse (browser/home-motion.js): the card under
   the pointer opens wide and the others close; JEE opens again when the
   pointer leaves the row. data-open names the open card for the columns (the
   open one 5fr, the closed ones 2fr, "More" 3fr for its longer title).
   .is-hoverable -- set by the script, never on a touch screen or for a reader
   who asked for less motion -- turns the transitions on, so the first paint
   never animates.
   KEPT LIGHT: only the card widths and the picture boxes change size frame by
   frame (the least a real resize needs). The title's size, the padding and
   the pill's place switch once, at the start; the title then eases from where
   and how big it was by transform alone (off the main thread), and the pill,
   which cannot slide between "under the title" and "at the foot", disappears,
   moves and fades back in -- on a card that changed (.was-toggled) only. */
@media (min-width: 901px) {
  .folders[data-open="neet"] { grid-template-columns: 2fr 5fr 2fr 3fr; }
  .folders[data-open="nda"] { grid-template-columns: 2fr 2fr 5fr 3fr; }
  .folders[data-open="more"] { grid-template-columns: 2fr 2fr 2fr 5fr; }
  .folders.is-hoverable { transition: grid-template-columns 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .folders.is-hoverable .folder-title { transform-origin: 0 0; }
  .folders.is-hoverable .folder.was-toggled.is-open .folder-title { animation: vk-title-open 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .folders.is-hoverable .folder.was-toggled:not(.is-open) .folder-title { animation: vk-title-shut 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .folders.is-hoverable .folder-pic, .folders.is-hoverable .folder-layer {
    transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
      border-radius 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), --fade-l 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  /* While the cards change size the mascots' motion layers are skipped -- the
     lightest way to keep every frame short (measured at CPU x4: long frames
     from about 1 in 3 to none); content-visibility keeps their animations on
     their own clocks, so nothing restarts when they come back. */
  .folders.is-moving .folder-layer { content-visibility: hidden; }
  .folders.is-hoverable .folder.was-toggled.is-open .folder-pill { animation: vk-pill-open 0.5s ease both; }
  .folders.is-hoverable .folder.was-toggled:not(.is-open) .folder-pill { animation: vk-pill-shut 0.5s ease both; }
}
/* Between 901 and 1100 px the titles are 21 / 27 px and the padding does not
   change, so the title eases by scale alone. */
@media (min-width: 901px) and (max-width: 1100px) {
  .folders.is-hoverable .folder.was-toggled.is-open .folder-title { animation-name: vk-title-open-m; }
  .folders.is-hoverable .folder.was-toggled:not(.is-open) .folder-title { animation-name: vk-title-shut-m; }
}
/* Two names for one fade, so each change of a card restarts it. */
@keyframes vk-pill-open { 0%, 40% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vk-pill-shut { 0%, 40% { opacity: 0; } 100% { opacity: 1; } }
/* The title starts where and as big as it was: 24 -> 30 px is scale 0.8, and
   the open card's padding is 8 px wider (28 vs 20); 21 -> 27 px below 1100. */
@keyframes vk-title-open { from { transform: translateX(-8px) scale(0.8); } }
@keyframes vk-title-shut { from { transform: translateX(8px) scale(1.25); } }
@keyframes vk-title-open-m { from { transform: scale(0.7778); } }
@keyframes vk-title-shut-m { from { transform: scale(1.2857); } }

/* --- statement + answer sheet ----------------------------------------------------- */

.sec.sec-statement {
  padding: 80px 0 48px;
}
.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.statement {
  margin: 0;
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.24;
  letter-spacing: -0.03em;
}
.omr { position: relative; justify-self: center; width: min(100%, 330px); padding: 28px 0 0 28px; }
.omr-sheet {
  padding: 22px 24px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-2);
  transform: rotate(3deg);
}
.omr-head {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 0 0 14px;
  padding: 0 0 10px 60px;
  border-bottom: 1px dashed var(--line-2);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.omr-head b { font-size: 12px; color: var(--ink); }
.omr-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.omr-rows li { display: grid; grid-template-columns: 22px repeat(4, 28px); justify-content: space-between; align-items: center; }
.omr-n { font-size: 12px; color: var(--muted); }
.omr-rows i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font: normal 600 11px/1 var(--font-mono);
  color: var(--ink);
}
.omr-rows i.is-filled { background: var(--ink); color: #fff; }
.omr-done { margin: 14px 0 0; display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 19px; }
.omr-done svg { width: 20px; height: 16px; fill: none; stroke: var(--redpen-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.omr-face {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
}
.omr-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Ananya on the answer sheet's badge has just filled it ("all done!"): every
   6 s she gives a small proud tilt of the head -- the picture leans 4 deg from
   her shoulders and comes a touch closer, then settles. The lean-in also keeps
   the round frame covered while the square picture turns (a test measures the
   worst gap: under half a pixel). Switched on after load by
   browser/home-motion.js (.is-live); only transform animates. */
.omr-face.is-live img { transform-origin: 50% 100%; will-change: transform; animation: vk-tilt 6s ease-in-out infinite; }
.omr-face.is-paused img { animation-play-state: paused; }
@keyframes vk-tilt {
  0%, 52% { transform: rotate(0deg) scale(1); }
  64%, 76% { transform: rotate(-4deg) scale(1.06); }
  90%, 100% { transform: rotate(0deg) scale(1); }
}

/* --- scorecard ------------------------------------------------------------------- */

.sec.sec-score {
  padding: 48px 0;
}
.scorecard {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-1);
}
.score-cells {
  flex: 1;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.score-cell {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  padding: 4px 32px;
  border-left: 2px dashed var(--line-2);
}
.score-cell:first-child { padding-left: 8px; border-left: 0; }
.score-cell dd {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--deck-saffron);
}
.score-cell dt { font-size: 14px; font-weight: 700; color: var(--ink); }
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 14px;
  border: 2px dashed var(--redpen-ink);
  border-radius: 6px;
  transform: rotate(-8deg);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--redpen-ink);
}
.stamp small { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
/* The scorecard's stamp: a dashed outer ring and a solid inner box. */
.stamp-score { margin: 0 20px 0 8px; padding: 5px; background: rgba(229, 72, 77, 0.05); border-radius: 10px; }
.stamp-score > span { display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border: 1px solid var(--redpen-ink); border-radius: 4px; }

/* --- the top half, at narrower widths ---------------------------------------------- */

@media (max-width: 1100px) {
  .hero-grid { gap: 24px; }
  .hero-doodles { display: none; }
  .folder { height: 380px; padding: 26px 16px 20px; }
  .folder-title { font-size: 21px; }
  .folder.is-open .folder-title { font-size: 27px; }
  .folder-tab { padding: 0 12px; }
  .score-cell { padding: 4px 20px; }
  /* Three narrower tickets: a smaller picture and stub leave the words room. */
  .tickets { gap: 18px; }
  .ticket { gap: 12px; padding-left: 12px; }
  .ticket-thumb { width: 72px; height: 72px; border-radius: 14px; }
  .ticket-stub { min-width: 76px; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .desk { justify-self: center; max-width: 520px; }
  .statement-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .folders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 14px; }
  .folder { height: 320px; }
  /* Every card is narrow here, but JEE's picture keeps its fade from the left. */
  .folder-jee .folder-pic { --fade-l: 30%; }
  .scorecard { flex-direction: column; }
  .tickets { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* THE PHONE COMPOSITION: the design's own 350 x 420 desk, not the desk one
   shrunk -- at 60% its text would be 6px. Same pieces, new places and sizes. */
@media (max-width: 760px) {
  .sec.sec-hero { padding: 24px 0 48px; }
  .hero-copy h1 { font-size: 40px; }
  .hero-pen { position: static; height: auto; margin: 8px 0 0; font-size: 18px; justify-content: flex-end; transform: rotate(-3deg); }
  .hero-copy .lede { margin: 18px 0 24px; font-size: 15.5px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .hero-actions .cta { width: 100%; justify-content: space-between; }
  .hero-link { align-self: center; }
  .hero-ticks { flex-direction: column; gap: 10px; }

  .desk { max-width: 100%; }
  .desk-stage { --u: calc(100cqw / 350); aspect-ratio: 350 / 420; }
  .desk-sun { left: calc(96 * var(--u)); top: calc(58 * var(--u)); width: calc(214 * var(--u)); }
  .desk-card { top: calc(34 * var(--u)); width: calc(178 * var(--u)); height: calc(158 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(16 * var(--u)); }
  .desk-card-top { font-size: calc(10 * var(--u)); margin-bottom: calc(8 * var(--u)); padding-bottom: calc(7 * var(--u)); }
  .desk-mark { font-size: calc(9 * var(--u)); }
  .desk-lines { gap: calc(6 * var(--u)); margin-bottom: calc(10 * var(--u)); }
  .desk-lines b { height: calc(6 * var(--u)); }
  .desk-opts { gap: calc(6 * var(--u)); width: calc(110 * var(--u)); }
  .desk-opts li { gap: calc(8 * var(--u)); }
  .desk-opts i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); font-size: calc(8 * var(--u)); border-width: calc(1.5 * var(--u)); }
  .desk-opts b { height: calc(6 * var(--u)); }
  .desk-plus4 { left: calc(124 * var(--u)); top: calc(88 * var(--u)); font-size: calc(13 * var(--u)); }
  .desk-note { left: calc(-6 * var(--u)); top: calc(-18 * var(--u)); width: calc(62 * var(--u)); height: calc(62 * var(--u)); padding: calc(7 * var(--u)); font-size: calc(10 * var(--u)); }
  .desk-meera { left: calc(102 * var(--u)); bottom: calc(14 * var(--u)); width: calc(222 * var(--u)); }
  .desk-bubble { left: calc(196 * var(--u)); top: calc(16 * var(--u)); font-size: calc(11 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); }
  .desk-clock { top: calc(54 * var(--u)); width: calc(72 * var(--u)); height: calc(72 * var(--u)); }
  .desk-clock svg { inset: calc(4 * var(--u)); }
  .desk-clock b { font-size: calc(10 * var(--u)); }
  .desk-clock small { font-size: calc(7 * var(--u)); }
  .desk-base { left: calc(56 * var(--u)); width: calc(294 * var(--u)); height: calc(80 * var(--u)); padding: 0 calc(22 * var(--u)) 0 calc(98 * var(--u)); border-width: calc(3 * var(--u)); }
  .desk-scores-head { font-size: calc(8 * var(--u)); margin-bottom: calc(5 * var(--u)); }
  .desk-scores-head span + span { font-size: calc(7 * var(--u)); }
  .desk-score-row { gap: calc(6 * var(--u)); margin-top: calc(4 * var(--u)); }
  .desk-score-name { width: calc(46 * var(--u)); font-size: calc(9 * var(--u)); }
  .desk-score-bar { height: calc(6 * var(--u)); }
  .desk-score-val { width: calc(58 * var(--u)); font-size: calc(9 * var(--u)); white-space: nowrap; }
  .desk-arjun { bottom: calc(8 * var(--u)); width: calc(92 * var(--u)); height: calc(158 * var(--u)); border-width: calc(3 * var(--u)); }
  .desk-spark-1 { left: calc(300 * var(--u)); top: calc(150 * var(--u)); width: calc(16 * var(--u)); }
  .desk-spark-2 { display: none; }

  .sec.sec-tickets { padding: 52px 0; }
  .row-head { margin-bottom: 22px; }
  .sec-tickets .row-head { flex-wrap: nowrap; align-items: center; }
  .sec-tickets .row-head .cta-ghost { padding: 6px 14px; font-size: 13px; white-space: nowrap; }
  .sec-tickets .row-head .sec-title { font-size: 25px; }
  .sec-tickets .row-sub { font-size: 11px; }
  .hide-sm { display: none; }
  .br-sm { display: inline; }
  .ticket-title, .ticket-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ticket { gap: 12px; min-height: 112px; padding-left: 12px; }
  .ticket-thumb { width: 76px; height: 76px; border-radius: 14px; }
  .ticket-title { font-size: 15.5px; }
  .ticket-stub { min-width: 78px; padding: 0 12px; }

  .sec.sec-exams { padding: 56px 0 64px; }
  .folders { gap: 40px 10px; }
  .folder { height: 230px; padding: 16px 14px; border-radius: 0 22px 22px 22px; gap: 8px; }
  .folder-tab { top: -26px; height: 28px; min-width: 0; width: 76%; padding: 0 12px; font-size: 9.5px; border-radius: 14px 14px 0 0; }
  /* 19px bold is large text: the JEE folder's white title needs 3:1 on its orange. */
  .folder-title, .folder.is-open .folder-title { font-size: 19px; }
  .folder-pic, .folder-layer { height: 62%; border-radius: 0 0 22px 22px; }
  .folder-pill { display: none; }

  .sec.sec-statement { padding: 56px 0 24px; }
  .statement { font-size: 26px; }
  .sec.sec-score { padding: 40px 0 64px; }
  .scorecard { padding: 24px 16px 22px; gap: 18px; }
  .score-cells { width: 100%; gap: 0; }
  .score-cell { padding: 0 0 0 10px; }
  .score-cell:first-child { padding-left: 2px; }
  .score-cell dd { font-size: 24px; }
  .score-cell dt { font-size: 12px; }
  .stamp-score { margin: 4px auto 0; }
}

/* --- shared by the bottom half ------------------------------------------------- */

.sec-series, .sec-faq { background: var(--card); }
.sec-series { border-top: 1px solid var(--line); }
.sec-faq { border-top: 1px solid var(--line); }

/* A list whose bullets are filled OMR bubbles with a tick. */
.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tick-list li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.tick-list-sm { gap: 11px; }
.tick-list-sm li { gap: 10px; font-size: 14.5px; font-weight: 500; }

/* --- built for the exam ---------------------------------------------------------- */

.sec.sec-built {
  padding: 80px 0;
}
.built-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
/* Drawn in design pixels like the hero's desk: 520 x 460, --u = one of them. */
.built-art { width: 100%; max-width: 520px; justify-self: center; container-type: inline-size; }
.built-stage { --u: calc(100cqw / 520); position: relative; aspect-ratio: 520 / 460; }
.built-stage > * { position: absolute; }
.built-capsule {
  left: calc(110 * var(--u));
  top: calc(10 * var(--u));
  width: calc(240 * var(--u));
  height: calc(430 * var(--u));
  overflow: hidden;
  background: var(--hl);
  border: calc(5 * var(--u)) solid var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow-3);
}
.built-capsule img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* Arjun taking a test (home.js builtGlint), locked in on his laptop: every 5 s
   a quick glint of screen light crosses his glasses, left lens then right.
   Each lens is an ellipse measured from the picture (mascots.js ARJUN_GLINT)
   holding a narrow skewed light band. The layer fills the capsule and crops a
   480:860 frame the way the picture is cropped (cover, centred, 30% from the
   top). Switched on after load; only transform animates. */
.built-glint { position: absolute; inset: 0; overflow: hidden; container-type: size; display: none; pointer-events: none; }
.built-glint.is-live { display: block; }
.built-glint-in {
  position: absolute;
  left: 50%;
  top: calc((100cqh - max(100cqw, calc(100cqh * 480 / 860)) * 860 / 480) * 0.3);
  width: max(100cqw, calc(100cqh * 480 / 860));
  aspect-ratio: 480 / 860;
  transform: translateX(-50%);
}
.built-glint i { position: absolute; display: block; overflow: hidden; border-radius: 50%; }
.built-glint b {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%) skewX(-24deg);
}
.built-glint.is-live b { will-change: transform; animation: vk-glint 5s ease-in-out infinite; }
.built-glint.is-live .glint-2 b { animation-delay: 0.12s; }
.built-glint.is-paused b { animation-play-state: paused; }
@keyframes vk-glint {
  0%, 70% { transform: translateX(-130%) skewX(-24deg); }
  79%, 100% { transform: translateX(330%) skewX(-24deg); }
}
.exam-win {
  left: calc(268 * var(--u));
  top: calc(268 * var(--u));
  width: calc(238 * var(--u));
  padding: calc(14 * var(--u));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(18 * var(--u));
  box-shadow: var(--shadow-3);
}
.exam-win p { margin: 0; }
.exam-win .exam-win-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(12 * var(--u)); }
.exam-win-clock { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 800; color: var(--ink); }
.exam-win-clock b { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--answered); }
.exam-win-submit {
  padding: calc(3 * var(--u)) calc(9 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--answered-ink);
  color: #fff;
  font-size: calc(11 * var(--u));
  font-weight: 700;
}
.exam-win .exam-win-pal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(6 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.exam-win-pal i {
  display: grid;
  place-items: center;
  height: calc(22 * var(--u));
  border-radius: calc(5 * var(--u));
  font-style: normal;
  font-size: calc(10 * var(--u));
  font-weight: 700;
  color: #fff;
}
.exam-win-pal .is-done { background: var(--answered-ink); }
.exam-win-pal .is-review { background: var(--review-ink); }
.exam-win-pal .is-skip { background: var(--redpen-ink); }
.exam-win-pal .is-new { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); }
.exam-win-flag {
  display: flex;
  justify-content: space-between;
  padding: calc(6 * var(--u)) calc(9 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--biology-soft);
  color: var(--review-ink);
  font-size: calc(10.5 * var(--u));
  font-weight: 700;
}
.built-copy .sec-title { margin: 0 0 18px; }
.built-lede { margin: 0 0 26px; max-width: 34em; font-size: 16.5px; line-height: 1.65; color: var(--muted); }

/* --- the test series --------------------------------------------------------------- */

.sec.sec-series {
  padding: 80px 0;
}
.series-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.series-sub { margin: 8px 0 16px; font-size: 14px; font-weight: 500; color: var(--muted); }
.soon-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 15px;
  border-radius: var(--r-full);
  background: var(--saffron-soft);
  color: var(--saffron-ink);
  font-size: 13.5px;
  font-weight: 700;
}
.soon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--saffron); }

/* The All-Exam Pass: a chocolate admit card torn at a perforation, the price
   on its stub. */
.pass {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  margin: 0 0 40px;
  background: var(--ink);
  color: #fff;
  border-radius: 28px;
  box-shadow: var(--shadow-3);
}
.pass-main { position: relative; padding: 32px 40px 32px 32px; min-width: 0; }
.pass-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pass-no { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--saffron); }
.pass-name { margin: 0; color: #fff; font-size: 30px; letter-spacing: -0.03em; }
.pass-blurb { margin: 4px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 14px; }
.pass-ticks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 12px; color: rgba(255, 255, 255, 0.78); }
.pass-ticks li::before { content: "\2713"; margin-right: 8px; color: var(--hl); }
.stamp-pass { margin: 4px 16px 0 0; padding: 4px 14px; background: var(--ink); border-color: #ff8a8e; color: #ff8a8e; box-shadow: var(--shadow-2); }
.pass-stub {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 16px;
  padding: 28px 26px;
  background: #3f1e1a;
  border-left: 2px dashed rgba(255, 255, 255, 0.22);
  border-radius: 0 28px 28px 0;
}
/* The perforation's two notches, cut out of the card's edges. */
.pass-stub::before, .pass-stub::after {
  content: "";
  position: absolute;
  left: -13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card);
}
.pass-stub::before { top: -12px; }
.pass-stub::after { bottom: -12px; }
.pass-price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.pass-price b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.pass-price s { font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.pass-save { display: inline-block; margin: 6px 0 0; padding: 2px 10px; border-radius: 4px; background: rgba(255, 213, 74, 0.2); color: var(--hl); font-size: 12px; font-weight: 700; }
.pass .notify-label { color: rgba(255, 255, 255, 0.86); }
.pass .notify-btn { min-height: 46px; padding: 10px 18px 10px 20px; font-size: 14px; }
.pass .notify-btn .cta-ico { width: 26px; height: 26px; padding: 6px; margin-right: -8px; }
/* On the dark pass the send button is the yellow one, or it would vanish. */
.pass .notify-send { background: var(--hl); color: var(--ink); }
.pass .notify-send:hover { background: var(--hl-dark); color: var(--ink); }

.plans {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 24px;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 28px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-1);
}
.plan-tab {
  position: absolute;
  left: 28px;
  top: -14px;
  padding: 4px 16px;
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plan-jee .plan-tab { background: var(--saffron); color: var(--ink); }
.plan-neet .plan-tab { background: var(--ink); color: #fff; }
.plan-nda .plan-tab { background: var(--deck-green); color: #fff; }
.plan-name { margin: 0 0 4px; font-size: 20px; }
.plan-price { margin: 0 0 24px; display: flex; align-items: baseline; gap: 4px; }
.plan-price b { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.plan-price span { font-size: 12px; font-weight: 500; color: var(--muted); }
.plan-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--tint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan .tick-list { margin-bottom: 32px; }
.plan .tick-list-sm li { font-size: 12.5px; font-weight: 600; }
.plan .omr-tick { width: 16px; height: 16px; }
.plan .omr-tick::after { width: 7px; height: 4px; border-width: 0 0 2px 2px; }
.plan .notify-btn { min-height: 40px; padding: 8px 14px 8px 16px; font-size: 13px; }
.plan .notify-btn .cta-ico { width: 22px; height: 22px; padding: 5px; margin-right: -6px; }
.plan-more { padding: 10px 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.series-free { margin: 30px 0 0; text-align: center; color: var(--muted); }
.series-free a { color: var(--ink); font-weight: 700; }

/* --- Notify me (public-site/notify.js) ---------------------------------------------- */
/* A native <details>: the summary is the button, the form opens in its place. */
.notify > summary { list-style: none; }
.notify > summary::-webkit-details-marker { display: none; }
.notify > summary::marker { content: ""; }
.notify[open] { flex-basis: 100%; width: 100%; }
.notify[open] > summary { display: none; }
.notify-form { margin: 0; display: grid; gap: 8px; }
.notify-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.notify-row { display: flex; gap: 8px; }
.notify-input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  background: var(--card);
  font: 500 15px var(--font);
  color: var(--ink);
}
.notify-input::placeholder { color: var(--muted); }
.notify-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--hl); }
.notify-send { min-height: 46px; padding: 0 18px; }
/* The honeypot (notify.js): out of sight and out of reach, without the far
   off-screen box that causes a phantom sideways scroll. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* The thank-you and ask-again pages. */
.notice { max-width: 560px; margin: 56px auto 24px; text-align: center; }
.notice h1 { margin-top: 12px; }
.notice .lede { color: var(--muted); }
.notice-mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--hl); }
.notice-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin: 26px 0 0; }
.notice-link { padding: 10px 0; font-weight: 700; color: var(--ink); }
.notify-page { margin-top: 22px; text-align: left; }

/* --- free PYQs: the homepage section and the /pyq pages (pyq-pages.js) ------------------- */
/* The owner's "Look 1" (2026-10-24): plain words, big buttons, at most two
   facts a row, a student's face on every exam. No script anywhere: the
   homepage's exam picker is radio inputs (.pq-r) and the rules below, and
   "Show more" is <details>. Tap targets are 44px or more. */

.sec.sec-pyqs { padding: 88px 0; }
.pq-head { margin: 0 0 30px; text-align: center; }
.pq-sub { max-width: 560px; margin: 12px auto 0; font-size: 18px; line-height: 1.5; color: var(--muted); }
.pq-empty-cta { margin: 0; text-align: center; }

/* The exam picker. The radios sit before the labels and the panels so the
   sibling rules below can read them; they stay focusable (arrow keys move
   between exams) but are not drawn. */
.pq-x { position: relative; }
.pq-r { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pq-pick { margin: 0 0 12px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pq-exams { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 36px; }
.pq-exam {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 5px 20px 5px 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--card);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s var(--ease-out);
}
.pq-exam:hover { border-color: var(--line-2); transform: translateY(-1px); }
.pq-face { flex: 0 0 auto; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--saffron-soft); }
.pq-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
/* Each student's face fills the circle: the pictures are half-body, so each
   is zoomed toward the face (the face-only picture needs nothing). */
.pq-face .pq-face-arjun-thumbsup { transform: scale(1.55); transform-origin: 50% 15%; }
.pq-face .pq-face-meera-pen { transform: scale(2.1); transform-origin: 40% 3%; }
.pq-face .pq-face-kabir-salute { transform: scale(1.9); transform-origin: 50% 5%; }
.pq-face .pq-face-ananya-face { transform: none; }
.pq-face-meera-pen, .pq-face-kabir-salute { background: var(--card); }
.pq-nw { white-space: nowrap; }
/* Each known exam (pyq-data.js EXAM_ORDER): its label lights up and its panel
   shows when its radio is chosen. */
#pq-x-jee-main:checked ~ .pq-exams [for="pq-x-jee-main"],
#pq-x-neet:checked ~ .pq-exams [for="pq-x-neet"],
#pq-x-nda:checked ~ .pq-exams [for="pq-x-nda"],
#pq-x-jee-advanced:checked ~ .pq-exams [for="pq-x-jee-advanced"],
#pq-x-mht-cet:checked ~ .pq-exams [for="pq-x-mht-cet"],
#pq-x-bitsat:checked ~ .pq-exams [for="pq-x-bitsat"],
#pq-x-wbjee:checked ~ .pq-exams [for="pq-x-wbjee"],
#pq-x-cuet:checked ~ .pq-exams [for="pq-x-cuet"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
#pq-x-jee-main:focus-visible ~ .pq-exams [for="pq-x-jee-main"],
#pq-x-neet:focus-visible ~ .pq-exams [for="pq-x-neet"],
#pq-x-nda:focus-visible ~ .pq-exams [for="pq-x-nda"],
#pq-x-jee-advanced:focus-visible ~ .pq-exams [for="pq-x-jee-advanced"],
#pq-x-mht-cet:focus-visible ~ .pq-exams [for="pq-x-mht-cet"],
#pq-x-bitsat:focus-visible ~ .pq-exams [for="pq-x-bitsat"],
#pq-x-wbjee:focus-visible ~ .pq-exams [for="pq-x-wbjee"],
#pq-x-cuet:focus-visible ~ .pq-exams [for="pq-x-cuet"] {
  outline: 3px solid var(--pen);
  outline-offset: 3px;
}
.pq-panel { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
#pq-x-jee-main:checked ~ .pq-panels .pq-p-jee-main,
#pq-x-neet:checked ~ .pq-panels .pq-p-neet,
#pq-x-nda:checked ~ .pq-panels .pq-p-nda,
#pq-x-jee-advanced:checked ~ .pq-panels .pq-p-jee-advanced,
#pq-x-mht-cet:checked ~ .pq-panels .pq-p-mht-cet,
#pq-x-bitsat:checked ~ .pq-panels .pq-p-bitsat,
#pq-x-wbjee:checked ~ .pq-panels .pq-p-wbjee,
#pq-x-cuet:checked ~ .pq-panels .pq-p-cuet { display: grid; }

/* The two big choices. */
.pq-door { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-xl); }
.pq-door-paper { background: var(--butter); }
/* Arjun's picture has its own yellow sky; the box takes the same yellow so
   the picture runs edge to edge instead of sitting in a band. */
.pq-door-paper .pq-art { background: var(--pic-yellow); }
.pq-door-chap { background: var(--peach); }
.pq-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 200px;
  overflow: hidden;
  border: 1px solid rgba(75, 37, 32, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.55);
}
.pq-pic { display: block; width: min(230px, 62%); height: 100%; }
.pq-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.pq-bubble {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  max-width: 46%;
  padding: 9px 14px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.pq-bubble::after { content: ""; position: absolute; left: 24px; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); }
.pq-door-title { margin: 6px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.pq-door-text { margin: 0; font-size: 16px; color: var(--ink-2); }
.pq-rows-label { margin: 4px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* minmax(0, 1fr): a grid's own column never shrinks below its widest row's
   text, so one long sitting ("13 September - General Ability") pushed every
   row past the card on a phone. */
.pq-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pq-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
}
.pq-row-main { display: grid; gap: 3px; min-width: 0; }
.pq-row-main b { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pq-row-main > span { font-size: 14px; color: var(--muted); }
.pq-go { flex: 0 0 auto; min-height: 44px; }
.pq-all { width: 100%; min-height: 56px; margin-top: auto; font-size: 16px; }
.pq-subj { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pq-subj i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pq-subj-physics { color: var(--physics); }
.pq-subj-chemistry { color: var(--chemistry); }
.pq-subj-maths { color: var(--maths); }
.pq-subj-biology { color: var(--biology); }
.pq-subj-other { color: var(--ink-2); }
.pq-free { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 28px 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.pq-free .ico { flex: 0 0 auto; width: 18px; height: 18px; }

/* The /pyq pages share the homepage's look, at a calmer reading width. */
.page-wide > .crumbs { max-width: 1100px; margin: 16px auto 0; padding: 0 var(--s5); }
.pq-page { display: grid; gap: 28px; max-width: 1100px; margin: 0 auto; padding: 20px var(--s5) 80px; }
.pq-page h1 { margin: 0; }
.pq-page h2 { margin: 0; }
.pq-intro { display: grid; gap: 10px; }
.pq-intro .lede, .pq-hero .lede { margin: 0; }
.pq-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow-1);
}
.pq-hero-copy { display: grid; gap: 10px; min-width: 0; }
.pq-hero > .pq-hero-pic { flex: 0 0 auto; width: 120px; height: 120px; overflow: hidden; border: 4px solid var(--card); border-radius: 50%; background: var(--butter); box-shadow: var(--shadow-1); }
.pq-hero-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.pq-say { justify-self: start; margin: 0; padding: 6px 14px; border-radius: var(--r-full); background: var(--butter); font-size: 14px; color: var(--ink); }
.pq-hero-chap { justify-content: space-between; background: var(--peach); }
.pq-hero-art { position: relative; flex: 0 0 auto; display: grid; justify-items: center; gap: 10px; }
.pq-hero-art .pq-bubble { position: relative; top: auto; left: auto; max-width: none; }
.pq-hero-art .pq-bubble::after { left: 50%; margin-left: -6px; }
.pq-hero-art .pq-hero-pic { width: 140px; height: 140px; overflow: hidden; border: 4px solid var(--card); border-radius: 50%; background: var(--butter); }
.pq-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pq-tags .pq-subj, .pq-note { padding: 4px 12px; border-radius: var(--r-full); background: var(--card); font-size: 13px; }
.pq-note { color: var(--warn); font-weight: 600; }
/* A QUESTION outside the current syllabus ("Not in NEET syllabus",
   routes/public.js + src/exam-syllabus.js): the question page and list cards. */
.syl-note { display: inline-block; margin: 8px 0 12px; padding: 4px 12px; border-radius: var(--r-full); background: var(--warn-soft); color: var(--warn); font-size: 13px; font-weight: 600; line-height: 1.4; }
.q-list .syl-note { margin: 6px 0 0; }
.pq-actions { margin: 6px 0 0; }

/* Full papers | Chapter-wise */
.pq-tabs { justify-self: center; display: inline-flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--card); }
.pq-tabs a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 24px; border-radius: var(--r-full); color: var(--ink); font-weight: 700; text-decoration: none; }
.pq-tabs a:hover { background: var(--brand-soft); color: var(--ink); }
.pq-tabs a[aria-current="page"] { background: var(--ink); color: #fff; }

/* Year chips and subject chips */
.pq-years, .pq-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pq-years-label { font-size: 14px; font-weight: 700; color: var(--muted); }
.pq-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.pq-chip:hover { border-color: var(--line-2); color: var(--ink); }
.pq-chip span { font-size: 13px; font-weight: 600; color: var(--muted); }
.pq-chip[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.pq-older { display: contents; }
.pq-older > summary, .pq-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-full);
  color: var(--ink);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.pq-older > summary::-webkit-details-marker, .pq-more > summary::-webkit-details-marker { display: none; }
.pq-older[open] > summary { display: none; }
.pq-older-in { display: contents; }
.pq-more { display: grid; gap: 16px; }
.pq-more > summary { justify-self: center; }
.pq-more[open] > summary { order: 2; }

/* A year's papers */
.pq-year { display: grid; gap: 18px; }
.pq-year h2, .pq-subject h2, .pq-byyear h2 { font-size: 26px; }
.pq-year h2 span, .pq-subject h2 span { font-size: 16px; font-weight: 600; color: var(--muted); }
.pq-papers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pq-paper { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow-1); }
.pq-paper p { margin: 0; }
.pq-paper-day { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.pq-paper-sit { font-weight: 700; color: var(--saffron-ink); }
.pq-paper-q { margin-bottom: 12px !important; font-size: 14px; color: var(--muted); }
.pq-paper-go { margin-top: auto; width: 100%; }

/* An exam's chapters */
.pq-subject { display: grid; gap: 14px; scroll-margin-top: 100px; }
.pq-chaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pq-chap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
/* The name and its count together are the link to the chapter's page: one
   big target (the audit measured the name alone at 22px). */
.pq-chap-main { display: grid; gap: 3px; min-width: 0; min-height: 44px; align-content: center; color: var(--ink); text-decoration: none; }
.pq-chap-main b { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.pq-chap-main:hover { color: var(--ink); }
.pq-chap-main:hover b { text-decoration: underline; }
.pq-chap-main span { font-size: 14px; color: var(--muted); }

/* A chapter, year by year */
.pq-byyear { display: grid; gap: 16px; }
.pq-ytiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pq-ytile {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 96px;
  padding: 16px 44px 16px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s var(--ease-out);
}
.pq-ytile:hover { border-color: var(--line-2); color: var(--ink); transform: translateY(-1px); }
.pq-ytile b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.pq-ytile span { font-size: 14px; color: var(--muted); }
.pq-ytile .ico { position: absolute; top: 18px; right: 16px; width: 20px; height: 20px; }
.pq-also { display: grid; gap: 8px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.pq-also p { margin: 0; }

/* /pyq: every exam */
.pq-examcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pq-examcard { display: flex; align-items: center; gap: 18px; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow-1); }
.pq-examcard-pic { flex: 0 0 auto; width: 96px; height: 96px; overflow: hidden; border-radius: 50%; background: var(--butter); }
.pq-examcard-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.pq-examcard-copy { display: grid; gap: 6px; min-width: 0; }
.pq-examcard h2 { font-size: 22px; }
.pq-examcard h2 a { color: var(--ink); text-decoration: none; }
.pq-examcard p { margin: 0; color: var(--muted); }
.pq-examcard-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px !important; }

@media (max-width: 900px) {
  .pq-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pq-ytiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pq-examcards, .pq-chaps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sec.sec-pyqs { padding: 56px 0; }
  .pq-sub { font-size: 16px; }
  /* The exams in one row that scrolls sideways, inside the row only. */
  .pq-exams { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 calc(-1 * var(--s5)) 24px; padding: 2px var(--s5) 6px; scrollbar-width: none; }
  .pq-exams::-webkit-scrollbar { display: none; }
  .pq-exam { flex: 0 0 auto; }
  .pq-panel { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pq-door { padding: 20px; }
  .pq-art { height: 150px; }
  .pq-door-title { font-size: 24px; }
  .pq-row { padding: 12px 12px 12px 14px; }
  .pq-page { gap: 22px; padding: 12px 16px 56px; }
  .page-wide > .crumbs { padding: 0 16px; }
  .pq-hero { gap: 16px; padding: 18px; border-radius: 22px; }
  .pq-hero > .pq-hero-pic { width: 76px; height: 76px; }
  .pq-hero-chap { flex-direction: column-reverse; align-items: stretch; }
  .pq-hero-art { grid-template-columns: auto auto; justify-content: start; align-items: center; }
  .pq-hero-art .pq-hero-pic { width: 76px; height: 76px; order: -1; }
  .pq-hero-art .pq-bubble::after { left: -5px; top: 50%; bottom: auto; margin: -6px 0 0; }
  .pq-actions .cta { width: 100%; justify-content: space-between; }
  .pq-tabs { justify-self: stretch; }
  .pq-tabs a { flex: 1 1 0; justify-content: center; padding: 0 12px; }
  .pq-years, .pq-jump { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .pq-years::-webkit-scrollbar, .pq-jump::-webkit-scrollbar { display: none; }
  .pq-chip, .pq-older > summary { flex: 0 0 auto; }
  .pq-years-label { flex: 0 0 auto; }
  .pq-papers { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pq-paper { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "day go" "sit go" "q go"; align-items: center; column-gap: 12px; row-gap: 0; padding: 14px 14px 14px 18px; }
  .pq-paper-day { grid-area: day; font-size: 18px; }
  .pq-paper-sit { grid-area: sit; }
  .pq-paper-q { grid-area: q; margin-bottom: 0 !important; }
  .pq-paper-go { grid-area: go; width: auto; margin: 0; }
  .pq-ytiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pq-ytile { min-height: 84px; }
  .pq-ytile b { font-size: 22px; }
  .pq-examcard { align-items: flex-start; }
  .pq-examcard-pic { width: 72px; height: 72px; }
}

/* --- closing banner -------------------------------------------------------------------- */

.sec.sec-cta {
  padding: 64px 0;
  background: var(--card);
}
/* As the design draws it: Kabir's pill at the far left, the words at the far
   right, and the open middle shows the ghost exam clock. (A centred two-column
   grid put both over the clock and hid it -- the owner, 2026-10-16.) */
.cta-x {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 320px;
  padding: 32px 40px;
  border-radius: 32px;
  background: var(--ink);
  box-shadow: var(--shadow-3);
}
/* The exam clock, as a ghost behind everything: the design's 140px mono in
   #5C3029 at 40%. CSS content on purpose: it is decoration, not text to read
   or to measure. */
.cta-x::before {
  content: "03:00:00";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 800 140px / 1 var(--font-mono);
  letter-spacing: -0.025em;
  color: #5c3029;
  opacity: 0.4;
  white-space: nowrap;
  pointer-events: none;
}
.cta-x-art { position: relative; flex: 0 0 auto; padding-left: 16px; }
.cta-x-capsule {
  display: block;
  width: 170px;
  height: 255px;
  overflow: hidden;
  background: var(--hl);
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
/* Kabir from the waist up, drawn so his body runs off the picture's bottom
   edge: it fills the pill and the pill's lower end cuts him, so he never
   stops in mid-air (mascots/README.md). */
.cta-x-capsule img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
/* The design's five pieces, placed from the art's own corner (the pill
   starts 16px in). */
.confetti { position: absolute; display: block; }
.confetti.c1 { left: 8px; top: -12px; width: 14px; height: 14px; border-radius: 50%; background: var(--hl); transform: rotate(12deg); }
.confetti.c2 { left: -12px; top: 48px; width: 16px; height: 8px; background: var(--answered); transform: rotate(45deg); }
.confetti.c3 { left: -8px; bottom: 32px; width: 12px; height: 12px; background: var(--review); transform: rotate(12deg); }
.confetti.c4 { left: 128px; bottom: -4px; width: 14px; height: 8px; background: var(--saffron); transform: rotate(-12deg); }
.confetti.c5 { left: 176px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--pen); }
/* Kabir punches the air: every 4.5 s his "yes!" sends a small hop through the
   confetti -- the set bursts out 7% from the middle of his pill (each piece
   moves by its own distance from him) while each piece gives a little spin,
   the one by his raised fist first; then all settle. The set covers the art's
   own box, so the pieces sit exactly where they did. Switched on after load
   by browser/home-motion.js (.is-live); only transform and rotate animate. */
.confetti-set { position: absolute; inset: 0; pointer-events: none; transform-origin: 101px 50%; }
.confetti-set.is-live { will-change: transform; animation: vk-confetti-pop 4.5s ease-out infinite; }
.confetti-set.is-live .confetti { animation: vk-confetti-spin 4.5s ease-out infinite; }
.confetti-set.is-live .c5 { animation-delay: 0.05s; }
.confetti-set.is-live .c2 { animation-delay: 0.08s; }
.confetti-set.is-live .c3 { animation-delay: 0.12s; }
.confetti-set.is-live .c4 { animation-delay: 0.15s; }
.confetti-set.is-paused, .confetti-set.is-paused .confetti { animation-play-state: paused; }
@keyframes vk-confetti-pop {
  0% { transform: scale(1); }
  5% { transform: scale(1.07); }
  20% { transform: scale(0.99); }
  30%, 100% { transform: scale(1); }
}
@keyframes vk-confetti-spin {
  0% { rotate: 0deg; }
  6% { rotate: 35deg; }
  24% { rotate: -6deg; }
  34%, 100% { rotate: 0deg; }
}
.cta-x-copy { position: relative; flex: 0 1 auto; max-width: 576px; padding-right: 24px; }
.cta-x-copy h2 { margin: 0 0 10px; color: #fff; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.25; letter-spacing: 0; }
.cta-x-copy p { margin: 0 0 24px; color: rgba(255, 255, 255, 0.8); font-size: 16px; }

/* --- FAQ --------------------------------------------------------------------------- */

.sec.sec-faq { padding: 96px 0; }
.sec-faq .sec-title-c { margin: 0 0 36px; }
.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 20px; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.faq-item[open] { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 14px 20px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-n { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 30px; border-radius: 8px; background: var(--tint); font-size: 12px; font-weight: 700; }
.faq-q { flex: 1; min-width: 0; }
/* A plus in an OMR bubble that fills and turns into a minus. */
.faq-ico { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 50%; transition: background 0.18s ease; }
.faq-ico::before, .faq-ico::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--ink);
}
.faq-ico::after { transform: rotate(90deg); transition: transform 0.2s var(--ease-out); }
.faq-item[open] .faq-ico { background: var(--ink); }
.faq-item[open] .faq-ico::before, .faq-item[open] .faq-ico::after { background: #fff; }
.faq-item[open] .faq-ico::after { transform: rotate(0deg); }
.faq-item > p { margin: 0; padding: 0 20px 20px 68px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.faq-item[open] > p { animation: vk-rise 0.28s var(--ease-out); }
@keyframes vk-rise { from { opacity: 0; transform: translateY(14px); } }

/* --- the bottom half, at narrower widths ---------------------------------------------- */

@media (max-width: 1100px) {
  .plans { gap: 40px 14px; }
  .plan { padding: 32px 18px 18px; }
  .plan-tab { left: 18px; }
  .plan-foot { flex-direction: column; align-items: stretch; }
  .plan-foot .notify, .plan-foot .notify-btn { width: 100%; }
  .plan-more { align-self: center; }
  .pass { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 900px) {
  /* Room for a plan name on two lines, so the three prices stay level. */
  .plan-name { min-height: 2.5em; }
}

@media (max-width: 900px) {
  .built-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* The pass tears across instead of down: the stub goes under, the notches
     move to the sides. */
  .pass { grid-template-columns: minmax(0, 1fr); }
  .pass-stub { border-left: 0; border-top: 2px dashed rgba(255, 255, 255, 0.3); border-radius: 0 0 28px 28px; }
  .pass-stub::before { left: -11px; top: -12px; }
  .pass-stub::after { left: auto; right: -11px; top: -12px; bottom: auto; }
  /* Stacked: the pill over the words, and the ghost clock moves to the
     bottom-right corner, where the phone design puts it. */
  .cta-x { flex-direction: column; justify-content: center; text-align: center; }
  .cta-x::before { left: auto; top: auto; right: -16px; bottom: -24px; transform: none; font-size: 96px; opacity: 0.8; }
  .cta-x-art { padding: 0 16px; }
  .cta-x-copy { padding-right: 0; }
}

@media (max-width: 760px) {
  .sec.sec-built, .sec.sec-series, .sec.sec-pyqs, .sec.sec-faq { padding: 56px 0; }
  .sec.sec-cta { padding: 12px 0 56px; }
  /* The design's phone composition: a big capsule at the left, the exam
     window over its lower right. */
  .built-art { max-width: 100%; justify-self: stretch; }
  .built-stage { --u: calc(100cqw / 350); aspect-ratio: 350 / 340; }
  .built-capsule { left: 0; top: 0; width: calc(196 * var(--u)); height: calc(330 * var(--u)); border-width: calc(3 * var(--u)); }
  .exam-win { left: calc(150 * var(--u)); top: calc(196 * var(--u)); width: calc(196 * var(--u)); padding: calc(11 * var(--u)); }
  .tick-list li { font-size: 14.5px; }
  .series-head { margin-bottom: 28px; }
  .pass-main { padding: 26px 20px 22px; }
  .pass-name { font-size: 26px; }
  .pass-ticks { flex-direction: column; gap: 6px; }
  .pass-cost { display: flex; align-items: baseline; justify-content: space-between; width: 100%; }
  .pass-save { margin: 0; }
  .stamp-pass { position: absolute; top: 18px; right: 16px; margin: 0; padding: 3px 8px; font-size: 9.5px; letter-spacing: 0.1em; }
  .pass-stub { padding: 24px 22px; }
  .pass .notify, .pass .notify-btn { width: 100%; }
  /* A full-width pill reads label-left, arrow-right, as the design draws it. */
  .pass .notify-btn, .plan .notify-btn, .cta-x-copy .cta { justify-content: space-between; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan-name { min-height: 0; margin: 0; font-size: 17px; }
  /* On a phone the name and the price share one row, as the design shows. */
  .plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
  .plan-price { margin: 0; flex: 0 0 auto; }
  .plan-price b { font-size: 22px; }
  .plan .tick-list { margin-bottom: 22px; }
  .plan-foot .notify, .plan-foot .notify-btn { width: 100%; }
  .plan-more { margin: 0 auto; }
  .cta-x { padding: 24px; border-radius: 24px; }
  .cta-x::before { font-size: 72px; }
  .cta-x-capsule { width: 120px; height: 180px; border-width: 2px; }
  .confetti.c1 { left: 8px; top: -10px; width: 11px; height: 11px; }
  .confetti.c2 { left: -12px; top: 36px; width: 13px; height: 7px; }
  .confetti.c3 { left: -8px; bottom: 24px; width: 10px; height: 10px; }
  .confetti.c4 { left: 92px; bottom: -4px; width: 12px; height: 7px; }
  .confetti.c5 { left: 126px; top: 12px; width: 10px; height: 10px; }
  .confetti-set { transform-origin: 76px 50%; }
  .cta-x-copy h2 { margin-bottom: 8px; font-size: 26px; }
  .cta-x-copy p { font-size: 14px; }
  .cta-x-copy .cta { width: 100%; justify-content: space-between; }
  .faq-item > summary { padding: 12px 14px; gap: 10px; font-size: 15.5px; }
  .faq-item > p { padding: 0 16px 16px; }
}

/* --- 8. responsive --------------------------------------------------------- */


/* THE FIRST SCREEN. On a desk-width screen the hero fills the screen under the
   85px header (an 84px bar and its 1px rule) and ends at the fold, with its
   copy centred against the desk: a hero sized by its content left an empty
   cream band under the desk with the next section peeking in (the owner, on
   a 1536x724 laptop, 2026-10-16). Checked in public-site-audit.js. */
@media (min-width: 981px) {
  .sec.sec-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 85px);
  }
  .sec-hero > .hero-grid { width: 100%; align-items: center; }
}

/* SHORT LAPTOP SCREENS. A 1080p laptop at Windows' 125% scaling gives the
   browser about 1536x724 CSS px, a 1366x768 one about 657px of height. The
   hero then keeps everything above the fold with a little less air, and the
   desk is as tall as the screen leaves it: 85px header + 44 + 28 = 157px. */
@media (min-width: 981px) and (max-height: 760px) {
  /* 44px, not less: the sticky note rides 36px above the desk's top edge. */
  .sec.sec-hero { --hero-pt: 44px; --hero-pb: 28px; }
  .exam-chip { margin-bottom: 16px; }
  .hero-copy .lede { margin: 16px 0 22px; }
  .hero-actions { margin-bottom: 18px; }
  .desk { max-width: min(580px, calc((100vh - 157px) * 580 / 560)); }
}

/* Between a phone and a desk the four tabs tighten before the menu takes over. */
@media (max-width: 1000px) {
  .site-nav { gap: 22px; }
  .site-header-in { gap: 18px; }
}

@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-header-in { display: flex; gap: 10px; min-height: 64px; padding: 10px var(--s4); }
  .brand-logo { height: 38px; }
  .header-cta { margin-left: auto; }
  .nav-mobile { display: block; margin-left: 0; }
  .wrap, .wrap-wide { padding: 0 var(--s4); }
  .footer-in { padding: 0 var(--s4); }
  .site-footer { padding-top: 56px; }
  .footer-promise { font-size: 32px; line-height: 1.15; margin-bottom: 40px; }
  .footer-row { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; }
  .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 0 24px; width: 100%; }
  .footer-links a { padding: 7px 0; }

  .sec { padding: 36px 0; }

}

@media (max-width: 520px) {
  .acct-first { display: none; }
  /* The design's phone pill has no arrow. */
  .acct-login .cta-ico { display: none; }
}

/* Touch screens get a full-size target even on the small buttons. */
@media (pointer: coarse) {
  .cta-sm { min-height: 44px; }
}

/* Motion is decoration here: every transition above is a nicety, so removing
   them all costs the page nothing. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .faq-item[open] > p, .hero-copy mark.hl, .desk-clock-run, .desk-score-bar i { animation: none; }
  .desk-meera.is-live, .desk-meera.is-live .desk-blink i, .desk-meera.is-live .desk-blink i.is-closed { animation: none; }
  .desk-arjun.is-live .desk-twinkle i, .folder-think.is-live i, .folder-beat.is-live i, .folder-shine.is-live .shine-beret b, .folder-wave.is-live i, .built-glint.is-live b, .omr-face.is-live img, .confetti-set.is-live, .confetti-set.is-live .confetti { animation: none; }
  .folders.is-hoverable .folder.was-toggled.is-open .folder-pill, .folders.is-hoverable .folder.was-toggled:not(.is-open) .folder-pill { animation: none; }
  .folders.is-hoverable .folder.was-toggled.is-open .folder-title, .folders.is-hoverable .folder.was-toggled:not(.is-open) .folder-title { animation: none; }
  .desk-blink, .desk-twinkle, .folder-think, .folder-beat, .folder-shine, .folder-wave, .built-glint { display: none !important; }
  .cta:hover, .cta:active, a.card:hover, .ticket:hover, .notebook:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .cta, .gate, .desk { display: none; }
  body { background: #fff; }
  .cta-x { background: none; color: var(--ink); box-shadow: none; }
}