/* ==========================================================================
   Fidelity Residential - rate quote v2 ("Six Taps")
   Standalone. Every rule is scoped under #q2 so nothing can reach the rest
   of the site, and no site stylesheet is loaded here to reach back.

   Deliberately light-only: the page sits on a fixed daylight photograph, so
   a dark palette would fight the background rather than adapt to it.
   ========================================================================== */

#q2{
  --navy:#1B3A6B; --navy-2:#2A4E86; --gold:#C8A84B; --gold-2:#B8983F; --pale:#D6DEEA;
  --surface:#FFFFFF; --surface-2:#EFEDE5;
  --ink:#141F33; --ink-2:#48566F; --ink-3:#7B8699;
  --rule:#DEE2E9; --rule-2:#EBEEF3;
  /* --rule is for quiet dividers; a control that can be clicked needs an edge
     you can actually see. #8A94A6 is 3.06:1 on the card, which is the WCAG
     1.4.11 floor for a UI component boundary. */
  --rule-strong:#8A94A6;
  --good:#1E7B34; --bad:#A3341F;
  --card-alpha:.90;
}

/* ---------- page ground ----------------------------------------------- */
/* The photograph is decorative and almost entirely hidden behind the card on
   a phone, so it is only fetched at tablet width and up - 248KB saved on the
   connection least able to afford it. background-position favours the calm
   left of the frame (sky, architecture) rather than the busy city skyline. */
html.q2-html{
  min-height:100%;
  background:#26364F;
}
@media (min-width:768px){
  html.q2-html{
    background:#26364F url(/images/bg/bg5-mini.jpg) 30% center / cover no-repeat fixed;
  }
}
body.q2-body{
  margin:0; background:transparent;
  font-family:"Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#141F33; -webkit-font-smoothing:antialiased;
}

#q2{
  max-width:620px; margin:0 auto; padding:18px 14px 56px;
  font-size:16px; line-height:1.5;
}
#q2 *{ box-sizing:border-box; }
#q2 h2{ font-family:"Spectral",Georgia,serif; font-weight:600; font-size:26px;
  line-height:1.2; margin:0 0 6px; letter-spacing:-.01em; text-wrap:balance; color:var(--ink); }
#q2 .lede{ margin:0 0 20px; color:var(--ink-2); font-size:15px; }

/* ---------- header ----------------------------------------------------- */
#q2 .hdr{
  background:rgba(255,255,255,.93); border-radius:14px;
  padding:12px 16px 10px; margin:0 0 14px;
  box-shadow:0 2px 4px rgba(20,31,51,.08), 0 10px 26px -16px rgba(20,31,51,.5);
}
#q2 .hdrtop{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#q2 .brand{ font-size:13px; letter-spacing:.14em; font-weight:700; white-space:nowrap; }
#q2 .brand .f{ color:var(--navy); }
#q2 .brand .r{ color:var(--gold-2); margin-left:5px; }
#q2 .runest{
  background:var(--surface); border:1px solid var(--rule); border-radius:999px;
  padding:5px 12px; font-size:12.5px; color:var(--ink); white-space:nowrap;
  max-width:62%; overflow:hidden; text-overflow:ellipsis;
}
#q2 .runest span{ color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em;
  font-size:10px; font-weight:700; margin-right:6px; }
#q2 .ticks{ display:flex; gap:5px; margin:11px 0 8px; }
#q2 .ticks i{ flex:1; height:3px; border-radius:2px; background:var(--rule); }
#q2 .ticks i.on{ background:var(--gold); }
#q2 .ticks i.at{ background:var(--navy); }
#q2 .stepmeta{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  font-weight:700; color:var(--ink-3); }

/* ---------- the card ---------------------------------------------------- */
/* The original loan form used hsla(0,0%,100%,.93) - only 7% transparent, so
   the photograph never actually read through it. .90 lets the image register
   as part of the design on a large screen. On a phone the card fills the
   viewport over the busiest part of the picture, so it goes back to near
   solid for text contrast. */
#q2 .card{
  background:rgba(255,255,255,var(--card-alpha));
  border-radius:16px; padding:26px 22px;
  box-shadow:0 2px 4px rgba(20,31,51,.10), 0 18px 40px -20px rgba(20,31,51,.55);
}
@media (max-width:767px){
  #q2{ --card-alpha:.95; padding:12px 10px 44px; }
  #q2 .card{ padding:22px 16px; border-radius:14px; }
  #q2 h2{ font-size:23px; }
}

/* ---------- choice chips ------------------------------------------------ */
#q2 .opts{ display:grid; gap:9px; }
#q2 .opts.two{ grid-template-columns:1fr 1fr; }
#q2 .grid3{ display:grid; gap:9px; grid-template-columns:repeat(3,1fr); }
@media (max-width:560px){ #q2 .grid3{ grid-template-columns:repeat(2,1fr); } }

#q2 .opt{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; font:inherit; font-size:16px; text-align:left; cursor:pointer;
  background:var(--surface-2); color:var(--ink);
  /* WAS: 1.5px solid transparent - an unchosen option had no border at all and
     was defined only by its fill, 1.17:1 against the card. The chosen state was
     fine because it borrows the gold; every other option read as a smudge. The
     chosen rule below still overrides border-color, so gold is unchanged. */
  border:1.5px solid var(--rule-strong); border-radius:11px; padding:14px 14px;
  transition:background .12s, border-color .12s;
}
#q2 .opt small{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; line-height:1.35; }
#q2 .opt:hover{ background:#E7E4D9; border-color:var(--navy-2); }
/* keyboard users had no focus indicator at all */
#q2 .opt:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
#q2 .opt[aria-pressed="true"]{
  background:color-mix(in srgb, var(--gold) 17%, #fff);
  border-color:var(--gold); font-weight:600;
}
#q2 .opt[aria-pressed="true"] small{ color:var(--ink-2); }
#q2 .opt .tick{ opacity:0; color:var(--gold-2); font-weight:700; flex:none; }
#q2 .opt[aria-pressed="true"] .tick{ opacity:1; }
#q2 .grid3 .opt{ justify-content:center; text-align:center; font-size:15px; padding:13px 8px; }
#q2 .grid3 .opt .tick{ display:none; }

/* ---------- fields ------------------------------------------------------ */
#q2 .f{ margin:0 0 16px; }
#q2 .f label{ display:block; font-size:13.5px; font-weight:700; color:var(--ink-2);
  margin:0 0 7px; letter-spacing:.005em; }
#q2 .opt2{ font-weight:400; color:var(--ink-3); }
#q2 .ib{ position:relative; display:flex; align-items:center; }
#q2 .pre,#q2 .post{ position:absolute; color:var(--ink-3); font-size:15px; pointer-events:none; }
#q2 .pre{ left:13px; } #q2 .post{ right:13px; }
#q2 input[type=text],#q2 input[type=email],#q2 input[type=tel]{
  width:100%; font:inherit; font-size:17px; color:var(--ink); background:var(--surface-2);
  border:1.5px solid var(--rule); border-radius:11px; padding:14px 13px;
  -webkit-appearance:none; appearance:none;
}
#q2 input.m{ padding-left:27px; font-variant-numeric:tabular-nums; }
#q2 input.p{ padding-right:30px; font-variant-numeric:tabular-nums; }
#q2 input:focus{ outline:none; border-color:var(--navy); background:#fff;
  box-shadow:0 0 0 3px rgba(27,58,107,.13); }
#q2 .hint{ margin:6px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.4; }
#q2 .two-up{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ #q2 .two-up{ grid-template-columns:1fr; gap:0; } }

/* ---------- automated value estimate ------------------------------------
   Deliberately quieter than a chosen option and louder than a hint: it is an
   offer, not an answer. Ticked, it picks up the same gold the chosen chips use
   so an accepted estimate reads as a decision the borrower made. */
#q2 .estrow{ margin:8px 0 0; padding:10px 12px; border:1.5px solid var(--rule-strong);
  border-radius:11px; background:var(--surface-2); }
#q2 .estrow.on{ border-color:var(--gold); background:color-mix(in srgb, var(--gold) 17%, #fff); }
#q2 .estrow label{ display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:15px; color:var(--ink); font-weight:400; margin:0; }
#q2 .estrow input[type=checkbox]{ width:18px; height:18px; margin:1px 0 0; flex:none;
  accent-color:var(--gold-2); cursor:pointer; }
#q2 .estrow b{ font-weight:700; }
#q2 .estrow .hint{ margin:6px 0 0 28px; }

/* ---------- mobile verification ----------------------------------------- */
#q2 .otp{ margin:14px 0 0; padding:13px 14px; border:1.5px solid var(--rule-strong);
  border-radius:11px; background:var(--surface-2); }
#q2 .otp.ok{ border-color:var(--good); background:color-mix(in srgb, var(--good) 8%, #fff); }
#q2 .otp.ok b{ color:var(--good); }
#q2 .otplede{ margin:0 0 10px; font-size:13px; color:var(--ink-2); line-height:1.45; }
#q2 .otprow{ display:flex; gap:9px; align-items:stretch; }
#q2 .otprow input{ flex:1; letter-spacing:.35em; font-size:19px; text-align:center; }
#q2 .otpbtn{ font:inherit; font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap;
  color:#fff; background:var(--navy); border:1.5px solid var(--navy);
  border-radius:11px; padding:12px 18px; }
#q2 .otpbtn:hover{ background:var(--navy-2); border-color:var(--navy-2); }
#q2 .otpbtn:disabled{ opacity:.55; cursor:default; }
#q2 .otpbtn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
#q2 .otplink{ font:inherit; font-size:13px; color:var(--ink-2); background:none; border:0;
  padding:8px 0 0; cursor:pointer; text-decoration:underline; }
#q2 .otpmsg{ margin:9px 0 0; font-size:13px; color:var(--ink-2); }

/* ---------- conditional follow-ups -------------------------------------- */
/* Anything that appeared because of an earlier answer says so, so the form
   never seems to grow for no reason. */
#q2 .condq{
  border-left:3px solid var(--gold); padding:13px 0 1px 14px;
  margin:0 0 16px; animation:q2slip .18s ease-out;
}
#q2 .condq .why{
  display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-2); font-weight:700; margin:0 0 9px;
}
@keyframes q2slip{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ #q2 .condq{ animation:none; } }

/* ---------- estimated costs card ---------------------------------------- */
#q2 .est{ border:1px solid var(--rule); border-radius:13px; overflow:hidden; margin:0 0 16px; }
#q2 .est header{
  background:color-mix(in srgb,var(--gold) 15%, #fff);
  padding:10px 14px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-2); font-weight:700; border-bottom:1px solid var(--gold);
}
#q2 .est .line{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:13px 14px; border-bottom:1px solid var(--rule-2); }
#q2 .est .line:last-child{ border-bottom:0; }
#q2 .est .lk{ font-size:14.5px; }
#q2 .est .lk small{ display:block; font-size:12px; color:var(--ink-3); margin-top:2px; }
#q2 .est .lv{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- tooltips ---------------------------------------------------- */
#q2 .tipwrap{ position:relative; display:block; }
#q2 .qm{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:6px; border-radius:50%;
  border:1px solid var(--ink-3); color:var(--ink-3);
  font-size:10px; font-style:normal; font-weight:700; vertical-align:1px;
}
#q2 .tip{
  position:absolute; z-index:60; bottom:calc(100% + 9px); left:0; right:0; width:auto;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule); border-radius:10px; padding:11px 13px;
  font-size:12.5px; line-height:1.45; font-weight:400; text-align:left;
  box-shadow:0 10px 26px -10px rgba(20,31,51,.45);
  opacity:0; visibility:hidden; transform:translateY(3px); transition:.14s;
}
#q2 .tipwrap:hover .tip,#q2 .tipwrap:focus-within .tip{ opacity:1; visibility:visible; transform:none; }
#q2 .tip::after{
  content:""; position:absolute; top:100%; left:20px;
  border:7px solid transparent; border-top-color:var(--rule);
}

/* ---------- fix & flip handoff ------------------------------------------ */
#q2 .handoff{
  border:1.5px solid var(--gold); border-radius:13px; padding:18px 16px; margin:16px 0 0;
  background:color-mix(in srgb,var(--gold) 7%, #fff);
}
#q2 .handoff h3{ margin:0 0 7px; font-family:"Spectral",Georgia,serif; font-size:18px; font-weight:600; }
#q2 .handoff p{ margin:0 0 13px; font-size:14px; color:var(--ink-2); }
#q2 .hrow{ display:flex; justify-content:space-between; gap:12px;
  padding:7px 0; border-top:1px solid color-mix(in srgb,var(--gold) 35%, #fff); font-size:13.5px; }
#q2 .hrow span{ color:var(--ink-3); }
#q2 .hrow b{ text-align:right; }
#q2 .hgo{
  display:block; text-align:center; margin:16px 0 0; text-decoration:none;
  background:var(--navy); color:#fff; font-weight:700; font-size:15.5px;
  border-radius:12px; padding:15px 18px;
}
#q2 .hgo:hover{ background:var(--navy-2); }

/* ---------- nav --------------------------------------------------------- */
#q2 .nav{ display:flex; align-items:center; gap:14px; margin:16px 0 0; }
#q2 .back{
  font:inherit; font-size:15px; background:none; border:0; color:#fff;
  cursor:pointer; padding:14px 4px; text-shadow:0 1px 3px rgba(0,0,0,.55);
}
#q2 .back:hover{ text-decoration:underline; }
#q2 .next{
  flex:1; font:inherit; font-weight:700; font-size:16px; cursor:pointer;
  background:var(--navy); color:#fff; border:0; border-radius:12px; padding:16px 20px;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.8);
}
#q2 .next:hover:not(:disabled){ background:var(--navy-2); }
#q2 .next:disabled{ background:#8F9BB3; cursor:not-allowed; box-shadow:none; }

#q2 .legal{ margin:16px 0 0; font-size:12px; color:var(--ink-3); line-height:1.5; }

/* ---------- done -------------------------------------------------------- */
#q2 .done h2{ margin-bottom:4px; }
#q2 .done .rate{ margin:0 0 18px; color:var(--ink-2); font-size:15px; }
#q2 .split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:11px; overflow:hidden; }
#q2 .split > div{ background:#fff; padding:11px 12px; }
#q2 .split .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-3); font-weight:700; margin-bottom:4px; }
#q2 .split .v{ font-size:14px; font-weight:600; }

/* ---------- payload preview (this build only) --------------------------- */
#q2 .payload{
  margin:18px 0 0; border:1px solid var(--rule); border-radius:12px;
  background:#fff; overflow:hidden;
}
#q2 .payload header{
  background:var(--surface-2); padding:10px 14px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
#q2 .payload .rows{ max-height:340px; overflow:auto; }
#q2 .payload table{ width:100%; border-collapse:collapse; font-size:12.5px; }
#q2 .payload td{ padding:7px 14px; border-bottom:1px solid var(--rule-2); vertical-align:top; }
#q2 .payload tr:last-child td{ border-bottom:0; }
#q2 .payload td.fld{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--navy); white-space:nowrap; width:1%; }
#q2 .payload td.val{ font-weight:600; }

/* ---------- preview banner ---------------------------------------------- */
#q2 .previewbar{
  background:#5A3A00; color:#FFE9B8; border:1px solid #8A6410; border-radius:11px;
  padding:11px 14px; margin:0 0 14px; font-size:12.5px; line-height:1.45;
}
#q2 .previewbar b{ color:#FFF6E2; }
#q2 .previewbar a{ color:#FFE9B8; }

#q2 .sitelink{ display:block; text-align:center; margin:22px 0 0; font-size:13px;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
#q2 .sitelink a{ color:#fff; }

#q2 :focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

/* ---------- Google Places predictions ------------------------------------
   .pac-container is appended to <body> by the Maps script, so it sits outside
   #q2 and cannot be scoped. Safe here because this stylesheet is only ever
   loaded by this page - it is not part of the site's global CSS. */
.pac-container{
  background:#fff; border:1px solid #DEE2E9; border-top:0; border-radius:0 0 11px 11px;
  box-shadow:0 14px 34px -14px rgba(20,31,51,.5);
  font-family:"Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif;
  margin-top:-2px; overflow:hidden;
}
.pac-container:after{ display:none; }           /* the "powered by Google" strip */
.pac-item{
  padding:11px 13px; font-size:14px; color:#48566F;
  border-top:1px solid #EBEEF3; cursor:pointer; line-height:1.35;
}
.pac-item:first-child{ border-top:0; }
.pac-item:hover,.pac-item-selected{ background:#F3F1E8; }
.pac-item-query{ font-size:15px; color:#141F33; font-weight:600; }
.pac-matched{ font-weight:700; color:#1B3A6B; }
.pac-icon{ display:none; }