/* Calculator: the same leads paid for three ways. Uses the site's own type and colours.
   design-study.css styles bare label/input for the dark contact form, so everything here is reset locally. */
.calc{background:var(--cream,#f6f3e9);color:#173e34;padding:140px clamp(20px,4.5vw,64.8px) 120px}
.calc h2{margin:0;font-weight:400;font-size:clamp(46px,6.2vw,89px);line-height:1;letter-spacing:-.06em}
.calc-lede{margin:30px 0 0;max-width:640px;font-size:19px;line-height:1.5}
.calc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,90px);margin-top:60px;border-top:1px solid #173e344d;padding-top:40px;align-items:start}
.calc label,.calc legend{margin:0;font-size:13px;color:#666f62}
.calc fieldset{margin:0;padding:0;border:0;min-width:0}
.calc input{color:#173e34}

/* Inputs */
.calc-ctl{display:grid;gap:22px}
.calc-field legend,.calc-field>label{display:block;margin-bottom:8px}
.seg{display:flex;padding:3px;border:1px solid #173e3440;border-radius:14px;background:#fbf9f2}
.seg label{flex:1 1 0;min-width:0;margin:0;position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:44px;padding:4px 8px;border-radius:11px;font-size:14px;line-height:1.15;color:#173e34;text-align:center;transition:background .2s,color .2s}
.seg small{font-size:11.5px;opacity:.7;margin-top:2px}
.seg label:hover span{background:#173e340d}
.seg input:checked+span{background:#173e34;color:#f6f3e9}
.seg input:focus-visible+span{outline:2px solid #b65137;outline-offset:2px}

.calc-switch{display:flex!important;align-items:center;gap:12px;min-height:44px;cursor:pointer;position:relative;color:#173e34!important;font-size:15px!important}
.calc-switch input{position:absolute;opacity:0;width:1px;height:1px}
.calc-switch-ui{flex:none;position:relative;width:42px;height:24px;border-radius:20px;border:1px solid #173e3466;background:#fbf9f2;transition:background .2s,border-color .2s}
.calc-switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#173e34;transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s}
.calc-switch input:checked+.calc-switch-ui{background:#173e34;border-color:#173e34}
.calc-switch input:checked+.calc-switch-ui::after{transform:translateX(18px);background:#f6f3e9}
.calc-switch input:focus-visible+.calc-switch-ui{outline:2px solid #b65137;outline-offset:3px}
.calc-switch small{color:#666f62;font-size:13px;margin-left:4px}

.calc-range{display:grid;grid-template-columns:1fr auto;align-items:baseline}
.calc-range output{font-size:22px;letter-spacing:-.03em}
.calc-range input{grid-column:1/-1;display:block;width:100%;height:44px;margin:0;padding:0;border:0;background:transparent;accent-color:#168976;cursor:pointer}

.calc-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.calc-input{display:flex;align-items:center;min-height:46px;padding:0 12px;border:1px solid #173e3440;border-radius:12px;background:#fbf9f2;transition:border-color .2s}
.calc-input:focus-within{border-color:#173e34}
.calc-input>span{color:#666f62;margin-right:4px}
.calc-input input{display:block;width:100%;min-width:0;margin:0;padding:10px 0;border:0;border-radius:0;background:transparent;font-size:16px;-moz-appearance:textfield}
.calc-input input:focus{outline:0;border:0}
.calc-input input::-webkit-inner-spin-button{opacity:.4}
.calc-seg-sm .seg span{font-size:13px;padding:4px 4px}

.calc-more{border-top:1px solid #173e3426;padding-top:6px}
.calc-more summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;font-size:14px;list-style:none}
.calc-more summary::-webkit-details-marker{display:none}
.calc-more summary::after{content:"+";font-size:20px;line-height:1;transition:transform .25s}
.calc-more[open] summary::after{transform:rotate(45deg)}
.calc-more summary:focus-visible{outline:2px solid #b65137;outline-offset:3px}
.calc-more p{margin:2px 0 14px;font-size:13px;line-height:1.5;color:#666f62}

/* Output: three options side by side, bars scaled to the dearest */
.calc-out{min-width:0}
.calc-won{margin:0 0 20px;font-size:15px;line-height:1.4;color:#33463f}
.calc-won b{display:block;margin-top:4px;font-weight:400;font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.06em;color:#173e34}
.calc-won small{display:block;margin-top:6px;font-size:13px;color:#666f62}
.calc-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #173e344d;border-bottom:1px solid #173e344d}
.calc-opt{padding:22px 20px 24px 0;min-width:0}
.calc-opt+.calc-opt{padding-left:20px;border-left:1px solid #173e3433}
.calc-opt-head h3{margin:0;font-weight:400;font-size:20px;letter-spacing:-.03em}
.calc-opt-head span{display:block;margin-top:4px;min-height:2.6em;font-size:13px;line-height:1.3;color:#666f62}
.calc-bar{height:8px;margin:14px 0 18px;border-radius:8px;background:#173e3412;overflow:hidden}
.calc-bar i{display:block;height:100%;border-radius:8px;background:#9aa69a;transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.is-site .calc-bar i{background:#168976}
.calc-opt dl{margin:0;display:grid;gap:12px}
.calc-opt dl div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.calc-opt dt{font-size:13px;color:#666f62}
.calc-opt dd{margin:0;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.is-site dl div:first-child dd{font-size:24px}
.calc-opt dl div:first-child dd{font-size:24px;letter-spacing:-.04em}
.calc-verdict{margin:26px 0 0;font-size:clamp(22px,2.2vw,30px);line-height:1.2;letter-spacing:-.03em}
.calc-note{margin:18px 0 0;max-width:620px;font-size:13px;line-height:1.55;color:#666f62}

@media (max-width:1100px) and (min-width:861px){
  .calc-opts{grid-template-columns:1fr}
  .calc-opt,.calc-opt+.calc-opt{padding:18px 0;border-left:0}
  .calc-opt+.calc-opt{border-top:1px solid #173e3433}
  .calc-opt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:24px}
  .calc-bar{grid-column:1;margin:10px 0 0}
  .calc-opt dl{grid-column:2;grid-row:1/span 2}
}
@media (max-width:860px){
  .calc{padding-top:90px}
  .calc-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .calc-lede{font-size:17px}
  .calc-pair{grid-template-columns:1fr}
  .calc-opts{grid-template-columns:1fr}
  .calc-opt,.calc-opt+.calc-opt{padding:18px 0;border-left:0}
  .calc-opt+.calc-opt{border-top:1px solid #173e3433}
  .calc-opt-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .calc-opt-head span{min-height:0;margin:0;text-align:right}
  .calc-bar{margin:10px 0 14px}
  .calc-opt dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .calc-opt dl div{display:block}
  .calc-opt dt{font-size:12px}
  .calc-opt dd,.calc-opt dl div:first-child dd{font-size:17px;margin-top:2px}
}
@media (prefers-reduced-motion:reduce){.calc-bar i,.calc-switch-ui::after{transition:none}}

/* Calculator hidden for now: remove the hidden attribute on section.calc in index.html to bring it back */
.calc[hidden]{display:none!important}