/* EarnMyLicense — site styles. Palette: navy #0B2A4A, pass green #1F9D55. */
:root{
  --navy:#0B2A4A; --navy-2:#10395f; --ink:#16283c; --muted:#52677d;
  --green:#1F9D55; --green-dark:#177a41; --bg:#f4f7fa; --card:#ffffff;
  --line:#d9e2ec; --red:#c0392b; --amber:#b7791f; --radius:14px;
  --shadow:0 2px 10px rgba(11,42,74,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--bg);font-size:18px;line-height:1.55;-webkit-text-size-adjust:100%;
  overflow-x:clip;overflow-wrap:break-word}
a{color:var(--navy);text-decoration-color:var(--green);text-underline-offset:3px}
img{max-width:100%}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px}

/* Header */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;gap:18px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:44px;width:auto;display:block}
.main-nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.main-nav a{padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:16px}
.main-nav a:hover{background:var(--bg)}

/* Hero */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 70%);color:#fff;padding:52px 0 46px}
.hero h1{font-size:clamp(30px,5.4vw,46px);line-height:1.12;margin:0 0 14px;font-weight:800;letter-spacing:-.5px}
.hero p.lede{font-size:clamp(18px,2.6vw,21px);color:#d4e0ee;margin:0 0 26px;max-width:640px}
.hero .tick{color:#7ed492;font-weight:700}
.picker{background:#fff;color:var(--ink);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);max-width:640px}
.picker label{display:block;font-weight:700;margin:0 0 8px}
.picker .row{display:flex;gap:10px;flex-wrap:wrap}
.picker select{flex:1 1 200px;min-width:0;max-width:100%;min-height:52px;font-size:17px;padding:0 12px;border:2px solid var(--line);border-radius:10px;background:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 22px;
  border-radius:12px;border:0;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none;line-height:1.2}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-block{width:100%}

/* Sections & cards */
section.block{padding:42px 0}
h2.sec{font-size:clamp(24px,3.6vw,32px);margin:0 0 8px;color:var(--navy);letter-spacing:-.3px}
p.sec-sub{color:var(--muted);margin:0 0 24px;max-width:680px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px;font-size:20px;color:var(--navy)}
.card p{margin:0 0 14px;color:var(--muted);font-size:16px}
.card .meta{font-size:14px;color:var(--muted);margin-bottom:12px}
.grid>*,.steps>*,.mode-cards>*{min-width:0}
.card table{width:100%;border-collapse:collapse;font-size:16px;margin-top:4px}
.card td{padding:8px 10px;border-top:1px solid var(--line);vertical-align:top}
.card tr:first-child td{border-top:0}
.card td:first-child{font-weight:600;color:var(--navy);width:42%}
a.card{display:block;text-decoration:none}
a.card:hover{border-color:var(--green)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.step .num{display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;
  align-items:center;justify-content:center;font-weight:800;margin-bottom:10px}
.step h3{margin:0 0 6px;font-size:18px}
.step p{margin:0;color:var(--muted);font-size:16px}

/* Ad slots (placeholders — AdSense tags go here at launch) */
.ad-slot{border:2px dashed var(--line);border-radius:var(--radius);background:#fbfcfd;color:#93a5b8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;margin:26px 0}
.ad-slot small{letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.ad-slot.leaderboard{min-height:110px}.ad-slot.infeed{min-height:180px}.ad-slot.footer-ad{min-height:110px}

/* Premium + app promo */
.premium{background:var(--navy);color:#fff;border-radius:var(--radius);padding:30px;margin:10px 0}
.premium h3{margin:0 0 8px;font-size:24px}
.premium p{color:#d4e0ee;margin:0 0 14px;max-width:640px}
.premium .badge{display:inline-block;background:var(--green);color:#fff;font-weight:700;font-size:13px;
  padding:4px 10px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.premium ul{margin:0 0 6px;padding-left:20px;color:#e8eff7}
.app-promo{display:flex;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);flex-wrap:wrap}
.app-promo img{width:72px;height:72px}
.app-promo>div{flex:1 1 180px;min-width:0}
.app-promo h3{margin:0 0 4px;color:var(--navy)}
.app-promo p{margin:0;color:var(--muted)}

/* FAQ */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer;color:var(--navy);min-height:32px}
.faq p{color:var(--muted);margin:10px 0 4px}

/* Breadcrumb */
.crumbs{font-size:15px;color:var(--muted);margin:22px 0 6px}
.crumbs a{color:var(--muted)}
.page-head h1{font-size:clamp(28px,4.6vw,40px);color:var(--navy);margin:4px 0 10px;letter-spacing:-.4px}
.page-head p{color:var(--muted);max-width:720px;margin:0 0 10px}

/* Quiz */
.quiz-shell{max-width:760px;margin:0 auto}
.quiz-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;flex-wrap:wrap;font-weight:700;color:var(--navy);font-size:16px}
.quiz-progress{height:10px;background:#e6edf4;border-radius:99px;overflow:hidden;margin:12px 0 18px}
.quiz-progress > div{height:100%;background:var(--green);width:0;transition:width .25s ease}
.sign-box{display:flex;justify-content:center;padding:6px 0 12px}
.sign-box svg{width:170px;height:auto;max-width:100%;display:block}
.q-text{font-size:21px;font-weight:700;color:var(--ink);margin:0 0 16px;line-height:1.4}
.options{display:grid;gap:10px}
.option-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;text-align:left;
  background:#fff;border:2px solid var(--line);border-radius:12px;font-size:17px;cursor:pointer;color:var(--ink)}
.option-btn .letter{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#eef3f8;color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.option-btn:hover{border-color:var(--navy)}
.option-btn.selected{border-color:var(--navy);background:#eef4fa}
.option-btn.correct{border-color:var(--green);background:#e9f7ef}
.option-btn.correct .letter{background:var(--green);color:#fff}
.option-btn.wrong{border-color:var(--red);background:#fdecea}
.option-btn.wrong .letter{background:var(--red);color:#fff}
.option-btn[disabled]{cursor:default;opacity:1}
.feedback{border-radius:12px;padding:14px 16px;margin-top:16px;font-size:16px}
.feedback.good{background:#e9f7ef;border:1px solid var(--green)}
.feedback.bad{background:#fdecea;border:1px solid var(--red)}
.feedback .why{color:var(--ink);margin:6px 0 0}
.feedback .verdict{font-weight:800}
.feedback.good .verdict{color:var(--green-dark)}
.feedback.bad .verdict{color:var(--red)}
.quiz-actions{position:sticky;bottom:0;background:linear-gradient(transparent,#fff 30%);padding:14px 0 calc(4px + env(safe-area-inset-bottom,0px));margin-top:14px;
  display:flex;gap:10px;flex-wrap:wrap}
.quiz-actions .btn{flex:1 1 160px}
.timer{font-variant-numeric:tabular-nums;background:#eef3f8;border-radius:8px;padding:4px 10px;white-space:nowrap}
.timer.low{background:#fdecea;color:var(--red)}
.results{text-align:center;padding:10px 0}
.results .big{font-size:52px;font-weight:800;color:var(--navy);margin:6px 0}
.results .pass{color:var(--green-dark);font-weight:800;font-size:22px}
.results .fail{color:var(--red);font-weight:800;font-size:22px}
.results table{margin:16px auto;border-collapse:collapse;font-size:16px;max-width:100%}
.results td,.results th{border:1px solid var(--line);padding:8px 14px}
.review-item{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0;text-align:left}
.review-item .rq{font-weight:700}
.review-item .ra{color:var(--green-dark)}
.review-item .ry{color:var(--red)}
.mini-note{font-size:14px;color:var(--muted)}
.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:14px}
.hidden{display:none !important}

/* Keyboard focus + motion preferences */
a:focus-visible,.btn:focus-visible,.option-btn:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--green);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .quiz-progress > div{transition:none}
}

/* Footer */
.site-footer{background:var(--navy);color:#c7d3e0;margin-top:56px;padding:38px 0 30px}
.site-footer .cols{display:flex;gap:34px;flex-wrap:wrap}
.site-footer img.flogo{height:52px;width:auto;margin-bottom:12px}
.site-footer h4{color:#fff;margin:0 0 10px;font-size:16px}
.site-footer a{color:#c7d3e0;text-decoration:none;display:block;padding:3px 0;font-size:15px}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .fine{border-top:1px solid rgba(255,255,255,.18);margin-top:26px;padding-top:18px;font-size:14px;color:#9db1c7;max-width:900px}
@media (max-width:560px){
  /* Header: two rows — brand row, then a full-width nav row of 44px targets */
  .site-header .wrap{flex-wrap:wrap;min-height:0;padding-top:8px;padding-bottom:8px;row-gap:2px}
  .brand{min-height:44px}
  .brand img{height:34px}
  .main-nav{flex:1 1 100%;margin-left:0;flex-wrap:nowrap;justify-content:space-between;gap:2px}
  .main-nav a{display:inline-flex;align-items:center;min-height:44px;padding:6px 7px;font-size:15px;white-space:nowrap}
  /* Hero + picker: dropdown gets its own row, Start becomes a full-width button */
  .hero{padding:34px 0 30px}
  .picker{padding:16px}
  .picker select{flex:1 1 100%}
  .picker .btn{width:100%}
  /* Spacing rhythm + card padding on small screens */
  section.block{padding:30px 0}
  .card,.step{padding:18px}
  .quiz-card{padding:30px 16px 16px} /* extra top padding: clears the ~107px sticky mobile header after the quiz engine's auto-scroll (fixed -80px offset in quiz.js) */
  .premium{padding:22px}
  .app-promo{padding:18px}
  .app-promo .btn{width:100%}
  /* Tables fit the card: tighter cells, smaller type */
  .card td{padding:7px 8px;font-size:15px}
  .results td,.results th{padding:6px 8px;font-size:15px}
  /* Quiz */
  .q-text{font-size:19px}
  .quiz-actions .btn{flex:1 1 42%}
  /* Remaining tap targets up to 44px-class */
  .faq summary{min-height:28px;padding-top:8px;padding-bottom:8px}
  .crumbs a{display:inline-block;padding:10px 3px}
  .site-footer a{padding:11px 0}
  .site-footer .cols{row-gap:24px}
}
@media (max-width:380px){
  .sign-box svg{width:132px}
  .results .big{font-size:44px}
}