:root {
    --navy: #0B1F3A;
    --navy-mid: #14305A;
    --navy-light: #1E4178;
    --accent: #2B6CB0;
    --accent-soft: #E8F1FB;
    --white: #FFFFFF;
    --bg: #F4F6F9;
    --border: #D8DEE8;
    --text: #1A2332;
    --muted: #5A6A7E;
    --success: #1B7A4E;
    --success-bg: #E6F5EE;
    --warn: #B45309;
    --radius: 12px;
    --shadow: 0 4px 24px rgba(11, 31, 58, 0.08);
    --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  }

  .rdb-wizard, .rdb-wizard * { box-sizing: border-box; }

  .rdb-wizard {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0 auto;
  }

  .rdb-wizard .mock-banner {
    background: linear-gradient(90deg, #0B1F3A, #1E4178);
    color: #A8C0E0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 8px 12px;
  }

  .rdb-wizard .app {
    max-width: 480px;
    margin: 0 auto;
    min-height: calc(100dvh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--white);
    box-shadow: var(--shadow);
  }

  .rdb-wizard header.rdb-header, .rdb-wizard .rdb-header {
    background: var(--navy);
    color: var(--white);
    padding: 16px 20px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .rdb-wizard .logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2B6CB0, #60A5FA);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
  }

  .rdb-wizard .logo-text strong { display: block; font-size: 15px; font-weight: 700; }
  .rdb-wizard .logo-text span { font-size: 11px; opacity: 0.7; }

  .rdb-wizard .progress-wrap {
    padding: 16px 20px 0;
    background: var(--white);
  }

  .rdb-wizard .progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--muted);
  }

  .rdb-wizard .progress-meta strong { color: var(--navy); font-size: 13px; }

  .rdb-wizard .progress-track {
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
  }

  .rdb-wizard .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--navy), var(--accent));
    border-radius: 99px;
    transition: width 0.35s ease;
    width: 0%;
  }

  .rdb-wizard main, .rdb-wizard .rdb-main {
    flex: 1;
    padding: 20px 20px 24px;
    overflow-y: auto;
  }

  .rdb-wizard .step { display: none; animation: fadeIn 0.25s ease; }
  .rdb-wizard .step.active { display: block; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .rdb-wizard h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
  }

  .rdb-wizard .lede {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 22px;
  }

  .rdb-wizard .field { margin-bottom: 20px; }

  label.field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
  }

  .rdb-wizard .hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
  }

  .rdb-wizard .hint.warn { color: var(--warn); }

  .rdb-wizard .segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .rdb-wizard .segment-btn, .chip, .score-btn, .option-card {
    border: 1.5px solid var(--border);
    background: var(--white);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    color: var(--text);
  }

  .rdb-wizard .segment-btn {
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  .rdb-wizard .segment-btn:hover, .chip:hover, .option-card:hover { border-color: var(--accent); }
  .rdb-wizard .segment-btn.selected, .chip.selected, .option-card.selected {
    border-color: var(--navy);
    background: var(--accent-soft);
    color: var(--navy);
    box-shadow: inset 0 0 0 1px var(--navy);
  }

  .rdb-wizard .search-box {
    position: relative;
  }

  .rdb-wizard input[type="text"], .rdb-wizard input[type="email"], .rdb-wizard select, .rdb-wizard textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    background: var(--white);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s;
  }

  .rdb-wizard input:focus, .rdb-wizard select:focus, .rdb-wizard textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15);
  }

  .rdb-wizard input::placeholder,
  .rdb-wizard textarea::placeholder {
    color: #9aa3af;
    opacity: 1;
  }

  .rdb-wizard textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.45;
  }

  .rdb-wizard .char-count {
    font-size: 11px;
    color: var(--muted);
    text-align: right;
    margin-top: 4px;
  }
  .rdb-wizard .char-count.ok { color: var(--success); }

  .rdb-wizard .dropdown {
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 4px);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    z-index: 20;
    max-height: 200px;
    overflow-y: auto;
    display: none;
  }

  .rdb-wizard .dropdown.open { display: block; }

  .rdb-wizard .dropdown-item {
    padding: 12px 14px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #EEF1F5;
  }
  .rdb-wizard .dropdown-item:last-child { border-bottom: none; }
  .rdb-wizard .dropdown-item:hover { background: var(--accent-soft); }
  .rdb-wizard .dropdown-item small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

  .rdb-wizard .selected-pill {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--accent-soft);
    border-radius: 10px;
    font-size: 13px;
    color: var(--navy);
    font-weight: 600;
  }
  .rdb-wizard .selected-pill.show { display: block; }
  .rdb-wizard .selected-pill span { font-weight: 400; color: var(--muted); }

  .rdb-wizard .option-list { display: flex; flex-direction: column; gap: 8px; }

  .rdb-wizard .option-card {
    padding: 12px 14px;
    text-align: left;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .rdb-wizard .option-card .radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
  }

  .rdb-wizard .option-card.selected .radio {
    border-color: var(--navy);
  }
  .rdb-wizard .option-card.selected .radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--navy);
  }

  .rdb-wizard .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .rdb-wizard .chip {
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
  }

  .rdb-wizard .score-block {
    background: #FAFBFC;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
  }

  .rdb-wizard .score-block h3 {
    font-size: 14px;
    font-weight: 650;
    color: var(--navy);
    margin-bottom: 4px;
  }

  .rdb-wizard .score-block .sub {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
  }

  .rdb-wizard .score-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  .rdb-wizard .score-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 650;
    display: grid;
    place-items: center;
  }

  .rdb-wizard .score-btn.na {
    font-size: 11px;
    font-weight: 600;
    min-width: auto;
    padding: 0 10px;
    color: var(--muted);
  }

  .rdb-wizard .score-btn.selected {
    background: var(--navy);
    color: white;
    border-color: var(--navy);
    box-shadow: none;
  }

  .rdb-wizard .reason-box {
    display: none;
    margin-top: 10px;
  }
  .rdb-wizard .reason-box.show { display: block; }

  .rdb-wizard .nps-wrap {
    background: var(--navy);
    color: white;
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 8px;
  }

  .rdb-wizard .nps-wrap h3 { font-size: 14px; font-weight: 650; margin-bottom: 4px; }
  .rdb-wizard .nps-wrap .sub { font-size: 12px; opacity: 0.75; margin-bottom: 14px; }

  .rdb-wizard .nps-value {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.03em;
  }

  .rdb-wizard input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: rgba(255,255,255,0.25);
    border-radius: 99px;
    outline: none;
  }

  .rdb-wizard input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: pointer;
  }

  .rdb-wizard .nps-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    opacity: 0.7;
    margin-top: 8px;
  }

  .rdb-wizard .check-list { display: flex; flex-direction: column; gap: 12px; }

  .rdb-wizard .check-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    background: white;
  }

  .rdb-wizard .check-item:has(input:checked) {
    border-color: var(--navy);
    background: var(--accent-soft);
  }

  .rdb-wizard .check-item input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--navy);
    flex-shrink: 0;
  }

  .rdb-wizard .check-item .check-text {
    font-size: 13px;
    line-height: 1.45;
  }

  .rdb-wizard .check-item a {
    color: var(--accent);
    text-decoration: underline;
  }

  .rdb-wizard .footer-nav {
    padding: 12px 20px 20px;
    border-top: 1px solid var(--border);
    background: var(--white);
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
  }

  .rdb-wizard .btn {
    flex: 1;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
  }

  .rdb-wizard .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .rdb-wizard .btn-secondary {
    background: white;
    border: 1.5px solid var(--border);
    color: var(--navy);
  }

  .rdb-wizard .btn-primary {
    background: var(--navy);
    color: white;
  }

  .rdb-wizard .btn-primary:hover:not(:disabled) { background: var(--navy-mid); }

  .rdb-wizard .btn-ghost {
    background: transparent;
    color: var(--muted);
    border: none;
    flex: 0 0 auto;
    padding: 14px 8px;
  }

  .rdb-wizard .success-screen {
    text-align: center;
    padding: 40px 12px 20px;
  }

  .rdb-wizard .success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    display: grid;
    place-items: center;
    font-size: 36px;
    margin: 0 auto 20px;
  }

  .rdb-wizard .success-screen h1 { margin-bottom: 10px; }
  .rdb-wizard .success-screen .lede { margin-bottom: 28px; }

  .rdb-wizard .info-card {
    text-align: left;
    background: var(--bg);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 20px;
  }

  .rdb-wizard .info-card strong { color: var(--navy); display: block; margin-bottom: 4px; }

  .rdb-wizard .conditional-note {
    font-size: 11px;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    display: none;
  }
  .rdb-wizard .conditional-note.show { display: block; }

  .rdb-wizard .score-summary {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 14px;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 8px;
  }
  .rdb-wizard .score-summary strong { color: var(--navy); }

  .rdb-wizard .from-bank { display: none; margin-top: 10px; }
  .rdb-wizard .from-bank.show { display: block; }

  @media (min-width: 520px) {
    .rdb-wizard { padding: 24px 0; }
    .rdb-wizard .app { border-radius: 16px; overflow: hidden; min-height: auto; }
  }

  /* Hybrid v1 — screenshot alignment extras */
  .rdb-wizard .branch-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #F0F3F7;
    border-radius: 10px;
    margin-bottom: 22px;
    font-size: 14px;
    color: var(--navy);
    font-weight: 650;
  }
  .rdb-wizard .branch-card .bc-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--navy); color: white;
    display: grid; place-items: center; font-size: 16px; flex-shrink: 0;
  }
  .rdb-wizard .branch-card .bc-label {
    display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 2px;
  }
  .rdb-wizard .segment.four { grid-template-columns: 1fr 1fr; }
  @media (min-width: 420px) {
    .rdb-wizard .segment.four { grid-template-columns: repeat(4, 1fr); }
  }
  .rdb-wizard .segment-btn.selected {
    background: var(--navy);
    color: white;
    border-color: var(--navy);
    box-shadow: none;
  }
  .rdb-wizard .dim-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .rdb-wizard .dim-row:last-of-type { border-bottom: none; }
  .rdb-wizard .dim-label {
    font-size: 14px;
    font-weight: 650;
    color: var(--navy);
  }
  .rdb-wizard .dim-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .rdb-wizard .nps-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 8px;
  }
  .rdb-wizard .nps-btn {
    min-width: 36px;
    height: 36px;
    border: 1.5px solid var(--border);
    background: white;
    border-radius: 8px;
    font-weight: 650;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
  }
  .rdb-wizard .nps-btn.selected {
    background: var(--navy);
    color: white;
    border-color: var(--navy);
  }
  .rdb-wizard .nps-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .rdb-wizard .nps-section h3 { font-size: 15px; color: var(--navy); margin-bottom: 4px; }
  .rdb-wizard .nps-section .sub { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
  .rdb-wizard .mock-label {
    text-align: center;
    font-size: 11px;
    color: #9AA5B5;
    padding: 8px;
    letter-spacing: 0.04em;
  }
  .rdb-wizard .info-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    margin: 10px 0 4px;
  }
  .rdb-wizard header.rdb-header { /* avoid theme header clash */
    background: var(--navy);
    color: var(--white);
    padding: 16px 20px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
  }


  /* UX batch: score scale anchors + info tips */
  .rdb-wizard .score-scale-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--navy);
    color: #fff;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
  }
  .rdb-wizard .score-scale-legend .ssl-mid {
    opacity: 0.75;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  .rdb-wizard .score-scale-legend strong {
    font-size: 14px;
    font-weight: 800;
  }

  .rdb-wizard .score-anchors {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
    margin: 2px 0 2px;
    padding: 0 2px;
  }

  .rdb-wizard .field-label-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 4px;
  }

  label.field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .rdb-wizard .rdb-info {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--navy-light);
    background: var(--white);
    color: var(--navy);
    font-size: 11px;
    font-weight: 800;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1;
    cursor: help;
    flex-shrink: 0;
    vertical-align: middle;
  }
  .rdb-wizard .rdb-info:hover,
  .rdb-wizard .rdb-info:focus-visible,
  .rdb-wizard .rdb-info[aria-expanded="true"] {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    outline: none;
  }
  .rdb-wizard .rdb-info-inline {
    margin-left: 2px;
    width: 22px;
    height: 22px;
  }

  .rdb-wizard {
    position: relative;
  }
  .rdb-wizard .app {
    position: relative;
  }

  .rdb-wizard .rdb-tip-popover {
    position: fixed;
    z-index: 99999;
    background: var(--navy);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(11, 31, 58, 0.28);
    padding: 0;
    max-width: calc(100% - 16px);
    pointer-events: auto;
    isolation: isolate;
  }
  .rdb-wizard .rdb-tip-popover[hidden] {
    display: none !important;
    pointer-events: none;
  }
  .rdb-wizard .rdb-tip-popover-inner {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 12px 12px 12px 14px;
  }
  .rdb-wizard .rdb-tip-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
  }
  .rdb-wizard .rdb-tip-close {
    border: none;
    background: transparent;
    color: #A8C0E0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
  }
  .rdb-wizard .rdb-tip-close:hover { color: #fff; }

  @media (max-width: 419px) {
    .rdb-wizard .score-scale-legend {
      font-size: 11px;
      padding: 9px 10px;
    }
    .rdb-wizard .score-btn {
      min-width: 36px;
      height: 36px;
    }
  }

  .rdb-wizard .dim-label .rdb-info {
    margin-left: 6px;
    vertical-align: middle;
  }

  .rdb-wizard .rdb-soft-ctas {
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 16px 14px;
    margin: 0 0 18px;
  }
  .rdb-wizard .rdb-soft-cta-q {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
  }
  .rdb-wizard .rdb-soft-cta-link {
    display: inline-block;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  .rdb-wizard .rdb-soft-cta-link:hover {
    border-bottom-color: var(--accent);
  }
  .rdb-wizard .rdb-soft-cta-help {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .rdb-wizard .rdb-soft-cta-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .rdb-wizard .rdb-soft-cta-actions .btn {
    flex: 1;
    min-width: 110px;
  }
  .rdb-wizard .rdb-soft-yes {
    border-color: var(--navy);
    color: var(--navy);
  }