:root { --ink:#172033; --muted:#68738a; --nav:#0d2340; --blue:#1663d7; --sky:#eaf2ff; --line:#dfe6ef; --surface:#fff; --bg:#f5f7fb; --green:#11845b; --amber:#b96a00; --red:#c13b45; }
* { box-sizing:border-box; }
body { min-height:100vh; background:var(--bg); color:var(--ink); font-family:Inter,Segoe UI,Arial,sans-serif; }
.topbar { background:var(--nav); box-shadow:0 2px 12px rgba(10,27,51,.18); }
.brand-mark { width:2rem; height:2rem; border-radius:.65rem; display:inline-grid; place-items:center; background:#fff; color:var(--blue); font-weight:800; }
.topbar .nav-link { color:#c9d6e8; border-radius:.55rem; padding:.5rem .75rem; }
.topbar .nav-link:hover,.topbar .nav-link.active { color:#fff; background:rgba(255,255,255,.11); }
.page-shell { max-width:1320px; margin:0 auto; padding:2rem 1.25rem 4rem; }
.eyebrow { color:var(--blue); text-transform:uppercase; letter-spacing:.09em; font-size:.76rem; font-weight:750; }
.page-title { font-weight:750; letter-spacing:-.025em; }
.surface { background:var(--surface); border:1px solid var(--line); border-radius:1rem; box-shadow:0 7px 26px rgba(20,36,60,.06); }
.metric { padding:1.15rem 1.25rem; }
.metric-value { font-size:1.8rem; line-height:1; font-weight:800; }
.muted { color:var(--muted); }
.soft-badge { display:inline-flex; align-items:center; border-radius:99px; padding:.28rem .58rem; background:var(--sky); color:#164e9f; font-size:.76rem; font-weight:700; }
.file-icon { width:2.5rem; height:2.5rem; border-radius:.7rem; background:var(--sky); color:var(--blue); display:grid; place-items:center; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.fit-ring { --score:0; width:7.4rem; height:7.4rem; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--green) calc(var(--score)*1%),#e5eaf1 0); position:relative; flex:0 0 auto; }
.fit-ring:after { content:""; position:absolute; inset:.62rem; border-radius:50%; background:#fff; }
.fit-ring span { position:relative; z-index:1; font-size:1.65rem; font-weight:800; }
.gap-item { border-left:3px solid #efb04f; background:#fffaf1; padding:.75rem .9rem; border-radius:0 .55rem .55rem 0; }
.employer-picker { border:0; padding:0; margin:0; min-width:0; }
.employer-checklist { max-height:10rem; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; padding:.55rem; border:1px solid #d9e0e9; border-radius:.45rem; background:#fff; }
.employer-choice { display:flex; align-items:flex-start; gap:.4rem; padding:.3rem .4rem; border-radius:.35rem; font-size:.78rem; cursor:pointer; }
.employer-choice:hover { background:#f1f5fa; }
.employer-choice input { margin-top:.16rem; flex:0 0 auto; }
.bullet-example-picker { border:0; padding:0; margin:0; min-width:0; }
.bullet-examples { display:grid; gap:.4rem; }
.bullet-example { display:flex; align-items:flex-start; gap:.45rem; padding:.55rem .65rem; border:1px solid #dce3ec; border-radius:.45rem; background:#fff; font-size:.78rem; line-height:1.35; cursor:pointer; }
.bullet-example:hover { border-color:#8fb4e8; background:#f7faff; }
.bullet-example:has(input:checked) { border-color:#3978c9; background:#edf5ff; }
.bullet-example input { margin-top:.15rem; flex:0 0 auto; }
.employer-checklist-webforms > input { margin:.2rem .4rem .2rem .2rem; }
.employer-checklist-webforms > label { display:inline-block; width:calc(50% - 1.7rem); padding:.28rem .2rem; font-size:.78rem; vertical-align:top; }
.bullet-examples-webforms > input { margin:.75rem .45rem 0 .65rem; vertical-align:top; }
.bullet-examples-webforms > label { display:inline-block; width:calc(100% - 2.2rem); margin:.25rem 0; padding:.5rem .6rem; border:1px solid #dce3ec; border-radius:.45rem; background:#fff; font-size:.78rem; line-height:1.35; cursor:pointer; }
.bullet-examples-webforms > input:checked + label { border-color:#3978c9; background:#edf5ff; }
.evidence-item { border-left:3px solid #55b993; background:#f2fbf7; padding:.75rem .9rem; border-radius:0 .55rem .55rem 0; }
.bullet-card { break-inside:avoid; }
.bullet { padding:.8rem 0; border-top:1px solid #edf0f4; }
.bullet:first-child { border-top:0; }
.tag { display:inline-block; margin:.2rem .2rem 0 0; padding:.17rem .45rem; border-radius:.35rem; background:#f0f3f8; color:#596579; font-size:.72rem; }
.progress { height:.6rem; background:#e6ebf2; }
.table > :not(caption) > * > * { padding:.9rem .75rem; }
@media (max-width:767px) { .page-shell{padding:1.3rem .8rem 3rem}.fit-ring{width:6rem;height:6rem}.nav-scroll{overflow-x:auto;flex-wrap:nowrap}.nav-scroll .nav-link{white-space:nowrap}.employer-checklist{grid-template-columns:1fr} }
.auth-page { min-height: 100vh; background: radial-gradient(circle at top, #e6f0ff, #f4f7fb 45%); }
.auth-shell { max-width: 31rem; }
.auth-page .brand-mark { width: 3rem; height: 3rem; font-size: 1.3rem; place-items: center; margin: auto; }
.fit-ring-large { width: 9rem; height: 9rem; font-size: 1.45rem; }
.gap-editor { background: #fbfcff; border-color: #dfe6f0 !important; }
.how-hero { background: linear-gradient(180deg,#edf4ff 0,#f7f9fc 100%); }
.how-lead { max-width: 52rem; }
.py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.how-flow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 2rem; }
.how-step { display:flex; gap:1rem; padding:1.15rem 0; border-top:1px solid #e5eaf1; }
.how-step p,.how-card p { color:var(--muted); margin-bottom:0; }
.how-number { width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; background:#dce9fb; color:#123b68; font-weight:800; }
.how-card { padding:1.5rem; }
.how-icon { width:2.7rem; height:2.7rem; border-radius:.8rem; display:grid; place-items:center; margin-bottom:1rem; background:#e8f1ff; color:#0d6efd; font-weight:800; }
.truth-item { display:grid; gap:.2rem; padding:1rem 0; border-bottom:1px solid #e5eaf1; }
.truth-item:last-child { border-bottom:0; }
.truth-item span { color:var(--muted); }
.position-description { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; color:#2c3547; }
.how-cta { border-radius:1.25rem; background:linear-gradient(120deg,#123b68,#0d6efd); color:#fff; }
@media (max-width:767px) { .how-flow { grid-template-columns:1fr; } .py-lg-6 { padding-top:3rem !important; padding-bottom:3rem !important; } }