/* FundReady — component layer.
   Loaded after tokens.css by index.html, analyze.html and results.html. Those three pages
   share every surface below, which is why the results screen is no longer duplicated between
   analyze.html and results.html: both mount the same markup, styled once here and rendered by
   fundready-results.js.

   Design reference: offer-radar/site/landing.html (marketing register) and bank.html (content
   register). Figtree throughout, JetBrains Mono for small uppercase labels, Instrument Serif
   italic for the one emotional phrase in a section. Navy canvas, blue as the working accent.

   Lime is not a highlight colour. It marks a live 0% offer, or the single primary action on a
   screen — nothing else. In this file that is exactly three buttons: .btn-submit (the wizard's
   commit step), .r-reco-btn (page 2) and .r-cta-primary (page 3), you are probably wrong. */

/* ── 1. Semantic layer ──────────────────────────────────────────────────────
   FundReady's own colour names, resolved onto the Radar tokens so the values live in one
   place. --blue / --blue-2 / --blue-deep / --lime / --ink / --sand come straight from
   tokens.css and are used with their Radar meanings. */
:root{
  --navy:        var(--bg);
  --navy-mid:    var(--bg-2);
  --navy-light:  var(--bg-3);
  --gray:        var(--ink-3);
  --accent:      var(--lime);
  --accent-dark: var(--lime-2);

  /* Score status ramp. Four steps, because the scoring engine emits four
     (green ≥80%, yellow ≥55%, orange ≥35%, red below). Lime is deliberately absent:
     it was doing duty as the "yellow" tier, which is exactly the misuse the rule forbids. */
  --st-green:  #00c875;
  --st-amber:  var(--amber);
  --st-orange: #ff8f4d;
  --st-coral:  var(--coral);
  /* legacy aliases used by older rules */
  --red:       var(--coral);
  --green-ok:  #00c875;
  --orange:    #ff8f4d;
}

/* ── 2. Base ────────────────────────────────────────────────────────────────── */
html{ scroll-behavior:smooth; background:var(--bg); }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:var(--sans);
  font-size:16px; line-height:1.5; letter-spacing:-.005em;
  background:var(--bg) radial-gradient(1200px 700px at 80% -10%,rgba(4,85,255,.20),transparent 60%) no-repeat;
  color:var(--ink);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-weight:500; letter-spacing:-.035em; line-height:1.05; text-wrap:balance; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
footer{
  text-align:center; padding:40px 24px 56px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); border-top:1px solid var(--line);
}

/* ── 3. Shell, wizard and results ───────────────────────────────────────────── */
/* ── PROGRESS BAR ── */
.progress-wrap {
  background: var(--navy-mid);
  border-bottom: 1px solid rgba(4,85,255,0.2);
  display: flex;
  align-items: center;
  padding: 0 24px;
  min-height: 64px;
  position: relative;
}
.progress-wrap-inner {
  display: contents;
}
.progress-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
  text-decoration: none;
  z-index: 1;
}
.progress-inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 760px;
  width: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.progress-inner .progress-step { pointer-events: auto; }
.progress-step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 0;
}
.step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.step-done .step-num  { background: var(--blue-2); color: white; }
.step-active .step-num {
  background: var(--blue-2); color: white;
  box-shadow: 0 0 0 3px rgba(4,85,255,0.25);
  animation: stepPulse 2s ease-in-out infinite;
}
@keyframes stepPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(4,85,255,0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(4,85,255,0.12), 0 0 20px rgba(4,85,255,0.28); }
}
.step-pending .step-num {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.1);
}
.step-label { display: flex; flex-direction: column; gap: 1px; }
.step-label .sl-step {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.step-done .sl-step, .step-active .sl-step { color: var(--blue); }
.step-pending .sl-step { color: rgba(255,255,255,0.25); }
.step-label .sl-name { font-size: 11px; font-weight: 600; }
.sl-short { display: none; }
.step-done .sl-name   { color: rgba(255,255,255,0.6); }
.step-active .sl-name { color: var(--ink); }
.step-pending .sl-name{ color: rgba(255,255,255,0.22); }

@media (max-width: 560px) {
  .progress-step { flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; }
  .step-label { align-items: center; text-align: center; }
  .step-label .sl-step { display: none; }
  .step-label .sl-name { font-size: 9px; line-height: 1.2; white-space: nowrap; }
  .sl-full { display: none; }
  .sl-short { display: inline; }
  /* only the wizard header needs the room — the landing header keeps its wordmark */
  .progress-wrap .logo-wordmark { display: none; }
  .progress-wrap .logo-byline { display: none; }
  .site-header .logo-byline { display: none; }
  /* Shift steps to start after the logo icon so they don't overlap */
  .progress-inner {
    left: 56px;
    right: 0;
    width: auto;
    transform: none;
    padding: 0 12px 0 8px;
  }
}

/* ── HEADER ── */
.site-header {
  border-bottom: 1px solid rgba(4,85,255,0.12);
  padding: 14px 32px;
  display: flex;
  align-items: center;
}
.logo-lockup { display: flex; flex-direction: column; gap: 2px; }
.logo-fundready {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-icon {
  width: 28px; height: 28px;
  background: var(--blue-2);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-wordmark {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
}
.logo-wordmark span { color: inherit; }
.logo-tm { color: var(--ink-3); font-size: 0.6em; font-weight: 400; vertical-align: super; }
.logo-byline {
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  padding-left: 36px;
}

/* ── MAIN CARD ── */
.main-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ── STEPS (show/hide) ── */
.form-step { display: none; }
.form-step.active { display: block; }

.step-eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.step-title {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  margin-bottom: 6px;
}
.step-desc {
  font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 28px;
}

/* ── FORM FIELDS ── */
.field-wrap { margin-bottom: 14px; }
.field-label {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.stripe-input, .stripe-select {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(4,85,255,0.3);
  border-radius: 9px;
  padding: 14px 16px;
  color: white;
  font-size: 15px;
  font-family: var(--sans);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.stripe-input:focus, .stripe-select:focus {
  border-color: var(--blue-2);
  box-shadow: 0 0 0 3px rgba(46,114,255,0.18);
}
.stripe-input::placeholder { color: rgba(255,255,255,0.28); }
.stripe-select option { background: var(--navy-mid); color: white; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

/* ── CREDIT CARD ROWS (Step 2 — auto-populated) ── */
.card-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(4,85,255,0.18);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
}
.card-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.card-creditor-input {
  flex: 1;
  min-width: 130px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(4,85,255,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--sans);
  outline: none;
  transition: border-color 0.2s;
}
.card-creditor-input:focus { border-color: var(--blue-2); }
.card-creditor-input::placeholder { color: rgba(255,255,255,0.28); }
.card-type-toggle {
  display: flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.type-pill {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  transition: all 0.15s;
  font-family: var(--sans);
}
.type-pill.active[data-type="personal"] { background: var(--blue-2); color: white; }
.type-pill.active[data-type="business"] { background: var(--blue-2); color: white; }
.type-pill.active[data-type="auth-user"] { background: rgba(46,114,255,0.14); color: var(--blue-2); border-color: rgba(46,114,255,0.45); }
.tier1-badge {
  background: rgba(0,200,117,0.12);
  color: var(--green-ok);
  border: 1px solid rgba(0,200,117,0.3);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  flex-shrink: 0;
}
.tier2-badge {
  background: rgba(255,184,77,0.12);
  color: var(--st-amber);
  border: 1px solid rgba(255,184,77,0.3);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  flex-shrink: 0;
}
.dollar-input-wrap { position: relative; }
.dollar-sign {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.35);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}
.dollar-input-wrap .stripe-input { padding-left: 24px; }
.util-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.util-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 100px;
  overflow: hidden;
}
.util-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.3s ease, background 0.3s ease;
}
.util-pct {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.3s;
  min-width: 70px;
  text-align: right;
}
.cards-found-note {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(4,85,255,0.07);
  border: 1px solid rgba(4,85,255,0.2);
  border-radius: 10px;
}
.biz-cards-note {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin: 12px 0 4px;
  padding-left: 2px;
}

/* ── STEP 1 INLINE LOADER ── */
.step1-loader {
  display: none;
  text-align: center;
  padding: 48px 0 32px;
}
.step1-loader.active { display: block; }
.step1-loader .spinner { width: 44px; height: 44px; margin: 0 auto 20px; }
.step1-loader-msg { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.step1-loader-sub { font-size: 13px; color: rgba(255,255,255,0.4); }
.step1-loader-prog {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 20px;
}
.step1-prog-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background 0.3s;
}
.step1-prog-dot.active { background: var(--blue-2); }
.step1-prog-dot.done   { background: var(--green-ok); }

/* ── REPEATING ROWS (bank accounts) ── */
.repeat-section { margin-bottom: 20px; }
.repeat-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(4,85,255,0.18);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 10px;
  position: relative;
}
.repeat-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.repeat-row-label {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.remove-row-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.3); font-size: 18px; line-height: 1;
  padding: 0 4px;
  transition: color 0.15s;
}
.remove-row-btn:hover { color: var(--red); }
.add-row-btn {
  background: none;
  border: 1px dashed rgba(4,85,255,0.4);
  border-radius: 9px;
  width: 100%;
  padding: 11px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.add-row-btn:hover {
  background: rgba(4,85,255,0.08);
  border-color: rgba(4,85,255,0.6);
}

/* ── ADDITIONAL ENTITIES ── */
.add-entity-btn {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 1px dashed rgba(4,85,255,0.35);
  border-radius: 9px; padding: 10px 16px; width: 100%;
  color: var(--blue); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  margin-top: 14px; font-family: var(--sans);
}
.add-entity-btn:hover { background: rgba(4,85,255,0.07); border-color: rgba(4,85,255,0.6); }
.extra-entity-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 14px 16px 16px; margin-top: 10px;
}
.extra-entity-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.extra-entity-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.remove-entity-btn {
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.25);
  font-size: 18px; line-height: 1; padding: 0 2px; transition: color 0.15s;
  font-family: var(--sans);
}
.remove-entity-btn:hover { color: var(--red); }
.extra-entity-card .radio-group { gap: 6px; }
.extra-entity-card .radio-option label { padding: 9px 10px; font-size: 12px; }
.extra-entity-card .stripe-select { margin-top: 8px; font-size: 13px; padding: 10px 14px; }

/* ── RADIO TOGGLE ── */
.radio-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.radio-option {
  flex: 1;
  min-width: 110px;
}
.radio-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-option label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(4,85,255,0.25);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
}
.radio-option input:checked + label {
  background: rgba(4,85,255,0.18);
  border-color: var(--blue-2);
  color: var(--ink);
}
.radio-option label:hover {
  background: rgba(4,85,255,0.1);
  border-color: rgba(4,85,255,0.5);
}

/* ── SCORIQ PROMO BANNER ── */
.scoreiq-banner {
  background: rgba(46,114,255,0.07);
  border: 1px solid rgba(46,114,255,0.25);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}
.scoreiq-banner-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.scoreiq-banner-text { flex: 1; }
.scoreiq-banner-text strong { font-size: 13px; font-weight: 600; color: var(--ink); display: block; margin-bottom: 4px; }
.scoreiq-banner-text p { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.55; }
.scoreiq-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  background: linear-gradient(180deg,#4f88ff,var(--blue-2));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 7px;
  text-decoration: none;
  transition: background 0.15s;
}
.scoreiq-link:hover { background: var(--accent-dark); }

/* ── FILE UPLOAD ── */
.file-upload-area {
  position: relative;
  border: 2px dashed rgba(4,85,255,0.35);
  border-radius: 12px;
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 8px;
}
.file-upload-area:hover, .file-upload-area.drag-over {
  border-color: rgba(4,85,255,0.7);
  background: rgba(4,85,255,0.06);
}
.file-upload-area input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.upload-icon { font-size: 36px; margin-bottom: 10px; }
.upload-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.upload-sub   { font-size: 12px; color: rgba(255,255,255,0.4); }
.file-selected {
  display: none;
  align-items: center;
  gap: 10px;
  background: rgba(0,200,117,0.1);
  border: 1px solid rgba(0,200,117,0.35);
  border-radius: 9px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-ok);
  margin-bottom: 8px;
}
.file-selected.visible { display: flex; }

/* ── NAVIGATION BUTTONS ── */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 32px;
}
.btn-back {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 9px;
  padding: 13px 24px;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-back:hover { border-color: rgba(255,255,255,0.35); color: var(--ink); }
.btn-next {
  flex: 1;
  background: var(--blue-2);
  border: none;
  border-radius: 9px;
  padding: 15px 28px;
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-next:hover { background: var(--blue); transform: translateY(-1px); }
.btn-submit {
  flex: 1;
  background: linear-gradient(180deg,#d3ff8f,var(--lime) 55%,#b2f25a);
  border: none;
  border-radius: 999px;
  padding: 17px 28px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-submit:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-1px); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── ERROR MESSAGE ── */
.error-msg {
  background: rgba(255,68,68,0.1);
  border: 1px solid rgba(255,68,68,0.3);
  border-radius: 9px;
  padding: 12px 16px;
  font-size: 13px;
  color: #ff8080;
  margin-top: 16px;
  display: none;
}
.error-msg.visible { display: block; }

/* ── LOADING STATE ── */
.loading-view {
  display: none;
  text-align: center;
  padding: 60px 24px;
}
.loading-view.active { display: block; }
.loading-sub { font-size: 14px; color: var(--ink-3); }

/* results.html only: the report behind an expired or unknown token */
.error-view { display: none; text-align: center; padding: 72px 24px; }
.error-view.visible { display: block; }
.error-icon { font-size: 40px; margin-bottom: 16px; }
.error-title { font-size: 22px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 10px; color: var(--ink); }
.error-msg { font-size: 14px; color: var(--ink-3); line-height: 1.65; max-width: 420px; margin: 0 auto; }
.spinner {
  width: 52px; height: 52px;
  border: 3px solid rgba(4,85,255,0.2);
  border-top-color: var(--blue-2);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 24px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-title { font-family: var(--sans); font-size: 28px; letter-spacing: 0.06em; margin-bottom: 10px; }
.loading-steps { display: flex; flex-direction: column; gap: 8px; margin: 24px auto; max-width: 320px; text-align: left; }
.loading-step-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.4);
  transition: color 0.4s;
}
.loading-step-item.done { color: var(--green-ok); }
.loading-step-item.active { color: var(--ink); }
.loading-step-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
  transition: background 0.4s;
}
.loading-step-item.done .loading-step-dot   { background: var(--green-ok); }
.loading-step-item.active .loading-step-dot { background: var(--blue-2); animation: stepPulse 1.2s ease-in-out infinite; }

/* ── RESULTS VIEW v2 ── */
.results-view { display: none; }
.results-view.active { display: block; }
@media (max-width: 560px) { }

/* Unified hero card (page 1) */
.r-hc-card {
  background: rgba(4,85,255,0.05);
  border: 1px solid rgba(46,114,255,0.45);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 0 32px rgba(4,85,255,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
}
.r-hc-score {
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(4,85,255,0.06) 0%, rgba(4,21,48,0.0) 100%);
}
.r-hc-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.38);
  margin-bottom: 8px;
}
.r-hc-num {
  font-family: var(--sans);
  font-size: 100px; line-height: 1;
  letter-spacing: 0.02em; color: var(--blue);
}
.r-hc-sub {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.22);
  margin-bottom: 18px;
}
.r-hc-bar-wrap {
  width: 100%; max-width: 260px;
  height: 5px; background: rgba(255,255,255,0.07);
  border-radius: 100px; overflow: hidden; margin-bottom: 18px;
}
.r-hc-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--blue-2), var(--blue));
  border-radius: 100px;
  transition: width 1.4s cubic-bezier(0.22,1,0.36,1);
}
.r-hc-desc {
  font-size: 13px; color: rgba(255,255,255,0.38);
  line-height: 1.65; max-width: 340px; margin-top: 10px;
}
.r-hc-rings {
  background: rgba(4,21,48,0.55);
  border-top: 1px solid rgba(46,114,255,0.2);
  padding: 24px 20px 20px;
  display: flex;
  justify-content: space-around;
  gap: 8px;
}
.r-hc-methodology {
  background: rgba(4,21,48,0.55);
  border-top: 1px solid rgba(46,114,255,0.12);
  padding: 14px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.r-hc-methodology .r-methodology-body {
  width: 100%;
  margin-top: 14px;
  border-radius: 10px;
}

/* Section divider between hero card and breakdown */
.r-section-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 20px;
}
.r-section-divider::before,
.r-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.07);
}
.r-section-divider-text {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.32);
  white-space: nowrap;
}

/* ── MINIMUM REQUIREMENTS INLINE (inside hero card) ── */
/* ── MINIMUMS RING CARD ── */
.r-min-card {
  background: rgba(4,85,255,0.05);
  border: 1px solid rgba(46,114,255,0.3);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 32px rgba(4,85,255,0.1), inset 0 1px 0 rgba(255,255,255,0.04);
}
.r-min-card.all-pass {
  background: rgba(0,200,117,0.04);
  border-color: rgba(0,200,117,0.28);
  box-shadow: 0 0 32px rgba(0,200,117,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
}
.r-min-card-header {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px; cursor: pointer; user-select: none;
  transition: background 0.15s;
}
.r-min-card-header:hover { background: rgba(255,255,255,0.02); }
.r-min-ring-wrap {
  position: relative; flex-shrink: 0;
  width: 82px; height: 82px;
  display: flex; align-items: center; justify-content: center;
}
.r-min-ring-svg { width: 82px; height: 82px; }
.r-min-ring-count {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  pointer-events: none; gap: 1px;
}
.r-min-ring-num {
  font-family: var(--sans);
  font-size: 28px; line-height: 1; color: white; letter-spacing: 0.02em;
}
.r-min-ring-num em { font-size: 15px; font-style: normal; opacity: 0.4; }
.r-min-ring-label {
  font-size: 8px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.r-min-card-info { flex: 1; min-width: 0; }
.r-min-card-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: 6px;
}
.r-min-card-headline {
  font-family: var(--sans);
  font-size: 20px; line-height: 1.05; letter-spacing: 0.03em; margin-bottom: 5px;
}
.r-min-card-headline.all-pass { color: var(--st-green); }
.r-min-card-headline.some-fail { color: #ff8080; }
.r-min-card-note {
  font-size: 11px; color: rgba(255,255,255,0.35); line-height: 1.4;
}
.r-min-chevron {
  font-size: 11px; color: rgba(255,255,255,0.22);
  transition: transform 0.22s; flex-shrink: 0;
}
.r-min-card.open .r-min-chevron { transform: rotate(180deg); }
.r-min-card-body { display: none; border-top: 1px solid rgba(46,114,255,0.12); }
.r-min-card.all-pass .r-min-card-body { border-top-color: rgba(0,200,117,0.1); }
.r-min-card.open .r-min-card-body { display: block; }
.r-min-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-top: 1px solid rgba(255,255,255,0.04);
}
.r-min-row:first-child { border-top: none; }
.r-min-row-icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1;
}
.r-min-row-icon.pass { background: rgba(0,200,117,0.12); color: var(--green-ok); border: 1px solid rgba(0,200,117,0.25); }
.r-min-row-icon.fail { background: rgba(255,68,68,0.1); color: #ff8080; border: 1px solid rgba(255,68,68,0.22); }
.r-min-row-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); flex: 1; }
.r-min-row.fail-row .r-min-row-label { color: rgba(255,255,255,0.38); }
.r-min-row-detail { font-size: 11px; color: rgba(255,255,255,0.25); }
.r-min-row.fail-row .r-min-row-detail { color: rgba(255,120,120,0.7); }
.r-minimums-footer-msg {
  padding: 10px 20px 14px; font-size: 11px; text-align: center;
}
.r-minimums-footer-msg.all-pass { color: var(--green-ok); }
.r-minimums-footer-msg.some-fail { color: var(--st-amber); }

.r-expand-hint {
  text-align: center;
  font-family: var(--sans);
  font-size: 11px; font-weight: 400; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.2);
  margin: -10px 0 20px;
}
.r-tier-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.r-tier-green  { background: rgba(0,200,117,0.12);  color: var(--st-green); border: 1px solid rgba(0,200,117,0.25); }
.r-tier-yellow { background: rgba(46,114,255,0.12); color: var(--blue); border: 1px solid rgba(46,114,255,0.3); }
.r-tier-orange { background: rgba(255,140,0,0.12);  color: var(--st-orange); border: 1px solid rgba(255,140,0,0.25); }
.r-tier-red    { background: rgba(255,68,68,0.12);  color: #ff6b6b; border: 1px solid rgba(255,68,68,0.25); }

/* Mini ring group strip */
.r-mini-rings {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px 20px 24px;
  display: flex;
  justify-content: space-around;
  gap: 12px;
  margin-bottom: 20px;
}
.r-mini-ring-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.r-mini-ring-wrap {
  position: relative;
  width: 88px;
  height: 88px;
}
.r-mini-ring-svg { width: 88px; height: 88px; }
.r-mini-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.r-mini-ring-num {
  font-family: var(--sans);
  font-size: 26px;
  line-height: 1;
  color: white;
}
.r-mini-ring-denom {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
}
.r-mini-ring-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-align: center;
}
@media (max-width: 480px) {
  .r-mini-rings { flex-direction: column; align-items: center; }
  .r-mini-ring-item { flex-direction: row; gap: 16px; width: 100%; max-width: 220px; }
  .r-mini-ring-label { text-align: left; }
  /* Hero card rings: vertical stack, ring left + label right */
  .r-hc-rings { flex-direction: column; align-items: center; gap: 12px; padding: 16px 20px; }
  .r-hc-rings .r-mini-ring-item { flex-direction: row; gap: 16px; width: 100%; max-width: 260px; align-items: center; }
  .r-hc-rings .r-mini-ring-wrap { width: 62px; height: 62px; flex-shrink: 0; }
  .r-hc-rings .r-mini-ring-svg { width: 62px; height: 62px; }
  .r-hc-rings .r-mini-ring-num { font-size: 18px; }
  .r-hc-rings .r-mini-ring-denom { font-size: 8px; }
  .r-hc-rings .r-mini-ring-label { text-align: left; font-size: 11px; }
}

/* ── Result page navigation ── */
.r-page-footer { margin-top: 32px; padding-bottom: 48px; }
.r-page-next {
  display: block; width: 100%;
  background: linear-gradient(180deg,#4f88ff,var(--blue-2));
  color: #fff;
  font-family: var(--sans);
  font-weight: 500; font-size: 15px;
  letter-spacing: 0.04em; text-transform: none;
  padding: 18px 24px; border-radius: 12px;
  border: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 10px 30px -12px var(--blue-glow);
  transition: opacity 0.2s, transform 0.15s;
}
.r-page-next:hover { opacity: 0.9; transform: translateY(-1px); }
.r-page-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: rgba(255,255,255,0.38);
  cursor: pointer; background: none; border: none; padding: 0;
  margin-bottom: 20px; font-family: var(--sans);
  transition: color 0.15s;
}
.r-page-back:hover { color: rgba(255,255,255,0.7); }
.results-nav-step { cursor: pointer; }
.results-nav-step.step-done .step-num  { background: var(--blue-2); color: white; }
.results-nav-step.step-active .step-num { background: var(--blue-2); color: white; box-shadow: 0 0 0 3px rgba(4,85,255,0.25); }
.results-nav-step.step-pending .step-num { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.1); }
.r-cr-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 32px; }
.r-cr-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
}
.r-cr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.r-cr-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.r-cr-name {
  font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.38);
  flex: 0 0 160px;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0;
}
.r-cr-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.r-cr-bar-wrap {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
}
.r-cr-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.8s ease;
}
.r-cr-pts { font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.r-cr-pts span { color: rgba(255,255,255,0.28); font-weight: 400; }

/* Locked recommendation panels */
.r-reco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 560px) { .r-reco-grid { grid-template-columns: 1fr; } }
.r-reco-card {
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.r-reco-card-bank {
  background: linear-gradient(145deg, rgba(4,85,255,0.1) 0%, rgba(4,21,48,0.7) 70%);
  border: 1px solid rgba(4,85,255,0.3);
}
.r-reco-card-cards {
  background: linear-gradient(145deg, rgba(4,85,255,0.1) 0%, rgba(4,21,48,0.7) 70%);
  border: 1px solid rgba(4,85,255,0.3);
}
.r-reco-card-header { padding: 16px 16px 10px; }
.r-reco-card-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.r-reco-card-bank .r-reco-card-icon {
  background: rgba(4,85,255,0.15); border: 1px solid rgba(4,85,255,0.3);
}
.r-reco-card-cards .r-reco-card-icon {
  background: rgba(4,85,255,0.15); border: 1px solid rgba(4,85,255,0.3);
}
.r-reco-card-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 4px;
}
.r-reco-card-bank .r-reco-card-label { color: var(--blue); }
.r-reco-card-cards .r-reco-card-label { color: var(--blue); }
.r-reco-card-title { font-size: 13px; font-weight: 800; line-height: 1.3; }
.r-reco-rows {
  padding: 0 10px 10px;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1; position: relative;
}
.r-reco-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.035);
  border-radius: 7px;
  filter: blur(3px);
  user-select: none; pointer-events: none;
}
.r-reco-card-bank .r-reco-row { border: 1px solid rgba(4,85,255,0.12); }
.r-reco-card-cards .r-reco-row { border: 1px solid rgba(4,85,255,0.12); }
.r-reco-pill {
  width: 16px; height: 6px; border-radius: 100px; flex-shrink: 0;
}
.r-reco-card-bank .r-reco-pill { background: rgba(46,114,255,0.55); }
.r-reco-card-cards .r-reco-pill { background: rgba(46,114,255,0.55); }
.r-reco-item-text { font-size: 11px; font-weight: 600; flex: 1; }
.r-reco-rows-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 560px) {
}

/* the one Offer Radar line — a real count for the state on the record, not a claim about them */
.r-radar-line {
  border: 1px solid rgba(193,255,113,0.28);
  background: rgba(193,255,113,0.04);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.r-radar-line-head { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.86); }
.r-radar-line-head b { color: var(--lime); font-weight: 700; }
.r-radar-line-sub { font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.32); }
.r-radar-line-link {
  font-size: 12.5px; font-weight: 600; color: var(--blue);
  text-decoration: none; margin-top: 1px;
}
.r-radar-line-link:hover { text-decoration: underline; }

/* unified unlock strip */
.r-reco-unified-cta {
  background: rgba(4,85,255,0.06);
  border: 1px solid rgba(46,114,255,0.45);
  border-radius: 14px;
  padding: 24px 20px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px;
  margin-bottom: 32px;
  box-shadow: 0 0 48px rgba(4,85,255,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
}
.r-reco-unified-cta::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,85,255,0.09) 0%, rgba(4,21,48,0.0) 60%),
              radial-gradient(ellipse at 50% 0%, rgba(46,114,255,0.14) 0%, transparent 65%);
  pointer-events: none;
}
.r-reco-cta-eyebrow {
  font-size: 9px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.38); margin-bottom: -4px;
}
.r-reco-cta-title {
  font-family: var(--sans);
  font-size: 28px; line-height: 1.05; letter-spacing: 0.03em;
  color: #ffffff; margin-bottom: 0;
}
.r-reco-cta-title span { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--sand); }
.r-reco-cta-sub { font-size: 12px; color: rgba(255,255,255,0.42); line-height: 1.55; max-width: 300px; }
.r-reco-btn {
  display: inline-block;
  background: linear-gradient(180deg,#d3ff8f,var(--lime) 55%,#b2f25a);
  color: var(--navy);
  font-family: var(--sans); font-size: 14px; font-weight: 800;
  letter-spacing: 0.04em; padding: 13px 28px; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 30px -12px rgba(193,255,113,0.6);
}
.r-reco-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.r-reco-cta-fine { font-size: 10px; color: rgba(255,255,255,0.22); }
.r-methodology-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  padding: 4px 12px 4px 10px;
  color: rgba(255,255,255,0.35);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.r-methodology-btn:hover { border-color: rgba(46,114,255,0.4); color: var(--blue); }
.r-methodology-btn.open { border-color: rgba(46,114,255,0.35); color: var(--blue); }
.r-methodology-body {
  display: none;
  margin-top: 14px;
  background: rgba(46,114,255,0.05);
  border: 1px solid rgba(46,114,255,0.15);
  border-radius: 12px;
  padding: 20px 22px;
}
.r-methodology-body p {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
  margin-bottom: 14px;
}
.r-methodology-body p:last-child { margin-bottom: 0; }
.r-methodology-body strong { color: rgba(255,255,255,0.75); font-weight: 700; }
.r-methodology-weights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 480px) { .r-methodology-weights { grid-template-columns: 1fr; } }
.r-mw-group {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 12px 14px;
}
.r-mw-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 8px;
}
.r-mw-row {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.r-mw-row:last-child { border-bottom: none; }
.r-mw-pts { color: rgba(255,255,255,0.25); font-weight: 600; }

/* Analysis accordion */
.r-cr-group { margin-bottom: 28px; }
.r-cr-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 8px;
}
.r-cr-group-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  flex: 1;
}
.r-cr-group-ring {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.r-cr-group-ring svg {
  width: 26px;
  height: 26px;
}
.r-cr-group-ring-fill {
  stroke-dasharray: 238.76;
  stroke-dashoffset: 238.76;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22,1,0.36,1);
}
.r-cr-group-score {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.28);
  white-space: nowrap;
}
.r-cr-item { }
.r-cr-row {
  cursor: pointer;
  transition: background 0.15s;
}
.r-cr-row:hover { background: rgba(255,255,255,0.045); }
.r-cr-chevron {
  font-size: 10px;
  color: rgba(255,255,255,0.38);
  flex-shrink: 0;
  transition: transform 0.22s, color 0.22s;
  line-height: 1;
  margin-left: 6px;
}
.r-cr-row.open .r-cr-chevron { transform: rotate(180deg); color: rgba(255,255,255,0.65); }
.r-cr-detail {
  display: none;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  padding: 12px 16px 14px 16px;
  background: rgba(0,0,0,0.12);
  border-top: 1px solid rgba(4,85,255,0.12);
}

/* Action step tags on breakdown rows */
.r-cr-action-tag {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0; white-space: nowrap;
}
.r-cr-action-tag--qw {
  color: var(--st-green);
  background: rgba(0,200,117,0.1); border: 1px solid rgba(0,200,117,0.28);
}
.r-cr-action-tag--act {
  color: var(--blue-2);
  background: rgba(46,114,255,0.08); border: 1px solid rgba(46,114,255,0.26);
}
.r-cr-action-note {
  margin-top: 10px; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 8px 12px;
}
.r-cr-action-note--qw {
  background: rgba(0,200,117,0.06); border: 1px solid rgba(0,200,117,0.18); color: rgba(0,200,117,0.75);
}
.r-cr-action-note--act {
  background: rgba(46,114,255,0.06); border: 1px solid rgba(46,114,255,0.18); color: rgba(46,114,255,0.85);
}

/* Action plan summary card */
.r-aps-card {
  background: rgba(4,85,255,0.05);
  border: 1px solid rgba(46,114,255,0.35);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 0 24px rgba(4,85,255,0.08);
}
.r-aps-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(46,114,255,0.15);
}
@media (max-width: 560px) { .r-aps-stats { grid-template-columns: repeat(2, 1fr); } }
.r-aps-stat {
  padding: 18px 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px;
  border-right: 1px solid rgba(46,114,255,0.12);
}
.r-aps-stat:last-child { border-right: none; }
.r-aps-stat-num {
  font-family: var(--sans);
  font-size: 28px; line-height: 1; color: var(--blue); letter-spacing: 0.04em;
}
.r-aps-stat-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.35);
}
.r-aps-body {
  padding: 16px 20px;
  font-size: 13px; color: rgba(255,255,255,0.52); line-height: 1.7;
}
.r-aps-body strong { color: rgba(255,255,255,0.82); font-weight: 700; }
.r-aps-teaser {
  background: rgba(4,21,48,0.5);
  border-top: 1px solid rgba(46,114,255,0.12);
  padding: 14px 20px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.r-aps-teaser-items {
  display: flex; align-items: stretch; gap: 10px;
}
.r-aps-teaser-item {
  flex: 1; display: flex; align-items: center; gap: 12px;
  background: rgba(46,114,255,0.07);
  border: 1px solid rgba(46,114,255,0.18);
  border-radius: 10px; padding: 12px 16px;
  text-decoration: none; cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
a.r-aps-teaser-item:hover {
  background: rgba(46,114,255,0.15);
  border-color: rgba(46,114,255,0.38);
}
.r-aps-teaser-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  background: rgba(46,114,255,0.14); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.r-aps-teaser-icon svg { opacity: 0.8; }
.r-aps-teaser-top { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.r-aps-teaser-text { display: flex; flex-direction: column; gap: 1px; }
.r-aps-teaser-label {
  font-size: 11px; font-weight: 600; line-height: 1.4;
  color: rgba(255,255,255,0.5);
}
.r-aps-teaser-sublabel {
  font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.28);
}
.r-aps-teaser-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 11px 16px;
  background: rgba(46,114,255,0.1); border: 1px solid rgba(46,114,255,0.3);
  border-radius: 8px; cursor: pointer; text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--blue); transition: background 0.2s;
}
.r-aps-teaser-cta:hover { background: rgba(46,114,255,0.18); }
@media (max-width: 560px) {
  .r-aps-teaser { padding: 14px 14px 16px; }
  .r-aps-teaser-item {
    flex-direction: column; align-items: center;
    text-align: center; padding: 16px 12px; gap: 8px;
  }
  .r-aps-teaser-top { justify-content: center; gap: 8px; }
  .r-aps-teaser-text { text-align: center; }
  .r-aps-teaser-label { text-align: center; font-size: 11px; }
  .r-aps-teaser-sublabel { text-align: center; }
}
/* Unified Journey Timeline (Phases 1–3) */
.r-journey-wrap {
  position: relative;
  background: rgba(4,21,48,0.5);
  border: none;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
}
.r-journey-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  opacity: 0.55;
  background: linear-gradient(180deg,
    var(--st-green) 0%,
    var(--st-green) 5%,
    var(--st-coral) 30%,
    var(--st-coral) 35%,
    #ffb84d 62%,
    #ffb84d 67%,
    var(--blue) 90%,
    var(--blue) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
.r-jm {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 20px 18px;
}
.r-jm-accent {
  width: 3px; min-height: 44px; border-radius: 2px;
  flex-shrink: 0; margin-top: 3px;
}
.r-jm-eyebrow {
  font-size: 9px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 5px;
}
.r-jm-title {
  font-family: var(--sans);
  font-size: 22px; line-height: 1.05; letter-spacing: 0.03em;
}
.r-jm-sub {
  font-size: 11px; color: rgba(255,255,255,0.35); line-height: 1.55; margin-top: 5px;
}
.r-jm-items {
  display: flex; flex-direction: column;
  padding: 0 20px 20px;
}
.r-jm-sep {
  border: none; border-top: 1px solid rgba(255,255,255,0.05); margin: 0;
}
.r-tl-item {
  display: flex;
  gap: 16px;
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.r-tl-item.r-anim-in {
  opacity: 1;
  transform: translateY(0);
}
.r-tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
  padding-top: 2px;
}
.r-tl-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
  border: 2px solid var(--navy);
  box-shadow: 0 0 0 1.5px currentColor;
}
.r-tl-line {
  width: 2px;
  flex: 1;
  background: rgba(255,255,255,0.07);
  min-height: 24px;
  margin-top: 4px;
  margin-bottom: 0;
}
.r-tl-item:last-child .r-tl-line { display: none; }
.r-tl-body {
  flex: 1;
  padding-bottom: 22px;
  padding-top: 0;
}
.r-tl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.r-tl-idx {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.22); flex-shrink: 0;
}
.r-tl-title {
  font-size: 14px; font-weight: 700; line-height: 1.3;
}
.r-tl-pts {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.25); white-space: nowrap;
  margin-left: auto;
}
.r-tl-action {
  font-size: 13px; color: rgba(255,255,255,0.48); line-height: 1.65;
}
.r-qw-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--st-green); background: rgba(0,200,117,0.12); border: 1px solid rgba(0,200,117,0.25);
  border-radius: 4px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0;
}
.r-priority-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #ff6b6b; background: rgba(255,68,68,0.1); border: 1px solid rgba(255,68,68,0.3);
  border-radius: 4px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0;
}
.r-tl-header-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .r-tl-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .r-tl-header-main { flex: none; width: 100%; }
  .r-qw-badge, .r-priority-badge { align-self: flex-start; margin-left: 0; order: -1; }
}

/* Shared lock badge — used on card pill, mini rings overlay, biz opt overlay */
.lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 100px;
  border: 1px solid rgba(46,114,255,0.35);
  background: rgba(46,114,255,0.1);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.55);
}
.lock-badge svg { flex-shrink: 0; opacity: 0.7; }

/* Bottom CTA section */
.r-cta-section {
  background: rgba(4,85,255,0.06);
  border: 1px solid rgba(46,114,255,0.45);
  border-radius: 20px;
  padding: 52px 36px 44px;
  text-align: center;
  margin-bottom: 48px;
  box-shadow: 0 0 48px rgba(4,85,255,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative; overflow: hidden;
}
.r-cta-section::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,85,255,0.09) 0%, rgba(4,21,48,0.0) 60%),
              radial-gradient(ellipse at 50% 0%, rgba(46,114,255,0.14) 0%, transparent 65%);
  pointer-events: none;
}
.r-cta-overline {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 20px;
}
.r-cta-headline {
  font-family: var(--sans);
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: white;
  margin-bottom: 20px;
}
.r-cta-headline em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--sand);
}
.r-cta-body {
  font-size: 15px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 32px;
}
.r-cta-primary {
  display: inline-block;
  background: linear-gradient(180deg,#d3ff8f,var(--lime) 55%,#b2f25a);
  color: var(--navy);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 16px 40px;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 30px -12px rgba(193,255,113,0.6);
}
.r-cta-primary:hover { background: linear-gradient(135deg, #d4ff8a 0%, #a8e85c 100%); transform: translateY(-1px); }
.r-cta-fine {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.03em;
}
@media (max-width: 560px) {
  .r-cta-body { font-size: 13px; }
  .r-cta-primary { display: block; width: 100%; padding: 15px 16px; font-size: 13px; text-align: center; box-sizing: border-box; }
  .r-cta-fine { white-space: nowrap; font-size: 10px; }
}

/* ── EMAIL CONFIRMATION BANNER ── */
.email-confirm {
  background: rgba(0,200,117,0.08);
  border: 1px solid rgba(0,200,117,0.25);
  border-radius: 12px;
  margin-top: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 32px;
}
.email-confirm-icon { font-size: 18px; flex-shrink: 0; color: var(--green-ok); }
.email-confirm p { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; }
.email-confirm strong { color: var(--green-ok); }
/* ── FOOTER ── */
footer { text-align: center; padding: 24px; font-size: 12px; color: rgba(255,255,255,0.2); border-top: 1px solid rgba(255,255,255,0.05); }

/* ── 4. Display faces ───────────────────────────────────────────────────────
   Everything here used to be Bebas Neue — a condensed all-caps face. Figtree at the same
   px is much wider and reads sentence case, so each size comes down and the tracking goes
   negative. This block sits after the rules above on purpose: several of them set a positive
   letter-spacing that only made sense for Bebas. */
.r-hc-num,.r-min-ring-num,.r-min-card-headline,.r-mini-ring-num,.r-reco-cta-title,.r-aps-stat-num,.r-jm-title,.r-cta-headline,
.loading-title,.error-title{
  font-family:var(--sans); font-weight:500; letter-spacing:-.035em; text-transform:none;
}
/* numerals: tighter still, and tabular so counters do not jitter while they animate */
.r-hc-num,.r-min-ring-num,.r-mini-ring-num,.r-aps-stat-num{
  letter-spacing:-.05em; font-variant-numeric:tabular-nums;
}
.r-hc-num{ font-size:88px; }
.r-min-ring-num{ font-size:24px; }
.r-mini-ring-num{ font-size:22px; }
.r-aps-stat-num{ font-size:25px; }
.r-min-card-headline{ font-size:17px; letter-spacing:-.03em; }
.r-jm-title{ font-size:19px; letter-spacing:-.03em; }
.r-reco-cta-title{ font-size:25px; letter-spacing:-.03em; }
.r-cta-headline{ font-size:clamp(30px,5.2vw,46px); letter-spacing:-.04em; line-height:1.06; }
.loading-title,.error-title{ font-size:22px; letter-spacing:-.03em; }
/* the page's own title was DM Serif Display; in this register it is Figtree, tight */
.step-title{ font-family:var(--sans); font-weight:500; letter-spacing:-.035em; }

/* ── 5. Micro-labels ────────────────────────────────────────────────────────
   Every small tracked uppercase label becomes JetBrains Mono at one size, which is what
   carries the Radar register more than any other single decision. */
.r-hc-eyebrow,.r-hc-sub,.r-section-divider-text,.r-min-card-eyebrow,.r-min-ring-label,
.r-mini-ring-label,.r-tier-pill,.r-jm-eyebrow,.r-aps-stat-label,.r-aps-teaser-label,
.r-cta-overline,.r-reco-card-label,.r-reco-cta-eyebrow,.lock-badge,
.step-label .sl-step,.sp-header-label,.sp-score-label,.hiw-eyebrow,.tool-eyebrow{
  font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase;
}

/* ── 6. Surfaces and controls ───────────────────────────────────────────────
   The old cards were blue-tinted panels with an outer glow. Radar's content register is a
   near-transparent fill, a hairline border and a 1px inset highlight — the glow belongs to
   the page background, not to every box on it. */
.r-hc-card,.r-min-card,.r-aps-card,.r-jm-items,
.r-reco-card,.r-cta-section,.score-preview-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.r-hc-card{ background:linear-gradient(180deg,rgba(46,114,255,.07),rgba(255,255,255,.02)); border-color:var(--line-2); }
.r-min-card,.r-jm-items,.r-reco-card{ border-radius:14px; }
.r-methodology-body,.r-cr-detail{ background:rgba(255,255,255,.03); border-color:var(--line); border-radius:var(--r-m); }

/* floating chrome gets the glass treatment; long lists never do */
.progress-wrap,.site-header{
  background:rgba(7,18,48,.72);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  position:sticky; top:0; z-index:50;
}

/* buttons: pill, weight 500, sentence case. Blue is the working button; lime is reserved. */
.btn-next,.btn-back,.btn-submit,.r-page-next,.r-reco-btn,.r-cta-primary,.cta-btn-inline,.btn-ghost,.scoreiq-link{
  font-family:var(--sans); font-weight:500; letter-spacing:-.01em;
  text-transform:none; border-radius:999px;
}
.btn-next,.btn-submit{ height:52px; font-size:16px; }
.r-page-next{ padding:16px 24px; font-size:15px; }
.r-reco-btn,.r-cta-primary,.cta-btn-inline{ padding:15px 26px; font-size:15px; }
.btn-ghost{ padding:15px 22px; font-size:15px; }
.scoreiq-link{ font-weight:500; }

/* form controls */
.stripe-input,.stripe-select,.card-creditor-input{
  font-family:var(--sans); border-radius:var(--r-m);
  background:rgba(255,255,255,.04); border:1px solid var(--line-2);
}
.field-label,.radio-option label{ font-family:var(--sans); font-weight:500; letter-spacing:-.01em; }

/* score status ramp — replaces lime-as-yellow everywhere it appeared */
.r-tier-yellow{ background:rgba(255,184,77,.12); color:var(--st-amber); border:1px solid rgba(255,184,77,.3); }
.r-tier-orange{ background:rgba(255,143,77,.12); color:var(--st-orange); border:1px solid rgba(255,143,77,.28); }
.r-tier-red{ background:rgba(255,106,77,.12); color:var(--st-coral); border:1px solid rgba(255,106,77,.3); }
.r-tier-green{ background:rgba(0,200,117,.12); color:var(--st-green); border:1px solid rgba(0,200,117,.28); }
.r-tier-pill{ border-radius:999px; }

/* the lock is information, not an alarm */
.lock-badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  background:rgba(11,26,64,.9); border:1px solid var(--line-2); color:var(--ink-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}

/* ── 7. Landing (index.html) ────────────────────────────────────────────────
   The marketing register: one big headline with a single serif italic phrase, one lime
   button, and the product itself shown as a real card rather than a screenshot. */
.site-header{ display:flex; align-items:center; padding:14px 24px; min-height:64px; }
.site-header .logo{ text-decoration:none; }

.hero{
  width:min(1180px,100% - 48px); margin-inline:auto;
  padding:clamp(56px,8vw,104px) 0 clamp(40px,6vw,72px);
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.tool-eyebrow{ color:var(--ink-3); margin-bottom:18px; }
.hero-headline{ font-size:clamp(38px,5.4vw,74px); letter-spacing:-.045em; line-height:.96; margin-bottom:22px; }
.hero-headline .bold-line{ display:block; font-weight:500; }
.hero-headline .serif-line{
  display:block; font-family:var(--serif); font-style:italic; font-weight:400;
  color:var(--sand); letter-spacing:-.02em;
}
.hero-desc{ font-size:17px; line-height:1.55; color:var(--ink-2); max-width:54ch; text-wrap:pretty; }
.hero-desc strong{ color:var(--ink); font-weight:500; }
.hero-cta-wrap{ margin-top:30px; }
.hero-cta-btns{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.cta-btn-inline{
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px;
  border-radius:999px; text-decoration:none; font-weight:500; font-size:16px; letter-spacing:-.01em;
  color:#04122b; background:linear-gradient(180deg,#d3ff8f,var(--lime) 55%,#b2f25a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px -12px rgba(193,255,113,.6);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.cta-btn-inline:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 36px -14px rgba(193,255,113,.7); }
.btn-ghost{
  display:inline-flex; align-items:center; height:52px; padding:0 22px; border-radius:999px;
  text-decoration:none; font-size:16px; font-weight:500; color:var(--ink-2);
  border:1px solid var(--line-2); background:rgba(255,255,255,.03); transition:all .2s;
}
.btn-ghost:hover{ color:var(--ink); border-color:var(--blue); background:rgba(46,114,255,.10); }
.hero-cta-fine{
  margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
}

/* the sample report card */
.hero-right{ display:flex; justify-content:center; }
.score-preview-card{ width:100%; max-width:400px; padding:22px 22px 18px; border-radius:var(--r); position:relative; }
.sp-header{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.sp-header-logo{
  width:26px; height:26px; border-radius:7px; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(180deg,#4f88ff,var(--blue-2));
}
.sp-header-label{ color:var(--ink-3); flex:1; }
.sp-sample{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:3px 9px;
  background:rgba(255,255,255,.05); white-space:nowrap;
}
.sp-score-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.sp-score-label{ color:var(--ink-3); }
.sp-score-num{ font-size:46px; font-weight:500; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.sp-score-denom{ font-size:17px; color:var(--ink-3); letter-spacing:-.02em; }
.sp-bar-wrap{ height:4px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin:14px 0 12px; }
.sp-bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blue-2),var(--blue)); }
.sp-status{
  font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--st-amber); margin-bottom:6px;
}
.sp-rows-wrap{ position:relative; }
.sp-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.sp-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--st-green); }
.sp-dot--amber{ background:var(--st-amber); }
.sp-dot--orange{ background:var(--st-orange); }
.sp-dot--coral{ background:var(--st-coral); }
.sp-row-label{ flex:1; font-size:13.5px; color:var(--ink-2); letter-spacing:-.01em; }
.sp-row-pts{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.sp-rows-fade{
  position:absolute; left:0; right:0; bottom:0; height:76px; display:flex; align-items:flex-end;
  justify-content:center; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(3,10,26,.86) 62%);
}
.sp-rows-more{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); padding-bottom:4px; }

/* how it works */
.hiw-section{ padding:clamp(70px,9vw,130px) 0; border-top:1px solid var(--line); }
.hiw-inner{ width:min(1180px,100% - 48px); margin-inline:auto; }
.hiw-header{ margin-bottom:clamp(36px,5vw,64px); max-width:26ch; }
.hiw-eyebrow{ color:var(--ink-3); margin-bottom:14px; }
.hiw-title{ font-size:clamp(30px,4.2vw,52px); letter-spacing:-.04em; line-height:1.02; }
.hiw-title em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--sand); }
.hiw-timeline{ display:grid; gap:0; max-width:760px; }
.hiw-step{ display:grid; grid-template-columns:28px 1fr; gap:18px; opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease),transform .5s var(--ease); }
.hiw-step.hiw-in{ opacity:1; transform:none; }
.hiw-step-center{ display:flex; flex-direction:column; align-items:center; padding-top:7px; }
.hiw-step-dot{ width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(46,114,255,.14); flex-shrink:0; }
.hiw-step-line{ width:1px; flex:1; background:var(--line-2); margin:8px 0 0; }
.hiw-step:last-child .hiw-step-line{ display:none; }
.hiw-step-side{ padding-bottom:34px; }
.hiw-step:last-child .hiw-step-side{ padding-bottom:0; }
.hiw-step-title{ font-size:19px; font-weight:500; letter-spacing:-.025em; margin-bottom:8px; display:flex; gap:12px; align-items:baseline; }
.hiw-step-idx{ font-family:var(--serif); font-style:italic; font-size:24px; color:var(--sand); line-height:1; flex-shrink:0; }
.hiw-step-desc{ font-size:15.5px; line-height:1.55; color:var(--ink-2); max-width:62ch; }
.hiw-step-tag{
  display:inline-block; margin-top:12px; font-family:var(--mono); font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); border-radius:999px; padding:4px 11px;
}
.hiw-cta{ margin-top:clamp(40px,5vw,64px); padding-top:clamp(36px,4vw,52px); border-top:1px solid var(--line); text-align:center; }
.hiw-cta-text{ font-size:clamp(20px,2.4vw,27px); font-weight:500; letter-spacing:-.03em; margin-bottom:22px; }
.hiw-cta-fine{ margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:clamp(36px,7vw,64px); }
  .hero-right{ justify-content:flex-start; }
  .score-preview-card{ max-width:none; }
}
@media (max-width:560px){
  .hero{ width:calc(100% - 32px); }
  .hiw-inner{ width:calc(100% - 32px); }
  .hero-cta-btns{ flex-direction:column; align-items:stretch; }
  .cta-btn-inline,.btn-ghost{ justify-content:center; }
  .hiw-step{ grid-template-columns:20px 1fr; gap:14px; }
}

/* ── 8. Brand lockup ────────────────────────────────────────────────────────
   Radar's brand register: sentence case, weight 600, negative tracking, with the byline as a
   mono micro-label. The wordmark is one colour throughout — the lime on "Ready" was the same
   accent-on-one-word treatment the Business Credit Pro mark already forbids. */
.logo-icon{ background:linear-gradient(180deg,#4f88ff,var(--blue-2)); border-radius:8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.logo-wordmark{
  font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:-.025em;
  text-transform:none; color:var(--ink);
}
.logo-wordmark span{ color:inherit; }
.logo-tm{ font-size:.55em; font-weight:400; vertical-align:super; color:var(--ink-3); }
.logo-byline{
  font-family:var(--mono); font-size:9.5px; font-weight:400; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); padding-left:38px;
}

/* the sample card's fade sits under the last row rather than across it */
.sp-rows{ padding-bottom:26px; }
.sp-rows-fade{ height:52px; }

/* the step header was absolutely centred in the viewport, which collided with the wordmark
   once the lockup got wider. Static flex instead: the logo holds its width, the steps centre
   in what is left. */
.progress-wrap{ display:flex; align-items:center; gap:18px; padding:0 20px; }
.progress-logo{ flex-shrink:0; }
.progress-inner{
  position:static; transform:none; flex:1; min-width:0;
  max-width:760px; margin-inline:auto; padding:0; pointer-events:auto;
}
@media (max-width:820px){
  .progress-wrap{ gap:10px; padding:0 14px; }
  .progress-step{ gap:6px; }
}
@media (max-width:560px){
  .progress-inner{ margin-inline:0; }
}


/* ── Step 4: business profile block ───────────────────────────────────────── */
.biz-profile-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
.biz-profile-head { margin-bottom: 14px; }
.biz-profile-sub { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.45); }
.field-label .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,0.32); margin-left: 4px; }
.field-row { display: flex; gap: 10px; }
.field-row .field-wrap { min-width: 0; }
@media (max-width: 480px) { .field-row { flex-direction: column; gap: 0; } .field-row .field-wrap { flex: 1 1 auto !important; } }

/* ── Results page 3: business profile panel ───────────────────────────────── */
.r-bz-sum { background: rgba(255,255,255,0.03); border: 1px solid var(--line, rgba(255,255,255,0.08)); border-radius: 12px; padding: 16px 18px; margin: 16px 0 4px; }
.r-bz-sum-head { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.r-bz-sum-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: rgba(255,255,255,0.45); }
.r-bz-sum-meta b { color: #fff; font-weight: 700; }
.r-bz-sum-date { margin-left: auto; color: rgba(255,255,255,0.3); }
.r-bz-sum-who { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 8px; word-break: break-word; }
.r-bz-sum-note { font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,0.35); margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.r-bz-pill { flex: 1; text-align: right; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.r-bz-summary { color: rgba(255,255,255,0.72); font-size: 12.5px; line-height: 1.7; }
.r-bz-action { margin-top: 10px; font-size: 12px; line-height: 1.7; color: rgba(255,255,255,0.55); padding: 10px 12px; background: rgba(46,114,255,0.06); border: 1px solid rgba(46,114,255,0.16); border-radius: 8px; }
.r-bz-action-k { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-2, #2e72ff); margin-bottom: 3px; }
.r-bz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-size: 11px; color: rgba(255,255,255,0.32); }
.r-bz-shelf { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; color: var(--st-green); background: rgba(0,200,117,0.08); border: 1px solid rgba(0,200,117,0.22); }
.r-bz-shelf--obs { color: var(--st-amber); background: rgba(255,184,77,0.08); border-color: rgba(255,184,77,0.25); }
.r-bz-src a { color: rgba(255,255,255,0.5); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.2); }
/* Provenance — the four words, and the caveat where one applies (IDEAS #18). Deliberately quiet:
   it should be readable when someone goes looking and invisible when they are not. */
.r-bz-src { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.r-bz-tier { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
  color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.r-bz-tier--official { color: var(--st-green); background: rgba(0,200,117,0.08); border-color: rgba(0,200,117,0.22); }
.r-bz-tier--vendor   { color: var(--blue-light, #2e72ff); background: rgba(46,114,255,0.10); border-color: rgba(46,114,255,0.28); }
.r-bz-tier--cached   { color: var(--st-amber); background: rgba(255,184,77,0.08); border-color: rgba(255,184,77,0.25); }
.r-bz-limits { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5;
  color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.03); border-left: 2px solid rgba(255,255,255,0.15); }
.r-bz-limits b { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 3px; }
.r-bz-src a:hover { color: #fff; }
.r-bz-fine { font-size: 11px; line-height: 1.55; color: rgba(255,255,255,0.3); margin: -20px 0 28px; }
.r-bz-empty { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 16px 18px; margin-bottom: 28px; }
@media (max-width: 480px) { .r-bz-pill { font-size: 10px; } }

.r-bz-locked { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,0.5); }
.r-bz-locked svg { flex-shrink: 0; opacity: 0.6; }
.r-bz-locked a { margin-left: auto; white-space: nowrap; color: var(--blue-2, #2e72ff); font-weight: 600; text-decoration: none; }
.r-bz-sum-note a { color: var(--blue-2, #2e72ff); text-decoration: none; font-weight: 600; }
@keyframes r-bz-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.r-bz-dot-pulse { animation: r-bz-pulse 1.4s ease-in-out infinite; background: var(--blue-2, #2e72ff) !important; }
/* Business credit report upload (under the business findings) */
.r-bz-upload { margin: 14px 0 36px; padding: 16px 18px; border-radius: 12px; background: rgba(46,114,255,0.05); border: 1px dashed rgba(46,114,255,0.30); }
.r-bz-up-head { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.r-bz-up-sub { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.55); }
.r-bz-up-done { margin: 10px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: var(--st-green); }
.r-bz-up-where { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.5); }
.r-bz-up-where summary { cursor: pointer; color: var(--blue-2, #2e72ff); font-weight: 600; }
.r-bz-up-where ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.7; }
.r-bz-up-where b { color: rgba(255,255,255,0.8); }
.r-bz-up-btn { display: inline-block; margin-top: 12px; padding: 9px 16px; border-radius: 8px; background: var(--blue, #0455ff); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.r-bz-up-btn:hover { background: var(--blue-2, #2e72ff); }
.r-bz-up-msg { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.7); }
.r-bz-up-msg.r-bz-up-err { color: var(--st-coral); }