/* =====================================================================
   fr.css  Fidelity Residential design system (Phase 3, site code)
   From mockups\phase3\fr.css, approved by Robert on 7 October 2026
   ("Approved design system"; the three colour corrections accepted;
   overlay medium).  Site Growth build of 7 October 2026 for the first
   three pages (Home, Purchase, Refinance), served from /assets/fr/.
   Changes from the mockup file: the self-hosted @font-face rules below
   (section 0), the <picture> rule in the hero (section 7) and the
   mockup-only review label removed (old section 14).  Nothing else.
   Spec: research\05-design-system.md Part 1, with the CORRECTED colours
   (gold-ink #735b14, muted #5b6270, field-border #857f70, no white on gold).
   Every class is prefixed fr- so nothing can clash with the 2019 theme.
   Contrast ratios quoted below were computed with the WCAG 2.2 formula.
   ===================================================================== */

/* ---------- 0. Fonts: self-hosted, latin subset, SIL Open Font Licence (fonts/OFL.txt) ----------
   One variable file per family, from fonts.gstatic.com (Google Fonts CSS API, 7 Oct 2026).
   Weights used: Inter 400, 500, 600; Montserrat 700, 800. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin-var-v20.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700 800;font-display:swap;
  src:url(fonts/montserrat-latin-var-v31.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 1. Tokens ---------- */
:root{
  /* colour */
  --fr-navy:#1B3A6B;          /* headings, primary button, dark bands */
  --fr-navy-dark:#16305a;     /* hover, gradient end, utility strip */
  --fr-gold:#C8A84B;          /* rules, borders, icons, numbers on navy. Never text on white or cream */
  --fr-gold-light:#e0c874;    /* small gold text on navy (6.80 on navy, 4.85 on the navy pill) */
  --fr-gold-ink:#735b14;      /* CORRECTED (was #8a6f1f): small gold text on light. 6.49 white, 5.80 canvas, 5.21 pill */
  --fr-ink:#1F2328;           /* body text: 15.80 white, 14.11 canvas */
  --fr-muted:#5b6270;         /* CORRECTED (was #6B7280): supporting text. 6.13 white, 5.48 canvas, 5.10 canvas-2 */
  --fr-canvas:#F3F2EF;
  --fr-canvas-2:#eceae5;
  --fr-surface:#FFFFFF;
  --fr-line:#E4E2DC;          /* decorative dividers only (1.30 on white) */
  --fr-field-border:#857f70;  /* NEW: input outlines, 3.99 on white, 3.82 on field fill */
  --fr-field-fill:#fbfaf7;
  --fr-on-navy:#90B8D8;       /* secondary text on solid navy only (5.38); never on photos */
  --fr-on-navy-strong:#eaf1f8;/* primary text on navy (9.89) */
  --fr-pill:rgba(200,168,75,.16);
  --fr-overlay:27,58,107;     /* navy as r,g,b for photo overlays */

  /* type */
  --fr-font-head:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fr-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fr-h1:44px; --fr-h2:34px; --fr-h3:20px; --fr-h4:16px;
  --fr-body:16px; --fr-lead:18px; --fr-small:14px; --fr-fine:13px;

  /* spacing scale 4 8 12 16 24 32 48 64 */
  --fr-s1:4px; --fr-s2:8px; --fr-s3:12px; --fr-s4:16px; --fr-s5:24px; --fr-s6:32px; --fr-s7:48px; --fr-s8:64px;
  --fr-section:64px;
  --fr-container:1200px; --fr-gutter:32px;

  /* radius */
  --fr-r-sm:6px; --fr-r-md:10px; --fr-r-lg:16px; --fr-r-pill:999px;

  /* shadow (navy tinted) */
  --fr-sh-sm:0 6px 18px rgba(27,58,107,.08);
  --fr-sh-md:0 16px 40px -30px rgba(27,58,107,.4);
  --fr-sh-lg:0 24px 60px rgba(27,58,107,.18);

  /* focus */
  --fr-focus:var(--fr-navy);
}
@media (max-width:900px){ :root{ --fr-h1:36px; --fr-h2:28px; --fr-h3:19px; } }
@media (max-width:560px){ :root{ --fr-h1:30px; --fr-section:40px; --fr-gutter:20px; } }

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.fr{margin:0;background:var(--fr-canvas);color:var(--fr-ink);font-family:var(--fr-font-body);
  font-size:var(--fr-body);line-height:1.5;-webkit-font-smoothing:antialiased}
:where(.fr) :is(h1,h2,h3,h4){font-family:var(--fr-font-head);color:var(--fr-navy);margin:0;line-height:1.15}
:where(.fr) h1{font-size:var(--fr-h1);font-weight:800;letter-spacing:-.5px;line-height:1.08}
:where(.fr) h2{font-size:var(--fr-h2);font-weight:800;letter-spacing:-.4px}
:where(.fr) h3{font-size:var(--fr-h3);font-weight:700}
:where(.fr) h4{font-size:var(--fr-h4);font-weight:700}
:where(.fr) p{margin:0 0 var(--fr-s4)}
:where(.fr) p:last-child{margin-bottom:0}
:where(.fr) a{color:var(--fr-navy);text-underline-offset:3px}
:where(.fr) a:hover{color:var(--fr-navy-dark)}
:where(.fr) img{max-width:100%;height:auto;display:block}
:where(.fr) :is(ul,ol){margin:0;padding:0}
.fr-container{max-width:var(--fr-container);margin:0 auto;padding:0 var(--fr-gutter)}
.fr-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Focus ring: 3 px navy on light, 3 px gold on navy (4.91) */
.fr :focus{outline:none}
.fr :focus-visible{outline:3px solid var(--fr-focus);outline-offset:2px;border-radius:4px}
.fr-on-dark{--fr-focus:var(--fr-gold)}

@media (prefers-reduced-motion:reduce){
  .fr *,.fr *::before,.fr *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- 3. Shell: skip link, utility strip ---------- */
.fr-skip{position:absolute;left:var(--fr-s4);top:-100px;z-index:100;background:var(--fr-surface);color:var(--fr-navy);
  font-weight:600;padding:var(--fr-s3) var(--fr-s4);border-radius:var(--fr-r-sm);box-shadow:var(--fr-sh-lg)}
.fr-skip:focus{top:var(--fr-s3)}

.fr-utility{background:var(--fr-navy-dark);color:var(--fr-on-navy-strong);font-size:var(--fr-small)}
.fr-utility .fr-container{display:flex;justify-content:space-between;align-items:center;gap:var(--fr-s4);min-height:40px}
.fr-utility ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--fr-s2) var(--fr-s5)}
.fr-utility a{color:var(--fr-on-navy-strong);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:8px 0;min-height:24px}
.fr-utility a:hover{color:#fff;text-decoration:underline}
.fr-utility svg{flex:none}
@media (max-width:560px){
  .fr-utility .fr-email{display:none}
  .fr-utility ul{gap:var(--fr-s2) var(--fr-s4)}
}

/* ---------- 4. Header and menu ---------- */
.fr-header{background:var(--fr-surface);border-bottom:1px solid var(--fr-line);position:relative;z-index:20}
.fr-header__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--fr-s4);min-height:76px}
.fr-brand{display:inline-flex;align-items:center;flex:none;padding:6px 0}
.fr-brand img{height:44px;width:auto}

.fr-nav__list{list-style:none;display:flex;align-items:center;gap:2px}
.fr-nav__item{position:relative}
.fr-nav__link,.fr-nav__toggle{font-family:var(--fr-font-head);font-weight:700;font-size:14px;color:var(--fr-navy);
  background:none;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;
  padding:10px 8px;border-radius:var(--fr-r-sm);min-height:44px;line-height:1.2;white-space:nowrap}
.fr-nav__link:hover,.fr-nav__toggle:hover{background:rgba(27,58,107,.06);color:var(--fr-navy)}
.fr-nav__link[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--fr-gold)}
.fr-nav__toggle svg{transition:transform .15s}
.fr-nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.fr-nav__sub{list-style:none;position:absolute;top:100%;left:0;min-width:260px;background:var(--fr-surface);
  border:1px solid var(--fr-line);border-top:3px solid var(--fr-gold);border-radius:0 0 var(--fr-r-md) var(--fr-r-md);
  box-shadow:var(--fr-sh-lg);padding:var(--fr-s2);display:none}
.fr-nav__item:last-child .fr-nav__sub,.fr-nav__item--right .fr-nav__sub{left:auto;right:0}
.fr-nav__toggle[aria-expanded="true"] + .fr-nav__sub{display:block}
.fr-nav__sub a{display:block;padding:10px 12px;color:var(--fr-ink);text-decoration:none;font-size:15px;border-radius:var(--fr-r-sm)}
.fr-nav__sub a:hover{background:var(--fr-canvas);color:var(--fr-navy)}
.fr-nav__sub .fr-nav__group{font-size:var(--fr-fine);font-weight:600;color:var(--fr-muted);padding:10px 12px 2px;text-transform:uppercase;letter-spacing:.5px}
.fr-nav__sub .fr-nav__sub-indent a{padding-left:24px}
.fr-nav__sub--wide{min-width:320px}

@media (min-width:1201px){
  .fr-nav__item:hover > .fr-nav__sub{display:block}   /* mouse users; keyboard and touch use the toggle button */
}

/* phone menu button: hidden on desktop */
.fr-menu-btn{display:none;align-items:center;gap:8px;font-family:var(--fr-font-head);font-weight:700;font-size:15px;
  color:var(--fr-navy);background:var(--fr-surface);border:2px solid var(--fr-navy);border-radius:var(--fr-r-sm);
  padding:10px 14px;min-height:48px;cursor:pointer}
.fr-menu-btn .fr-menu-btn__close{display:none}
.fr-menu-btn[aria-expanded="true"] .fr-menu-btn__open{display:none}
.fr-menu-btn[aria-expanded="true"] .fr-menu-btn__close{display:inline}

@media (max-width:1200px){
  .fr-menu-btn{display:inline-flex}
  .fr-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--fr-surface);
    border-top:3px solid var(--fr-gold);box-shadow:var(--fr-sh-lg);max-height:calc(100vh - 120px);overflow:auto}
  .fr-nav.is-open{display:block}
  /* The ReviewPops pop-up (D-13: its script is unchanged) is fixed at the bottom left above everything and covered the
     lower items of the open phone menu (test pass 10 Oct 2026, finding 7).  Robert, 10 Oct 2026: hide it only while the
     phone menu is open.  Two separate rules, so a browser without :has() still reads the second (body class set by fr.js). */
  body:has(.fr-nav.is-open) [id^="rkFloatFrame"]{display:none !important}
  body.fr-nav-open [id^="rkFloatFrame"]{display:none !important}
  .fr-nav__list{flex-direction:column;align-items:stretch;gap:0;padding:var(--fr-s2) var(--fr-gutter) var(--fr-s5)}
  .fr-nav__item{border-bottom:1px solid var(--fr-line)}
  .fr-nav__link,.fr-nav__toggle{width:100%;justify-content:space-between;min-height:48px;font-size:16px;padding:12px 4px}
  .fr-nav__sub{position:static;display:none;box-shadow:none;border:0;border-left:3px solid var(--fr-gold);border-radius:0;
    margin:0 0 var(--fr-s3) 4px;padding:0 0 0 var(--fr-s3);min-width:0}
  .fr-nav__sub a{min-height:44px;display:flex;align-items:center}
}

/* ---------- 5. Text furniture ---------- */
.fr-kicker{display:inline-block;font-family:var(--fr-font-head);font-weight:700;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;line-height:1.3;padding:7px 14px;border-radius:var(--fr-r-pill);
  background:var(--fr-pill);color:var(--fr-gold-ink)}                      /* 5.21 */
.fr-kicker--on-dark{background:var(--fr-navy-dark);color:var(--fr-gold-light);border:1px solid var(--fr-gold)} /* 7.90 */
.fr-rule{display:block;width:88px;height:4px;background:var(--fr-gold);border-radius:2px;margin:18px 0 22px;border:0}
.fr-rule--center{margin-left:auto;margin-right:auto}
.fr-lead{font-size:var(--fr-lead);color:var(--fr-muted);max-width:620px}
.fr-sec-head{text-align:center;max-width:720px;margin:0 auto var(--fr-s7)}
.fr-sec-head h2{margin-top:14px}
.fr-sec-head p{color:var(--fr-muted);margin-top:0}
.fr-sec-head--left{text-align:left;margin-left:0}
.fr-fine{font-size:var(--fr-fine);color:var(--fr-muted);line-height:1.6}
.fr-callout{background:var(--fr-surface);border:1px solid var(--fr-line);border-left:4px solid var(--fr-gold);
  border-radius:var(--fr-r-md);padding:var(--fr-s5);color:var(--fr-ink)}

/* ---------- 6. Buttons and links ---------- */
.fr .fr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fr-font-head);font-weight:700;
  font-size:15px;letter-spacing:.3px;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--fr-navy);color:#fff;border:2px solid var(--fr-gold);border-radius:var(--fr-r-sm);
  padding:12px 22px;min-height:48px;transition:background .15s,color .15s}
.fr .fr-btn:hover{background:var(--fr-navy-dark);color:#fff}
.fr .fr-btn--outline{background:transparent;color:var(--fr-navy);border-color:var(--fr-navy)}
.fr .fr-btn--outline:hover{background:rgba(27,58,107,.06);color:var(--fr-navy)}
.fr .fr-btn--on-navy{background:transparent;color:#fff;border-color:var(--fr-gold)}
.fr .fr-btn--on-navy:hover{background:rgba(255,255,255,.10);color:#fff}
.fr .fr-btn--gold{background:var(--fr-gold);color:var(--fr-navy-dark);border-color:var(--fr-gold)}   /* navy-dark on gold 5.71; never white on gold */
.fr .fr-btn--gold:hover{background:var(--fr-gold-light);color:var(--fr-navy-dark)}
.fr .fr-btn--lg{font-size:16px;padding:15px 28px;min-height:54px}
.fr .fr-btn--block{display:flex;width:100%}
.fr-btns{display:flex;flex-wrap:wrap;gap:var(--fr-s3)}
.fr-link-arrow{font-weight:600;color:var(--fr-navy);text-decoration:underline}

.fr-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.fr-chip{background:var(--fr-surface);border:1px solid var(--fr-line);border-left:3px solid var(--fr-gold);
  padding:9px 14px;border-radius:var(--fr-r-sm);font-size:14px;font-weight:600;color:var(--fr-navy)}

/* ---------- 7. Hero (one component, two variants, optional form card) ---------- */
.fr-hero{position:relative;padding:56px 0 64px;overflow:hidden}
.fr-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.fr-hero__grid--solo{grid-template-columns:1fr;max-width:760px}
.fr-hero h1{margin-top:20px}
.fr-hero__sub{font-size:var(--fr-lead);max-width:560px;margin-bottom:var(--fr-s5)}
.fr-hero .fr-btns{margin-bottom:var(--fr-s5)}
.fr-hero__call{font-size:15px;margin:0 0 var(--fr-s5)}
.fr-hero__call a{font-weight:700}

/* Variant B: gradient (the Fix and Flip cream gradient with the gold glow) */
.fr-hero--gradient{background:
  radial-gradient(1200px 500px at 15% -10%, rgba(200,168,75,.10), transparent 60%),
  linear-gradient(180deg,var(--fr-canvas) 0%,var(--fr-canvas-2) 100%)}
.fr-hero--gradient .fr-hero__sub,.fr-hero--gradient .fr-hero__call{color:var(--fr-muted)}

/* Variant A: photo behind navy.  Real <img>, not a CSS background, never fixed.
   Navy layer at 0.90 on the text side, still 0.88 where the text column ends, 0.45 at the far edge.
   Worst case (white photo behind text): white 7.90, #eaf1f8 6.93, gold-light 4.77 at 0.88. */
.fr-hero--photo{background:var(--fr-navy);color:#fff}
.fr-hero__media{position:absolute;inset:0;z-index:0}
.fr-hero__media picture{display:block;width:100%;height:100%}
.fr-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.fr-hero--photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(var(--fr-overlay),.82) 0%,rgba(var(--fr-overlay),.72) 50%,rgba(var(--fr-overlay),.55) 62%,rgba(var(--fr-overlay),.35) 100%)}  /* medium overlay, Robert 7 Oct 2026; text side stays >= 4.5:1 for white text */
.fr-hero--photo h1{color:#fff}
.fr-hero--photo .fr-hero__sub,.fr-hero--photo .fr-hero__call{color:var(--fr-on-navy-strong)}
.fr-hero--photo .fr-hero__call a{color:#fff}
.fr-hero--photo .fr-chip{background:rgba(22,48,90,.92);border-color:rgba(255,255,255,.18);border-left-color:var(--fr-gold);color:#fff}

/* Form card (optional) */
.fr-card-form{background:var(--fr-surface);color:var(--fr-ink);border-radius:14px;padding:26px;box-shadow:var(--fr-sh-lg);
  border-top:6px solid var(--fr-gold)}
.fr-card-form h2{font-size:22px;margin-bottom:4px}
.fr-card-form__sub{font-size:var(--fr-small);color:var(--fr-muted);margin-bottom:var(--fr-s4)}
.fr-choices{list-style:none;display:grid;gap:10px;margin-bottom:var(--fr-s4)}
.fr .fr-choice{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--fr-field-border);border-radius:var(--fr-r-sm);
  background:var(--fr-field-fill);color:var(--fr-ink);text-decoration:none;font-weight:600;min-height:52px}
.fr .fr-choice:hover{border-color:var(--fr-navy);background:#fff;color:var(--fr-navy)}
.fr-choice__dot{flex:none;width:28px;height:28px;border-radius:50%;background:var(--fr-navy);color:var(--fr-gold-light);
  font-family:var(--fr-font-head);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.fr-choice__go{margin-left:auto;color:var(--fr-navy)}
.fr-card-form__alt{text-align:center;font-size:var(--fr-small);color:var(--fr-muted);margin-top:var(--fr-s3)}
.fr-card-form__alt a{font-weight:600}
.fr-card-form__foot{margin-top:var(--fr-s4);padding-top:var(--fr-s3);border-top:1px solid var(--fr-line);text-align:center;
  font-size:var(--fr-fine);color:var(--fr-muted)}
.fr-card-form__foot b{color:var(--fr-navy)}

/* Form fields (for cards that carry inputs) */
.fr-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--fr-s3)}
.fr-field label{font-size:14px;font-weight:600;color:var(--fr-ink)}
.fr-field input,.fr-field select{font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--fr-field-border);
  border-radius:var(--fr-r-sm);background:var(--fr-field-fill);color:var(--fr-ink);min-height:48px}
.fr-field input:focus-visible,.fr-field select:focus-visible{background:#fff}
.fr-field__hint{font-size:var(--fr-fine);color:var(--fr-muted)}

@media (max-width:900px){
  .fr-hero{padding:40px 0 48px}
  .fr-hero__grid{grid-template-columns:1fr;gap:32px}
  /* stacked: text sits over the whole photo, so the navy layer is even (0.88 to 0.92) */
  .fr-hero--photo::after{background:linear-gradient(180deg,rgba(var(--fr-overlay),.78) 0%,rgba(var(--fr-overlay),.84) 100%)}
}
@media (max-width:560px){
  .fr-hero{padding:32px 0 40px}
  .fr-hero__sub{font-size:var(--fr-body)}
  .fr-hero .fr-btns .fr-btn{flex:1 1 100%}
  .fr-card-form{padding:20px}
}

/* ---------- 8. Sections and bands ---------- */
.fr-section{padding:var(--fr-section) 0}
.fr-section--white{background:var(--fr-surface)}
.fr-section--canvas{background:var(--fr-canvas)}
.fr-section--navy{background:var(--fr-navy);color:#fff}
.fr-section--navy h2,.fr-section--navy h3{color:#fff}
.fr-section--navy p{color:var(--fr-on-navy-strong)}

.fr-trustband{background:var(--fr-navy);color:#fff}
.fr-trustband ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.fr-trustband li{padding:24px 20px;display:flex;gap:12px;align-items:flex-start;border-right:1px solid rgba(255,255,255,.12)}
.fr-trustband li:last-child{border-right:0}
.fr-trustband svg{flex:none;margin-top:2px}
.fr-trustband b{display:block;font-family:var(--fr-font-head);font-weight:700;font-size:15px;color:#fff}
.fr-trustband span{display:block;font-size:var(--fr-small);color:var(--fr-on-navy)}
@media (max-width:900px){
  .fr-trustband ul{grid-template-columns:1fr 1fr}
  .fr-trustband li{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
}
@media (max-width:560px){ .fr-trustband ul{grid-template-columns:1fr} .fr-trustband li{padding:16px 0} }

/* ---------- 9. Cards ---------- */
.fr-grid{display:grid;gap:22px}
.fr-grid--2{grid-template-columns:repeat(2,1fr)}
.fr-grid--3{grid-template-columns:repeat(3,1fr)}
.fr-grid--4{grid-template-columns:repeat(4,1fr)}
.fr-card{background:var(--fr-canvas);border:1px solid var(--fr-line);border-top:4px solid var(--fr-gold);border-radius:var(--fr-r-md);
  padding:26px;display:flex;flex-direction:column}
.fr-section--canvas .fr-card{background:var(--fr-surface)}
.fr-card h3{margin-bottom:var(--fr-s2)}
.fr-card p{color:var(--fr-muted);font-size:15px}
.fr-card__tag{font-family:var(--fr-font-head);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--fr-gold-ink);margin-bottom:6px}
.fr-card__more{margin-top:auto;padding-top:var(--fr-s3);font-weight:600}
.fr-card__icon{width:44px;height:44px;border-radius:9px;background:rgba(27,58,107,.07);display:flex;align-items:center;justify-content:center;margin-bottom:var(--fr-s4)}

/* Step cards */
.fr-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:frstep}
.fr-step{background:var(--fr-surface);border:1px solid #e6e2d8;border-radius:12px;padding:28px 24px}
.fr-step__num{width:44px;height:44px;border-radius:10px;background:var(--fr-navy);color:var(--fr-gold);border:2px solid var(--fr-gold);
  font-family:var(--fr-font-head);font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--fr-s4)}
.fr-step h3{font-size:19px;margin-bottom:var(--fr-s2)}
.fr-step p{color:var(--fr-muted);font-size:15px}

/* Stage cards (where are you in the process) */
.fr-stage{background:var(--fr-surface);border:1px solid var(--fr-line);border-radius:12px;padding:26px;display:flex;flex-direction:column}
.fr-stage__label{font-family:var(--fr-font-head);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--fr-gold-ink)}
.fr-stage h3{margin:6px 0 var(--fr-s3)}
.fr-stage ul{list-style:none;display:grid;gap:8px;margin-bottom:var(--fr-s5)}
.fr-stage li{position:relative;padding-left:22px;color:var(--fr-ink);font-size:15px}
.fr-stage li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:2px;background:var(--fr-gold)}
.fr-stage .fr-btn{margin-top:auto;align-self:flex-start}

@media (max-width:1100px) and (min-width:901px){ .fr-steps,.fr-grid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .fr-grid--2,.fr-grid--3,.fr-grid--4,.fr-steps{grid-template-columns:1fr}
}

/* ---------- 10. Checklist ---------- */
.fr-checklist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;max-width:940px;margin:0 auto}
.fr-checklist li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #e2ded4;font-size:15px}
.fr-checklist svg{flex:none;margin-top:2px}
.fr-checklist b{color:var(--fr-navy)}
.fr-checklist span{color:var(--fr-ink)}
@media (max-width:900px){ .fr-checklist{grid-template-columns:1fr} }

/* ---------- 11. FAQ (details/summary: open by default, closable) ---------- */
.fr-faq{max-width:860px;margin:0 auto}
.fr-faq details{border-bottom:1px solid #e6e2d8}
.fr-faq summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:flex-start;padding:20px 0;
  font-family:var(--fr-font-head);font-weight:700;font-size:17px;color:var(--fr-navy);min-height:44px}
.fr-faq summary::-webkit-details-marker{display:none}
.fr-faq summary::before{content:"Q";color:var(--fr-gold-ink);font-weight:800;flex:none}
.fr-faq summary::after{content:"+";margin-left:auto;font-size:22px;line-height:1;color:var(--fr-navy);flex:none}
.fr-faq details[open] summary::after{content:"\2212"}
.fr-faq .fr-faq__a{padding:0 0 22px 26px;color:var(--fr-muted);font-size:15px}

/* ---------- 12. Final call-to-action band ---------- */
.fr-cta-band{background:linear-gradient(135deg,var(--fr-navy),var(--fr-navy-dark));color:#fff;text-align:center;padding:72px 0}
.fr-cta-band h2{color:#fff;font-size:38px}
.fr-cta-band p{color:var(--fr-on-navy-strong);font-size:17px;margin:12px auto 30px;max-width:640px}
.fr-cta-band .fr-btns{justify-content:center}
.fr-cta-band .fr-fine{font-size:var(--fr-fine);color:var(--fr-on-navy);max-width:720px;margin:28px auto 0}
.fr-cta-band a:not(.fr-btn){color:#fff}
@media (max-width:560px){ .fr-cta-band{padding:48px 0} .fr-cta-band h2{font-size:28px} .fr-cta-band .fr-btn{flex:1 1 100%} }

/* ---------- 13. Footer with disclosure block ---------- */
.fr-footer{background:var(--fr-surface);border-top:4px solid var(--fr-gold);color:var(--fr-ink);font-size:var(--fr-small)}
.fr-footer__top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--fr-s6);padding:var(--fr-s7) 0 var(--fr-s6)}
.fr-footer__brand img{height:44px;width:auto;margin-bottom:var(--fr-s3)}
.fr-footer__brand p{color:var(--fr-muted)}
.fr-footer h2{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--fr-navy);margin-bottom:var(--fr-s3)}
.fr-footer ul{list-style:none;display:grid;gap:2px}
.fr-footer ul a{display:inline-flex;align-items:center;min-height:36px;color:var(--fr-ink);text-decoration:none}
.fr-footer ul a:hover{color:var(--fr-navy);text-decoration:underline}
.fr-disclosure{border-top:1px solid var(--fr-line);padding:var(--fr-s5) 0 var(--fr-s6);display:grid;grid-template-columns:auto 1fr;gap:var(--fr-s5);align-items:start}
.fr-disclosure p{font-size:var(--fr-fine);color:var(--fr-muted);line-height:1.65;margin:0 0 var(--fr-s2)}
.fr-disclosure a{color:var(--fr-navy);font-weight:600;text-decoration:underline}
.fr-ehl{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;text-align:center;color:var(--fr-navy);
  font-family:var(--fr-font-head);font-weight:700;font-size:11px;line-height:1.2;text-transform:uppercase;letter-spacing:.5px}
.fr-footer__wide{display:grid;grid-template-columns:300px minmax(0,1fr) 300px;gap:var(--fr-s6);align-items:start;padding:var(--fr-s7) var(--fr-s5) var(--fr-s6)}
.fr-footer__centre{text-align:center;max-width:960px;justify-self:center;width:100%}
.fr-widget{margin:0;width:300px;max-width:100%}
.fr-widget iframe{display:block;width:300px;max-width:100%;border:1px solid var(--fr-line);border-radius:6px;background:#fff}
.fr-widget figcaption{font-size:var(--fr-fine);color:var(--fr-muted);line-height:1.5;margin-top:var(--fr-s2);text-align:left}
.fr-footer ul.fr-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--fr-s4) var(--fr-s5);margin:0 0 var(--fr-s4);padding:0}
.fr-logos img{display:block;max-width:150px;max-height:60px;width:auto;height:auto}
.fr-footer__contact{color:var(--fr-muted);margin:0 0 var(--fr-s3)}
.fr-footer__contact a{color:var(--fr-navy);font-weight:600}
.fr-footer ul.fr-footer__links,.fr-footer__links ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--fr-s5);margin:0;padding:0}
.fr-footer__centre .fr-disclosure{display:block;border-top:1px solid var(--fr-line);margin-top:var(--fr-s4);padding:var(--fr-s5) 0 var(--fr-s4)}
.fr-footer__centre .fr-ehl{margin:0 auto var(--fr-s3)}
.fr-footer ul.fr-social{display:flex;justify-content:center;gap:var(--fr-s5);margin:0;padding:0}
.fr-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--fr-navy);border-radius:50%}
.fr-social a:hover{background:var(--fr-canvas);color:var(--fr-gold-ink)}
.fr-footer__copy{background:var(--fr-navy);color:var(--fr-on-navy-strong);font-size:var(--fr-fine)}
.fr-footer__copy .fr-container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:14px;padding-bottom:14px}
.fr-footer__copy a{color:#fff}
@media (max-width:900px){
  .fr-footer__top{grid-template-columns:1fr 1fr}
  .fr-footer__brand{grid-column:1 / -1}
}
@media (max-width:1180px){
  .fr-footer__wide{grid-template-columns:1fr 1fr;padding-left:var(--fr-gutter);padding-right:var(--fr-gutter)}
  .fr-footer__centre{grid-column:1 / -1;grid-row:1}
  .fr-widget{justify-self:center}
}
@media (max-width:680px){
  .fr-footer__wide{grid-template-columns:1fr}
  .fr-logos img{max-width:120px;max-height:48px}
}
@media (max-width:560px){
  .fr-footer__top{grid-template-columns:1fr}
  .fr-disclosure{grid-template-columns:1fr}
}

/* ---------- 15. Added 7 Oct 2026 for the Home and Refinance mockups ----------
   Three components only; nothing above was changed.
   .fr-split    text column beside a panel (Home "who we are")
   .fr-linklist two-column list of plain links (Home program list)
   .fr-compare  comparison table that stacks into labelled rows on phones (Refinance) */
.fr-split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.fr-split h2{margin-top:14px}
.fr-split__text p{color:var(--fr-ink)}
.fr-split__panel{background:var(--fr-surface);border:1px solid var(--fr-line);border-top:4px solid var(--fr-gold);border-radius:var(--fr-r-md);padding:26px}
.fr-section--white .fr-split__panel{background:var(--fr-canvas)}
.fr-split__panel h3{margin-bottom:var(--fr-s3)}
.fr-linklist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.fr-linklist a{display:flex;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid var(--fr-line);font-weight:600;font-size:15px;text-decoration:none}
.fr-linklist a:hover{text-decoration:underline}
@media (max-width:900px){ .fr-split{grid-template-columns:1fr;gap:32px} }
@media (max-width:560px){ .fr-linklist{grid-template-columns:1fr} }

.fr-compare{width:100%;max-width:980px;margin:0 auto;border-collapse:separate;border-spacing:0;background:var(--fr-surface);
  border:1px solid var(--fr-line);border-radius:var(--fr-r-md);overflow:hidden;font-size:15px}
.fr-compare caption{caption-side:bottom;text-align:left;font-size:var(--fr-fine);color:var(--fr-muted);padding-top:var(--fr-s3)}
.fr-compare th,.fr-compare td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--fr-line)}
.fr-compare thead th{background:var(--fr-navy);color:#fff;font-family:var(--fr-font-head);font-weight:700;font-size:15px;border-bottom:3px solid var(--fr-gold)}
.fr-compare tbody th{font-family:var(--fr-font-head);font-weight:700;color:var(--fr-navy);width:22%;background:var(--fr-canvas)}
.fr-compare td{color:var(--fr-ink)}
.fr-compare tbody tr:last-child th,.fr-compare tbody tr:last-child td{border-bottom:0}
@media (max-width:560px){
  .fr-compare,.fr-compare caption,.fr-compare tbody,.fr-compare tr,.fr-compare tbody th,.fr-compare td{display:block;width:auto}
  .fr-compare{border:0;background:none;border-radius:0;overflow:visible}
  .fr-compare caption{padding:0 0 var(--fr-s3)}
  .fr-compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .fr-compare tbody tr{background:var(--fr-surface);border:1px solid var(--fr-line);border-top:4px solid var(--fr-gold);border-radius:var(--fr-r-md);margin-bottom:var(--fr-s3);overflow:hidden}
  .fr-compare tbody th{border-bottom:0;padding-bottom:8px}
  .fr-compare tbody tr td:last-child{border-bottom:0}
  .fr-compare td{padding-top:6px}
  .fr-compare td::before{content:attr(data-label);display:block;font-family:var(--fr-font-head);font-weight:700;font-size:12px;
    letter-spacing:1px;text-transform:uppercase;color:var(--fr-gold-ink);margin-bottom:2px}
}


/* ---------- 16. Down payment assistance tool ----------
   Added 8 Oct 2026 for /down-payment-assistance/ only (the estimator, assets/fr/dpa.js, and its program cards).
   Every class starts with fr-dpa- except one rule for h4 card titles; nothing above was changed.
   Badge colours: navy (may fit), the gold pill (ask us), muted outline (probably not), navy outline (New Jersey:
   not offered by us yet); the words carry the meaning.  Test fixes 8 Oct 2026: result titles are h4 under an h3
   "Your estimate"; field errors, the county retry, the "answers changed" line and the scroll margin. */
.fr-dpa-tool[hidden],.fr-dpa-results[hidden],.fr-dpa-nojs[hidden],.fr-dpa-err[hidden],.fr-dpa-stale[hidden]{display:none!important}
.fr-dpa-nojs{max-width:760px;margin:0 auto}
.fr-dpa-tool{max-width:980px;margin:0 auto;background:var(--fr-surface);border:1px solid var(--fr-line);border-top:6px solid var(--fr-gold);
  border-radius:14px;box-shadow:var(--fr-sh-md);padding:28px}
.fr-dpa-privacy{display:flex;gap:10px;align-items:flex-start;font-size:var(--fr-small);color:var(--fr-ink);background:var(--fr-canvas);
  border-radius:var(--fr-r-sm);padding:10px 14px;margin-bottom:var(--fr-s5)}
.fr-dpa-privacy svg{flex:none;margin-top:1px;color:var(--fr-navy)}
.fr-dpa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 20px}
.fr-dpa-grid .fr-field{min-width:0}
.fr-dpa-grid .fr-field select{width:100%;max-width:100%;min-width:0}
.fr-dpa-grid .fr-field select:disabled{opacity:.7;cursor:not-allowed}
.fr-dpa-actions{margin:var(--fr-s3) 0 var(--fr-s5)}
.fr-dpa-results{display:grid;gap:14px;margin-bottom:var(--fr-s5)}
.fr-dpa-results:focus{outline:none}
.fr-dpa-res__title{font-size:var(--fr-h3);scroll-margin-top:96px}
.fr-dpa-res__title:focus{outline:none}
.fr-dpa-res{border:1px solid var(--fr-line);border-left:5px solid var(--fr-line);border-radius:var(--fr-r-md);padding:16px 18px;background:var(--fr-surface)}
.fr-dpa-res--fit{border-left-color:var(--fr-navy)}
.fr-dpa-res--ask{border-left-color:var(--fr-gold)}
.fr-dpa-res--no{background:var(--fr-canvas)}
.fr-dpa-res__head{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-bottom:6px}
.fr-dpa-res h4{font-size:18px}
.fr-dpa-badge{font-family:var(--fr-font-head);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--fr-r-pill);border:1px solid transparent;white-space:nowrap}
.fr-dpa-badge--fit{background:var(--fr-navy);color:#fff}
.fr-dpa-badge--ask{background:var(--fr-pill);color:var(--fr-gold-ink);border-color:var(--fr-gold)}
.fr-dpa-badge--no{background:transparent;color:var(--fr-muted);border-color:var(--fr-field-border)}
.fr-dpa-badge--info{background:var(--fr-surface);color:var(--fr-navy);border-color:var(--fr-navy)}
.fr-dpa-res--info{border-left-color:var(--fr-field-border)}
.fr-dpa-res__lender{font-size:14px;font-weight:600;color:var(--fr-ink);margin-bottom:6px}
.fr-dpa-res__elig{font-size:15px;color:var(--fr-ink);margin-bottom:6px}
.fr-dpa-err{display:block;font-size:var(--fr-small);font-weight:600;color:#9b1c1c;margin-top:2px}
.fr-dpa-retry{font:inherit;font-weight:700;color:var(--fr-navy);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.fr-dpa-retry:focus-visible{outline:3px solid var(--fr-focus);outline-offset:2px}
.fr-dpa-stale{font-size:15px;font-weight:600;color:var(--fr-ink);background:var(--fr-pill);border-left:4px solid var(--fr-gold);border-radius:var(--fr-r-sm);padding:10px 14px;margin-bottom:var(--fr-s4)}
.fr-dpa-res__amt{font-size:15px;color:var(--fr-ink);margin-bottom:6px}
.fr-dpa-res__amt b{color:var(--fr-navy)}
.fr-dpa-res__why{list-style:none;display:grid;gap:4px;font-size:14px;color:var(--fr-muted)}
.fr-dpa-res__why li{position:relative;padding-left:16px}
.fr-dpa-res__why li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:2px;background:var(--fr-gold)}
.fr-dpa-res__more{font-size:var(--fr-small);color:var(--fr-muted)}
.fr-dpa-after{border-top:1px solid var(--fr-line);padding-top:var(--fr-s5)}
.fr-dpa-after .fr-btns{margin:var(--fr-s3) 0 var(--fr-s4)}
.fr-dpa-group{font-size:22px;margin:var(--fr-s7) 0 var(--fr-s4);padding-bottom:8px;border-bottom:2px solid var(--fr-gold)}
.fr-dpa-group:first-of-type{margin-top:0}
.fr-dpa-groupnote{color:var(--fr-muted);font-size:15px;max-width:820px;margin-top:-4px}
.fr-card h4{font-size:var(--fr-h3);margin-bottom:var(--fr-s2)}
.fr-dpa-facts{list-style:none;display:grid;gap:6px;margin:4px 0 var(--fr-s2);font-size:14px;color:var(--fr-ink)}
.fr-dpa-facts li{position:relative;padding-left:16px}
.fr-dpa-facts li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:2px;background:var(--fr-gold)}
@media (max-width:900px){ .fr-dpa-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .fr-dpa-grid{grid-template-columns:minmax(0,1fr)} .fr-dpa-tool{padding:20px} .fr-dpa-actions .fr-btn,.fr-dpa-after .fr-btn{flex:1 1 100%} }
.fr-dpa-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:var(--fr-s7)}
.fr-dpa-pair .fr-dpa-group{margin-top:0}
.fr-dpa-one{display:grid}
@media (max-width:900px){ .fr-dpa-pair{grid-template-columns:1fr} .fr-dpa-pair > div + div{margin-top:var(--fr-s7)} }

/* ---------- 17. Home stats band (restored 8 Oct 2026) ---------- */
.fr-stats{padding:var(--fr-s7) 0}
.fr-stats__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fr-s5);text-align:center}
.fr-stats__num{display:block;font-family:var(--fr-font-head);font-weight:800;font-size:clamp(34px,4.5vw,48px);line-height:1.1;color:var(--fr-gold);font-variant-numeric:tabular-nums}
.fr-stats__label{display:block;margin-top:6px;color:var(--fr-on-navy-strong);font-size:var(--fr-small);letter-spacing:.3px}
.fr-stats__more{text-align:center;margin:var(--fr-s5) 0 0}
.fr-stats .fr-link-arrow{color:#fff}
@media (max-width:760px){ .fr-stats__list{grid-template-columns:1fr 1fr;row-gap:var(--fr-s6)} }
.fr-odo{display:inline-flex;justify-content:center;align-items:flex-start;height:1.1em;line-height:1.1;overflow:hidden}
.fr-odo__col{display:inline-block;height:1.1em;overflow:hidden}
.fr-odo__strip{display:flex;flex-direction:column;transform:translateY(0);transition-property:transform;transition-timing-function:cubic-bezier(.15,.7,.25,1)}
.fr-odo__strip>span{display:block;height:1.1em;line-height:1.1;text-align:center}
.fr-odo__sym{display:inline-block;height:1.1em}
.fr-odo__suffix{opacity:0;transition:opacity .3s}
.fr-odo.is-done .fr-odo__suffix{opacity:1}

/* ---------- 18. Contact gate (shared) and Guides and Tips ----------
   Added 8 Oct 2026 (Site Growth).  .fr-gate-* is the shared contact gate (_shell/gate.cfm, assets/fr/gate.js),
   used by the Guides and Tips pages and, later, the calculator gates.  .fr-guide-* and .fr-crumbs are for
   /guides/.  Nothing above was changed. */
.fr-gate{background:var(--fr-surface);color:var(--fr-ink);border-radius:14px;padding:26px;box-shadow:var(--fr-sh-lg);border-top:6px solid var(--fr-gold)}
.fr-gate[hidden],.fr-gate [hidden]{display:none!important}
.fr-gate__title{font-size:22px;margin-bottom:4px}
.fr-gate__sub{font-size:var(--fr-small);color:var(--fr-muted);margin-bottom:var(--fr-s4)}
.fr-gate__nojs{font-size:15px}
.fr-gate__row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fr-gate__row .fr-field{min-width:0}
.fr-gate .fr-field input{width:100%}
.fr-gate .fr-field input[aria-invalid="true"]{border-color:#9b1c1c;box-shadow:0 0 0 1px #9b1c1c}
.fr-gate__err{display:block;font-size:var(--fr-small);font-weight:600;color:#9b1c1c}
.fr-gate__errors{font-size:15px;font-weight:600;color:#9b1c1c;background:#fdf2f2;border-left:4px solid #9b1c1c;border-radius:var(--fr-r-sm);padding:10px 14px;margin-bottom:var(--fr-s4)}
.fr-gate__errors:focus{outline:3px solid var(--fr-focus);outline-offset:2px}
.fr-gate__otp{margin:-2px 0 var(--fr-s4)}
.fr .fr-gate__send{min-height:44px;padding:10px 18px}
.fr-gate__code label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.fr-gate__coderow{display:flex;gap:10px}
.fr-gate__coderow input{font:inherit;font-size:20px;letter-spacing:4px;width:9.5em;max-width:100%;padding:9px 12px;border:1px solid var(--fr-field-border);border-radius:var(--fr-r-sm);background:var(--fr-field-fill);color:var(--fr-ink);min-height:48px}
.fr-gate__coderow input[aria-invalid="true"]{border-color:#9b1c1c}
.fr-gate__link{font:inherit;font-size:var(--fr-small);font-weight:600;color:var(--fr-navy);background:none;border:0;padding:8px 0;min-height:36px;text-decoration:underline;cursor:pointer}
.fr-gate__ok{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--fr-navy);margin:0}
.fr-gate__msg{font-size:var(--fr-small);color:var(--fr-ink);margin:6px 0 0}
.fr-gate__msg:empty{display:none}
.fr-gate__choice{border:0;margin:0 0 var(--fr-s4);padding:0;min-width:0}
.fr-gate__choice legend{font-size:14px;font-weight:600;color:var(--fr-ink);padding:0;margin-bottom:6px}
.fr-gate__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fr-gate__opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--fr-field-border);border-radius:var(--fr-r-sm);background:var(--fr-field-fill);font-weight:600;cursor:pointer}
.fr-gate__opt:has(input:checked){border-color:var(--fr-navy);box-shadow:0 0 0 1px var(--fr-navy);background:#fff}
.fr-gate__opt input{width:20px;height:20px;accent-color:var(--fr-navy);margin:0}
.fr-gate__consent{font-size:var(--fr-fine);color:var(--fr-muted);line-height:1.55;margin-bottom:var(--fr-s3)}
.fr-gate__note{font-size:var(--fr-fine);color:var(--fr-muted);margin:var(--fr-s3) 0 0}
.fr-gate__done{border-left:4px solid var(--fr-gold);background:var(--fr-canvas);border-radius:var(--fr-r-sm);padding:16px 18px}
.fr-gate__done:focus{outline:3px solid var(--fr-focus);outline-offset:2px}
.fr-gate__donehead{font-family:var(--fr-font-head);font-weight:700;font-size:19px;color:var(--fr-navy)}
.fr-gate__privacy{font-size:var(--fr-fine);color:var(--fr-muted);margin:var(--fr-s4) 0 0;padding-top:var(--fr-s3);border-top:1px solid var(--fr-line)}
@media (max-width:560px){ .fr-gate{padding:20px} .fr-gate__row,.fr-gate__opts{grid-template-columns:1fr} }

.fr-crumbs{font-size:var(--fr-small);color:var(--fr-muted);margin-bottom:var(--fr-s3)}
.fr-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px}
.fr-crumbs li+li::before{content:"/";margin-right:8px;color:var(--fr-field-border)}
.fr-crumbs a{color:var(--fr-navy);font-weight:600}
.fr-guide-cover{margin:0;background:var(--fr-surface);border:1px solid var(--fr-line);border-top:6px solid var(--fr-gold);border-radius:14px;box-shadow:var(--fr-sh-lg);overflow:hidden;max-width:520px;justify-self:center;width:100%}
.fr-guide-cover img{width:100%;height:auto}
.fr-guide-cover figcaption{font-size:var(--fr-small);color:var(--fr-muted);padding:12px 16px;border-top:1px solid var(--fr-line)}
.fr-guide-who{font-size:15px;color:var(--fr-ink);background:var(--fr-surface);border-left:3px solid var(--fr-gold);border-radius:var(--fr-r-sm);padding:10px 14px;max-width:560px;margin-bottom:var(--fr-s5)}
.fr-guide-get{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:start}
.fr-guide-get h2{margin-top:14px}
.fr-guide-get .fr-checklist{grid-template-columns:1fr;margin:var(--fr-s4) 0 0;max-width:none}
.fr-guide-honest{max-width:940px;margin:32px auto 0}
.fr-guide-honest p{margin:0;font-size:17px}
.fr-guide-jump{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:var(--fr-s5)}
.fr-guide-jump a{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;background:var(--fr-surface);border:1px solid var(--fr-line);border-left:3px solid var(--fr-gold);border-radius:var(--fr-r-sm);font-size:14px;font-weight:600;color:var(--fr-navy);text-decoration:none}
.fr-guide-jump a:hover{text-decoration:underline}
.fr-guide-group{scroll-margin-top:24px}
.fr-guide-card{padding:0;overflow:hidden}
.fr-guide-card__img{display:block;border-bottom:1px solid var(--fr-line);background:#fff}
.fr-guide-card__img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top}
.fr-guide-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.fr-guide-card h3{font-size:18px;line-height:1.25}
.fr-guide-card h3 a{text-decoration:none;color:var(--fr-navy)}
.fr-guide-card h3 a:hover{text-decoration:underline}
.fr-guide-note{max-width:940px;margin:var(--fr-s5) auto 0}
@media (max-width:900px){ .fr-guide-get{grid-template-columns:1fr;gap:32px} .fr-guide-cover{max-width:420px} }

/* ---------- 19. Calculators with the contact step (Phase 3 batch 2, 8 Oct 2026) ----------
   Added by Site Growth for /dscr-loans/ (DSCR calculator, /js/dscr-calculator.js unchanged) and
   /asset-based-loans/ (assets as income, /js/asset-income-calculator.js unchanged), wired to the shared
   contact step by /assets/fr/calc-gate.js.  The fr-dc-* and fr-aic-* classes are the live calculators' own hooks,
   restyled here; .fr-calc* is the new frame.  Also rules for the down payment assistance tool's contact step and
   saved-estimate line.  Nothing above was changed. */
.fr-calc[hidden],.fr-calc [hidden],.fr-calc-nojs[hidden],.fr-dpa-saved[hidden]{display:none!important}
.fr-calc-nojs{max-width:760px;margin:0 auto}
.fr-calc{max-width:1100px;margin:0 auto}
.fr-calc-privacy{display:flex;gap:10px;align-items:flex-start;font-size:var(--fr-small);color:var(--fr-ink);background:var(--fr-surface);
  border:1px solid var(--fr-line);border-radius:var(--fr-r-sm);padding:10px 14px;margin-bottom:var(--fr-s5)}
.fr-calc-privacy svg{flex:none;margin-top:1px;color:var(--fr-navy)}
.fr-calc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start}
.fr-calc__panel{background:var(--fr-surface);border:1px solid var(--fr-line);border-top:6px solid var(--fr-gold);border-radius:14px;box-shadow:var(--fr-sh-md);padding:24px;min-width:0}
.fr-calc__panel h3{font-size:18px;margin:var(--fr-s5) 0 var(--fr-s3);padding-bottom:6px;border-bottom:1px solid var(--fr-line)}
.fr-calc__panel h3:first-child{margin-top:0}
.fr-calc__panel .fr-field input,.fr-calc__panel .fr-field select{width:100%;max-width:100%;min-width:0}
.fr-calc__panel .fr-field{min-width:0}
.fr-calc-money{position:relative;display:block}
.fr-calc-money::before{content:"$";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--fr-muted);pointer-events:none}
.fr-calc-money input{padding-left:26px!important}
.fr-calc .fr-field input[aria-invalid="true"],.fr-calc .fr-calc-missing{border-color:#9b1c1c!important;box-shadow:0 0 0 1px #9b1c1c}
.fr-calc-err{display:block;font-size:var(--fr-small);font-weight:600;color:#9b1c1c}
.fr-calc-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:0 0 var(--fr-s3);cursor:pointer}
.fr-calc-check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--fr-navy)}
.fr-calc-check small{display:block;font-size:var(--fr-small);color:var(--fr-muted);margin-top:2px}
.fr-calc-fieldset{border:0;margin:0 0 var(--fr-s3);padding:0;min-width:0}
.fr-calc-fieldset legend{font-size:14px;font-weight:600;color:var(--fr-ink);padding:0;margin-bottom:6px}
.fr-calc__side{display:grid;gap:var(--fr-s4);min-width:0}
.fr-calc__actions{background:var(--fr-surface);border:1px solid var(--fr-line);border-radius:14px;padding:20px}
.fr-calc__lead{font-size:15px;color:var(--fr-ink);margin-bottom:var(--fr-s3)}
.fr-calc-summary{background:#fdf2f2;border-left:4px solid #9b1c1c;border-radius:var(--fr-r-sm);padding:10px 14px;margin-top:var(--fr-s3);font-size:15px}
.fr-calc-stale,.fr-calc-saved,.fr-dpa-saved{font-size:15px;font-weight:600;color:var(--fr-ink);background:var(--fr-pill);border-left:4px solid var(--fr-gold);border-radius:var(--fr-r-sm);padding:10px 14px;margin:var(--fr-s3) 0 0}
.fr-dpa-saved{margin:0 0 var(--fr-s4)}
.fr-calc__results{display:grid;gap:14px;min-width:0}
.fr-calc__results:focus{outline:none}
.fr-calc__restitle{font-size:var(--fr-h3);scroll-margin-top:96px}
.fr-calc .fr-gate{margin:var(--fr-s5) auto 0;max-width:640px}
.fr-calc-legal{margin-top:var(--fr-s5);color:var(--fr-muted)}
.fr-dpa-tool .fr-gate{margin:0 0 var(--fr-s5);box-shadow:none;border:1px solid var(--fr-line);border-top:6px solid var(--fr-gold)}
/* the DSCR calculator's result cards (ids and classes set by /js/dscr-calculator.js) */
.fr-dc-card{background:var(--fr-surface);border:1px solid var(--fr-line);border-radius:var(--fr-r-md);padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.fr-dc-kind,.fr-aic-kind{font-family:var(--fr-font-head);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--fr-gold-ink)}
.fr-dc-ratio{font-family:var(--fr-font-head);font-weight:800;font-size:44px;line-height:1.1;color:var(--fr-navy);font-variant-numeric:tabular-nums}
.fr-dc-band{display:inline-block;align-self:flex-start;font-size:13px;font-weight:700;border-radius:var(--fr-r-pill);padding:4px 12px;background:var(--fr-pill);color:var(--fr-gold-ink);border:1px solid var(--fr-gold)}
.fr-dc-band:empty{display:none}
.fr-dc-band.strong{background:var(--fr-navy);color:#fff;border-color:var(--fr-navy)}
.fr-dc-band.low{background:var(--fr-canvas);color:var(--fr-ink);border-color:var(--fr-field-border)}
.fr-dc-note,.fr-dc-blurb,.fr-dc-formula{font-size:var(--fr-small);color:var(--fr-muted)}
.fr-dc-note{color:var(--fr-ink)}
.fr-dc-break{width:100%;border-collapse:collapse;font-size:15px}
.fr-dc-break th{text-align:left;font-weight:400;color:var(--fr-ink);padding:7px 8px 7px 0;border-bottom:1px solid var(--fr-line)}
.fr-dc-break td{text-align:right;font-weight:600;color:var(--fr-navy);padding:7px 0;border-bottom:1px solid var(--fr-line);white-space:nowrap;font-variant-numeric:tabular-nums}
.fr-dc-break tr.total th,.fr-dc-break tr.total td{font-weight:700;border-bottom:0;border-top:2px solid var(--fr-gold)}
.fr-dc-break tr[hidden]{display:none}
/* the assets as income calculator (classes set by /js/asset-income-calculator.js) */
.fr-aic-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fr-aic-toggle label{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border:1px solid var(--fr-field-border);border-radius:var(--fr-r-sm);background:var(--fr-field-fill);font-weight:600;cursor:pointer}
.fr-aic-toggle label.is-on{border-color:var(--fr-navy);box-shadow:0 0 0 1px var(--fr-navy);background:#fff}
.fr-aic-toggle input{width:20px;height:20px;accent-color:var(--fr-navy);margin:0}
.fr-aic-total{display:flex;justify-content:space-between;gap:12px;font-weight:700;color:var(--fr-navy);background:var(--fr-canvas);border-radius:var(--fr-r-sm);padding:10px 14px;margin:var(--fr-s2) 0 0}
.fr-aic-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fr-aic-results{display:grid;gap:14px}
.fr-aic-card{position:relative;background:var(--fr-surface);border:1px solid var(--fr-line);border-radius:var(--fr-r-md);padding:18px 20px;display:flex;flex-direction:column;gap:4px;min-width:0}
.fr-aic-card.is-best{border:2px solid var(--fr-gold)}
.fr-aic-flag{position:absolute;top:-11px;right:12px;background:var(--fr-gold);color:var(--fr-navy);font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:var(--fr-r-pill)}
.fr-aic-label{font-family:var(--fr-font-head);font-weight:700;font-size:17px;color:var(--fr-navy)}
.fr-aic-amount{font-family:var(--fr-font-head);font-weight:800;font-size:30px;line-height:1.15;color:var(--fr-navy);font-variant-numeric:tabular-nums}
.fr-aic-annual{font-size:var(--fr-small);font-weight:600;color:var(--fr-ink)}
.fr-aic-formula{font-size:13px;color:var(--fr-muted);overflow-wrap:anywhere}
.fr-aic-note{font-size:var(--fr-small);color:var(--fr-ink)}
.fr-aic-blurb{font-size:13px;color:var(--fr-muted);border-top:1px solid var(--fr-line);padding-top:8px;margin-top:4px}
.fr-aic-annual:empty,.fr-aic-formula:empty,.fr-aic-note:empty{display:none}
@media (max-width:900px){ .fr-calc__grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){ .fr-calc__panel{padding:18px} .fr-calc__actions{padding:16px} .fr-dc-ratio{font-size:38px} }
/* the fix and flip Deal Snapshot estimator (ids set by the live inline script on /fix-and-flip-loans/) and the
   unchanged quick-quote wizard (/css/fixflip-quote.css) in the hero's card column */
.fr-ffx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;max-width:1000px;margin:0 auto;background:var(--fr-surface);border:1px solid var(--fr-line);border-top:6px solid var(--fr-gold);border-radius:14px;box-shadow:var(--fr-sh-md);overflow:hidden}
.fr-ffx__in{padding:28px;min-width:0}
.fr-ffx__in h2{font-size:28px;margin:12px 0 8px}
.fr-ffx__in > p{color:var(--fr-muted);margin-bottom:var(--fr-s4)}
.fr-ffx__in .fr-field input{width:100%}
.fr-ffx__out{background:var(--fr-navy);color:var(--fr-on-navy-strong);padding:28px;display:flex;flex-direction:column;gap:10px;min-width:0}
.fr-ffx__lbl{font-family:var(--fr-font-head);font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--fr-gold-light)}
.fr-ffx__big{font-family:var(--fr-font-head);font-weight:800;font-size:44px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums}
.fr-ffx__meter{height:10px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.fr-ffx__meter i{display:block;height:100%;width:0;background:var(--fr-gold);transition:width .3s ease}
.fr-ffx__meterlbl{font-size:var(--fr-small);color:var(--fr-on-navy-strong)}
.fr-ffx__sub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid rgba(255,255,255,.18);padding-top:12px}
.fr-ffx__sub span{display:block;font-size:12px;color:var(--fr-on-navy)}
.fr-ffx__sub b{display:block;font-family:var(--fr-font-head);font-size:20px;color:#fff;font-variant-numeric:tabular-nums}
.fr-ffx__disc{font-size:12px;color:var(--fr-on-navy);line-height:1.5}
.fr-hero #quote{min-width:0;width:100%}
@media (max-width:760px){ .fr-ffx{grid-template-columns:minmax(0,1fr)} .fr-ffx__big{font-size:38px} }
@media (max-width:420px){ .fr-ffx__sub{grid-template-columns:1fr 1fr} .fr-ffx__in,.fr-ffx__out{padding:20px} }

/* ---------- 20. Phase 3 batch 3 (8 Oct 2026): long text, policies, glossary, calculator frame, reviews ----------
   Added by Site Growth for the Resources, About, Policies, Calculators and Loan Options pages.  Nothing above was
   changed.  .fr-prose / .fr-policy: reading column for policy text; .fr-faq--plain: an FAQ list without the "Q" mark;
   .fr-glossary and .fr-letters: the glossary; .fr-calc-frame: the HousingBrief calculator frame; .fr-reviews: the
   review cards (the classes are the ones the old review markup, js/google-reviews.js and the Zillow script print). */
.fr-prose{max-width:780px;margin:0 auto}
.fr-prose>:first-child{margin-top:0}
.fr-prose h2{font-size:22px;margin:40px 0 12px;scroll-margin-top:24px}
.fr-prose p,.fr-prose li{color:var(--fr-ink)}
.fr-prose ul{list-style:disc;margin:0 0 var(--fr-s4) 22px}
.fr-prose li{margin-bottom:8px}
.fr-policy h2{font-size:18px;letter-spacing:.3px}
.fr-policy__lead{font-size:var(--fr-lead)}
.fr-policy__note{font-size:var(--fr-small);color:var(--fr-muted)}
.fr-faq--plain summary::before{content:none}
.fr-letters{margin-top:0;margin-bottom:var(--fr-s5)}
.fr-letters a{min-width:44px;justify-content:center;padding:9px 10px}
.fr-glossary{max-width:900px;margin:0 auto}
.fr-glossary__group{padding:4px 0 20px;border-bottom:1px solid var(--fr-line)}
.fr-glossary__group h3{font-size:30px;font-weight:800;color:var(--fr-gold-ink);margin:20px 0 4px;scroll-margin-top:24px}
.fr-glossary dl{margin:0}
.fr-glossary dt{font-family:var(--fr-font-head);font-weight:700;font-size:17px;color:var(--fr-navy);margin-top:16px}
.fr-glossary dd{margin:4px 0 0;color:var(--fr-ink);font-size:15px}
.fr-calc-frame{max-width:1100px;margin:0 auto;background:var(--fr-surface);border:1px solid var(--fr-line);border-top:6px solid var(--fr-gold);
  border-radius:14px;box-shadow:var(--fr-sh-md);padding:8px;overflow:hidden}
.fr-calc-frame iframe{display:block;width:100%;max-width:100%;border:0;background:#fff}
.fr-calc-frame__note{max-width:1100px;margin:var(--fr-s3) auto 0}
.fr-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1100px;margin:0 auto}
.fr-reviews #map-plug{display:none}
.fr-reviews .review-item,.fr-reviews .review-item-left{background:var(--fr-surface);border:1px solid var(--fr-line);border-top:4px solid var(--fr-gold);
  border-radius:var(--fr-r-md);padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.fr-section--white .fr-reviews .review-item,.fr-section--white .fr-reviews .review-item-left{background:var(--fr-canvas)}
.fr-reviews .review-author,.fr-reviews .review-author-left{font-family:var(--fr-font-head);font-weight:700;color:var(--fr-navy);text-transform:capitalize}
.fr-reviews .review-date{display:block;font-family:var(--fr-font-body);font-weight:400;font-size:var(--fr-small);color:var(--fr-muted);text-transform:none}
.fr-reviews .review-stars ul,.fr-reviews .review-stars-left ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.fr-reviews i{font-style:normal;color:var(--fr-gold);line-height:1}
.fr-reviews i.inactive{color:#c6c6c6}
.fr-reviews .star::after{content:"\2605";font-size:19px}
.fr-reviews p{margin:0;color:var(--fr-ink);font-size:15px;overflow-wrap:anywhere}
.fr-reviews a:last-child{margin-top:auto}
.fr-reviews small{font-size:var(--fr-fine);font-weight:600;color:var(--fr-navy)!important}
.fr-reviews__btns{justify-content:center;margin-top:var(--fr-s6)}
.fr-reviews__none{text-align:center;color:var(--fr-muted)}
@media (max-width:900px){ .fr-reviews{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .fr-reviews{grid-template-columns:minmax(0,1fr)} .fr-prose h2{font-size:20px} }

/* ---------- 21. Phase 3 batch 4 (9 Oct 2026): the markets page, and room in the menu ----------
   Added by Site Growth.  Nothing above was changed.  .fr-mkt-*: the one markets page (the two HousingBrief widgets side
   by side; the feeds in closed panels, inside the section 20 calculator frame).  Menu: with "Blog" added and Markets a
   plain link, the top-level items are 11, so between 1101 and 1365 px each item's side padding goes from 8 to 6 px
   (estimate, not measured in a browser: content\phase3\BUILD-batch4.md). */
.fr-mkt-widgets{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fr-s6);max-width:940px;margin:0 auto}
.fr-mkt-widget{background:var(--fr-surface);border:1px solid var(--fr-line);border-top:4px solid var(--fr-gold);border-radius:var(--fr-r-md);
  padding:var(--fr-s3);box-shadow:var(--fr-sh-sm);width:auto}
.fr-mkt-widget iframe{border:0}
.fr-mkt-widget figcaption{max-width:300px}
.fr-mkt-note{max-width:940px;margin:var(--fr-s5) auto 0;font-size:var(--fr-small);color:var(--fr-muted);text-align:center}
.fr-mkt-feeds{max-width:1100px;margin:0 auto}
.fr-mkt-feeds summary{font-family:var(--fr-font-head)}
.fr-mkt-frame{margin-top:var(--fr-s3)}
@media (min-width:1201px) and (max-width:1365px){
  .fr-nav__link,.fr-nav__toggle{padding-left:6px;padding-right:6px}
}