:root { --green:#3f8f6f; --pale:#eff7f2; --ink:#101828; --muted:#667085; --line:rgba(16,24,40,.1); --bg:#f7f8fb; --card:#fff; --radius:18px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); line-height:1.5; } button,input { font:inherit; } button { cursor:pointer; }
.topbar { height:76px; padding:0 max(24px,calc((100vw - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); background:rgba(247,248,251,.88); backdrop-filter:blur(14px); position:sticky; top:0; z-index:5; }.prototype-actions{display:flex;align-items:center;gap:10px}.prototype-actions button{padding:7px 10px;border:1px solid rgba(63,143,111,.25);border-radius:999px;background:#fff;color:#2f6f58;font-size:12px;font-weight:700}
.brand { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-weight:740; font-size:23px; letter-spacing:-.04em; text-decoration:none; }.brand-mark { display:grid; place-items:center; width:28px;height:28px;border-radius:9px;background:var(--green);color:#fff;font-size:16px; }
nav { display:flex; gap:8px; } nav a { color:var(--muted); text-decoration:none; font-size:14px; padding:8px 12px; border-radius:10px; } nav a.active,nav a:hover { color:#2f6f58; background:rgba(127,175,154,.16); }.prototype-badge,.estimate-tag { color:#276c53;background:#e7f3ec;border:1px solid rgba(63,143,111,.22);border-radius:999px;padding:5px 9px;font-size:12px;font-weight:650; }
main { max-width:1120px; margin:auto; padding:54px 24px 42px; }.hero { display:grid; grid-template-columns:1.45fr .75fr; gap:38px; align-items:center; margin-bottom:38px; }.eyebrow { margin:0 0 7px; color:#3f8065; font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:750; }.hero h1,.guidance h2,.next-steps h2 { font-size:clamp(34px,4vw,53px); line-height:1.07; letter-spacing:-.045em; margin:0; max-width:730px; }.lede { color:var(--muted); font-size:18px; max-width:680px; margin:18px 0; }.hero-note { color:#3a6452; font-size:14px;display:flex;align-items:center;gap:8px; }.dot { width:8px;height:8px;border-radius:50%;background:var(--green); }
.scheme-card { display:flex; gap:14px; padding:22px; background:linear-gradient(145deg,#ffffff,#edf7f1); border:1px solid rgba(63,143,111,.17); border-radius:var(--radius); box-shadow:0 12px 28px rgba(16,24,40,.06); }.scheme-icon { flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--green);font-weight:800; }.scheme-card span,.scheme-card p { display:block;margin:0;color:var(--muted);font-size:13px; }.scheme-card strong { display:block;font-size:16px;margin:3px 0; }
.workspace { display:grid;grid-template-columns:.85fr 1.15fr;gap:18px; }.inputs-card,.results-card,.projection-card { background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 7px 24px rgba(16,24,40,.035); }.inputs-card { padding:24px; }.card-heading,.results-heading { display:flex;justify-content:space-between;align-items:start;gap:10px; }.card-heading h2,.results-heading h2,.projection-card h2 { font-size:21px;letter-spacing:-.03em;margin:0; }.reset { background:transparent;border:0;color:#3f8065;font-size:13px;padding:2px; }.inputs-card label { display:block;font-size:13px;font-weight:600;color:#344054;margin-top:17px; }.inputs-card input { width:100%;border:1px solid #d0d5dd;border-radius:10px;padding:11px 12px;margin-top:6px;outline:none;color:var(--ink);background:#fff;transition:border .15s,box-shadow .15s; }.inputs-card input:focus { border-color:var(--green);box-shadow:0 0 0 3px rgba(63,143,111,.12); }.input-wrap { display:flex;align-items:center;gap:6px; }.input-wrap input { margin-top:6px; }.input-wrap b { margin-top:6px;color:#667085;font-size:14px; }.field-note { margin-top:19px;color:var(--muted);font-size:12px;line-height:1.45; }
.results-card { padding:26px; background:linear-gradient(145deg,#fff 0%,#fbfdfc 100%); }.hero-result { margin:27px 0 20px;padding-bottom:23px;border-bottom:1px solid var(--line); }.hero-result span,.metric-grid span { display:block;color:var(--muted);font-size:13px; }.hero-result strong { display:block;font-size:clamp(42px,6vw,61px);letter-spacing:-.055em;line-height:1.08;color:#1d5e47;margin:5px 0; }.hero-result small { color:var(--muted);font-size:12px; }.metric-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.metric-grid article { padding:14px;border-radius:12px;background:#f7faf8;border:1px solid rgba(63,143,111,.1); }.metric-grid strong { display:block;font-size:18px;letter-spacing:-.025em;margin-top:4px; }.progress-block { margin-top:25px;padding-top:20px;border-top:1px solid var(--line); }.progress-label { display:flex;justify-content:space-between;font-size:13px; }.progress-label strong { color:#3a6f58; }.progress { height:8px;border-radius:8px;background:#e6eee9;margin:10px 0;overflow:hidden; }.progress i { display:block;height:100%;width:0;background:linear-gradient(90deg,#3f8f6f,#89bda3);border-radius:8px;transition:width .3s ease; }.progress-block p { margin:0;color:var(--muted);font-size:13px; }
.projection-card { margin-top:18px;padding:26px; }.projection-card .card-heading p:not(.eyebrow) { margin:4px 0 0;color:var(--muted);font-size:14px; }.legend { font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px; }.legend span { width:9px;height:9px;border-radius:50%;background:var(--green); }.chart-shell { height:218px;margin-top:25px;padding:10px 0 0;border-bottom:1px solid #d9e2dd; }.chart { display:flex;align-items:end;gap:3px;height:100%; }.chart i { flex:1;min-width:3px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#81b99d,#3f8f6f);opacity:.94;transition:height .25s ease; }.chart-labels { display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:12px; }
.guidance { display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;margin:76px 0; }.guidance h2,.next-steps h2 { font-size:32px; }.guidance-intro>p:last-child,.next-steps p:last-child { color:var(--muted); }.guidance-grid { display:grid;gap:12px; }.guidance-grid article { padding:18px 20px;border-left:2px solid #b8d7c6;background:#fff;border-radius:0 12px 12px 0; }.guidance-grid h3 { margin:5px 0;font-size:16px; }.guidance-grid p { margin:0;color:var(--muted);font-size:14px; }.number { color:#3f8065;font-size:12px;font-weight:750;letter-spacing:.1em; }.next-steps { display:flex;justify-content:space-between;align-items:center;gap:34px;background:#274839;color:#fff;border-radius:var(--radius);padding:34px; }.next-steps .eyebrow { color:#bddcc9; }.next-steps h2 { max-width:600px; }.next-steps p:last-child { color:#d6e4dc;max-width:630px; }.scenario-buttons { display:grid;gap:10px;min-width:220px; }.scenario-buttons button { background:#fff;color:#274839;border:0;border-radius:10px;padding:12px 15px;font-size:13px;font-weight:650;text-align:left; }.scenario-buttons button:last-child { background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35); }.disclaimer { max-width:900px;margin:28px auto 0;color:var(--muted);font-size:12px;text-align:center; }
@media(max-width:760px){.topbar { height:64px;padding:0 16px;}.topbar nav { display:none; }.prototype-badge{font-size:11px}.brand{font-size:21px}main{padding:35px 16px}.hero,.workspace,.guidance{grid-template-columns:1fr;gap:20px}.hero{margin-bottom:25px}.lede{font-size:16px}.scheme-card{padding:17px}.metric-grid{grid-template-columns:1fr}.projection-card,.inputs-card,.results-card{padding:20px}.guidance{margin:52px 0}.next-steps{display:block;padding:25px}.scenario-buttons{margin-top:20px}.chart-shell{height:160px}}

.pay-scale-picker { margin-top:17px; padding:14px; border:1px solid rgba(63,143,111,.18); border-radius:12px; background:#f6fbf8; }
.pay-scale-picker label { margin:0 0 12px; }
.pay-scale-picker label:last-of-type { margin-bottom:0; }
.pay-scale-picker select { width:100%; margin-top:6px; padding:10px 12px; background:#fff; border:1px solid #d0d5dd; border-radius:10px; color:var(--ink); }
.pay-scale-picker p { margin:10px 0 0; color:#587064; font-size:11px; line-height:1.4; }
.onboarding{min-height:calc(100vh - 140px);display:grid;place-items:center;padding:38px 0}.start-card{width:min(100%,620px);min-height:470px;padding:30px;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 24px 60px rgba(16,24,40,.11);animation:floatIn .7s ease both}.onboarding-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:48px}.onboarding-progress i{height:4px;border-radius:999px;background:#e4e9e6;transition:background .25s ease,transform .25s ease}.onboarding-progress i.active{background:var(--green);transform:scaleY(1.3)}.onboarding-panel{animation:panelIn .36s cubic-bezier(.2,.8,.2,1) both}.onboarding-panel[hidden]{display:none}.onboarding-panel h1{max-width:530px;font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-.055em;margin:7px 0 16px}.onboarding-panel>p:not(.eyebrow){max-width:490px;margin:0 0 35px;color:var(--muted);font-size:17px}.step-count{display:block;color:#8b978f;font-size:12px;font-weight:750;letter-spacing:.1em}.question-field{display:block;color:#344054;font-size:13px;font-weight:750}.question-field input,.question-field select{display:block;width:100%;margin-top:8px;padding:16px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;color:var(--ink);font-size:18px}.question-field input:focus,.question-field select:focus{outline:3px solid rgba(63,143,111,.16);border-color:var(--green)}.start-card button{margin-top:28px;padding:14px 17px;border:0;border-radius:12px;background:#3f8f6f;color:#fff;font-weight:750;font-size:15px}.start-card button span{margin-left:8px;font-size:20px}.onboarding-actions{display:flex;justify-content:space-between;gap:12px}.onboarding-actions .onboarding-back{background:#eef4f0;color:#285d47}.onboarding-actions .onboarding-next,.onboarding-actions button[type=submit]{margin-left:auto}.career-card{display:none}.career-ready .onboarding,.career-ready .hero,.career-ready .workspace,.career-ready .projection-card,.career-ready .guidance,.career-ready .next-steps,.career-ready .disclaimer{display:none}.career-ready .career-card{display:block;animation:rise .65s cubic-bezier(.2,.8,.2,1) both}@keyframes floatIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes panelIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}@keyframes rise{from{opacity:0;transform:translateY(36px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:760px){.onboarding{min-height:auto;padding:35px 0}.start-card{min-height:450px;padding:24px}.onboarding-progress{margin-bottom:34px}.onboarding-panel h1{font-size:37px}.onboarding-panel>p:not(.eyebrow){font-size:16px}}
.sector-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sector-choices button{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;min-height:156px;margin:0!important;padding:18px!important;border:1px solid #d2e3da!important;background:#f8fcfa!important;color:#245b46!important;text-align:left;transition:border-color .18s ease,background .18s ease,transform .18s ease}.sector-choices button:hover,.sector-choices button.selected{border-color:var(--green)!important;background:#eaf6f0!important;transform:translateY(-2px)}.sector-watermark{position:absolute;inset:13px 12px 37px;z-index:-1;display:grid;place-items:center;opacity:.12;color:#267b60;pointer-events:none}.sector-watermark img{width:100%;max-height:100%;object-fit:contain}.sector-watermark svg{width:82%;height:82%;fill:currentColor}.sector-watermark.civil-service{font-size:105px;line-height:1;color:#8a6225;opacity:.09}.sector-choices button:hover .sector-watermark,.sector-choices button.selected .sector-watermark{opacity:.18}.sector-choices button:hover .sector-watermark.civil-service,.sector-choices button.selected .sector-watermark.civil-service{opacity:.14}.sector-choices b,.sector-choices span{position:relative;z-index:1}.sector-choices b{font-size:16px}.sector-choices span{color:#587064;font-size:12px;font-weight:500}.career-start-line{display:grid;grid-template-columns:1.45fr .55fr;gap:12px}.question-field select option:disabled{color:#98a2b3}@media(max-width:600px){.sector-choices,.career-start-line{grid-template-columns:1fr}}
.hero,.workspace,.projection-card,.guidance,.next-steps,.disclaimer { display:none !important; }
.career-card { margin-top:18px;padding:26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 7px 24px rgba(16,24,40,.035); }.career-card .card-heading p:not(.eyebrow){color:var(--muted);margin:4px 0 0;font-size:14px}.career-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:20px;align-items:start}.career-left{min-width:0;max-width:100%;overflow:visible}.career-chart-heading{display:flex;justify-content:space-between;gap:20px;align-items:end}.career-chart-heading h3{margin:0;color:var(--ink);font-size:1.15rem}.career-chart-heading p:last-child{max-width:280px;margin:0;color:var(--muted);font-size:.82rem;line-height:1.45;text-align:right}.career-summary{min-width:0;display:grid;gap:8px;padding:22px;border:1px solid rgba(35,124,104,.18);border-radius:22px;background:linear-gradient(145deg,#effaf6,#fff);box-shadow:0 16px 35px rgba(28,78,66,.08)}.career-summary h3{margin:0 0 12px;color:var(--ink);font-size:1.25rem}.career-summary span{color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}.career-summary strong{margin:-3px 0 14px;color:#245b46;font-size:clamp(1.45rem,2.6vw,2.1rem);letter-spacing:-.05em;white-space:nowrap}.career-summary p:last-child{margin:4px 0 0;color:var(--muted);font-size:.84rem;line-height:1.5}.career-timeline{width:100%;height:190px;margin:24px 0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));align-items:end;gap:2px;overflow:visible;border-bottom:1px solid #d7e2dc;padding:0 4px}.career-year{position:relative;min-width:0;width:100%;border:0;border-radius:5px 5px 0 0;background:linear-gradient(#9dceb4,#3f8f6f);cursor:pointer}.career-year.break{background:repeating-linear-gradient(135deg,#d7dfda 0 5px,#f3f6f4 5px 10px)}.career-year.promotion{box-shadow:0 -5px 0 #172b22}.career-year:hover{z-index:3}.career-year:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:6px 8px;background:#172b22;color:#fff;border-radius:7px;font-size:11px;z-index:4}.event-builder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}.event-builder>*{min-width:0}.event-builder label{font-size:12px;font-weight:650;color:#344054}.event-builder input,.event-builder select{display:block;width:100%;margin-top:5px;padding:9px;border:1px solid #d0d5dd;border-radius:9px;background:#fff}.event-builder button{border:0;border-radius:9px;padding:10px 13px;background:#3f8f6f;color:#fff;font-weight:700}.event-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.event-pill{padding:8px 10px;background:#eff7f2;border-radius:999px;color:#285d47;font-size:12px}.event-pill button{margin-left:6px;border:0;background:none;color:#8a2c2c;font-size:14px}@media(max-width:920px){.career-layout{grid-template-columns:1fr}.career-summary{grid-template-columns:1fr 1fr;column-gap:18px}.career-summary .eyebrow,.career-summary h3,.career-summary p:last-child{grid-column:1/-1}}@media(max-width:760px){.career-chart-heading{display:block}.career-chart-heading p:last-child{max-width:none;margin-top:8px;text-align:left}.career-summary{grid-template-columns:1fr}.career-summary .eyebrow,.career-summary h3,.career-summary p:last-child{grid-column:auto}.event-builder{grid-template-columns:1fr 1fr}.event-builder button{grid-column:span 2}.career-card{padding:20px}}
.timeline-prompt{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:-6px 0 18px;padding:12px 14px;border-radius:12px;background:#edf7f1;animation:rise .22s ease both}.timeline-prompt span{color:#587064;font-size:12px}.timeline-prompt button{border:1px solid rgba(63,143,111,.25);border-radius:999px;padding:6px 10px;background:#fff;color:#2f6f58;font-size:12px;font-weight:700}
.event-modal{width:min(100% - 32px,480px);padding:0;border:0;border-radius:22px;box-shadow:0 28px 80px rgba(16,24,40,.28)}.event-modal::backdrop{background:rgba(16,24,40,.42);backdrop-filter:blur(3px)}.event-modal form{padding:26px}.modal-heading{display:flex;justify-content:space-between;gap:20px;align-items:start}.modal-heading h2{margin:4px 0 0;font-size:1.65rem;letter-spacing:-.04em}.modal-close{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#eff4f1;color:#285d47;font-size:24px;line-height:1}.event-modal form>p{margin:18px 0 22px;color:var(--muted);font-size:14px;line-height:1.5}.promotion-comparison{margin:0 0 20px;padding:13px 15px;border-radius:12px;background:#eff7f2}.promotion-comparison>span{color:#557164;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.promotion-comparison table{width:100%;margin-top:5px;border-collapse:collapse}.promotion-comparison th,.promotion-comparison td{padding:5px 0;text-align:left}.promotion-comparison th{color:#587064;font-size:13px;font-weight:600}.promotion-comparison td{color:#245b46;text-align:right;font-weight:800}.event-modal label{display:block;margin-top:15px;color:#344054;font-size:13px;font-weight:700}.event-modal label[hidden],.event-modal .promotion-comparison[hidden]{display:none!important}.event-modal select,.event-modal input{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;color:var(--ink);font-size:16px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}.modal-actions button{padding:11px 14px;border:0;border-radius:10px;background:var(--green);color:#fff;font-weight:750}.modal-actions .modal-cancel{background:#eef4f0;color:#285d47}
.career-year{transition:background .16s ease,filter .16s ease,transform .16s ease}.career-year.current{background:linear-gradient(#f5c76b,#d88822);box-shadow:0 -5px 0 #9a5a10}.career-year.current.promotion{box-shadow:0 -5px 0 #9a5a10}.career-year:hover{background:linear-gradient(#55b391,#17684f);filter:saturate(1.2);transform:scaleX(1.08)}
.promotion-label{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);padding:3px 6px;border-radius:6px;background:#172b22;color:#fff;font-size:10px;font-weight:750;letter-spacing:.02em;line-height:1;white-space:nowrap;pointer-events:none}
.lsi-label{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);padding:3px 6px;border-radius:6px;background:#2f6f92;color:#fff;font-size:10px;font-weight:750;letter-spacing:.02em;line-height:1;white-space:nowrap;pointer-events:none}.career-year.promotion .lsi-label{bottom:calc(100% + 33px)}
.career-year.promotion:hover::after{bottom:calc(100% + 34px)}
.career-year.lsi:hover::after{bottom:calc(100% + 34px)}
.scheme-link{width:max-content;max-width:100%;margin:-2px 0 7px;color:#28765b;font-size:.82rem;font-weight:750;line-height:1.3;text-decoration:none}.scheme-link:hover{text-decoration:underline}.scheme-link span{font-size:.9em}
.retirement-slider{display:grid;grid-template-columns:auto 1fr;gap:14px 22px;align-items:center;margin:8px 0 22px;padding:16px 18px;border:1px solid #dce9e2;border-radius:16px;background:#fbfdfc}.retirement-slider h3{margin:3px 0 0;font-size:1.05rem}.retirement-slider input{width:100%;accent-color:var(--green)}.retirement-slider output{color:#28765b}.cner-option{grid-column:2;display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #cae5d9;border-radius:11px;background:#f1faf5;color:#174d3a;cursor:pointer}.cner-option input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto}.cner-option b,.cner-option small{display:block}.cner-option b{font-size:13px}.cner-option small{margin-top:2px;color:var(--muted);font-size:12px;line-height:1.35}.retirement-slider>p{grid-column:2;margin:0;color:var(--muted);font-size:12px;line-height:1.45}.retirement-slider>p:empty{display:none}@media(max-width:600px){.retirement-slider{grid-template-columns:1fr;gap:12px}.retirement-slider>p,.cner-option{grid-column:auto}}
.event-choice-modal{width:min(100% - 32px,480px);padding:0;border:0;border-radius:22px;box-shadow:0 28px 80px rgba(16,24,40,.28)}.event-choice-modal::backdrop{background:rgba(16,24,40,.42);backdrop-filter:blur(3px)}.event-choice-modal>div{position:relative;padding:28px}.event-choice-modal h2{max-width:340px;margin:5px 0 10px;font-size:1.65rem;letter-spacing:-.04em}.event-choice-modal p:not(.eyebrow){margin:0 0 22px;color:var(--muted);font-size:14px}.event-choice-modal .modal-close{position:absolute;top:22px;right:22px}.event-choice-actions{display:grid;gap:10px}.event-choice-actions button{display:grid;gap:3px;padding:15px;border:1px solid #cfe2d8;border-radius:13px;background:#f8fcfa;color:#245b46;text-align:left}.event-choice-actions button:hover{border-color:var(--green);background:#eff7f2}.event-choice-actions b{font-size:15px}.event-choice-actions span{color:#587064;font-size:12px}
.career-baseline{display:grid;grid-template-columns:.55fr .8fr 2fr 1fr .7fr;gap:9px;margin:20px 0}.career-baseline label{font-size:11px;font-weight:700;color:#586475}.career-baseline input,.career-baseline select{display:block;width:100%;margin-top:4px;padding:9px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#172033}@media(max-width:760px){.career-baseline{grid-template-columns:1fr 1fr}.career-baseline label:nth-child(3){grid-column:span 2}}
.career-layout{grid-template-columns:minmax(0,3fr) minmax(210px,1fr)}.pension-amount{display:flex;gap:11px;align-items:start}.pension-amount small{margin-top:4px;padding-left:10px;border-left:1px solid #cce0d5;display:grid;gap:1px}.pension-amount small span{font-size:.6rem}.pension-amount small b{color:#245b46;font-size:.87rem;white-space:nowrap}.retirement-comparison{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center;margin-top:24px;padding:22px;border:1px solid #dce9e2;border-radius:18px;background:#fbfdfc}.retirement-comparison h3{margin:3px 0 7px;font-size:1.1rem}.retirement-comparison p:last-child{margin:0;color:var(--muted);font-size:.83rem;line-height:1.45}.comparison-table-wrap{overflow:auto}.retirement-comparison table{width:100%;border-collapse:collapse}.retirement-comparison th,.retirement-comparison td{padding:10px 8px;border-bottom:1px solid #e4eee8;text-align:right;font-size:.83rem}.retirement-comparison th{color:#667085;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}.retirement-comparison th:first-child,.retirement-comparison td:first-child{text-align:left}.retirement-comparison tr:last-child td{border-bottom:0}.retirement-comparison td:not(:first-child){color:#245b46;font-weight:800;white-space:nowrap}.retirement-comparison input{width:52px;padding:6px;border:1px solid #cfdbd4;border-radius:8px;background:#fff;color:#172033;font-weight:750}.retirement-comparison label span{color:#667085;font-size:.75rem}@media(max-width:760px){.retirement-comparison{grid-template-columns:1fr;gap:16px}}
.sector-choices button{display:grid;place-items:center;align-content:center;gap:4px;min-height:122px;padding:14px!important;text-align:center}.sector-watermark{inset:8px;opacity:.15}.sector-watermark img{width:100%;height:100%;max-height:none}.sector-watermark svg{width:100%;height:100%}.sector-watermark.civil-service{font-size:72px}.sector-choices b,.sector-choices span{grid-column:1;position:relative;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.85)}.sector-choices b{font-size:16px}.sector-choices span{font-size:12px}.sector-choices button:hover .sector-watermark,.sector-choices button.selected .sector-watermark{opacity:.22}
.career-summary{min-width:0}.career-summary .scheme-link{width:auto;max-width:100%;overflow-wrap:anywhere;white-space:normal}.career-summary .scheme-link span{display:inline;white-space:nowrap}
.promotion-label{cursor:pointer;pointer-events:auto}.promotion-label:hover{background:#8a2c2c}.break-label{background:#61706a}
.career-year.break .break-label{bottom:auto;top:-180px}
.sector-choices button{transition:border-color .28s ease,background .28s ease,transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease,filter .28s ease,box-shadow .32s ease}.sector-choices.has-selection button:not(.selected){opacity:.42;filter:saturate(.65);transform:scale(.91)}.sector-choices.has-selection button.selected{z-index:2;opacity:1;filter:none;transform:translateY(-5px) scale(1.055);border-color:#277a5d!important;background:linear-gradient(145deg,#e8f7ef,#fafffc)!important;box-shadow:0 15px 28px rgba(36,91,70,.2)}.sector-choices.has-selection button.selected .sector-watermark{opacity:.28}
@media(max-width:600px){.sector-choices{grid-auto-rows:118px;gap:8px}.sector-choices button{height:118px;min-height:0!important;padding:11px!important}.sector-watermark{inset:9px 14px 31px}.sector-watermark img,.sector-watermark svg{max-height:68px}.sector-watermark.civil-service{font-size:62px}.sector-choices b{font-size:14px}.sector-choices span{font-size:11px}}
.age-step-action{display:flex;align-items:center;gap:12px;margin-top:28px}.age-step-action .onboarding-next{margin-top:0}.age-transition{color:#3f8f6f;font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none}.age-transition.active{animation:ageTransition .44s ease both}@keyframes ageTransition{0%{opacity:0;transform:translateX(-5px)}28%,60%{opacity:1;transform:none}100%{opacity:0;transform:translateX(6px)}}
.name-greeting{min-height:19px;margin:7px 0 -1px!important;color:#3f8f6f!important;font-size:13px!important;font-weight:700;letter-spacing:.01em}.name-greeting.active{animation:nameGreeting .82s ease both}@keyframes nameGreeting{0%{opacity:0;transform:translateY(4px)}20%,67%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
.teacher-allowances{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;align-items:end;margin:-3px 0 20px;padding:15px 17px;border:1px solid #dce9e2;border-radius:15px;background:#fbfdfc}.teacher-allowances[hidden]{display:none}.teacher-allowances h3{margin:2px 0 4px;font-size:1rem}.teacher-allowances p:last-child{margin:0;color:var(--muted);font-size:.77rem;line-height:1.4}.teacher-allowance-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.teacher-allowance-fields[hidden]{display:none}.teacher-allowance-fields label{font-size:.74rem;font-weight:700;color:#586475}.teacher-allowance-fields select{display:block;width:100%;margin-top:4px;padding:8px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;color:#172033}@media(max-width:760px){.teacher-allowances,.teacher-allowance-fields{grid-template-columns:1fr}}
.onboarding-allowances{display:block;margin:16px 0 0;padding:18px 20px}.onboarding-allowances>div:first-child{max-width:100%}.onboarding-allowances h3{font-size:1.1rem}.onboarding-allowances p:last-child{max-width:520px}.onboarding-allowances .teacher-allowance-fields{margin-top:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.onboarding-allowances .teacher-allowance-fields label{min-width:0}.onboarding-allowances .teacher-allowance-fields select{min-width:0;font-size:.86rem}@media(max-width:600px){.onboarding-allowances .teacher-allowance-fields{grid-template-columns:1fr}}
.onboarding-panel h1.sector-step-title{max-width:none;font-size:clamp(22px,2.25vw,28px);line-height:1.08;letter-spacing:-.045em;white-space:nowrap}@media(max-width:600px){.onboarding-panel h1.sector-step-title{font-size:clamp(22px,6.4vw,30px);white-space:normal}}
@media(min-width:761px){.onboarding{min-height:calc(100svh - 76px);padding:20px 0}.start-card{width:min(100%,840px);min-height:0;padding:24px 30px}.onboarding-progress{margin-bottom:28px}.onboarding-panel>p:not(.eyebrow){margin-bottom:24px}.onboarding-actions button{margin-top:18px}}
/* Compact onboarding: a focused reading column, clear grouping, and accessible controls. */
@media(min-width:761px){body:not(.career-ready) main{padding:0 24px}.onboarding{padding:18px 0}.start-card{width:min(100%,660px);padding:26px 28px;border-radius:22px}.onboarding-progress{margin-bottom:22px}.onboarding-panel h1{max-width:560px;font-size:clamp(30px,3vw,42px);line-height:1.08;letter-spacing:-.045em;margin:4px 0 10px}.onboarding-panel>p:not(.eyebrow){max-width:540px;margin-bottom:20px;font-size:16px}.question-field{font-size:13px}.question-field input,.question-field select{min-height:46px;margin-top:6px;padding:11px 13px;font-size:16px;border-radius:10px}.name-greeting{min-height:17px;margin:5px 0 -1px!important;font-size:12px!important}.start-card button{min-height:44px;margin-top:18px;padding:10px 14px;font-size:14px}.start-card button span{font-size:17px}.onboarding-actions button{margin-top:18px}.sector-choices{gap:9px}.sector-choices button{min-height:112px;padding:12px!important}.sector-choices b{font-size:15px}.sector-choices span{font-size:12px}.onboarding-panel h1.sector-step-title{font-size:26px;line-height:1.12}.onboarding-allowances{margin-top:12px;padding:14px 16px}.onboarding-allowances .teacher-allowance-fields{margin-top:12px}}
.estimate-info-trigger{justify-self:start;margin:2px 0 0;padding:0;border:0;background:transparent;color:#28765b;font-size:.8rem;font-weight:750;text-decoration:underline;text-underline-offset:3px}.estimate-info-trigger span{margin-left:4px;color:inherit;font-size:inherit;text-transform:none}.estimate-info-trigger:hover{color:#1d5e47}.estimate-info-modal{width:min(100% - 32px,480px);padding:0;border:0;border-radius:22px;box-shadow:0 28px 80px rgba(16,24,40,.28)}.estimate-info-modal::backdrop{background:rgba(16,24,40,.42);backdrop-filter:blur(3px)}.estimate-info-modal>div{position:relative;padding:28px}.estimate-info-modal .modal-close{position:absolute;top:22px;right:22px}.estimate-info-modal h2{max-width:360px;margin:5px 42px 12px 0;font-size:1.55rem;letter-spacing:-.04em}.estimate-info-modal p:not(.eyebrow){margin:0 0 20px;color:var(--muted);font-size:.95rem;line-height:1.55}.estimate-info-link{display:inline-flex;gap:5px;color:#28765b;font-size:.88rem;font-weight:750;text-decoration:none}.estimate-info-link:hover{text-decoration:underline}
.career-timeline-frame{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:stretch}.salary-axis{display:flex;flex-direction:column;align-items:center;min-height:190px;margin:24px 0 18px;color:#718079}.salary-axis i{width:1px;flex:1;background:#cbd8d1}.salary-axis span{padding:7px 0;color:#66776d;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.career-timeline-frame .career-timeline{margin-left:0}.current-marker{position:absolute;bottom:calc(100% + 26px);left:50%;z-index:2;transform:translateX(-50%);padding:5px 8px;border-radius:999px;background:#9a5a10;color:#fff;font-size:10px;font-weight:800;letter-spacing:.01em;line-height:1;white-space:nowrap;box-shadow:0 4px 10px rgba(117,68,13,.18);pointer-events:none}.current-marker::after{content:"";position:absolute;top:100%;left:50%;width:1px;height:20px;background:#9a5a10}.career-year.current:has(.promotion-label) .current-marker,.career-year.current:has(.lsi-label) .current-marker{bottom:calc(100% + 50px)}.career-year.current:hover::after{bottom:calc(100% + 48px)}@media(max-width:600px){.career-timeline-frame{grid-template-columns:17px minmax(0,1fr);gap:4px}.salary-axis{min-height:190px}.salary-axis span{font-size:9px}.current-marker{font-size:9px;padding:4px 7px}}
/* Mobile dashboard: one reading column, clear groups, and no compressed desktop panels. */
@media(max-width:760px){main{padding:16px 12px 28px}.career-card{margin-top:8px;padding:16px;border-radius:16px}.career-card .card-heading h2{font-size:1.28rem;line-height:1.2}.career-card .card-heading p:not(.eyebrow){font-size:.82rem;line-height:1.45}.career-baseline{gap:8px;margin:14px 0 18px}.career-baseline input,.career-baseline select{min-height:44px;padding:10px;font-size:14px}.career-layout{grid-template-columns:minmax(0,1fr);gap:16px}.career-left,.career-summary{width:100%;min-width:0}.career-chart-heading{margin-bottom:4px}.career-chart-heading h3{font-size:1.2rem}.career-chart-heading p:last-child{margin-top:6px;font-size:.84rem;line-height:1.4}.career-timeline{height:172px;margin:20px 0 14px;padding:0 2px;gap:2px}.salary-axis{min-height:172px;margin:20px 0 14px}.career-summary{order:2;padding:18px;border-radius:18px;gap:9px}.career-summary h3{margin:2px 0 8px;font-size:1.25rem}.career-summary strong{font-size:2rem}.career-summary .scheme-link{font-size:.88rem}.career-left{order:1}.retirement-slider{grid-template-columns:1fr;gap:12px;margin:0 0 18px;padding:15px}.retirement-slider>p,.cner-option{grid-column:auto}.retirement-slider input{min-height:30px}.event-list{margin-top:10px}.retirement-comparison{margin-top:18px;padding:16px;border-radius:16px}.retirement-comparison th,.retirement-comparison td{padding:9px 6px;font-size:.78rem}.retirement-comparison th{font-size:.64rem}.pension-amount{gap:9px}.pension-amount small{padding-left:9px}}
@media(max-width:760px){html,body{max-width:100%;overflow-x:clip}.start-card,.career-card{box-sizing:border-box;max-width:calc(100vw - 24px)}.start-card>*{min-width:0}.question-field input,.question-field select{max-width:100%;box-sizing:border-box}}
/* The compact header is a single, intentional row on a phone. The internal
   prototype badge is useful on desktop but competes with the reset control. */
@media(max-width:600px){
  .topbar{padding:0 12px;gap:8px;overflow:hidden}
  .brand{flex:0 0 auto;font-size:20px}
  .prototype-actions{min-width:0;margin-left:auto;gap:0}
  .prototype-badge{display:none}
  .prototype-actions button{padding:6px 9px;font-size:11px;white-space:nowrap}
  body:not(.career-ready) main{padding:16px 12px 28px}
  .onboarding{width:100%;padding:24px 0}
  .start-card{width:100%;max-width:100%;min-height:0;padding:20px;border-radius:20px}
  .onboarding-progress{margin-bottom:24px}
}