.finance-page, .credit-page { background: var(--void); color: var(--cream) }

.finance-hero {
  align-items: flex-end;
  background:
    radial-gradient(circle at 78% 36%, rgba(0, 101, 189, .32), transparent 30%),
    linear-gradient(145deg, #0e100f 35%, #0a2035);
  border-bottom: 1px solid var(--stone);
  display: flex;
  min-height: 66vh;
  overflow: hidden;
  padding: calc(var(--nav-h) + clamp(64px, 9vw, 120px)) 0 clamp(70px, 9vw, 116px);
  position: relative;
}
.finance-hero::after {
  border: 1px solid rgba(108, 196, 255, .18);
  border-radius: 50%;
  content: "";
  height: min(55vw, 680px);
  position: absolute;
  right: -10%;
  top: 10%;
  width: min(55vw, 680px);
}
.finance-hero__inner { position: relative; z-index: 1 }
.finance-hero h1 {
  font-size: clamp(68px, 10vw, 146px);
  font-weight: 400;
  letter-spacing: -.06em;
  line-height: .82;
  margin-top: 24px;
}
.finance-hero__inner > p:last-child { color: var(--ash); font-size: clamp(17px, 1.7vw, 22px); margin-top: 34px; max-width: 54ch }

.calculator, .application {
  align-items: start;
  display: grid;
  gap: clamp(42px, 7vw, 100px);
  grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
  padding-block: clamp(92px, 12vw, 160px);
}
.calculator__controls h2, .application__intro h2 {
  font-size: clamp(48px, 6vw, 78px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .95;
  margin: 20px 0 54px;
}
.range-field { border-top: 1px solid var(--stone); display: block; padding: 26px 0 }
.range-field > span { align-items: baseline; display: flex; justify-content: space-between }
.range-field strong, .term-field legend { font-size: 15px; font-weight: 500 }
.range-field output { color: var(--scot-lift); font-size: 20px }
.range-field input {
  accent-color: var(--scot-lift);
  cursor: pointer;
  margin-top: 22px;
  width: 100%;
}
.term-field { border: 0; border-top: 1px solid var(--stone); padding-top: 26px }
.term-field__options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px }
.term-field button { border: 1px solid var(--stone); border-radius: var(--pill); color: var(--ash); font-size: 13px; padding: 10px 14px }
.term-field button:hover, .term-field button.is-active { background: var(--scot-lift); border-color: var(--scot-lift); color: var(--void) }

.calculator__result {
  background: #111b25;
  border: 1px solid rgba(108, 196, 255, .22);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  position: sticky;
  top: 30px;
}
.calculator__monthly { border-bottom: 1px solid var(--stone); margin: 26px 0; padding-bottom: 28px }
.calculator__monthly strong { color: var(--scot-lift); display: block; font-size: clamp(54px, 6vw, 82px); font-weight: 400; letter-spacing: -.06em; line-height: 1 }
.calculator__monthly span { color: var(--ash); font-size: 14px }
.calculator__result dl div { border-bottom: 1px solid rgba(255, 252, 225, .1); display: flex; font-size: 14px; justify-content: space-between; padding: 13px 0 }
.calculator__result dt { color: var(--ash) }
.calculator__note { color: var(--ash); font-size: 12px; margin-top: 22px }
.calculator__apply { margin-top: 30px; width: 100% }

.application__intro { position: sticky; top: 30px }
.application__intro > p:not(.bracket) { color: var(--ash); max-width: 48ch }
.application__intro ol { border-top: 1px solid var(--stone); margin: 36px 0 }
.application__intro li { border-bottom: 1px solid var(--stone); display: grid; font-size: 14px; gap: 12px; grid-template-columns: 32px 1fr; padding: 16px 0 }
.application__intro li span { color: var(--scot-lift); font-size: 12px }
.application__form {
  background: #111b25;
  border: 1px solid rgba(108, 196, 255, .22);
  border-radius: var(--radius);
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  padding: clamp(24px, 4vw, 46px);
}
.application__field { display: flex; flex-direction: column; gap: 8px }
.application__field--wide { grid-column: 1 / -1 }
.application__field label { color: var(--ash); font-size: 12px; letter-spacing: .08em; text-transform: uppercase }
.application__field input, .application__field select, .application__field textarea {
  background: var(--void);
  border: 1px solid var(--stone);
  border-radius: 5px;
  color: var(--cream);
  font: inherit;
  min-height: 50px;
  padding: 12px 14px;
  width: 100%;
}
.application__field textarea { min-height: 120px; resize: vertical }
.application__field input:focus, .application__field select:focus, .application__field textarea:focus { border-color: var(--scot-lift); outline: none }
.application__consent { align-items: flex-start; color: var(--ash); display: flex; font-size: 13px; gap: 12px }
.application__consent input { accent-color: var(--scot-lift); margin-top: 3px }
.application__submit { background: var(--scot-lift); color: var(--void); justify-self: start }
.application__submit:disabled { cursor: wait; opacity: .55 }
.application__status { color: var(--ash); font-size: 13px; min-height: 20px }
.application__status.is-success { color: #8ee6b2 }
.application__status.is-error { color: #ff9c9c }

.finance-close { border-top: 1px solid var(--stone); padding: clamp(100px, 13vw, 170px) 0 }
.finance-close__inner { align-items: flex-start; display: flex; flex-direction: column }
.finance-close h2 { font-size: clamp(52px, 8vw, 110px); font-weight: 400; letter-spacing: -.055em; line-height: .9; margin: 24px 0 46px }

@media (max-width: 900px) {
  .calculator, .application { grid-template-columns: 1fr }
  .calculator__result, .application__intro { position: static }
}
@media (max-width: 600px) {
  .finance-hero { min-height: 58vh }
  .finance-hero h1 { font-size: clamp(58px, 20vw, 92px) }
  .application__form { grid-template-columns: 1fr }
  .application__field--wide { grid-column: auto }
  .term-field__options button { flex: 1 0 28% }
}