/* ============================================================
   Financing hero — two columns: pitch left, estimator right.
   Namespaced under .banner.
   ============================================================ */
 
.banner {
  --bn-navy:     #32475d;
  --bn-teal:     #56b0cb;
  --bn-body:     #4c5a63;
  --bn-gold:     #ddb245;
  --bn-gold-hi:  #cd9f3a;
  --bn-border:   #dbe0e5;
  --bn-bg:       #ffffff;
 
  background: var(--bn-bg);
  padding: 72px 20px;
  -webkit-font-smoothing: antialiased;
}
 
.banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 64px;
  max-width: 1120px;   /* Figma: 160px gutters on a 1440 frame */
  margin-inline: auto;
}
 
/* --- Left column --------------------------------------------- */
 
.banner__eyebrow {
  margin: 0 0 16px;
  color: var(--bn-teal);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  line-height: 1.4;
}
 
.banner__title {
  margin: 0 0 24px;
  max-width: 13ch;
  color: var(--bn-navy);
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.115;   /* Figma: 58px on 52px */
}
 
.banner__title em {
  color: var(--bn-teal);
  font-style: normal;
}
 
.banner__copy {
  margin: 0 0 32px;
  max-width: 590px;
  color: var(--bn-body);
  font-size: 19px;
  line-height: 30px;
}
 
/* --- Buttons -------------------------------------------------- */
 
.banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 26px;
}
 
.banner__btn {
  display: inline-block;
  padding: 18px 32px;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}
 
.banner__btn--primary {
  background: var(--bn-gold);
  border: 2px solid var(--bn-gold);
  color: #fff;
}
 
.banner__btn--primary:hover,
.banner__btn--primary:focus-visible {
  background: var(--bn-gold-hi);
  border-color: var(--bn-gold-hi);
  color: #fff;
}
 
.banner__btn--secondary {
  background: var(--bn-bg);
  border: 2px solid var(--bn-border);
  color: var(--bn-navy);
}
 
.banner__btn--secondary:hover,
.banner__btn--secondary:focus-visible {
  border-color: var(--bn-teal);
  color: var(--bn-navy);
}
 
.banner__btn:focus-visible {
  outline: 2px solid var(--bn-navy);
  outline-offset: 3px;
}
 
.banner__btn:active { transform: translateY(1px); }
 
/* --- Assurance line ------------------------------------------- */
 
.banner__assurance {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--bn-navy);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.banner__assurance svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--bn-teal);
}
 
/* --- Right column --------------------------------------------- */
 
.banner__form { margin-left: auto; }
 
/* --- Motion / responsive -------------------------------------- */
 
@media (prefers-reduced-motion: reduce) {
  .banner__btn { transition: none; }
  .banner__btn:active { transform: none; }
}
 
/* Mobile + tablet overrides for every section live in one block at the
   end of this file, keyed off the Figma mobile frame (390px). */

/* ============================================================
   Banner estimator card
   Scoped under .banner__form so nothing leaks into the theme.
   ============================================================ */
 
.banner__form {
  --est-navy:    #32475d;  /* headings + figures */
  --est-body:    #4c5a63;  /* description copy */
  --est-teal:    #56b0cb;  /* slider fill, active term */
  --est-gold:    #ddb245;  /* primary button */
  --est-gold-hi: #cd9f3a;
  --est-track:   #e2e7e9;  /* unfilled slider track */
  --est-border:  #e2e7e9;  /* card + button hairlines */
  --est-panel:   #eef8fb;  /* result panel */
  --est-muted:   #7a8794;  /* disclaimer */
  --est-bg:      #ffffff;
 
  /* Slider fill %, updated by JS on input. Fallback matches the
     default value (12000 across a 3000–40000 range). */
  --est-fill: 24.3%;
 
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  max-width: 452px;
  padding: 27px 29px 26px;
  background: var(--est-bg);
  border: 1px solid var(--est-border);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgb(31 43 50 / 0.12);
}
 
.banner__form *,
.banner__form *::before,
.banner__form *::after { box-sizing: border-box; }
 
/* --- Header -------------------------------------------------- */
 
.banner__form-title {
  margin: 0 0 8px;
  color: var(--est-navy);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 24px;
}

.banner__form-description {
  margin: 0;
  color: var(--est-body);
  font-size: 14px;
  line-height: 21px;
}
 
/* --- Estimator shell ----------------------------------------- */
 
.est {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
 
.est-amount {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--est-navy);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 30px;
}

.est-amount small {
  color: var(--est-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
 
/* --- Range slider --------------------------------------------
   Track is a gradient split at --est-fill, so the filled portion
   renders the same in WebKit and Firefox. Thumb is drawn per
   engine because the pseudo-elements can't be grouped.
   ------------------------------------------------------------- */
 
.est input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

/* Track */
.est input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--est-teal) 0 var(--est-fill),
    var(--est-track) var(--est-fill) 100%
  );
}
 
.est input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--est-track);
}

.est input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--est-teal);
}

/* Thumb — Figma: 28px overall, 4px teal ring on white */
.est input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin-top: -10px;               /* centres on an 8px track */
  border: 4px solid var(--est-teal);
  border-radius: 50%;
  background: var(--est-bg);
  box-shadow: 0 1px 3px rgb(36 64 92 / 0.2);
}

.est input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 4px solid var(--est-teal);
  border-radius: 50%;
  background: var(--est-bg);
  box-shadow: 0 1px 3px rgb(36 64 92 / 0.2);
}
 
.est input[type="range"]:focus-visible {
  outline: 2px solid var(--est-teal);
  outline-offset: 4px;
  border-radius: 999px;
}
 
/* --- Term buttons --------------------------------------------
   Active state keys off aria-pressed, so the ARIA attribute your
   JS already toggles is the single source of truth — no separate
   .is-active class to keep in sync.
   ------------------------------------------------------------- */
 
.est .term-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
 
.est .term-row::before {
  content: "Choose an example term";
  grid-column: 1 / -1;
  margin-bottom: -4px;
  color: var(--est-body);
  font-size: 13px;
  font-weight: 600;
}

.est .term-row button {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 8px;
  background: var(--est-bg);
  border: 1.5px solid var(--est-border);
  border-radius: 10px;
  color: var(--est-navy);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease;
}
 
.est .term-row button:hover {
  border-color: var(--est-teal);
}
 
.est .term-row button[aria-pressed="true"] {
  background: var(--est-teal);
  border-color: var(--est-teal);
  color: #fff;
}
 
.est .term-row button:focus-visible {
  outline: 2px solid var(--est-teal);
  outline-offset: 2px;
}
 
/* --- Result panel -------------------------------------------- */
 
.est .est-result {
  padding: 16px 16px 14px;
  background: var(--est-panel);
  border-radius: 10px;
  text-align: center;
}

.est .pay {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  color: var(--est-navy);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 38px;
}

.est .pay small {
  color: var(--est-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.est .cap {
  margin-top: 6px;
  color: var(--est-body);
  font-size: 12px;
  line-height: 18px;
}
 
/* --- Primary button ------------------------------------------ */
 
.est .btn-primary {
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 0 24px;
  background: var(--est-gold);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
 
.est .btn-primary:hover,
.est .btn-primary:focus-visible {
  background: var(--est-gold-hi);
  color: #fff;
}
 
.est .btn-primary:focus-visible {
  outline: 2px solid var(--est-navy);
  outline-offset: 3px;
}
 
.est .btn-primary:active { transform: translateY(1px); }
 
/* --- Disclaimer ---------------------------------------------- */
 
.est .disclaim {
  margin: 0;
  color: var(--est-muted);
  font-size: 10.5px;
  line-height: 15px;
}
 
/* --- Motion / small screens ---------------------------------- */
 
@media (prefers-reduced-motion: reduce) {
  .est .term-row button,
  .est .btn-primary { transition: none; }
  .est .btn-primary:active { transform: none; }
}
 

/* ============================================================
   3 Steps to Get Started
   Namespaced under .steps — safe to drop into a page/template.
   ============================================================ */

.steps {
  --steps-navy: #32475d; /* headings */
  --steps-accent: #ddb245; /* gold rule under the title */
  --steps-line: #56b0cb; /* circle border + connector */
  --steps-num: #56b0cb; /* numerals */
  --steps-body: #4c5a63; /* paragraph copy */
  --steps-bg: #ffffff;

  --steps-circle: 116px; /* circle diameter */
  --steps-stroke: 2px; /* border + connector weight */

  background: var(--steps-bg);
  padding: 56px 20px 64px;
  -webkit-font-smoothing: antialiased;
}

.steps__inner {
  max-width: 1080px;
  margin-inline: auto;
}

/* --- Heading ------------------------------------------------ */

.steps__title {
  margin: 0;
  text-align: center;
  color: var(--steps-navy);
  /* font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem); */
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 50px;
}

.steps__rule {
  display: block;
  width: 180px;
  height: 6px;
  margin: 20px auto 48px;
  background: var(--steps-accent);
  border-radius: 2px;
}

/* --- Layout ------------------------------------------------- */

.steps__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* no gap: the connectors span column edges */
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step {
  text-align: center;
}

/* --- Circle + connector ------------------------------------- */

.step__marker {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

/* Half-line to the left and to the right of each circle.
   Together, adjacent halves form one continuous connector. */
.step__marker::before,
.step__marker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - var(--steps-circle) / 2);
  height: var(--steps-stroke);
  background: var(--steps-line);
  transform: translateY(-50%);
}

.step__marker::before {
  left: 0;
}
.step__marker::after {
  right: 0;
}

.step:first-child .step__marker::before,
.step:last-child .step__marker::after {
  content: none;
}

.step__num {
  display: grid;
  place-items: center;
  width: var(--steps-circle);
  height: var(--steps-circle);
  border: var(--steps-stroke) solid var(--steps-line);
  border-radius: 50%;
  background: var(--steps-bg);
  color: var(--steps-num);
  background-color: #eef8fb;
  font-size: 48px;
  font-weight: 500;
  line-height: 58px;
}

/* --- Text --------------------------------------------------- */

.step__label {
  /* margin: 0 0 16px;
  padding-inline: 12px;
  color: var(--steps-navy);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4; */
  color: var(--steps-navy);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 133.333% */
}

.step__copy {
  margin: 0 auto;
  padding-inline: 12px;
  color: var(--steps-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 28px;
}

/* --- Small screens ------------------------------------------ */

/* ============================================================
   Financing options section
   Namespaced under .fin — tokens match the .steps section, so
   both can share one :root block if you'd rather hoist them.
   ============================================================ */

.fin {
  --fin-navy: #32475d; /* headings */
  --fin-teal: #56b0cb; /* eyebrow + note accent */
  --fin-accent: #ddb245; /* gold rule */
  --fin-body: #4c5a63; /* paragraph copy */
  --fin-border: #e2e7e9; /* card + note hairline */
  --fin-bg: #ffffff;

  --fin-radius: 8px;
  --fin-media: 344 / 138; /* card image aspect ratio, per Figma */

  background: var(--fin-bg);
  padding: 72px 20px;
  font-family:
    "Poppins",
    "Montserrat",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

.fin__inner {
  max-width: 1080px;
  margin-inline: auto;
}

/* --- Header ------------------------------------------------- */

.fin__eyebrow {
  /* margin: 0 0 18px;
  text-align: center;
  color: var(--fin-teal);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4; */
  color: #56b0cb;
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 1.6px;
}

.fin__title {
  max-width: 902px;
  margin: 0 auto;
  text-align: center;
  color: var(--fin-teal);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.238;   /* Figma: 52px on 42px */
}

.fin__rule {
  display: block;
  width: 220px;
  height: 5px;
  margin: 22px auto 26px;
  background: var(--fin-accent);
  border-radius: 2px;
}

.fin__intro {
  max-width: 980px;
  margin: 0 auto 44px;
  text-align: center;
  color: var(--fin-body);
  font-size: 18px;
  line-height: 28px;
}

/* --- Cards -------------------------------------------------- */

.fin__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.card {
  /* display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--fin-bg);
  border: 1px solid var(--fin-border);
  border-radius: var(--fin-radius);
  box-shadow: 0 1px 3px rgb(27 74 110 / 0.05); */
  overflow: hidden;   /* clips card__media's square-cornered img to match .card's radius */
  border-radius: 8px;
  border: 1px solid #e2e7e9;
  background: #fff;
  box-shadow: 0 8px 20px 0 rgba(31, 43, 50, 0.1);
}

.card__media {
  aspect-ratio: var(--fin-media);
  background: #eef4f7; /* holds the space before load */
}

.card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__body {
  padding: 27px 25px 28px;
}

.card__title {
  /* margin: 0 0 14px;
  color: var(--fin-navy);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35; */
  color: #32475d;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 30px; /* 136.364% */
}

.card__copy {
  /* margin: 0;
  color: var(--fin-body);
  font-size: 0.875rem;
  line-height: 1.75; */
  color: #4c5a63;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px; /* 156.25% */
}

/* --- Note --------------------------------------------------- */

.fin__note {
  margin: 0;
  padding: 20px 24px;
  background: var(--fin-bg);
  border: 1px solid var(--fin-border);
  border-left: 4px solid var(--fin-teal);
  border-radius: 4px;
  color: var(--fin-body);
  font-size: 15px;
  line-height: 1.55;
}

.fin__note b {
  color: inherit;
  font-weight: 700;
}

/* --- Small screens ------------------------------------------ */

/* ============================================================
   At a glance / stat grid
   Namespaced under .glance — tokens match the .fin and .steps
   sections, so all three can share one :root block.
   ============================================================ */

.glance {
  --glance-navy: #32475d; /* headings + stat figures */
  --glance-teal: #56b0cb; /* eyebrow */
  --glance-body: #4c5a63; /* supporting copy */
  --glance-border: #e2e7e9; /* frame + dividers */
  --glance-bg: #ffffff;

  --glance-radius: 18px;

  background: var(--glance-bg);
  padding: 70px 20px;
  -webkit-font-smoothing: antialiased;
}

.glance__inner {
  max-width: 1280px;   /* Figma: 80px gutters on a 1440 frame */
  margin-inline: auto;
}

/* --- Header ------------------------------------------------- */

.glance__eyebrow {
  /* margin: 0 0 14px;
  text-align: center;
  color: var(--glance-teal);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4; */
  color: #56b0cb;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
  letter-spacing: 3px;
  text-transform: uppercase;
}

.glance__title {
  /* margin: 0 0 34px;
  text-align: center;
  color: var(--glance-navy);
  font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25; */
  color: #32475d;
  text-align: center;
  font-size: 46px;
  font-style: normal;
  font-weight: 700;
  line-height: 58px; /* 126.087% */
}

/* --- Grid ---------------------------------------------------
   The 1px gap IS the divider: the frame's background shows
   through between cells, so there are no doubled borders and
   nothing to reset on the last row or column.
   ------------------------------------------------------------ */

.glance__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  background: var(--glance-border);
  border: 1.5px solid var(--glance-border);
  border-radius: var(--glance-radius);
}

.stat {
  padding: 42px 34px 34px;
  background: var(--glance-bg);
}

.stat__figure {
  margin: 0 0 12px;
  color: var(--glance-navy);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 40px;
}

.stat__detail {
  margin: 0;
  color: var(--glance-body);
  font-size: 1.125rem;
  line-height: 28px;
}

/* --- Small screens ------------------------------------------ */

/* ============================================================
   CTA band
   Namespaced under .cta — tokens match the other sections.
   ============================================================ */

.cta {
  --cta-bg: #56b0cb; /* band background */
  --cta-text: #ffffff;
  --cta-btn: #ddb245; /* gold button */
  --cta-btn-hover: #cd9f3a;
  --cta-btn-text: #ffffff;

  background: var(--cta-bg);
  padding: 54px 20px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

.cta__inner {
  max-width: 909px;
  margin-inline: auto;
}

.cta__title {
  max-width: 723px;
  margin: 0 auto 18px;
  color: var(--cta-text);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}

.cta__copy {
  margin: 0 0 26px;
  color: var(--cta-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
}

/* --- Button -------------------------------------------------- */

.cta__button {
  display: inline-block;
	margin-top: 18px;
  padding: 16px 28px;
  background: var(--cta-btn);
  border: 0;
  border-radius: 999px;
  color: var(--cta-btn-text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease;
}

.cta__button:hover,
.cta__button:focus-visible {
  background: var(--cta-btn-hover);
}

.cta__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.cta__button:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .cta__button {
    transition: none;
  }
  .cta__button:active {
    transform: none;
  }
}

/* --- Small screens ------------------------------------------- */

/* ============================================================
   FAQ accordion + legal disclosure
   Namespaced under .faq. Built on <details>/<summary>, so the
   open/close behaviour, keyboard support and in-page find are
   all native — no JS.
   ============================================================ */
 
.faq {
  --faq-navy:    #32475d;  /* heading + questions */
  --faq-accent:  #ddb245;  /* gold rule */
  --faq-body:    #4c5a63;  /* answers */
  --faq-icon:    #56b0cb;  /* +/- control */
  --faq-border:  #e2e2e2;  /* item dividers */
  --faq-bg:      #ffffff;
 
  background: var(--faq-bg);
  padding: 64px 20px 0;
  font-family: "Poppins", "Montserrat", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
 
.faq__inner {
  max-width: 1080px;
  margin-inline: auto;
}

/* --- Header ------------------------------------------------- */

.faq__title {
  margin: 0;
  text-align: center;
  color: var(--faq-navy);
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 48px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.faq__rule {
  display: block;
  width: min(468px, 70%);
  height: 8px;
  margin: 18px auto 34px;
  background: var(--faq-accent);
  border-radius: 3px;
}
 
/* --- Items -------------------------------------------------- */
 
.faq__item {
  border-bottom: 1px solid var(--faq-border);
}
 
.faq__item:first-of-type {
  border-top: 1px solid var(--faq-border);
}
 
.faq__q {
  position: relative;
  padding: 24px 60px 12px 0;
  color: var(--faq-navy);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;           /* hides the default triangle */
}
 
.faq__q::-webkit-details-marker { display: none; }  /* Safari */
 
.faq__q:focus-visible {
  outline: 2px solid var(--faq-icon);
  outline-offset: 4px;
  border-radius: 3px;
}
 
/* +/- control, drawn as two bars: the vertical one collapses
   when the item is open. */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 38px;
  background: var(--faq-icon);
  border-radius: 1px;
}

.faq__q::before {           /* horizontal bar — always visible */
  width: 18px;
  height: 2px;
  margin-top: -1px;
}

.faq__q::after {            /* vertical bar — hidden when open */
  width: 2px;
  height: 18px;
  margin: -9px 8px 0 0;
  transition: transform 0.2s ease;
}
 
.faq__item[open] .faq__q::after {
  transform: scaleY(0);
}
 
@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}
 
.faq__a {
  margin: 0;
  padding: 0 60px 26px 0;
  color: var(--faq-body);
  font-size: 18px;
  line-height: 28px;
}
 
/* --- Legal disclosure --------------------------------------- */
 
/* Negative inline margin cancels .faq's gutter so the hairline runs
   full-bleed, as it does in Figma, while the copy keeps its inset. */
.faq__disclosure {
  margin-top: 44px;
  margin-inline: -20px;
  padding: 54px 20px;
  border-top: 1px solid #e2e7e9;
}
 
.faq__disclosure-inner {
  max-width: 1080px;
  margin-inline: auto;
}
 
.faq__disclosure-label {
  margin: 0 0 10px;
  color: #56b0cb;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.faq__disclosure-copy {
  margin: 0;
  max-width: 1080px;
  color: rgba(50, 71, 93, 0.75);
  font-size: 13px;
  line-height: 20px;
}

/* ============================================================
   MOBILE + TABLET
   Built from the Figma mobile frame "Financing / Mobile — Desktop
   aligned" (390px wide, 24px gutters => 342px content).

   One breakpoint covers phone and tablet: tablet reuses the mobile
   layout and spacing rather than getting a frame of its own, and — to
   match how the rest of the site (the homepage template) behaves at
   this width — it does NOT cap content to a centred column. Content
   stretches to fill the viewport with just the --m-gutter side inset;
   each section's own desktop max-width (1080/1280px) is still in the
   base rules below, it just never gets reached until desktop.
   ============================================================ */

@media (max-width: 1024px) {
  :where(.banner, .steps, .fin, .glance, .cta, .faq) {
    --m-gutter: 24px;
  }

  /* --- Hero ------------------------------------------------- */

  .banner {
    padding: 40px var(--m-gutter) 48px;
  }

  .banner__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .banner__eyebrow {
    margin-bottom: 18px;
    font-size: 12px;
  }

  .banner__title {
    margin-bottom: 18px;
    max-width: none;
    font-size: 34px;
    line-height: 42px;
  }

  .banner__copy {
    margin-bottom: 30px;
    max-width: none;
    font-size: 17px;
    line-height: 27px;
  }

  /* Figma stacks both CTAs full width, 54px tall, 14px apart. */
  .banner__actions {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
  }

  .banner__btn {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 54px;
    padding: 0 24px;
  }

  .banner__assurance {
    align-items: flex-start;
    font-size: 14px;
    line-height: 22px;
  }

  .banner__assurance svg {
    margin-top: 2px;
  }

  /* --- Estimator card -------------------------------------- */

  .banner__form {
    margin-inline: auto;
    max-width: none;
    padding: 21px;
  }

  .est .term-row { gap: 8px; }

  /* --- 3 steps: circle in a left rail, text beside it ------- */

  .steps {
    --steps-circle: 72px;
    --steps-stroke: 3px;
    --steps-rail-gap: 16px;
    --steps-offset: 12px;   /* Figma insets each step's content by 12px */

    padding: 46px var(--m-gutter) 56px;
  }

  .steps__title {
    font-size: 32px;
    line-height: 40px;
  }

  .steps__rule { margin: 14px auto 29px; }

  .steps__list {
    grid-template-columns: 1fr;
    gap: var(--steps-rail-gap);
  }

  /* Figma fixes each step at 228px so the circles sit on an even 244px
     rhythm (228 + 16 gap) regardless of how long the copy runs.

     The circle and the text column are independent in Figma: the circle
     is 72px tall, but the description starts at y47 — well before the
     circle's own bottom edge at y84 — because it lives in a separate
     column that isn't waiting on the circle to finish. A CSS Grid with
     the marker in a shared row (spanned or not) ties the two together:
     the row-sizing algorithm inflates whichever row holds the marker to
     fit its 72px, which then shoves the text below it down by an amount
     that changes with each step's title length (that's the bug reported
     against the original build). Taking the marker out of flow with
     absolute positioning — and indenting the text column with padding
     instead of a grid track — reproduces Figma's actual independence. */
  .step {
    position: relative;
    box-sizing: border-box;
    display: block;
    min-height: 228px;
    padding-top: var(--steps-offset);
    padding-left: calc(var(--steps-circle) + 20px);
    text-align: left;
  }

  .step__marker {
    position: absolute;
    top: var(--steps-offset);
    left: 0;
    margin-bottom: 0;
  }

  .step__label {
    margin-bottom: 10px;
    line-height: 25px;
  }

  .step__copy {
    padding: 0;   /* desktop's padding-inline: 12px doesn't apply here */
    font-size: 16px;
    line-height: 25px;
  }

  .step__num {
    font-size: 34px;
    line-height: 44px;
  }

  /* Figma draws ONE continuous rail from circle 1 down to circle 3, with the
     circles painted over it — not a short stub in each gap. Each step paints
     its own segment from its circle's centre down through the row gap, so
     consecutive segments meet and read as a single unbroken line. The 36px
     behind each circle's top half is left unpainted; the opaque circle covers
     it, which is exactly how the Figma layer order resolves. */
  .step__marker::before,
  .step__marker::after { content: none; }

  .step__marker { z-index: 1; }

  .step:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(var(--steps-offset) + var(--steps-circle) / 2);
    /* Reach past the row gap AND the next step's 12px inset, so the rail
       meets the next circle's top edge instead of breaking above it. */
    bottom: calc((var(--steps-rail-gap) + var(--steps-offset)) * -1);
    left: calc(var(--steps-circle) / 2);
    width: var(--steps-stroke);
    margin-left: calc(var(--steps-stroke) / -2);
    background: var(--steps-line);
    border-radius: 2px;
  }

  /* --- Benefits -------------------------------------------- */

  .fin { padding: 56px var(--m-gutter); }

  .fin__eyebrow { font-size: 12px; }

  .fin__title {
    max-width: none;
    font-size: 31px;
    line-height: 40px;
  }

  .fin__rule {
    width: 180px;
    margin: 22px auto 24px;
  }

  .fin__intro {
    max-width: none;
    margin-bottom: 28px;
    font-size: 16px;
    line-height: 25px;
  }

  .fin__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 24px;
  }

  .fin__note {
    padding: 19px 20px 19px 17px;
    font-size: 14px;
    line-height: 21px;
  }

  /* --- At a glance: one column, hairline between rows ------- */

  .glance { padding: 56px var(--m-gutter); }

  .glance__eyebrow { font-size: 12px; }

  .glance__title {
    font-size: 32px;
    line-height: 40px;
  }

  .glance__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* min-height holds the short cells at Figma's 134px, so the bottom
     padding only needs to clear the tallest (3-line) cell. */
  .stat {
    min-height: 134px;
    padding: 18px 20px 8px;
    border-top: 1.5px solid var(--glance-border);
  }

  .stat:first-child { border-top: 0; }

  .stat__figure {
    margin-bottom: 6px;
    font-size: 26px;
    line-height: 34px;
  }

  .stat__detail {
    font-size: 15px;
    line-height: 23px;
  }

  /* --- Pre-qualification CTA ------------------------------- */

  .cta { padding: 54px var(--m-gutter); }

  .cta__title {
    max-width: none;
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 38px;
  }

  .cta__copy {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 25px;
  }

  /* Figma runs the button full width on mobile. */
  .cta__button {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 56px;
    margin-top: 20px;
    padding: 0 24px;
    letter-spacing: 0.04em;
  }

  /* --- FAQ ------------------------------------------------- */

  .faq { padding: 64px var(--m-gutter) 0; }

  .faq__title {
    font-size: 32px;
    line-height: 40px;
  }

  .faq__rule {
    width: min(220px, 70%);
    height: 6px;
    margin: 22px auto 20px;
  }

  .faq__q {
    padding: 20px 42px 10px 0;
    font-size: 20px;
    line-height: 28px;
  }

  .faq__q::before,
  .faq__q::after { top: 34px; }

  .faq__a {
    padding: 0 24px 24px 0;
    font-size: 15px;
    line-height: 24px;
  }

  /* --- Legal disclosure ------------------------------------ */

  .faq__disclosure {
    margin-top: 24px;
    margin-inline: calc(var(--m-gutter) * -1);
    padding: 35px var(--m-gutter) 40px;
  }


  .faq__disclosure-label {
    margin-bottom: 14px;
    font-size: 11px;
    line-height: 16px;
  }

  .faq__disclosure-copy {
    max-width: none;
    font-size: 12.5px;
    line-height: 20px;
  }
}