:root{
  --ink:#142033;--muted:#667085;--line:#e6e9ef;--bg:#f6f8fb;--card:#fff;
  --accent:#2457e6;--accent2:#183ca8;--good:#1f9e6e;--warn:#f0b429;--bad:#c83a3a
}
*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:auto;padding:0 22px}
.brand{font-weight:900;font-size:24px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px}
.brand span{color:var(--accent)}
.badge{font-size:12px;border:1px solid var(--line);background:white;padding:8px 11px;border-radius:999px;color:var(--muted)}
main{max-width:1120px;margin:0 auto;padding:30px 22px 90px}
.hero{text-align:center;padding:30px 22px 50px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin-bottom:12px}
h1{font-size:clamp(36px,5.5vw,58px);line-height:1.05;margin:0 0 14px;letter-spacing:-.04em}
h2{font-size:24px;margin:0 0 10px;letter-spacing:-.02em}
.lead{font-size:17px;line-height:1.6;color:var(--muted);max-width:680px;margin:0 auto 28px}
.home-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left;margin-top:24px}
.task-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;min-height:150px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.task-card:hover{transform:translateY(-2px);border-color:#aebcf0;box-shadow:0 8px 24px #13204d0d}
.task-card span{font-size:28px}
.task-card strong{font-size:16px}
.task-card small{color:var(--muted);line-height:1.45}
.panel{max-width:900px;margin:0 auto}
.back{border:0;background:none;color:var(--accent);padding:0;margin-bottom:18px;cursor:pointer;font-weight:700}
.search input{width:100%;padding:14px;border:1px solid var(--line);border-radius:12px;background:white;outline:none}
.search input:focus{border-color:var(--accent)}
.state-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.state{display:flex;align-items:center;justify-content:space-between;padding:14px;background:white;border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:left;transition:transform .15s,border-color .15s}
.state:hover{transform:translateY(-1px);border-color:#aebcf0}
.state span{font-size:12px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin:14px 0}
.selected{display:flex;justify-content:space-between;align-items:center;gap:20px;background:white;border:1px solid var(--line);padding:18px;border-radius:14px;margin:18px 0}
.selected small{color:var(--muted);display:block;margin-top:4px}
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.roadmap div{background:#eef2ff;padding:14px;border-radius:12px;display:flex;gap:10px;align-items:center;font-size:14px}
.roadmap b{background:var(--accent);color:white;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:13px}
.cta{display:inline-block;background:var(--accent);color:white;text-decoration:none;border:0;border-radius:12px;padding:12px 18px;font-weight:800;cursor:pointer}
.cta:hover{background:var(--accent2);text-decoration:none}
.cta.secondary{background:white;color:var(--ink);border:1px solid var(--line)}
.notice{margin-top:14px;padding:14px;border-left:4px solid var(--warn);background:#fffaf0;color:#5f4a14;border-radius:8px;font-size:14px;line-height:1.6}
.chip{display:inline-block;font-size:12px;padding:4px 10px;border-radius:999px;background:#eef2ff;color:var(--accent);font-weight:700;margin-right:6px}
footer{border-top:1px solid var(--line);max-width:1120px;margin:30px auto;padding:25px 22px 50px;color:var(--muted);font-size:12px;line-height:1.6;text-align:center}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* Chat */
.chat-shell{max-width:780px;margin:0 auto}
.chat-window{background:var(--card);border:1px solid var(--line);border-radius:18px;min-height:480px;display:flex;flex-direction:column}
.chat-log{padding:18px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;max-height:60vh}
.chat-msg{padding:12px 14px;border-radius:14px;line-height:1.5;max-width:88%;white-space:pre-wrap}
.chat-msg.user{background:var(--accent);color:white;align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg.bot{background:#f1f4fb;color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--line)}
.chat-msg.bot a{color:var(--accent);font-weight:700}
.chat-msg .links{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.chat-msg .links a{font-size:13px}
.chat-suggest{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
.chat-suggest button{background:white;border:1px solid var(--line);padding:8px 12px;border-radius:999px;font-size:13px;cursor:pointer}
.chat-suggest button:hover{border-color:var(--accent)}
.chat-input{display:flex;border-top:1px solid var(--line);padding:12px;gap:8px}
.chat-input input{flex:1;padding:12px;border:1px solid var(--line);border-radius:12px;background:white;outline:none}
.chat-input button{background:var(--accent);color:white;border:0;border-radius:12px;padding:0 18px;font-weight:700;cursor:pointer}
.chat-empty{padding:30px 18px;color:var(--muted);text-align:center;font-size:14px}
.chat-empty p{margin:6px 0}

/* Quiz */
.quiz-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.progress{height:8px;background:#e8ebf2;border-radius:10px;overflow:hidden;margin:14px 0 8px}
.progress span{display:block;height:100%;background:var(--accent);transition:width .25s}
.quiz-q{font-size:20px;line-height:1.35;margin:14px 0 18px}
.answers{display:grid;gap:10px}
.answer-btn{background:white;border:1px solid var(--line);padding:14px;border-radius:12px;text-align:left;cursor:pointer;display:flex;gap:10px;align-items:center}
.answer-btn:hover{border-color:var(--accent)}
.answer-btn .letter{width:26px;height:26px;border-radius:50%;background:#f1f4fb;display:grid;place-items:center;font-weight:700;font-size:13px}
.answer-btn.correct{border-color:var(--good);background:#effaf5}
.answer-btn.correct .letter{background:var(--good);color:white}
.answer-btn.wrong{border-color:var(--bad);background:#fcecec}
.answer-btn.wrong .letter{background:var(--bad);color:white}
.quiz-meta{color:var(--muted);font-size:13px;margin-top:18px}
.score-card{text-align:center;padding:30px 20px}
.score-card .big{font-size:54px;font-weight:900;color:var(--accent);letter-spacing:-.02em;margin:14px 0}
.score-card .lbl{color:var(--muted)}
.disclaimer{margin-top:18px;padding:14px;border-left:4px solid var(--warn);background:#fffaf0;color:#5f4a14;border-radius:8px;font-size:13px;line-height:1.5}

/* Office finder */
.office-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.office-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.office-card h3{margin:0 0 6px;font-size:16px}
.office-card .meta{color:var(--muted);font-size:13px;line-height:1.5}
.office-card .services{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.office-card .services span{font-size:11px;background:#eef2ff;color:var(--accent);padding:3px 8px;border-radius:999px}
.locator-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

@media(max-width:860px){
  .home-grid,.state-grid,.roadmap,.office-grid,.row{grid-template-columns:1fr}
  .selected{flex-direction:column;align-items:flex-start}
}
@media(max-width:540px){
  main{padding-top:18px}
  .badge{display:none}
}