/* ── Financing page styles ─────────────────────────────── */

/* GreenSky green token */
:root {
  --gs-green: #2D7D2F;
  --gs-green-light: #3a9e3c;
  --gs-green-dark: #1e5c20;
}

/* ── Page hero ─────────────────────────────────────────── */
#fn-hero {
padding-top: var(--nav-h);
background: var(--black);
position: relative;
overflow: hidden;
}

.fn-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 70% at 70% 50%, rgba(45,125,47,0.07) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 10% 80%, rgba(245,194,0,0.05) 0%, transparent 60%);
transform-origin: center center;
}

.fn-hero-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
max-width: 1180px;
margin: 0 auto;
padding: 80px 24px 90px;
}

.fn-hero-label {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
}
.fn-hero-label::before {
content: '';
width: 28px;
height: 2px;
background: var(--gold);
display: inline-block;
}

.fn-hero-h1 {
font-family: var(--font-display);
font-size: clamp(48px, 6.5vw, 82px);
font-weight: 900;
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -1px;
margin-bottom: 22px;
text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.fn-hero-h1 em {
font-style: normal;
color: var(--gold);
display: block;
}

.fn-hero-p {
font-size: 17px;
color: var(--gray-light);
line-height: 1.75;
max-width: 500px;
margin-bottom: 32px;
}

.fn-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 36px;
}

.fn-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 4px;
padding: 8px 16px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--gray-light);
}
.fn-badge-icon { color: var(--gold); font-size: 16px; }

/* GreenSky partner card */
.fn-hero-partner {
background: rgba(255,255,255,0.96);
border-radius: 12px;
padding: 36px 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
box-shadow: 0 24px 64px rgba(0,0,0,0.5);
position: relative;
}

.fn-partner-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;
}

/* SVG GreenSky logo */
.fn-gs-logo {
width: 200px;
height: auto;
}

.fn-partner-tagline {
font-family: 'Georgia', serif;
font-size: 22px;
color: #1a3a5c;
text-align: center;
line-height: 1.35;
font-weight: 400;
}

.fn-partner-cta-btn {
display: block;
width: 100%;
background: var(--gs-green);
color: #fff;
text-align: center;
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
padding: 16px 24px;
border-radius: 6px;
text-decoration: none;
transition: background 0.2s, transform 0.2s;
}
.fn-partner-cta-btn:hover {
background: var(--gs-green-light);
transform: translateY(-2px);
}

.fn-partner-nmls {
font-size: 11px;
color: #888;
text-align: center;
line-height: 1.6;
}
.fn-partner-nmls a { color: #555; text-decoration: underline; }

.fn-partner-eho {
display: flex;
align-items: center;
gap: 8px;
border-top: 1px solid #eee;
padding-top: 14px;
width: 100%;
justify-content: center;
}

/* Equal Housing icon SVG inline */
.fn-eho-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
}

.fn-eho-text {
font-size: 10px;
color: #999;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
line-height: 1.3;
}

/* ── Trust bar ─────────────────────────────────────────── */
#fn-trust {
background: var(--dark2);
border-top: 1px solid rgba(245,194,0,0.1);
border-bottom: 1px solid rgba(245,194,0,0.1);
padding: 18px 0;
}

.fn-trust-inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}

.fn-trust-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 28px;
border-right: 1px solid rgba(255,255,255,0.08);
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--gray-light);
}
.fn-trust-item:last-child { border-right: none; }
.fn-trust-item span:first-child { font-size: 20px; }

/* ── How it works ──────────────────────────────────────── */
#fn-how {
padding: 96px 0;
background: var(--black);
}

.fn-how-inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}

.fn-section-tag {
display: inline-block;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
border: 1.5px solid var(--gold);
padding: 5px 14px;
border-radius: 2px;
margin-bottom: 18px;
}

.fn-section-title {
font-family: var(--font-display);
font-size: clamp(34px, 4.5vw, 52px);
font-weight: 900;
line-height: 1.05;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
}

.fn-section-title em {
font-style: normal;
color: var(--gold);
}

.fn-divider {
width: 56px;
height: 4px;
background: var(--gold);
border-radius: 2px;
margin: 16px 0 48px;
}

.fn-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}

.fn-step {
background: var(--dark2);
border: 1px solid rgba(255,255,255,0.05);
padding: 34px 26px;
position: relative;
transition: border-color 0.25s;
}
.fn-step:hover { border-color: rgba(245,194,0,0.25); }

.fn-step-num {
font-family: var(--font-display);
font-size: 60px;
font-weight: 900;
color: rgba(245,194,0,0.1);
line-height: 1;
margin-bottom: 10px;
}

.fn-step-icon { font-size: 26px; margin-bottom: 12px; }

.fn-step-title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--white);
margin-bottom: 8px;
}

.fn-step-text {
font-size: 14px;
color: var(--gray);
line-height: 1.65;
}

.fn-step-arrow {
position: absolute;
right: -14px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
background: var(--gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
font-size: 12px;
color: var(--black);
font-weight: 900;
}
.fn-step:last-child .fn-step-arrow { display: none; }

/* ── Loan options ──────────────────────────────────────── */
#fn-options {
padding: 96px 0;
background: var(--dark2);
}

.fn-options-inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}

.fn-options-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 0;
}

.fn-option-card {
background: var(--dark3);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius);
padding: 36px 28px;
transition: border-color 0.25s, transform 0.25s;
position: relative;
overflow: hidden;
}
.fn-option-card:hover {
border-color: rgba(245,194,0,0.3);
transform: translateY(-3px);
}
.fn-option-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s;
}
.fn-option-card:hover::before { transform: scaleX(1); }

.fn-option-icon {
width: 52px;
height: 52px;
background: rgba(245,194,0,0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: 20px;
}

.fn-option-title {
font-family: var(--font-display);
font-size: 21px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--white);
margin-bottom: 10px;
}

.fn-option-text {
font-size: 14px;
color: var(--gray);
line-height: 1.7;
}

/* ── Pre-qual form section ─────────────────────────────── */
#fn-prequal {
padding: 96px 0;
background: var(--black);
position: relative;
overflow: hidden;
}

.fn-prequal-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 60% at 20% 50%, rgba(45,125,47,0.06) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 80% 30%, rgba(245,194,0,0.04) 0%, transparent 60%);
}

.fn-prequal-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}

.fn-prequal-info {}

.fn-prequal-promise {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 18px;
}

.fn-promise-item {
display: flex;
align-items: flex-start;
gap: 14px;
}

.fn-promise-dot {
width: 36px;
height: 36px;
background: rgba(245,194,0,0.1);
border: 1px solid rgba(245,194,0,0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
margin-top: 2px;
}

.fn-promise-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--white);
margin-bottom: 3px;
}

.fn-promise-text {
font-size: 13px;
color: var(--gray);
line-height: 1.6;
}

/* The form card */
.fn-form-card {
background: var(--dark2);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}

.fn-form-header {
background: var(--gs-green);
padding: 24px 32px;
display: flex;
align-items: center;
gap: 16px;
}

.fn-form-header-gs {
background: #fff;
border-radius: 6px;
padding: 6px 14px;
display: flex;
align-items: center;
}

.fn-form-header-gs svg { width: 90px; height: auto; }

.fn-form-header-text {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
}

.fn-form-body { padding: 32px; }

.fn-form-title {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--white);
margin-bottom: 6px;
}

.fn-form-subtitle {
font-size: 14px;
color: var(--gray);
margin-bottom: 28px;
line-height: 1.6;
}

.fn-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}

.fn-form-group {
display: flex;
flex-direction: column;
gap: 7px;
margin-bottom: 14px;
}

.fn-form-group label {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gray);
}

.fn-form-group input,
.fn-form-group select {
background: var(--dark3);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 4px;
padding: 12px 14px;
font-family: var(--font-body);
font-size: 15px;
color: var(--white);
width: 100%;
outline: none;
transition: border-color 0.2s;
-webkit-appearance: none;
appearance: none;
}
.fn-form-group input:focus,
.fn-form-group select:focus { border-color: var(--gs-green); }

.fn-form-group select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
cursor: pointer;
}
.fn-form-group select option { background: var(--dark3); color: var(--white); }

.fn-form-submit {
width: 100%;
padding: 16px;
background: var(--gs-green);
color: #fff;
border: none;
border-radius: var(--radius);
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
margin-top: 6px;
}
.fn-form-submit:hover {
background: var(--gs-green-light);
transform: translateY(-2px);
}

.fn-form-note {
text-align: center;
font-size: 12px;
color: var(--gray);
margin-top: 12px;
line-height: 1.6;
}

.fn-form-note a {
color: var(--gold);
text-decoration: underline;
text-underline-offset: 2px;
}

.fn-form-note a:hover {
color: var(--white);
}

.fn-form-timer {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(45,125,47,0.1);
border: 1px solid rgba(45,125,47,0.25);
border-radius: 4px;
padding: 10px 16px;
margin-top: 14px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #5cb85c;
}

/* Success state */
.fn-form-success {
display: none;
text-align: center;
padding: 32px 24px;
}
.fn-form-success.fn-visible { display: block; }
.fn-success-icon { font-size: 48px; margin-bottom: 14px; }
.fn-success-title {
font-family: var(--font-display);
font-size: 26px;
font-weight: 900;
text-transform: uppercase;
color: #5cb85c;
margin-bottom: 10px;
}
.fn-success-text { font-size: 15px; color: var(--gray-light); line-height: 1.7; }
.fn-success-text strong { color: var(--gold); }

/* ── GreenSky banner strip ─────────────────────────────── */
#fn-banner {
background: linear-gradient(135deg, #1e5c20 0%, #2D7D2F 50%, #3a9e3c 100%);
padding: 48px 0;
position: relative;
overflow: hidden;
}

.fn-banner-bg {
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg, transparent, transparent 24px,
rgba(255,255,255,0.03) 24px, rgba(255,255,255,0.03) 48px
);
}

.fn-banner-inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}

.fn-banner-left {
display: flex;
align-items: center;
gap: 24px;
}

.fn-banner-logo-box {
background: #fff;
border-radius: 8px;
padding: 10px 18px;
display: flex;
align-items: center;
}

.fn-banner-logo-box svg { width: 110px; height: auto; }

.fn-banner-text {
font-family: var(--font-display);
font-size: clamp(20px, 3vw, 28px);
font-weight: 800;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
}

.fn-banner-sub {
font-size: 14px;
color: rgba(255,255,255,0.75);
margin-top: 4px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
font-family: var(--font-body);
}

.fn-banner-cta {
display: inline-block;
background: #fff;
color: var(--gs-green-dark);
font-family: var(--font-display);
font-size: 16px;
font-weight: 900;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 14px 32px;
border-radius: 6px;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
white-space: nowrap;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.fn-banner-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0,0,0,0.3);
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
.fn-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.fn-hero-partner { max-width: 480px; }
.fn-steps { grid-template-columns: repeat(2, 1fr); }
.fn-step:nth-child(2) .fn-step-arrow { display: none; }
.fn-options-grid { grid-template-columns: repeat(2, 1fr); }
.fn-prequal-inner { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
.fn-hero-inner { padding: 52px 24px 64px; }
.fn-steps { grid-template-columns: 1fr; }
.fn-step .fn-step-arrow { display: none; }
.fn-options-grid { grid-template-columns: 1fr; }
.fn-form-row { grid-template-columns: 1fr; }
.fn-form-body { padding: 24px 20px; }
.fn-form-header { padding: 18px 20px; }
.fn-trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); width: 50%; }
.fn-trust-item:nth-child(3), .fn-trust-item:nth-child(4) { border-bottom: none; }
.fn-banner-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
.fn-trust-item { width: 100%; }
.fn-hero-badges { flex-direction: column; }
}

/* CSP-safe utility classes (replaces inline styles) */
.fn-hero-cta-btn { font-size: 17px; padding: 16px 36px; }
.fn-gs-logo--banner { width: 110px; height: auto; }
.fn-gs-logo--form { width: 90px; height: auto; }
.fn-prequal-lead { font-size: 16px; color: var(--gray-light); line-height: 1.75; margin-bottom: 8px; }
.fn-prequal-lead strong { color: var(--gold); }
.fn-success-link { color: var(--gold); }
.as-footer-meta { color: var(--gray); font-size: 14px; margin-top: 8px; }