/* ==========================================================================
   MortgageGrades — FlexJobs system, copied value for value (user request
   2026-09-04 "theme ko exact flexjobs copy karo").
   Font: FlexJobs uses "halcyon" (commercial); Outfit is the closest open
   geometric sans and is used everywhere, body included, as FlexJobs does.
   Loaded LAST, after theme-modern.css and mortgagegrades.css.
   ========================================================================== */
:root {
  --fj-deep: #004F6D; --fj-deep-2: #003B52; --fj-brand: #007CAD; --fj-brand-dark: #005F86;
  --fj-tint: #F1F9FE; --fj-tint-2: #EFF4F8; --fj-orange: #FF532A; --fj-orange-hover: #FF6843;
  --fj-text: #343A40; --fj-body: #373D3F; --fj-muted: #6B7280; --fj-border: #DCE3EA; --fj-page: #FFFFFF; --fj-section: #F9FAFC; --fj-footer: #F5F5F5;
  --font-display: "Outfit", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Outfit", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shadow-md: 0 6px 18px rgba(0, 79, 109, .10);
  --lr-a: #1a9a5b; --lr-b: #2fa26b; --lr-c: #d9a400; --lr-d: #e2711d; --lr-f: #c0392b; --lr-none: #9aa5b1;
}
body { font-family: var(--font-body); font-size: 16px; color: var(--fj-body); background: #fff; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--fj-text); }
a { color: var(--fj-brand); }

/* ---------- buttons: orange 4px, FlexJobs weights ---------- */
.button { border-radius: 4px; font-weight: 500; }
.button-primary, .fj-auth .fj-signup, .fj-search button, .lr-home-search button { background: var(--fj-orange); color: #fff; }
.button-primary:hover, .fj-auth .fj-signup:hover, .fj-search button:hover, .lr-home-search button:hover { background: var(--fj-orange-hover); }
.button-ghost, .button-outline { background: #fff; color: var(--fj-brand); border: 1px solid var(--fj-brand); }
.fj-btn-lg { font-size: 24px; font-weight: 600; padding: 8px 16px; border-radius: 4px; background: var(--fj-orange); color: #fff; text-decoration: none; display: inline-block; }
.fj-btn-lg:hover { background: var(--fj-orange-hover); color: #fff; }

/* ---------- header: white, logo + tagline + two inputs + orange button ---------- */
.site-header .container.nav { padding: 12px 0; gap: 20px; min-height: 76px; }
.fj-tagline { display: inline-block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fj-deep); font-weight: 600; }
.fj-tagline b { color: var(--fj-orange); }
@media (max-width: 1200px) { .fj-tagline { display: none; } }
.fj-search { display: none; flex: 0 1 620px; max-width: 620px; height: 46px; }
.fj-search input { height: 46px; border: 1px solid var(--fj-border); border-right: 0; background: var(--fj-tint); font: 15px var(--font-body); color: #000; }
.fj-search input.fj-in-1 { border-radius: 4px 0 0 4px; flex: 1 1 50%; }
.fj-search input.fj-in-2 { border-radius: 0; flex: 1 1 50%; border-left: 1px solid var(--fj-border); }
.fj-search button { width: 46px; height: 46px; border-radius: 0 4px 4px 0; font-size: 20px; }
@media (min-width: 900px) { .fj-search { display: flex; } }
.fj-auth .fj-login { color: var(--fj-deep); font-weight: 500; font-size: 16px; }
.fj-auth .fj-signup { font-weight: 500; font-size: 16px; padding: 6px 12px; }
.fj-utility { background: var(--fj-deep); }
.fj-utility .container { height: 44px; }
.fj-utility .nav-links a { color: #fff; font-weight: 500; font-size: 15px; padding: 0 14px; line-height: 44px; border-radius: 0; }
.fj-utility .nav-links a:hover, .fj-utility .nav-links a.is-active { background: rgba(255,255,255,.12); color: #fff; }
.fj-utility .fj-quick a, .fj-utility .fj-quick span { color: #fff; font-weight: 500; font-size: 15px; }
.lr-wordmark { color: var(--fj-deep); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; }
.lr-wordmark b { color: var(--fj-orange); }
.logo img { width: 40px; height: 40px; }

/* ---------- hero: white, 55px navy h1 with orange span, 35px lead, big orange CTA ---------- */
.lr-home-hero { background: #fff; border: 0; padding: 56px 0 40px; position: relative; overflow: hidden; }
.lr-home-hero::before, .lr-home-hero::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,83,42,.18) 2px, transparent 2.5px) 0 0 / 14px 14px; opacity: .9; pointer-events: none; }
.lr-home-hero::before { left: -20px; top: 90px; }
.lr-home-hero::after { right: 40px; bottom: 30px; }
.lr-home-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 40px; align-items: center; }
.lr-home-hero h1 { font-size: 55px; line-height: 1.1; font-weight: 600; color: var(--fj-deep); max-width: 16ch; margin: 0 0 18px; }
.lr-home-hero h1 em { font-style: normal; color: var(--fj-orange); }
.lr-home-hero .fj-lead { font-size: 30px; line-height: 1.25; color: var(--fj-body); max-width: 22ch; margin: 0 0 26px; font-weight: 400; }
.lr-home-hero .fj-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lr-home-hero .fj-cta-row a.fj-link { color: var(--fj-brand); font-weight: 500; text-decoration: underline; }
@media (max-width: 1100px) { .lr-home-hero h1 { font-size: 44px; } .lr-home-hero .fj-lead { font-size: 24px; } }
@media (max-width: 900px) { .lr-home-grid { grid-template-columns: 1fr; } .lr-home-hero h1 { font-size: 36px; } .lr-home-hero .fj-lead { font-size: 20px; } .fj-btn-lg { font-size: 19px; } }

/* illustration: grade card + orange blob + floating badges, like the FlexJobs hero figure */
.fj-figure { position: relative; min-height: 420px; }
.fj-figure .fj-blob { position: absolute; right: 10px; top: 20px; width: 380px; height: 380px; border-radius: 50%; background: #FFE9E2; }
.fj-figure .fj-ring { position: absolute; right: 60px; top: 70px; width: 300px; height: 300px; border-radius: 50%; border: 3px solid rgba(255,83,42,.45); }
.fj-figure .fj-hero-card { position: absolute; right: 70px; top: 90px; width: 270px; background: #fff; border-radius: 12px; box-shadow: 0 18px 44px rgba(0,79,109,.16); padding: 22px; text-align: center; }
.fj-figure .fj-hero-card .lr-grade-lg { margin: 0 auto 10px; }
.fj-figure .fj-hero-card h3 { font-size: 19px; margin: 0; color: var(--fj-deep); }
.fj-figure .fj-hero-card p { font-size: 13px; color: var(--fj-muted); margin: 4px 0 12px; }
.fj-figure .fj-hero-card dl { margin: 0; text-align: left; }
.fj-figure .fj-hero-card dl div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--fj-border); font-size: 13.5px; }
.fj-figure .fj-hero-card dt { color: var(--fj-muted); } .fj-figure .fj-hero-card dd { margin: 0; font-weight: 700; color: var(--fj-deep); }
.fj-badge { position: absolute; background: #fff; border-radius: 30px; box-shadow: 0 8px 24px rgba(0,79,109,.14); padding: 10px 16px 10px 12px; font-weight: 600; font-size: 14px; color: var(--fj-text); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fj-badge i { width: 22px; height: 22px; border-radius: 50%; background: var(--fj-orange); display: inline-grid; place-items: center; color: #fff; font-style: normal; font-size: 13px; }
.fj-badge-1 { left: 0; top: 60px; } .fj-badge-2 { left: 20px; bottom: 60px; }
@media (max-width: 900px) { .fj-figure { display: none; } }

/* ---------- section rhythm: 45px centered h2, #343A40 ---------- */
.fj-section { padding: 64px 0; }
.fj-section.alt { background: var(--fj-section); }
.fj-section.band { background: var(--fj-tint-2); }
.fj-section h2, .fj-section .fj-h2 { font-size: 45px; text-align: center; color: var(--fj-text); margin: 0 0 12px; line-height: 1.15; }
.fj-section h2 .fj-num { color: var(--fj-text); text-decoration: underline; text-decoration-color: var(--fj-orange); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.fj-section .fj-sub { text-align: center; color: var(--fj-body); font-size: 18px; max-width: 70ch; margin: 0 auto 32px; }
@media (max-width: 900px) { .fj-section { padding: 44px 0; } .fj-section h2, .fj-section .fj-h2 { font-size: 30px; } }

/* company strip → largest lenders strip */
.fj-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; align-items: center; }
.fj-strip a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--fj-deep); text-decoration: none; padding: 8px 4px; }
.fj-strip a:hover { color: var(--fj-brand); }
.fj-strip .lr-grade { width: 26px; height: 26px; font-size: 13px; }
.fj-foot-note { text-align: center; color: var(--fj-muted); font-size: 13px; margin-top: 18px; }

/* job cards → lender cards */
.fj-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .fj-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .fj-cards { grid-template-columns: 1fr; } }
.fj-card { display: block; background: #fff; border: 1px solid var(--fj-border); border-radius: 4px; padding: 24px 22px; text-decoration: none; color: var(--fj-text); box-shadow: 0 2px 8px rgba(0,79,109,.05); transition: box-shadow .15s, transform .15s; }
.fj-card:hover { box-shadow: 0 10px 24px rgba(0,79,109,.12); transform: translateY(-2px); }
.fj-card-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--fj-muted); margin-bottom: 10px; }
.fj-card-top .fj-new { color: var(--fj-orange); font-weight: 700; }
.fj-card h3 { font-size: 18px; color: var(--fj-deep); margin: 0 0 12px; line-height: 1.3; }
.fj-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fj-pill { background: var(--fj-tint); color: var(--fj-deep); font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 4px; }
.fj-card-loc { font-size: 13.5px; color: var(--fj-muted); display: flex; align-items: center; gap: 6px; }
.fj-card-loc .lr-grade { width: 22px; height: 22px; font-size: 12px; }
.fj-center { text-align: center; margin-top: 28px; }

/* testimonial → data quotes */
.fj-rating { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0 0 28px; }
.fj-rating .fj-score { background: var(--fj-brand); color: #fff; font-weight: 700; font-size: 30px; padding: 6px 12px; border-radius: 4px; line-height: 1; text-align: center; }
.fj-rating .fj-score small { display: block; font-size: 10px; font-weight: 500; opacity: .85; }
.fj-rating .fj-rating-text { font-weight: 700; color: var(--fj-text); font-size: 18px; }
.fj-rating .fj-rating-text small { display: block; font-weight: 400; color: var(--fj-muted); font-size: 13px; }
.fj-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .fj-quotes { grid-template-columns: 1fr; } }
.fj-quote { background: #fff; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,79,109,.08); padding: 34px 28px; text-align: center; }
.fj-quote p { font-size: 20px; line-height: 1.4; color: var(--fj-text); margin: 0 0 14px; font-weight: 500; }
.fj-quote p b { color: var(--fj-orange); font-weight: 600; }
.fj-quote cite { font-style: normal; color: var(--fj-body); font-size: 14.5px; }
.fj-quote cite a { color: var(--fj-deep); font-weight: 700; text-decoration: none; }

/* "how it's different" checklist + figure */
.fj-different { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); gap: 48px; align-items: center; }
@media (max-width: 900px) { .fj-different { grid-template-columns: 1fr; } }
.fj-different h2 { text-align: left; }
.fj-different h2 .fj-underline { text-decoration: underline; text-decoration-color: var(--fj-orange); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.fj-check { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 22px; }
.fj-check li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.fj-check li::before { content: "✓"; width: 24px; height: 24px; border-radius: 50%; background: var(--fj-brand); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; margin-top: 2px; }
.fj-check strong { display: block; font-size: 20px; color: var(--fj-text); margin-bottom: 4px; }
.fj-check span { color: var(--fj-body); font-size: 16px; line-height: 1.5; }
.fj-diff-figure { position: relative; min-height: 380px; }
.fj-diff-figure .fj-blob { position: absolute; right: 0; top: 10px; width: 340px; height: 340px; border-radius: 50%; background: var(--fj-tint); }
.fj-diff-figure .fj-table-card { position: absolute; right: 30px; top: 50px; width: 360px; background: #fff; border-radius: 8px; box-shadow: 0 18px 44px rgba(0,79,109,.16); overflow: hidden; }
.fj-diff-figure table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fj-diff-figure th { background: var(--fj-tint); text-align: left; padding: 10px 12px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fj-muted); }
.fj-diff-figure td { padding: 10px 12px; border-top: 1px solid var(--fj-border); }
.fj-diff-figure td.num { text-align: right; font-weight: 600; color: var(--fj-deep); }

/* "as seen on" → built on */
.fj-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; align-items: center; }
.fj-sources span { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: #4b5563; letter-spacing: -0.01em; }
.fj-sources span small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fj-muted); text-align: center; }

/* big search band #EFF4F8 with pill buttons + chips */
.fj-band-search { max-width: 760px; margin: 0 auto 22px; display: flex; }
.fj-band-search input { flex: 1; min-width: 0; height: 52px; border: 1px solid var(--fj-border); border-right: 0; border-radius: 4px 0 0 4px; padding: 0 16px; font: 16px var(--font-body); background: #fff; }
.fj-band-search button { width: 56px; height: 52px; border: 0; border-radius: 0 4px 4px 0; background: var(--fj-orange); color: #fff; font-size: 20px; cursor: pointer; }
.fj-pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 22px; }
.fj-pill-row a { background: var(--fj-brand); color: #fff; font-weight: 500; padding: 12px 22px; border-radius: 30px; text-decoration: none; font-size: 15px; }
.fj-pill-row a:hover { background: var(--fj-brand-dark); }
.fj-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fj-chip-row a { background: #fff; border: 1px solid var(--fj-border); color: var(--fj-text); padding: 9px 16px; border-radius: 30px; text-decoration: none; font-size: 14px; font-weight: 500; }
.fj-chip-row a:hover { border-color: var(--fj-brand); color: var(--fj-brand); }

/* blue band #007CAD */
.fj-blue { background: var(--fj-brand); color: #fff; padding: 64px 0; text-align: center; }
.fj-blue h2 { color: #fff; font-size: 44px; max-width: 24ch; margin: 0 auto 22px; line-height: 1.15; }
.fj-blue p { color: rgba(255,255,255,.92); font-size: 19px; max-width: 60ch; margin: 0 auto 26px; }
.fj-blue .fj-btn-lg { background: var(--fj-orange); }
@media (max-width: 900px) { .fj-blue h2 { font-size: 30px; } }

/* ---------- footer: #F5F5F5, three columns, social row, bottom line ---------- */
.ft { background: var(--fj-footer); color: #000; }
.ft .ft-deck-1, .ft .ft-deck-2, .ft .ft-deck-3 { background: transparent; border: 0; }
.ft-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 48px 0 24px; }
@media (max-width: 800px) { .ft-main { grid-template-columns: 1fr; } }
.ft-col h3 { font-size: 15px; font-weight: 600; color: #000; margin: 0 0 14px; }
.ft-col ul { list-style: none; margin: 0; padding: 0; }
.ft-col li { margin: 0 0 9px; }
.ft-col a { color: #000; font-size: 14px; text-decoration: none; }
.ft-col a:hover { color: var(--fj-brand); text-decoration: underline; }
.ft-social-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: start; padding: 10px 0 30px; border-top: 1px solid #E5E7EB; }
@media (max-width: 800px) { .ft-social-row { grid-template-columns: 1fr; } }
.ft-social-row h3 { font-size: 15px; font-weight: 600; margin: 16px 0 10px; }
.ft-social a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--fj-brand); color: #fff; margin-right: 8px; text-decoration: none; font-weight: 700; font-size: 14px; }
.ft-source { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.ft-source b { font-size: 18px; color: var(--fj-deep); }
.ft-bottom { border-top: 1px solid #E5E7EB; padding: 18px 0 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; font-size: 12.5px; color: #555; }
.ft-bottom a { color: #000; text-decoration: none; margin-right: 14px; }
.ft-bottom .ft-note { max-width: 78ch; }

/* ---------- inner pages: white heroes, navy h1, orange kicker (FlexJobs inner pages are white) ---------- */
.wi-hero, .rk-hero, .rk-hero.lr-tint { background: #fff; border-bottom: 1px solid var(--fj-border); }
.wi-hero h1, .rk-hero h1 { color: var(--fj-deep); font-weight: 600; }
.wi-kicker { color: var(--fj-orange); }
.wi-hero .rk-stats strong, .rk-hero .rk-stats strong { color: var(--fj-brand); }
.wi-card { border-radius: 4px; }
.lr-stat, .lr-feature, .lr-comp, .rk-table-wrap, .lr-compare, .lr-hero-card { border-radius: 4px; }
.lr-section > h2, .lr-h2, .lr-prose h2 { color: var(--fj-text); }
.rk-table th { background: var(--fj-tint); }
.lr-bar .lr-bar-fill { background: var(--fj-brand); }
.lr-home-section .section-header h2 { text-align: left; }
.fu-faq-icon { color: var(--fj-orange) !important; }
.fu-faq-item.active .fu-faq-icon { background: var(--fj-orange); }
.fj-check span { grid-column: 2; }