/* Full-site pages (design row 12): nav, mock exam, result + review, coming-soon pages, home refresh.
   Copied from the design canvas's site.css; loaded after style.css. */
.btn-primary svg,.btn-ghost svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px;border-radius:14px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;color:var(--teal);font-size:16px;font-weight:700}
/* ===== New pages for the full website (exam + coming soon) ===== */
.nav{display:none}
.nav a{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:10px;font-size:15px;font-weight:700;color:var(--muted)}
.nav a.is-active{background:#FFFFFF;border:2px solid var(--line);color:var(--teal)}
.soon{padding:1px 7px;border-radius:999px;background:#FFF6DB;border:1.5px solid #FFE7A3;color:#8A6100;font-size:11px;font-weight:800}
.menu-btn{width:42px;height:42px;border-radius:12px;background:#FFFFFF;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--teal)}
.menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
/* the full nav needs ~1200px; below that (tablets, zoomed-in screens) it folds behind the menu button */
@media (min-width:1200px){.nav{display:flex;gap:4px}.menu-btn{display:none}}
.nav a,.header-cta{white-space:nowrap}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--muted-2)}
.crumbs b{color:var(--ink)}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
@media (min-width:1000px){.wrap{padding:0 var(--px);max-width:none}}
.page-head{display:flex;flex-direction:column;gap:10px;padding:16px 0 26px}
.page-head .title{white-space:normal}
.lic-row{display:flex;flex-wrap:wrap;gap:8px}
.lic-opt{display:flex;align-items:center;gap:8px;height:48px;padding:0 14px;border-radius:14px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;font-size:15px;font-weight:700}
.lic-opt b{width:30px;height:30px;border-radius:9px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--teal);direction:ltr;font-size:14px}
.lic-opt.is-on{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}
.lic-opt.is-on b{background:var(--teal);color:#FFFFFF}
.exam-app{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:1000px){.exam-app{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:28px}}
.qcard{padding:22px;display:flex;flex-direction:column;gap:16px}
@media (min-width:1000px){.qcard{padding:32px}}
.q-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.q-num{font-size:15px;font-weight:800;color:var(--muted-2)}
.q-text{margin:0;font-size:22px;line-height:1.45;font-weight:800}
@media (min-width:1000px){.q-text{font-size:26px}}
.q-img{border-radius:16px;overflow:hidden;border:2px solid var(--line);background:var(--bg)}
.q-img img{display:block;width:100%}
.answers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ans{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;font-size:17px}
.ans i{width:32px;height:32px;flex-shrink:0;border-radius:10px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;color:var(--muted-2)}
.ans.is-on{background:var(--teal-soft);border-color:var(--teal);font-weight:700}
.ans.is-on i{border-color:var(--teal);color:var(--teal)}
.ans.ok{background:var(--teal-soft);border-color:var(--teal);color:var(--teal);font-weight:700}
.ans.ok i{background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.ans.no{background:var(--red-soft);border-color:#C53030;color:#A92727;font-weight:700}
.ans.no i{background:#C53030;border-color:#C53030;color:#FFFFFF}
.q-actions{display:flex;gap:10px}
.q-actions .btn-teal{flex:1}
.flag-btn{width:52px;height:52px;flex-shrink:0;border-radius:14px;background:#FFF6DB;border:2px solid var(--yellow);border-bottom-width:4px;display:flex;align-items:center;justify-content:center;color:#8A6100}
.flag-btn svg,.icon-sm{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.side{display:flex;flex-direction:column;gap:14px}
.side-card{padding:18px;display:flex;flex-direction:column;gap:14px}
.timer-big{display:flex;align-items:center;justify-content:space-between}
.timer-big b{font-size:34px;font-weight:900;color:var(--teal);font-variant-numeric:tabular-nums;direction:ltr}
.nav-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.nav-grid span{aspect-ratio:1;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:var(--bg);color:var(--muted-2);border:2px solid transparent}
.nav-grid .d{background:var(--teal);color:#FFFFFF}
.nav-grid .f{background:#FFF6DB;color:#8A6100;border-color:var(--yellow)}
.nav-grid .c{background:#FFFFFF;color:var(--teal);border-color:var(--teal)}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.app-promo{padding:18px;display:flex;align-items:center;gap:14px;background:var(--teal) !important;border-color:var(--teal-dark) !important;color:#FFFFFF}
.app-promo p{margin:2px 0 0;font-size:13px;color:#CFE6E8;line-height:1.5}
.progress{height:10px;border-radius:5px;background:#E3EAEA;display:flex;overflow:hidden}
.progress span{background:var(--teal);border-radius:5px}
.result-hero{padding:28px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.pass-ring{width:104px;height:104px;border-radius:50%;background:var(--teal);border-bottom:6px solid var(--teal-dark);box-shadow:0 0 0 10px var(--teal-soft);display:flex;align-items:center;justify-content:center}
.pass-ring svg{width:52px;height:52px;fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.stat{padding:14px;border-radius:14px;background:var(--bg);display:flex;flex-direction:column;gap:2px}
.stat b{font-size:24px;font-weight:900;color:var(--teal)}
.stat span{font-size:13px;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:12px}
.bar-row{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:10px;font-size:15px}
.bar-row b{text-align:left;direction:ltr}
.soon-hero{padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.soon-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#FFF6DB;border:2px solid #FFE7A3;color:#8A6100;font-size:14px;font-weight:800}
.sign-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;opacity:.55;filter:saturate(.7)}
@media (min-width:1000px){.sign-grid{grid-template-columns:repeat(6,1fr)}}
.sign-tile{aspect-ratio:1;border-radius:16px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;display:flex;align-items:center;justify-content:center}
.q-img img{max-height:300px;object-fit:cover;object-position:center 60%}

/* ===== Home (full site) refresh ===== */
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;font-weight:600;color:var(--muted)}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust svg{width:16px;height:16px;fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hub-section{padding-top:0 !important;padding-bottom:40px !important}
.hub li{display:flex}
.hub-card{flex:1;display:flex;align-items:center;gap:14px;padding:16px}
.hub-card .icon-tile{width:46px;height:46px;flex-shrink:0}
.hub-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.hub-text b{font-size:17px;font-weight:800}
.hub-text span{font-size:14px;color:var(--muted)}
.hub-go{font-size:14px;font-weight:800;color:var(--teal);white-space:nowrap}
.hub-card.is-soon{background:#FAFBFB}
.hub-card.is-soon .icon-tile{opacity:.75}
.signup-band .stores{justify-content:center}
.signup-band .store{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#CFE6E8}
.signup-band .store > svg{stroke:#CFE6E8}
.signup-band .consent-box{border-color:rgba(255,255,255,.5);background:transparent}

/* ===== 12.4 result + review (like 4.7) ===== */
.rv{display:grid;gap:20px;grid-template-columns:1fr;padding:8px 0 64px}
@media (min-width:1000px){.rv{grid-template-columns:340px minmax(0,1fr);gap:32px;align-items:start}}
.rv-sum{padding:22px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.rv-sum .pass-ring{width:80px;height:80px}
.rv-sum .pass-ring svg{width:40px;height:40px}
.rv-sum h1{margin:6px 0 0;font-size:28px;font-weight:900;color:var(--teal)}
.rv-sum p{margin:0;font-size:15px;color:var(--muted)}
.rv-sum .stats{margin-top:4px}
.rv-sum .stat{padding:10px 6px;align-items:center}
.rv-sum .stat b{font-size:20px}
.rv-topics{padding:18px;display:flex;flex-direction:column;gap:12px}
.rv-topics .bar-row{grid-template-columns:96px 1fr 40px;font-size:14px}
.rv-main{display:flex;flex-direction:column;gap:14px}
.rv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rv-head h2{margin:0;font-size:24px;font-weight:900}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:12px;background:#FFFFFF;border:2px solid var(--line);font-size:14px;font-weight:700;color:var(--ink)}
.tab.on{background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.tab svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rq{padding:18px;display:flex;flex-direction:column;gap:10px}
.rq-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:700}
.rq-top .rq-n{color:var(--teal)}
.rq-flag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:#FFF6DB;border:1.5px solid var(--yellow);color:#8A6100;font-size:12px;font-weight:800}
.rq-flag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rq-q{margin:0;font-size:17px;font-weight:700;line-height:1.45}
.rq-a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;font-size:15px;font-weight:600}
.rq-a svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rq-a.no{background:#FDECEC;color:#A92727}
.rq-a.ok{background:var(--teal-soft);color:var(--teal);font-weight:700}
.rq-ex{display:flex;gap:10px;padding:12px 14px;border-radius:12px;background:var(--bg);font-size:14px;line-height:1.55;color:var(--muted)}
.rq-ex svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rq-ex b{color:var(--ink)}
.rq-img{width:120px;flex-shrink:0;border-radius:10px;overflow:hidden;border:2px solid var(--line)}
.rq-img img{display:block;width:100%}
.rv-more{align-self:center;font-size:15px;font-weight:800;color:var(--teal);padding:8px}
.rv-actions{display:flex;flex-direction:column;gap:10px;padding:18px}
@media (min-width:1000px){.rv{grid-template-columns:minmax(0,1fr) 340px;gap:28px}.rv > aside{order:2}}

/* ===== 12.2 v3 – lively start ===== */
.go-band{position:relative;background:var(--teal);color:#FFFFFF;overflow:hidden;padding:44px 20px 120px}
@media (min-width:1000px){.go-band{padding:56px var(--px) 150px}}
.go-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 30%,rgba(255,197,61,.22) 0,transparent 32%),radial-gradient(circle at 90% 110%,rgba(255,255,255,.10) 0,transparent 40%)}
.go-road{position:absolute;left:0;right:0;bottom:38px;height:64px;background:#0C3D46}
.go-road::after{content:"";position:absolute;left:0;right:0;top:29px;height:6px;background:repeating-linear-gradient(to left,#FFC53D 0 46px,transparent 46px 84px)}
.go-car{position:absolute;bottom:58px;right:18%;width:150px;transform:scaleX(-1)}
.go-flag{position:absolute;bottom:88px;left:9%;width:46px}
.go-in{position:relative;display:grid;gap:28px;grid-template-columns:1fr;align-items:center}
@media (min-width:1000px){.go-in{grid-template-columns:minmax(0,1fr) 400px;gap:56px}}
.go-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.18);font-size:14px;font-weight:800}
.go-title{margin:0 0 10px;font-size:clamp(40px,4.6vw,66px);line-height:1.05;font-weight:900;letter-spacing:-.6px}
.go-title span{color:#FFFFFF}
.go-lead{margin:0;max-width:560px;font-size:19px;line-height:1.6;color:#CFE6E8}
.go-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.go-chip{display:flex;align-items:baseline;gap:8px;padding:10px 16px;border-radius:14px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.16)}
.go-chip b{font-size:26px;font-weight:900;color:#FFFFFF;line-height:1}
.go-chip span{font-size:14px;font-weight:700;color:#CFE6E8}
.watch{position:relative;padding:22px;border-radius:24px;background:#FFFFFF;color:var(--ink);border-bottom:6px solid #C9D4D5;box-shadow:0 30px 60px rgba(0,0,0,.25);transform:rotate(-2deg)}
.watch-top{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:15px;color:var(--muted)}
.watch-time{margin:6px 0 14px;font-size:76px;font-weight:900;line-height:1;color:var(--teal);font-variant-numeric:tabular-nums;direction:ltr;text-align:center;letter-spacing:-1px}
.watch .board-grid{gap:6px}
.watch-note{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:12px;background:#FFF6DB;color:#8A6100;font-size:14px;font-weight:800}
.watch-note svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.watch-badge{position:absolute;top:-14px;left:-10px;padding:6px 12px;border-radius:999px;background:var(--yellow);color:var(--yellow-ink);font-size:13px;font-weight:900;transform:rotate(-6deg);box-shadow:0 6px 14px rgba(0,0,0,.15)}
.pick{position:relative;margin:-96px auto 0;padding:0 20px;max-width:1200px}
@media (min-width:1000px){.pick{padding:0 var(--px);max-width:none}}
.pick-card{padding:24px;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 50px rgba(15,42,46,.10)}
@media (min-width:1000px){.pick-card{padding:30px 32px}}
.pick-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pick-head h2{margin:0;font-size:26px;font-weight:900}
.pick-head p{margin:4px 0 0;font-size:15px;color:var(--muted)}
.veh-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:1000px){.veh-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.veh{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 10px 12px;border-radius:18px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px}
.veh .vehicle{height:84px;border-radius:12px}
.veh .vehicle svg{width:min(120px,82%)}
.veh-meta{display:flex;align-items:center;gap:8px;padding:0 2px}
.veh-meta b{width:32px;height:32px;flex-shrink:0;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:var(--teal);direction:ltr}
.veh-meta span{font-size:15px;font-weight:800}
.veh.on{border-color:var(--teal);background:var(--teal-soft)}
.veh.on .vehicle{background:#FFFFFF}
.veh.on .veh-meta b{background:var(--teal);color:#FFFFFF}
.veh-check{position:absolute;top:-10px;inset-inline-end:-8px;width:28px;height:28px;border-radius:50%;background:var(--teal);border:3px solid #FFFFFF;display:flex;align-items:center;justify-content:center}
.veh-check svg{width:14px;height:14px;fill:none;stroke:#FFFFFF;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.pick-go{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:4px}
.pick-go .btn-primary{height:62px;padding:0 34px;font-size:20px;border-radius:16px}
.kbd{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted-2);font-weight:600}
.kbd kbd{font-family:inherit;font-size:12px;font-weight:800;padding:3px 8px;border-radius:7px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:3px;color:var(--ink)}
.gets{display:grid;gap:14px;grid-template-columns:1fr;padding:28px 20px 72px;max-width:1200px;margin:0 auto}
@media (min-width:1000px){.gets{grid-template-columns:repeat(3,1fr);padding:32px var(--px) 80px;max-width:none}}
.get{display:flex;align-items:center;gap:14px;padding:18px}
.get b{display:block;font-size:17px;font-weight:800}
.get span.t{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.nav-dark a{color:#CFE6E8}
.nav-dark a.is-active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#FFFFFF}
.site-header[style*="teal"] .lang-link{color:#FFFFFF}
.gets{width:100%}
@media (min-width:1000px){.go-band{padding-bottom:250px}.go-road{bottom:120px}.go-car{bottom:140px;right:30%}.go-flag{bottom:170px;left:44%}.pick{margin-top:-110px}}

/* app-style progress bar (road + car + flag) */
.road-bar{position:relative;height:22px;border-radius:11px;background:#E3EAEA}
.road-fill{position:absolute;right:0;top:0;bottom:0;border-radius:11px;background:#E8603C}
.road-dash{position:absolute;right:14px;left:26px;top:10px;border-top:2px dashed #FFFFFF}
.road-car{position:absolute;top:1px}
.road-flag{position:absolute;left:6px;top:2px}
/* 12.2 – uniform background */
.go-band::before{display:none}


/* ===== Live site additions (beyond the static design) ===== */
/* Header: nav on desktop, menu button + dropdown on phones */
.site-header{position:relative;gap:12px}
.menu-btn{cursor:pointer;font:inherit;padding:0}
.site-header.menu-open .nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;position:absolute;z-index:30;top:calc(100% - 6px);inset-inline:16px;padding:10px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;box-shadow:0 18px 40px rgba(15,42,46,.14)}
.site-header.menu-open .nav a{height:46px;justify-content:space-between}
.nav-dark .soon{background:rgba(255,197,61,.18);border-color:rgba(255,197,61,.5);color:#FFE7A3}
.site-header.menu-open .nav-dark a{color:var(--muted)}
.site-header.menu-open .nav-dark a.is-active{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.site-header[style*="teal"] .brand-name{color:#FFFFFF}
.site-header[style*="teal"] .header-cta{border-color:transparent}
@media (max-width:999px){.header-cta{display:none}}

/* Buttons that the design drew as spans */
.veh,.ans,.nav-grid button,.tab,.flag-btn{font:inherit;cursor:pointer;text-align:start;color:inherit}
.veh{transition:transform .15s,border-color .15s}
.veh:hover{transform:translateY(-2px)}
.veh:focus-visible,.ans:focus-visible,.nav-grid button:focus-visible,.tab:focus-visible,.flag-btn:focus-visible,.btn-ghost:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.ans{width:100%;text-align:start;transition:border-color .15s,background .15s}
.ans:hover{border-color:var(--line-strong)}
.nav-grid button{aspect-ratio:1;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;background:var(--bg);color:var(--muted-2);border:2px solid transparent;padding:0}
.nav-grid button.d{background:var(--teal);color:#FFFFFF}
.nav-grid button.f{background:#FFF6DB;color:#8A6100;border-color:var(--yellow)}
.nav-grid button.c{background:#FFFFFF;color:var(--teal);border-color:var(--teal)}
.nav-grid button.d.f{box-shadow:inset 0 0 0 2px var(--yellow)}
.flag-btn{padding:0}
.flag-btn[aria-pressed="true"]{background:var(--yellow);color:var(--yellow-ink)}
.tab{background:#FFFFFF}
.btn-ghost{cursor:pointer;font-family:inherit}
.btn-teal{font-family:inherit}
.btn-teal[disabled],.btn-ghost[disabled]{opacity:.45;cursor:default}

/* Question images are diagrams and photos: never crop them */
.q-img{background:#FFFFFF}
.q-img img{max-height:340px;object-fit:contain;object-position:center}
.rq-img{background:#FFFFFF}

/* Exam states */
.exam-note{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#FFF6DB;color:#8A6100;font-size:14px;font-weight:700}
.exam-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:80px 20px;color:var(--muted);font-weight:700}
.exam-loading .btn-spinner{display:block;width:34px;height:34px;border-width:4px;border-color:var(--teal-soft);border-top-color:var(--teal)}
.timer-big.is-low b{color:var(--red-ink)}
.pass-ring.fail{background:#C53030;border-bottom-color:#8E1F1F;box-shadow:0 0 0 10px #FDECEC}
.rv-sum h1.fail{color:#A92727}
.rq-ex.missing{font-style:italic}
.rq-src{font-size:12px;color:var(--muted-2)}
.rv-empty{padding:28px;text-align:center;color:var(--muted);font-weight:700}

/* Confirm dialog (submit / leave) */
.dlg{border:0;padding:0;border-radius:20px;max-width:420px;width:calc(100% - 32px);box-shadow:0 30px 70px rgba(15,42,46,.3)}
.dlg::backdrop{background:rgba(15,42,46,.45)}
.dlg-in{padding:24px;display:flex;flex-direction:column;gap:12px;text-align:center}
.dlg h2{margin:0;font-size:22px;font-weight:900}
.dlg p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
.dlg-btns{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.dlg-btns .btn-teal,.dlg-btns .btn-ghost{width:100%}

/* Signup band on the home page */
.signup-band .signup-form{max-width:520px;margin:0 auto}
.signup-band .field-box{flex-direction:row}
.signup-band .consent{color:#CFE6E8;text-align:start}
.signup-band .done{color:var(--ink);text-align:start;max-width:520px;margin:0 auto}
.signup-band .form-message.is-error{background:#FFFFFF}
@media (max-width:640px){.signup-band .field-box{flex-direction:column}}
.header-start{display:flex;align-items:center;gap:28px}
.lang-only-other{display:none}
html:not([lang="he"]) .lang-only-other{display:flex}
.soon-topics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;margin-top:18px;opacity:.7}
@media (min-width:1000px){.soon-topics{grid-template-columns:repeat(4,1fr)}}
.soon-topics .card{padding:16px;text-align:start}
#rs-title:focus,#q-text:focus{outline:none}
/* language button on the teal header: a white hover hid the white label */
.site-header[style*="teal"] .lang-link:hover,.site-header[style*="teal"] .lang-toggle[aria-expanded="true"]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)}
/* start screen car: drives in, then idles with turning wheels while the road rolls under it */
.go-car .spin{transform-box:fill-box;transform-origin:center;animation:spin .6s linear infinite}
.go-car{animation:carIn 1.4s cubic-bezier(.2,.7,.3,1) both,carIdle .5s ease-in-out 1.4s infinite alternate}
.go-road::after{background:linear-gradient(to left,#FFC53D 0 46px,transparent 46px 84px) 0 0/84px 100% repeat-x;animation:roadRoll .9s linear infinite}
.go-flag path{transform-box:fill-box;transform-origin:left center;animation:flagWave 1.2s ease-in-out infinite alternate}
@keyframes carIn{from{translate:55vw 0}to{translate:0 0}}
@keyframes carIdle{from{translate:0 0}to{translate:0 -2px}}
@keyframes roadRoll{from{background-position:0 0}to{background-position:84px 0}}
@keyframes flagWave{from{transform:skewY(0)}to{transform:skewY(-6deg) scaleX(.94)}}
/* progress car: slides to the next question with a little bounce */
.road-fill{transition:width .45s ease}
.road-car{transition:right .45s ease}
.road-car.driving{animation:carHop .45s ease}
@keyframes carHop{30%{translate:0 -3px}60%{translate:0 0}80%{translate:0 -1px}}
@media (prefers-reduced-motion:reduce){.go-car,.go-car .spin,.go-road::after,.go-flag path,.road-car.driving{animation:none}.road-fill,.road-car{transition:none}}
/* answers beside the picture (answers on the start side, picture on the end side) */
.q-body{display:flex;flex-direction:column;gap:14px}
@media (min-width:700px){.q-body.has-img{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:18px}}
.q-body.has-img .q-img img{max-height:320px}
/* finish button */
.submit-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px;border-radius:14px;background:#FDECEC;border:2px solid #F3C4C4;border-bottom-width:4px;color:#A92727;font:inherit;font-size:16px;font-weight:800;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.submit-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.submit-btn:hover{background:#FBDCDC;border-color:#E9A3A3}
.submit-btn:active{transform:translateY(2px);border-bottom-width:2px}
.submit-btn:focus-visible{outline:3px solid #A92727;outline-offset:2px}
/* legend under the question grid: three evenly spread counters */
.legend{justify-content:space-between;flex-wrap:nowrap;gap:8px}
.legend span{white-space:nowrap}
.legend b{color:var(--ink)}
/* the side panels stay put while the questions scroll */
@media (min-width:1000px){.side{position:sticky;top:16px}}
/* review card */
.rq-end{display:inline-flex;align-items:center;gap:8px}
.rq-sub{color:var(--muted-2);font-weight:700}
.rq-body{display:flex;gap:16px;align-items:flex-start}
.rq-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.rq-img{width:110px}
@media (min-width:700px){.rq-img{width:200px}}
/* home: signup form centered in the band */
.signup-band .signup{max-width:520px;margin:0 auto}
.license-badge{transition:background .2s,color .2s}
/* review tabs: "(24)" with no gap inside the brackets */
.tab-n{display:inline}
/* result on wide screens: header, summary and footer stay put and only the review list scrolls */
@media (min-width:1000px){
  body.rv-locked .page{height:100vh;height:100svh;min-height:0;overflow:hidden}
  body.rv-locked #view-result:not([hidden]){display:flex;flex-direction:column;min-height:0}
  body.rv-locked .rv{flex:1;min-height:0;align-items:stretch;padding-bottom:16px;grid-template-rows:minmax(0,1fr)}
  body.rv-locked .rv > aside{align-self:start;max-height:100%;overflow-y:auto;scrollbar-width:none}
  body.rv-locked .rv > aside::-webkit-scrollbar{display:none}
  body.rv-locked .rv-main{min-height:0}
  body.rv-locked #review-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 6px 16px;margin:0 -6px;scrollbar-width:thin}
  body.rv-locked .rq-src{margin:0}
}
/* review card: picture beside the answers, under the question */
.rq-body{margin-top:2px}
/* start screen: more movement */
.go-chip{animation:chipPop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.5s + var(--c,0) * .1s)}
@keyframes chipPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.veh.on .vehicle svg{animation:carIdle .45s ease-in-out infinite alternate}
.veh:hover .vehicle svg{transform:translateX(-4px)}
.veh .vehicle svg{transition:transform .25s ease}
@media (prefers-reduced-motion:reduce){.go-chip,.veh.on .vehicle svg{animation:none}}
/* start screen board: squares fill in one by one, like the board on the home page */
.watch .q{background:#E3EAEA;transform:scale(.85);animation:qIn .3s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--i) * 45ms + 700ms)}
.watch .q.bad{animation-name:qInBad}
@keyframes qIn{to{background:var(--teal);transform:none}}
@keyframes qInBad{to{background:var(--red-soft);box-shadow:inset 0 0 0 2px var(--red-ink);transform:none}}
@media (prefers-reduced-motion:reduce){.watch .q{animation:none;background:var(--teal);transform:none}.watch .q.bad{background:var(--red-soft);box-shadow:inset 0 0 0 2px var(--red-ink)}}
/* home: license cards are a choice; the chosen one gets the teal look */
.license-card{cursor:pointer;user-select:none}
.license-card:not(.is-on){border-color:var(--line);background:#FFFFFF}
.license-card:not(.is-on) .license-badge{background:var(--bg);color:var(--teal)}
.license-card:not(.is-on) .vehicle{background:var(--bg)}
.license-card.is-on{border-color:var(--teal);background:var(--teal-soft)}
.license-card.is-on .license-badge{background:var(--teal);color:#FFFFFF}
.license-card.is-on .vehicle{background:#FFFFFF}
.license-card:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* exam pages: "about the test" section (Hebrew only; the exam itself is translated) */
html:not([lang="he"]) .lang-only-he{display:none}
.exam-seo{max-width:980px;margin:0 auto;padding:16px 20px 88px;color:var(--ink)}
.seo-head{text-align:center;max-width:760px;margin:0 auto 26px}
.seo-head h2{margin:12px 0 10px;font-size:clamp(28px,3.2vw,38px);font-weight:900;line-height:1.2}
.seo-head p{margin:0;font-size:17px;line-height:1.75;color:var(--muted)}
.exam-seo h3{margin:40px 0 14px;font-size:22px;font-weight:900}
.seo-note{margin:-4px 0 14px;font-size:16px;line-height:1.7;color:var(--muted)}
.seo-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:760px){.seo-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.seo-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 12px;text-align:center}
.seo-stat b{font-size:34px;font-weight:900;line-height:1;color:var(--teal);font-variant-numeric:tabular-nums}
.seo-stat span{font-size:14px;font-weight:700;color:var(--muted)}
.seo-topics{display:grid;gap:12px}
@media (min-width:760px){.seo-topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.seo-topic{display:flex;align-items:center;gap:14px;padding:16px}
.seo-topic .icon-tile{width:46px;height:46px;flex-shrink:0}
.seo-topic b{display:block;font-size:17px;font-weight:800}
.seo-topic span span{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:var(--muted)}
.exam-seo .faq{max-width:none}
.seo-links{margin:0;padding:0;list-style:none;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.seo-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
.seo-links a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#FFFFFF;border:2px solid var(--line);border-bottom-width:4px;color:var(--ink);font-size:16px;font-weight:800;text-decoration:none;transition:border-color .15s,background .15s}
.seo-links a:hover{border-color:var(--teal)}
.seo-links a.is-on{border-color:var(--teal);background:var(--teal-soft)}
.seo-links b{min-width:36px;height:30px;padding:0 6px;border-radius:9px;background:var(--bg);color:var(--teal);display:inline-flex;align-items:center;justify-content:center;font-size:14px;direction:ltr}
.seo-links a.is-on b{background:var(--teal);color:#FFFFFF}
.seo-table-wrap{padding:6px 18px}
.seo-table{width:100%;border-collapse:collapse;font-size:16px}
.seo-table th,.seo-table td{padding:12px 6px;border-bottom:1px solid var(--line);text-align:start}
.seo-table tr:last-child td{border-bottom:0}
.seo-table th{font-size:14px;color:var(--muted-2);font-weight:800}
.seo-table td b{color:var(--teal);font-size:17px}
.seo-samples .ans-line{margin:0 20px 8px;padding:9px 12px;border-radius:12px;background:var(--teal-soft);color:var(--teal);font-weight:700;font-size:15px}
.seo-samples .ex-line{margin:0 20px 16px;font-size:15px;line-height:1.6;color:var(--muted)}
.seo-samples .ex-line b{color:var(--ink)}
/* home: text links to the per-license exam pages, under the license cards */
.lic-exams{margin:18px 0 0;font-size:15px;line-height:1.9;color:var(--muted)}
.lic-exams a{color:var(--teal);font-weight:800;text-decoration:none;border-bottom:2px solid var(--teal-soft)}
.lic-exams a:hover{border-bottom-color:var(--teal)}
/* question bank pages: /topics/… and /q/<id>/ (scripts/build-question-pages.mjs) */
.qp{flex:1;padding-top:8px;padding-bottom:72px}
.qp-crumbs{flex-wrap:wrap;row-gap:2px;margin-bottom:6px}
.qp-crumbs a{color:var(--muted-2)}
.qp-crumbs a:hover{color:var(--teal)}
.qp-note{margin:10px 0 0}
.qp-chip{align-self:flex-start}
.qp-h2{margin:30px 0 14px;font-size:22px;font-weight:900}
.qp-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);padding-top:14px}
@media (min-width:1200px){.qp-grid{grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}}
.qp-card{container-type:inline-size}
.qp-card .q-top{flex-wrap:wrap}
/* answers beside the picture only when the card itself is wide enough (tablets, zoomed-in screens) */
.qp-card .q-body.has-img{display:flex}
@container (min-width:600px){.qp-card .q-body.has-img{display:grid}}
.qp-answers .ans{cursor:default}
.qp-answers .ans span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;overflow-wrap:anywhere}
.qp-ok{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:#FFFFFF;font-size:13px;font-style:normal;font-weight:800;color:var(--teal)}
.qp-ok svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.qp-ex{font-size:16px}
.qp-ex p{margin:0}
.qp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--muted)}
.qp-meta a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 6px;border-radius:10px;background:var(--bg);color:var(--ink);font-weight:700;text-decoration:none}
.qp-meta a b{min-width:24px;height:22px;padding:0 4px;border-radius:7px;background:#FFFFFF;color:var(--teal);display:inline-flex;align-items:center;justify-content:center;font-size:12px;direction:ltr}
.qp-meta a:hover{color:var(--teal)}
.qp-src{margin:0;font-size:13px;line-height:1.6;color:var(--muted-2)}
.qp-pager{padding-top:16px;border-top:2px solid var(--line)}
.qp-pager a{text-decoration:none}
.qp-pager .btn-teal{color:#FFFFFF}
.qp-side{gap:18px}
.qp-cta{flex-direction:column;align-items:stretch;gap:14px}
.qp-cta b{font-size:18px}
.qp-cta .btn-primary{justify-content:center}
.qp-related{padding:18px;display:flex;flex-direction:column;gap:10px}
.qp-related h2{margin:0;font-size:17px;font-weight:900}
.qp-related ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.qp-related li a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink)}
.qp-related li a:hover,.qp-more{color:var(--teal)}
.qp-more{font-size:15px;font-weight:800}
.qp-list{margin:0;padding:0;list-style:none;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.qp-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qp-list li{display:flex}
.qp-list a{flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 16px;color:var(--ink);text-decoration:none;transition:border-color .15s}
.qp-list a:hover{border-color:var(--teal)}
.qp-list b{font-size:16px;font-weight:800;line-height:1.45}
.qp-list span{font-size:14px;line-height:1.5;color:var(--teal)}
.qp-has-img{display:inline-block;padding:0 7px;margin-inline-end:4px;border-radius:6px;background:var(--bg);color:var(--muted);font-size:12px;font-style:normal;font-weight:700}
.qp-subs{margin-bottom:6px}
.qp-subs a{font-size:15px}
.qp-topics{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.qp-topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qp-topic{padding:18px;display:flex;flex-direction:column;gap:14px}
.qp-topic-head{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}
.qp-topic .seo-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.qp-foot{display:flex;flex-direction:column;gap:14px;margin-top:30px;max-width:760px}
.qp-foot .qp-cta{flex-direction:row;flex-wrap:wrap;align-items:center}
.qp-foot .qp-cta-text{flex:1;min-width:220px}
.qp-other{margin:0;font-size:15px;line-height:1.8;color:var(--muted)}
.qp-other a{color:var(--teal);font-weight:700}