/* Layout idea: a calm exam desk. One loud element, the 18/24 pass line, set as a scoreboard; everything else quiet and very legible for readers whose first language may not be English. */
:root{
  --paper:#eef1f5;
  --surface:#ffffff;
  --ink:#14213d;
  --muted:#556078;
  --line:#d6dce6;
  --accent:#c8102e;
  --accent-ink:#ffffff;
  --pass:#17785a;
  --pass-soft:#e2f3ec;
  --fail:#b42318;
  --fail-soft:#fbe7e4;
  --flag:#a15c00;
  --font-display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --radius:10px;
  --step--1:0.875rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:2.2rem; --step-4:clamp(2.4rem,6vw,3.6rem); --step-5:clamp(5rem,16vw,9.5rem);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0d1320; --surface:#151d2e; --ink:#e7ebf2; --muted:#9ba5ba; --line:#2a3550;
    --accent:#ff5468; --accent-ink:#1a0609; --pass:#4cc597; --pass-soft:#12301f; --fail:#ff7b6e; --fail-soft:#3a1714; --flag:#f0a64a;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0d1320; --surface:#151d2e; --ink:#e7ebf2; --muted:#9ba5ba; --line:#2a3550;
  --accent:#ff5468; --accent-ink:#1a0609; --pass:#4cc597; --pass-soft:#12301f; --fail:#ff7b6e; --fail-soft:#3a1714; --flag:#f0a64a;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-0.01em}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
button{font:inherit;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--surface)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:2px;text-decoration:none;font-family:var(--font-display);font-weight:800;font-size:1.5rem;font-stretch:80%}
.brand b{color:var(--accent)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{text-decoration:none;padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:700;font-size:var(--step--1)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);background:var(--paper)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-weight:700;text-decoration:none;transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{min-height:40px;padding:0 14px;font-size:var(--step--1)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* hero */
.hero{padding:48px 0 32px}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.eyebrow{font-weight:700;color:var(--muted);font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.hero h1{font-size:var(--step-4);font-weight:800;font-stretch:85%}
.hero .lede{margin:18px 0 26px;max-width:52ch;color:var(--muted);font-size:var(--step-1)}
.score{display:flex;align-items:flex-end;gap:14px;margin-top:34px}
.score .big{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:var(--step-5);line-height:.82;font-variant-numeric:tabular-nums;letter-spacing:-0.04em}
.score .big .of{color:var(--muted);font-weight:500}
.score .cap{max-width:16ch;font-weight:700;padding-bottom:10px}
.score .cap span{display:block;color:var(--accent);font-family:var(--font-display);font-size:var(--step-1)}
.passline{height:6px;background:linear-gradient(90deg,var(--pass) 0 75%,var(--line) 75% 100%);border-radius:3px;margin-top:14px;max-width:420px;position:relative}
.passline::after{content:"75%";position:absolute;left:75%;top:10px;transform:translateX(-50%);font-size:.75rem;font-weight:700;color:var(--muted)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.sample .tag{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.qtext{font-size:var(--step-1);font-weight:700;line-height:1.35;margin-bottom:16px}
.hint{color:var(--accent);font-weight:700;font-size:var(--step--1);margin:-8px 0 14px}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:2px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;text-align:left;width:100%;color:var(--ink);transition:border-color .12s ease, background .12s ease}
.opt:hover{border-color:var(--muted)}
.opt input{margin:4px 0 0;width:18px;height:18px;accent-color:var(--accent);flex:none}
.opt.selected{border-color:var(--ink)}
.opt.right{border-color:var(--pass);background:var(--pass-soft)}
.opt.wrong{border-color:var(--fail);background:var(--fail-soft)}
.opt .mark{margin-left:auto;font-weight:700;font-size:var(--step--1);flex:none}
.opt.right .mark{color:var(--pass)} .opt.wrong .mark{color:var(--fail)}
.explain{margin-top:16px;padding:14px 16px;border-left:4px solid var(--pass);background:var(--paper);border-radius:0 8px 8px 0}
.explain.bad{border-left-color:var(--fail)}
.explain strong{display:block;margin-bottom:4px}

/* facts */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:22px 20px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0;padding-left:0}
.fact b{display:block;font-family:var(--font-display);font-size:var(--step-3);font-weight:800;font-stretch:80%;font-variant-numeric:tabular-nums;line-height:1}
.fact span{color:var(--muted);font-size:var(--step--1);font-weight:700}

section.block{padding:56px 0 8px}
.block h2{font-size:var(--step-3);font-weight:800;font-stretch:85%;margin-bottom:8px}
.block .sub{color:var(--muted);margin-bottom:24px;max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.chap{display:flex;flex-direction:column;gap:10px;text-decoration:none;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:border-color .15s ease, transform .15s ease}
.chap:hover{border-color:var(--ink);transform:translateY(-2px)}
.chap .n{font-family:var(--font-display);font-weight:800;color:var(--accent);font-size:var(--step-1)}
.chap h3{font-size:var(--step-1);font-weight:700}
.chap .meta{color:var(--muted);font-size:var(--step--1);margin-top:auto}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--pass)}

.history{display:grid;gap:8px}
.hrow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:700;font-size:var(--step--1)}
.pill.pass{background:var(--pass-soft);color:var(--pass)} .pill.fail{background:var(--fail-soft);color:var(--fail)}
.empty{color:var(--muted);padding:16px;border:1px dashed var(--line);border-radius:10px}

/* book */
.book{margin-top:56px;background:var(--ink);color:var(--paper);border-radius:14px;padding:36px;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center}
.book h2{font-size:var(--step-3);font-weight:800;font-stretch:85%;margin-bottom:10px}
.book p{opacity:.85;max-width:52ch}
.book ul{margin:16px 0 0;padding-left:20px;opacity:.9}
.book .cover{aspect-ratio:3/4;max-width:220px;justify-self:center;width:100%;background:var(--accent);color:var(--accent-ink);border-radius:6px 12px 12px 6px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 8px 0 0 rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.35)}
.book .cover b{font-family:var(--font-display);font-weight:800;font-size:2.2rem;font-stretch:75%;line-height:.95}
.book .cover small{font-weight:700;opacity:.9}
.book .soon{display:inline-block;margin-top:20px;padding:8px 14px;border:2px solid var(--paper);border-radius:999px;font-weight:700}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-weight:700;cursor:pointer;font-size:var(--step-1)}
.faq details p{margin-top:10px;color:var(--muted);max-width:65ch}

footer{margin-top:64px;border-top:1px solid var(--line);background:var(--surface);padding:28px 0;color:var(--muted);font-size:var(--step--1)}
footer .wrap{display:grid;gap:8px}

/* test runner */
.runner{padding-top:28px;padding-bottom:40px}
.runbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.runbar .count{font-family:var(--font-display);font-weight:800;font-size:var(--step-2);font-variant-numeric:tabular-nums}
.timer{font-variant-numeric:tabular-nums;font-weight:700;padding:8px 14px;border-radius:999px;border:2px solid var(--line);background:var(--surface)}
.timer.low{border-color:var(--fail);color:var(--fail)}
.layout{display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:start}
.qnav{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.qnav button{aspect-ratio:1;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--step--1);position:relative}
.qnav button.done{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qnav button.cur{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.qnav button.flagged::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--flag)}
.side h3{font-size:var(--step-0);margin-bottom:10px}
.legend{display:grid;gap:4px;color:var(--muted);font-size:var(--step--1);margin:14px 0}
.navrow{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
.flagbtn{border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font-weight:700;font-size:var(--step--1)}
.flagbtn[aria-pressed="true"]{border-color:var(--flag);color:var(--flag)}
.modal{position:fixed;inset:0;background:rgba(10,15,25,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:10}
.modal.open{display:flex}
.modal .card{max-width:440px;width:100%}
.modal h3{font-size:var(--step-2);margin-bottom:10px}
.modal p{color:var(--muted);margin-bottom:20px}

/* results */
.result-head{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:28px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-left:10px solid var(--pass)}
.result-head.fail{border-left-color:var(--fail)}
.result-head .big{font-family:var(--font-display);font-weight:800;font-stretch:75%;font-size:clamp(4rem,12vw,6.5rem);line-height:.85;font-variant-numeric:tabular-nums}
.result-head h2{font-size:var(--step-3);margin-bottom:8px}
.breakdown{display:grid;gap:12px;margin:24px 0}
.bd{display:grid;grid-template-columns:minmax(140px,240px) 1fr auto;gap:14px;align-items:center;font-variant-numeric:tabular-nums}
.review{display:grid;gap:14px}
.ritem{padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.ritem .rq{font-weight:700;margin-bottom:8px}
.ritem .ans{font-size:var(--step--1);display:grid;gap:4px}
.ritem .ans .you.bad{color:var(--fail)} .ritem .ans .you.ok{color:var(--pass)}
.ritem .ex{margin-top:10px;color:var(--muted);font-size:var(--step--1)}
.seg{display:inline-flex;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--muted);padding:8px 14px;font-weight:700;font-size:var(--step--1)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.prose{max-width:68ch;display:grid;gap:14px;padding:40px 0}
.prose h1{font-size:var(--step-4);font-weight:800;font-stretch:85%}
.prose h2{font-size:var(--step-2);margin-top:14px}

@media (max-width:860px){
  .hero .wrap,.layout,.book{grid-template-columns:1fr}
  .facts .wrap{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(3){border-left:0;padding-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .side{order:-1}
  .qnav{grid-template-columns:repeat(12,1fr)}
}
@media (max-width:520px){
  .qnav{grid-template-columns:repeat(8,1fr)}
  .result-head{grid-template-columns:1fr}
  .bd{grid-template-columns:1fr auto}
  .bd .bar{grid-column:1/-1;order:3}
  .book{padding:24px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}

.side-h{font-family:var(--font-display);font-size:var(--step-0);font-weight:700;margin-bottom:10px}
.crumbs{font-size:var(--step--1);color:var(--muted);font-weight:700;margin-bottom:12px}
.crumbs a{color:var(--muted)}
.pagehead{padding:36px 0 8px}
.pagehead h1{font-size:var(--step-4);font-weight:800;font-stretch:85%}
.pagehead .lede{margin-top:14px;max-width:62ch;color:var(--muted);font-size:var(--step-1)}
.pagehead .row{margin-top:20px}
.chapnav{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.chapnav a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:700;font-size:var(--step--1);background:var(--surface)}
.chapnav a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.qa{display:grid;gap:0;border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line);padding:14px 0}
.qa summary{cursor:pointer;font-weight:700}
.qa .a{margin-top:8px;color:var(--ink)}
.qa .x{margin-top:4px;color:var(--muted);font-size:var(--step--1);max-width:68ch}
.practice-wrap{max-width:780px}
.breakdown a{text-decoration:none;font-weight:700}
noscript p{padding:16px;border:1px dashed var(--line);border-radius:10px}
.acct{max-width:860px;padding-bottom:48px}
.acct-card{max-width:560px}
.acct-card h2{font-size:var(--step-2);margin-bottom:8px}
.acct-form{display:grid;gap:10px;margin-top:18px}
.acct-form label{font-weight:700}
.acct-form input[type=email],.acct-form input[inputmode]{font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.acct-form input:focus{outline:3px solid var(--accent);outline-offset:1px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400 !important;color:var(--muted)}
.check input{margin-top:4px;width:18px;height:18px}
.fine{font-size:var(--step--1);color:var(--muted);margin-top:8px}
.note{margin-top:14px;font-weight:700}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.linkbtn.danger{color:var(--fail)}
.acct-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.acct-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 8px}
.acct-stats .fact{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.acct-stats .fact b{display:block;font-family:var(--font-display);font-size:var(--step-3);line-height:1}
.acct-stats .fact span{color:var(--muted);font-size:var(--step--1);font-weight:700}
@media (max-width:640px){.acct-stats{grid-template-columns:repeat(2,1fr)}}
.acct-chart{margin:18px 0}
.acct-chart svg{width:100%;height:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.acct-chart .line{fill:none;stroke:var(--ink);stroke-width:2.5}
.acct-chart .passl{stroke:var(--pass);stroke-dasharray:6 5;stroke-width:1.5}
.acct-chart .lbl{fill:var(--muted);font-size:12px}
.acct-chart .dot{fill:var(--fail)}
.acct-chart .dot.ok{fill:var(--pass)}
.acct-chart figcaption{font-size:var(--step--1);color:var(--muted);margin-top:6px}
.trend{margin:12px 0}
.upsell{margin-top:20px;border:2px solid var(--accent)}
.upsell h3{font-size:var(--step-1);margin-bottom:6px}
.upsell p{color:var(--muted);margin-bottom:12px}
.pp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px}
.book-buy{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.book-buy .soon{margin-top:0}
.book .book-note{font-size:var(--step--1);margin-top:12px;opacity:.75}
.pp-grid h3{font-size:var(--step-1);margin-bottom:6px}
.pp-grid p{color:var(--muted)}
.pp-buy{max-width:560px}
.pp-buy .price{font-family:var(--font-display);font-size:var(--step-4);font-weight:800;margin-bottom:12px}
.pp-buy .price span{font-size:var(--step-0);color:var(--muted);font-weight:500}
@media (max-width:760px){.pp-grid{grid-template-columns:1fr}}