/* ==========================================================================
   Return calculator (calculator.html), after Zip's "Calculate my ROI" page.
   Zip's structure, kept: a sticky left column (big title with a switcher, sliders
   paired with number fields) beside a greige right half (two return tabs, a
   three-number card, a breakdown list with a dot per row), then a dark section that
   explains the numbers. Zip gates its method behind a report form; here the method
   is printed in full, because every rate in it is either yours or the product's.
   ========================================================================== */
.rt{position:relative;overflow:hidden;background:var(--white)}
.rt-bg{position:absolute;top:0;bottom:0;left:50%;right:0;background:var(--cloud);z-index:0}
.rt-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;max-width:1180px;margin:0 auto;padding:0 24px}

/* ---- left: the inputs --------------------------------------------------------- */
.rt-left{position:sticky;top:96px;align-self:start;padding:72px 64px 72px 0}
.rt-left h1{margin:0 0 48px;font:500 56px/1.02 var(--display);letter-spacing:-.03em;color:var(--ink)}
.rt-pick{display:block;position:relative;width:max-content;max-width:100%;margin-top:4px}
.rt-pick select{appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0 40px 0 0;margin:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;color:var(--blue);field-sizing:content}
.rt-pick select:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
.rt-pick:after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;margin-top:-9px;border:solid var(--blue);border-width:0 3px 3px 0;transform:rotate(45deg);pointer-events:none}

.rt-fields{display:flex;flex-direction:column;gap:26px}
.rt-f{display:grid;grid-template-columns:1fr 190px;align-items:end;gap:8px 40px}
.rt-f label{grid-column:1;font:500 16px/1.4 var(--ui);color:var(--ink)}
.rt-f small{display:block;font:400 13px/1.4 var(--ui);color:var(--t4)}
.rt-f input[type=range]{grid-column:1;width:100%;margin:0;accent-color:var(--blue);height:24px;cursor:pointer}
.rt-f input[type=text]{grid-column:2;grid-row:1/3;height:54px;padding:0 16px;border:1px solid var(--line);border-radius:6px;background:#fff;font:400 18px var(--ui);color:var(--ink)}
.rt-f input[type=text]:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.rt-note{margin:32px 0 0;font:400 13px/1.55 var(--ui);color:var(--t4);max-width:52ch}

/* ---- right: the results -------------------------------------------------------- */
.rt-right{padding:72px 0 88px 64px}
.rt-tabs{display:flex;width:max-content;margin:0 auto 28px;padding:8px;border-radius:6px;background:#fff}
.rt-tab{padding:9px 20px;border-radius:6px;font:500 15px/22px var(--ui);color:var(--mute);text-decoration:none;cursor:pointer}
.rt-tab.on{background:var(--btn);color:#fff}
.rt-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rt-pane h2{margin:0 0 16px;text-align:center;font:500 15px/1.5 var(--ui);color:var(--ink)}
.js .rt-pane:not(.on){display:none}
.rt-pane+.rt-pane{margin-top:48px}
.js .rt-pane+.rt-pane{margin-top:0}

.rt-top{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:24px;border-radius:8px;background:#fff;margin-bottom:16px}
.rt-top div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.rt-top b{font:500 32px/1.18 var(--display);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.rt-top span{font:400 13px/1.4 var(--ui);color:var(--mute)}

.rt-list{padding:8px 24px;border-radius:8px;background:#fff}
.rt-row{display:grid;grid-template-columns:1fr auto 12px;align-items:center;gap:6px 20px;padding:20px 0;border-top:1px solid var(--line)}
.rt-row:first-child{border-top:0}
.rt-row h3{grid-column:1;margin:0;font:500 16px/1.4 var(--ui);color:var(--ink)}
.rt-row p{grid-column:1;margin:0;font:400 13px/1.5 var(--ui);color:var(--mute)}
.rt-val{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.rt-val b{font:500 32px/1.1 var(--display);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.rt-val span{max-width:150px;font:400 12.5px/1.4 var(--ui);color:var(--mute)}
.rt-dot{grid-column:3;grid-row:1/3;width:10px;height:10px;border-radius:50%;background:#4cc38a}
.rt-dot.rt-neg{background:#f0a23b}
.rt-row.rt-sum h3,.rt-row.rt-sum .rt-val b{color:var(--blue)}
.rt-row.rt-sum .rt-dot{background:var(--blue)}

/* ---- the method, in full --------------------------------------------------------- */
.rt-how{background:linear-gradient(180deg,#0f2270 0%,#152a84 45%,#1e39a3 100%);color:#fff;padding:96px 0}   /* the royal fade, as the footer */
.rt-how .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px 64px;align-items:start}
.rt-hd{grid-column:1 / -1;max-width:780px}   /* the heading runs across the top; the two columns sit under it */
.rt-how h3{margin:0 0 18px;font:600 13px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#a9f0c9}
.rt-steps ol{margin:0;padding:0;list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:16px}
.rt-steps li{position:relative;counter-increment:st;padding-left:40px;font:400 15px/1.6 var(--ui);color:#e6ebfb}
.rt-steps li:before{content:counter(st);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.10);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;
  font:600 13px var(--ui);color:#fff}
.rt-steps li b{display:block;color:#fff;font-weight:600}
.rt-every{margin-top:24px}
.rt-every>summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  font:600 14.5px var(--ui);color:#a9f0c9}
.rt-every>summary::-webkit-details-marker{display:none}
.rt-every>summary:after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
.rt-every[open]>summary:after{transform:rotate(-135deg) translateY(1px)}
.rt-every .rt-sheet{margin-top:18px}
.rt-note{margin:14px 0 0;font:400 13.5px var(--ui);color:#c7d2ff}
.rt-how h2{margin:0 0 16px;font:500 44px/1.08 var(--display);letter-spacing:-.02em;color:#fff}
.rt-how .lead{color:#c7d2ff}
.rt-asm ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.rt-asm li{position:relative;padding-left:22px;font:400 15px/1.55 var(--ui);color:#e6ebfb}
.rt-asm li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:#4cc38a}
.rt-asm li b{color:#fff;font-weight:600}
.rt-sheet h3{margin:0 0 16px;font:600 13px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#a9f0c9}
.rt-sheet{padding:28px;border-radius:8px;background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}

.rt-line{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.12);font:400 14.5px/1.5 var(--ui)}
.rt-line:first-of-type{border-top:0}
.rt-line b{font-weight:600;color:#fff}
.rt-line span{color:#e6ebfb;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}

@media (max-width:991px){
  .rt-bg{display:none}
  .rt-in{grid-template-columns:1fr}
  .rt-left{position:static;padding:56px 0 48px}
  .rt-left h1{font-size:48px}
  .rt-right{margin:0 -24px;padding:48px 24px 64px;background:var(--cloud)}
  .rt-how .wrap{grid-template-columns:1fr;gap:40px}
  .rt-hd{max-width:none}
}
@media (max-width:767px){
  .rt-left h1{font-size:40px;margin-bottom:36px}
  .rt-f{grid-template-columns:1fr 150px;gap:8px 20px}
  .rt-top{grid-template-columns:1fr;gap:18px}
  .rt-how h2{font-size:34px}
  .rt-how{padding:72px 0}
}
@media (max-width:479px){
  .rt-in{padding:0 16px}
  .rt-right{margin:0 -16px;padding:40px 16px 56px}
  .rt-left h1{font-size:34px}
  .rt-f{grid-template-columns:1fr;gap:8px}
  .rt-f input[type=text]{grid-column:1;grid-row:auto;height:46px}
  .rt-tabs{width:100%}
  .rt-tab{flex:1 1 0;text-align:center;padding:9px 10px;font-size:14px}
  .rt-list{padding:4px 16px}
  .rt-row{grid-template-columns:1fr 12px}
  .rt-val{grid-column:1;grid-row:auto;align-items:flex-start;text-align:left}
  .rt-dot{grid-column:2;grid-row:1}
  .rt-val span{max-width:none}
  .rt-line{grid-template-columns:1fr;gap:2px}
  .rt-sheet{padding:20px}
}

/* the three less-used fields tuck under More settings (a native details, so it works with JS off) */
.rt-more{border-top:1px solid var(--line);padding-top:18px}
.rt-more>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font:600 15px var(--ui);color:var(--btn)}
.rt-more>summary::-webkit-details-marker{display:none}
.rt-more>summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
.rt-more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.rt-more>.rt-fields{margin-top:22px}


@media (prefers-reduced-motion:reduce){ .rt-every>summary:after{transition:none} }