:root{
  color-scheme:light;
  --brand:#6E4FE8; --brand-dark:#6446E0; --brand-deep:#5B3DD6; --brand-soft:#E6E1FB;
  --secondary:#8A5CF0;
  --canvas:#F4F1F9; --card:#FFFFFF; --ink:#221E3A; --ink2:#6E6986; --line:#E7E3F0;
  --gray-50:#FAFAFB;
  --correct:#00B28C; --correct-soft:#DDF2EA; --correct-ink:#047857;
  --accent:#FF6B4A; --gold-soft:#FDF0D9; --gold-ink:#9A6300;
  --shadow-soft:0 12px 28px rgb(88 72 200 / .08);
  --shadow-pill:0 2px 8px rgb(88 72 200 / .06);
  --r-field:16px; --r-tile:18px; --r-card:20px; --r-hero:24px;
  --head-h:62px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:'Inter','Noto Sans Tamil',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.font-heading{font-family:'Plus Jakarta Sans','Anek Tamil',system-ui,sans-serif;
  letter-spacing:-.018em;font-weight:700}
.tamil{font-family:'Noto Sans Tamil','Inter',sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.shell{max-width:1152px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.shell{padding:0 24px}}

/* ── Language switch. Without JS both languages show, which is what a crawler
      sees too; picking one hides the other. ─────────────────────────────────*/
html[data-lang="en"] .l-ta{display:none!important}
html[data-lang="ta"] .l-en{display:none!important}
/* Content stacks: the English line, then the Tamil under it. Two languages
   running together on one line is unreadable in either. */
.l-en,.l-ta{display:block}
.l-ta{font-size:.94em}
/* Chrome does not stack. A nav link, a button or a stat label doubled in height
   makes the furniture shout louder than the question, so these show English
   until somebody actually asks for Tamil — and then they show only Tamil. The
   words in here are navigation, not content, so nothing is lost to a crawler. */
.one .l-en,.one .l-ta{display:inline}
html:not([data-lang]) .one .l-ta{display:none}
.langset{display:inline-flex;background:var(--canvas);border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:2px}
.langset button{appearance:none;border:0;background:none;cursor:pointer;
  font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;font-size:12.5px;font-weight:700;
  color:var(--ink2);padding:6px 10px;border-radius:999px;line-height:1;white-space:nowrap}
.langset button:hover{color:var(--brand-dark)}
html:not([data-lang]) .langset button[data-lang-set=""],
html[data-lang="en"] .langset button[data-lang-set="en"],
html[data-lang="ta"] .langset button[data-lang-set="ta"]{background:var(--card);
  color:var(--brand-dark);box-shadow:var(--shadow-pill)}

/* ── First-visit language prompt ─────────────────────────────────────────────
   A port of src/components/Landing/LandingLangPrompt.tsx, which the answer-key
   pages already show a first-time visitor. Same card, same two colours, same
   wording — somebody who meets both pages should meet the same question once,
   not two different ones.

   The two button colours are fixed hex rather than theme tokens, as in the
   original: white labels have to stay legible on both, and the palette's blue
   and coral do not hold that at every weight. */
html.lang-asking{overflow:hidden}
.langask{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:16px;
  background:rgb(34 30 58 / .5);backdrop-filter:blur(4px);overflow-y:auto;
  animation:askin .18s ease-out}
.langask[hidden]{display:none}
@keyframes askin{from{opacity:0}to{opacity:1}}
.langask .card{width:100%;max-width:384px;background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:20px;box-shadow:0 24px 60px rgb(34 30 58 / .3);
  animation:asksheet .22s cubic-bezier(0,0,.2,1)}
@media (min-width:640px){.langask .card{padding:24px}}
@keyframes asksheet{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.langask .brandrow{display:flex;align-items:center;gap:12px}
.langask .brandrow img{height:48px;width:48px;object-fit:contain;flex:0 0 auto}
.langask .brandrow p{margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;
  font-weight:800;color:var(--ink)}
.langask .brandrow p b{color:var(--brand)}
.langask h2{margin:20px 0 0}
.langask h2 .ta{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.langask h2 .en{display:block;font-size:14px;font-weight:600;color:var(--ink2);margin-top:2px}
.langask .opts{display:flex;flex-direction:column;gap:12px;margin:16px 0 0}
.langask .opts button{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;border:0;cursor:pointer;border-radius:14px;padding:16px 20px;text-align:left;
  font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;font-size:20px;font-weight:700;
  color:#fff;transition:filter .15s ease}
.langask .opts button:hover{filter:brightness(1.1)}
.langask .opts button:active{transform:scale(.98)}
.langask .opts .ta-btn{background:#E4572E}
.langask .opts .en-btn{background:#2A5DB0}
.langask .opts svg{flex:0 0 auto}
/* An escape. The app's version has no way out but a choice, which is right for
   a pay page; this one is reached from a search result, and a reader who wants
   the question in both languages should not have to pick one to see it. */
.langask .both{display:block;width:100%;margin:14px 0 0;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:13.5px;color:var(--ink2);text-align:center;padding:6px}
.langask .both:hover{color:var(--brand-dark);text-decoration:underline}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:11px 20px;font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;
  font-size:14px;font-weight:700;line-height:1.25;text-decoration:none!important;
  transition:all .2s ease;border:1px solid transparent;cursor:pointer;text-align:center}
.btn-brand{background:linear-gradient(135deg,var(--secondary) 0%,var(--brand-deep) 100%);color:#fff}
.btn-brand:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:rgb(110 79 232 / .4);color:var(--brand-dark);background:#FBFAFE}
.btn-lg{padding:14px 26px;font-size:15px}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:30;background:rgb(255 255 255 / .95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:var(--head-h)}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand:hover{text-decoration:none}
.brand img{height:36px;width:36px;object-fit:contain}
.brand .nm{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;
  color:var(--ink);white-space:nowrap}
.brand .nm b{color:var(--brand);font-weight:800}
@media (max-width:420px){.brand .nm{display:none}}
.mainnav{display:none;align-items:center;gap:2px}
@media (min-width:980px){.mainnav{display:flex}}
.mainnav a{padding:8px 12px;border-radius:10px;font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;
  font-size:14.5px;font-weight:700;color:var(--ink)}
.mainnav a:hover{background:var(--brand-soft);color:var(--brand-dark);text-decoration:none}
.head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.head-actions .btn{padding:9px 15px;font-size:13.5px}
@media (max-width:639px){.head-actions .btn{display:none}}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
/* Pills, not a slash-separated line: they survive a long question title on a
   phone, and they read as taps rather than as decoration. */
.crumbs{padding:16px 0 0;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.crumbs a,.crumbs .here{display:inline-block;max-width:100%;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:5px 13px;font-size:12.5px;
  color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs a:hover{border-color:rgb(110 79 232 / .4);color:var(--brand-dark);text-decoration:none}
.crumbs .here{background:var(--brand-soft);border-color:transparent;color:var(--brand-dark);
  font-weight:600;max-width:min(100%,32ch)}

/* ── Layout: content + sidebar, the answer-key pages' grid ───────────────── */
.layout{padding:8px 0 40px}
@media (min-width:1024px){
  .layout{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
}
.col-main{min-width:0}
.col-side{margin-top:32px;min-width:0}
@media (min-width:1024px){.col-side{margin-top:0}}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{padding:22px 0 6px}
.hero h1{font-size:clamp(23px,4.2vw,34px);line-height:1.28;margin:12px 0 10px}
.hero .lede{color:var(--ink2);font-size:16.5px;margin:0 0 18px;max-width:62ch}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:var(--brand-soft);
  color:var(--brand-dark);font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;
  font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:999px}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.stats li{background:var(--card);border:1px solid var(--line);border-radius:var(--r-field);
  padding:10px 16px;font-size:13px;color:var(--ink2);box-shadow:var(--shadow-pill)}
.stats b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;
  font-weight:800;color:var(--brand);letter-spacing:-.01em}

.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}

/* ── Scroll reveal, the counterpart of Landing/Reveal.tsx ─────────────────────
   Progressive enhancement: where view() timelines are unsupported the sections
   simply sit there, already visible, which is the correct fallback for content
   whose whole job is to be readable. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:revealin linear both;animation-timeline:view();
      animation-range:entry 10% cover 26%}
  }
}
@keyframes revealin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Somebody who asked for less motion gets the card's final state and nothing
   moving. The React original deliberately ignores this because it is the point
   of that page; here the card is an illustration beside the questions. */
@media (prefers-reduced-motion: reduce){
  .reveal{animation:none!important}
}

.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}

/* ── Scroll reveal, the counterpart of Landing/Reveal.tsx ─────────────────────
   Progressive enhancement: where view() timelines are unsupported the sections
   simply sit there, already visible, which is the correct fallback for content
   whose whole job is to be readable. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:revealin linear both;animation-timeline:view();
      animation-range:entry 10% cover 26%}
  }
}
@keyframes revealin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Somebody who asked for less motion gets the card's final state and nothing
   moving. The React original deliberately ignores this because it is the point
   of that page; here the card is an illustration beside the questions. */
@media (prefers-reduced-motion: reduce){
  .reveal{animation:none!important}
}

/* ── Cards & grids ───────────────────────────────────────────────────────── */
h2.sec{font-size:21px;margin:34px 0 4px}
p.sub{color:var(--ink2);font-size:14.5px;margin:4px 0 0;max-width:62ch}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  margin:18px 0 6px;padding:0;list-style:none}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:18px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:7px;
  transition:all .2s ease}
.tile:hover{border-color:rgb(110 79 232 / .4);transform:translateY(-2px)}
.tile a.t{font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;font-size:16.5px;
  font-weight:700;color:var(--ink);line-height:1.35}
.tile a.t:hover{color:var(--brand-dark);text-decoration:none}
.tile .meta{font-size:13px;color:var(--ink2);margin-top:auto;padding-top:10px;
  display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.tile .meta b{color:var(--brand);font-weight:700}
.chip{display:inline-block;background:var(--gold-soft);color:var(--gold-ink);font-size:11.5px;
  font-weight:700;padding:3px 10px;border-radius:999px;font-family:'Plus Jakarta Sans',sans-serif}

/* ── Listing rows ────────────────────────────────────────────────────────── */
.rows{list-style:none;padding:0;margin:16px 0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-soft)}
.rows li{border-bottom:1px solid var(--line)}
.rows li:last-child{border-bottom:0}
.rows a.r{display:flex;gap:13px;align-items:baseline;padding:14px 16px;color:var(--ink)}
.rows a.r:hover{background:var(--gray-50);color:var(--brand-dark);text-decoration:none}
.rows .n{color:var(--ink2);font-size:13px;flex:0 0 auto;font-variant-numeric:tabular-nums;
  min-width:26px}
.rows .q{flex:1 1 auto;font-size:15.5px;line-height:1.5}
.rows .go{flex:0 0 auto;color:var(--ink2);font-size:15px;align-self:center}

/* ── Sidebar box — the answer-key pages' pattern ─────────────────────────── */
.sidebox{overflow:hidden;border-radius:var(--r-card);border:1px solid var(--line);
  margin-bottom:18px;background:var(--card)}
.sidebox>p{margin:0;border-bottom:1px solid var(--line);padding:11px 16px;
  font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--brand-dark)}
.sidebox ul{list-style:none;margin:0;padding:0}
.sidebox li{border-top:1px solid var(--line)}
.sidebox li:first-child{border-top:0}
.sidebox a{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 16px;font-size:14px;font-weight:500;color:var(--ink)}
.sidebox a:hover{background:var(--gray-50);color:var(--brand-dark);text-decoration:none}
.sidebox a[aria-current]{background:var(--gray-50);color:var(--brand-dark);font-weight:700}
.sidebox a .lbl{min-width:0}
.sidebox a .go{color:var(--ink2);flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:13px}

/* ── A question ──────────────────────────────────────────────────────────── */
article.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px;box-shadow:var(--shadow-soft);margin:16px 0}
@media (min-width:640px){article.q{padding:26px}}
article.q h1,article.q .stem{font-size:clamp(19px,3vw,23px);line-height:1.45;margin:0;
  font-weight:700;font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif}
article.q h1 .l-ta,article.q .stem .l-ta{font-size:.93em;margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--line);font-weight:600}
/* ── Structured stems: match tables, statement lists, assertion/reason ───── */
.stem-body{margin:16px 0 0}
.stem-body>.l-ta{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
table.match{width:100%;border-collapse:collapse;font-size:15px;margin:0}
table.match thead th{font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;font-size:12px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-dark);
  background:var(--brand-soft);padding:9px 12px;text-align:left}
table.match thead th:first-child{border-radius:10px 0 0 10px}
table.match thead th:last-child{border-radius:0 10px 10px 0}
table.match td,table.match tbody th{padding:10px 8px;border-bottom:1px solid var(--line);
  vertical-align:top;text-align:left;line-height:1.5}
table.match tbody th{width:1%;white-space:nowrap;color:var(--brand);font-weight:700;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;padding-right:4px}
table.match tbody tr:last-child td,table.match tbody tr:last-child th{border-bottom:0}
/* Two columns side by side need room. Below that they stack, which is still
   paired because each row keeps its letter and its number together. */
@media (max-width:560px){
  table.match,table.match tbody,table.match tr,table.match td,table.match th{display:block;width:auto}
  table.match thead{display:none}
  table.match tbody tr{border-bottom:1px solid var(--line);padding:8px 0}
  table.match tbody tr:last-child{border-bottom:0}
  table.match td,table.match tbody th{border-bottom:0;padding:3px 0;display:inline-block;
    vertical-align:top}
  table.match tbody th{padding-right:8px}
  table.match td{width:calc(100% - 42px)}
}
ul.stem-list{list-style:none;margin:0;padding:0}
ul.stem-list li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15.5px;
  line-height:1.55}
ul.stem-list li b{flex:0 0 auto;color:var(--brand);font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;min-width:30px}
.stem-ar{display:grid;gap:10px}
.stem-ar p{margin:0;padding:12px 14px;background:var(--canvas);border-left:3px solid var(--brand);
  border-radius:0 10px 10px 0;font-size:15.5px;line-height:1.55}
.stem-lines{font-size:15.5px;line-height:1.7}
.stem-tail{margin:12px 0 0;font-size:14.5px;color:var(--ink2)}

.figs{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}
.figs img{max-height:280px;width:auto;border:1px solid var(--line);border-radius:12px;
  background:#fff;padding:5px;object-fit:contain}
ol.opts{list-style:none;padding:0;margin:18px 0 0}
ol.opts li{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:var(--r-field);padding:13px 15px;margin:0 0 9px;background:var(--card)}
ol.opts li .k{flex:0 0 28px;height:28px;border-radius:9px;background:var(--brand-soft);
  color:var(--brand-dark);font-weight:800;font-size:13px;display:grid;place-items:center;
  font-family:'Plus Jakarta Sans',sans-serif}
ol.opts li .v{flex:1 1 auto;font-size:15.5px;line-height:1.5;min-width:0}
ol.opts li .v .l-ta{color:var(--ink2);font-size:14.5px;margin-top:3px}
ol.opts li.ok{border-color:var(--correct);background:var(--correct-soft)}
ol.opts li.ok .k{background:var(--correct);color:#fff}
ol.opts li .opt-img{display:block;max-height:120px;margin-top:8px;border-radius:10px;background:#fff}
.tick{margin-left:auto;flex:0 0 auto;color:var(--correct-ink);font-weight:700;font-size:12.5px;
  font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;align-self:center;white-space:nowrap}
.verdict{display:flex;align-items:center;gap:13px;margin:18px 0 0;padding:15px 17px;
  background:var(--correct-soft);border-radius:var(--r-field);border:1px solid rgb(0 178 140 / .25)}
.verdict .big{background:var(--correct);color:#fff;width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:17px;flex:0 0 auto}
.verdict .lab{display:block;font-size:11.5px;font-weight:700;color:var(--correct-ink);
  text-transform:uppercase;letter-spacing:.05em;
  font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif}
.verdict .val{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.4;
  margin-top:2px}

/* ── The locked explanation ──────────────────────────────────────────────── */
section.exp{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
section.exp>h2{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink2);
  margin:0 0 10px;font-weight:700}
section.exp p{margin:0 0 10px;font-size:15.5px;line-height:1.68}
.blurred{padding:2px 0 12px;filter:blur(5px);opacity:.45;user-select:none;pointer-events:none}
.blurred span{display:block;height:11px;border-radius:999px;background:var(--ink2);margin:10px 0}
.blurred span:nth-child(1){width:97%}
.blurred span:nth-child(2){width:88%}
.blurred span:nth-child(3){width:93%}
.blurred span:nth-child(4){width:61%}
.unlock{background:var(--brand-soft);border-radius:var(--r-card);padding:20px;margin-top:-8px}
.unlock .ask{margin:0 0 13px;font-size:16.5px;font-weight:700;color:var(--ink);
  font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;line-height:1.4}
.unlock ul{margin:0 0 17px;padding:0;list-style:none;font-size:14.5px;color:#4A3F7A}
.unlock ul li{padding:4px 0 4px 24px;position:relative;line-height:1.5}
.unlock ul li::before{content:"✓";position:absolute;left:0;top:4px;color:var(--brand);
  font-weight:800;font-size:13px}
.unlock .alt{margin:13px 0 0;font-size:13.5px;color:#5A4F8A;line-height:1.55}
.unlock .btn{width:100%}
@media (min-width:480px){.unlock .btn{width:auto}}
.why{list-style:none;padding:0;margin:10px 0 0}
.why li{font-size:14.5px;color:var(--ink2);padding:7px 0 7px 12px;border-left:2px solid var(--line)}
.exp-ta{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}

/* ── Contents box ────────────────────────────────────────────────────────── */
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px 18px;margin:18px 0}
.toc .lab{margin:0 0 10px;font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;font-size:11.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink2)}
.toc ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;
  counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:inline-block;background:var(--canvas);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:600;color:var(--ink)}
.toc a::before{content:counter(toc) ". ";color:var(--brand);font-weight:700}
.toc a:hover{border-color:var(--brand);color:var(--brand-dark);text-decoration:none}

/* ── A named section of a question page ──────────────────────────────────── */
.sec-block{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px;margin:16px 0;box-shadow:var(--shadow-soft);scroll-margin-top:calc(var(--head-h) + 12px)}
@media (min-width:640px){.sec-block{padding:24px 26px}}
.sec-block>h2{font-size:19px;margin:0 0 12px;line-height:1.35}
.answer-line{margin:0;font-size:17px;line-height:1.55}
.answer-line b{color:var(--correct-ink);background:var(--correct-soft);padding:2px 8px;
  border-radius:8px;font-weight:700}

/* ── Facts table ─────────────────────────────────────────────────────────── */
.facts{width:100%;border-collapse:collapse;font-size:14.5px}
.facts th,.facts td{text-align:left;padding:11px 2px;border-bottom:1px solid var(--line);
  vertical-align:top}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.facts th{color:var(--ink2);font-weight:500;width:46%;font-family:inherit}
.facts td{color:var(--ink);font-weight:600}

/* ── FAQ inside a page (the standalone .faq section styles the hub's) ───── */
.faq-inline details{border:1px solid var(--line);border-radius:var(--r-field);margin:0 0 10px;
  overflow:hidden}
.faq-inline details:last-child{margin-bottom:0}
.faq-inline summary{cursor:pointer;padding:14px 16px;
  font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;font-size:15px;font-weight:700;
  color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px;
  align-items:flex-start}
.faq-inline summary::-webkit-details-marker{display:none}
.faq-inline summary::after{content:"+";color:var(--brand);font-size:19px;font-weight:700;
  flex:0 0 auto;line-height:1.2}
.faq-inline details[open] summary::after{content:"\2212"}
.faq-inline details>div{padding:0 16px 14px;font-size:14.5px;color:var(--ink2);line-height:1.65}

/* ── Desktop floating CTA, the counterpart of the mobile sticky bar ──────── */
.deskcta{display:none}
@media (min-width:640px){
  .deskcta{display:inline-flex;position:fixed;right:20px;bottom:20px;z-index:35;
    box-shadow:0 14px 34px rgb(88 72 200 / .32)}
}
@media print{.deskcta{display:none}}

.tags{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 0;padding:0;list-style:none}
.tags li{font-size:12px;color:var(--ink2);background:var(--canvas);border:1px solid var(--line);
  padding:4px 11px;border-radius:999px}

/* ── Pager / prev-next ───────────────────────────────────────────────────── */
.pager{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:22px 0;padding:0;list-style:none}
.pager a,.pager span{display:block;border:1px solid var(--line);background:var(--card);
  border-radius:12px;padding:9px 14px;font-size:14px;font-weight:600;color:var(--ink2);
  min-width:42px;text-align:center}
.pager a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.pager .cur{background:var(--brand);border-color:var(--brand);color:#fff}
.pager .gap{border:0;background:none;padding:9px 2px;min-width:0}
.nextprev{display:grid;gap:12px;grid-template-columns:1fr;margin:20px 0}
@media (min-width:640px){.nextprev{grid-template-columns:1fr 1fr}}
.nextprev a{background:var(--card);border:1px solid var(--line);border-radius:var(--r-field);
  padding:14px 16px;font-size:14.5px;color:var(--ink);line-height:1.45}
.nextprev a:hover{border-color:rgb(110 79 232 / .4);text-decoration:none}
.nextprev a i{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--brand);
  margin-bottom:4px;font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif}

/* ── A sibling question shown whole ──────────────────────────────────────── */
ul.minis{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.mini{border:1px solid var(--line);border-radius:var(--r-card);padding:18px;background:var(--card);
  box-shadow:var(--shadow-pill)}
@media (min-width:640px){.mini{padding:22px}}
/* Inside a question page's "More questions" the cards sit on the card already,
   so they step back to the canvas tint instead of stacking two whites. */
.sec-block .mini{background:var(--canvas);box-shadow:none;border-radius:var(--r-field);padding:16px}
.mini-q{font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;font-size:16px;font-weight:700;
  line-height:1.45;color:var(--ink)}
.mini-q .qn{color:var(--brand);margin-right:7px;font-variant-numeric:tabular-nums}
.mini-q .l-ta{font-weight:600;font-size:.95em;margin-top:6px;color:var(--ink2)}
.mini .stem-body{margin:12px 0 0}
.mini-opts{margin:12px 0 0}
.mini-opts li{padding:9px 12px;margin:0 0 6px;font-size:14.5px;background:var(--card);border-width:1px}
.mini-opts li .k{flex:0 0 24px;height:24px;font-size:12px;border-radius:7px}
.mini-opts li .v{font-size:14.5px}
.mini-opts li .v .l-ta{font-size:13.5px}
.mini-go{margin:12px 0 0;font-size:14px;font-weight:600}
.faq-inline summary h3,.faq summary h3{margin:0;font-size:inherit;font-weight:inherit;
  font-family:inherit;color:inherit;letter-spacing:inherit;display:inline}

section.rel{margin:28px 0}
section.rel h2{font-size:18px;margin:0 0 2px}

/* ── Promo panel ─────────────────────────────────────────────────────────── */
.promo{background:linear-gradient(135deg,var(--secondary) 0%,var(--brand-deep) 100%);
  color:#fff;border-radius:var(--r-hero);padding:26px;margin:28px 0;
  box-shadow:0 18px 40px rgb(88 72 200 / .22)}
.promo h2{margin:0 0 8px;font-size:21px;color:#fff;line-height:1.3}
.promo p{margin:0 0 18px;font-size:15px;opacity:.93;max-width:54ch;line-height:1.6}
.promo .btn{background:#fff;color:var(--brand-deep)}
.promo .btn:hover{background:#F4F1F9;filter:none}

/* ── Features, the answer-key pages' four cards ──────────────────────────── */
.features{border-top:1px solid var(--line);background:var(--card)}
.features .shell{padding-top:48px;padding-bottom:48px}
.features h2{text-align:center;font-size:clamp(20px,3vw,25px);margin:0}
.fgrid{display:grid;gap:16px;grid-template-columns:1fr;margin:30px 0 0;padding:0;list-style:none}
@media (min-width:640px){.fgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.fgrid{grid-template-columns:repeat(4,1fr)}}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px;box-shadow:var(--shadow-soft)}
.fcard .ico{width:44px;height:44px;border-radius:var(--r-tile);background:var(--brand-soft);
  display:grid;place-items:center;font-size:21px;margin-bottom:12px}
.fcard h3{font-size:16px;margin:0 0 5px}
.fcard p{font-size:14px;color:var(--ink2);margin:0;line-height:1.55}
.fcta{display:flex;justify-content:center;margin-top:30px}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line)}
.faq .shell{max-width:768px;padding-top:48px;padding-bottom:48px}
.faq h2{text-align:center;font-size:clamp(20px,3vw,25px);margin:0 0 24px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-field);
  margin:0 0 12px;overflow:hidden}
.faq summary{cursor:pointer;padding:16px 18px;font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;
  font-size:15.5px;font-weight:700;color:var(--ink);list-style:none;display:flex;
  justify-content:space-between;gap:12px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-size:20px;font-weight:700;flex:0 0 auto;line-height:1.2}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 18px 16px;font-size:14.5px;color:var(--ink2);line-height:1.65}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer.site{border-top:1px solid var(--line);background:var(--card)}
footer.site .shell{padding-top:40px;padding-bottom:40px}
.foot-top{display:flex;flex-direction:column;gap:30px}
@media (min-width:640px){.foot-top{flex-direction:row;justify-content:space-between;align-items:flex-start}}
.foot-brand{max-width:26rem}
.foot-brand .row{display:flex;align-items:center;gap:10px}
.foot-brand img{height:32px;width:32px;object-fit:contain}
.foot-brand .nm{font-family:'Plus Jakarta Sans',sans-serif;font-size:14.5px;font-weight:800;color:var(--ink)}
.foot-brand .nm b{color:var(--brand)}
.foot-brand p{margin:12px 0 0;font-size:14px;color:var(--ink2);line-height:1.6}
.foot-follow p.lab{margin:0;font-family:'Plus Jakarta Sans','Anek Tamil',sans-serif;font-size:11.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--ink2)}
.socials{display:flex;gap:10px;margin-top:12px}
.socials a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink2);font-size:15px}
.socials a:hover{border-color:rgb(110 79 232 / .4);background:var(--brand-soft);
  color:var(--brand-dark);text-decoration:none}
.foot-links{margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px}
.foot-links a{color:var(--ink2)}
.foot-note{margin:18px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.6}

/* ── Sticky mobile bar, like the answer-key pages ────────────────────────── */
.stickybar{position:fixed;inset-inline:0;bottom:0;z-index:40;display:flex;gap:10px;
  border-top:1px solid var(--line);background:rgb(255 255 255 / .96);backdrop-filter:blur(8px);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom))}
.stickybar .btn{flex:1;padding:13px 8px;font-size:13.5px}
@media (min-width:640px){.stickybar{display:none}}
@media (max-width:639px){body{padding-bottom:80px}}

.katex{font-size:1.03em}
@media print{.site-head,.stickybar,.promo,.features,.col-side,.faq{display:none}}