/* CDL demand-test landing — mobile-first, dependency-free.
   Palette: trust navy + amber accent. Audience studies on phones, so phone-first. */
:root{
  --navy:#0e2a47; --navy-2:#16395f; --ink:#15233a; --muted:#5b6b80;
  --amber:#f5a623; --amber-d:#d6850a; --bg:#f7f9fc; --card:#ffffff;
  --ok:#1f9d57; --line:#e4eaf2; --radius:14px; --maxw:680px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
a{color:var(--navy)}
h1,h2,h3{line-height:1.2;color:var(--navy);margin:0 0 .4em}
h1{font-size:clamp(28px,7vw,42px);letter-spacing:-.01em}
h2{font-size:clamp(22px,5vw,30px)}
.lede{font-size:clamp(17px,2.6vw,20px);color:var(--muted);margin:0 0 24px}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;max-width:var(--maxw);margin:0 auto}
.brand{font-weight:800;color:var(--navy);font-size:18px;text-decoration:none;letter-spacing:-.02em}
.brand .dot{color:var(--amber)}
.lang-switch{font-size:14px;color:var(--muted);text-decoration:none;border:1px solid var(--line);padding:6px 12px;border-radius:999px;background:#fff}

/* hero */
.hero{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);padding:8px 0 28px;text-align:center}
.eyebrow{display:inline-block;background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:600;font-size:13px;padding:6px 14px;border-radius:999px;margin-bottom:18px}
.hero .flag{filter:saturate(1.1)}

/* form */
.lead{margin:22px auto 10px;max-width:440px}
.field{display:flex;gap:8px;flex-wrap:wrap}
.field input[type=email]{flex:1 1 220px;min-width:0;padding:15px 16px;font-size:16px;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.field input[type=email]:focus{outline:none;border-color:var(--navy)}
.btn{appearance:none;border:0;cursor:pointer;background:var(--amber);color:#1a1300;font-weight:800;font-size:16px;padding:15px 22px;border-radius:12px;box-shadow:0 2px 0 var(--amber-d);transition:transform .04s ease}
.btn:hover{filter:brightness(1.03)} .btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--amber-d)}
.btn.block{width:100%}
.microcopy{font-size:13px;color:var(--muted);margin:10px 2px 0}
.cta-secondary{display:inline-block;margin-top:6px}

/* survey */
.survey{max-width:440px;margin:8px auto 0;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.survey h3{margin-top:0}
fieldset{border:0;margin:0 0 16px;padding:0}
legend{font-weight:700;color:var(--ink);margin-bottom:8px;font-size:15px}
.opt{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;background:#fff;font-size:15px}
.opt:hover{border-color:#c9d6e6}
.opt input{accent-color:var(--navy);width:18px;height:18px}
.opt.sel{border-color:var(--navy);background:#f2f7ff}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:14px;padding:6px}
.done{text-align:center;background:#f1faf4;border:1px solid #cdedda;border-radius:var(--radius);padding:26px 20px;max-width:440px;margin:8px auto 0}
.done .big{font-size:34px}

/* sample question card — the differentiator made visible */
.proof{padding:34px 0}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 6px 24px rgba(14,42,71,.07);overflow:hidden;text-align:left;max-width:520px;margin:18px auto 0}
.qcard .q{padding:18px 18px 6px;font-weight:700;color:var(--ink)}
.qcard ul{list-style:none;margin:0;padding:6px 14px 4px}
.qcard li{border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;margin:8px 0;font-size:15px}
.qcard li.correct{border-color:var(--ok);background:#f1faf4;font-weight:600}
.qcard li.correct::after{content:"✓";color:var(--ok);float:right;font-weight:800}
.qcard .why{padding:4px 18px 0;color:var(--muted);font-size:14px}
.cite{display:flex;align-items:center;gap:8px;margin:14px 14px 16px;padding:11px 13px;background:#fff7e9;border:1px dashed var(--amber);border-radius:10px;font-size:13.5px;color:#7a5200}
.cite b{color:#5a3c00}

/* value props */
.values{padding:10px 0 18px}
.grid{display:grid;gap:14px}
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr 1fr}}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.vcard .ic{font-size:24px}
.vcard h3{font-size:17px;margin:8px 0 4px}
.vcard p{margin:0;color:var(--muted);font-size:14.5px}

/* why-trust band */
.band{background:var(--navy);color:#dfeaf7;padding:30px 0;margin:18px 0 0}
.band h2{color:#fff} .band p{color:#bcd0e6;margin:0 auto;max-width:560px}
.band .jobline{color:var(--amber);font-weight:700}

/* states row */
.states{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 0}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13.5px;color:var(--navy);font-weight:600}
.chip.soon{color:var(--muted);font-weight:500}

/* footer */
footer{padding:30px 0 50px;text-align:center;color:var(--muted);font-size:13px}
footer .disc{max-width:520px;margin:0 auto 12px}
.center{text-align:center}
.section{padding:26px 0}
.hp{position:absolute !important;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
[hidden]{display:none !important}