/* ==========================================================================
   Activ Paisa — loan product pages
   Builds on css/styles.css: tokens, buttons, form controls, header, footer,
   toasts and carousel all come from there. Only new components live here.
   ========================================================================== */

/* ==========================================================================
   Motion — the reveal/stagger vocabulary, done in CSS
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1),
              transform .8s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.section-sub {
  font-size: var(--text-lead); color: var(--ink-2); line-height: 1.5;
  text-align: center; max-width: 36rem; margin: -30px auto var(--sp-14);
}
.section-sub:empty { display: none; }

/* ==========================================================================
   Product hero
   ========================================================================== */
.lp-hero {
  position: relative; overflow: hidden;
  padding: 64px 0 88px;
  background:
    radial-gradient(900px 420px at 12% -10%, var(--tint), transparent 62%),
    radial-gradient(700px 380px at 96% 8%, #F3EEFF, transparent 60%);
}
.lp-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center;
}

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .82rem; font-weight: 600; color: var(--secondary);
}
.lp-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
}

.lp-title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 18px 0 6px; }
.lp-amount {
  display: flex; align-items: baseline; gap: 6px;
  font-size: clamp(2.6rem, 6.2vw, 4.2rem); font-weight: 800; line-height: 1;
  letter-spacing: -.035em; color: var(--secondary); margin-bottom: 20px;
}
.lp-lede { font-size: 1.02rem; color: var(--ink-2); max-width: 34rem; margin-bottom: 26px; }

.lp-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; margin-bottom: 28px; max-width: 34rem;
}
.lp-facts > div { background: rgba(255, 255, 255, .82); padding: 14px 16px; }
.lp-facts dt { font-size: .76rem; color: var(--ink-2); margin-bottom: 3px; }
.lp-facts dd { font-size: 1rem; font-weight: 700; }

.lp-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.lp-cta-row .btn-ghost { min-height: 64px; }
/* Clear of the CTA's drop shadow, which reaches 20px below the button box */
.lp-trust { font-size: var(--text-caption); color: var(--ink-3); margin-top: var(--sp-6); }

/* glass panel on the right of the hero */
.lp-hero-card {
  position: relative;
  border-radius: var(--r-xl);
  padding: 30px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--sh-xl);
}
.lp-hero-card h2 { font-size: 1.12rem; margin-bottom: 4px; }
.lp-hero-card > p { font-size: .88rem; color: var(--ink-2); margin-bottom: 20px; }

.lp-steps { display: grid; gap: 14px; margin-bottom: 22px; }
.lp-steps li, .cp-steps li { display: flex; gap: 13px; align-items: flex-start; }
.lp-steps .n, .cp-steps .n {
  flex-shrink: 0; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--grad); color: #fff; font-size: .8rem; font-weight: 700;
}
.lp-steps strong, .cp-steps strong { display: block; font-size: .92rem; }
.lp-steps span, .cp-steps span { font-size: .84rem; color: var(--ink-2); }

/* Rate factors — the numbered-step vocabulary in two readable columns */
.sl-factors {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-10);
  max-width: 62rem; margin: var(--sp-10) auto 0;
}
.sl-factors li { align-items: flex-start; }

@media (max-width: 860px) {
  .sl-factors { grid-template-columns: 1fr; }
}

/* Same steps, laid across a full-width section instead of the hero card */
.cp-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8); list-style: none; margin-top: var(--sp-10);
}

/* Credit card payoff — the two-outcome comparison in the hero card.
   Colour carries the contrast, so each row also states its own figure and
   caption rather than relying on red-versus-green alone. */
.cp-versus { display: grid; gap: 12px; margin-bottom: 22px; }
.cp-versus li {
  padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .7); border: 1px solid var(--line);
}
.cp-versus li.is-good { border-color: var(--primary); background: var(--tint); }
.cp-versus-tag { display: block; font-size: .76rem; color: var(--ink-2); margin-bottom: 4px; }
.cp-versus strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.cp-versus-bad { color: var(--danger); }
.cp-versus-good { color: var(--primary); }
.cp-versus-note { display: block; font-size: .78rem; color: var(--ink-2); margin-top: 2px; }
.cp-versus-foot { font-size: var(--text-caption); color: var(--ink-3); margin-top: 12px; text-align: center; }

/* Lender strip — separated cards on a transparent container, so the strip
   sits on whatever section background it is dropped onto without a slab of
   its own fighting it. */
.cp-lenders {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-10); list-style: none;
}
.cp-lender {
  display: grid; place-items: center;
  padding: var(--sp-6) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.cp-lender:hover {
  border-color: rgba(0, 96, 176, .35);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.cp-lender .p-logo { margin-bottom: 0; width: 110px; max-width: 100%; height: 40px; }

@media (prefers-reduced-motion: reduce) { .cp-lender { transition: none; } }

/* ==========================================================================
   Benefit cards
   ========================================================================== */
.benefit-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.benefit-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 30px 28px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* No jump on hover. A card that leaps at the cursor is asking for attention
   it has not earned. */
.benefit-card:hover { border-color: var(--line-strong); }
.benefit-card .ico {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--tint); color: var(--primary);
  font-weight: 700; margin-bottom: 15px;
}
.benefit-card h3 { font-size: 1rem; margin-bottom: 7px; }
.benefit-card p { font-size: .89rem; color: var(--ink-2); }

/* ==========================================================================
   Calculators
   ========================================================================== */
.calc-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: start; }

.calc-panel, .calc-out {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 32px;
}
.calc-out {
  background: linear-gradient(160deg, #16203A, #0B1220);
  border-color: transparent; color: #fff;
}

.calc-row { margin-bottom: 26px; }
.calc-row:last-child { margin-bottom: 0; }
.calc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.calc-head label { font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.calc-head output { font-size: 1.02rem; font-weight: 700; color: var(--ink); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) var(--fill, 0%), var(--surface-alt) var(--fill, 0%));
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) var(--fill, 0%), var(--surface-alt) var(--fill, 0%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--primary);
  box-shadow: 0 2px 8px rgba(12, 110, 110, .35);
  transition: transform var(--dur) var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--primary);
  box-shadow: 0 2px 8px rgba(12, 110, 110, .35);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]:focus-visible { outline: 3px solid var(--primary); outline-offset: 6px; }

.calc-emi-label { font-size: .82rem; color: #94A3B8; }
.calc-emi {
  font-size: clamp(2rem, 4.4vw, 2.7rem); font-weight: 800;
  letter-spacing: -.03em; margin: 4px 0 22px;
}
.calc-split {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: #F5C451; margin-bottom: 12px;
  background-image: linear-gradient(90deg, #5AA9FF var(--principal, 50%), #F5C451 var(--principal, 50%));
}
.calc-legend { display: flex; gap: 18px; font-size: .8rem; color: #94A3B8; margin-bottom: 22px; }
.calc-legend span { display: flex; align-items: center; gap: 7px; }
.calc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.calc-legend .i-p { background: #5AA9FF; }
.calc-legend .i-i { background: #F5C451; }

.calc-rows { display: grid; gap: 12px; }
.calc-rows > div { display: flex; justify-content: space-between; align-items: baseline; }
.calc-rows dt { font-size: .86rem; color: #94A3B8; }
.calc-rows dd { font-size: 1rem; font-weight: 700; }
.calc-foot { margin-top: 22px; font-size: .76rem; color: #64748B; line-height: 1.6; }

/* eligibility
   Fields stack vertically inside the panel; spacing lives here, not inline. */
.elig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
.calc-panel .field.outlined + .field.outlined { margin-top: var(--sp-6); }
.elig-result {
  border-radius: var(--r-lg); padding: 28px;
  background: var(--bg); border: 1px dashed var(--line);
  text-align: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.elig-result.is-ready { background: var(--tint); border-style: solid; border-color: rgba(12,110,110,.28); }
.elig-result .cap { font-size: .84rem; color: var(--ink-2); }
.elig-amount {
  font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 800;
  color: var(--secondary); letter-spacing: -.03em; margin: 8px 0 10px;
}
.elig-note { font-size: .82rem; color: var(--ink-2); line-height: 1.6; }

/* ==========================================================================
   Comparison cards
   ========================================================================== */
.cmp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.cmp-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 32px 28px;
  transition: border-color var(--dur) var(--ease);
}
.cmp-card:hover { border-color: var(--line-strong); }
.cmp-card.is-featured {
  border-color: var(--primary);
  box-shadow: 0 18px 40px rgba(12, 110, 110, .16);
}
.cmp-flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.cmp-name { font-size: 1.02rem; }
.cmp-rate { font-size: .86rem; color: var(--ink-2); margin-top: 2px; }
.cmp-emi { display: flex; align-items: baseline; gap: 7px; margin: 18px 0; }
.cmp-emi-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; color: var(--secondary); }
.cmp-emi-label { font-size: .82rem; color: var(--ink-3); }
.cmp-rows { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line); }
.cmp-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.cmp-rows dt { font-size: .84rem; color: var(--ink-2); }
.cmp-rows dd { font-size: .88rem; font-weight: 700; }
.cmp-note { font-size: .82rem; color: var(--ink-3); margin-top: 16px; }

/* ==========================================================================
   Eligibility criteria + document checklist
   ========================================================================== */
.crit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; }
.crit-row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.crit-row dt { font-size: .9rem; color: var(--ink-2); }
.crit-row dd { font-size: .9rem; font-weight: 600; text-align: right; }

.doc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 30px; }
.doc-row { display: flex; gap: 13px; align-items: flex-start; }
.doc-row svg {
  flex-shrink: 0; margin-top: 3px;
  color: var(--success); background: var(--success-bg);
  border-radius: 50%; padding: 3px; box-sizing: content-box;
}
.doc-row strong { display: block; font-size: .93rem; }
.doc-row span { font-size: .84rem; color: var(--ink-2); }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list { max-width: 860px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-trigger {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  width: 100%; text-align: left;
  padding: 26px 2px; font-size: var(--text-lead); font-weight: 500; color: var(--ink);
  letter-spacing: -.015em;
}
.faq-trigger:hover { color: var(--primary); }
.faq-trigger .chev {
  flex-shrink: 0; width: 24px; height: 24px; color: var(--ink-3);
  display: grid; place-items: center;
  transition: transform .4s var(--ease), color var(--dur) var(--ease);
}
.faq-item.is-open .faq-trigger { color: var(--primary); }
.faq-item.is-open .chev { transform: rotate(180deg); color: var(--primary); }

.faq-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
}
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-panel > div { overflow: hidden; }
.faq-panel p { font-size: .92rem; color: var(--ink-2); line-height: 1.75; padding: 0 4px 22px; }

/* ==========================================================================
   Sticky apply bar
   ========================================================================== */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  transform: translateY(110%);
  transition: transform .34s var(--ease);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--line);
  box-shadow: none;
}
.sticky-cta.is-visible { transform: none; }
/* it lives outside #main, so the view toggle does not hide it */
body.is-applying .sticky-cta { display: none; }
.sticky-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 24px;
}
.sticky-copy strong { display: block; font-size: .95rem; }
.sticky-copy span { font-size: .82rem; color: var(--ink-2); }

/* ==========================================================================
   Application flow
   ========================================================================== */
.apply-body { padding: 30px 24px 80px; max-width: 860px; }

.flow-progress { margin-bottom: 34px; }
.flow-track { height: 6px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.flow-fill {
  display: block; height: 100%; width: 0;
  background: var(--grad); border-radius: 999px;
  transition: width .45s var(--ease);
}
.flow-steps { display: flex; justify-content: space-between; margin-top: 12px; gap: 8px; }
.flow-steps li {
  font-size: .78rem; font-weight: 600; color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.flow-steps li.is-done { color: var(--success); }
.flow-steps li.is-current { color: var(--primary); }

.flow-step { animation: flowIn .34s var(--ease); }
@keyframes flowIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}
.flow-title { font-size: clamp(1.25rem, 2.6vw, 1.55rem); margin-bottom: 6px; }
/* steps with no sub-line would otherwise run straight into the first field */
.flow-step .form-grid { margin-top: 22px; }
.flow-step .form-grid legend { margin-bottom: 10px; }
.flow-sub { font-size: .93rem; color: var(--ink-2); margin-bottom: 28px; }

/* ---- multi-card breakdown ---- */
#cardRows { margin-top: 12px; }
.card-row { border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 12px; background: var(--bg-alt, #f9fafb); }
.card-row-head { font-size: .95rem; font-weight: 600; margin-bottom: 12px; }
.card-row .form-grid { margin-top: 0; }
.field.is-computed input { color: var(--ink-2); background: var(--bg-disabled, #f5f5f5); }

/* the single-issuer field is hidden when the breakdown is active */
.field[hidden] { display: none; }
.flow-done { text-align: center; padding-top: 20px; }
.flow-done .flow-sub { max-width: 34rem; margin-inline: auto; }

/* the apply body is far wider than the six boxes need */
.flow-step .otp-inputs { max-width: 372px; gap: 10px; }
.flow-step .otp-inputs input { aspect-ratio: 1 / 1.1; font-size: 1.25rem; }

/* ---------- Confirmation ----------
   One centred column with a single measure: callout, timeline, reference and
   the action all share the same width and left edge, so the screen reads as
   one designed unit rather than stacked fragments. */
.flow-done { --done-col: 400px; text-align: center; padding-top: 28px; }

.flow-done .flow-title {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: -.025em;
  margin-bottom: 8px;
}
.flow-done .flow-sub {
  max-width: 34rem; margin: 0 auto 30px;
  font-size: .95rem; color: var(--ink-2);
}

/* gentle staggered entrance, one element after the next */
.flow-done > * {
  animation: done-in .55s var(--ease) both;
}
.flow-done > *:nth-child(1) { animation-delay: 0s; }
.flow-done > *:nth-child(2) { animation-delay: .08s; }
.flow-done > *:nth-child(3) { animation-delay: .16s; }
.flow-done > *:nth-child(4) { animation-delay: .24s; }
.flow-done > *:nth-child(5) { animation-delay: .32s; }
.flow-done > *:nth-child(6) { animation-delay: .40s; }
.flow-done > *:nth-child(7) { animation-delay: .48s; }
.flow-done > *:nth-child(8) { animation-delay: .56s; }
@keyframes done-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* overflow stays visible so the specialist's head rises above the card edge,
   exactly as drawn in the design */
.done-callout {
  display: flex; align-items: center; gap: 14px;
  width: min(480px, 100%);
  margin: 0 auto 34px; padding: 16px 8px 0 20px;
  text-align: left;
  border-radius: var(--r-md);
  background: #F7FBF9;
  border: 1px solid rgba(47, 158, 99, .22);
}
.done-callout .ring {
  flex-shrink: 0; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #E4F3E9; color: var(--success);
  margin-bottom: 16px;
}
.done-callout strong { display: block; font-size: .98rem; letter-spacing: -.01em; color: var(--ink); }
.done-callout strong .hl { font-style: normal; color: var(--success); }
.done-callout span { font-size: .84rem; color: var(--ink-2); }
.done-callout > div { flex: 1; min-width: 0; padding-bottom: 16px; }
.callout-art { flex-shrink: 0; align-self: flex-end; line-height: 0; }
.callout-art img { display: block; width: 148px; height: auto; }

/* submitted figures next to the indicative approval read */
.done-band {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  width: min(680px, 100%);
  margin: 0 auto 30px;
  text-align: left;
}
.done-stat {
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.done-stat h3 {
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 14px;
}
.done-stat-rows { display: grid; gap: 9px; }
.done-stat-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.done-stat-rows dt { font-size: .84rem; color: var(--ink-2); }
.done-stat-rows dd { font-size: .86rem; font-weight: 700; text-align: right; }

.score-body { display: flex; align-items: center; gap: 16px; }
.score-gauge { position: relative; flex-shrink: 0; width: 110px; text-align: center; }
.score-gauge svg { display: block; width: 110px; height: auto; }
.score-num {
  display: block; margin-top: -38px;
  font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.score-band { display: block; font-size: .8rem; font-weight: 700; color: var(--success); }
.score-band.is-mid { color: #B45309; }
.score-what { display: block; font-size: .88rem; letter-spacing: -.01em; margin-bottom: 2px; }

.chance-body { display: flex; align-items: center; gap: 16px; }
.chance-ring { position: relative; flex-shrink: 0; width: 88px; height: 88px; }
.chance-ring svg { display: block; }
.chance-ring .ring-track { stroke: var(--surface-alt); }
.chance-ring .ring-val { stroke: var(--success); }
.chance-ring .pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.05rem; font-weight: 800; color: var(--success);
}
.chance-label { display: block; font-size: 1rem; font-weight: 800; color: var(--success); }

/* The chance ring is banded: under 40 red, 40-70 yellow, 70-85 amber, 85 up
   green. The stroke carries the vivid tone and the text a darker one of the
   same hue — yellow legible enough to be a ring is not legible enough to be
   1rem type on white. Same split the score gauge already makes with
   `.score-band.is-mid`. */
.chance-body.is-red .ring-val { stroke: #E23D3D; }
.chance-body.is-red .pct,
.chance-body.is-red .chance-label { color: #B91C1C; }

.chance-body.is-yellow .ring-val { stroke: #EFC431; }
.chance-body.is-yellow .pct,
.chance-body.is-yellow .chance-label { color: #A16207; }

.chance-body.is-amber .ring-val { stroke: #F08C2D; }
.chance-body.is-amber .pct,
.chance-body.is-amber .chance-label { color: #B45309; }

.chance-body.is-green .ring-val { stroke: #2F9E63; }
.chance-body.is-green .pct,
.chance-body.is-green .chance-label { color: var(--success); }
.chance-note { font-size: .8rem; line-height: 1.5; color: var(--ink-3); margin-top: 4px; }

/* journey on the left, reference and prep on the right */
.done-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px;
  margin: 0 auto 30px;
  text-align: left;
}
.done-grid h3 { font-size: .98rem; letter-spacing: -.01em; margin-bottom: 18px; }

.done-next { display: grid; gap: 0; }
.done-next li { position: relative; display: flex; gap: 16px; padding-bottom: 22px; }
.done-next .chip {
  margin-left: auto; align-self: flex-start; flex-shrink: 0;
  font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-alt); color: var(--ink-3); border: 1px solid var(--line);
}
.done-next .chip.is-live { background: var(--success-bg); color: var(--success); border-color: transparent; }

.done-refcard {
  align-self: start;
  padding: 22px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.done-refcard code {
  display: block; width: fit-content;
  font-family: ui-monospace, Menlo, monospace; font-size: 1.2rem; font-weight: 800;
  letter-spacing: .06em; color: var(--secondary);
  background: var(--surface-alt); padding: 8px 14px; border-radius: 8px;
  cursor: pointer; margin-bottom: 10px;
  transition: background var(--dur) var(--ease);
}
.done-refcard code:hover { background: var(--tint); }
.refcard-hint { font-size: .82rem; color: var(--ink-2); margin-bottom: 18px; }
.refcard-track { display: flex; justify-content: center; margin: -6px 0 18px; }
.done-refcard .done-stat-rows { margin-bottom: 18px; }
.done-refcard h4 { font-size: .86rem; margin-bottom: 10px; }
.done-refcard ul { display: grid; gap: 8px; margin-bottom: 18px; }
.done-refcard ul li {
  position: relative; padding-left: 18px;
  font-size: .84rem; line-height: 1.5; color: var(--ink-2);
}
.done-refcard ul li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); opacity: .55;
}
.done-secure { padding: 12px 14px; border-radius: var(--r-md); background: var(--success-bg); }
.done-secure strong { display: block; font-size: .84rem; color: var(--success); margin-bottom: 2px; }
.done-secure span { font-size: .8rem; line-height: 1.5; color: var(--ink-2); }

.done-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.done-trust strong { display: block; font-size: .88rem; letter-spacing: -.01em; }
.done-trust span { font-size: .78rem; color: var(--ink-3); }

@media (max-width: 760px) {
  .done-band, .done-grid { grid-template-columns: 1fr; }
  .done-trust { grid-template-columns: repeat(2, 1fr); text-align: left; }
}
.done-next li:last-child { padding-bottom: 0; }
.done-next li::before {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px;
  width: 1px; background: var(--line);
}
.done-next li:last-child::before { display: none; }
.done-next .n {
  position: relative; z-index: 1;
  flex-shrink: 0; display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-strong);
  font-size: .76rem; font-weight: 700;
}
.done-next strong { display: block; font-size: .95rem; letter-spacing: -.01em; margin-bottom: 2px; }
.done-next span { font-size: .86rem; line-height: 1.55; color: var(--ink-2); }

.flow-done .btn { width: min(var(--done-col), 100%); min-height: 54px; }

@media (prefers-reduced-motion: reduce) {
  .flow-done > * { animation: none; }
}

/* ==========================================================================
   Document upload
   ========================================================================== */
.drop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.drop { display: flex; flex-direction: column; }

.drop-zone {
  border: 1.5px dashed var(--line); border-radius: var(--r-md);
  padding: 20px; background: var(--surface); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.drop-zone:hover { border-color: var(--primary); background: var(--tint); }
.drop-zone.is-over {
  border-color: var(--primary); background: var(--tint);
  transform: scale(1.015);
}
.drop-zone:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.drop-head strong { display: block; font-size: .93rem; }
.drop-hint { font-size: .8rem; color: var(--ink-3); }
.drop-cue {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  font-size: .84rem; font-weight: 600; color: var(--primary);
}

.drop-file {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--success-bg); border: 1.5px solid rgba(5, 150, 105, .3);
  animation: flowIn .28s var(--ease);
}
.drop-name { font-size: .9rem; font-weight: 600; flex: 1; min-width: 0; word-break: break-all; }
.drop-size { font-size: .78rem; color: var(--ink-2); }
.drop-remove {
  font-size: .82rem; font-weight: 600; color: var(--danger);
  text-decoration: underline; text-underline-offset: 2px;
}
.drop.has-error .drop-zone { border-color: var(--danger); background: var(--danger-bg); }
.drop .error { margin-top: var(--sp-2); }
.drop.has-error .error { opacity: 1; visibility: visible; }

/* ==========================================================================
   Review
   ========================================================================== */
.review-list { display: grid; gap: 22px; }
.review-block {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 22px; background: var(--surface);
}
.review-block h3 { font-size: .95rem; margin-bottom: 14px; }
.review-block dl { display: grid; gap: 10px; }
.review-block dl > div {
  display: flex; justify-content: space-between; gap: 20px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.review-block dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.review-block dt { font-size: .85rem; color: var(--ink-2); }
.review-block dd { font-size: .88rem; font-weight: 600; text-align: right; }
.review-files { display: grid; gap: 8px; font-size: .87rem; }
.review-files .is-empty { color: var(--ink-3); font-style: italic; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .lp-hero-card { max-width: 520px; }
  .benefit-grid, .cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-grid, .elig-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .crit-grid, .doc-list, .drop-grid { grid-template-columns: 1fr; }
  .cp-steps { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cp-lenders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .lp-hero { padding: 44px 0 60px; }
  .benefit-grid, .cmp-grid { grid-template-columns: 1fr; }
  .lp-facts { grid-template-columns: 1fr 1fr; }
  .calc-panel, .calc-out, .elig-result { padding: 22px; }
  .sticky-inner { padding: 12px 16px; }
  .sticky-copy span { display: none; }
  .flow-steps li { font-size: .7rem; }
  .apply-body { padding: 24px 16px 64px; }
}

@media (max-width: 460px) {
  /* three lender tiles leave no room for the logos on a narrow phone */
  .cp-lenders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .callout-art img { width: 104px; }
  .lp-cta-row .btn { width: 100%; }
  .sticky-inner .btn { flex: 1; }
  .sticky-copy { display: none; }
  .review-block dl > div { flex-direction: column; gap: 3px; }
  .review-block dd { text-align: left; }
}

/* ---- confirmation, compacted -------------------------------------------
   Everything above the fold matters here, so the whole panel runs on tight
   rhythm. */
.flow-done { padding-top: 8px; }
.flow-done .success-mark { width: 54px; height: 54px; margin-bottom: 14px; }
.flow-done .success-mark::before { inset: -10px; }
.flow-done .flow-title { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
.flow-done .flow-sub { margin-bottom: 18px; font-size: .9rem; }

.done-callout { margin-bottom: 18px; padding: 12px 8px 0 16px; }
.done-callout > div { padding-bottom: 12px; }
.done-callout .ring { width: 38px; height: 38px; margin-bottom: 12px; }
.callout-art img { width: 118px; }

.done-band, .done-grid { margin-bottom: 18px; gap: 14px; }
.done-stat { padding: 14px 16px; }
.done-stat h3 { margin-bottom: 10px; }
.done-grid h3 { margin-bottom: 12px; }
.done-next li { padding-bottom: 14px; }
.done-next li::before { top: 27px; }
.done-refcard { padding: 18px; }
.done-refcard ul, .done-refcard .done-stat-rows, .refcard-hint { margin-bottom: 12px; }
.done-trust { margin-top: 18px; padding-top: 14px; gap: 12px; }

/* ---- confirmation, wide screens ----------------------------------------
   The apply body is capped at 860px, which on a desktop leaves half the
   window empty while the confirmation runs on for two screens. Above 1100px
   the panel takes the extra width on one shared measure, so the blocks stop
   wrapping and the whole result reads in roughly one screen. */
@media (min-width: 1100px) {
  .apply-body:has(.flow-done:not([hidden])) { max-width: 1080px; padding-bottom: 56px; }

  /* :not([hidden]) matters — an author display rule would otherwise beat the
     UA's [hidden] { display: none } and reveal the panel mid-flow. */
  .flow-done:not([hidden]) {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }
  /* one measure for every block: callout, band, journey and the
     action all share the same left and right edge, so the panel reads as a
     single column of cards rather than boxes of assorted widths. */
  .flow-done > * { width: 100%; max-width: none; margin-inline: 0; margin-bottom: 0; }
  .flow-done > .success-mark { width: 54px; justify-self: center; }
  .flow-done > .flow-sub { max-width: 34rem; justify-self: center; }
  .flow-done > .btn { justify-self: center; width: min(var(--done-col), 100%); }

  /* the reference card no longer needs to be the narrow leftover column */
  .done-grid { grid-template-columns: minmax(0, 1fr) 380px; }
}


/* ==========================================================================
   PAN gate — the basic step asks for a PAN, then reveals the rest
   ========================================================================== */
.pan-gate { display: flex; flex-direction: column; gap: 12px; }
.pan-gate:empty { display: none; }
.pan-gate-note { margin: 0; font-size: var(--text-small); color: var(--ink-2); }
.pan-gate-note:empty { display: none; }
.pan-gate-note.is-warn { color: var(--warning); }
.pan-gate-note.is-busy { color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
/* A spinner, drawn rather than shipped — the lookup is the only wait on this
   step and it needs to look like one. */
.pan-gate-note.is-busy::before {
  content: ''; width: 13px; height: 13px; flex-shrink: 0;
  border: 2px solid var(--line-strong); border-top-color: var(--primary);
  border-radius: 50%; animation: pan-spin .7s linear infinite;
}
@keyframes pan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pan-gate-note.is-busy::before { animation: none; border-top-color: var(--line-strong); }
}

/* Locked: taken from the PAN record and not the applicant's to change. */
.field.is-locked input,
.field.is-locked select { background: var(--surface-alt); color: var(--ink-2); cursor: not-allowed; }
/* .choice is only the wrapper; .choice-face is the pill you can see. */
fieldset.is-locked .choice-face,
.field.is-locked .choice-face {
  background: var(--surface-alt); color: var(--ink-2); cursor: not-allowed;
}
fieldset.is-locked .choice-face:hover,
.field.is-locked .choice-face:hover { border-color: var(--line); }
/* The unpicked option recedes rather than disappearing — it still says what
   the alternative was. */
fieldset.is-locked .choice input:not(:checked) + .choice-face { opacity: .5; }
fieldset.is-locked legend::after,
.field.is-locked > label::after {
  content: 'from PAN'; margin-left: 8px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-alt);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 6px;
}