:root{
  --ink:#14171a;--ink2:#2c3136;--mut:#5d636a;--bg:#f5f2ea;--card:#fff;--line:#e3ddd0;
  --green:#0b5d36;--green2:#0e7443;--greenl:#e6f2eb;--yellow:#f6c419;--yellowl:#fff5d1;--red:#b3261e;--redl:#fbecea;--blue:#1d4f9e;
  --r:14px;--shadow:0 1px 2px rgba(20,23,26,.06),0 8px 24px rgba(20,23,26,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.62 "Source Serif 4",Georgia,serif;-webkit-font-smoothing:antialiased}
body.sheet-open{overflow:hidden}
a{color:var(--blue);text-underline-offset:.15em}
img{max-width:100%;display:block}
h1,h2,h3,.brand,.btn,.kicker,.plate,.num,.tag,.abbr,.L,nav a,.crumb,.verdict,.chip,.ask-head,.band b,.mq-k,.plate-h,.count,.score{font-family:Overpass,system-ui,sans-serif}
h1{font-size:clamp(2rem,5.2vw,3.3rem);line-height:1.04;margin:.3rem 0 .8rem;font-weight:900;letter-spacing:-.02em}
h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--yellow) 62%);padding:0 .08em}
h2{font-size:clamp(1.45rem,3vw,2rem);line-height:1.12;margin:0 0 .8rem;font-weight:900;letter-spacing:-.015em}
h3{font-size:1.1rem;margin:.6rem 0 .3rem;font-weight:800}
main{max-width:1120px;margin:0 auto;padding:0 16px 3rem}
main>section{margin:3.2rem 0}
.kicker{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin:0 0 .4rem;display:flex;align-items:center;gap:.5rem}
.plate{display:inline-block;background:var(--green);color:#fff;border-radius:5px;padding:.05rem .45rem;letter-spacing:.06em;box-shadow:inset 0 0 0 2px var(--green),inset 0 0 0 3px #fff}
.lede{font-size:1.14rem;color:var(--ink2);max-width:40rem}
.cite,.small,.crumb,.count{font-size:.88rem;color:var(--mut)}
.crumb a{color:inherit}

/* header */
.top{background:var(--green);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.top-in{max-width:1120px;margin:0 auto;padding:.65rem 16px;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;justify-content:space-between}
.brand{color:#fff;text-decoration:none;font-weight:900;display:flex;align-items:center;gap:.55rem;letter-spacing:-.01em}
.shield{display:inline-grid;place-items:center;width:1.85rem;height:1.85rem;border:2px solid #fff;border-radius:6px;font-size:1rem;background:var(--green2)}
nav{display:flex;flex-wrap:wrap;gap:1rem}nav a{color:#fff;text-decoration:none;font-weight:700;font-size:.93rem;opacity:.92}nav a:hover{opacity:1;text-decoration:underline}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:.72rem 1.25rem;font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.btn.big{background:var(--yellow);color:var(--ink);font-size:1.06rem;padding:.85rem 1.45rem}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost.light{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}

/* photo hero */
.hero.photo{position:relative;margin:1rem 0 0;border-radius:22px;overflow:hidden;min-height:clamp(30rem,72vh,40rem);display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow)}
.hero.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,15,.05) 20%,rgba(10,20,15,.55) 55%,rgba(8,16,12,.88) 100%)}
.hero-in{position:relative;z-index:1;padding:clamp(1.4rem,4vw,3rem);max-width:46rem}
.hero.photo .kicker{color:#ffe18a}.hero.photo .lede{color:#eef2ee}

/* stats band */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.band>div{background:var(--card);padding:1.2rem 1.3rem}
.band b{display:block;font-size:2.2rem;font-weight:900;letter-spacing:-.02em;color:var(--green);line-height:1}
.band span{color:var(--mut);font-size:.95rem}
@media(max-width:700px){.band{grid-template-columns:1fr}}

/* split layout */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split-copy p{color:var(--ink2)}
.ticks{list-style:none;padding:0;margin:1rem 0}
.ticks li{padding-left:1.8rem;position:relative;margin:.5rem 0}
.ticks li::before{content:"";position:absolute;left:0;top:.38rem;width:1.05rem;height:1.05rem;border-radius:4px;background:var(--green);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.3 11.6 2.7 8l1.1-1.1 2.5 2.5 6-6 1.1 1.1z"/></svg>') center/100% no-repeat}
.realtest{background:var(--yellowl);border:1px solid #f0dc8f;border-radius:var(--r);padding:1rem 1.15rem;margin-top:1.4rem}
.realtest h3{margin-top:0}
img.round{border-radius:18px;aspect-ratio:3/2;object-fit:cover;margin-bottom:1.2rem;box-shadow:var(--shadow)}

/* ask box */
.askbox{background:var(--card);border-radius:20px;box-shadow:var(--shadow);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.ask-head{display:flex;gap:.75rem;align-items:center;padding:1rem 1.1rem;background:var(--green);color:#fff}
.ask-head strong{display:block;font-size:1.05rem;font-weight:900}
.ask-head span{font-size:.82rem;opacity:.85;font-weight:600}
.ask-icon{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;background:var(--yellow);color:var(--ink);font-weight:900;font-size:1.3rem;border-radius:50%}
.thread{padding:1rem 1.1rem 0;display:flex;flex-direction:column;gap:.75rem}
.askbox:not(.active) .thread:empty{display:none}
.ex-label{font:900 .7rem Overpass,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:0 0 .4rem;text-align:center}
.example{display:flex;flex-direction:column;gap:.75rem;opacity:.92}
.askbox.big .thread{min-height:0}
.msg{max-width:92%;border-radius:16px;padding:.65rem .9rem;animation:rise .25s ease-out}
.msg p{margin:0}
.msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px;font-family:Overpass,sans-serif;font-weight:600}
.msg.bot{align-self:flex-start;background:var(--bg);border-bottom-left-radius:5px;width:92%}
.msg.bot.uncovered{background:var(--yellowl)}
.msg .a{font-size:1.03rem}
.think{display:flex;align-items:center;gap:.55rem;color:var(--mut);font-family:Overpass,sans-serif;font-weight:700;font-size:.92rem}
.pulse{width:.65rem;height:.65rem;border-radius:50%;background:var(--green);animation:pulse 1s infinite ease-in-out}
@keyframes pulse{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1);opacity:1}}
@keyframes rise{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;padding:.9rem 1.1rem .2rem}
.chip{font-size:.88rem;font-weight:700;background:var(--greenl);color:var(--green);border:1px solid #cfe5d8;border-radius:999px;padding:.42rem .8rem;cursor:pointer;text-align:left;transition:background .12s}
.chip:hover{background:#d5eadd}
.ask-form{display:flex;gap:.5rem;padding:.8rem 1.1rem 1.1rem}
.ask-form input{flex:1;min-width:0;font:inherit;font-size:1rem;padding:.75rem .95rem;border:2px solid var(--line);border-radius:999px;background:#fff;outline:none}
.ask-form input:focus{border-color:var(--green)}
.ask-form button{flex:none;font-family:Overpass,sans-serif;font-weight:900;border:0;border-radius:999px;background:var(--yellow);color:var(--ink);padding:0 1.2rem;cursor:pointer;font-size:1rem}
.ask-form button:disabled{opacity:.5}

/* citation plates (guide-sign style) */
.plates{display:grid;gap:.5rem;margin:.75rem 0 .2rem}
.plate-card{display:block;text-decoration:none;color:#fff;background:var(--green);border-radius:9px;padding:.55rem .8rem .65rem;box-shadow:inset 0 0 0 2px var(--green),inset 0 0 0 3.5px rgba(255,255,255,.85);font-size:.95rem;line-height:1.45}
.plate-card:hover{background:var(--green2)}
.plate-h{display:block;font-size:.72rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#ffe18a;margin-bottom:.15rem}

/* mini quiz inside an answer */
.mini-quiz{margin-top:.8rem;background:#fff;border:2px dashed #d8d1c0;border-radius:12px;padding:.75rem .8rem}
.mq-k{font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 .25rem}
.mq-q{font-weight:600;margin:0 0 .5rem!important}
.mq-opts{display:grid;gap:.35rem}
.mq-fb{margin-top:.55rem!important;font-size:.95rem}.mq-fb.ok{color:var(--green)}.mq-fb.no{color:var(--red)}
.mq-more{display:inline-block;margin-top:.35rem;font-size:.88rem;font-family:Overpass,sans-serif;font-weight:700}

/* floating ask */
.ask-fab{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;align-items:center;gap:.45rem;background:var(--ink);color:#fff;border:0;border-radius:999px;padding:.8rem 1.15rem;font:800 .98rem Overpass,sans-serif;box-shadow:0 10px 26px rgba(0,0,0,.28);cursor:pointer}
.ask-fab span{display:grid;place-items:center;width:1.5rem;height:1.5rem;background:var(--yellow);color:var(--ink);border-radius:5px;font-weight:900}
.ask-sheet{position:fixed;inset:0;z-index:40;background:rgba(10,14,12,.45);display:flex;align-items:flex-end;justify-content:center}
.ask-sheet[hidden]{display:none}
.sheet-in{position:relative;width:min(640px,100%);max-height:92vh;overflow:auto;padding:12px;animation:rise .2s ease-out}
.sheet-close{position:absolute;right:22px;top:22px;z-index:2;width:2rem;height:2rem;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:1.3rem;cursor:pointer}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.2rem}
.step p{color:var(--ink2);margin:.2rem 0 0}
.mark{display:grid;place-items:center;width:2.6rem;height:2.6rem;font:900 1.1rem Overpass,sans-serif;margin-bottom:.4rem}
.mark.diamond{background:var(--yellow);transform:rotate(45deg);border-radius:6px;border:2px solid var(--ink);width:2.2rem;height:2.2rem;margin:.3rem .3rem .7rem}
.mark.octagon{background:#c62828;color:#fff;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.mark.shieldmark{background:var(--green);color:#fff;border-radius:6px 6px 50% 50%/6px 6px 30% 30%}

/* states */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.6rem}
.state{display:flex;flex-direction:column;gap:.2rem;padding:.9rem 1rem;border-radius:12px;border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--ink);font-family:Overpass,sans-serif}
.state .nm{font-weight:800}
.state.live{border:2px solid var(--green);box-shadow:var(--shadow)}
.state.live .abbr{background:var(--green);color:#fff;border-radius:5px;padding:0 .4rem;align-self:flex-start;font-weight:900}
.state.soon{color:var(--mut);background:transparent}
.tag{font-size:.72rem;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.state.live .tag{color:var(--green)}

/* section cards */
.secgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1rem}
.seccard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.seccard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.sec-img{aspect-ratio:16/10;object-fit:cover;width:100%}
.sec-body{display:flex;flex-direction:column;padding:.8rem .95rem 1rem;gap:.1rem}
.sec-body .num{font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.sec-body .t{font-family:Overpass,sans-serif;font-weight:800;font-size:1.05rem;line-height:1.25}
.sec-body .n{font-size:.85rem;color:var(--mut)}

/* page heads + banners */
.pagehead{margin:2.2rem 0 1.4rem!important}
.banner{position:relative;border-radius:20px;overflow:hidden;min-height:17rem;display:flex;align-items:flex-end;color:#fff;margin-top:1rem!important}
.banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(6,14,10,.82))}
.banner-in{position:relative;z-index:1;padding:1.4rem 1.6rem}
.banner-in .crumb,.banner-in .crumb a{color:#dfe7e2}
.banner-in h1{margin:.1rem 0 .2rem}.banner-in p{margin:0}
.toc{position:sticky;top:3.4rem;z-index:5;display:flex;gap:.45rem;overflow-x:auto;padding:.7rem 0;background:var(--bg);scrollbar-width:none}
.toc a{flex:none;font:700 .85rem Overpass,sans-serif;text-decoration:none;color:var(--green);background:var(--greenl);border-radius:999px;padding:.35rem .75rem}
.topic{margin:1.4rem 0!important;scroll-margin-top:6.5rem}
.topic h2{font-size:1.25rem}
.rules{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.rules li{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--yellow);border-radius:10px;padding:.65rem .9rem}
.pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:2rem 0;font-family:Overpass,sans-serif;font-weight:700}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.25rem}
.qlist{padding-left:1.1rem}.qlist li{margin:.45rem 0}
.prose{max-width:42rem}.prose p{margin:0 0 1.1rem}

/* questions + quiz */
.qcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(1.1rem,3vw,1.8rem);box-shadow:var(--shadow);margin:1rem 0}
.qcard.solo h1{font-size:clamp(1.5rem,3.6vw,2.1rem)}
.opts{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.55rem}
.L{display:inline-grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--bg);font-weight:900;margin-right:.7rem;font-size:.85rem}
.opt{display:flex;align-items:center;width:100%;text-align:left;font:inherit;background:#fff;border:2px solid var(--line);border-radius:12px;padding:.7rem .85rem;cursor:pointer;color:var(--ink);transition:border-color .12s,transform .12s}
.opt:hover:not(:disabled){border-color:var(--ink);transform:translateX(2px)}
.opt.right{border-color:var(--green);background:var(--greenl)}.opt.right .L{background:var(--green);color:#fff}
.opt.wrong{border-color:var(--red);background:var(--redl)}.opt.wrong .L{background:var(--red);color:#fff}
.opt:disabled{cursor:default}
.reveal{margin-top:.6rem}
.reveal summary{cursor:pointer;font-family:Overpass,sans-serif;font-weight:800;color:var(--blue)}
.ans{font-size:1.1rem}
.quizbar{display:flex;align-items:center;gap:.8rem;margin:.4rem 0 .2rem}
.progress{flex:1;height:.55rem;background:var(--line);border-radius:1rem;overflow:hidden}.progress span{display:block;height:100%;background:var(--green);transition:width .3s}
.count{font-weight:700;white-space:nowrap}
.q{font-size:clamp(1.25rem,3vw,1.6rem);line-height:1.25;margin:.2rem 0}
.feedback{border-top:1px solid var(--line);margin-top:1rem;padding-top:.9rem;animation:rise .2s ease-out}
.verdict{font-weight:900;font-size:1.1rem;margin:0 0 .3rem}.feedback.ok .verdict{color:var(--green)}.feedback.no .verdict{color:var(--red)}
.result{text-align:center}
.score{width:11rem;height:11rem;margin:0 auto .6rem;position:relative}
.score svg{width:100%;height:100%;transform:rotate(-90deg)}
.score b{position:absolute;inset:0;display:grid;place-items:center;font-size:2.6rem;font-weight:900}
.result .verdict-big{font:900 1.5rem Overpass,sans-serif;margin:.2rem 0}
.result.pass .verdict-big{color:var(--green)}.result.fail .verdict-big{color:#9a6b00}
.bysec{display:grid;gap:.45rem;text-align:left;margin:1.2rem 0}
.bysec .row{display:grid;grid-template-columns:minmax(0,1fr) 7rem 2.6rem;gap:.6rem;align-items:center;font-size:.92rem}
.bysec .bar{height:.5rem;background:var(--line);border-radius:1rem;overflow:hidden}.bysec .bar span{display:block;height:100%;background:var(--green)}
.bysec .row.weak .bar span{background:var(--yellow)}

/* footer */
.foot{border-top:1px solid var(--line);color:var(--mut);font-size:.9rem;margin-top:2rem}
.foot-in{max-width:1120px;margin:0 auto;padding:1.6rem 16px 5rem}

@media(min-width:861px){.thread{max-height:34rem;overflow-y:auto}}
.ask-sheet .thread{max-height:58vh;overflow-y:auto}
@media(max-width:700px){.hero.photo::after{background:linear-gradient(180deg,rgba(8,16,12,.35) 0%,rgba(8,16,12,.6) 40%,rgba(8,16,12,.9) 100%)}}
.hero.photo .kicker{text-shadow:0 1px 2px rgba(0,0,0,.5)}
.toc{flex-wrap:nowrap}
.mark.diamond{transform:none;border:0;border-radius:0;width:2.8rem;height:2.8rem;margin:0 0 .4rem;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--yellow);box-shadow:none}