/* LetHub pricing calculator — the ONLY hand-written CSS left on the page.
   Everything else is native Webflow styles, editable in the Designer.
   Scoped under .lp-calc-wrap so it can never touch the site nav/footer. */



.lp-calc-body .lp-calc-title{font:800 18px/1.2 Manrope,system-ui,sans-serif;color:#122658;letter-spacing:-.3px;margin-bottom:20px}
.lp-seg{display:flex;gap:5px;background:#EEF1F7;padding:5px;border-radius:12px;margin-bottom:22px}
.lp-seg-btn{flex:1;height:42px;border:none;border-radius:8px;cursor:pointer;white-space:nowrap;background:transparent;color:#717D9B;font:600 13px/1 Manrope,system-ui,sans-serif;transition:background .12s,color .12s}
.lp-seg-btn.lp-active{background:#fff;color:#2F80ED;font-weight:700;box-shadow:0 1px 2px rgba(18,38,88,.06)}
.lp-field-top{margin-bottom:18px}
.lp-field-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px}
.lp-field{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid #EEF1F7}
.lp-field-label{font:700 13px/1.3 Manrope,system-ui,sans-serif;color:#3A4565;flex:1}
.lp-inp{display:flex;align-items:center;width:106px;height:38px;padding:0 12px;border:1px solid #E8ECF4;border-radius:8px;background:#fff;flex:none}
.lp-inp-sm{width:86px}
.lp-inp:focus-within{border-color:#2F80ED;box-shadow:0 0 0 3px rgba(47,128,237,.12)}
.lp-inp input{width:100%;border:0;outline:0;background:transparent;text-align:right;font:500 14px/1 'JetBrains Mono',ui-monospace,monospace;color:#122658}
.lp-calc-body input[type=number]{-moz-appearance:textfield}
.lp-calc-body input[type=number]::-webkit-outer-spin-button,.lp-calc-body input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lp-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:#E8ECF4;outline:0;cursor:pointer}
.lp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#2F80ED;border:3px solid #fff;box-shadow:0 1px 4px rgba(18,38,88,.2);cursor:pointer}
.lp-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#2F80ED;border:3px solid #fff;box-shadow:0 1px 4px rgba(18,38,88,.2);cursor:pointer}
.lp-result{background:#F5F6F8;border:1px solid #EEF1F7;border-radius:12px;padding:20px;margin-top:14px}
.lp-price-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.lp-price-cap{font:700 11px/1 Manrope,system-ui,sans-serif;color:#717D9B;text-transform:uppercase;letter-spacing:.08em}
.lp-price-big{display:flex;align-items:baseline;gap:5px;margin-top:6px;font:800 46px/1 Manrope,system-ui,sans-serif;letter-spacing:-1.4px;color:#122658}
.lp-price-mo{font:700 18px/1 Manrope,system-ui,sans-serif;color:#717D9B}
.lp-eff{font:500 12px/1.4 'JetBrains Mono',ui-monospace,monospace;color:#717D9B;text-align:right}
.lp-break{border-top:1px solid #E8ECF4;margin-top:16px;padding-top:6px}
.lp-break-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.lp-break-label{font:400 13.5px/1.4 Manrope,system-ui,sans-serif;color:#717D9B}
.lp-break-val{font:500 13.5px/1.4 'JetBrains Mono',ui-monospace,monospace;color:#122658;white-space:nowrap}
.lp-total-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0 0;margin-top:5px;border-top:1px solid #E8ECF4}
.lp-total-label{font:700 15px/1.2 Manrope,system-ui,sans-serif;color:#122658}
.lp-total-val{font:800 16px/1.2 'JetBrains Mono',ui-monospace,monospace;color:#2F80ED;white-space:nowrap}
.lp-saved{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:11px 13px;background:#EAF2FE;border-radius:12px}
.lp-saved-label{font:700 12.5px/1.3 Manrope,system-ui,sans-serif;color:#0E2253}
.lp-saved-val{font:800 14px/1.2 'JetBrains Mono',ui-monospace,monospace;color:#0E2253;white-space:nowrap}
.lp-custom{display:none;flex-direction:column;gap:10px;align-items:flex-start}
.lp-custom-pill{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:#EAF2FE;color:#0E2253;font:700 11.5px/1 Manrope,system-ui,sans-serif}
.lp-custom-title{font:800 34px/1.05 Manrope,system-ui,sans-serif;letter-spacing:-.8px;color:#122658}
.lp-custom-desc{font:400 13.5px/1.6 Manrope,system-ui,sans-serif;color:#717D9B;margin:0}
.lp-fine{font:italic 400 11px/1.6 Manrope,system-ui,sans-serif;color:#717D9B;margin:14px 0 0;padding-top:13px;border-top:1px solid #EEF1F7}
.lp-fine-link{color:#2F80ED;text-decoration:underline}

@media (max-width:720px){.lp-seg-btn{white-space:normal;height:auto;min-height:42px;padding:8px 10px;line-height:1.25}}

/* FAQ accordion — the two bits Webflow's Style panel cannot express.
   The accordion itself is native <details>/<summary>, so it works with no JS. */
.lp-faq-sum{list-style:none}
.lp-faq-sum::-webkit-details-marker{display:none}
.lp-faq-sum::marker{content:""}
.lp-faq-item[open] .lp-faq-chev{transform:rotate(180deg)}
.lp-faq-sum:hover .lp-faq-q{color:#2F80ED}

/* ── Webflow cascade fixes ────────────────────────────────────────────────
   Webflow renders every Link element with its own `.w-inline-block
   {display:inline-block}`. That is the same specificity as our class, so on a
   Link our `display:flex` loses and the button collapses: no centring, no gap,
   icon overlapping the label. Raising to element+class (0,1,1) beats it without
   !important. Matches both `lp-x` and the `lp-x-1` names Webflow assigns when a
   name is already taken. */
a[class*="lp-phone-btn"]{display:flex;align-items:center;justify-content:center;column-gap:11px}
a[class*="lp-utter-link"]{display:inline-flex;align-items:center;column-gap:5px}
a[class*="lp-btn"]{display:inline-flex;align-items:center;justify-content:center;column-gap:8px}

/* The site's footer CTA band is pulled up over the preceding section
   (`.cta-block-transform{margin-bottom:-40px;transform:translateY(-50%)}`), so
   the last section must reserve room or the band lands on top of its content. */
.lp-faq{padding-bottom:190px}
@media (max-width:767px){.lp-faq{padding-bottom:150px}}

/* ── Stepper controls (Faizan 2026-08-14) ────────────────────────────────
   The old pricing page relied on the browser's native number spinners. Those
   render tiny, only on hover, and DO NOT EXIST on mobile Safari/Chrome — i.e.
   they fail exactly where "just tap it" matters. So the on-market and lockbox
   fields get real -/+ buttons: always visible, 32px tap targets, same on every
   device. Units keeps its slider, untouched. */
.lp-step-ctrl{display:flex;align-items:center;gap:6px;flex:none}
.lp-step-btn{width:32px;height:32px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid #E8ECF4;background:#FFFFFF;border-radius:8px;color:#3A4565;cursor:pointer;
  font:700 17px/1 Manrope,system-ui,sans-serif;-webkit-appearance:none;appearance:none;
  transition:background .12s,border-color .12s,color .12s;padding:0}
.lp-step-btn:hover{background:#F5F6F8;border-color:#CAD2E7;color:#122658}
.lp-step-btn:active{background:#EEF0F5}
.lp-step-btn:focus-visible{outline:2px solid #2F80ED;outline-offset:2px}
.lp-step-ctrl .lp-inp{width:66px}
@media (max-width:479px){.lp-step-btn{width:36px;height:36px}.lp-step-ctrl .lp-inp{width:58px}}

/* The calculator card + its CTA are NATIVE Webflow elements now (.calc-shell /
   .calc-card / .calc-cta-btn) so Faizan can edit them in the Designer. This file
   only styles the interactive guts that live inside the code embed. */
.lp-calc-body{font-family:Manrope,system-ui,sans-serif}
.lp-calc-body .lp-calc-title{font:800 18px/1.2 Manrope,system-ui,sans-serif;color:#122658;letter-spacing:-.3px;margin-bottom:20px}