/* Road Exam — home page components (loaded only by index.html; builds on site.css tokens) */

.skip-link{position:absolute;inset-inline-start:var(--space-4);top:-48px;z-index:100;background:var(--fg);color:var(--bg);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);transition:top var(--fast) var(--ease)}
.skip-link:focus{top:var(--space-2)}

.hm-section{padding-block:var(--space-8)}
.hm-head{max-width:52ch;margin-bottom:var(--space-6)}
.hm-head p.lead{margin-top:var(--space-3)}
.hm-center{text-align:center;margin-inline:auto}

/* ---------- hero ---------- */
.hero2{padding-block:var(--space-8) var(--space-7);background:
  radial-gradient(900px 380px at 85% -10%, var(--accent-soft), transparent 70%),
  var(--bg)}
.hero2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-8);align-items:center}
.hero2 h1{font-size:clamp(30px,4.6vw,46px);line-height:1.3}
.hero2 h1 em{font-style:normal;color:var(--accent)}
.hero2 .lead{margin-top:var(--space-4);max-width:54ch}
.hero2-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.hero2-trust{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:var(--space-5) 0 0;padding:0;list-style:none;color:var(--muted);font-size:var(--fs-sm)}
.hero2-trust li{display:flex;align-items:center;gap:var(--space-2)}
.hero2-trust li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--success);flex:none}

/* live exam mock-up */
.mock{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);overflow:hidden}
.mock-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);background:var(--fg-soft)}
.mock-title{font-size:var(--fs-sm);font-weight:600}
.mock-timer{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-h3);font-variant-numeric:tabular-nums;color:var(--fg);direction:ltr}
.mock-timer.low{color:var(--danger)}
.mock-body{padding:var(--space-5)}
.mock-q{font-weight:600;line-height:1.8}
.mock-opts{display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.mock-opt{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3) var(--space-4);font:inherit;color:inherit;cursor:pointer;transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease),transform var(--fast) var(--ease)}
.mock-opt:hover{border-color:var(--fg)}
.mock-opt:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mock-opt .k{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--fg-soft);font-size:var(--fs-meta);font-weight:700}
.mock-opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.mock-opt[aria-pressed="true"] .k{background:var(--accent);color:var(--on-accent)}
.mock-nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-4)}
.mock-nav i{width:28px;height:8px;border-radius:var(--radius-full);background:var(--fg-soft);transition:background var(--fast) var(--ease)}
.mock-nav i.done{background:var(--accent)}
.mock-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-top:1px solid var(--border);color:var(--muted);font-size:var(--fs-meta)}
.mock-note{margin:var(--space-3) 0 0;font-size:var(--fs-meta);color:var(--muted);text-align:center}

/* ---------- proof ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.metric{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:var(--space-5)}
.metric b{display:block;font-size:clamp(28px,4vw,40px);line-height:1.1;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.metric span{display:block;margin-top:var(--space-2);color:var(--muted);font-size:var(--fs-sm)}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-6)}
.proof-item{border-inline-start:3px solid var(--accent);padding:var(--space-2) var(--space-4)}
.proof-item h3{font-size:var(--fs-body);margin:0}
.proof-item p{margin:var(--space-2) 0 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.8}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-6)}
.testi{margin:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:var(--space-5)}
.testi blockquote{margin:0;line-height:1.9}
.testi figcaption{margin-top:var(--space-4);font-size:var(--fs-sm);color:var(--muted)}
.testi figcaption strong{display:block;color:var(--fg)}

/* ---------- problem → solution + steps ---------- */
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.ps-col{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);background:var(--surface)}
.ps-col.bad{background:var(--danger-soft);border-color:transparent}
.ps-col.good{background:var(--success-soft);border-color:transparent}
.ps-col h3{margin:0 0 var(--space-3)}
.ps-col ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-3)}
.ps-col li{display:flex;gap:var(--space-3);line-height:1.8}
.ps-col li::before{flex:none;font-weight:700}
.ps-col.bad li::before{content:'✕';color:var(--danger)}
.ps-col.good li::before{content:'✓';color:var(--success)}

.steps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-7);align-items:start}
.steps-tabs{display:grid;gap:var(--space-2)}
.step-tab{display:flex;gap:var(--space-4);align-items:flex-start;text-align:start;width:100%;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);font:inherit;color:inherit;cursor:pointer;transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.step-tab:hover{border-color:var(--fg)}
.step-tab:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.step-tab[aria-selected="true"]{border-color:var(--accent);box-shadow:var(--shadow-2)}
.step-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--fg-soft);font-weight:700;font-family:var(--font-mono)}
.step-tab[aria-selected="true"] .step-n{background:var(--accent);color:var(--on-accent)}
.step-tab strong{display:block}
.step-tab small{display:block;margin-top:var(--space-1);color:var(--muted);font-size:var(--fs-sm);line-height:1.7}
.step-panel{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:var(--space-5);box-shadow:var(--shadow-1);min-height:300px}
.step-panel[hidden]{display:none}
.sp-row{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px dashed var(--border);font-size:var(--fs-sm)}
.sp-row:last-child{border-bottom:0}
.sp-cardnum{direction:ltr;font-family:var(--font-mono);font-size:var(--fs-h3);letter-spacing:.08em;text-align:center;border:1px dashed var(--border);border-radius:var(--radius);padding:var(--space-4);margin:var(--space-3) 0}
.bars{display:flex;align-items:flex-end;gap:var(--space-3);height:140px;margin-top:var(--space-4);direction:ltr}
.bars div{flex:1;background:var(--accent-soft);border-radius:8px 8px 0 0;position:relative;display:flex;align-items:flex-start;justify-content:center}
.bars div.cur{background:var(--accent)}
.bars span{font-size:var(--fs-meta);font-family:var(--font-mono);padding-top:6px}
.bars div.cur span{color:var(--on-accent)}

/* ---------- interactive quick test ---------- */
.try{background:var(--fg-soft);border-radius:var(--radius-lg);padding:var(--space-6)}
.try-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-7);align-items:start}
.try-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-2)}
.try-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);color:var(--muted);font-size:var(--fs-sm)}
.try-progress{height:6px;border-radius:var(--radius-full);background:var(--fg-soft);overflow:hidden;margin-top:var(--space-3)}
.try-progress i{display:block;height:100%;width:0;background:var(--accent);transition:width var(--base,.25s) var(--ease)}
.try-q{font-weight:600;line-height:1.9;margin:var(--space-5) 0 var(--space-3)}
.try-opts{display:grid;gap:var(--space-2)}
.try-opt.right{border-color:var(--success);background:var(--success-soft)}
.try-opt.wrong{border-color:var(--danger);background:var(--danger-soft)}
.try-result{text-align:center;padding:var(--space-4) 0}
.try-score{font-size:clamp(40px,8vw,64px);font-weight:700;font-family:var(--font-mono);line-height:1}
.try-review{margin:var(--space-5) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-2);text-align:start;font-size:var(--fs-sm)}
.try-review li{display:flex;gap:var(--space-3);align-items:flex-start;line-height:1.8}
.try-review b{flex:none}
.try-side ul{margin:var(--space-4) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-3);color:var(--muted)}
.try-side li{display:flex;gap:var(--space-3);line-height:1.8}
.try-side li::before{content:'✓';color:var(--success);font-weight:700}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:var(--space-3)}
.faq details{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);transition:border-color var(--fast) var(--ease)}
.faq details[open]{border-color:var(--accent)}
.faq summary{list-style:none;cursor:pointer;padding:var(--space-4) var(--space-5);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--fg-soft);font-size:20px;line-height:1;transition:transform var(--fast) var(--ease)}
.faq details[open] summary::after{content:'−'}
.faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius-lg)}
.faq .ans{padding:0 var(--space-5) var(--space-5);color:var(--muted);line-height:1.95}

/* ---------- final CTA (always a solid brand-blue block, light or dark) ---------- */
.final{background:linear-gradient(135deg,#0f2a6b 0%,#1d4ed8 100%);color:#fff;border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);text-align:center}
.final h2{color:#fff}
.final p{color:rgba(255,255,255,.86);max-width:56ch;margin:var(--space-4) auto 0;line-height:1.9}
.final .hero2-cta{justify-content:center}
.final .btn-primary{background:#fff;color:#0f2a6b;border-color:#fff}
.final .btn-primary:hover{background:#e8efff;border-color:#e8efff}
.final .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.final .btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* footer additions */
.foot-grid-5{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}
.foot-trust{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-4);color:var(--muted);font-size:var(--fs-meta);list-style:none;padding:0}
.foot-trust li::before{content:'✓ ';color:var(--success)}
.foot-status{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);font-size:var(--fs-meta);color:var(--muted)}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.status-dot.ok{background:var(--success);box-shadow:0 0 0 3px color-mix(in oklch, var(--success) 25%, transparent)}
.status-dot.down{background:var(--danger)}
.foot-social{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin-top:var(--space-2)}
.foot-social a{display:inline}

/* ---------- motion + responsive ---------- */
@media (prefers-reduced-motion: reduce){
  .mock-opt,.try-progress i,.faq summary::after,.step-tab{transition:none}
}
@media (max-width: 960px){
  .foot-grid-5{grid-template-columns:1fr 1fr}
  .hero2-grid,.steps,.try-grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .proof-grid,.testi-grid{grid-template-columns:1fr}
  .ps-grid{grid-template-columns:1fr}
  .hm-section{padding-block:var(--space-7)}
}
@media (max-width: 520px){
  .hero2{padding-block:var(--space-6)}
  .hero2-cta .btn{width:100%}
  .try{padding:var(--space-4)}
  .final{padding:var(--space-7) var(--space-4)}
  .foot-grid-5{grid-template-columns:1fr}
}

.faq-q{font-size:inherit;font-weight:600;margin:0;line-height:1.7}

/* header: keep the brand on one line and the CTA compact on phones */
.brand{white-space:nowrap}
.cta-short{display:none}
@media (max-width: 560px){
  .cta-long{display:none}
  .cta-short{display:inline}
  .topnav-inner{gap:var(--space-2)}
  .nav-actions{gap:var(--space-1)}
  .nav-actions .btn-sm{padding:var(--space-2) var(--space-3)}
  .brand{font-size:18px}
  .nav-toggle,.theme-toggle{width:40px;height:40px}
}


/* ---------- animated illustrations (inline SVG + CSS; no libraries, no images) ---------- */
.hero-art{display:flex;flex-direction:column;align-items:center}
.art{width:100%;height:auto;max-width:560px;display:block;overflow:visible}
.art text{font-family:var(--font-body)}
.art .blob,.art .sheet,.art .dot3,.art .bm,.art .spark,.art .timer,.art .chip-score,.art .medal,.art .bars-mini,.art .pt,.art .pulse,.art .float{transform-box:fill-box}

/* hero: floating blobs, bobbing cards, drawing tick, counting-down ring, twinkling sparkles */
.art-hero .blob{transform-origin:center;animation:artFloat 9s ease-in-out infinite}
.art-hero .b2{animation-duration:11s;animation-delay:-3s}
.art-hero .b3{animation-duration:7s;animation-delay:-5s}
.art-hero .sheet{animation:artSheet 6s ease-in-out infinite}
.art-hero .tick{stroke-dasharray:30;stroke-dashoffset:30;animation:artTick 6s ease-in-out infinite}
.art-hero .pick{animation:artPick 6s ease-in-out infinite}
.art-hero .a2 circle:nth-of-type(1){animation:artPick 6s ease-in-out infinite}
.art-hero .dot3{animation:artDot 6s ease-in-out infinite;transform-origin:center}
.art-hero .ring{stroke-dasharray:239;stroke-dashoffset:0;animation:artRing 24s linear infinite}
.art-hero .timer{animation:artBob 5s ease-in-out infinite}
.art-hero .chip-score{animation:artBob 5.5s ease-in-out -1.5s infinite}
.art-hero .medal{animation:artBob 6.5s ease-in-out -3s infinite}
.art-hero .bars-mini{animation:artBob 7s ease-in-out -2s infinite}
.art-hero .bm{transform-origin:bottom;animation:artGrow 6s ease-in-out infinite}
.art-hero .m2{animation-delay:.15s}.art-hero .m3{animation-delay:.3s}.art-hero .m4{animation-delay:.45s}
.art-hero .spark{transform-origin:center;animation:artTwinkle 3.2s ease-in-out infinite}
.art-hero .s2{animation-delay:-1.1s}.art-hero .s3{animation-delay:-2.1s}

@keyframes artFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10px,-14px) scale(1.06)}}
@keyframes artBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes artSheet{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes artTick{0%,18%{stroke-dashoffset:30}34%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
@keyframes artPick{0%,18%{opacity:.0}34%,86%{opacity:1}100%{opacity:0}}
@keyframes artDot{0%,30%{transform:scale(.4);opacity:.35}45%,86%{transform:scale(1);opacity:1}100%{transform:scale(.4);opacity:.35}}
@keyframes artRing{to{stroke-dashoffset:239}}
@keyframes artGrow{0%,12%{transform:scaleY(.2)}40%,86%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
@keyframes artTwinkle{0%,100%{transform:scale(.5) rotate(0);opacity:.35}50%{transform:scale(1.15) rotate(25deg);opacity:1}}

/* report showcase */
.showcase{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-8);align-items:center;background:var(--fg-soft);border-radius:var(--radius-lg);padding:var(--space-7) var(--space-6)}
.showcase-art{display:flex;flex-direction:column;align-items:center}
.tick-list{margin:var(--space-4) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-3);color:var(--muted)}
.tick-list li{display:flex;gap:var(--space-3);line-height:1.8}
.tick-list li::before{content:'✓';color:var(--success);font-weight:700}
.tick-list strong{color:var(--fg)}
.art-report .line{stroke-dasharray:1;stroke-dashoffset:1;animation:artLine 7s ease-in-out infinite}
.art-report .area{opacity:0;animation:artArea 7s ease-in-out infinite}
.art-report .pt{transform-origin:center;opacity:0;animation:artPt 7s ease-in-out infinite}
.art-report .p1{animation-delay:.2s}.art-report .p2{animation-delay:.9s}.art-report .p3{animation-delay:1.6s}.art-report .p4{animation-delay:2.3s}.art-report .p5{animation-delay:3s}
.art-report .pulse{transform-origin:center;animation:artPulse 2s ease-out 3.2s infinite}
.art-report .float{animation:artBob 5s ease-in-out infinite}
.art-report .f2{animation-delay:-2s}
@keyframes artLine{0%{stroke-dashoffset:1}45%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes artArea{0%,35%{opacity:0}55%,88%{opacity:1}100%{opacity:0}}
@keyframes artPt{0%{opacity:0;transform:scale(.2)}8%{opacity:1;transform:scale(1.25)}14%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.2)}}
@keyframes artPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}

@media (max-width: 960px){
  .showcase{grid-template-columns:1fr;padding:var(--space-5) var(--space-4)}
  .art{max-width:420px}
}
/* people who asked for less motion get the finished picture, not the animation */
@media (prefers-reduced-motion: reduce){
  .art *{animation:none !important}
  .art-hero .tick,.art-report .line{stroke-dashoffset:0}
  .art-hero .pick{opacity:1}
  .art-report .area,.art-report .pt{opacity:1}
  .art-hero .ring{stroke-dashoffset:80}
}