/* Tools — the two calculators */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(16px,2vw,28px);align-items:start}
@media (max-width:960px){.calc{grid-template-columns:1fr}}
.calc__in{display:grid;gap:clamp(26px,3vw,40px);padding:clamp(22px,3vw,40px);border-radius:var(--r);background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.calc__group{display:grid;gap:4px;min-width:0}
.calc__out{position:sticky;top:110px;display:grid;gap:22px;align-content:start;padding:clamp(26px,3.4vw,52px);border-radius:var(--r);background:var(--paper);box-shadow:0 0 0 1px var(--line),0 40px 80px -50px rgba(74,55,45,.45);overflow:hidden}
@media (max-width:960px){.calc__out{position:relative;top:0}}
.calc__out--mocha{background:radial-gradient(120% 90% at 90% 0%,var(--mocha-hi),var(--mocha-lo) 60%,var(--mocha-deep));color:var(--rice);box-shadow:none}
.calc__k{color:var(--ink-2)}
.calc__out--mocha .calc__k{color:rgba(246,240,233,.65)}
.calc__read{font-size:clamp(17px,1.35vw,20px);line-height:1.5;font-weight:300;max-width:52ch;min-height:4.5em}
.calc__read b{font-weight:600}
.calc__read em{font-style:normal;color:var(--yuzu);font-weight:500}
.calc__out--mocha .calc__read em{color:var(--peach)}
.calc__fine{font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:18px;max-width:60ch}
.calc__out--mocha .calc__fine{color:rgba(246,240,233,.62);border-color:var(--cream-line)}
.calc__out .pill{justify-self:start}

/* big thin numerals */
.big{display:block;font-size:clamp(64px,10vw,150px);font-weight:200;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc__out--mocha .big{color:var(--peach)}
.big--sm{font-size:clamp(44px,5.4vw,84px)}

/* sliders */
.slide{display:grid;gap:16px}
.slide__lab{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.slide__lab label{font-weight:500}
.slide__lab output{font-size:clamp(28px,2.6vw,38px);font-weight:200;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--yuzu)}
.slide input[type=range]{height:6px}
.slide input[type=range]:focus-visible{outline:2px solid var(--yuzu);outline-offset:8px}

/* leak bar */
.leak-bar{position:relative;height:14px;border-radius:99px;background:rgba(246,240,233,.14);overflow:hidden}
.leak-bar__all{position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,201,168,.35),rgba(244,201,168,.55));transform-origin:left}
.leak-bar__third{position:absolute;inset:0 auto 0 0;width:33.333%;background:var(--yuzu);border-radius:99px;transform-origin:left}
.leak-bar__key{display:flex;gap:22px;flex-wrap:wrap;color:rgba(246,240,233,.7);margin-top:-8px}
.leak-bar__key span{display:inline-flex;align-items:center;gap:8px}
.k{width:10px;height:10px;border-radius:50%;display:inline-block}
.k--all{background:rgba(244,201,168,.55)}.k--third{background:var(--yuzu)}

/* option cards */
.opts{display:grid;gap:10px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt__box{display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:baseline;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--rice);transition:border-color .3s,background .3s,box-shadow .3s}
.opt__box::before{content:"";grid-row:1/span 2;align-self:start;margin-top:3px;width:20px;height:20px;border-radius:6px;border:1.5px solid rgba(43,33,28,.3);background:var(--paper) center/12px no-repeat;transition:background-color .25s,border-color .25s}
.opt--radio .opt__box::before{border-radius:50%}
.opt__t{font-weight:500;line-height:1.3}
.opt__p{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap}
.opt__d{grid-column:2/-1;font-size:14px;color:var(--ink-2)}
.opt:hover .opt__box{border-color:rgba(43,33,28,.3)}
.opt input:checked+.opt__box{background:#fff;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.opt input:checked+.opt__box::before{background-color:var(--yuzu);border-color:var(--yuzu);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E")}
.opt--radio input:checked+.opt__box::before{background-image:none;box-shadow:inset 0 0 0 4px var(--paper)}
.opt input:focus-visible+.opt__box{outline:2px solid var(--yuzu);outline-offset:3px}
.opt--ritual .opt__box{background:color-mix(in oklab,var(--peach) 30%,var(--rice))}

/* rent output */
.dual{display:flex;align-items:flex-end;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.dual p{display:grid;gap:8px}
.dual small{color:var(--ink-2)}
.dual__rule{width:1px;align-self:stretch;background:var(--line)}
.bars{display:grid;gap:18px}
.bar__k{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-weight:500}
.bar__k span:last-child{font-weight:200;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bar__track{height:16px;border-radius:99px;background:var(--rice-2);overflow:hidden}
.bar__fill{display:block;height:100%;width:0;border-radius:99px;transform-origin:left}
.bar__fill--a{background:linear-gradient(90deg,var(--mocha-hi),var(--mocha-lo))}
.bar__fill--b{background:linear-gradient(90deg,var(--yuzu-hi),var(--yuzu))}

.band{display:grid;text-decoration:none}
.phero__ctas .pill{white-space:normal}