/* "Time back" redesign (reference: DeepSeek images desktop/mobile, no source HTML). Scoped to #savings only.
   Light section, settings left / dark result card right; on phones the card comes first (DOM order).
   No loops, canvas or filters: only width/colour transitions on state changes. */
#savings{--sv-ink:#16232b;--sv-soft:rgba(22,35,43,.62);--sv-rule:rgba(22,35,43,.18);--sv-grad:linear-gradient(90deg,var(--cyan),var(--blue) 55%,var(--violet))}
#savings .offer-head{margin-bottom:clamp(36px,4.5vw,64px)}
#savings h2{max-width:13em}
#savings .offer-lead{max-width:58ch}

.sv-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-areas:"inputs result";gap:clamp(32px,4.5vw,80px);align-items:start}
.sv-inputs{grid-area:inputs;min-width:0}
.sv-result{grid-area:result;min-width:0}

/* ---------- settings ---------- */
.sv-field{margin:0 0 36px}
.sv-q{display:block;margin:0 0 14px;font:800 clamp(24px,2.3vw,32px)/1.05 var(--cond);font-stretch:condensed;color:var(--sv-ink);overflow-wrap:anywhere}
.sv-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap}
.sv-row .sv-q{margin:0}
.sv-hint{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--sv-soft)}

.sv-stepper{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap}
.sv-step{flex:none;width:56px;height:56px;display:grid;place-items:center;border:1.5px solid var(--sv-rule);background:transparent;color:var(--sv-ink);font:800 28px/1 var(--cond);cursor:pointer;transition:background .2s,border-color .2s}
.sv-step:hover:not(:disabled){border-color:var(--sv-ink)}
.sv-step:disabled{opacity:.32;cursor:not-allowed}
#time-monthly{width:3.4ch;min-width:2ch;padding:0;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--sv-ink);text-align:center;font:850 clamp(64px,7vw,92px)/1 var(--cond);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
#time-monthly:hover{border-bottom-color:var(--sv-rule)}
#savings input[type=number]::-webkit-inner-spin-button,#savings input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sv-per{font:600 13px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sv-soft)}
.sv-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sv-presets button{min-width:56px;min-height:44px;padding:0 14px;border:1px solid var(--sv-rule);background:transparent;color:var(--sv-ink);font:600 14px/1 var(--mono);cursor:pointer;transition:background .2s,color .2s}
.sv-presets button[aria-pressed=true]{background:var(--sv-ink);border-color:var(--sv-ink);color:var(--paper)}

.sv-out{font:850 clamp(36px,4vw,52px)/1 var(--cond);color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-range{--fill:50%;width:100%;height:32px;margin:14px 0 2px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.sv-range::-webkit-slider-runnable-track{height:4px;background:var(--sv-grad) 0 0/var(--fill) 100% no-repeat,#d9d6d0}
.sv-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border:0;border-radius:50%;background:var(--sv-ink);box-shadow:0 0 0 4px var(--paper)}
.sv-range::-moz-range-track{height:4px;background:#d9d6d0}
.sv-range::-moz-range-progress{height:4px;background:var(--sv-grad)}
.sv-range::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:var(--sv-ink);box-shadow:0 0 0 4px var(--paper)}
.sv-scale{position:relative;height:18px;margin:0 13px;font:500 12px/1 var(--mono);color:var(--sv-soft)}
.sv-scale span{position:absolute;top:0;transform:translateX(-50%)}
.sv-scale span:first-child{transform:translateX(-30%)}.sv-scale span:last-child{transform:translateX(-70%)}

.sv-split{margin-top:20px}
.sv-split-l{margin:0 0 8px;font:600 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sv-soft)}
.sv-split-bar{display:flex;gap:2px;height:10px}
.sv-split-bar i{flex-basis:0;min-width:2px}
.sv-split .s0{--c:#c9d6e0}.sv-split .s1{--c:#9fb6cc}.sv-split .s2{--c:#6f8fb3}.sv-split .s3{--c:var(--blue)}.sv-split .s4{--c:var(--violet)}
.sv-split-bar i{background:var(--c)}
.sv-split-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;padding:0;list-style:none;font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sv-soft);font-variant-numeric:tabular-nums}
.sv-split-legend li::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--c)}

.sv-with{margin:0 0 36px;padding:24px clamp(20px,2.4vw,30px);background:#ebe9e5;border-left:4px solid var(--cyan)}
.sv-with-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 14px}
.sv-with-title span{font:800 clamp(22px,2vw,28px)/1 var(--cond);text-transform:uppercase;color:var(--sv-ink)}
.sv-with-title strong{font:850 clamp(30px,3vw,40px)/1 var(--cond);text-transform:uppercase;color:var(--blue)}
.sv-with-title em{padding:3px 7px;border:1px solid var(--sv-rule);font:600 11px/1.2 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--sv-soft)}
.sv-with ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 10px;padding:0;list-style:none}
.sv-with li{position:relative;padding-left:22px;font-size:15px;color:var(--sv-ink)}
.sv-with li::before{content:'✓';position:absolute;left:0;color:var(--blue);font-weight:800}

.sv-opt{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sv-soft)}
.sv-rate{display:inline-flex;align-items:baseline;gap:12px;margin-top:14px;padding-bottom:6px;border-bottom:3px solid var(--sv-ink)}
.sv-rate span{font:600 13px/1 var(--mono);color:var(--sv-soft)}
#time-rate{width:4.2ch;padding:0;border:0;background:transparent;color:var(--sv-ink);font:850 clamp(38px,3.6vw,48px)/1 var(--cond);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}

/* ---------- result card ---------- */
.sv-result{position:sticky;top:24px;padding:clamp(26px,3.4vw,56px);background:var(--sv-ink);color:var(--paper);scroll-margin-top:24px}
.sv-result::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;background:var(--sv-grad)}
.sv-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sv-eyebrow{margin:0;font:600 12px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sv-chip{padding:6px 12px;border:1px solid rgba(246,245,243,.4);font:600 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.sv-big{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 22px;margin:14px 0 10px}
#time-hours{font:850 clamp(92px,11.5vw,196px)/.82 var(--cond);font-stretch:condensed;letter-spacing:-.02em;font-variant-numeric:tabular-nums;background:var(--sv-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-unit{display:grid;padding-bottom:.35em;font:800 clamp(24px,2.5vw,38px)/1 var(--cond);text-transform:uppercase}
.sv-sub{margin:0;font-size:clamp(15px,1.3vw,18px);line-height:1.45;color:rgba(246,245,243,.78)}

.sv-bar{margin:26px 0 30px}
.sv-track{display:flex;height:clamp(46px,4.4vw,60px);background:rgba(246,245,243,.06);overflow:hidden}
.sv-track b,.sv-track i{display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;transition:width .4s ease}
.sv-track b{padding:0 clamp(10px,1.4vw,20px);background:var(--sv-grad);color:var(--sv-ink);font:800 clamp(16px,1.6vw,22px)/1 var(--cond)}
.sv-track i{justify-content:center;background:#2b3b46;font:500 13px/1 var(--mono);font-style:normal;color:var(--paper)}
.sv-track b:empty,.sv-track b[style*="width: 0"]{padding:0}
.sv-track.is-neutral i{background:rgba(246,245,243,.22)}
.sv-bar-scale{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font:500 12px/1 var(--mono);color:var(--muted)}
.sv-us-note{display:none}

.sv-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sv-metrics>div{display:flex;flex-direction:column;gap:10px;padding:22px 16px 22px 0;min-width:0}
.sv-metrics>div+div{padding-left:clamp(14px,2vw,26px);border-left:1px solid var(--line)}
.sv-metrics dd{margin:0;font:850 clamp(30px,3.2vw,46px)/1 var(--cond);font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-metrics dt{order:2;font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}

.sv-money{margin-top:28px}.sv-money:empty{display:none}
.sv-value{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 24px;margin-top:10px}
.sv-value strong{font:850 clamp(46px,5.4vw,80px)/.95 var(--cond);font-variant-numeric:tabular-nums}
.sv-value span{font:500 12px/1.5 var(--mono);color:var(--muted);text-align:right}
.sv-money .sv-hint{color:var(--muted)}
.sv-math{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.sv-math span{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sv-math code{font:500 14px/1.5 var(--mono);color:var(--paper);overflow-wrap:anywhere}

.sv-jump,.sv-back{display:none;align-items:center;min-height:44px;font:600 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.sv-jump{margin-top:12px;color:var(--muted)}
.sv-back{color:var(--blue)}
.sv-notice{margin:44px 0 0;max-width:110ch;font-size:13px;line-height:1.6;color:var(--sv-soft)}

/* focus: visible on both the light settings and the dark card */
#savings .sv-inputs :is(button,input,a):focus-visible{outline:3px solid var(--blue);outline-offset:3px}
#savings .sv-result a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
#savings #time-form{scroll-margin-top:24px}

@media(max-width:900px){
 .sv-grid{grid-template-columns:1fr;grid-template-areas:none;gap:44px}
 .sv-inputs,.sv-result{grid-area:auto}
 .sv-result{position:relative;top:auto}
 .sv-jump,.sv-back{display:inline-flex}
}
@media(max-width:520px){
 .sv-result{padding:26px 20px 22px}
 /* The OwnTake segment keeps its true 10% width; its label moves below the bar instead of being clipped. */
 #time-bar-us-l{display:none}
 .sv-us-note{display:block;flex:1;text-align:center;color:var(--paper)}
 .sv-us-note:empty{display:none}
 .sv-big{gap:4px 14px}
 .sv-metrics>div{padding:18px 8px 18px 0}
 .sv-metrics>div+div{padding-left:10px}
 .sv-metrics dd{font-size:clamp(22px,7vw,30px)}
 .sv-metrics dt{font-size:10px;letter-spacing:.06em}
 .sv-value{display:block}.sv-value span{display:block;margin-top:10px;text-align:left}
 .sv-step{width:50px;height:50px}
 .sv-with li{font-size:14px}
}
@media(prefers-reduced-motion:reduce){#savings *{transition:none!important}}