:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #061a15;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 28% 18%, rgba(69, 188, 54, 0.36), transparent 24rem),
    radial-gradient(circle at 78% 28%, rgba(246, 205, 82, 0.22), transparent 26rem),
    #061a15;
  overflow-x: hidden;
}

.program {
  position: relative;
  width: min(100vw, 680px);
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px;
  overflow: hidden;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
}

.program::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 14px solid #e4ae31;
  border-radius: 44% 44% 48% 48% / 16% 16% 54% 54%;
  background: linear-gradient(135deg, #44bc36 0%, #155e27 50%, #082313 100%);
  clip-path: polygon(50% 4%, 66% 13%, 83% 19%, 94% 20%, 94% 52%, 89% 67%, 76% 80%, 50% 95%, 24% 80%, 11% 67%, 6% 52%, 6% 20%, 17% 19%, 34% 13%);
  opacity: 0.38;
}

section {
  position: relative;
  max-width: 460px;
}

.eyebrow {
  margin: 0 0 12px;
  color: #87dd3f;
  font-size: 24px;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: clamp(42px, 8vw, 72px);
  line-height: 0.94;
  font-style: italic;
}

p {
  margin: 20px auto 0;
  max-width: 390px;
  color: #eef7e9;
  font-size: 22px;
  line-height: 1.25;
}

.back {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  border: 2px solid #f5d46f;
  border-radius: 999px;
  padding: 9px 18px;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  background: rgba(12, 49, 25, 0.78);
  cursor: pointer;
}

.back:hover,
.back:focus-visible {
  box-shadow: 0 0 0 3px rgba(245, 212, 111, 0.38);
}

.loan-body {
  align-items: start;
  justify-items: center;
  overflow-y: auto;
}

.loan-app {
  width: min(100vw, 860px);
  max-width: 100vw;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(14px, 2.5vw, 24px);
  color: #ffffff;
  background:
    radial-gradient(circle at 34% 16%, rgba(74, 198, 57, 0.26), transparent 18rem),
    radial-gradient(circle at 82% 6%, rgba(232, 174, 49, 0.18), transparent 20rem),
    linear-gradient(180deg, #0c351e 0%, #061a15 100%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
}

.loan-app section {
  max-width: none;
}

.loan-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}

.page-actions {
  display: grid;
  gap: 8px;
}

.loan-header .back,
.help-link {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
}

.help-link {
  border: 2px solid rgba(245, 212, 111, 0.72);
  border-radius: 999px;
  padding: 9px 18px;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  background: rgba(12, 49, 25, 0.60);
  cursor: pointer;
  font-family: inherit;
}

.help-link:hover,
.help-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(245, 212, 111, 0.30);
}

.loan-header .eyebrow,
.loan-header h1 {
  text-align: left;
}

.loan-header .eyebrow {
  margin-bottom: 4px;
  font-size: 19px;
}

.loan-header h1 {
  font-size: clamp(32px, 7vw, 48px);
}

.loan-panel {
  border: 1px solid rgba(245, 212, 111, 0.38);
  border-radius: 8px;
  background: rgba(5, 24, 15, 0.74);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.input-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.input-panel label,
.calculated-input,
.schedule-payment,
.alternative-targets label {
  display: grid;
  gap: 6px;
  text-align: left;
}

.input-panel span,
.calculated-input span,
.schedule-payment span,
.alternative-targets label > span:first-child,
.result-panel span,
.detail-summary span {
  color: #dbeeda;
  font-size: 13px;
  font-weight: 700;
}

.input-panel input,
.schedule-payment input,
.lender-panel input,
.alternative-targets input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(245, 212, 111, 0.46);
  border-radius: 6px;
  padding: 8px 44px 8px 10px;
  color: #122915;
  background: #f7d692;
  font-size: max(16px, 1rem);
  font-weight: 700;
  appearance: textfield;
}

.input-panel input::-webkit-inner-spin-button,
.input-panel input::-webkit-outer-spin-button,
.schedule-payment input::-webkit-inner-spin-button,
.schedule-payment input::-webkit-outer-spin-button,
.lender-panel input::-webkit-inner-spin-button,
.lender-panel input::-webkit-outer-spin-button,
.alternative-targets input::-webkit-inner-spin-button,
.alternative-targets input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.number-field {
  position: relative;
  display: block;
}

.number-steps {
  position: absolute;
  top: 3px;
  right: 4px;
  bottom: 3px;
  display: grid;
  width: 32px;
  border-left: 1px solid rgba(18, 41, 21, 0.22);
}

.number-steps button {
  min-height: 0;
  border: 0;
  padding: 0;
  color: #050805;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.number-steps button:hover,
.number-steps button:focus-visible {
  background: rgba(18, 41, 21, 0.12);
}

.calculated-input {
  min-height: 42px;
  border: 1px solid rgba(245, 212, 111, 0.36);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(16, 66, 31, 0.78);
}

.calculated-input strong {
  color: #ffffff;
  font-size: clamp(19px, 3.2vw, 24px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.result-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  overflow: hidden;
}

.result-panel div {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
  text-align: left;
  background: rgba(16, 66, 31, 0.72);
}

.result-panel strong {
  color: #ffffff;
  font-size: clamp(18px, 3.1vw, 24px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.schedule-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 8px;
  width: 100%;
}

.schedule-tabs button,
.schedule-guides button {
  min-height: 42px;
  border: 1px solid rgba(245, 212, 111, 0.68);
  color: #ffffff;
  background: rgba(12, 49, 25, 0.84);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}

.schedule-tabs button {
  border-radius: 999px;
  padding: 0 10px;
  line-height: 1.05;
  overflow-wrap: anywhere;
  font-size: 15px;
}

.schedule-tabs button:hover,
.schedule-tabs button:focus-visible,
.schedule-tabs button.active,
.schedule-guides button:hover,
.schedule-guides button:focus-visible,
.schedule-guides button.active {
  background: #2f9826;
  box-shadow: 0 0 0 3px rgba(245, 212, 111, 0.28);
}

.schedule-guides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  width: 100%;
}

.schedule-guides button {
  display: grid;
  gap: 3px;
  min-height: 58px;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.schedule-guides span {
  color: #dbeeda;
  font-size: 12px;
  line-height: 1.05;
}

.schedule-guides strong {
  color: #ffffff;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.detail-panel {
  padding: 14px;
}

.alternative-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: none;
  margin-bottom: 14px;
}

.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 12px;
  text-align: left;
}

.detail-head h2 {
  margin: 0;
  font-size: 22px;
  font-style: italic;
  line-height: 1;
}

.detail-head p {
  margin: 6px 0 0;
  max-width: none;
  font-size: 14px;
  line-height: 1.2;
}

.detail-summary {
  display: grid;
  gap: 4px;
  min-width: 150px;
  text-align: right;
}

.schedule-payment input {
  min-height: 38px;
  font-size: 17px;
}

.detail-summary strong {
  color: #f5d46f;
  font-size: 18px;
}

.borrower-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.borrowing-app section {
  max-width: none;
}

.credit-app section {
  max-width: none;
}

.lender-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.lender-panel h2 {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-style: italic;
  line-height: 1;
}

.lender-panel label {
  display: grid;
  gap: 6px;
  text-align: left;
}

.lender-panel label > span:first-child {
  color: #dbeeda;
  font-size: 13px;
  font-weight: 700;
}

.lender-panel input[type="text"] {
  padding-right: 10px;
  appearance: auto;
}

.borrowing-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.borrowing-detail {
  margin-top: 14px;
}

.comparison-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.comparison-list div {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(245, 212, 111, 0.32);
  border-radius: 8px;
  padding: 12px;
  background: rgba(16, 66, 31, 0.62);
}

.comparison-list span {
  color: #dbeeda;
  font-size: 13px;
  font-weight: 700;
}

.comparison-list strong {
  color: #ffffff;
  font-size: clamp(17px, 2.7vw, 20px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.credit-comparison {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.credit-app .compact-credit-panel {
  padding: 10px;
}

.credit-app .compact-credit-panel input {
  min-height: 38px;
  font-size: 17px;
}

.credit-app .compact-credit-panel .calculated-input {
  min-height: 38px;
  padding: 7px 10px;
}

.credit-app .compact-credit-panel .calculated-input strong,
.credit-app .compact-credit-panel.result-panel strong {
  font-size: 21px;
}

.credit-app .compact-credit-panel.result-panel div {
  min-height: 62px;
  padding: 10px;
}

.alternative-intro {
  width: 100%;
  max-width: none;
  margin: 12px 0 8px;
  border: 1px solid rgba(245, 212, 111, 0.42);
  border-radius: 8px;
  padding: 11px 13px;
  text-align: left;
  background: rgba(5, 24, 15, 0.68);
}

.alternative-intro h2 {
  margin: 0;
  color: #ffffff;
  font-size: 21px;
  font-style: italic;
  line-height: 1;
}

.alternative-intro p {
  margin: 5px 0 0;
  max-width: none;
  color: #dbeeda;
  font-size: 14px;
  line-height: 1.2;
}

.table-wrap {
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 8px 9px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  white-space: nowrap;
}

th:first-child,
td:first-child {
  text-align: left;
}

th {
  position: sticky;
  top: 0;
  color: #ffffff;
  background: #123820;
  font-size: 12px;
}

td {
  color: #edf7eb;
}

@media (max-width: 520px) {
  .loan-app {
    padding: 14px 8px 24px;
  }

  .loan-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .loan-header .eyebrow,
  .loan-header h1 {
    text-align: center;
  }

  .loan-header .eyebrow {
    font-size: 17px;
  }

  .loan-header h1 {
    font-size: clamp(30px, 10vw, 42px);
  }

  .page-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .loan-header .back,
  .help-link {
    min-height: 42px;
    padding: 8px 12px;
  }

  .input-panel,
  .result-panel,
  .detail-head,
  .alternative-targets,
  .borrower-grid,
  .comparison-list,
  .credit-comparison {
    grid-template-columns: 1fr;
  }

  .detail-summary {
    text-align: left;
  }

  .result-panel div {
    min-height: 62px;
  }

  .schedule-tabs {
    gap: 5px;
  }

  .schedule-tabs button {
    min-height: 44px;
    padding: 0 6px;
    font-size: 13px;
  }

  .schedule-guides {
    gap: 5px;
  }

  .schedule-guides button {
    min-height: 58px;
    padding: 7px 5px;
  }

  .schedule-guides span {
    font-size: 9px;
  }

  .schedule-guides strong {
    font-size: 15px;
  }

  .detail-panel {
    padding: 12px 10px;
  }

  .detail-head {
    gap: 10px;
  }

  .detail-head h2 {
    font-size: 20px;
  }

  .detail-head p {
    font-size: 13px;
  }

  th,
  td {
    padding: 7px 8px;
    font-size: 12px;
  }

  .alternative-intro {
    padding: 10px;
  }

  .alternative-intro h2 {
    font-size: 20px;
  }

  .alternative-intro p {
    font-size: 13px;
  }
}

@media (min-width: 521px) and (max-width: 900px) {
  .loan-app {
    width: min(100vw, 820px);
  }

  .loan-header h1 {
    font-size: clamp(38px, 6vw, 48px);
  }

  .credit-comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .schedule-tabs button {
    font-size: 12px;
  }

  .schedule-guides span {
    font-size: 8.5px;
  }

  .schedule-guides strong {
    font-size: 14px;
  }
}