/* 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;

  /* "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);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
  justify-self: start;
}
.brand:hover { color: var(--ink); }
/* The ticked OMR bubble (icons.js): the bubble takes this colour, the tick is
   white. */
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--saffron);
  flex: 0 0 auto;
}
.brand-mark svg { display: block; width: 30px; height: 30px; }

.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;
}

.desk-meera {
  position: absolute;
  left: calc(168 * var(--u));
  bottom: calc(18 * var(--u));
  width: calc(336 * var(--u));
  height: auto;
  z-index: 20;
  filter: drop-shadow(0 calc(18 * var(--u)) calc(24 * var(--u)) rgba(75, 37, 32, 0.22));
}

.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; }

/* 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; }
.folder-jee .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;
}
.folder-pic {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68%;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
}
.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; }
/* The wide JEE folder's picture sits on its right: faded in from the top AND
   the left, so no edge of the picture shows on the card. */
.folder-jee .folder-pic {
  left: auto;
  right: 0;
  width: 70%;
  height: 78%;
  border-radius: 0 0 24px 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 30%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%), linear-gradient(to right, transparent 0, #000 30%);
  mask-composite: intersect;
}
/* Each fill with the text colour that passes on it (test/public-tokens.test.js). */
.folder-jee { padding-left: 28px; padding-right: 28px; 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 wide folder's pill sits under its title, over no picture. */
.folder-jee .folder-pill { margin-top: 0; }
.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); }

/* --- 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; }

/* --- 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-jee .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; }
  .folder-jee .folder-pic { left: 0; width: auto; height: 68%; border-radius: 0 0 24px 24px; }
  .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-jee .folder-title { font-size: 19px; }
  .folder-pic, .folder-jee .folder-pic { left: 0; width: auto; 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%; }
.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; }

/* --- every PYQ, free: notebooks ------------------------------------------------------ */

.sec.sec-pyqs {
  padding: 80px 0;
}
.notebooks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pyqs-all-phone { display: none; margin: 24px 0 0; }
.notebook {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 230px;
  padding: 28px 20px 18px;
  border-radius: 20px;
  color: #fff;
  box-shadow: var(--shadow-2);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s ease;
}
.notebook:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.nb-physics { background: var(--deck-blue); }
.nb-chemistry { background: var(--deck-green); }
.nb-maths { background: var(--saffron); color: var(--ink); }
.nb-biology { background: var(--deck-violet); }
/* The spiral binding: eight rings, spaced evenly across the top. */
.nb-rings {
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  display: flex;
  justify-content: space-evenly;
  padding: 0 16px;
}
.nb-rings i { width: 10px; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); }
.nb-label {
  display: block;
  margin-top: 8px;
  padding: 11px 12px;
  background: var(--card);
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
}
.nb-label:hover { color: var(--ink); }
/* The whole notebook answers a tap. */
.nb-label::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.nb-label b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.nb-label span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.nb-doodle { display: block; width: 80px; height: 80px; margin: auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nb-foot { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; }
.nb-go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--card); color: var(--ink); }
.nb-go .ico { width: 18px; height: 18px; }

/* --- 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); }
.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) {
  .notebooks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 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; }
  .notebooks { gap: 12px; }
  .notebook { height: 196px; padding: 26px 12px 12px; border-radius: 16px; }
  .nb-rings { padding: 0 10px; top: 7px; }
  .nb-rings i { width: 6px; height: 11px; }
  .pyqs-all { display: none; }
  .pyqs-all-phone { display: block; }
  .pyqs-all-phone .cta { width: 100%; }
  .nb-label { margin-top: 6px; padding: 8px 9px; border-radius: 10px; }
  .nb-label b { font-size: 15px; }
  .nb-label span { font-size: 10px; }
  .nb-doodle { width: 48px; height: 48px; }
  .nb-foot { font-size: 13px; }
  .nb-go { width: 30px; height: 30px; }
  .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; }
  .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); }
  .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; }
  .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; }
}