/* ============================================
   Bravo HUD Express Lane Qualifier
   All styles scoped under .bel-root so nothing leaks out.
   Sibling of bravo-loan-form, with its own identity:
   Geist type, cool-toned surfaces, Express-Lane blue.
   ============================================ */

.bel-root {
  --bg: #F6F8FB;
  --bg-elev: #FFFFFF;
  --bg-sunken: #EEF2F7;
  --ink: #0B1220;
  --ink-2: #26303F;
  --ink-3: #647080;
  --ink-4: #98A2B3;
  --line: #E3E8F0;
  --line-2: #D2DAE6;
  --accent: #2E7CF5;
  --accent-2: #2568D6;
  --accent-tint: #EAF2FE;
  --dark: #05070C;
  --dark-2: #0B1220;
  --error: #B43A4E;
  --error-tint: #FBF1F3;
  --success: #1F8A5B;
  --success-tint: #EBF7F1;
  --warn: #9A6700;
  --warn-tint: #FBF4E4;

  --f-sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --r-input: 10px;
  --r-button: 10px;
  --r-card: 14px;

  --field-h: 48px;
  --field-px: 14px;
  --field-fs: 15px;

  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
}

.bel-root * { box-sizing: border-box; }

.bel-root .bel-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================
   Hero (dark, from the Express Lane campaign)
   ============================================ */

.bel-root .bel-hero{
  position: relative;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(46,124,245,0.38) 0%, rgba(46,124,245,0.10) 38%, rgba(5,7,12,0) 70%),
    linear-gradient(178deg, #16294A 0%, #0E1D36 32%, #0A1120 60%, #05070C 100%);
  color: #FFFFFF;
  text-align: center;
  padding: 72px 32px 64px;
  overflow: hidden;
}
.bel-root .bel-hero__glow{
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 900px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(46,124,245,0.22), rgba(46,124,245,0.05) 55%, rgba(46,124,245,0) 75%);
  pointer-events: none;
}
.bel-root .bel-hero__inner{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.bel-root .bel-hero__logo{ height: 56px; width: auto; display: block; }
.bel-root .bel-hero__eyebrow{
  margin-top: 34px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6FA4F9;
}
.bel-root .bel-hero__title{
  margin: 14px 0 0;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #FFFFFF;
}
.bel-root .bel-hero__sub{
  margin: 16px auto 0;
  max-width: 620px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  text-wrap: pretty;
}
.bel-root .bel-hero__big{
  margin-top: 44px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
}
.bel-root .bel-hero__big-num{
  font-size: clamp(110px, 16vw, 170px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
  background: linear-gradient(165deg, #F2F7FF 5%, #9EC2FF 35%, #2E7CF5 70%, #1A54C4 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bel-root .bel-hero__big-unit{
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  padding-bottom: 0.12em;
  margin-bottom: -0.32em;
  background: linear-gradient(165deg, #F2F7FF 10%, #9EC2FF 50%, #2E7CF5 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bel-root .bel-hero__big-caption{
  margin-top: 22px;
  font-size: 19px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
}
.bel-root .bel-hero__big-caption strong{ color: #FFFFFF; font-weight: 600; }

.bel-root .bel-hero__stats{
  margin-top: 52px;
  width: 100%;
  max-width: 820px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
}
.bel-root .bel-hero__stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 18px;
}
.bel-root .bel-hero__stat + .bel-hero__stat{ border-left: 1px solid rgba(255,255,255,0.12); }
.bel-root .bel-hero__stat-num{ font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: #FFFFFF; }
.bel-root .bel-hero__stat-num.is-gradient{
  background: linear-gradient(165deg, #C7DEFF 10%, #6FA4F9 55%, #2E7CF5 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bel-root .bel-hero__stat-label{ font-size: 14px; font-weight: 500; line-height: 1.4; color: rgba(255,255,255,0.5); }

.bel-root .bel-hero__actions{ margin-top: 48px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.bel-root .bel-hero__cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #FFFFFF;
  border: 0;
  border-radius: 999px;
  padding: 16px 32px;
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.bel-root .bel-hero__cta:hover{ background: var(--accent-2); color: #FFFFFF; }
.bel-root .bel-hero__cta--ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.9);
}
.bel-root .bel-hero__cta--ghost:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
.bel-root .bel-hero__cta--xl{ font-size: 18px; padding: 20px 44px; }

@media (max-width: 700px) {
  .bel-root .bel-hero{ padding: 48px 20px 44px; }
  .bel-root .bel-hero__stats{ grid-template-columns: 1fr; gap: 20px; }
  .bel-root .bel-hero__stat + .bel-hero__stat{ border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; }
}

/* ============================================
   Explainer (light)
   ============================================ */

.bel-root .bel-info{
  background: var(--bg-elev);
  padding: 64px 48px;
  border-bottom: 1px solid var(--line);
}
.bel-root .bel-info__grid{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  max-width: 1040px;
  margin: 0 auto;
}
.bel-root .bel-info__title{
  margin: 14px 0 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.bel-root .bel-info__body{ margin-top: 16px; font-size: 15px; line-height: 1.65; color: var(--ink-3); }
.bel-root .bel-info__body p{ margin: 0 0 14px; }
.bel-root .bel-info__body strong{ color: var(--ink); font-weight: 600; }

.bel-root .bel-timeline{ margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.bel-root .bel-timeline__row{ display: flex; flex-direction: column; gap: 7px; }
.bel-root .bel-timeline__meta{ display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.bel-root .bel-timeline__name{ font-weight: 600; color: var(--ink-2); }
.bel-root .bel-timeline__val{ color: var(--ink-3); font-weight: 500; }
.bel-root .bel-timeline__bar{ height: 10px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.bel-root .bel-timeline__fill{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6FA4F9, var(--accent)); }
.bel-root .bel-timeline__fill.is-express{ background: linear-gradient(90deg, #6FA4F9, var(--accent)); }
.bel-root .bel-timeline__note{ font-size: 12px; color: var(--ink-4); }

.bel-root .bel-criteria{ display: flex; flex-direction: column; }
.bel-root .bel-criteria__head{ margin-bottom: 10px; }
.bel-root .bel-criteria__list{ display: flex; flex-direction: column; margin-top: 8px; }
.bel-root .bel-criterion{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.bel-root .bel-criterion:last-child{ border-bottom: 0; }
.bel-root .bel-criterion__icon{
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 600;
}
.bel-root .bel-criterion__title{ font-size: 15px; font-weight: 600; color: var(--ink); }
.bel-root .bel-criterion__sub{ font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }
.bel-root .bel-info__foot{
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-4);
}

@media (max-width: 900px) {
  .bel-root .bel-info{ padding: 44px 24px; }
  .bel-root .bel-info__grid{ grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================
   Tool shell + topbar
   ============================================ */

.bel-root .bel-tool{ padding: 40px 48px 56px; }
@media (max-width: 900px) { .bel-root .bel-tool { padding: 28px 20px 40px; } }

.bel-root .bel-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--line);
}
.bel-root .bel-brand{ display: flex; align-items: center; gap: 12px; }
.bel-root .bel-brand__mark{
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--dark-2);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bel-root .bel-brand__name{ font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.bel-root .bel-brand__sub{
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  padding-left: 12px;
  margin-left: 2px;
  border-left: 1px solid var(--line-2);
}
.bel-root .bel-topbar__pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-elev);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.bel-root .bel-topbar__pill-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (max-width: 700px) {
  .bel-root .bel-topbar{ flex-direction: column; align-items: flex-start; }
}

/* ============================================
   Wizard layout: rail / main / scorecard
   ============================================ */

.bel-root .bel-wizard{
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 290px;
  gap: 36px;
  padding-top: 32px;
}
.bel-root .bel-wizard__rail{ border-right: 1px solid var(--line); padding-right: 24px; }
.bel-root .bel-wizard__main{ min-width: 0; padding-bottom: 8px; }
.bel-root .bel-wizard__aside{ border-left: 1px solid var(--line); padding-left: 28px; }

@media (max-width: 1080px) {
  .bel-root .bel-wizard{ grid-template-columns: 200px minmax(0, 1fr); }
  .bel-root .bel-wizard__aside{ display: none; }
}
@media (max-width: 760px) {
  .bel-root .bel-wizard{ grid-template-columns: 1fr; gap: 20px; }
  .bel-root .bel-wizard__rail{ border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 16px; }
}

/* Stepper */
.bel-root .bel-stepper{ display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.bel-root .bel-step-btn{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 9px 0;
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  position: relative;
  font-family: var(--f-sans);
}
.bel-root .bel-step-btn__num{
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--bg-elev);
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  color: var(--ink-3);
  transition: all 0.2s ease;
}
.bel-root .bel-step-btn__body{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bel-root .bel-step-btn__title{ font-size: 13px; font-weight: 500; color: var(--ink-2); }
.bel-root .bel-step-btn__sub{ font-size: 11px; color: var(--ink-4); }
.bel-root .bel-step-btn.step--current .bel-step-btn__num{ background: var(--accent); border-color: var(--accent); color: #fff; }
.bel-root .bel-step-btn.step--current .bel-step-btn__title{ color: var(--ink); font-weight: 600; }
.bel-root .bel-step-btn.step--done .bel-step-btn__num{ background: var(--accent-tint); border-color: var(--accent-tint); color: var(--accent); }
.bel-root .bel-step-btn + .bel-step-btn::before{
  content: "";
  position: absolute;
  left: 12px;
  top: -9px;
  width: 1px;
  height: 18px;
  background: var(--line-2);
}

.bel-root .bel-rail-help{ margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.bel-root .bel-rail-help__body{ font-size: 12px; color: var(--ink-3); line-height: 1.55; margin-top: 8px; }
.bel-root .bel-rail-help__body a{ color: var(--accent); text-decoration: none; }
.bel-root .bel-rail-help__body a:hover{ text-decoration: underline; }

/* ============================================
   Steps, headings, fields
   ============================================ */

.bel-root .bel-panel[data-bel-step]{ display: block; }
.bel-root .bel-panel[data-bel-step][hidden]{ display: none; }

.bel-root .bel-section-head{ margin-bottom: 26px; }
.bel-root .bel-title{
  margin: 12px 0 10px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
}
.bel-root .bel-desc{ font-size: 15px; color: var(--ink-3); margin: 0; max-width: 58ch; }

.bel-root .bel-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px 16px;
  margin-bottom: 8px;
}
.bel-root .col-12 { grid-column: span 12; }
.bel-root .col-6  { grid-column: span 6; }
.bel-root .col-4  { grid-column: span 4; }
@media (max-width: 640px) {
  .bel-root .col-6,  .bel-root .col-4 { grid-column: span 12; }
}

.bel-root .bel-field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.bel-root .bel-label{ font-size: 13px; font-weight: 500; color: var(--ink-2); }
.bel-root .bel-label .req{ color: var(--accent); margin-left: 2px; }
.bel-root .bel-hint{ font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.bel-root .bel-error-msg{ font-size: 12px; color: var(--error); display: none; }
.bel-root .bel-field.is-error .bel-error-msg{ display: block; }

.bel-root .bel-input{
  width: 100%;
  height: var(--field-h);
  padding: 0 var(--field-px);
  border: 1px solid var(--line-2);
  background: var(--bg-elev);
  border-radius: var(--r-input);
  font: inherit;
  font-size: var(--field-fs);
  color: var(--ink);
  font-family: var(--f-sans);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bel-root .bel-input::placeholder{ color: var(--ink-4); }
.bel-root .bel-input:hover{ border-color: var(--ink-4); }
.bel-root .bel-input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.bel-root .bel-field.is-error .bel-input{ border-color: var(--error); background: var(--error-tint); }
.bel-root select.bel-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23647080' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.bel-root .bel-input-wrap{ position: relative; }
.bel-root .bel-input-wrap[data-prefix] .bel-input{ padding-left: 28px; }
.bel-root .bel-input-wrap[data-prefix]::before{
  content: attr(data-prefix);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-feature-settings: "tnum" 1;
  color: var(--ink-3);
}
.bel-root .bel-input-wrap[data-suffix] .bel-input{ padding-right: 34px; }
.bel-root .bel-input-wrap[data-suffix]::after{
  content: attr(data-suffix);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ink-3);
}

/* Live computed readout (LTV) */
.bel-root .bel-compute{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-input);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
}
.bel-root .bel-compute__val{ font-size: 16px; font-weight: 600; font-feature-settings: "tnum" 1; color: var(--ink); }
.bel-root .bel-compute.is-pass{ background: var(--success-tint); border-color: #CBE8DA; }
.bel-root .bel-compute.is-pass .bel-compute__val{ color: var(--success); }
.bel-root .bel-compute.is-fail{ background: var(--error-tint); border-color: #EFD3D9; }
.bel-root .bel-compute.is-fail .bel-compute__val{ color: var(--error); }

/* Radio cards */
.bel-root .bel-radio-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.bel-root .bel-radio-cards--stack{ grid-template-columns: 1fr; }
.bel-root .bel-radio-card{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px 13px 42px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-input);
  background: var(--bg-elev);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.bel-root .bel-radio-card:hover{ border-color: var(--ink-4); }
.bel-root .bel-radio-card input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
.bel-root .bel-radio-card::before{
  content: "";
  position: absolute;
  left: 15px;
  top: 17px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: var(--bg-elev);
  transition: all 0.15s ease;
}
.bel-root .bel-radio-card:has(input:checked){ border-color: var(--accent); background: var(--accent-tint); }
.bel-root .bel-radio-card:has(input:checked)::before{
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent-tint);
}
.bel-root .bel-radio-card__title{ font-size: 14px; font-weight: 500; color: var(--ink); }
.bel-root .bel-radio-card__sub{ font-size: 12px; color: var(--ink-3); line-height: 1.45; }

/* Checkbox (consent) */
.bel-root .bel-consent{ display: flex; flex-direction: column; gap: 12px; margin: 18px 0 0; }
.bel-root .bel-checkbox{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  position: relative;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: var(--r-input);
}
.bel-root .bel-checkbox.is-error{ background: var(--error-tint); }
.bel-root .bel-checkbox.is-error .bel-checkbox__box{ border-color: var(--error); }
.bel-root .bel-checkbox input{ position: absolute; opacity: 0; pointer-events: none; }
.bel-root .bel-checkbox__box{
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line-2);
  background: var(--bg-elev);
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: all 0.15s ease;
}
.bel-root .bel-checkbox input:checked + .bel-checkbox__box{ background: var(--accent); border-color: var(--accent); }
.bel-root .bel-checkbox input:checked + .bel-checkbox__box::after{
  content: "";
  position: absolute;
  left: 4px; top: 3px;
  width: 8px; height: 4px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}
.bel-root .bel-consent [data-bel-consent-error]{
  display: none;
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: var(--r-input);
  background: var(--error-tint);
  border: 1px solid var(--error);
  color: var(--error);
  font-size: 13px;
  font-weight: 500;
}

/* Nav */
.bel-root .bel-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.bel-root .bel-nav__meta{ font-size: 12px; font-weight: 500; color: var(--ink-3); }
.bel-root .bel-nav__right{ display: flex; gap: 12px; align-items: center; }
.bel-root .bel-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--r-button);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--f-sans);
  transition: all 0.15s ease;
}
.bel-root .bel-btn[hidden]{ display: none; }
.bel-root .bel-btn--primary{ background: var(--accent); color: #fff; border-color: var(--accent); }
.bel-root .bel-btn--primary:hover{ background: var(--accent-2); border-color: var(--accent-2); }
.bel-root .bel-btn--primary:disabled{ opacity: 0.6; cursor: progress; }
.bel-root .bel-btn--ghost{ background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.bel-root .bel-btn--ghost:hover{ border-color: var(--ink-4); }

.bel-root .bel-form-error{
  padding: 12px 16px;
  border-radius: var(--r-input);
  background: var(--error-tint);
  border: 1px solid var(--error);
  color: var(--error);
  font-size: 13px;
  margin-top: 20px;
}
.bel-root .bel-form-error[hidden]{ display: none; }

/* ============================================
   Scorecard (right rail)
   ============================================ */

.bel-root .bel-scorecard{ position: sticky; top: 16px; }
.bel-root .bel-scorecard__gauge{
  border-radius: var(--r-card);
  background: var(--dark);
  color: #fff;
  padding: 18px;
  margin: 12px 0 18px;
  position: relative;
  overflow: hidden;
}
.bel-root .bel-scorecard__gauge::after{
  content: "";
  position: absolute;
  top: -60px; right: -80px;
  width: 240px; height: 200px;
  background: radial-gradient(ellipse at center, rgba(46,124,245,0.5), rgba(46,124,245,0) 70%);
  pointer-events: none;
}
.bel-root .bel-scorecard__gauge-label{ font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
.bel-root .bel-scorecard__gauge-value{ font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; position: relative; z-index: 1; }
.bel-root .bel-scorecard__gauge-sub{ font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 6px; position: relative; z-index: 1; }
.bel-root .bel-scorecard__bar{ margin-top: 14px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; position: relative; z-index: 1; }
.bel-root .bel-scorecard__bar-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6FA4F9, #2E7CF5);
  transition: width 0.35s ease;
}

.bel-root .bel-scorecard__list{ display: flex; flex-direction: column; margin-top: 10px; }
.bel-root .bel-check{
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.bel-root .bel-check:last-child{ border-bottom: 0; }
.bel-root .bel-check__dot{
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-sunken);
  color: var(--ink-4);
  border: 1px solid var(--line-2);
}
.bel-root .bel-check__label{ color: var(--ink-2); font-weight: 500; }
.bel-root .bel-check__val{ color: var(--ink-4); font-size: 12px; font-feature-settings: "tnum" 1; }
.bel-root .bel-check.is-pass .bel-check__dot{ background: var(--success-tint); color: var(--success); border-color: transparent; }
.bel-root .bel-check.is-pass .bel-check__val{ color: var(--success); font-weight: 600; }
.bel-root .bel-check.is-fail .bel-check__dot{ background: var(--error-tint); color: var(--error); border-color: transparent; }
.bel-root .bel-check.is-fail .bel-check__val{ color: var(--error); font-weight: 600; }
.bel-root .bel-check.is-na{ opacity: 0.45; }

/* ============================================
   Results
   ============================================ */

.bel-root .bel-results[hidden]{ display: none; }
.bel-root .bel-results{ padding-top: 32px; max-width: 760px; margin: 0 auto; }
.bel-root .bel-verdict{
  border-radius: var(--r-card);
  padding: 32px;
  color: #fff;
  background: var(--dark);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.bel-root .bel-verdict::after{
  content: "";
  position: absolute;
  top: -120px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 340px;
  background: radial-gradient(ellipse at center, rgba(46,124,245,0.45), rgba(46,124,245,0) 70%);
  pointer-events: none;
}
.bel-root .bel-verdict--fail::after{ background: radial-gradient(ellipse at center, rgba(152,162,179,0.35), rgba(152,162,179,0) 70%); }
.bel-root .bel-verdict > *{ position: relative; z-index: 1; }
.bel-root .bel-verdict__eyebrow{ font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #6FA4F9; }
.bel-root .bel-verdict--fail .bel-verdict__eyebrow{ color: rgba(255,255,255,0.5); }
.bel-root .bel-verdict__title{ margin: 12px 0 10px; font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.bel-root .bel-verdict__sub{ font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 52ch; margin: 0 auto; }
.bel-root .bel-verdict__score{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}

.bel-root .bel-results__h{ font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 34px 0 6px; }
.bel-root .bel-result-row{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.bel-root .bel-result-row:last-child{ border-bottom: 0; }
.bel-root .bel-result-row__dot{
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}
.bel-root .bel-result-row.is-pass .bel-result-row__dot{ background: var(--success-tint); color: var(--success); }
.bel-root .bel-result-row.is-fail .bel-result-row__dot{ background: var(--error-tint); color: var(--error); }
.bel-root .bel-result-row__title{ font-size: 15px; font-weight: 600; color: var(--ink); }
.bel-root .bel-result-row__detail{ font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.55; }
.bel-root .bel-result-row__fix{
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--warn-tint);
  border: 1px solid #EBDCB2;
  font-size: 13px;
  line-height: 1.55;
  color: var(--warn);
}
.bel-root .bel-result-row__fix strong{ font-weight: 600; }

.bel-root .bel-results__cta{
  margin-top: 36px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.bel-root .bel-results__cta-title{ font-size: 17px; font-weight: 600; color: var(--ink); }
.bel-root .bel-results__cta-sub{ font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }
.bel-root .bel-results__cta .bel-btn{ flex-shrink: 0; }
.bel-root .bel-results__ref{
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
}
.bel-root .bel-results__ref code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--ink-2);
}
.bel-root .bel-results__again{
  display: block;
  margin: 14px auto 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
}
.bel-root .bel-results__again:hover{ text-decoration: underline; }

.bel-root .bel-disclaimer{ margin-top: 30px; font-size: 11.5px; line-height: 1.6; color: var(--ink-4); }

/* When results are showing, hide the wizard */
.bel-root.is-complete .bel-wizard,
.bel-root.is-complete .bel-nav { display: none; }


/* ============================================
   Theme-proofing: neutralize aggressive theme
   styles (Salient, Divi, Elementor, …) that target
   bare elements, sometimes with ID-level selectors.
   The widget must win inside .bel-root.
   ============================================ */

.bel-root h1, .bel-root h2, .bel-root h3, .bel-root h4 {
  font-family: var(--f-sans) !important;
  color: inherit !important;
  text-transform: none !important;
  border: 0 !important;
  background: none !important;
}
.bel-root p {
  font-family: var(--f-sans) !important;
  text-transform: none !important;
}
.bel-root label {
  font-family: var(--f-sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
}
.bel-root button {
  font-family: var(--f-sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background-image: none !important;
  box-shadow: none !important;
}
.bel-root a {
  box-shadow: none !important;
  background-image: none !important;
  border-bottom: 0 !important;
}
.bel-root input.bel-input,
.bel-root select.bel-input,
.bel-root textarea.bel-input {
  height: var(--field-h) !important;
  padding: 0 var(--field-px) !important;
  border: 1px solid var(--line-2) !important;
  background-color: var(--bg-elev) !important;
  border-radius: var(--r-input) !important;
  font-family: var(--f-sans) !important;
  font-size: var(--field-fs) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  line-height: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  opacity: 1 !important;
}
.bel-root select.bel-input { padding-right: 36px !important; }
.bel-root .bel-input-wrap[data-prefix] .bel-input { padding-left: 28px !important; }
.bel-root .bel-input-wrap[data-suffix] .bel-input { padding-right: 34px !important; }
.bel-root .bel-input:focus { border-color: var(--accent) !important; }
.bel-root .bel-field.is-error .bel-input {
  border-color: var(--error) !important;
  background-color: var(--error-tint) !important;
}
.bel-root .bel-hero__logo { height: 56px !important; width: auto !important; max-width: none !important; }
.bel-root [hidden] { display: none !important; }


/* wpautop guards: if the theme's content filters still inject markup */
.bel-root p:empty { display: none !important; margin: 0 !important; padding: 0 !important; }
.bel-root p { padding: 0 !important; }

/* Heading locks: Salient sizes h1/h2 with high-specificity + !important rules */
.bel-root .bel-hero__title { font-size: clamp(34px, 5vw, 54px) !important; margin: 14px 0 0 !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; }
.bel-root .bel-info__title { font-size: 32px !important; margin: 14px 0 0 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
.bel-root .bel-title { font-size: 32px !important; margin: 12px 0 10px !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; }
.bel-root .bel-verdict__title { font-size: 34px !important; margin: 12px 0 10px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }

/* ============================================
   Hero video background + semi-transparent gradient scrim
   ============================================ */
.bel-root .bel-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; margin: 0; padding: 0;
  z-index: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
.bel-root .bel-hero.is-video-ready .bel-hero__video { opacity: 1; }
.bel-root .bel-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .8s ease;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(46,124,245,0.38) 0%, rgba(46,124,245,0.10) 38%, rgba(5,7,12,0) 70%),
    linear-gradient(178deg, #16294A 0%, #0E1D36 32%, #0A1120 60%, #05070C 100%);
}
.bel-root .bel-hero.is-video-ready .bel-hero__scrim { opacity: var(--bel-scrim-opacity, 0.85); }
.bel-root .bel-hero__glow { z-index: 1; }
.bel-root .bel-hero__inner { position: relative; z-index: 2; }
.bel-root .bel-hero.is-video-ready .bel-hero__title { text-shadow: 0 2px 26px rgba(3,6,12,0.55); }
.bel-root .bel-hero.is-video-ready .bel-hero__sub { text-shadow: 0 1px 18px rgba(3,6,12,0.6); }

/* Scorecard progress state (answered, not scored) */
.bel-root .bel-check.is-answered .bel-check__dot { background: var(--accent-tint); color: var(--accent); border-color: transparent; }
.bel-root .bel-check.is-answered .bel-check__val { color: var(--accent); font-weight: 600; }

/* Record comparison (replaces the misleading timeline bars) */
.bel-root .bel-compare { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.bel-root .bel-compare__cap { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px; }
.bel-root .bel-compare__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elev); }
.bel-root .bel-compare__label { font-size: 14px; font-weight: 500; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.bel-root .bel-compare__val { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-3); white-space: nowrap; font-feature-settings: "tnum" 1; }
.bel-root .bel-compare__val span { font-size: 12px; font-weight: 500; color: var(--ink-4); margin-left: 3px; }
.bel-root .bel-compare__row--hero { background: var(--dark); border-color: var(--dark); }
.bel-root .bel-compare__row--hero .bel-compare__label { color: #fff; font-weight: 600; }
.bel-root .bel-compare__row--hero .bel-compare__val { color: #fff; font-size: 30px; }
.bel-root .bel-compare__row--hero .bel-compare__val span { color: rgba(255,255,255,0.6); }
.bel-root .bel-compare__badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 9px; border-radius: 999px; }


/* Terms card */
.bel-root .bel-terms {
  border: 1px solid var(--line-2);
  border-radius: var(--r-input);
  background: var(--bg-elev);
  overflow: hidden;
}
.bel-root .bel-terms__head {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
}
.bel-root .bel-terms__body {
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-3);
}