/* ============================================================
   RESET
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  /* Colors */
  --color-navy: #101828;
  --color-navy-soft: #1D2939;
  --color-accent: #3D5AFE;
  --color-accent-hover: #2E44D1;
  --color-accent-soft: #EBEEFF;
  --color-bg: #F4F5FA;
  --color-nav-text: #2F9E4F;
  --color-nav-text-hover: #24803D;
  --color-nav-soft: #E3F5E8;
  --color-surface: #FFFFFF;
  --color-border: #E3E3DF;
  --color-text: #16181D;
  --color-text-muted: #63676F;
  --color-danger: #B3261E;
  --color-danger-soft: #FBEDEC;

  /* Typography */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-xxl: 2.75rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 160px;

  /* Radius & shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 20px 48px rgba(16, 24, 40, 0.16);

  /* Layout */
  --content-width: 1120px;
  --transition-fast: 150ms ease;
  --transition-med: 250ms ease;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  color: var(--color-navy);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p { margin: 0; }

a { color: inherit; }

.section-heading {
  font-size: var(--fs-xl);
  text-align: center;
  margin-bottom: var(--space-7);
}

/* Shared max-width content wrapper used across sections */
#loan-info,
#loan-details,
#why-choose,
#faq,
#disclosure,
.footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

/* ============================================================
   HERO START LINK (plain text, not a button -- Start Progress
   already lives in the nav, this just anchors down to the form)
   ============================================================ */
.hero-start-link {
  color: var(--color-nav-text);
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-start-link:hover { color: var(--color-nav-text-hover); }

/* ============================================================
   HEADER
   ============================================================ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo-text {
  display: flex;
  align-items: center;
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--color-nav-text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* Applied automatically by siteConfig.js when SITE.logo is set --
   sized to sit comfortably in the 72px header without code changes. */
.logo-image {
  height: 36px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-link {
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-nav-text);
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

.nav-link:hover { color: var(--color-nav-text-hover); }

/* ============================================================
   HERO + LOAN FORM SHARED BACKGROUND
   One continuous background image behind both #hero and
   #loan-form-section, with a soft light wash over it (matching the
   page's own background color) so form fields, headings, and body
   text keep the same contrast/readability they had before.
   ============================================================ */
.hero-form-bg {
  background-image:
    linear-gradient(rgba(244, 245, 250, 0.78), rgba(244, 245, 250, 0.78)),
    url('Backgroundhh.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Desktop only: the wrapper spans the full page width, but the photo
   is close to square. Left at "cover" full-bleed, a wide window
   stretches it so much horizontally that only a sliver of the top
   remains visible vertically -- cropping out faces entirely on large
   screens. Capping the photo itself at the site's normal content
   width (matching every other section) keeps the crop ratio constant
   regardless of screen width, so faces and shoulders stay in frame.
   The light-wash gradient layer still covers the full width behind it. */
@media (min-width: 900px) {
  .hero-form-bg {
    background-size: cover, min(1120px, 100%) auto;
    background-position: center top, center top;
  }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
#hero {
  padding: 38px 0 32px; /* top reduced 60% from var(--space-9); bottom reduced 50% from var(--space-8) (64px) */
  text-align: center;
}

.hero-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.hero-headline {
  font-size: var(--fs-xxl);
  max-width: 780px;
}

.hero-subheadline {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  max-width: 620px;
}

.step-heading {
  font-size: var(--fs-xl);
  color: var(--color-nav-text);
  text-align: center;
  margin-bottom: var(--space-2);
  white-space: nowrap;
}

.step-subheading {
  font-size: var(--fs-md);
  color: var(--color-nav-text);
  text-align: center;
  margin-bottom: var(--space-6);
}

/* ============================================================
   LOAN FORM SECTION
   Steps render directly on the page background -- no outer card,
   only the individual option cards carry their own surface/shadow.
   ============================================================ */
#loan-form-section {
  /* top padding reduced 60% from var(--space-6) (32px); bottom padding kept
     large so "How It Works" stays below the fold on both mobile and
     desktop until the user actually scrolls; side padding lives on
     .form-container so edges match the header/hero */
  padding: 13px 0 var(--space-10);
}

.form-container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-margin-top: 88px; /* keeps the anchor target clear of the sticky header */
}

/* Bordered progress bar with the fill portion carrying an inline label */
.form-progress {
  width: 100%;
  max-width: 460px;
  margin: 0 auto var(--space-7);
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
}

.form-progress-fill {
  height: 100%;
  width: 0%;
  min-width: fit-content;
  background: var(--color-accent-soft);
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  white-space: nowrap;
  transition: width var(--transition-med);
}

.form-progress-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-accent-hover);
}

.form-steps-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Selection cards (e.g. loan amount step): 5 columns, edges aligned with
   the header/hero content width. Switches to a centered wrap (3 over 2)
   on mobile via the responsive rule below. */
.card-options {
  display: grid;
  grid-template-columns: repeat(var(--card-cols, 5), 1fr);
  gap: var(--space-4);
  width: 100%;
}

.option-card {
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-nav-text);
  color: #FFFFFF;
  font-size: var(--fs-md);
  font-weight: 700;
  padding: 17px var(--space-4); /* vertical padding reduced 30% from var(--space-5) (24px) */
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.option-card:hover {
  background: var(--color-nav-text-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ============================================================
   TEXT / COMBO FIELD STEPS
   ============================================================ */
.field-group {
  width: 100%;
  max-width: 420px;
  margin: 0 auto var(--space-4);
  text-align: left;
}

.field-group label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.text-input,
.select-input {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

.text-input:focus,
.select-input:focus {
  outline: 2px solid var(--color-nav-text);
  outline-offset: 1px;
}

.text-input.has-error,
.select-input.has-error {
  border-color: var(--color-danger);
}

.field-error {
  display: block;
  color: var(--color-danger);
  font-size: var(--fs-xs);
  margin-top: var(--space-2);
  min-height: 1em;
}

.field-hint {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  margin-top: var(--space-2);
}

/* Multiple fields sharing one step (e.g. Basic Information, Banking).
   Mobile-first: fields stay side by side in a row even on small phones
   (compact padding/type) so the row layout actually saves the vertical
   space it's meant to on the devices that need it most; larger screens
   get roomier padding and gaps via the min-width rule further down. */
.combo-fields {
  display: grid;
  grid-template-columns: repeat(var(--combo-cols, 2), 1fr);
  gap: var(--space-2);
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.combo-fields .field-group {
  max-width: none;
  margin-bottom: 0;
}

.combo-fields .field-group label {
  font-size: var(--fs-xs);
  margin-bottom: var(--space-1);
}

.combo-fields .text-input,
.combo-fields .select-input {
  font-size: var(--fs-sm);
  padding: var(--space-2) var(--space-3);
}

@media (min-width: 480px) {
  .combo-fields { gap: var(--space-4); }
  .combo-fields .field-group label { font-size: var(--fs-sm); }
  .combo-fields .text-input,
  .combo-fields .select-input { font-size: var(--fs-md); padding: var(--space-3) var(--space-4); }
}

/* Generic styled note under a question's heading/subheading (works for
   any step type -- cards, fields, or consent). Used for short helper
   descriptions, e.g. the Banking Information routing/account guide. */
.step-hint {
  width: 100%;
  max-width: 520px;
  margin: 0 auto var(--space-4);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Continue button, shown under text/combo steps */
.form-actions {
  width: 100%;
  max-width: 420px;
  margin: var(--space-2) auto 0;
  display: flex;
  justify-content: center;
}

.btn-continue {
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-nav-text);
  color: #FFFFFF;
  font-size: var(--fs-md);
  font-weight: 700;
  padding: var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.btn-continue:hover { background: var(--color-nav-text-hover); }

.btn-continue:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Back button, sits at the bottom of the form section from step 2 onward */
.form-back-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

.form-back-container[hidden] { display: none; }

.form-back-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
}

.form-back-btn:hover { color: var(--color-nav-text); }

/* Consent + submit step */
.consent-certification {
  width: 100%;
  max-width: 420px;
  margin: 0 auto var(--space-5);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: left;
}

.consent-row {
  width: 100%;
  max-width: 420px;
  margin: 0 auto var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
}

.consent-row input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-nav-text);
  flex-shrink: 0;
}

.consent-row label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.inline-link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--color-nav-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.inline-link-btn:hover { color: var(--color-nav-text-hover); }

/* Processing / confirmation state screens */
.form-state-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
}

.form-home-btn {
  width: auto;
  margin-top: var(--space-3);
  padding-left: var(--space-7);
  padding-right: var(--space-7);
}

.form-state-screen[hidden] { display: none; }

.form-state-title {
  font-size: var(--fs-lg);
  font-weight: 650;
  color: var(--color-navy);
}

.form-state-text {
  color: var(--color-text-muted);
  max-width: 400px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-accent-soft);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--space-2);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Persistent SSL security note -- always visible, every form step,
   never hidden by focus mode (lives inside .form-container itself) */
.ssl-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  text-align: center;
}

.ssl-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* ============================================================
   LOAN INFO SECTION
   ============================================================ */
#loan-info {
  padding: var(--space-9) 0 var(--space-6);
}

/* Thin, wide-tracked, modern treatment -- deliberately not bold */
#loan-info .section-heading {
  font-weight: 300;
  letter-spacing: 0.06em;
}

/* No card chrome -- steps sit directly on the page background */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.info-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.info-icon {
  width: 48px;
  height: 48px;
  color: var(--color-nav-text);
  margin-bottom: var(--space-4);
}

.info-icon svg {
  width: 100%;
  height: 100%;
}

.info-step-title {
  font-size: var(--fs-md);
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.info-step-text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  max-width: 320px;
}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */
.section-divider {
  max-width: var(--content-width);
  width: calc(100% - (var(--space-5) * 2));
  height: 1px;
  margin: 0 auto;
  background: var(--color-nav-text);
  opacity: 0.35;
}

/* ============================================================
   LOAN DETAILS SECTION (amounts, APR, repayment, etc.)
   ============================================================ */
#loan-details {
  padding: var(--space-7) 0 var(--space-9);
  position: relative;
  background-image:
    radial-gradient(circle at 12% 15%, var(--color-nav-soft) 0%, transparent 42%),
    radial-gradient(circle at 88% 30%, var(--color-accent-soft) 0%, transparent 38%),
    radial-gradient(circle at 25% 90%, var(--color-accent-soft) 0%, transparent 35%);
  background-repeat: no-repeat;
}

/* Bolder than "How It Works" but still light -- modern, green, not heavy */
#loan-details .section-heading {
  position: relative;
  z-index: 1;
  font-weight: 500;
  color: var(--color-nav-text);
  letter-spacing: 0.02em;
}

.loan-details-text {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
  text-align: left;
}

.loan-details-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.loan-details-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-navy);
}

/* ============================================================
   WHY CHOOSE US SECTION
   ============================================================ */
#why-choose {
  padding: var(--space-9) 0;
}

.why-choose-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-8);
  column-gap: var(--space-7);
}

.why-choose-grid .info-step {
  flex: 1 1 260px;
  max-width: 320px;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
#faq {
  padding: 0 0 var(--space-4);
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--color-navy);
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--color-nav-text);
  font-weight: 700;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-3);
}

@media (max-width: 599px) {
  .faq-list {
    padding: 0 var(--space-3);
  }
}

/* ============================================================
   CTA SECTION
   ============================================================ */
#cta {
  position: relative;
  overflow: hidden;
  max-width: var(--content-width);
  margin: 0 auto;
  background-image:
    radial-gradient(circle at 8% 25%, rgba(47, 158, 79, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 92% 20%, rgba(47, 158, 79, 0.24) 0%, transparent 42%),
    radial-gradient(circle at 50% 110%, rgba(47, 158, 79, 0.14) 0%, transparent 55%),
    linear-gradient(90deg, var(--color-bg) 0%, var(--color-nav-soft) 18%, var(--color-nav-soft) 82%, var(--color-bg) 100%);
  padding: var(--space-4) 0;
  text-align: center;
}

#cta .section-heading {
  margin-bottom: 0;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.cta-text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

@media (max-width: 599px) {
  .cta-text {
    font-size: var(--fs-xs);
    line-height: 1.5;
  }
}

.cta-button {
  display: inline-block;
  background: var(--color-nav-text);
  color: #FFFFFF;
  font-size: var(--fs-md);
  font-weight: 700;
  text-decoration: none;
  padding: var(--space-4) var(--space-8);
  border-radius: 0;
  transition: background var(--transition-fast);
}

.cta-button:hover {
  background: var(--color-nav-text-hover);
}

/* ============================================================
   DISCLOSURE SECTION
   ============================================================ */
#disclosure {
  padding: var(--space-8) 0 var(--space-9);
}

.disclosure-text {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: 820px;
  margin: 0 auto;
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
  padding: var(--space-7) 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-6);
}

.footer-disclaimer {
  width: 100%;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
  margin-top: var(--space-5);
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
}

.footer-link {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--color-nav-text);
}

.footer-copyright {
  width: 100%;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  text-align: center;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 24, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.modal-overlay[hidden] { display: none; }

.modal-dialog {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  padding: var(--space-7) var(--space-6) var(--space-6);
}

.modal-title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-4);
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.modal-body h3 {
  font-size: var(--fs-base);
  color: var(--color-navy);
  margin-top: var(--space-2);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
}

.modal-close:hover { color: var(--color-text); }

/* ============================================================
   FOCUS MODE
   Once the applicant moves past the first question, every other
   page section is hidden so only the form is visible -- no
   scrolling distractions while filling out the remaining steps.
   Restored when they return Home from the confirmation screen.
   ============================================================ */
body.focus-mode #hero,
body.focus-mode #loan-info,
body.focus-mode .section-divider,
body.focus-mode #loan-details,
body.focus-mode #why-choose,
body.focus-mode #faq,
body.focus-mode #cta,
body.focus-mode #disclosure,
body.focus-mode #site-footer {
  display: none;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 900px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* Loan amount cards: 3 across, remaining 2 centered on the row below */
@media (max-width: 700px) {
  .card-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }
  .option-card {
    flex: 0 1 var(--mobile-card-basis, 30%);
    min-width: 78px;
    padding: 14px var(--space-2);
    font-size: var(--fs-sm);
  }
}

@media (max-width: 640px) {
  .hero-headline { font-size: var(--fs-xl); }
  #hero { padding: 38px 0 16px; }
  .step-heading { font-size: 1.05rem; }
  .main-nav { gap: var(--space-4); }
  .header-inner { height: 64px; }
  .footer-inner { flex-direction: column; }
  .form-container { scroll-margin-top: 76px; } /* matches the 64px mobile header */
}