/* Advania brand purple and pink from Jon Jarvis's calculator package. On info.advania.co.uk the template's
   Adelle and Adelle Sans take over; Bitter and IBM Plex Sans stand in elsewhere. */
:root{
  color-scheme:light;
  --purple:#4F0077; --purple-soft:#F3E8F8; --pink:#CB0084; --glow:#FF4FB8;
  --ink:#22182B; --muted:#675E70; --line:#E6DDEA; --surface:#FFFFFF; --surface-2:#F6F1F8;
  --rail:#2A0745; --rail-ink:#F6EEFA; --rail-mut:#C9B5D8; --rail-line:rgba(255,255,255,.14);
  --bad:#B8362F;
  --f-slab:"Adelle","Bitter",Georgia,serif;
  --f-body:"Adelle Sans","IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --top-h:56px;
  --stage-h:max(540px, calc(100dvh - var(--top-h)));
}
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{background:var(--surface); color:var(--ink); font:15px/1.5 var(--f-body); -webkit-font-smoothing:antialiased}
@media (min-height:600px){body{overflow:hidden}}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--pink); outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums}

/* header */
.top{height:var(--top-h); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 max(18px,env(safe-area-inset-right,0px)) 0 max(18px,env(safe-area-inset-left,0px)); border-bottom:1px solid var(--line); background:var(--surface); position:relative; z-index:2}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; background:none; border:0; padding:0; cursor:pointer}
.wordmark{font:800 21px/1 var(--f-body); letter-spacing:-.04em; color:var(--purple)}
.prod{font-size:13.5px; color:var(--muted); border-left:1px solid var(--line); padding-left:12px}
.top-r{display:flex; align-items:center; gap:14px}

/* shared parts */
.btn{border:1.5px solid transparent; border-radius:10px; padding:11px 20px; font-weight:600; font-size:15px; line-height:1.2; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:filter .15s, border-color .15s, background-color .15s}
.btn.pri{background:var(--purple); color:#fff}
.btn.pri:hover{filter:brightness(1.15)}
.btn.sec{background:var(--surface); border-color:var(--line); color:var(--ink)}
.btn.sec:hover{border-color:var(--purple)}
.btn.pink{background:var(--pink); color:#fff}
.btn.pink:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent; border-color:rgba(255,255,255,.38); color:var(--rail-ink)}
.btn.ghost:hover{border-color:#fff}
.btn.big{padding:13px 24px; font-size:16px}
.btn.wide{width:100%}
.btn:active:not([disabled]){transform:translateY(1px)}
.btn.pink{box-shadow:0 8px 22px -10px rgba(203,0,132,.75)}
.btn .arr{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s}
.btn:hover .arr{transform:translateX(3px)}
.btn[disabled]{opacity:.55; cursor:progress}
.linkbtn{background:none; border:0; padding:0; color:var(--purple); font-weight:600; font-size:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.linkbtn.lt{color:var(--rail-ink)}
.row{display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center}
.hint{font-size:12.5px; color:var(--muted)}
.err{color:var(--bad); font-size:13.5px; font-weight:600; display:block; margin-top:10px}
.field{display:grid; gap:5px; min-width:0}
.field label{font-size:13px; font-weight:600}
.field.bad .inp{border-color:var(--bad)}
.ferr{font-size:12.5px; color:var(--bad); font-weight:600}
.opt-l{font-weight:400; color:var(--muted); font-size:12px}
.addrole{align-content:end; padding-bottom:10px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.inp{width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink)}
.inp:focus{outline:2px solid var(--pink); outline-offset:1px; border-color:var(--purple)}
textarea.inp{resize:none; font-size:13.5px; line-height:1.5}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:7px 14px; font-size:14px; font-weight:600; cursor:pointer}
.chip:hover{border-color:var(--purple)}
.chip.on{background:var(--purple); border-color:var(--purple); color:#fff}

/* stage: everything fits one screen */
.stage{height:var(--stage-h)}
.est{position:relative; height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,35%); overflow:hidden}
.est.full{grid-template-columns:minmax(0,1fr)}
.est-main{display:flex; flex-direction:column; min-width:0; min-height:0; padding:22px clamp(20px,4vw,56px) 16px}
.est-top{display:flex; align-items:center; gap:14px; min-height:28px}
.segs{display:flex; gap:5px; width:min(240px,45%)}
.segs i{flex:1; height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; position:relative}
.segs i::after{content:""; position:absolute; inset:0; background:var(--purple); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.segs i.done::after{transform:none}
.segs i.cur{background:var(--purple-soft); box-shadow:inset 0 0 0 1px var(--purple)}
.qcount{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.est-pane{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:safe center; padding-block:8px}
.in-fwd{animation:inF .42s cubic-bezier(.2,.8,.2,1) both}
.in-back{animation:inB .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes inF{from{opacity:0; transform:translateX(32px)} to{opacity:1; transform:none}}
@keyframes inB{from{opacity:0; transform:translateX(-32px)} to{opacity:1; transform:none}}
.qtitle,.ititle{font-family:var(--f-slab); font-weight:700; letter-spacing:-.012em; margin:0 0 8px; text-wrap:balance; color:var(--ink)}
.qtitle{font-size:clamp(23px,2.4vw,31px); line-height:1.15; max-width:24ch}
.ititle{font-size:clamp(32px,3.9vw,52px); line-height:1.05; max-width:16ch}
.ititle em{font-style:normal; color:var(--pink)}
.eyebrow{margin:0 0 12px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--pink)}
.qhelp.lead{font-size:17px; margin-bottom:24px; max-width:46ch}
.trust{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13.5px; color:var(--muted)}
.trust li{display:flex; align-items:center; gap:7px}
.trust svg{width:16px; height:16px; padding:3px; border-radius:50%; background:var(--purple-soft); fill:none; stroke:var(--purple); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.qhelp{color:var(--muted); font-size:15px; margin:0 0 16px; max-width:52ch}
.for{font-size:14px; color:var(--purple); font-weight:600; margin:0 0 10px}
.opts{display:grid; gap:8px; max-width:540px}
.opt{display:grid; grid-template-columns:26px minmax(0,1fr) 22px; align-items:center; gap:14px; width:100%; text-align:left; padding:10px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); cursor:pointer; transition:border-color .15s, background-color .15s}
.opt:hover{border-color:var(--purple)}
.opt kbd{font:600 12px var(--f-body); width:24px; height:24px; display:grid; place-items:center; border-radius:6px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted)}
.opt b{display:block; font-weight:600; font-size:16px; line-height:1.3}
.opt small{display:block; color:var(--muted); font-size:13px; line-height:1.35}
.opt .tick{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:background-color .15s, border-color .15s}
.tick svg,.ic svg{width:12px; height:12px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.opt .tick svg{stroke-dasharray:18; stroke-dashoffset:18; transition:stroke-dashoffset .28s .06s ease-out}
.opt.on{border-color:var(--purple); background:var(--purple-soft)}
.opt.on kbd{border-color:var(--purple); color:var(--purple); background:var(--surface)}
.opt.on .tick{background:var(--purple); border-color:var(--purple)}
.opt.on .tick svg{stroke-dashoffset:0}
.opt.picked{animation:pick .34s ease-out}
@keyframes pick{45%{transform:scale(1.018)}}
.opt.sub{border-style:dashed}
.xrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; max-width:540px}
.xin{display:flex; align-items:center; gap:6px; border:1.5px solid var(--purple); border-radius:10px; padding:0 12px; background:var(--surface); font-weight:600; font-size:17px}
.xin input{border:0; outline:0; background:transparent; padding:9px 0; width:150px; font-weight:600; font-size:17px; font-variant-numeric:tabular-nums}
.xin:focus-within{outline:2px solid var(--pink); outline-offset:2px}
.exits{margin:14px 0 0; font-size:13.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.est-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px}
.backlink{background:none; border:0; padding:6px 0; color:var(--muted); font-weight:600; font-size:14px; cursor:pointer}
.backlink:hover{color:var(--ink)}
.pfbadge{display:inline-block; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--purple-soft); color:var(--purple); margin:0 0 10px}

/* the live estimate */
.est-rail,.res-side{position:relative; isolation:isolate; overflow:hidden; background:var(--rail); color:var(--rail-ink); min-width:0; min-height:0; display:flex; flex-direction:column}
.est-rail{padding:24px 28px 18px; gap:10px}
.est-rail::before,.res-side::before{content:""; position:absolute; top:-35%; right:-45%; width:110%; aspect-ratio:1; background:radial-gradient(closest-side, rgba(203,0,132,.42), transparent); z-index:-1; pointer-events:none}
.rk{font-size:13.5px; color:var(--rail-mut); margin:0}
.rrange{font:700 clamp(26px,2.5vw,34px)/1.1 var(--f-slab); letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin:2px 0 0}
.ry{font:500 14px var(--f-body); color:var(--rail-mut); letter-spacing:0}
.band{position:relative; height:46px; margin-top:4px}
.band-track,.band-fill,.band-ghost{position:absolute; top:10px; height:14px; border-radius:7px}
.band-track{left:0; right:0; background:rgba(255,255,255,.1)}
.band-ghost{background:rgba(255,255,255,.24); opacity:0; transition:opacity 1.1s ease-out}
.band-fill{background:linear-gradient(90deg,#B04ADB,var(--glow)); box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 22px rgba(255,79,184,.5); min-width:14px; transition:left .75s cubic-bezier(.2,.8,.2,1), width .75s cubic-bezier(.2,.8,.2,1)}
.band-ticks span{position:absolute; top:30px; transform:translateX(-50%); font-size:11px; color:var(--rail-mut); white-space:nowrap}
.band-ticks span:first-child{transform:none}
.band-ticks span:last-child{transform:translateX(-100%)}
.rnote{font-size:13.5px; color:var(--rail-mut); margin:0; min-height:24px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rnote b{color:var(--rail-ink)}
.pips{display:inline-flex; gap:3px}
.pips i{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18)}
.pips i.on{background:var(--glow); box-shadow:0 0 8px rgba(255,79,184,.7)}
.flash{font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--glow); color:var(--rail); animation:flash 2.4s ease-out both}
@keyframes flash{0%{opacity:0; transform:translateY(6px) scale(.9)} 12%{opacity:1; transform:none} 80%{opacity:1} 100%{opacity:0}}
.recap{margin-top:auto; display:grid}
.recap button{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border:0; border-top:1px solid var(--rail-line); background:none; color:var(--rail-ink); font-size:13.5px; text-align:left; cursor:pointer}
.recap button span:first-child{color:var(--rail-mut)}
.recap button span:last-child{font-weight:600; text-align:right}
.recap button.todo span:last-child{font-weight:400; color:rgba(255,255,255,.38)}
.recap button.cur span:first-child{color:var(--rail-ink); font-weight:600}
.recap button:hover span:last-child{text-decoration:underline; text-underline-offset:3px}

/* results */
.res{display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,36%); height:100%; min-height:0}
.res-main{display:flex; flex-direction:column; gap:22px; min-width:0; min-height:0; overflow-y:auto; padding:26px clamp(20px,4vw,56px) 24px}
.res-top{display:grid; gap:8px}
.res-top .for{margin:0}
.res-k{font-size:14px; color:var(--muted); margin:0}
.bigsave{width:fit-content; font:800 clamp(50px,6.4vw,88px)/.95 var(--f-slab); letter-spacing:-.025em; color:var(--pink); font-variant-numeric:tabular-nums; margin:0}
.res-sub{margin:0; color:var(--muted); max-width:58ch; font-size:15px}
.res-sub b{color:var(--ink); font-weight:600}
.res-main > .shared{margin-bottom:auto}
.shared{display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:start; background:var(--purple-soft); border-radius:12px; padding:11px 14px; font-size:14px}
.shared .av{width:36px; height:36px; border-radius:50%; background:var(--purple); color:#fff; display:grid; place-items:center; font-weight:700}
.shared b{font-weight:600}
.shared p{margin:2px 0 0; color:var(--muted)}
.cbar-t{height:10px; border-radius:5px; background:var(--surface-2); overflow:hidden}
.cbar-t i{display:block; height:100%; border-radius:5px; transition:width .9s cubic-bezier(.2,.8,.2,1)}
.cbar-t i.today{background:#B9B0C0}
.cbar-t i.avd{background:linear-gradient(90deg,var(--purple),var(--pink))}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.fact{background:var(--surface-2); border-radius:12px; padding:11px 13px; min-width:0}
.fact span{display:block; font-size:12.5px; color:var(--muted); line-height:1.3}
.fact b{display:block; font:700 clamp(17px,1.55vw,21px)/1.2 var(--f-slab); font-variant-numeric:tabular-nums; margin-top:4px}
.fact.key{background:var(--purple-soft); box-shadow:inset 0 0 0 1.5px rgba(79,0,119,.18)}
.fact.key b{color:var(--purple)}
.shared .row{margin-top:10px; gap:8px}
.shared .btn{padding:8px 14px; font-size:14px}
.sticky-cta{display:none}
.res-main h3{font:700 16px/1.3 var(--f-slab); margin:0; letter-spacing:-.005em}

/* inputs behind the figures */
.inputs{border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:grid; gap:12px}
.inputs.acct{border-color:rgba(79,0,119,.28); background:linear-gradient(180deg,var(--purple-soft),var(--surface) 70%)}
.inputs.editing{border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft)}
.inputs-h{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.inputs-h b{display:block; font-weight:600; font-size:15px}
.inputs-h span{display:block; font-size:13px; color:var(--muted)}
.inputs-h .btn{padding:7px 16px; font-size:14px; flex:none}
.igrid{margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 18px}
.icell{display:grid; gap:3px; min-width:0}
.icell dd{margin:0; font-weight:600; font-size:14px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.il{font-size:12px; color:var(--muted)}
label.icell .il{font-weight:600}
.icell .inp{padding:7px 9px; font-size:14px}
.ipair{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:6px}
.iamt{display:flex; align-items:center; gap:6px; font-weight:600}
.ibadge{font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap}
.ibadge.pf{background:var(--purple-soft); color:var(--purple)}
.ibadge.as{background:var(--surface-2); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line)}
.ibadge.ed{background:#FCE6F3; color:#9A0064}
.inputs .err{margin-top:0}

/* three next steps, equal weight */
.cta3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.cta{display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:14px; padding:16px; min-width:0}
.cta p{margin:0 0 6px; font-size:13.5px; color:var(--muted); flex:1}
.cta-ic{width:36px; height:36px; border-radius:10px; background:var(--purple-soft); display:grid; place-items:center; margin-bottom:4px}
.cta-ic svg{width:20px; height:20px; fill:none; stroke:var(--purple); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cta .btn{padding:10px 14px}
.cta.done{background:var(--surface-2)}
.btn svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.btn.is-done{cursor:default; color:var(--muted)}

/* side by side */
.cmp{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.cmp-c{border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; gap:8px; align-content:start; min-width:0}
.cmp-c.avd{border-color:rgba(79,0,119,.3); box-shadow:inset 0 3px 0 var(--purple)}
.cmp-t{margin:0; color:var(--muted); font-size:14px}
.cmp-t b{font:700 26px/1.1 var(--f-slab); color:var(--ink); font-variant-numeric:tabular-nums}
.cmp-c.avd .cmp-t b{color:var(--purple)}
.cmp-pu{margin:0; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.cmp-c ul{list-style:none; margin:4px 0 0; padding:0; font-size:13px}
.cmp-c li{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-top:1px solid var(--line)}
.cmp-c li span{color:var(--muted); min-width:0}
.cmp-c li b{font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}

/* savings timeline */
.tlc{border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; gap:10px}
.tlc-h{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 14px}
.tlc .hint{margin:0}
.chart{position:relative}
.chart svg{display:block; width:100%; height:auto; overflow:visible}
.chart svg:focus-visible{outline:2px solid var(--pink); outline-offset:4px; border-radius:6px}
.chart .grid line{stroke:var(--line); stroke-width:1}
.chart .grid line.zero{stroke:#B9B0C0; stroke-width:1.5}
.chart .axis text{font-size:11.5px; fill:var(--muted); font-variant-numeric:tabular-nums}
.chart .series{fill:none; stroke:var(--purple); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.chart .area{fill:var(--purple); opacity:.08}
.chart .be line{stroke:var(--pink); stroke-width:1.5; stroke-dasharray:3 3}
.chart .be circle,.chart .endpt,.chart .hov circle{stroke:var(--surface); stroke-width:2}
.chart .be circle{fill:var(--pink)}
.chart .be text,.chart .endlab{font-size:12px; font-weight:600; fill:var(--ink)}
.chart .endpt{fill:var(--purple)}
.chart .hov line{stroke:var(--muted); stroke-width:1}
.chart .hov circle{fill:var(--purple)}
.ctip{position:absolute; pointer-events:none; background:var(--ink); color:#fff; font-size:12.5px; line-height:1.4; padding:6px 10px; border-radius:8px; white-space:nowrap; z-index:3}
.ctip b:first-child{display:block; font-weight:600}
.rv .chart .series{stroke-dasharray:1; stroke-dashoffset:1; animation:drawLine 1.2s .35s cubic-bezier(.2,.8,.2,1) forwards}
.rv .chart .area,.rv .chart .be,.rv .chart .endpt,.rv .chart .endlab{animation:fadeIn .5s 1.3s both}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}}
.res-foot{margin:0; font-size:12.5px; color:var(--muted); max-width:72ch}
.res-foot .linkbtn{color:var(--muted); font-weight:500}

/* the exit plan */
.res-side{padding:22px 26px 18px; gap:12px}
.res-side h2{font:700 23px/1.18 var(--f-slab); margin:0; letter-spacing:-.01em; text-wrap:balance}
.res-side p{margin:0; font-size:14px; color:var(--rail-mut)}
.prog{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--rail-mut)}
.prog b{color:var(--rail-ink); font-weight:600}
.prog .segs{width:auto; flex:1}
.prog .segs i{background:rgba(255,255,255,.14)}
.prog .segs i::after{background:var(--glow)}
.plan{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.step{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:start; padding:9px 10px; border-radius:12px}
.step .ic{width:26px; height:26px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); display:grid; place-items:center; font-size:12.5px; font-weight:700; color:var(--rail-mut)}
.step.done .ic{background:var(--glow); border-color:var(--glow)}
.step.done .ic svg{stroke:var(--rail)}
.step .st b{display:block; font-weight:600; font-size:14.5px; line-height:1.35; padding-top:3px}
.step.done .st b{color:var(--rail-mut); font-weight:500}
.step .st p{margin:4px 0 12px; font-size:13.5px}
.step.active .btn{margin-top:2px}
.step.active{background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,79,184,.45), 0 12px 30px -18px rgba(255,79,184,.6); padding:12px 12px 14px}
.step.active .ic{border-color:var(--glow); color:var(--rail-ink)}
.step .mini{background:none; border:0; padding:4px 0; color:var(--rail-mut); font-size:13px; font-weight:500; cursor:pointer; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.step .mini.dim{color:var(--rail-mut); font-weight:500}
.step span.mini{text-decoration:none; cursor:default}
.step.just .ic{animation:popIc .6s cubic-bezier(.2,1.6,.4,1)}
.step.just .ic svg{stroke-dasharray:18; stroke-dashoffset:18; animation:draw .35s .15s ease-out forwards}
@keyframes popIc{0%{transform:scale(.4)} 100%{transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
.rchips{display:flex; flex-wrap:wrap; gap:6px}
.rchips button{border:1px solid rgba(255,255,255,.32); background:transparent; color:var(--rail-ink); border-radius:999px; padding:7px 12px; font-size:13.5px; font-weight:600; cursor:pointer}
.rchips button:hover{border-color:#fff}
.tl{display:grid; gap:5px}
.tl-track{position:relative; height:10px; border-radius:5px; background:rgba(255,255,255,.1)}
.tl-win{position:absolute; top:0; bottom:0; border-radius:5px; background:var(--glow)}
.tl-mig{position:absolute; top:2px; bottom:2px; left:0; border-radius:4px; background:repeating-linear-gradient(135deg, rgba(255,255,255,.85) 0 4px, rgba(255,255,255,.35) 4px 8px)}
.tl-l{display:flex; justify-content:space-between; font-size:11.5px; color:var(--rail-mut)}
.tl-key{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--rail-mut)}
.tl-key i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; background:var(--glow)}
.tl-key i.mig{background:repeating-linear-gradient(135deg, rgba(255,255,255,.85) 0 3px, rgba(255,255,255,.35) 3px 6px)}
.res-side p.proof{margin-top:auto; padding-top:12px; border-top:1px solid var(--rail-line); font-size:12.5px; color:var(--rail-mut)}
.rv .res-side > *{animation:up .55s cubic-bezier(.2,.8,.2,1) both}
.rv .res-side > *:nth-child(1){animation-delay:.35s} .rv .res-side > *:nth-child(2){animation-delay:.42s}
.rv .res-side > *:nth-child(3){animation-delay:.49s} .rv .res-side > *:nth-child(4){animation-delay:.56s}
.rv .res-side > *:nth-child(5){animation-delay:.63s} .rv .res-side > *:nth-child(6){animation-delay:.7s}
@keyframes up{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.sk{display:block; border-radius:8px; background:linear-gradient(90deg,var(--surface-2) 25%,#EDE4F1 50%,var(--surface-2) 75%); background-size:200% 100%; animation:shim 1.2s linear infinite}
.skel .res-main{gap:14px; justify-content:center}
.skel .res-side{background:var(--rail)}
@keyframes shim{to{background-position:-200% 0}}
.burst{position:absolute; inset:0; pointer-events:none; z-index:5}

/* forms and confirmation */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,35%); height:100%; min-height:0}
.split .est-rail{justify-content:center}
.fgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; max-width:600px}
.fine{font-size:12.5px; color:var(--muted); margin:10px 0 0; max-width:60ch}
.docprev{background:#fff; color:var(--ink); border-radius:8px; padding:0 0 16px; box-shadow:0 22px 44px -22px rgba(0,0,0,.75); display:grid; gap:8px; transform:rotate(-1.6deg); margin:6px 6px 14px; overflow:hidden; max-width:330px}
.docprev .dp-band{background:var(--purple); color:#fff; padding:12px 14px 10px; font:700 14px/1.25 var(--f-slab); border-bottom:3px solid var(--pink)}
.docprev .dp-band small{display:block; font:500 10.5px var(--f-body); color:#E3CFEC; margin-bottom:4px}
.docprev .dp-n{font:800 26px/1 var(--f-slab); color:var(--pink); font-variant-numeric:tabular-nums; padding:4px 14px 0}
.docprev .ln{display:block; height:7px; border-radius:4px; background:#E8E0EC; margin:0 14px}
.docprev .boxes{display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:0 14px}
.docprev .boxes i{height:24px; border-radius:4px; background:var(--surface-2)}
.glist{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px}
.glist li{display:grid; grid-template-columns:14px minmax(0,1fr); gap:10px}
.glist li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--glow); margin-top:7px}
.what{list-style:none; margin:0; padding:0; display:grid; gap:11px; counter-reset:w}
.what li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; font-size:14px; counter-increment:w}
.what li::before{content:counter(w); width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.14); display:grid; place-items:center; font-size:12px; font-weight:700}
.carry{border-top:1px solid var(--rail-line); padding-top:12px; margin-top:18px; display:grid; gap:3px; font-size:13.5px}
.carry b{font:700 22px var(--f-slab); color:var(--rail-ink)}
.done-wrap{height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px; padding:24px clamp(20px,5vw,72px); max-width:760px}
.okmark{width:68px; height:68px}
.okmark circle{fill:none; stroke:var(--purple); stroke-width:3; stroke-dasharray:190; stroke-dashoffset:190; animation:draw .6s ease-out forwards}
.okmark path{fill:none; stroke:var(--pink); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:draw .35s .5s ease-out forwards}
ol.next{margin:4px 0 12px; padding-left:20px; display:grid; gap:6px}

/* overlays */
.overlay{position:fixed; inset:0; background:rgba(20,6,32,.55); display:grid; place-items:center; z-index:50; padding:16px}
.modal > *{min-width:0}
.modal{grid-template-columns:minmax(0,1fr); background:var(--surface); border-radius:16px; width:100%; max-width:560px; max-height:calc(100dvh - 32px); overflow:auto; padding:22px 24px; display:grid; gap:14px; box-shadow:0 30px 80px -30px rgba(20,6,32,.6); animation:up .3s cubic-bezier(.2,.8,.2,1) both}
.modal h2{font:700 22px/1.2 var(--f-slab); margin:0}
.mhead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.xbtn{border:0; background:var(--surface-2); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:18px; line-height:1; flex:none}
.linkbox{display:flex; gap:8px; align-items:center; background:var(--surface-2); border-radius:10px; padding:6px 6px 6px 12px; font-size:12.5px; color:var(--muted)}
.linkbox span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linkbox .btn{padding:7px 12px; font-size:13px}
.brk{width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums}
.brk th{text-align:left; padding:12px 0 4px; font-weight:600}
.brk td{padding:5px 0; border-bottom:1px solid var(--line)}
.brk td:last-child{text-align:right; white-space:nowrap; padding-left:12px}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; font-weight:500; z-index:60; max-width:calc(100% - 32px); animation:up .3s ease-out both}

@media (min-width:761px) and (max-height:780px){
  .ititle{font-size:clamp(28px,3.4vw,42px)}
  .qtitle{font-size:clamp(21px,2.2vw,27px)}
  .qhelp{margin-bottom:12px}
  .opt{padding:8px 13px}
  .bigsave{font-size:clamp(44px,5.4vw,68px)}
  .res-side{gap:9px; padding-top:18px}
  .step{padding:7px 10px}
  .known div{padding:5px 0}
}
@media (max-width:760px){
  :root{--top-h:48px}
  .prod{font-size:12.5px}
  .top-r .hint{display:none}
  .est,.res,.split{grid-template-columns:minmax(0,1fr)}
  .est{grid-template-rows:auto minmax(0,1fr)}
  .est.full{grid-template-rows:minmax(0,1fr)}
  .est > .est-rail{order:-1; padding:10px 18px 8px; gap:2px}
  .est > .est-rail .recap, .est > .est-rail .rk, .band-ticks{display:none}
  .est-rail::before{top:-120%}
  .rrange{font-size:22px}
  .band{height:22px; margin-top:2px}
  .band-track,.band-fill,.band-ghost{top:5px; height:10px}
  .rnote{font-size:12.5px; min-height:20px}
  .est-main{padding:14px 18px 10px}
  .est-top{min-height:22px}
  .intro-top{display:none}
  .ititle{font-size:31px}
  .qtitle{font-size:22px}
  .qhelp{font-size:14px; margin-bottom:12px}
  .opts{gap:6px}
  .opt{padding:8px 12px; grid-template-columns:minmax(0,1fr) 22px; gap:10px}
  .opt kbd,.hint.kb{display:none}
  .pfbadge{margin-bottom:6px}
  .xrow{margin-top:8px}
  .xin input{padding:7px 0}
  .btn.big{padding:11px 18px; font-size:15px}
  .res{grid-template-rows:auto minmax(0,1fr)}
  .res-main{padding:14px 16px 12px; gap:14px; overflow:visible}
  .res-k{font-size:13px}
  .bigsave{font-size:46px}
  .res-sub{font-size:13.5px}
  .shared{padding:8px 10px; font-size:13px; grid-template-columns:28px minmax(0,1fr); gap:8px}
  .shared .av{width:28px; height:28px; font-size:13px}
  .shared p{display:none}
  .bandtxt,.res-side > .rk,.step.est{display:none}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px}
  .igrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px}
  .inputs.editing .igrid{grid-template-columns:minmax(0,1fr)}
  .cta3,.cmp{grid-template-columns:minmax(0,1fr); gap:10px}
  .cta{display:grid; grid-template-columns:36px minmax(0,1fr); gap:2px 12px; padding:12px}
  .cta-ic{grid-row:span 2; margin:0}
  .cta p{margin:0}
  .cta .btn{grid-column:1 / -1; margin-top:8px}
  .cmp-t b{font-size:22px}
  .tlc{padding:14px 12px}
  .tlc .fact b{font-size:15px}
  .fact{padding:7px 10px}
  .fact span{font-size:11.5px}
  .fact b{font-size:16px; margin-top:2px}
  .res-foot{font-size:11px; margin-top:0}
  .res-side{padding:12px 18px 12px; gap:7px}
  .res-side h2{font-size:18px}
  .res-side > p.sub2,.res-side .tl,.res-side .proof{display:none}
  .step{padding:5px 8px; gap:10px; grid-template-columns:24px minmax(0,1fr) auto}
  .step .ic{width:22px; height:22px; font-size:11.5px}
  .step .st b{font-size:13.5px; padding-top:1px}
  .step .st p{display:none}
  .step.active .st .btn{display:none}
  .step.active{padding:6px 8px}
  .est.is-res{overflow-y:auto}
  .est.is-res .res{height:auto; min-height:100%}
  .sticky-cta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; position:sticky; bottom:0; z-index:4; padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.96); border-top:1px solid var(--line); box-shadow:0 -10px 24px -16px rgba(20,6,32,.35); backdrop-filter:blur(6px)}
  .sticky-cta .btn{padding:10px 8px; font-size:14px; white-space:nowrap}
  .est-foot.stick{position:sticky; bottom:0; background:var(--surface); padding-top:8px}
  .qhelp.lead{font-size:15px; margin-bottom:16px}
  .trust{gap:6px 14px; font-size:12.5px}
  .eyebrow{margin-bottom:8px}
  .shared .row{display:flex}
  .split .est-rail{display:none}
  .res-foot{margin-top:auto}
  .fgrid{grid-template-columns:minmax(0,1fr); gap:6px}
  .inp{padding:8px 10px}
  .modal{padding:18px; gap:10px; border-radius:14px}
  .modal textarea{height:120px}
}
@media (max-width:360px){
  .tlc .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tlc .fact.key{grid-column:1 / -1}
}
@media (max-width:760px) and (max-height:700px){
  .split .fine{display:none}
  .modal textarea{height:92px}
  .modal .hint{display:none}
  .bigsave{font-size:42px}
  .res-main{gap:7px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .okmark circle,.okmark path{stroke-dashoffset:0}
}