.roadmap-layout { display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding:3rem 0 4rem; align-items:start; }
.roadmap-intro h1 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.12; letter-spacing:-.04em; margin:1rem 0 1.5rem; }
.roadmap-eyebrow { color:var(--accent); font-weight:700; font-size:.85rem; letter-spacing:.03em; }
.roadmap-lead { font-size:1.15rem; color:var(--muted); }
.roadmap-points { margin:1.5rem 0; padding-left:1.3rem; }
.roadmap-points li { margin:.7rem 0; }
.roadmap-panel { border:1px solid var(--border); border-radius:var(--radius); padding:1.7rem; background:var(--bg-alt); box-shadow:var(--shadow-sm); min-width:0; }
.roadmap-panel h2 { font-size:1.35rem; line-height:1.35; margin-bottom:1.5rem; }
.roadmap-panel label { display:block; font-weight:650; }
.roadmap-small { font-size:.88rem; color:var(--muted); margin:.7rem 0; }
#website { width:100%; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--bg); padding:.85rem; font:inherit; margin:.4rem 0 1rem; min-height:48px; }
#website[aria-invalid="true"] { border-color:#b42318; }
.roadmap-error { color:#b42318; margin-bottom:1rem; }
.roadmap-panel .btn { min-height:48px; white-space:normal; cursor:pointer; font:inherit; }
.roadmap-panel .btn:disabled { opacity:.65; cursor:wait; }
#roadmap-submit { width:100%; }
#roadmap-progress { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border); }
#roadmap-progress h3 { font-size:1.1rem; margin-bottom:.6rem; }
#roadmap-status { overflow-wrap:anywhere; }
#roadmap-steps { padding-left:1.4rem; margin:1rem 0; color:var(--muted); }
#roadmap-steps li { padding:.2rem; }
#roadmap-steps [aria-current="step"] { color:var(--text); font-weight:700; }
.roadmap-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.roadmap-result { grid-column:1/-1; padding:1.5rem; border:1px solid var(--border); border-radius:var(--radius); overflow-wrap:anywhere; }
.roadmap-layout [hidden] { display:none !important; }
.roadmap-layout :focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
#roadmap-progress:focus, #roadmap-result:focus { outline:2px solid var(--accent); outline-offset:5px; }
@media (max-width:720px) { .roadmap-layout { grid-template-columns:1fr; gap:1.5rem; padding:1.5rem 0 2.5rem; } .roadmap-panel { padding:1.25rem; } .roadmap-intro h1 { font-size:2.2rem; } .roadmap-actions .btn { width:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; animation:none !important; } }

.roadmap-intro { padding:0; }
#roadmap-progress { padding-bottom:0; }