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

.finance-hero {
  align-items: flex-end;
  background:
    radial-gradient(circle at 78% 36%, rgba(59, 90, 122, .32), transparent 30%),
    linear-gradient(145deg, #03070d 35%, #0a2035);
  border-bottom: 1px solid var(--stone);
  display: flex;
  min-height: 66vh;
  min-height: 66svh;
  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(61, 141, 209, .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 }

.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);
}
.application__intro h2 {
  font-size: clamp(48px, 6vw, 78px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .95;
  margin: 20px 0 54px;
}

.application__intro { position: sticky; top: 30px }
/* motion.js fades the nav out (.is-collapsed) 140px+ of scroll before the panel
   can pin, so the 30px offset only meets a painted nav when JS never runs. */
html:not(.js) .application__intro { top: calc(var(--nav-h) + 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(61, 141, 209, .22);
  border-radius: var(--radius);
  display: grid;
  gap: 20px;
  /* Two columns only while each field clears 160px. The .72fr side column drops
     under that between 901px and ~1190px (iPad Pro 12.9" portrait, small laptops)
     and would squeeze fields to 135px; the 40% floor caps it at two columns. */
  grid-template-columns: repeat(auto-fit, minmax(max(160px, 40%), 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 small, .application__fine-print { color: var(--ash); font-size: 12px; line-height: 1.55 }
.application__field label span { color: var(--ash); font-size: 10px }
.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__trap { left: -10000px; position: absolute }
.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 }

.seller-workspace { min-width: 0 }
.seller-auth, .seller-account__bar, .seller-requests {
  background: #111b25;
  border: 1px solid rgba(61, 141, 209, .22);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 46px);
}
.seller-auth[hidden], .seller-account[hidden] { display: none }
.seller-auth__head h3, .seller-requests h3 { font-size: clamp(30px, 4vw, 48px); font-weight: 400; letter-spacing: -.04em; line-height: 1; margin: 18px 0 }
.seller-auth__head > p:last-child { color: var(--ash); font-size: 14px; line-height: 1.6 }
.seller-auth__form { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(max(160px, 40%), 1fr)); margin-top: 30px }
.seller-login { border-top: 1px solid var(--stone); margin-top: 30px; padding-top: 22px }
.seller-login summary { color: var(--scot-lift); cursor: pointer; font-size: 14px }
.seller-login .seller-auth__form { margin-top: 22px }
.seller-auth > .application__status { margin-top: 18px }
.seller-auth > .application__fine-print { display: block; margin-top: 18px }
.seller-account { display: flex; flex-direction: column; gap: 20px }
.seller-account__bar { align-items: center; display: flex; justify-content: space-between }
.seller-account__bar > div { display: flex; flex-direction: column; gap: 3px }
.seller-account__bar span, .seller-account__bar small { color: var(--ash); font-size: 12px; overflow-wrap: anywhere }
.seller-account__bar strong { font-size: 18px }
.seller-account__bar .pill { min-height: 40px; padding: 8px 16px }
.seller-photo-input { cursor: pointer; padding: 10px !important }
.seller-requests { display: flex; flex-direction: column; gap: 24px }
.seller-requests__list { display: grid; gap: 12px }
.seller-request-card { border: 1px solid var(--stone); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; padding: 16px }
.seller-request-card__head { align-items: start; display: flex; gap: 12px; justify-content: space-between }
.seller-request-card strong { font-size: 15px }
.seller-request-card p, .seller-request-card time { color: var(--ash); font-size: 12px }
.seller-request-card__status { border: 1px solid var(--stone); border-radius: var(--pill); color: var(--scot-lift); font-size: 10px; letter-spacing: .08em; padding: 5px 9px; text-transform: uppercase }
.seller-request-card__photos { display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); margin-top: 6px }
.seller-request-card__photos img { aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; width: 100% }

.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) {
  .application { grid-template-columns: 1fr }
  .application__intro { position: static }
}
@media (max-width: 600px) {
  .finance-hero { min-height: 58vh; min-height: 58svh }
  /* Inter Tight is never loaded, so phones set this in Arial/Roboto: at 20vw
     "application." is 284px on a 320px screen with 280px of room. */
  .finance-hero h1 { font-size: clamp(58px, 18vw, 92px) }
  .application__form { grid-template-columns: minmax(0, 1fr) }
  .application__field--wide { grid-column: auto }
  .seller-auth__form { grid-template-columns: minmax(0, 1fr) }
  .seller-account__bar { align-items: flex-start; flex-direction: column; gap: 18px }
  .seller-request-card__photos { grid-template-columns: repeat(2, 1fr) }
}

@media (pointer: coarse) {
  /* iOS zooms the page when a focused field computes under 16px. The class selector
     outranks the bare element floor in swiss.css, so it is restated here. */
  .application__field input, .application__field select, .application__field textarea { font-size: max(16px, 1em) }
  .seller-account__bar .pill { min-height: 44px }
  .seller-login summary { padding-block: 13px }
  .application__consent { min-height: 44px }
  .application__consent input { flex: none; height: 22px; margin-top: -2px; width: 22px }
}