/* v35 home: neat top bar, hero question card, tool grid. Colours come from shell.css (ink + cool grey). */
.h-w{max-width:1120px;margin:0 auto;padding-inline:20px}
.h-narrow{max-width:780px}
.h-hero{padding:56px 0 40px}
.h-hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.h-hgrid>*{min-width:0}
.h-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13.5px;color:var(--mute);margin-bottom:18px}
.h-pill b{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.h-hero h1{font-family:var(--p-display);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-size:clamp(34px,4.6vw,58px);margin:0;text-wrap:balance}
.h-hero mark,.h-sec mark{background:linear-gradient(transparent 62%,var(--hl) 62% 92%,transparent 92%);color:inherit;padding:0 2px}
.h-lead{color:var(--mute);font-size:18px;max-width:46ch;margin:18px 0 26px}
.h-cta{display:flex;gap:12px;flex-wrap:wrap}
.h-search{display:flex;align-items:center;gap:10px;margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 6px 6px 14px;max-width:480px}
.h-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);outline:0;padding:8px 0}
.h-search button{border:0;background:var(--az);color:#fff;border-radius:10px;padding:10px 16px;font:600 15px var(--p-body);cursor:pointer}
.h-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.h-chips a{font-size:13.5px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--mute);background:#fff;text-decoration:none}
.h-chips a:hover{border-color:var(--ink);color:var(--ink)}
.h-q{background:#fff;border:1.5px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--az);padding:22px}
.h-qm{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);margin-bottom:12px;gap:8px;flex-wrap:wrap}
.h-q p{font:600 18px/1.4 var(--p-display);margin:0 0 16px}
.h-opt{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bgc);color:var(--ink);margin-bottom:8px;font:inherit;cursor:pointer;transition:border-color .15s}
.h-opt:hover{border-color:var(--ink)}
.h-opt span{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.h-opt.right{background:var(--okbg);border-color:var(--ok)}
.h-opt.right span{background:var(--ok);border-color:var(--ok);color:#fff}
.h-opt.wrong{background:var(--nobg);border-color:var(--no)}
.h-opt.wrong span{background:var(--no);border-color:var(--no);color:#fff}
.h-fb{font-size:14px;color:var(--mute);min-height:44px;margin-top:6px}
.h-strip{border-block:1px solid var(--line);background:#fff}
.h-stats{display:grid;grid-template-columns:repeat(4,1fr)}
.h-stats div{padding:20px 12px;border-left:1px solid var(--line)}
.h-stats div:first-child{border-left:0}
.h-stats b{display:block;font:700 28px var(--p-display);letter-spacing:-.02em}
.h-stats span{font-size:14px;color:var(--mute)}
.h-sec{padding:64px 0}
.h-tight{padding-top:0}
.h-sh{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.h-sh h2{font:700 clamp(26px,3vw,36px)/1.12 var(--p-display);letter-spacing:-.02em;margin:0;text-wrap:balance}
.h-sh p{margin:8px 0 0;color:var(--mute);max-width:52ch}
.h-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.h-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.h-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.h-ic{width:42px;height:42px;border-radius:12px;background:var(--az-tint);color:var(--ink);display:grid;place-items:center}
.h-card h3{font:700 20px var(--p-display);margin:0;letter-spacing:-.01em}
.h-card p{margin:0;color:var(--mute);font-size:15px}
.h-go{margin-top:auto;font-weight:600;font-size:14.5px;padding-top:6px}
.h-subj{display:flex;flex-wrap:wrap;gap:10px}
.h-subj a{padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:500;font-size:15px;text-decoration:none;color:var(--ink)}
.h-subj a:hover{border-color:var(--ink)}
.h-band{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px}
.h-band h2{font:700 26px/1.15 var(--p-display);margin:0 0 10px;letter-spacing:-.02em}
.h-band p{margin:0 0 18px;color:var(--mute);max-width:60ch}
.h-band ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px;font-size:15px}
.h-band li:before{content:"\2713";font-weight:700;margin-right:10px}
#faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:10px}
#faq summary{font-weight:600;cursor:pointer}
#faq details p{margin:10px 0 0;color:var(--mute)}
@media(max-width:900px){
 .h-hero{padding:32px 0 28px}
 .h-hgrid{grid-template-columns:1fr;gap:34px}
 .h-grid{grid-template-columns:1fr 1fr}
 .h-stats{grid-template-columns:1fr 1fr}
 .h-stats div:nth-child(3){border-left:0}
 .h-stats div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:560px){
 .h-grid{grid-template-columns:1fr}
 .h-q{box-shadow:5px 5px 0 var(--az)}
 .h-sec{padding:44px 0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.h-hero h1{color:var(--az)}
.h-hero h1 mark{color:var(--az)}