/* ============================================================
   CDL Pass-Ready — "Asphalt & Amber" premium theme
   Deep charcoal, road-amber, warm off-white. Layered surfaces,
   deliberate type scale, tactile interactions. No images.
   ============================================================ */
:root{
  --asphalt:#14181D; --asphalt2:#1B2129; --asphalt3:#28313D;
  --amber:#F5A800; --amber-hi:#FFB92E; --amber-dark:#B97A00;
  --cream:#FAF7F0; --cream2:#F3EDDD; --paper:#FFFDF8;
  --ink:#20262E; --muted:#5D6773; --line:#E4DCC8; --line-soft:#EDE6D4;
  --ok:#1E7B45; --ok-bg:#EAF5EE; --bad:#B3352B; --bad-bg:#FAECE9;
  --radius:16px; --radius-s:11px;
  --shadow-card:0 1px 2px rgba(20,24,29,.05),0 10px 30px -12px rgba(20,24,29,.18);
  --shadow-lift:0 2px 4px rgba(20,24,29,.06),0 18px 38px -14px rgba(20,24,29,.28);
  --shadow-btn:0 2px 0 #B97A00,0 10px 22px -8px rgba(245,168,0,.55);
  --ease:cubic-bezier(.22,.8,.32,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Avenir Next","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.65;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--amber);color:var(--asphalt)}
h1,h2,h3{color:var(--asphalt);line-height:1.16;margin:0 0 .55em;font-weight:800}
h1{font-size:2.55rem;letter-spacing:-.028em}
h2{font-size:1.72rem;letter-spacing:-.02em;margin-top:1.15em}
h2:first-child{margin-top:0}
h3{font-size:1.16rem;letter-spacing:-.008em;font-weight:750}
p{margin:0 0 1.05em}
a{color:var(--amber-dark);text-underline-offset:2px}
a:hover{color:var(--asphalt)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
header.site{background:linear-gradient(180deg,var(--asphalt2),var(--asphalt));color:var(--cream);border-bottom:3px solid var(--amber);box-shadow:0 6px 24px -12px rgba(20,24,29,.5)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:17px;padding-bottom:17px;gap:12px;flex-wrap:wrap}
.logo{font-weight:850;font-size:1.28rem;color:var(--cream);text-decoration:none;letter-spacing:-.02em}
.logo .tick{color:var(--amber)}
nav.main{display:flex;gap:6px;flex-wrap:wrap}
nav.main a{color:var(--cream);text-decoration:none;font-size:.94rem;font-weight:650;padding:7px 12px;border-radius:999px;opacity:.92;transition:background .18s var(--ease),color .18s var(--ease),opacity .18s}
nav.main a:hover{opacity:1;color:var(--amber);background:rgba(245,168,0,.1)}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(720px 340px at 85% -60px,rgba(245,168,0,.17),transparent 62%),
    radial-gradient(560px 300px at -80px 110%,rgba(245,168,0,.09),transparent 60%),
    linear-gradient(180deg,var(--asphalt2) 0%,var(--asphalt) 78%);
  color:var(--cream);padding:64px 0 54px;border-bottom:6px solid var(--amber);
}
.hero h1{color:var(--cream);max-width:15.5em}
.hero h1 .hl{color:var(--amber)}
.hero p.lede{font-size:1.21rem;line-height:1.55;max-width:620px;color:#D9DEE5}
.lang-edition{background:rgba(250,247,240,.05);border:1px solid rgba(250,247,240,.14);border-left:5px solid var(--amber);border-radius:12px;padding:15px 19px;margin:28px 0 4px;max-width:700px;font-size:.98rem;color:#D9DEE5;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.lang-edition strong{color:var(--cream)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:linear-gradient(180deg,var(--amber-hi),var(--amber));color:var(--asphalt);
  font-weight:800;text-decoration:none;padding:15px 28px;border-radius:12px;font-size:1.05rem;border:0;cursor:pointer;text-align:center;
  box-shadow:var(--shadow-btn);letter-spacing:.005em;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.btn:hover{background:linear-gradient(180deg,var(--amber-hi),var(--amber-hi));color:var(--asphalt);transform:translateY(-1px);box-shadow:0 3px 0 #B97A00,0 14px 26px -8px rgba(245,168,0,.6)}
.btn:active{transform:translateY(1px);box-shadow:0 0 0 #B97A00,0 4px 10px -4px rgba(245,168,0,.5)}
.btn.dark{background:linear-gradient(180deg,var(--asphalt3),var(--asphalt));color:var(--cream);box-shadow:0 2px 0 #000,0 10px 22px -10px rgba(20,24,29,.7)}
.btn.dark:hover{color:var(--amber);transform:translateY(-1px)}
.btn.dark:active{transform:translateY(1px);box-shadow:0 0 0 #000}
.btn.ghost{background:transparent;border:2px solid var(--asphalt);color:var(--asphalt);box-shadow:none}
.btn.ghost:hover{border-color:var(--amber-dark)}
.btn.small{padding:11px 19px;font-size:.95rem}
.btnrow{display:flex;gap:13px;flex-wrap:wrap;margin:22px 0}

/* ---------- layout sections ---------- */
section{padding:54px 0}
section.alt{background:linear-gradient(180deg,#fff,var(--paper));border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
section.tint{background:linear-gradient(180deg,var(--cream2),#EFE7D2)}

/* ---------- cards & facts ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:19px;margin:28px 0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card h3{margin-bottom:.35em}
.card h3 a{color:var(--asphalt);text-decoration:none}
.card h3 a:hover{color:var(--amber-dark)}
.card p{margin:0;color:var(--muted);font-size:.97rem}
.card .big{font-size:2rem;font-weight:850;color:var(--amber-dark);display:block;margin-bottom:4px;letter-spacing:-.03em}
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:15px;margin:24px 0}
.fact{background:linear-gradient(180deg,var(--asphalt2),var(--asphalt));color:var(--cream);border-radius:var(--radius);padding:20px 16px;text-align:center;border-top:4px solid var(--amber);box-shadow:var(--shadow-card)}
.fact .n{font-size:1.85rem;font-weight:850;color:var(--amber);display:block;letter-spacing:-.02em}
.fact .l{font-size:.88rem;color:#CBD2DA;line-height:1.45;display:block;margin-top:3px}

/* ---------- lock / kit panels ---------- */
.lockpanel{
  background:
    radial-gradient(600px 260px at 90% -40px,rgba(245,168,0,.14),transparent 60%),
    linear-gradient(180deg,var(--asphalt2),var(--asphalt));
  color:var(--cream);border-radius:20px;padding:34px;margin:30px 0;
  border:1px solid var(--asphalt3);box-shadow:var(--shadow-lift);
}
.lockpanel h2,.lockpanel h3{color:var(--cream)}
.lockpanel .tag{display:inline-block;background:linear-gradient(180deg,var(--amber-hi),var(--amber));color:var(--asphalt);font-weight:850;font-size:.84rem;letter-spacing:.02em;padding:5px 14px;border-radius:999px;margin-bottom:14px;box-shadow:0 4px 12px -4px rgba(245,168,0,.7)}
.lockpanel ul{margin:0 0 20px;padding-left:20px;color:#D9DEE5}
.lockpanel li{margin-bottom:.35em}
.lockpanel p{color:#D9DEE5}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);box-shadow:var(--shadow-card);margin:24px 0}
table.compare{width:100%;border-collapse:collapse;background:var(--paper);min-width:560px}
table.compare th,table.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:.97rem;vertical-align:top}
table.compare th{background:var(--asphalt);color:var(--cream);letter-spacing:.01em}
table.compare tr:last-child td{border-bottom:0}
table.compare td.ours{font-weight:700;background:#FFF6DC;color:var(--asphalt)}

/* ---------- FAQ ---------- */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:17px 21px;margin-bottom:12px;box-shadow:var(--shadow-card);transition:box-shadow .2s var(--ease)}
.faq details[open]{box-shadow:var(--shadow-lift)}
.faq summary{font-weight:750;cursor:pointer;color:var(--asphalt)}
.faq details p{margin:.65em 0 0;color:var(--muted)}

/* ---------- footer ---------- */
footer.site{background:linear-gradient(180deg,var(--asphalt),#10141A);color:#C9CFD6;padding:46px 0 32px;border-top:3px solid var(--amber)}
footer.site a{color:var(--cream);text-decoration:none}
footer.site a:hover{color:var(--amber)}
footer.site .cols{display:flex;gap:38px;flex-wrap:wrap;margin-bottom:24px}
footer.site h4{color:var(--cream);margin:0 0 11px;font-size:1rem;letter-spacing:.01em}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:8px;font-size:.95rem}
footer.site .fine{font-size:.85rem;color:#8A939E;border-top:1px solid var(--asphalt3);padding-top:17px}

/* ---------- prose / articles ---------- */
.prose{max-width:770px}
.prose h2{margin-top:1.5em}
.prose p,.prose li{font-size:1.03rem}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:23px}
.prose li{margin-bottom:.45em}
.callout{background:linear-gradient(180deg,#FFF8E2,#FFF3D1);border:1px solid var(--amber);border-radius:var(--radius);padding:24px 27px;margin:28px 0;box-shadow:var(--shadow-card)}
.callout h3{margin-bottom:.3em}
.stateline{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.stateline span{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:.9rem;font-weight:700;color:var(--asphalt);box-shadow:0 1px 2px rgba(20,24,29,.05)}
.stategrid{columns:2;column-gap:30px;margin:22px 0}
.stategrid a{display:block;padding:10px 6px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink);font-weight:650;break-inside:avoid;transition:background .15s,padding-left .15s}
.stategrid a:hover{background:#FFF6DC;padding-left:12px}
.stategrid a small{display:block;font-weight:400;color:var(--muted)}
@media(min-width:720px){.stategrid{columns:3}}

/* ---------- trainer ---------- */
.t-shell{max-width:840px;margin:0 auto}
.t-bar{
  background:linear-gradient(180deg,var(--asphalt2),var(--asphalt));color:var(--cream);
  border-radius:14px;padding:13px 18px 17px;margin:22px 0 6px;box-shadow:var(--shadow-card);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;position:relative;overflow:hidden;
}
.t-bar .timer{font-weight:850;font-size:1.18rem;color:var(--amber);font-variant-numeric:tabular-nums}
.t-progress{position:absolute;left:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--amber-dark),var(--amber));transition:width .35s var(--ease)}
.pill{display:inline-block;background:var(--asphalt3);color:var(--cream);border-radius:999px;padding:4px 13px;font-size:.85rem;font-weight:700}
.pill.amber{background:linear-gradient(180deg,var(--amber-hi),var(--amber));color:var(--asphalt)}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.qcard{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px;margin:18px 0;box-shadow:var(--shadow-lift);animation:riseIn .38s var(--ease)}
.qcard .qnum{font-size:.83rem;font-weight:800;color:var(--amber-dark);text-transform:uppercase;letter-spacing:.09em}
.qcard .qtext{font-size:1.26rem;font-weight:750;color:var(--asphalt);margin:9px 0 20px;line-height:1.42;letter-spacing:-.006em}
.choices{display:grid;gap:11px}
.choice{
  display:block;width:100%;text-align:left;background:var(--cream);border:2px solid var(--line);border-radius:12px;
  padding:15px 17px;font-size:1.01rem;cursor:pointer;color:var(--ink);font-family:inherit;line-height:1.45;
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
}
.choice:hover{border-color:var(--amber);background:#FFFDF4;transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(20,24,29,.25)}
.choice:active{transform:translateY(0)}
.choice.picked{border-color:var(--asphalt);background:#FFF6DC;box-shadow:inset 0 0 0 1px var(--asphalt)}
.choice.right{border-color:var(--ok);background:var(--ok-bg);box-shadow:inset 0 0 0 1px var(--ok)}
.choice.wrong{border-color:var(--bad);background:var(--bad-bg);box-shadow:inset 0 0 0 1px var(--bad)}
.choice:disabled{cursor:default}
.feedback{border-radius:12px;padding:17px 19px;margin-top:17px;font-size:.99rem;animation:riseIn .32s var(--ease)}
.feedback.good{background:var(--ok-bg);border:1px solid #BEE3CC}
.feedback.badf{background:var(--bad-bg);border:1px solid #F0CFC9}
.feedback .cite{display:block;margin-top:9px;font-weight:800;color:var(--asphalt);font-size:.9rem;letter-spacing:.02em}
.feedback .eswhy{display:block;margin-top:11px;padding-top:11px;border-top:1px dashed rgba(20,24,29,.25);color:var(--ink)}
.feedback .eslabel{display:inline-block;background:var(--asphalt);color:var(--amber);font-weight:850;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-right:9px;vertical-align:2px}

/* ---------- language toggle ---------- */
.langtoggle{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 17px;margin:20px 0 4px;box-shadow:var(--shadow-card)}
.langtoggle .lt-label{font-weight:800;color:var(--asphalt);font-size:.95rem}
.langtoggle .lt-note{flex-basis:100%;font-size:.88rem;color:var(--muted);margin-top:2px}
.lt-btn{font-family:inherit;font-weight:750;font-size:.93rem;padding:8px 16px;border-radius:999px;border:2px solid var(--line);background:var(--cream);color:var(--ink);cursor:pointer;transition:border-color .16s var(--ease),background .16s var(--ease)}
.lt-btn:hover{border-color:var(--amber)}
.lt-btn.sel{border-color:var(--asphalt);background:#FFF6DC;box-shadow:inset 0 0 0 1px var(--asphalt)}

/* ---------- pre-trip trainer ---------- */
.pt-shell{max-width:840px;margin:0 auto}
.pt-bar{background:linear-gradient(180deg,var(--asphalt2),var(--asphalt));color:var(--cream);border-radius:14px;padding:15px 19px;margin:22px 0 6px;box-shadow:var(--shadow-card);display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.pt-bar .timer{font-weight:850;font-size:1.15rem;color:var(--amber);font-variant-numeric:tabular-nums}
.pt-progress{position:absolute;left:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--amber-dark),var(--amber));transition:width .35s var(--ease)}
.pt-area{margin:30px 0 6px}
.pt-area h2{margin-bottom:.2em}
.pt-area .pt-sub{color:var(--muted);margin:0 0 14px;font-size:.97rem}
.pt-item{background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:11px;box-shadow:var(--shadow-card);animation:riseIn .3s var(--ease)}
.pt-item.done{border-color:var(--ok);background:var(--ok-bg)}
.pt-item.missed{border-color:var(--bad);background:var(--bad-bg)}
.pt-item .pt-name{font-weight:800;color:var(--asphalt);font-size:1.06rem}
.pt-item .pt-detail{color:var(--muted);font-size:.97rem;margin-top:3px}
.pt-item .pt-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}
.pt-btn{font-family:inherit;font-weight:800;font-size:.94rem;padding:10px 18px;border-radius:11px;border:2px solid var(--asphalt);background:var(--asphalt);color:var(--cream);cursor:pointer;transition:transform .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.pt-btn:hover{color:var(--amber);transform:translateY(-1px)}
.pt-btn:active{transform:translateY(0)}
.pt-btn.ghostbtn{background:transparent;color:var(--asphalt)}
.pt-btn.ghostbtn:hover{background:#FFF6DC;color:var(--asphalt)}
.pt-btn.goodbtn{background:var(--ok);border-color:var(--ok);color:#fff}
.pt-btn.badbtn{background:var(--bad);border-color:var(--bad);color:#fff}
.pt-status{font-weight:850;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase}
.pt-status.ok{color:var(--ok)} .pt-status.no{color:var(--bad)}
.verdictbox{
  background:
    radial-gradient(560px 240px at 92% -30px,rgba(245,168,0,.15),transparent 60%),
    linear-gradient(180deg,var(--asphalt2),var(--asphalt));
  border:1px solid var(--asphalt3);border-radius:20px;padding:27px;margin:22px 0;color:var(--cream);box-shadow:var(--shadow-lift);
}
.verdictbox .v{font-size:1.85rem;font-weight:850;letter-spacing:-.015em}
.verdictbox .v.ready{color:#63DB8F}.verdictbox .v.almost{color:var(--amber)}.verdictbox .v.notyet{color:#FF9584}
.score-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:8px 0 6px}
.score-big{font-size:3.4rem;font-weight:850;letter-spacing:-.04em;line-height:1;color:var(--asphalt)}
.score-chip{display:inline-block;font-weight:850;padding:7px 16px;border-radius:999px;font-size:.95rem}
.score-chip.pass{background:var(--ok-bg);color:var(--ok);border:1px solid #BEE3CC}
.score-chip.fail{background:var(--bad-bg);color:var(--bad);border:1px solid #F0CFC9}
.secbar{display:grid;grid-template-columns:118px 1fr 54px;gap:11px;align-items:center;font-size:.93rem;margin-bottom:9px}
.secbar .track{background:var(--cream2);border-radius:999px;height:12px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(20,24,29,.12)}
.secbar .fill{display:block;height:100%;border-radius:999px;transition:width .5s var(--ease)}
.secbar .fill.low{background:linear-gradient(90deg,#D0503F,var(--bad))} .secbar .fill.mid{background:linear-gradient(90deg,var(--amber-hi),var(--amber))} .secbar .fill.high{background:linear-gradient(90deg,#2E9E5B,var(--ok))}
.modegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:17px;margin:20px 0}
.modecard{background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:23px;text-align:left;cursor:pointer;width:100%;font-family:inherit;box-shadow:var(--shadow-card);transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}
.modecard:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.modecard:active{transform:translateY(0)}
.modecard h3{margin-bottom:.3em}
.modecard p{color:var(--muted);font-size:.95rem;margin:0}
.modecard.sel{border-color:var(--asphalt);background:#FFF6DC;box-shadow:inset 0 0 0 1px var(--asphalt),var(--shadow-card)}
.notice{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:12px;padding:17px 21px;margin:18px 0;box-shadow:var(--shadow-card)}
.checklist{list-style:none;padding:0;margin:16px 0}
.checklist li{padding:11px 15px;border:1px solid var(--line-soft);border-radius:11px;margin-bottom:8px;background:var(--paper);box-shadow:0 1px 2px rgba(20,24,29,.04)}
.checklist li b{color:var(--asphalt)}

@media(max-width:560px){
  body{font-size:16.5px}
  h1{font-size:2rem} h2{font-size:1.45rem}
  .hero{padding:42px 0 38px}
  .hero p.lede{font-size:1.1rem}
  section{padding:40px 0}
  .lockpanel{padding:26px 22px}
  .qcard{padding:23px 19px}
  .qcard .qtext{font-size:1.15rem}
  .score-big{font-size:2.7rem}
  .secbar{grid-template-columns:92px 1fr 48px}
}
@media print{
  header.site,footer.site,nav.main,.btnrow{display:none}
  body{background:#fff}
}