:root {
  --black: #080808;
  --charcoal: #11110f;
  --panel: #171714;
  --gold: #c8a15a;
  --gold-light: #e0c17f;
  --cream: #f3efe5;
  --muted: #a6a298;
  --line: rgba(200, 161, 90, .25);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--cream); font-family: "DM Sans", sans-serif; }
body::selection { background: var(--gold); color: var(--black); }
.grain { position: fixed; inset: 0; opacity: .035; pointer-events: none; z-index: 99; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.hidden { display: none !important; }
.brand { display: inline-flex; gap: 12px; align-items: center; color: var(--cream); text-decoration: none; font-weight: 700; letter-spacing: .13em; }
.brand-logo { width: 58px; height: 58px; object-fit: contain; border-radius: 3px; background: #fff; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--gold); color: var(--gold); font-family: "Playfair Display", serif; font-size: 21px; transform: rotate(45deg); }
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand-mark { line-height: 1; }
.eyebrow { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .22em; margin: 0 0 14px; }
h1, h2 { font-family: "Playfair Display", serif; margin: 0; font-weight: 600; }
h1 { font-size: clamp(48px, 6vw, 84px); line-height: .98; letter-spacing: -.03em; }
h1 em { color: var(--gold); font-weight: 600; }
h2 { font-size: clamp(27px, 3vw, 38px); }
.muted { color: var(--muted); }
.login-screen { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; }
.login-brand { min-height: 100vh; padding: 46px 6vw; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 10% 90%, rgba(200,161,90,.16), transparent 38%), linear-gradient(135deg, #11110e, #060606 65%); border-right: 1px solid var(--line); }
.login-message { max-width: 760px; }
.login-brand > .brand .brand-logo { width: 76px; height: 76px; }
.login-message > p:last-child { max-width: 560px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.trust-line { display: flex; gap: 20px; align-items: center; color: #77746d; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; }
.trust-line i { width: 3px; height: 3px; background: var(--gold); border-radius: 50%; }
.login-panel { display: grid; place-items: center; padding: 32px; background: #0c0c0b; }
.login-card { width: min(430px, 100%); }
.login-card h2 { font-size: 46px; }
.login-card .muted { margin: 10px 0 38px; }
label { display: block; color: #d8d3c8; font-size: 13px; font-weight: 600; }
input, select, textarea { width: 100%; margin-top: 9px; border: 1px solid #34332f; background: #121210; color: var(--cream); border-radius: 2px; padding: 15px 16px; font: inherit; outline: none; transition: .2s; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,161,90,.09); }
.login-card label { margin: 20px 0; }
.password-wrap { display: flex; position: relative; }
.password-wrap input { padding-right: 65px; }
.text-button { position: absolute; right: 12px; top: 50%; transform: translateY(-38%); background: none; border: 0; color: var(--gold); cursor: pointer; }
.primary-button { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: var(--gold); color: #080808; padding: 17px 20px; font-weight: 700; font-size: 14px; cursor: pointer; transition: .2s; }
.primary-button:hover { background: var(--gold-light); transform: translateY(-1px); }
.primary-button:disabled { opacity: .65; cursor: wait; transform: none; }
.primary-button span { font-size: 19px; }
.secure-note { color: #69675f; text-align: center; font-size: 11px; margin-top: 20px; }
.error { color: #e98575; min-height: 20px; font-size: 13px; }
header { height: 86px; max-width: 1400px; padding: 0 44px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.header-right { display: flex; align-items: center; gap: 24px; }
.corporation { color: var(--muted); font-size: 13px; }
.outline-button { border: 1px solid #49463f; background: transparent; color: var(--cream); padding: 10px 16px; cursor: pointer; }
.hero { max-width: 1312px; margin: auto; padding: 110px 44px 95px; display: flex; justify-content: space-between; align-items: end; }
.hero-copy { color: var(--muted); max-width: 650px; font-size: 17px; line-height: 1.7; }
.hero-stat { display: flex; gap: 18px; align-items: flex-start; border-left: 1px solid var(--gold); padding-left: 20px; margin-bottom: 12px; }
.hero-stat span { color: var(--gold); font-family: "Playfair Display"; font-size: 28px; }
.hero-stat p { margin: 3px 0; color: var(--muted); font-size: 12px; line-height: 1.6; text-transform: uppercase; letter-spacing: .08em; }
.search-shell { max-width: 1224px; margin: 0 auto 100px; border: 1px solid var(--line); background: linear-gradient(145deg, #151512, #0f0f0d); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.step { padding: 20px 30px; display: flex; gap: 12px; align-items: center; color: #66645d; border-right: 1px solid var(--line); }
.step:last-child { border: 0; }.step.active { color: var(--cream); background: rgba(200,161,90,.05); }
.step span { color: var(--gold); font-size: 11px; }.step p { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.form-section { padding: 55px 64px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 34px; }
.section-heading > span { color: var(--gold); font-family: "Playfair Display"; font-size: 18px; margin-top: 4px; }
.section-heading .eyebrow { margin-bottom: 8px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.choice-card { position: relative; min-height: 148px; border: 1px solid #36352f; padding: 23px; cursor: pointer; transition: .2s; }
.choice-card:hover, .choice-card:has(input:checked) { border-color: var(--gold); background: rgba(200,161,90,.07); }
.choice-card input { position: absolute; opacity: 0; width: 1px; }
.choice-card strong, .choice-card small { display: block; }.choice-card strong { font-family: "Playfair Display"; font-size: 21px; margin: 13px 0 6px; }
.choice-card small { color: var(--muted); font-weight: 400; }.choice-icon { color: var(--gold); font-size: 25px; }
.category-toggle { width: fit-content; display: flex; border: 1px solid #34332f; margin-bottom: 27px; }
.category-toggle label input { position: absolute; opacity: 0; }
.category-toggle label span { display: block; padding: 13px 28px; color: var(--muted); cursor: pointer; }
.category-toggle label input:checked + span { background: var(--gold); color: var(--black); }
.field { margin-top: 24px; }.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 22px; }
.money-input { position: relative; display: block; }.money-input b { position: absolute; left: 16px; top: 25px; color: var(--gold); }.money-input input { padding-left: 34px; }
.rate-calculator { margin-top: 34px; padding: 24px; border: 1px solid rgba(200,161,90,.42); background: linear-gradient(135deg, rgba(200,161,90,.09), rgba(200,161,90,.025)); }
.rate-calculator h3 { margin: 0 0 8px; font-family: "Playfair Display"; font-size: 26px; }
.rate-calculator p { color: var(--muted); margin: 0; line-height: 1.6; }
.rate-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 16px; }
.rate-result-grid div { padding: 16px; border: 1px solid var(--line); background: rgba(0,0,0,.22); }
.rate-result-grid span { display: block; color: #8f8a7f; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.rate-result-grid strong { color: var(--gold-light); font-size: 22px; font-family: "Playfair Display"; }
.rate-warning { color: #e9aa72 !important; margin-top: 6px !important; }
.rate-disclaimer { margin-top: 14px !important; font-size: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.fha-state-leaders { margin-top: 34px; padding: 22px; border: 1px solid rgba(200,161,90,.38); background: rgba(200,161,90,.035); }
.fha-leaders-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.fha-leaders-heading h3 { margin: 0 0 8px; font-family: "Playfair Display"; font-size: 25px; }
.fha-leaders-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.fha-leader-list { margin-top: 16px; border: 1px solid var(--line); }
.fha-leader-row { display: grid; grid-template-columns: 70px 1fr; gap: 10px 18px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.fha-leader-row:last-child { border-bottom: 0; }
.fha-leader-row strong { color: var(--gold-light); }
.fha-leader-row span { color: var(--cream); font-weight: 700; }
.fha-leader-row small { grid-column: 2; color: var(--muted); }
.optional { color: #6d6a63; font-weight: 400; }
textarea { resize: vertical; }
.submit-row { padding: 38px 64px; display: flex; align-items: center; justify-content: space-between; background: rgba(200,161,90,.04); }
.submit-row p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.submit-button { width: 290px; }
.form-status { padding: 0 64px; color: var(--gold-light); }
.email-fallback-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.email-fallback-actions .outline-button { color: var(--gold-light); text-decoration: none; }
.search-button { margin-top: 28px; border-color: var(--gold); color: var(--gold-light); padding: 14px 20px; }
.lender-results { margin-top: 24px; }
.match-summary { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.directory-warning { color: #9f988a; font-size: 12px; line-height: 1.5; padding: 12px 14px; border: 1px solid var(--line); margin: 0 0 14px; }
.additional-matches { color: var(--muted); font-size: 12px; line-height: 1.6; padding: 14px 16px; border: 1px solid rgba(200,161,90,.45); background: rgba(200,161,90,.035); margin: 0 0 14px; }
.additional-matches summary { color: var(--gold-light); cursor: pointer; font-weight: 700; }
.additional-matches p { margin: 12px 0 0; overflow-wrap: anywhere; }
.lender-card { display: grid; grid-template-columns: 1fr auto; gap: 22px; padding: 24px; border: 1px solid var(--line); background: rgba(200,161,90,.045); }
.lender-card h3 { margin: 0 0 6px; font-family: "Playfair Display"; font-size: 24px; }
.lender-card p { color: var(--muted); margin: 5px 0; font-size: 13px; }
.match-badge { color: var(--black); background: var(--gold); align-self: start; padding: 8px 11px; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.no-matches { padding: 20px; border-left: 2px solid var(--gold); background: rgba(200,161,90,.05); color: var(--muted); }
.commercial-criteria { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line); }
.criteria-title { color: var(--gold-light); font-family: "Playfair Display"; font-size: 20px; margin: 0 0 8px; }
.honey { display: none; }
footer { max-width: 1312px; margin: auto; padding: 50px 44px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: #69675f; font-size: 12px; }
footer > div p { margin: 20px 0 0; }
footer .brand-logo { width: 64px; height: 64px; }
@media (max-width: 800px) {
  .login-screen { grid-template-columns: 1fr; }.login-brand { min-height: 42vh; padding: 30px 24px; }.trust-line { display: none; }.login-message h1 { font-size: 48px; }.login-message > p:last-child { display: none; }
  .login-panel { padding: 55px 24px; }.login-card h2 { font-size: 38px; }
  header { padding: 0 20px; }.corporation { display: none; }.hero { padding: 70px 24px 55px; }.hero-stat { display: none; }.hero h1 { font-size: 48px; }
  .search-shell { margin: 0 14px 70px; }.step { padding: 15px 12px; }.step p { font-size: 9px; }
  .form-section { padding: 42px 22px; }.choice-grid, .field-grid, .rate-result-grid { grid-template-columns: 1fr; }.choice-card { min-height: 120px; }
  .fha-leaders-heading { display: block; }.fha-leaders-heading .outline-button { margin-top: 16px; }.fha-leader-row { grid-template-columns: 1fr; }.fha-leader-row small { grid-column: auto; }
  .submit-row { padding: 30px 22px; display: block; }.submit-button { width: 100%; margin-top: 25px; }
  footer { padding: 35px 24px; display: block; } footer > p { margin-top: 30px; }
}