/* Savings quiz. Loaded only by /savings-calculator/. */
.quiz{--teal:#0890A0;--amber:#D98A2B;--surface:#FFFFFF;--grid:#E4E9E9}

/* ---- inputs ---------------------------------------------------------- */
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 30px;margin:0 0 6px}
.qf{min-width:0}
.qf > label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 3px}
.qf .hint{display:block;font-size:12px;color:var(--body);opacity:.72;margin:0 0 9px;line-height:1.45}
.qrow{display:flex;align-items:center;gap:10px}
.qrow input[type=number]{width:104px;flex:none;font:600 15px/1 'Inter',sans-serif;color:var(--ink);
 background:#fff;border:1px solid var(--line);border-radius:5px;padding:9px 10px;-moz-appearance:textfield}
.qrow input[type=number]::-webkit-outer-spin-button,
.qrow input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qrow input[type=number]:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.qrow .unit{font-size:13px;color:var(--body);opacity:.7;flex:none}
input[type=range]{flex:1 1 auto;min-width:0;-webkit-appearance:none;appearance:none;background:transparent;height:22px;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
 background:var(--teal);border:2px solid #fff;box-shadow:0 0 0 1px var(--teal);margin-top:-7px;cursor:pointer}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--teal);
 border:2px solid #fff;box-shadow:0 0 0 1px var(--teal);cursor:pointer}
input[type=range]:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}

.qseg{display:flex;flex-wrap:wrap;gap:6px}
.qseg button{font:600 13px/1 'Inter',sans-serif;color:var(--body);background:#fff;
 border:1px solid var(--line);border-radius:5px;padding:9px 13px;cursor:pointer}
.qseg button:hover{border-color:var(--teal);color:var(--teald)}
.qseg button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}
.qseg button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.qnote{font-size:12.5px;color:var(--body);opacity:.75;margin:14px 0 0;max-width:70ch}

/* ---- result ---------------------------------------------------------- */
.qresult{background:var(--tint);border-top:3px solid var(--teal)}
.qhero{margin:0 0 4px}
.qhero .k{display:block;font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
 color:var(--teald);margin:0 0 10px}
.qhero .v{display:block;font-size:clamp(42px,7vw,64px);font-weight:800;line-height:1;
 letter-spacing:-.035em;color:var(--ink);font-variant-numeric:proportional-nums}
.qhero .s{display:block;font-size:15px;color:var(--body);margin:12px 0 0;max-width:56ch}

.qtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:2px;
 margin:30px 0 0;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.qtile{background:#fff;padding:16px 18px}
.qtile .k{display:block;font-size:12px;color:var(--body);opacity:.8;margin:0 0 7px;line-height:1.35}
.qtile .v{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.qtile .d{display:block;font-size:12px;color:var(--body);opacity:.7;margin:5px 0 0}

/* ---- chart ----------------------------------------------------------- */
.qchart{margin:0}
.qlegend{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 22px;font-size:13px;color:var(--body)}
.qlegend span{display:inline-flex;align-items:center;gap:7px}
.qlegend i{width:11px;height:11px;border-radius:2px;flex:none}
.qgroup{margin:0 0 20px}
.qgroup > .gl{font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 9px}
.qgroup > .gl em{font-style:normal;font-weight:400;opacity:.65}
.qbars{display:flex;flex-direction:column;gap:2px}          /* 2px surface gap between adjacent bars */
.qbar{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:10px}
.qbar .n{font-size:12.5px;color:var(--body);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtrack{position:relative;height:22px;background:linear-gradient(var(--grid),var(--grid)) no-repeat left center/100% 1px}
.qfill{height:20px;border-radius:0 4px 4px 0;transition:width .18s ease}  /* 4px rounded data-end, square at baseline */
.qval{position:absolute;top:50%;transform:translateY(-50%);font-size:12.5px;font-weight:600;
 color:var(--ink);white-space:nowrap;padding-left:8px}
.qzero{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}

.qtable{width:100%;border-collapse:collapse;font-size:13.5px;margin:0}
.qtable caption{text-align:left;font-size:12.5px;color:var(--body);opacity:.75;padding:0 0 10px}
.qtable th,.qtable td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--line)}
.qtable th:first-child,.qtable td:first-child{text-align:left}
.qtable thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teald);font-weight:700}
.qtable tbody tr:last-child td{border-bottom:none}
.qtable tfoot td{font-weight:700;color:var(--ink);border-top:2px solid var(--line);border-bottom:none}
.qtable td.num{font-variant-numeric:tabular-nums}
.qtable .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:baseline}
.qtoggle{background:none;border:none;padding:0;margin:18px 0 0;font:600 13px/1 'Inter',sans-serif;
 color:var(--teald);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qtoggle:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.qpanel[hidden]{display:none}
.qscroll{overflow-x:auto}

.qmargin{border-left:3px solid var(--amber);padding:2px 0 2px 20px;margin:0}
.qmargin .v{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.03em;color:var(--ink);
 display:block;line-height:1.15;margin:0 0 8px}

@media(max-width:760px){
 .qbar{grid-template-columns:74px 1fr;gap:8px}
 .qtiles{grid-template-columns:1fr 1fr}
 .qrow input[type=number]{width:88px}
}
@media(prefers-reduced-motion:reduce){.qfill{transition:none}}

/* What the platform you picked actually charges, under the picker. The paragraphs
   come off the comparison page for that platform, so a reader gets the argument
   beside the arithmetic rather than a rate with nothing next to it. */
.qwhy{font-size:13px;line-height:1.6;color:var(--body);opacity:.9;margin:-14px 0 26px;
 padding:14px 16px;background:var(--tint);border-left:3px solid var(--teal);
 border-radius:0 8px 8px 0;max-width:74ch}
.qwhy p{margin:0 0 11px;max-width:none}
.qwhy p:last-child{margin:0}
.qwhy a{color:var(--teald)}
@media(min-width:900px){
 .qwhy{max-width:none}
 .qwhy-2{columns:2;column-gap:36px}
 .qwhy-2 p{break-inside:avoid}
 .qwhy-2 p:last-child{margin:0 0 11px}
}