/* Calculator pages reuse the homepage hh-* classes from v3.css as-is.
   This file only adds page chrome and input styles the homepage wizard
   does not already define. Do not shrink hh-quiz / hh-card padding or type. */

body.calc-wiz{
  margin:0;
  background:#f7f9f8;
  font-family:Inter,system-ui,sans-serif;
}

/* Standard brand bar and footer (same as other /start pages). The wizard
   card is sized so it sits fully on a 1280x800 or 390x844 screen. */
body.calc-wiz main{
  max-width:640px;
  margin:0 auto;
  padding:24px 20px 40px;
}

body.calc-wiz .cw-fold{scroll-margin-top:0}

/* Money and number fields: same chrome as the homepage contact inputs. */
body.calc-wiz .money{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
body.calc-wiz .money span,
body.calc-wiz .cw-suf{
  font-size:22px;
  font-weight:700;
  color:#0b2545;
  flex:none;
  line-height:1;
}
body.calc-wiz .money input,
body.calc-wiz input.cw-num,
body.calc-wiz .cw-contact input[type=text],
body.calc-wiz .cw-contact input[type=email],
body.calc-wiz .cw-contact input[type=tel]{
  width:100%;
  flex:1 1 auto;
  min-width:0;
  font-family:Inter,system-ui,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.4;
  color:#0b1b2e;
  padding:12px;
  border:1px solid #cbd3e1;
  border-radius:10px;
  background:#fff;
  min-height:44px;
  box-sizing:border-box;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
body.calc-wiz .money input:focus,
body.calc-wiz input.cw-num:focus,
body.calc-wiz .cw-contact input:focus{
  outline:2px solid #2e9d6a;
  outline-offset:1px;
  border-color:#2e9d6a;
}

body.calc-wiz .cw-contact label{
  display:block;
  font-size:17px;
  font-weight:600;
  color:#0b2545;
  margin:12px 0 4px;
}
body.calc-wiz .cw-contact h3 + .hh-note + label{margin-top:0}
body.calc-wiz .cw-contact .chk{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:400;
  font-size:15px;
  line-height:1.45;
  color:#1f2f45;
  margin:16px 0 0;
}
body.calc-wiz .cw-contact .chk input{
  margin-top:3px;
  width:20px;
  height:20px;
  flex:0 0 20px;
  min-height:0;
  padding:0;
  border-radius:4px;
  accent-color:#2e9d6a;
  -webkit-appearance:checkbox;
  appearance:auto;
}

/* Nav uses the same navy pill as the homepage contact form (v3 .btn.big). */
body.calc-wiz .cw-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
body.calc-wiz .cw-nav .hh-back[hidden],
body.calc-wiz .cw-nav .btn[hidden],
body.calc-wiz .cw-step[hidden]{display:none!important}
body.calc-wiz .cw-nav .btn{margin-left:auto}

body.calc-wiz .cw-err{
  color:#b42318;
  font-size:14px;
  font-weight:600;
  margin:10px 0 0;
}
body.calc-wiz .cw-err[hidden]{display:none!important}

body.calc-wiz .cw-result h3{margin:0 0 12px}
body.calc-wiz .cw-result .cw-head{
  font-weight:700;
  font-size:16px;
  color:#1f2f45;
  margin:0 0 10px;
}
body.calc-wiz .cw-result p{
  font-size:15px;
  line-height:1.55;
  color:#334155;
  margin:0 0 10px;
}
body.calc-wiz .cw-result .cw-disc{font-size:13px;color:#5b6675}
body.calc-wiz .cw-result .btn{margin-top:8px}
body.calc-wiz .cw-result .hh-priv{text-align:center}

@media(max-width:420px){
  body.calc-wiz main{padding:16px 14px 28px}
}
@media(prefers-reduced-motion:reduce){
  body.calc-wiz .hh-opt{transition:none}
}

/* Contact and result: drop the page subtitle so the card stays on a 1280x800 screen.
   The card heading already says where to send the snapshot. */
body.calc-wiz .hh-quiz:has(form.is-contact) .hh-qsub,
body.calc-wiz .hh-quiz:has(form.is-result) .hh-qsub{display:none}

/* Quiet footer: legal lines on the page background, not a navy wall under the card. */
body.v3.calc-wiz footer.cw-foot,
body.calc-wiz footer.cw-foot{
  background:transparent;
  color:#6b7583;
  font-size:12px;
  line-height:1.5;
  padding:4px 20px 28px;
  max-width:640px;
  margin:0 auto;
  border:0;
}
body.v3.calc-wiz footer.cw-foot p,
body.calc-wiz footer.cw-foot p{margin:0 0 6px;max-width:none}
body.v3.calc-wiz footer.cw-foot .disc,
body.calc-wiz footer.cw-foot .disc{
  color:#5b6675;
  font-weight:500;
  font-size:12px;
}

/* contact-fold: keep the last step on a 1280x800 / 390x844 screen without crushing the homepage type. */
body.calc-wiz main{padding-top:16px}
body.calc-wiz .hh-quiz:has(form.is-contact) .cw-contact .hh-note{margin:0 0 8px}
body.calc-wiz .hh-quiz:has(form.is-contact) .cw-nav{margin-top:12px}
@media(max-width:420px){
  body.calc-wiz header .who .bk{display:none}
  body.calc-wiz .hh-quiz:has(form.is-contact) .hh-note{display:none}
  body.calc-wiz .hh-quiz:has(form.is-contact) .hh-priv{margin-top:8px;padding:6px 8px}
  body.calc-wiz .cw-contact label{margin:8px 0 2px}
  body.calc-wiz .cw-contact .chk{margin-top:10px;font-size:13px;line-height:1.35}
  body.calc-wiz .cw-contact input[type=text],
  body.calc-wiz .cw-contact input[type=email],
  body.calc-wiz .cw-contact input[type=tel]{min-height:42px;padding:10px 12px}
  body.calc-wiz .cw-nav .btn.big{padding:14px 22px;font-size:16px}
}
@media(max-height:860px){
  body.calc-wiz .hh-quiz:has(form.is-contact) .hh-priv{margin-top:8px}
}


/* Multi-select income: 2 columns even on a 390px phone so the checklist can fit. */
body.calc-wiz .hh-opts-multi,
.hh-opts-multi{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
body.calc-wiz .hh-opts-multi .hh-opt,
.hh-opts-multi .hh-opt{
  padding:10px 10px;
  min-height:0;
  text-align:left;
}
body.calc-wiz .hh-opts-multi .hh-opt strong,
.hh-opts-multi .hh-opt strong{font-size:13.5px;line-height:1.25}
body.calc-wiz .hh-opts-multi .hh-opt span,
.hh-opts-multi .hh-opt span{font-size:11.5px;line-height:1.3;margin-top:2px}

/* Yearly / monthly period tiles on an amount step. */
body.calc-wiz .hh-period,
.hh-period{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:0 0 12px;
}
body.calc-wiz .hh-period .hh-opt,
.hh-period .hh-opt{padding:10px 12px}

/* Result colour: soft green for Looks strong; very light blush for review tiers. */
.cw-result.tier-strong,
.pcard.tier-strong{
  background:#f3faf6;
  border:1px solid #cfe6d8;
}
.cw-result.tier-review,
.pcard.tier-review{
  background:#fdf0f0;
  border:1px solid #ead4d4;
}
.cw-result{border-radius:14px;padding:4px 2px 2px}
.cw-result.tier-strong,
.cw-result.tier-review{padding:14px 16px 8px}

/* Realtor picker: compact card so the step fits 1280×800 and 390×844. */
.cw-realtor .hh-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.cw-realtor-yes,.cw-realtor-no{margin-top:8px}
.cw-realtor label{display:block;font-size:13.5px;margin:6px 0 4px;color:#334155}
.cw-realtor input[type=text]{width:100%;min-height:42px;padding:10px 12px;border:1px solid #cbd3e1;border-radius:10px;font-size:16px}
.cw-rpick{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  grid-template-areas:"prev card next" "actions actions actions";
  gap:8px 6px;
  align-items:center;
  margin-top:10px;
}
.cw-rpick-prev{grid-area:prev}
.cw-rpick-next{grid-area:next}
.cw-rpick-card{grid-area:card;display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #d5dde6;border-radius:14px;padding:10px 12px;min-width:0}
.cw-rpick.is-picked .cw-rpick-card{border-color:#9ec9b0;box-shadow:0 0 0 2px rgba(16,122,85,.12)}
.cw-rpick-photo img,.cw-rpick-ini{width:64px;height:64px;border-radius:10px;object-fit:cover;flex-shrink:0;display:block}
.cw-rpick-ini{background:#e8eef4;color:#0b2545;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.cw-rpick-info{min-width:0;flex:1}
.cw-rpick-name{margin:0;font-size:15px;color:#0b2545;line-height:1.25}
.cw-rpick-brok,.cw-rpick-area{margin:1px 0 0;font-size:12.5px;color:#5b6675;line-height:1.3}
.cw-rpick-bio{margin:4px 0 0;font-size:12.5px;line-height:1.35;color:#4a5563;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cw-rpick-vid{margin:4px 0 0;font-size:12.5px}
.cw-rpick-vid a{color:#0b2545}
.cw-rpick-prev,.cw-rpick-next{
  width:36px;height:36px;border-radius:10px;border:1px solid #cbd3e1;background:#fff;
  font-size:22px;line-height:1;cursor:pointer;color:#0b2545;padding:0;
}
.cw-rpick-actions{grid-area:actions;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:2px}
.cw-rpick-actions .btn.big{padding:12px 18px;font-size:15px}
.cw-rpick-actions .hh-back{border:0;background:none;cursor:pointer;font:inherit;color:#334155}
body.calc-wiz form.is-realtor .hh-qsub{display:none}

@media(max-width:420px){
  body.calc-wiz .hh-opts-multi .hh-opt{padding:8px 8px}
  body.calc-wiz .hh-opts-multi .hh-opt strong{font-size:12.5px}
  body.calc-wiz .hh-opts-multi .hh-opt span{font-size:11px}
  .cw-rpick{grid-template-columns:1fr 1fr;grid-template-areas:"card card" "prev next" "actions actions"}
  .cw-rpick-prev,.cw-rpick-next{width:100%;height:36px}
  .cw-rpick-bio{-webkit-line-clamp:2}
  .cw-rpick-photo img,.cw-rpick-ini{width:56px;height:56px}
  body.calc-wiz form.is-realtor .hh-note{margin-bottom:6px}
  body.calc-wiz form.is-realtor .cw-nav{margin-top:10px}
}
@media(max-height:860px){
  body.calc-wiz form.is-realtor .hh-priv{margin-top:8px}
}

/* Income checklist: 10 tiles must fit 1280×800 and 390×844 with the nav. */
body.calc-wiz .hh-quiz:has(form.is-income) .hh-qsub,
body.calc-wiz .hh-quiz:has(form.is-income) .hh-priv{display:none}
body.calc-wiz form.is-income .hh-note{margin:0 0 8px;font-size:13px}
body.calc-wiz form.is-income .hh-tap{margin:8px 0 0;font-size:12px}
body.calc-wiz form.is-income .hh-opts-multi{gap:6px}
body.calc-wiz form.is-income .hh-opts-multi .hh-opt{padding:8px 10px}
body.calc-wiz form.is-income .cw-nav{margin-top:10px}
@media(max-width:420px){
  body.calc-wiz form.is-income .hh-opts-multi{gap:5px}
  body.calc-wiz form.is-income .hh-opts-multi .hh-opt{padding:7px 8px}
  body.calc-wiz form.is-income .hh-opts-multi .hh-opt strong{font-size:12px}
  body.calc-wiz form.is-income .hh-opts-multi .hh-opt span{font-size:10.5px}
  body.calc-wiz .hh-quiz:has(form.is-income) .hh-qh{font-size:22px;margin-bottom:4px}
  body.calc-wiz .hh-quiz:has(form.is-income) .hh-qkick{margin-bottom:2px}
}
/* Result card: keep the snapshot readable; the long disclaimer lives in the light footer below. */
body.calc-wiz form.is-result .cw-result p{margin:0 0 8px;font-size:14.5px;line-height:1.4}
body.calc-wiz form.is-result .cw-result .cw-head{font-size:17px;margin:0 0 10px}
body.calc-wiz form.is-result .cw-nav{display:none}
body.calc-wiz .hh-quiz:has(form.is-result) .hh-priv{display:none}
@media(max-height:860px){
  body.calc-wiz form.is-result .cw-result p{margin:0 0 6px;font-size:14px}
}

/* Realtor step: hide page subtitle and privacy line so the card + picker fit. */
body.calc-wiz .hh-quiz:has(form.is-realtor) .hh-qsub,
body.calc-wiz .hh-quiz:has(form.is-realtor) .hh-priv{display:none}
body.calc-wiz form.is-realtor > .cw-realtor > .hh-note{margin:0 0 6px;font-size:13px}
body.calc-wiz form.is-realtor:has(.cw-rpick:not([hidden])) > .cw-realtor > .hh-note{display:none}
body.calc-wiz form.is-realtor:has(.cw-rpick:not([hidden])) .hh-opts{margin-bottom:6px}
body.calc-wiz form.is-realtor:has(.cw-rpick:not([hidden])) .hh-opts .hh-opt{padding:8px 10px}
body.calc-wiz form.is-realtor:has(.cw-rpick:not([hidden])) .hh-opts .hh-opt span{display:none}
body.calc-wiz form.is-realtor .cw-rpick{margin-top:6px;gap:6px}
body.calc-wiz form.is-realtor .cw-rpick-bio{-webkit-line-clamp:2}
body.calc-wiz form.is-realtor .cw-rpick-actions .btn.big{padding:10px 16px;font-size:15px}
body.calc-wiz form.is-realtor .cw-nav{margin-top:8px}
body.calc-wiz form.is-realtor .cw-realtor-no label{margin:4px 0 2px;font-size:13px}
@media(max-width:420px){
  body.calc-wiz form.is-realtor .cw-rpick-bio{-webkit-line-clamp:2;font-size:12px}
  body.calc-wiz form.is-realtor .cw-rpick-photo img,
  body.calc-wiz form.is-realtor .cw-rpick-ini{width:48px;height:48px}
  body.calc-wiz form.is-realtor .cw-rpick-name{font-size:14px}
  body.calc-wiz .hh-quiz:has(form.is-realtor) .hh-qh{font-size:22px;margin-bottom:4px}
  body.calc-wiz form.is-result .cw-result p{font-size:13.5px;margin:0 0 6px}
  body.calc-wiz form.is-result .cw-result .cw-head{font-size:16px}
  body.calc-wiz form.is-result .cw-result .hh-priv{display:none}
}

/* Short result: headline, 3 bullets, book button, collapsed assumptions. Must fit 390×844 / 1280×800 with Calendly below. */
.cw-result-short{padding:8px 4px 4px}
.cw-result-short .cw-head{font-size:1.15rem;line-height:1.25;margin:0 0 8px;color:#0b2545}
.cw-result-short .cw-bullets{margin:0 0 10px;padding:0 0 0 1.15em;font-size:14px;line-height:1.4}
.cw-result-short .cw-bullets li{margin:0 0 6px}
.cw-result-short .cw-book{margin:8px 0 10px}
.cw-result-short .cw-book .btn{width:100%}
.cw-how{margin:4px 0 8px;border:1px solid #e3e7ee;border-radius:8px;background:#fff;font-size:13px;color:#334}
.cw-how summary{cursor:pointer;padding:8px 12px;font-weight:600;color:#0b2545;list-style:none}
.cw-how summary::-webkit-details-marker{display:none}
.cw-how summary:after{content:' ▾';font-weight:400;color:#6a7;float:right}
.cw-how[open] summary:after{content:' ▴'}
.cw-how p{margin:0;padding:0 12px 8px;font-size:13px;line-height:1.4;color:#445}
.cw-cal{margin:12px 0 8px;padding-top:8px;border-top:1px solid #e8ece9}
.cw-cal-kick{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5a6;margin:0 0 6px}
.cw-cal-fb{font-size:13px;margin:6px 0 0;text-align:center}
.cw-rv{margin:8px 0;padding:8px 10px;background:#f7f9f8;border-radius:8px;font-size:13px}
.cw-rv-kick{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5a6;margin:0 0 4px}
.cw-rv-card{margin:0}
.cw-rv-card blockquote{margin:0 0 4px;font-style:italic;line-height:1.35;color:#234}
.cw-rv-card figcaption{font-size:12px;color:#567}
.cw-rv-card figcaption small{margin-left:6px;color:#789}
.cw-rv-more{margin:4px 0 0;font-size:12px}
.cw-rv-empty,.pw-empty{display:none}
.pw{margin:10px 0 4px}
.pw-kick{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5a6;margin:0 0 6px}
.pw-row{display:flex;flex-wrap:wrap;gap:8px}
.pw-card{display:flex;gap:8px;align-items:center;flex:1 1 180px;max-width:100%;padding:8px;border:1px solid #e3e7ee;border-radius:8px;text-decoration:none;color:inherit;background:#fff}
.pw-card img,.pw-av{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#e8eee9;display:flex;align-items:center;justify-content:center;font-weight:700;color:#0b2545;flex-shrink:0}
.pw-info{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.3;min-width:0}
.pw-info strong{font-size:13px;color:#0b2545}
.cw-save-wrap{margin:8px 0 0;text-align:center;font-size:13px}
.cw-save{background:none;border:0;color:#0b2545;text-decoration:underline;cursor:pointer;font:inherit}
.cw-save-msg{display:inline-block;margin-left:6px;color:#0f7a55}
.cw-resume{margin:8px 0 0;padding:8px 10px;background:#f3faf6;border-radius:8px;font-size:13px}
.cw-resume-clear{background:none;border:0;text-decoration:underline;cursor:pointer;font:inherit;margin-left:6px}
.cw-exit{position:fixed;inset:0;background:rgba(11,37,69,.35);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;z-index:80}
.cw-exit[hidden]{display:none}
.cw-exit-card{background:#fff;border-radius:12px;padding:20px 22px;max-width:420px;box-shadow:0 8px 32px rgba(11,37,69,.18)}
.cw-exit-card h3{margin:0 0 8px;font-size:1.1rem;color:#0b2545}
.cw-exit-card p{margin:0 0 10px;font-size:14px;line-height:1.45}
.cw-exit-actions{display:flex;gap:8px;flex-wrap:wrap}
.cw-opt-lab{display:block;margin:12px 0 4px;font-size:14px}
.cw-down-pct.money{margin-top:4px}
.cw-down-pct[hidden],.cw-down-amount[hidden],.cw-realtor-yes[hidden],.cw-realtor-no[hidden]{display:none!important}
form.is-result .cw-save-wrap,form.is-result ~ .cw-resume,form.is-result .hh-priv{display:none}
form.is-result .cw-how{font-size:12px}
/* Keep the short card compact so headline + 3 bullets + button + collapsed how-to fit the viewport. Calendly sits below. */
@media (max-width:500px){
  .cw-result-short .cw-head{font-size:1.05rem}
  .cw-result-short .cw-bullets{font-size:13px}
  .calendly-inline-widget{height:560px !important}
}

/* Compact down-payment pane (amount/%, optional tax) so it fits 1280×800 and 390×844. */
form.is-down .hh-qsub,form.is-down .hh-priv,form.is-down .cw-save-wrap{display:none}
form.is-down .hh-qh{font-size:1.2rem;margin:0 0 4px}
form.is-down .hh-qkick{margin:0 0 2px}
form.is-down .hh-note{margin:4px 0;font-size:12.5px;line-height:1.35}
form.is-down .cw-opt-lab{margin:8px 0 2px;font-size:13px}
form.is-down .hh-opts.cw-down-mode{margin:6px 0}
form.is-down .hh-opts.cw-down-mode .hh-opt span{font-size:11px}
form.is-down .money{margin:4px 0}
form.is-down .cw-nav{margin-top:8px}
body.calc-wiz header .partner-with-me{font-size:12px;align-self:center}
body.calc-wiz header .brand{align-items:center}

@media (max-width:500px){
  form.is-down .hh-note{display:none}
  form.is-down .hh-opts.cw-down-mode .hh-opt span{display:none}
  form.is-down .hh-opts.cw-down-mode{gap:6px;margin:4px 0}
  form.is-down h3{font-size:1.05rem;margin:0 0 6px;line-height:1.25}
  form.is-down .cw-opt-lab{margin:6px 0 2px}
  form.is-down .hh-top{margin-bottom:4px}
  form.is-down .cw-nav{margin-top:6px}
}