.buy-calculator{display:grid;grid-template-columns:1fr 1fr;background:white;border:1px solid var(--border);border-radius:32px;overflow:hidden;margin-top:28px}.buy-calculator[hidden]{display:none}.buy-controls,.buy-result{padding:32px}.buy-result{background:rgb(224 210 240 / .45)}.buy-toggle{display:flex;gap:4px;padding:4px;background:var(--subtle);border:1px solid var(--border);border-radius:999px;margin-bottom:24px}.buy-toggle button{flex:1;border:0;border-radius:999px;min-height:44px;padding:8px 12px;background:transparent;font-size:14px;line-height:1.3;color:var(--ink)}.buy-toggle button[aria-pressed=true]{background:var(--purple);color:white}.buy-controls>input{margin-bottom:18px}.buy-down-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.buy-down-heading label{margin:0}.buy-unit{margin:0 0 8px;width:116px;flex-shrink:0}.buy-unit button{min-width:44px}.buy-basic-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.buy-basic-grid label{font-size:14px;line-height:1.4}.buy-down-equivalent{min-height:21px;margin:0 0 16px}.buy-assumptions{margin-top:20px;border-top:1px solid var(--border)}.buy-assumptions summary{min-height:44px;padding:12px 0;cursor:pointer;color:var(--purple);font-weight:700}.buy-assumptions .buy-basic-grid{margin-top:8px}.buy-result output{font-size:clamp(40px,4.4vw,64px);margin:0 0 8px;overflow-wrap:anywhere}.buy-secondary{font-weight:600;margin-bottom:24px}.buy-breakdown{margin:0}.buy-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:15px}.buy-breakdown dd{margin:0;font-weight:700;white-space:nowrap}.buy-total{border-top:1px solid #81778966;margin-top:4px}.buy-result .small{font-size:14px;color:var(--ink)}.buy-result .button{width:100%;gap:12px}.buying-calculator-section h2{margin-bottom:16px}.buying-calculator-section .section-copy{margin-bottom:0}@media(max-width:767px){.buying-calculator-section{padding-block:40px}.buy-calculator{grid-template-columns:1fr;border-radius:24px;margin-top:20px}.buy-controls,.buy-result{padding:20px}.buy-toggle{margin-bottom:16px}.buy-unit{margin-bottom:8px}.buy-result output{font-size:44px}.buy-result>.eyebrow{margin-bottom:8px}.buy-secondary{margin-bottom:12px}.buy-basic-grid{gap:12px}.buy-result .button{font-size:15px}.buy-controls>label{font-size:16px}.buy-result .small{margin:12px 0}.buy-breakdown>div{padding:5px 0}.buy-down-heading label{font-size:16px}.buy-assumptions{margin-top:12px}}

.buy-mode-prompt{font-size:16px;font-weight:700;line-height:1.4;margin-bottom:12px}.buy-toggle:not(.buy-unit) button{padding-inline:12px;text-wrap:balance}

/* A compact default view; detailed assumptions and breakdown remain accessible. */
.buying-calculator-section{padding-block:40px}
.buying-calculator-section>.container>.eyebrow{margin-bottom:10px}
.buying-calculator-section h2{font-size:clamp(28px,3vw,40px);line-height:1.15;margin-bottom:12px}
.buying-calculator-section .section-copy{font-size:17px;line-height:1.5;max-width:75ch}
.buy-calculator{margin-top:20px}
.buy-controls,.buy-result{padding:24px}
.buy-mode-prompt{margin-bottom:8px}
.buy-toggle{margin-bottom:16px}
.buy-entry-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.buy-main-field>label,.buy-down-heading{min-height:52px;margin:0 0 8px;display:flex;align-items:center;font-size:16px;line-height:1.35}
.buy-down-heading .buy-unit{margin:0;width:100px}
.buy-down-heading{gap:8px}.buy-down-heading label{font-size:16px;line-height:1.35}
.buy-down-equivalent{margin:6px 0 0;font-size:14px}
.buy-assumptions{margin-top:14px}
.buy-assumptions>.buy-basic-grid{margin-bottom:16px}
.buy-cost-details{border-top:1px solid #81778966;margin-top:12px}
.buy-cost-details summary{min-height:44px;padding:10px 0;font-size:15px;font-weight:700;cursor:pointer}
.buy-result>.eyebrow{margin-bottom:8px}
.buy-result output{font-size:48px;line-height:1.05}
.buy-secondary{margin-bottom:12px;font-size:16px}
.buy-result .small{margin:12px 0 16px}
.buy-result #buy-error:empty{display:none}
@media(max-width:767px){
 .buying-calculator-section{padding-block:32px}
 .buying-calculator-section>.container>.eyebrow{display:none}
 .buying-calculator-section h2{font-size:28px;margin-bottom:8px}
 .buying-calculator-section .section-copy{font-size:16px;line-height:1.4}
 .buy-controls,.buy-result{padding:16px}
 .buy-calculator{margin-top:16px}
 .buy-mode-prompt{font-size:15px}
 .buy-toggle:not(.buy-unit) button{font-size:14px;padding:6px 8px}
 .buy-entry-grid{gap:12px}
 .buy-main-field>label,.buy-down-heading{min-height:64px;font-size:15px;margin-bottom:6px}
 .buy-down-heading{align-items:flex-start;flex-direction:column;justify-content:space-between;gap:4px}
 .buy-down-heading label{font-size:15px}
 .buy-down-heading .buy-unit{padding:0;border:0;background:none;width:100%;gap:4px}
 .buy-unit button{min-height:44px;padding:3px 8px;border:1px solid var(--border)}
 .buy-main-field>label{align-items:flex-start;padding-top:0}
 .buy-entry-grid input{min-height:44px!important;padding:8px 12px!important}
 .buy-down-equivalent{font-size:13px;line-height:1.4;min-height:0}
 .buy-assumptions{margin-top:10px}
 .buy-assumptions summary{font-size:15px}
 .buy-result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);column-gap:12px}
 .buy-result>.eyebrow{grid-column:1/-1;font-size:11px}
 .buy-result output{grid-column:1;font-size:38px;margin:0}
 .buy-secondary{grid-column:2;align-self:center;font-size:15px;line-height:1.4;margin:0}
 .buy-cost-details,.buy-result>.small,.buy-result>.button,.buy-result>.error{grid-column:1/-1}
 .buy-result>.small{font-size:13px;line-height:1.45;margin:8px 0 12px}
 .buy-result .button{min-height:44px;padding:10px 14px}
}
/* Keep paired fields aligned even when labels wrap or the unit toggle is tall. */
.buy-main-field>label,.buy-down-heading{min-height:76px}
.buy-down-heading{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:4px}
/* Units share the down-payment heading row rather than adding a second line. */
.buy-main-field>label,.buy-down-heading{min-height:52px}
.buy-down-heading{flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.buy-down-heading label{flex:1;min-width:0;font-size:15px}
.buy-down-heading .buy-unit{flex:0 0 94px;width:94px;padding:0;gap:4px;background:transparent;border:0}
.buy-down-heading .buy-unit button{flex:0 0 44px;min-width:44px;min-height:44px;padding:4px;border:1px solid var(--border)}
@media(max-width:767px){
 .buy-entry-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:10px}
 .buy-main-field>label,.buy-down-heading{min-height:52px}
 .buy-down-heading{gap:6px}
 .buy-down-heading label{font-size:14px}
}
@media(max-width:359px){.buy-entry-grid{grid-template-columns:1fr}.buy-main-field>label{min-height:24px}}
@media(min-width:768px) and (max-width:900px){.buy-entry-grid{grid-template-columns:1fr}.buy-main-field>label{min-height:24px}}
html[lang=es] .buy-entry-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}
@media(max-width:389px){html[lang=es] .buy-entry-grid{grid-template-columns:1fr}}
@media(min-width:768px) and (max-width:1023px){html[lang=es] .buy-entry-grid{grid-template-columns:1fr}}

/* A native two-stop slider with a shared moving selection pill. */
.buy-down-heading .buy-unit-slider{position:relative;display:flex;align-items:center;justify-content:space-around;isolation:isolate;height:44px;min-height:44px;padding:0;gap:0;border-radius:999px;background:var(--subtle);box-shadow:inset 0 0 0 1px var(--border)}
.buy-unit-slider .buy-unit-thumb{position:absolute;left:2px;top:2px;width:44px;height:40px;border-radius:999px;background:var(--purple);transition:transform 200ms ease-out;z-index:0}
.buy-unit-slider[data-selected=dollars] .buy-unit-thumb{transform:translateX(46px)}
.buy-unit-slider .buy-unit-symbol{position:relative;z-index:1;font-size:16px;font-weight:700;line-height:1;width:44px;text-align:center;pointer-events:none;color:var(--ink)}
.buy-unit-slider[data-selected=percent] .buy-unit-symbol:nth-of-type(2),.buy-unit-slider[data-selected=dollars] .buy-unit-symbol:nth-of-type(3){color:white}
.buy-down-heading .buy-unit-slider input{position:absolute;inset:0;z-index:2;width:100%;height:44px;min-height:44px;margin:0;padding:0!important;opacity:0;cursor:pointer;touch-action:pan-y}
.buy-unit-slider:has(input:focus-visible){outline:3px solid var(--purple);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.buy-unit-slider .buy-unit-thumb{transition:none}}
