@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { color-scheme:dark; --bg:#0b0b0d; --surface:#17171a; --line:#37373d; --text:#f8f8f9; --muted:#b2b2b9; --red:#eb2831; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { font-size:16px; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 83% 8%,rgba(159,9,20,.18),transparent 35rem),var(--bg); color:var(--text); font-family:'DM Sans',Arial,sans-serif; line-height:1.45; }
button,input { font:inherit; }
button { cursor:pointer; }
.site-header { max-width:1200px; margin:auto; min-height:72px; padding:16px 30px; border-bottom:1px solid #2b2b30; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; }
.brand img { display:block; width:190px; height:auto; max-width:100%; }
.header-label { color:#a9a9af; font-size:.7rem; font-weight:700; letter-spacing:.19em; }
.flow-shell { width:min(100% - 40px,660px); margin:0 auto; padding:29px 0 34px; }
.progress-wrap { margin-bottom:20px; }
.progress-text { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; color:#aaaab1; font-size:.7rem; font-weight:700; letter-spacing:.17em; }
.progress-text span:first-child { color:var(--red); }
.progress-track { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.progress-track span { height:3px; border-radius:3px; background:#34343a; transition:background .2s; }
.progress-track span.active { background:var(--red); }
.step-panel,.result-panel { background:rgba(22,22,25,.95); border:1px solid var(--line); border-radius:10px; padding:33px; }
.step-panel { min-height:465px; display:flex; flex-direction:column; }
.step-content { flex:1; }
.eyebrow { color:var(--red); font-size:.73rem; font-weight:700; letter-spacing:.18em; }
h1,h2,p { margin-top:0; }
h1 { font:800 clamp(2.7rem,5.7vw,4.15rem)/.98 'Barlow Condensed',Impact,Arial,sans-serif; text-transform:uppercase; letter-spacing:-.017em; margin:15px 0 13px; }
h1 em { color:var(--red); font-style:normal; }
h1:focus { outline:none; }
.step-description { color:var(--muted); font-size:.95rem; margin:0 0 29px; }
.field-label { display:block; font-size:.84rem; font-weight:700; margin-bottom:8px; }
.input-wrap { display:flex; align-items:center; height:64px; border:1px solid #5a5a61; border-radius:6px; background:#101012; overflow:hidden; transition:border-color .15s,box-shadow .15s; }
.input-wrap:focus-within { border-color:var(--red); box-shadow:0 0 0 3px rgba(235,40,49,.17); }
.input-wrap span { color:#aaaab1; font-size:.95rem; font-weight:700; padding:0 18px; white-space:nowrap; }
.input-wrap input { border:0; outline:0; background:transparent; color:white; min-width:0; width:100%; height:100%; padding:0 18px; font-size:1.55rem; font-weight:700; font-variant-numeric:tabular-nums; }
.input-wrap span + input { padding-left:0; }
.input-wrap input::placeholder { color:#777780; font-weight:400; }
.stepper { display:flex; flex-direction:column; align-self:stretch; width:46px; flex:0 0 46px; border-left:1px solid #45454b; }
.stepper button { flex:1; min-height:30px; border:0; background:#202024; color:#e4e4e6; display:grid; place-content:center; }
.stepper button + button { border-top:1px solid #45454b; }
.stepper button:hover:not(:disabled) { background:#34343a; }
.stepper button:disabled { opacity:.32; cursor:not-allowed; }
.stepper button:focus-visible { outline:2px solid var(--red); outline-offset:-3px; }
.chevron { display:block; width:8px; height:8px; border-top:2px solid currentColor; border-left:2px solid currentColor; }
.chevron.up { transform:translateY(2px) rotate(45deg); }
.chevron.down { transform:translateY(-2px) rotate(225deg); }
.field-error { color:#ff8e94; font-size:.83rem; min-height:1.4em; margin:9px 0 0; }
.step-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; padding-top:21px; border-top:1px solid var(--line); }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:53px; border:0; border-radius:5px; padding:12px 23px; background:var(--red); color:white; font-size:.91rem; font-weight:700; text-align:center; text-decoration:none; transition:background .15s,transform .15s; }
.primary-button:hover { background:#c91e28; transform:translateY(-1px); }
.primary-button:focus-visible,.back-button:focus-visible,.edit-button:focus-visible,summary:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.back-button,.edit-button { border:0; background:transparent; color:#c1c1c6; font-size:.86rem; font-weight:700; padding:13px; }
.back-button:hover,.edit-button:hover { color:#fff; }
.choice-field { border:0; padding:0; margin:0; display:grid; gap:10px; }
.choice { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid #4b4b51; border-radius:7px; background:#111113; padding:15px 17px; cursor:pointer; }
.choice:has(input:checked) { border-color:var(--red); background:#29191c; }
.choice:has(input:focus-visible) { outline:3px solid #fff; outline-offset:2px; }
.choice input { position:absolute; opacity:0; width:1px; height:1px; }
.choice strong,.choice small { display:block; }
.choice strong { font-size:.95rem; }
.choice small { color:#aaaab1; font-size:.77rem; margin-top:2px; }
.choice-check { flex:0 0 18px; height:18px; border:2px solid #808087; border-radius:50%; }
.choice:has(input:checked) .choice-check { border-color:var(--red); box-shadow:inset 0 0 0 4px #29191c; background:var(--red); }
.custom-penalty { margin-top:17px; }
.custom-penalty .input-wrap { max-width:260px; }
.result-panel { padding:26px; }
.result-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.result-head h1 { font-size:clamp(2.55rem,5.4vw,3.9rem); margin:8px 0 16px; }
.edit-button { white-space:nowrap; padding:5px 0; text-decoration:underline; text-underline-offset:3px; }
.saving-card { background:linear-gradient(115deg,#b51623,#ed2934); border-radius:7px; padding:19px 22px; }
.saving-card span { display:block; font-size:.75rem; font-weight:700; letter-spacing:.11em; }
.saving-card strong { display:block; font:800 clamp(2.7rem,7vw,4rem)/1 'Barlow Condensed',Impact,sans-serif; margin:6px 0; font-variant-numeric:tabular-nums; }
.saving-card small { font-size:.76rem; color:#fff0f0; }
.payment-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:9px; margin-top:10px; }
.payment-card { min-width:0; border:1px solid #414148; border-radius:6px; background:#111113; padding:16px; }
.first-payment { background:#f1f1f2; color:#171719; border-color:#f1f1f2; }
.payment-card span { display:block; font-size:.72rem; font-weight:700; letter-spacing:.09em; color:#aaaab1; }
.first-payment span { color:#5d5d64; }
.payment-card strong { display:block; font:800 clamp(2rem,5vw,2.65rem)/1.04 'Barlow Condensed',Impact,sans-serif; margin:5px 0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.payment-card small { display:block; color:#a9a9b0; font-size:.72rem; line-height:1.3; }
.first-payment small { color:#5d5d64; }
.summary-rows { margin:11px 0 14px; }
.summary-rows > div { display:flex; justify-content:space-between; gap:14px; padding:6px 0; color:#c6c6cc; font-size:.82rem; }
.summary-rows strong { color:white; white-space:nowrap; font-variant-numeric:tabular-nums; }
.result-action .primary-button { width:100%; }
.conditions { color:#b7b7bd; font-size:.78rem; line-height:1.45; margin:13px 0 0; }
.conditions b { color:#f4f4f5; }
.calculation-details { border-top:1px solid #36363b; margin-top:15px; padding-top:10px; color:#aaaab1; font-size:.76rem; }
.calculation-details summary { cursor:pointer; color:#d3d3d8; font-weight:700; }
.calculation-details p { margin:8px 0 0; line-height:1.5; }
footer { max-width:1200px; margin:0 auto; padding:12px 30px 25px; display:flex; justify-content:space-between; gap:10px; color:#797980; font-size:.65rem; font-weight:700; letter-spacing:.15em; }
.footer-dot { color:var(--red); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:680px) {
  .site-header { min-height:63px; padding:12px 17px; }
  .brand img { width:170px; }
  .header-label { font-size:.6rem; letter-spacing:.1em; }
  .flow-shell { width:calc(100% - 28px); padding:23px 0 95px; }
  .progress-wrap { margin-bottom:14px; }
  .step-panel { min-height:calc(100dvh - 200px); padding:25px 21px; }
  h1 { font-size:clamp(2.75rem,11vw,3.75rem); }
  .step-description { margin-bottom:25px; }
  .step-actions { position:fixed; z-index:10; left:0; right:0; bottom:0; margin:0; padding:11px 14px max(11px,env(safe-area-inset-bottom)); background:rgba(13,13,15,.97); border-top:1px solid #3d3d43; box-shadow:0 -8px 25px rgba(0,0,0,.3); }
  .step-actions .primary-button { flex:1; }
  .step-actions .back-button { min-width:80px; }
  .result-panel { padding:20px 17px; }
  .result-head h1 { font-size:clamp(2.5rem,9vw,3.4rem); }
  .result-head { display:block; position:relative; }
  .result-head .edit-button { margin:-6px 0 12px; padding:4px 0; }
  .saving-card { padding:16px 18px; }
  .payment-card { padding:12px; }
  .payment-card strong { font-size:clamp(1.85rem,7vw,2.3rem); }
  .result-action { position:fixed; z-index:10; left:0; right:0; bottom:0; padding:11px 14px max(11px,env(safe-area-inset-bottom)); background:rgba(13,13,15,.97); border-top:1px solid #3d3d43; box-shadow:0 -8px 25px rgba(0,0,0,.3); }
  footer { padding:0 17px 20px; }
}
@media (max-width:390px) { .header-label { display:none; } .payment-grid { grid-template-columns:1fr 1fr; } .payment-card strong { font-size:1.85rem; } .payment-card span { font-size:.68rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:0s !important; animation-duration:0s !important; } }