/* The stylesheet for the indexable pages. Deliberately NOT the app's CSS.
 *
 * These pages are judged on Core Web Vitals, so the rules are:
 *   · no webfont      — a system stack renders on the first paint, so the h1
 *                       is the LCP element and there is no swap-in shift
 *   · no JavaScript   — nothing to block INP
 *   · fixed-height    — every box that could reflow has its space reserved,
 *     furniture         which keeps CLS at 0
 * One small file, one request.
 *
 * The palette below IS the app's, from src/theme.css. It used to be Tailwind's
 * stock values — #4f46e5 indigo-600, #b45309 amber-700, #0f766e teal-700,
 * #6b7280 gray-500 — while the app ran a bespoke brand palette. Same logo,
 * different everything else, so the two halves read as two products and the
 * seam was visible the moment anyone clicked "the reader's next click" (owner, 24 Aug
 * 2026). This comment claimed they matched long before they did.
 *
 * Still no webfont: the system stack renders on the first paint, which is what
 * keeps the h1 as the LCP element with no swap-in shift. Matching the brand is
 * a colour problem, not a typeface problem.
 */

:root {
  /* straight from the app — do not drift again */
  --primary: #584CF4;
  --deep: #221C63;
  --bright: #837AF8;
  --amber: #F7B32B;
  --green: #1FA45B;
  --coral: #F25C54;

  --ink: #221C63;          /* headings: the app's ink, not near-black */
  --body: #45416b;         /* long-form copy, solid so it can be inherited */
  --muted: #6b6790;
  --line: rgba(34, 28, 99, 0.12);
  --bg: #fff;              /* white for long reads; the app's canvas below */
  --soft: #F4F3FC;         /* the app's canvas — tinted blocks now on-brand */
  --radius: 16px;
  --wrap: 940px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  text-rendering: optimizeLegibility;
}

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

/* ── header ─────────────────────────────────────────────────────────────
 * Desktop: one row — mark, wordmark, sections, then the two calls to action.
 * Under 720px it becomes two rows: the mark and the Android button stay put
 * (the download must never be the thing you scroll to find), and the section
 * links slide horizontally underneath rather than wrapping into a ragged block.
 */
.hd {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.hd .wrap {
  display: flex;
  align-items: center;
  gap: 10px 22px;
  min-height: 62px;      /* reserved, so the sticky bar never shifts content */
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.015em;
  flex: none;
}
.brand img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  /* The mark is drawn in pure white — it is meant to sit ON the brand indigo,
     which is what the app does. A 10% tint left a white chakra on near-white
     and the logo read as blank (owner, 25 Aug 2026). Same gradient as the
     app's brand tile. */
  background: linear-gradient(140deg, var(--bright), var(--primary));
  padding: 4px;
}

.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  font-size: 14.5px;
}
.nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.nav a:hover { color: var(--ink); background: var(--soft); }
/* The page you are on, marked with a rule rather than a fill — the filled
   shape in this bar is reserved for the download. */
.nav a.on { color: var(--ink); font-weight: 600; }
.nav a.on::after {
  content: '';
  position: absolute;
  left: 11px; right: 11px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}

/* Secondary: available, not advertised. */
.navapp {
  flex: none;
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: nowrap;
}
.navapp:hover { color: var(--primary); background: var(--soft); }

/* Primary: the robot does the work. */
.navget {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--primary), var(--deep));
  color: #fff;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  padding: 9px 15px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.28);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.navget:hover {
  color: #fff;
  box-shadow: 0 5px 18px rgba(79, 70, 229, 0.38);
  transform: translateY(-1px);
}
.navget svg { flex: none; }

@media (max-width: 720px) {
  .hd .wrap {
    flex-wrap: wrap;
    padding-top: 9px;
    padding-bottom: 7px;
    gap: 8px 12px;
  }
  .brand span { font-size: 15.5px; }
  /* .navapp and .navget were the old two-CTA header; both are gone from the
     markup. The single .navcta takes their place here, or the row wraps with
     the button stranded on its own line (owner's screenshot, 24 Aug 2026). */
  .navcta {
    margin-left: auto;
    padding: 8px 13px;
    font-size: 13.5px;
  }
  .nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 6px 10px; font-size: 14px; }
}

/* ── type ───────────────────────────────────────────────────────────── */
main { padding: 26px 20px 60px; }

h1 {
  font-size: clamp(27px, 4.4vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 8px 0 12px;
}
section + section > h2:first-child,
section:first-child > h2:first-child { border-top: 0; padding-top: 0; }
h2 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 38px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
h3 {
  font-size: 17px;
  color: var(--ink);
  margin: 24px 0 8px;
}
p { margin: 0 0 14px; }
a { color: var(--primary); }
.lede {
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 22px;
}
.muted { color: var(--muted); font-size: 14px; }

ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 6px; }

blockquote {
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--primary);
  background: var(--soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
blockquote p:last-child { margin-bottom: 0; }

code {
  font: 13.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--soft);
  padding: 1px 5px;
  border-radius: 4px;
}
pre {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
}
pre code { background: none; padding: 0; }

/* Wide tables scroll inside their own box — the page body never does. */
.tw { overflow-x: auto; margin: 0 0 18px; }
/* Counts and shares: right-aligned lining figures, so a column compares
   down its own edge instead of ragging against the label beside it. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td {
  border: 1px solid var(--line);
  padding: 8px 11px;
  text-align: left;
  vertical-align: top;
}
th { background: var(--soft); font-weight: 600; color: var(--ink); }

/* ── furniture ──────────────────────────────────────────────────────────
 * Every selector below matches markup that tool/seo.py actually emits. It is
 * checked by the class-coverage assertion in that script, because a CSS file
 * written against guessed class names renders as unstyled boxes and nobody
 * notices until it is live.
 */
.crumbs {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }

.meta {
  font-size: 13.5px;
  color: var(--muted);
  margin: -4px 0 16px;
}

/* the FREE badge on a chapter card */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: #dcfce7;
  color: #14532d;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* On a chapter page the same badge says which side of the paywall it is on. */
.tag.free { background: #dcfce7; color: #14532d; }
.tag.paid { background: #ede9fe; color: #4c1d95; }

/* ── counters ───────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 20px 0 26px;
}
.stats > div {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  background: var(--soft);
}
.stats > div b {
  display: block;             /* the number and its label were running together */
  font-size: 25px;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.stats > div span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.stats.sm > div { padding: 10px 13px; }
.stats.sm > div b { font-size: 20px; }

/* ── cards ──────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 13px;
  margin: 18px 0 26px;
}
.list { display: grid; gap: 9px; margin: 18px 0 26px; }

.card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
.card:hover { border-color: var(--primary); background: var(--soft); }
.card h3 { margin: 0 0 4px; font-size: 15.5px; color: var(--ink); }
.card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* a full-width row: text left, chevron parked right */
.card.wide {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
}
.card.wide > div { flex: 1; min-width: 0; }
.card.wide .tag { margin: 0 0 5px; }
.chev {
  flex: none;
  font-size: 21px;
  line-height: 1;
  color: var(--muted);
}
.card.wide:hover .chev { color: var(--primary); }

/* ── topic pills ────────────────────────────────────────────────────── */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 26px; }
.pill {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  text-decoration: none;
  color: var(--body);
  background: #fff;
}
.pill:hover { border-color: var(--primary); color: var(--primary); background: var(--soft); }

/* ── the outline shown in place of a locked chapter's body ──────────── */
.outline {
  list-style: none;
  padding: 0;
  margin: 14px 0 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.outline li {
  margin: 0;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--body);
}
.outline li:last-child { border-bottom: 0; }
.outline li:nth-child(odd) { background: var(--soft); }

/* ── buttons.  .cta is the WRAPPER; .btn is the button. Styling .cta as a
 *    button painted an empty purple slab under every page. ───────────── */
.cta { margin: 22px 0 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 10px;
}
.btn:hover { background: var(--deep); }
.btn.ghost {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--line);
}
.btn.ghost:hover { border-color: var(--primary); background: var(--soft); }

.ft {
  border-top: 1px solid var(--line);
  background: var(--soft);
  padding: 24px 0 34px;
  margin-top: 40px;
  font-size: 13px;
  color: var(--muted);
}
.ft p { margin: 0 0 8px; }
.ft a { color: var(--muted); }

@media (max-width: 560px) {
  /* Five sections since the Papers and Notes hubs (8 Sep 2026): at 390px
     they no longer fit on one line, and nowrap clipped the fifth. */
  .nav { gap: 6px 10px; font-size: 13.5px; width: 100%; margin-left: 0; flex-wrap: wrap; }
  main { padding: 18px 16px 44px; }
  .wrap { padding: 0 16px; }
  .cta { flex-direction: column; align-items: stretch; }
  .btn { text-align: center; }
}

/* ── the solved 2022 paper ───────────────────────────────────────────────
   120 question cards on one page, so this has to stay cheap to render and
   easy to skim. No JS, no accordions: a crawler must see every answer and
   every explanation in the HTML, which is the entire point of the page. */
.note {
  border-left: 3px solid var(--amber, #F7B32B);
  background: rgba(247, 179, 43, .08);
  padding: 14px 16px; border-radius: 0 12px 12px 0; margin: 22px 0;
  font-size: 14.5px; line-height: 1.6;
}
.qlist { margin-top: 18px; }
.qa {
  border: 1px solid rgba(34, 28, 99, .10); border-radius: 14px;
  padding: 16px 18px; margin: 0 0 12px;
  background: #fff; scroll-margin-top: 80px;
}
.qh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qn {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  color: #584CF4; background: rgba(88, 76, 244, .10);
  padding: 3px 9px; border-radius: 999px;
}
.pill.warn {
  font-size: 11px; font-weight: 700; color: #8a5a00;
  background: rgba(247, 179, 43, .18); padding: 3px 9px; border-radius: 999px;
}
.qs { font-size: 15.5px; line-height: 1.55; font-weight: 600; }
.qs table { font-size: 13.5px; }
.qo { list-style: none; margin: 11px 0 0; padding: 0; }
.qo li {
  padding: 7px 11px; border-radius: 9px; font-size: 14.5px; line-height: 1.5;
}
.qo li b { color: #6b6790; font-weight: 700; margin-right: 5px; }
/* The correct option is marked in the markup, not only by colour — the answer
   is also stated in words below, so this reads without colour perception. */
.qo li.hit { background: rgba(31, 164, 91, .12); font-weight: 700; }
.qo li.hit b { color: #1FA45B; }
.qw {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(34, 28, 99, .08);
  font-size: 14px; line-height: 1.6; color: #45416b;
}
.qw b { color: #1FA45B; }
.qw em { font-style: normal; color: #6b6790; }
.endcta {
  margin-top: 34px; padding: 26px 24px; border-radius: 18px;
  background: linear-gradient(150deg, #efeeff, #e6e4ff);
}
.endcta h2 { margin-top: 0; }
.endcta .btn { margin-right: 10px; }
@media (max-width: 560px) {
  .qa { padding: 14px 14px; border-radius: 12px; }
  .qs { font-size: 15px; }
}


/* One action, one colour across both halves: the app's Unlock button is amber,
   so the unlock CTA on these pages is amber too. Deep ink on it rather than
   white — white on #F7B32B lands near 2:1 and fails contrast. */
.btn.unlock {
  background: linear-gradient(160deg, #FFC65C, var(--amber));
  color: var(--deep);
  box-shadow: 0 3px 10px rgba(247, 179, 43, .38);
}
.btn.unlock:hover { background: var(--amber); color: var(--deep); }

/* ── one product, not two ────────────────────────────────────────────────
   The app draws white panels on a lavender canvas with a soft lift and 20px
   corners. These pages drew white-on-white with hairlines, so even after the
   palette matched, arriving from /exam-guide at the app still felt like a
   different site (owner, 24 Aug 2026). Same surfaces here.

   Overrides live at the end of the file rather than edited in place, so the
   Core Web Vitals rules at the top — no webfont, no JS, reserved space — stay
   readable as the original intent. */
body { background: var(--soft); }

/* Content sits on a white sheet, the way every app screen does. */
main.wrap, .wrap > article, body > .wrap:last-of-type { background: transparent; }

.list a,
.stats div,
.qa,
table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(34, 28, 99, 0.05);
}
.list a:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
  box-shadow: 0 6px 14px rgba(34, 28, 99, 0.09);
}
.stats div { padding: 16px 18px; }
.stats b { color: var(--primary); }

/* The header is the app's top-right lane in spirit: white, hairline, sticky. */
.hd { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--line); }

/* The app's buttons are 14px-radius squircles, not pills. */
.btn { border-radius: 14px; }
.btn.ghost { background: #fff; }

/* Tables inside prose keep their own frame, so drop the doubled border. */
.md table, table table { box-shadow: none; }

/* Footer sits on the canvas, not a second grey. */
.ft { background: transparent; border-top: 1px solid var(--line); }

/* ── the single call to action ───────────────────────────────────────────
   The app's primary button: brand indigo, 14px squircle, soft lift. The old
   .navget Android pill is gone from the markup; its rules above are now inert
   and left only so the diff of this change stays readable. */
.navcta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 14px;
  background: linear-gradient(160deg, #6E62FF, var(--primary));
  color: #fff !important; text-decoration: none;
  font-size: 14.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(88, 76, 244, .28);
  transition: filter .15s ease, transform .15s ease;
}
.navcta:hover { filter: brightness(1.06); }
.navcta:active { transform: scale(.98); }

/* ── the mid-page invitation ─────────────────────────────────────────────
   Sits between the free content and the rest of it. A reader who has got this
   far has read a full teaching section and three solved questions, which is
   what earns the right to ask for anything. Deliberately not a paywall: no
   price, no plan, no lock — those words mean nothing to a first-time visitor
   and made the page read as a shop that would not let them in. */
.promo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  margin: 34px 0; padding: 22px 24px; border-radius: 20px;
  background: linear-gradient(150deg, #221C63, #3A2FA6);
  color: #fff;
  box-shadow: 0 14px 34px rgba(34, 28, 99, .22);
}
.promo > div { flex: 1 1 320px; min-width: 0; }
.promo-k {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 6px;
}
.promo p { margin: 0; font-size: 15px; line-height: 1.55; color: #DCD9FF; }
.promo .btn {
  flex: 0 0 auto; background: var(--amber); color: var(--deep) !important;
  box-shadow: 0 4px 12px rgba(247, 179, 43, .34);
}
.promo .btn:hover { background: #FFC65C; color: var(--deep) !important; }
@media (max-width: 620px) {
  .promo { padding: 20px; border-radius: 16px; }
  .promo .btn { width: 100%; text-align: center; }
}

/* ── the announcement strip ──────────────────────────────────────────────
   Above the nav on all 35 pages. Deep indigo so it reads as chrome rather
   than as content, and short enough not to push the h1 below the fold — that
   heading is the LCP element and moving it would cost the thing this file was
   written to protect. Fixed height, so no layout shift. */
.strip {
  background: linear-gradient(100deg, #221C63, #3A2FA6);
  color: #DCD9FF;
  font-size: 13px;
  line-height: 1.4;
}
.strip .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 8px 16px; flex-wrap: wrap;
  padding: 9px 20px;
  text-align: center;
}
.strip b { color: #fff; font-weight: 700; }
.strip a {
  color: var(--amber); font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.strip a:hover { color: #FFC65C; text-decoration: underline; }
/* On a phone the sentence is the thing that gives, not the link. */
@media (max-width: 640px) {
  .strip { font-size: 12px; }
  .strip .wrap { padding: 8px 14px; gap: 4px 12px; }
}

/* ── buttons stay buttons on a phone ─────────────────────────────────────
   The .cta row was rendering as two full-width slabs stacked on top of each
   other (owner's screenshot, 24 Aug 2026). Buttons sized to their label read
   as actions; a full-width block reads as a banner and gets ignored. */
@media (max-width: 620px) {
  .cta { gap: 8px; }
  .cta .btn { flex: 0 1 auto; font-size: 14px; padding: 11px 16px; }
  .promo .btn { width: auto; }          /* was 100% — same slab problem */
  .promo { gap: 14px; padding: 18px 18px; }
  .promo p { font-size: 14px; }
  .endcta { padding: 20px 18px; }
  .endcta .btn { margin-right: 8px; }
}
/* Very narrow: one button per line is fine, but keep it hugging its label. */
@media (max-width: 380px) {
  .cta { flex-direction: column; align-items: flex-start; }
  .navcta { padding: 7px 11px; font-size: 12.5px; }
}


/* ── phone header: one row of chrome, not three ──────────────────────────
   At 390px the brand wordmark (~130px) plus the CTA (~200px) overflowed the
   350px of usable width, so the button wrapped to its own line and the nav to
   a third — 182px of furniture above the h1. The mark alone identifies the
   site on a screen this size; the page title is immediately beneath it. */
@media (max-width: 560px) {
  .brand span { display: none; }
  .strip i { display: none; }          /* keep the headline, drop the tail */
  .strip .wrap { padding: 7px 14px; }
  .navcta { font-size: 13px; padding: 8px 12px; }
  .hd .wrap { min-height: 52px; }
}

/* A line of context under a CTA — smaller than body, not a caption. */
.fine { margin: -2px 0 0; font-size: 13.5px; color: var(--muted); }

/* The strip's tail is an <i> only so the phone rule can hide it — it is not
   emphasis, so it must not render italic on desktop. */
.strip i { font-style: normal; }

/* ── the chapter outline, restyled ────────────────────────────────────────
   Was bare striped table rows of ALL-CAPS text, which read as debug output.
   Numbered, carded, and sized like the section list in the product. */
.outline {
  list-style: none; padding: 0; margin: 14px 0 8px;
  counter-reset: sec;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 2px 4px rgba(34, 28, 99, 0.05);
  overflow: hidden;
}
.outline li {
  counter-increment: sec;
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 16px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.outline li::before {
  content: counter(sec, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 11px; font-weight: 800; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.outline li:nth-child(odd) { background: #fff; }   /* kill the zebra striping */
.outline li:last-child { border-bottom: 0; }