/* NCERT TRAPS — storefront design system
   Brand: ink black, bone white, NEET red. Editorial, dense, confident.
   No framework, no build step. */

:root{
  /* Light, clinical ground. Two reasons: the cover is black and red, so a dark
     page hid the product; and heavy red raises anxiety in students who are
     already frightened of this exam, while blue-green reads as calm and
     credible.

     The colour system carries meaning rather than decoration:
       teal / green  = correct, safe, go
       red           = the trap, the wrong option, the thing to avoid
     Same logic as the exam palette, and the same logic as the book. */
  --ink:#EEF3F1;          /* page ground - deepened from #F7F9F8, which sat only
                             dE 2.4 from white, so a white card could not lift
                             off the page and existed by its border alone. The
                             separation is now dE 5.0. One step further failed
                             WCAG AA on --dim. */
  --ink-2:#FFFFFF;        /* raised surface     */
  --ink-3:#E4ECE9;        /* hover surface      */
  --line:#CFDBD7;         /* hairline           */
  --bone:#111F1C;         /* primary text       */
  --muted:#46564F;        /* secondary text     */
  --dim:#586862;          /* tertiary text - clears WCAG AA on the deeper ground */

  --brand:#0E5C55;        /* trust, medicine, "go"   */
  --brand-lift:#12766D;
  --brand-soft:#DCE9E6;

  --red:#C0271A;          /* reserved for traps and errors */
  --red-lift:#A8200F;
  --red-soft:#F9E5E1;

  /* Third semantic: how HARD a question is, which is not the same as being
     wrong and must not wear the trap colour. Gold was tried and rejected —
     under deuteranopia it lands dE 4 from --red, i.e. indistinguishable.
     This indigo holds dE >= 50 from both --brand and --red in normal,
     deuteranopic and protanopic vision. */
  --hard:#334EA0;
  --hard-soft:#E2E6F5;

  --ok:#1F6B45;
  --gold:#A97A15;

  /* Two colours have to be named separately from the palette above, because
     a single token cannot do both jobs once there is a dark theme.

     --brand and --red are used BOTH as a background with white on top and as
     a text colour on the page. In dark mode those pull in opposite
     directions: text has to get lighter to stay readable, but a background
     that gets lighter can no longer carry white text. So the dark theme
     lightens --brand and --red, and --on-brand / --on-red say what goes ON
     them - white today, near-black in the dark theme. Every rule that puts
     text on a brand-coloured fill reads these rather than hard-coding #fff. */
  --on-brand:#fff;
  --on-red:#fff;

  /* Surfaces that are not simply "the page" or "a card", and so cannot be
     derived from --ink: the translucent sticky header and bottom bar, the
     white backing behind a scan of a printed page, and the one band that is
     ink-black in BOTH themes. --band is not --bone: --bone is the text
     colour, and in the dark theme text is nearly white, which would have
     turned the chapter strip into a white band with white writing on it. */
  --head-bg:rgba(238,243,241,.92);
  --bar-bg:rgba(255,255,255,.97);
  --paper:#fff;
  --band:#111F1C;

  /* Shadows have to change with the theme too. A dark shadow on a dark page
     is not a soft one, it is an invisible one. */
  --shadow:rgba(17,31,28,.22);
  --shadow-soft:rgba(17,31,28,.10);
  --lift:rgba(14,92,85,.12);

  --display:'Literata',Georgia,'Times New Roman',serif;
  --body:'Literata',Georgia,'Times New Roman',serif;
  --ui:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wrap:1140px; --r:4px;
}
/* ------------------------------------------------------------------ *
   The dark theme
 * ------------------------------------------------------------------ *

   One block, not two. The obvious way to write this is a
   prefers-color-scheme media query AND a [data-theme] rule, but that means
   keeping two copies of thirty colours in step forever, and they drift. So
   the attribute is the single switch, and a short script in <head> sets it
   from the saved choice or, failing that, from the device setting, before
   the first paint. With scripting off the site stays light - which is a
   preference not being honoured, not a page that fails to work.

   Every value below was picked against this ground, not converted from the
   light one. Text clears WCAG AA; the three semantic colours keep their
   meaning (teal = correct, red = the trap, indigo = hard) and stay apart
   from each other under deuteranopia, which is what the light palette was
   built around too. */
:root[data-theme="dark"]{
  color-scheme:dark;            /* dark scrollbars, form controls, caret */

  /* Neutral, deliberately. The first version of this theme carried the
     brand's green through the greys - ground, cards, hairlines, body text -
     and the whole screen read as green rather than as dark. The colour now
     belongs to the accents only: teal where something is right, red where
     something is a trap. The surfaces are grey and get out of their way. */
  --ink:#101113;          /* page ground - neutral near-black */
  --ink-2:#1A1B1D;        /* raised surface     */
  --ink-3:#232528;        /* hover surface      */
  --line:#303336;         /* hairline           */
  --bone:#ECEDEE;         /* primary text   - 14.9:1 */
  --muted:#ADB1B5;        /* secondary text -  8.6:1 */
  --dim:#8E9296;          /* tertiary text  -  6.1:1 */

  /* Lightened, because on this ground the light theme's deep teal is barely
     a colour at all. White can no longer sit on it, which is what --on-brand
     is for.

     Muted rather than mint. The first dark accent was a bright #4FD3C0,
     which on a neutral near-black ground glowed - a sales page for an exam
     book should not look like a terminal. This is the same hue with the
     saturation taken out of it: 6.8:1 as text on the ground and 6.8:1 the
     other way round for the dark text that sits on the buttons, so muting it
     cost nothing in readability. */
  --brand:#6BA69C;
  --brand-lift:#7FB8AE;
  --brand-soft:#18211F;   /* still a teal tint: it is the brand's own fill */
  --on-brand:#101214;

  --red:#FF7A66;
  --red-lift:#FF9683;
  --red-soft:#2F1B17;
  --on-red:#1A1412;

  --hard:#8AA0F0;
  --hard-soft:#1B2340;

  --ok:#5FCF95;
  --gold:#D9AE55;

  --head-bg:rgba(16,17,19,.90);
  --bar-bg:rgba(26,27,29,.97);
  --band:#08090A;         /* darker than the page, so it is still a band */
  /* --paper stays white: it backs photographs of printed pages, and paper
     is white in the dark as well. */

  --shadow:rgba(0,0,0,.6);
  --shadow-soft:rgba(0,0,0,.45);
  --lift:rgba(107,166,156,.26);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* the header is sticky, so anything jumped to must clear it */
[id]{scroll-margin-top:72px}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,6vw,3.9rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:-.01em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin:.34em 0}
hr{border:0;border-top:1px solid var(--line);margin:44px 0}
::selection{background:var(--red);color:var(--on-red)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
section{padding:clamp(48px,7vw,86px) 0}
.section-tight{padding:clamp(30px,4vw,52px) 0}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--red);color:var(--on-red);padding:10px 16px;border-radius:var(--r)}
:focus-visible{outline:2px solid var(--red-lift);outline-offset:3px}

.eyebrow{font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.eyebrow--plain::after{display:none}

.site-head{position:sticky;top:0;z-index:50;background:var(--head-bg);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:22px;height:62px}
.brand{font-family:var(--ui);font-weight:800;font-size:1.02rem;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.brand span{color:var(--red)}
.nav{margin-left:auto;display:flex;gap:24px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:600;font-family:var(--ui)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--bone)}
/* .nav a out-specifies .btn, which left the header CTA with muted text
   on the teal fill and made it read as disabled. */
.nav a.btn{color:var(--on-brand)}
.nav a.btn:hover{color:var(--on-brand)}
@media(max-width:720px){.nav{gap:15px}.nav a:not(.btn):not(.keep){display:none}}

.btn{display:inline-block;background:var(--brand);color:var(--on-brand);text-decoration:none;
  font-family:var(--ui);font-weight:700;font-size:.97rem;padding:15px 32px;
  border-radius:var(--r);border:0;cursor:pointer;transition:background .15s,transform .08s;text-align:center}
.btn:hover{background:var(--brand-lift)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn--ghost{background:var(--ink-2);color:var(--brand);border:1px solid var(--line);font-weight:600}
.btn--ghost:hover{background:var(--ink-3);border-color:var(--brand)}
.btn--sm{padding:10px 20px;font-size:.86rem}
.btn--block{display:block;width:100%}

.hero{padding:clamp(38px,6vw,74px) 0 clamp(40px,6vw,72px);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(28px,5vw,62px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero-art{order:-1;max-width:330px;margin:0 auto}}
.hero h1{margin-bottom:.34em}
.hero h1 em{font-style:normal;color:var(--brand)}
.lede{font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--muted);max-width:52ch}
.hero-art img{border-radius:var(--r);box-shadow:0 18px 48px var(--shadow)}

.buybox{margin-top:26px;padding:22px 24px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r)}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.price{font-family:var(--ui);font-weight:800;font-size:2.35rem;letter-spacing:-.03em}
.price-was{color:var(--dim);text-decoration:line-through;font-size:1.05rem}
.price-off{background:var(--red);color:var(--on-red);font-family:var(--ui);font-weight:700;font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:2px}
.price-note{color:var(--dim);font-size:.87rem;margin:0 0 16px}
.buy-actions{display:flex;gap:12px;flex-wrap:wrap}
.buy-actions .btn{flex:1 1 200px}
.trust{display:flex;flex-wrap:wrap;gap:6px 20px;margin:16px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.85rem}
.trust li{display:flex;align-items:center;gap:7px;margin:0}
.trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--ink-2);padding:24px 20px;text-align:center}
.stat b{display:block;font-family:var(--ui);font-weight:800;font-size:1.85rem;letter-spacing:-.02em}
.stat span{display:block;color:var(--dim);font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
/* four stats must never orphan onto a half-empty row */
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:360px){.stats{grid-template-columns:1fr}}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.card h3{margin-bottom:.45em}
.card p:last-child{margin-bottom:0}

.qtypes{list-style:none;padding:0;margin:0;counter-reset:q;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.qtypes li{counter-increment:q;padding:18px 22px;margin:0;display:flex;gap:15px;align-items:baseline;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.qtypes li::before{content:counter(q,decimal-leading-zero);font-family:var(--ui);font-weight:700;color:var(--brand);font-size:.86rem;flex:0 0 auto}
.qtypes small{display:block;color:var(--dim);font-size:.8rem}

.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.shots figure{margin:0}
.shots img{border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.shots figcaption{color:var(--dim);font-size:.83rem;margin-top:9px;line-height:1.45}

.pull{border-left:3px solid var(--brand);padding:2px 0 2px 22px;margin:30px 0;font-size:1.12rem}
.pull cite{display:block;margin-top:9px;font-style:normal;color:var(--dim);font-size:.88rem}

.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;font-family:var(--ui);font-weight:600;font-size:1rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--brand);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .answer{color:var(--muted);padding:0 8px 18px 0}
.faq .answer p:last-child{margin-bottom:0}

.field{margin:0 0 16px}
.field label{display:block;font-size:.84rem;font-weight:600;color:var(--muted);margin-bottom:6px}
.field .req{color:var(--red)}
input,select,textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  color:var(--bone);font-family:var(--body);font-size:1rem;padding:12px 14px}
input:focus,select:focus,textarea:focus{border-color:var(--dim)}
textarea{min-height:110px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row{grid-template-columns:1fr}}
.hint{color:var(--dim);font-size:.81rem;margin:6px 0 0}
.msg{padding:13px 16px;border-radius:var(--r);margin:0 0 18px;font-size:.92rem;display:none}
.msg.show{display:block}
/* These kept the pale text of the dark theme the site started with, which on
   the light ground left every error message at 1.9:1 - a checkout failure or
   an expired test was written in pink on near-white. Measured: 6.0:1 and
   6.3:1, comfortably past WCAG AA. */
.msg--err{background:var(--red-soft);border:1px solid var(--red);color:var(--red-lift)}
.msg--ok{background:var(--brand-soft);border:1px solid var(--brand);color:var(--brand)}

/* Tappable one-word answers. A dropdown is two taps and a scroll on a phone;
   these are one tap, which is the whole difference between a question that
   gets answered after payment and one that gets ignored. */
.chips{border:0;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{padding:0;margin:0 0 10px;font-family:var(--ui);font-weight:700;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);width:100%}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips label{display:inline-block;padding:9px 16px;border:1px solid var(--line);
  border-radius:999px;background:var(--ink-2);font-family:var(--ui);font-size:.88rem;
  font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.chips label:hover{border-color:var(--brand)}
.chips input:checked+label{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.chips input:focus-visible+label{outline:2px solid var(--red-lift);outline-offset:3px}

/* Mistake-notebook rows. A group and its Drill button, side by side on a
   laptop and stacked on a phone - never in a table, where the button would
   end up behind a horizontal scroll. */
.nb-row{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:13px 0;border-top:1px solid var(--line)}
.nb-what{flex:1 1 200px;min-width:0}
.nb-row .btn{flex:0 0 auto}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.93rem}
/* the min-width exists so wide data tables scroll inside their container;
   applied to every table it pushed the small checkout summary off-screen */
.table-scroll table{min-width:440px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
th{font-family:var(--ui);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);background:var(--ink-2)}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

.tag{display:inline-block;background:var(--brand);color:var(--on-brand);font-family:var(--ui);font-weight:700;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:2px}
.tag--quiet{background:var(--ink-3);color:var(--muted)}
.tag--ok{background:var(--brand-soft);color:var(--ok)}

.prose{color:var(--muted)}
.prose h2{margin-top:1.7em;font-size:1.35rem;color:var(--bone)}
.prose h2:first-child{margin-top:0}
.prose strong{color:var(--bone)}
.prose a{color:var(--red-lift)}

.site-foot{border-top:1px solid var(--line);background:var(--ink-3);padding:52px 0 40px;margin-top:20px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}
.site-foot h4{font-family:var(--ui);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:.45em 0}
/* 16px-tall links stacked thirteen deep on a phone is a mis-tap generator,
   and one of them is the page a paying student uses most. */
.site-foot a{color:var(--muted);text-decoration:none;font-size:.9rem;
  display:inline-block;padding:6px 0;min-height:24px}
.site-foot a:hover{color:var(--bone)}
.colophon{border-top:1px solid var(--line);margin-top:36px;padding-top:22px;color:var(--dim);
  font-size:.83rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.muted{color:var(--muted)}
.dim{color:var(--dim);font-size:.88rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.prose a{color:var(--brand-lift);text-underline-offset:2px}
@media print{.site-head,.site-foot,.btn{display:none}body{background:#fff;color:#000}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============================================================ additions ==
   Chapter coverage, credibility band, and the sticky mobile buy bar. */

.chapters{list-style:none;padding:0;margin:0;counter-reset:ch;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.chapters li{counter-increment:ch;margin:0;padding:14px 18px;
  display:flex;gap:14px;align-items:baseline;font-size:.95rem;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.chapters li::before{content:counter(ch);font-family:var(--ui);font-weight:800;
  color:var(--dim);font-size:.78rem;min-width:1.4em;flex:0 0 auto;font-variant-numeric:tabular-nums}
.chapters li:hover{background:var(--ink-3)}

/* credibility band */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.cred{display:flex;gap:14px;align-items:flex-start}
.cred-mark{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--brand-soft);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);
  font-family:var(--ui);font-weight:700;font-size:.8rem}
.cred b{display:block;font-family:var(--ui);font-size:.97rem;margin-bottom:2px}
.cred span{color:var(--dim);font-size:.86rem;line-height:1.5}

/* sticky buy bar - phones only, appears once the hero price scrolls away */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:14px;align-items:center;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:var(--bar-bg);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  box-shadow:0 -6px 24px var(--shadow-soft)}
.buybar .bb-price{font-family:var(--ui);font-weight:800;font-size:1.15rem;white-space:nowrap}
.buybar .bb-was{color:var(--dim);text-decoration:line-through;font-size:.82rem;margin-left:6px}
.buybar .btn{flex:1;padding:13px 18px}
@media(max-width:760px){.buybar.on{display:flex}body.has-buybar{padding-bottom:74px}}

/* section rhythm */
.band{background:var(--ink-2);border-block:1px solid var(--line)}
.lead-in{max-width:60ch;color:var(--muted);margin-bottom:28px}

/* ---------- WhatsApp float ---------- */
.wa{position:fixed;right:16px;bottom:16px;z-index:55;display:flex;align-items:center;gap:9px;
  background:#25D366;color:#062511;text-decoration:none;font-family:var(--display);font-weight:700;
  font-size:.88rem;padding:12px 16px;border-radius:40px;box-shadow:0 10px 26px rgba(0,0,0,.5)}
.wa:hover{filter:brightness(1.06)}
.wa svg{width:20px;height:20px;flex:0 0 auto}
@media(max-width:760px){.wa{bottom:86px;padding:12px;border-radius:50%}.wa span{display:none}}

/* ---------- reviews ---------- */
.rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.stars{color:var(--gold);font-size:1.15rem;letter-spacing:2px}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.rev{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.rev-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px}
.rev-top b{font-family:var(--display);font-size:.97rem}
.rev .stars{font-size:.92rem}
.rev p{color:var(--muted);margin:0 0 10px;font-size:.95rem}
.rev-meta{color:var(--dim);font-size:.79rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rev-verified{color:var(--ok)}
.rev-verified::before{content:"\2713 ";font-weight:700}

/* star picker */
.starpick{display:flex;gap:4px;direction:rtl;justify-content:flex-end}
.starpick input{position:absolute;opacity:0;width:0;height:0}
.starpick label{font-size:1.9rem;line-height:1;color:var(--dim);cursor:pointer;padding:0 2px;margin:0}
.starpick input:checked ~ label,
.starpick label:hover, .starpick label:hover ~ label{color:var(--gold)}

/* ---------- sample chapter offer ---------- */
.offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:36px;align-items:center}
@media(max-width:820px){.offer{grid-template-columns:1fr;gap:24px}}
.offer-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.offer-form input{flex:1 1 220px}
.offer-form .btn{flex:0 0 auto}

/* ---------- pricing tiers ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:18px;align-items:stretch}
.plan{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;display:flex;flex-direction:column}
.plan--best{border-color:var(--brand);border-width:2px;position:relative}
.plan--best::before{content:"Best value";position:absolute;top:-11px;left:24px;
  background:var(--brand);color:var(--on-brand);font-family:var(--ui);font-weight:700;
  font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;padding:4px 10px;border-radius:2px}
.plan h3{font-family:var(--ui);font-size:1.02rem;margin:0 0 3px}
.plan .sub{color:var(--dim);font-size:.84rem;margin:0 0 16px}
.plan .amt{font-family:var(--ui);font-weight:700;font-size:2.1rem;letter-spacing:-.03em;
  line-height:1;margin:0 0 4px}
.plan .amt small{font-size:.86rem;font-weight:500;color:var(--dim);letter-spacing:0}
.plan .was{color:var(--dim);text-decoration:line-through;font-size:.9rem;margin:0 0 18px}
.plan ul{list-style:none;padding:0;margin:0 0 22px;flex:1}
.plan li{position:relative;display:block;padding-left:26px;margin:.55em 0;
  font-size:.93rem;line-height:1.5;color:var(--muted)}
/* a dash meant nothing either way; a tick and a cross cannot be misread */
.plan li::before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--brand);font-weight:700;font-family:var(--ui);font-size:.95rem}
.plan li.no{color:var(--dim)}
.plan li.no::before{content:"\2715";color:var(--dim);font-weight:600}
/* struck price vs a plain note - reusing .was struck the note through */
.plan .terms{color:var(--dim);font-size:.86rem;margin:0 0 18px}
.plan .btn{width:100%}

/* A button that reads as a link — used for "Not you?" beside the remembered
   access note, where a full button would shout louder than the action needs. */
.linkish{
  background:none;border:0;padding:0;margin-left:6px;
  font:inherit;color:var(--brand);text-decoration:underline;cursor:pointer;
}
.linkish:hover{color:var(--brand-lift)}

/* Diagram questions carry a figure. It is the question, not decoration: the
   stem says "the cell shown", so it has to be legible at phone width and it
   must not push the options below the fold on a small screen. A white plate
   keeps the line art readable when the page is in dark mode. */
.q-fig{display:block;max-width:100%;height:auto;margin:12px 0 6px;
  background:var(--paper);border:1px solid var(--e-line,#d7d2c8);border-radius:4px;
  padding:8px;box-sizing:border-box}
@media (max-width:640px){.q-fig{padding:5px}}
/* With a real figure above it the caption is a caption, not the dashed
   placeholder box it used to be when there was nothing to caption. */
.q-fig + .e-cap, .q-fig + .ln-pg{display:block;border:0;padding:0;margin:0 0 10px;
  font-size:.86rem;font-style:italic}

/* ---------- the light / dark switch ---------- */
/* Two icons stacked in the same box, one shown at a time, so the button never
   changes width as it is pressed and the header does not twitch. */
.theme-btn{
  flex:0 0 auto;width:36px;height:36px;padding:0;margin-left:-6px;
  display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  color:var(--muted);
}
.theme-btn:hover{color:var(--bone);background:var(--ink-3);border-color:var(--brand)}
.theme-btn svg{grid-area:1/1;width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round}
.theme-moon{fill:currentColor;stroke:none}
/* Light theme: offer the moon. Dark theme: offer the sun. The icon shows what
   pressing it will GIVE you, not what you are already looking at - the other
   way round is the single most common complaint about these buttons. */
.theme-sun{display:none}
:root[data-theme="dark"] .theme-sun{display:block}
:root[data-theme="dark"] .theme-moon{display:none}
@media(max-width:760px){.theme-btn{margin-left:0}}