/* ============================================================
   Financing Application — financing.html
   Consumes the design tokens from style.css (:root).
   ============================================================ */

body.fin-page {
    background-color: var(--bg-light);
}

.fin-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Hero ----------
   The fixed header is `.header-container` 72px + 1px border = 73px at EVERY
   breakpoint (it does NOT shrink on mobile). The band starts at the very top of
   the document and pads its CONTENT clear of the header, so the navy extends
   BEHIND the header rather than beginning below it — the same pattern the
   listings brand-marquee band uses. Keep the 73px in the padding, never a
   margin, or the navy stops at the header's bottom edge and leaves a white gap
   above it. */
.fin-hero {
    background: linear-gradient(160deg, #0f2942 0%, #0a1118 100%);
    color: var(--text-light);
    padding: calc(73px + 52px) 24px 96px;
    text-align: center;
}
.fin-hero h1 {
    font-family: var(--font-headings);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}
.fin-hero p.fin-hero-sub {
    color: var(--text-light-muted);
    max-width: 640px;
    margin: 0 auto 24px;
    font-size: 1.05rem;
}
.fin-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}
.fin-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 0.82rem;
    color: #dbe7f0;
}
.fin-chip svg { flex-shrink: 0; }
.fin-phone-escape {
    margin-top: 18px;
    font-size: 0.92rem;
    color: var(--text-light-muted);
}
.fin-phone-escape a {
    color: var(--accent-gold);
    font-weight: 600;
    white-space: nowrap;
}
.fin-phone-escape a:hover { text-decoration: underline; }

/* ---------- Page shell ---------- */
.fin-wrap {
    max-width: 940px;
    margin: -64px auto 0;
    padding: 0 16px 96px;
}

/* ---------- Cards ---------- */
/* 73px fixed header (72px + 1px border, at EVERY breakpoint) + 14px breathing
   room. financing.js does its own scroll maths with the same number; this is
   the safety net for any browser-native scroll (fragment links, focus). */
.fin-card, .fin-section, .fin-thanks {
    scroll-margin-top: 87px;
}

.fin-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 28px;
    margin-bottom: 20px;
}
.fin-card > h2, .fin-card > .fin-card-head h2 {
    font-family: var(--font-headings);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-dark);
    letter-spacing: -0.01em;
}
.fin-card-head { margin-bottom: 18px; }
.fin-card-head p {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-top: 6px;
}
.fin-step-eyebrow {
    display: block;
    font-family: var(--font-headings);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-link);
    margin-bottom: 6px;
}

/* ---------- Estimator ---------- */
.fin-estimator { padding-bottom: 24px; }

.fin-est-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 28px;
    align-items: start;
}
@media (max-width: 860px) {
    .fin-est-grid { grid-template-columns: minmax(0, 1fr); }
}

.fin-est-block { margin-bottom: 20px; }
.fin-est-block:last-child { margin-bottom: 0; }
.fin-est-block > .fin-label { margin-bottom: 8px; }

.fin-btn-group {
    display: grid;
    gap: 8px;
}
.fin-btn-group.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-btn-group.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 480px) {
    .fin-btn-group.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fin-opt {
    border: 1.5px solid var(--border-color);
    background: var(--bg-white);
    border-radius: var(--radius-sm);
    padding: 10px 6px;
    font-family: var(--font-headings);
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-dark);
    line-height: 1.25;
    transition: var(--transition-fast);
    min-height: 44px;
}
.fin-opt small {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.fin-opt:hover { border-color: var(--primary-light); }
.fin-opt.selected {
    border-color: var(--primary-light);
    background: rgba(var(--primary-light-rgb), 0.08);
    color: var(--primary-dark);
    box-shadow: inset 0 0 0 1px var(--primary-light);
}
.fin-opt.selected small { color: var(--primary-dark); }
/* Focus ring comes from style.css's global :focus-visible rule (solid blue,
   2px offset) — the old 50%-alpha re-add here was weaker and redundant. */

.fin-down-note {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Results panel */
.fin-result {
    background: var(--primary-dark);
    color: var(--text-light);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
}
.fin-result .fin-result-amount {
    font-family: var(--font-headings);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}
.fin-result .fin-result-amount span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-light-muted);
    letter-spacing: 0;
}
.fin-result .fin-result-sub {
    color: var(--text-light-muted);
    font-size: 0.9rem;
    margin-top: 8px;
}
/* Tier status readout.
   NOT a chip or pill — the class name is legacy (financing.js writes
   "fin-status-pill " + tier.cls, so it must not be renamed). It used to be a
   solid filled rounded rectangle, which sat inches from the real gold/white
   buttons and read as tappable. It is now a status dot + quiet label above a
   hairline: no fill, no border, no radius, no padding block, so there is
   nothing left that suggests a hit target. Tier colour moved from the
   background to the dot and the text. */
.fin-status-pill {
    display: inline-flex;
    /* Baseline, NOT center. The label is uppercase, so it has no descenders and
       its optical centre sits well above the line box's geometric centre —
       centring the dot on the line box parked it ~4.5px too low. As a text-less
       flex item the dot baseline-aligns on its bottom edge, which drops it
       exactly onto the label's baseline; sizing it to the cap height (below)
       then makes it span the cap band, so the two centres coincide. This also
       keeps the dot on the FIRST line if the label ever wraps. */
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    min-width: 190px;
    background: none;
    border-radius: 0;
    font-family: var(--font-headings);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.35;
    cursor: default;
    color: #fff;
}
.fin-status-pill::before {
    content: '';
    flex: 0 0 auto;
    /* 9px == the cap height of the 0.78rem Outfit label (measured 8.91px), so
       the dot fills the cap band exactly. Resize together with font-size. */
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    /* Soft halo reads as a live indicator rather than a bullet glyph. */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.09);
}
/* Shades are lightened from the reference doc's values (#5da423 / #2ba6cb /
   #c60f13), which were picked for a white background and fail AA on this navy
   panel. Hue semantics are unchanged: green / green / blue / red. */
.fin-status-pill.tier-excellent,
.fin-status-pill.tier-good { color: #7ed957; }
.fin-status-pill.tier-fair  { color: #58c7f0; }
.fin-status-pill.tier-poor  { color: #ff8a80; }

.fin-apr-note {
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--text-light-muted);
    line-height: 1.5;
}

.fin-disclosure {
    margin-top: 18px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}

/* Advisory + acknowledgment gate */
.fin-advisory {
    margin-top: 20px;
    border: 1.5px solid #f0b429;
    background: #fff8e6;
    border-radius: var(--radius-sm);
    padding: 18px;
}
.fin-advisory h3 {
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 700;
    color: #8a5b00;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fin-advisory p {
    font-size: 0.9rem;
    color: #5c4400;
    line-height: 1.6;
}
.fin-ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #5c4400;
    cursor: pointer;
}
.fin-ack input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }

.fin-est-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
/* Gate helper text: sits to the LEFT of the button it describes on the same
   row (it is first in the DOM, the button is last, a flex spacer separates
   them). At narrow widths .fin-actions wraps and the note takes a full row
   above the button — it must never be hidden, it is the button's description. */
.fin-locked-note {
    font-size: 0.85rem;
    color: #b3261e;
    font-weight: 600;
    line-height: 1.4;
    flex: 0 1 auto;
    min-width: 0;
}

/* ---------- Form primitives ---------- */
.fin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 640px) {
    .fin-grid { grid-template-columns: minmax(0, 1fr); }
}
.fin-field.span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .fin-field.span-2 { grid-column: auto; }
}

.fin-field { min-width: 0; }

.fin-label {
    display: block;
    font-family: var(--font-headings);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 6px;
}
.fin-label .fin-req { color: #c60f13; margin-left: 2px; }
.fin-label .fin-sublabel {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.fin-input, .fin-select, .fin-textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: max(16px, 1rem);   /* 16px minimum: iOS zooms the page on focus below it (ee.css, last section) */
    color: var(--text-dark);
    background: var(--bg-white);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    min-height: 44px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}
.fin-textarea { min-height: 88px; resize: vertical; }
.fin-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5e62' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 34px;
}
.fin-input:focus, .fin-select:focus, .fin-textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(var(--primary-light-rgb), 0.18);
}
.fin-input::placeholder, .fin-textarea::placeholder { color: #a7adb5; }
/* The one hint that is wider than its field on the narrowest phones since
   the 16px rule ("ex: Spouse, Domestic Partner, etc.", 260px at 16px; the
   field has 236px at 320, 256px at 340 and 260px at 344): up to 347px the
   hint, not the typed text, is 14.4px and fits from 320px up. */
@media (max-width: 347px) {
    .fin-input[name="application_us_relationship"]::placeholder { font-size: 0.9rem; }
}

.fin-money-wrap { position: relative; }
.fin-money-wrap .fin-money-sign {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.95rem;
    pointer-events: none;
}
.fin-money-wrap .fin-input { padding-left: 26px; }

.fin-secure-wrap { position: relative; }
.fin-secure-wrap .fin-input { padding-right: 62px; }
.fin-reveal {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    font-family: var(--font-headings);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-link);
    padding: 8px;
    min-height: 32px;
}
.fin-reveal:hover { text-decoration: underline; }

/* Radios */
.fin-radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fin-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    min-height: 44px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    background: var(--bg-white);
    transition: var(--transition-fast);
}
.fin-radio input { width: 17px; height: 17px; accent-color: var(--primary-light); }
.fin-radio:has(input:checked) {
    border-color: var(--primary-light);
    background: rgba(var(--primary-light-rgb), 0.08);
    color: var(--primary-dark);
}
.fin-radio:focus-within { box-shadow: 0 0 0 3px rgba(var(--primary-light-rgb), 0.18); }

.fin-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-dark);
    cursor: pointer;
    padding: 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-light);
}
.fin-checkbox input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--primary-light); }
.fin-checkbox:has(input:checked) { border-color: var(--primary-light); background: rgba(var(--primary-light-rgb), 0.06); }

/* Errors */
.fin-error {
    display: none;
    margin-top: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b3261e;
}
.fin-field.has-error .fin-error,
.fin-fieldset.has-error > .fin-error { display: block; }
.fin-field.has-error .fin-input,
.fin-field.has-error .fin-select,
.fin-field.has-error .fin-textarea {
    border-color: #c60f13;
    background: #fff6f6;
}
.fin-field.has-error .fin-checkbox { border-color: #c60f13; background: #fff6f6; }

.fin-error-summary {
    display: none;
    border: 1.5px solid #c60f13;
    background: #fff6f6;
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin-bottom: 20px;
}
.fin-error-summary.is-visible { display: block; }
.fin-error-summary h3 {
    font-family: var(--font-headings);
    font-size: 0.98rem;
    color: #b3261e;
    margin-bottom: 8px;
}
.fin-error-summary ul { margin: 0; padding-left: 20px; }
.fin-error-summary li { font-size: 0.88rem; margin-bottom: 4px; }
.fin-error-summary a { color: #b3261e; text-decoration: underline; font-weight: 600; }

/* Sub-fieldsets */
.fin-fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.fin-fieldset:last-child { margin-bottom: 0; }
.fin-fieldset > legend {
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-dark);
    padding: 0;
    margin-bottom: 4px;
}
.fin-fieldset > .fin-legend-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.fin-fieldset > .fin-grid { margin-top: 12px; }

.fin-subcard {
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: #fbfcfd;
    padding: 18px;
    margin-top: 16px;
}

.fin-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 10px;
}

/* Conditional blocks */
[data-conditional][hidden] { display: none !important; }

/* Security messaging */
.fin-secure-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #eef7f0;
    border: 1px solid #bfe0c8;
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.fin-secure-banner svg { flex-shrink: 0; color: #2e7d32; margin-top: 1px; }
.fin-secure-banner p { font-size: 0.85rem; color: #1f4d24; line-height: 1.55; }

/* Legal copy */
.fin-legal {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.65;
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    background: #fbfcfd;
    margin-bottom: 16px;
}
.fin-legal p + p { margin-top: 10px; }
.fin-legal a { color: var(--primary-link); text-decoration: underline; }

/* ---------- Actions ---------- */
.fin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
}
.fin-actions .fin-spacer { flex: 1 1 auto; }
.fin-btn-back {
    border: 1.5px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-white);
}
.fin-btn-back:hover { border-color: var(--primary-dark); color: var(--primary-dark); }
.fin-actions .btn { flex-shrink: 0; }
@media (max-width: 520px) {
    .fin-actions .btn { width: 100%; padding-left: 16px; padding-right: 16px; }
    .fin-actions .fin-spacer { display: none; }
    /* Note stacks above its full-width button rather than being squeezed. */
    .fin-actions .fin-locked-note { flex: 1 1 100%; }
}

/* ---------- Progressive (Variant C) ---------- */
.fin-card.is-locked {
    opacity: 0.55;
    background: #f4f6f8;
    box-shadow: none;
}
.fin-card.is-locked .fin-section-body { display: none; }
.fin-lock-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}
.fin-lock-row svg { flex-shrink: 0; }
.fin-complete-badge {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2e7d32;
    background: #eef7f0;
    border: 1px solid #bfe0c8;
    border-radius: 999px;
    padding: 4px 10px;
}
.fin-card.is-complete .fin-complete-badge { display: inline-flex; }
.fin-card-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- Success ---------- */
.fin-thanks { text-align: center; padding: 44px 28px; }
.fin-thanks .fin-check {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eef7f0;
    border: 2px solid #2e7d32;
    display: flex; align-items: center; justify-content: center;
    color: #2e7d32;
}
.fin-thanks h2 {
    font-family: var(--font-headings);
    font-size: 1.75rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
}
.fin-thanks > p { color: var(--text-muted); max-width: 560px; margin: 0 auto 22px; }
.fin-nextsteps {
    text-align: left;
    max-width: 520px;
    margin: 0 auto 24px;
    list-style: none;
    padding: 0;
}
.fin-nextsteps li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.92rem;
}
.fin-nextsteps li:last-child { border-bottom: 0; }
.fin-nextsteps .fin-step-num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-light);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex; align-items: center; justify-content: center;
}
.fin-thanks-recap {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    max-width: 520px;
    margin: 0 auto 24px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.fin-thanks-recap strong { color: var(--primary-dark); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .fin-opt, .fin-input, .fin-select, .fin-textarea, .fin-radio { transition: none; }
    .fin-card, .fin-progress-fill { transition: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    /* ---- Compact hero ----
       At full size this hero ate 682px — 84% of a 375x812 viewport — leaving
       the estimator card almost entirely below the fold. This block is purely
       rhythm, type scale and a 2-up chip grid: NO copy is changed and all four
       trust items plus the phone line survive. Header clearance is still the
       canonical 73px; only the N in calc(73px + N) shrank. */
    .fin-hero { padding: calc(73px + 20px) 20px 40px; }
    .fin-hero h1 { font-size: 1.6rem; line-height: 1.15; margin-bottom: 8px; }
    .fin-hero p.fin-hero-sub { font-size: 0.9rem; line-height: 1.45; margin-bottom: 18px; }

    /* Four chips stacked one-per-row (178px). As a 2-up grid of borderless
       icon+text items they read as a dense checklist in roughly a third of
       that, which is why the pill shell is dropped at this breakpoint. */
    .fin-trust-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px 12px;
        margin-bottom: 0;
        text-align: left;
    }
    .fin-chip {
        background: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        gap: 7px;
        font-size: 0.76rem;
        line-height: 1.3;
        align-items: flex-start;
        justify-content: flex-start;
        color: #cbd8e4;
    }
    .fin-chip svg { margin-top: 2px; }
    .fin-phone-escape { margin-top: 16px; font-size: 0.84rem; line-height: 1.45; }
    /* The card still overlaps the navy band, but the desktop -64px pull would
       now cover the phone line — the hero's bottom padding shrank with the rest
       of the compaction. Clearance = hero padding-bottom (40) - this pull (24). */
    .fin-wrap { padding-left: 12px; padding-right: 12px; margin-top: -24px; }
    .fin-card { padding: 20px 16px; }
    .fin-result .fin-result-amount { font-size: 2.5rem; }
}