/* ==================== TRADE SELECTION ==================== */
  .step-header {
    margin-bottom: 48px;
    max-width: 720px;
  }
  .step-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--copper);
    margin-bottom: 16px;
    font-weight: 600;
  }
  .step-title {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .step-desc {
    font-size: 17px;
    color: var(--ink-soft);
    line-height: 1.55;
  }

  .trades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 48px;
  }
  .trade-chip {
    padding: 14px 18px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
  }
  .trade-chip:hover {
    border-color: var(--copper);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
  .trade-chip.selected {
    background: var(--copper);
    color: var(--paper);
    border-color: var(--copper);
  }
  .trade-chip.selected .check {
    opacity: 1;
    transform: scale(1);
  }
  .trade-chip .check {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.18s ease;
    color: var(--copper);
    font-weight: 700;
  }
  .trade-chip.selected .check {
    color: var(--mint);
  }
  .trade-chip.new-trade::after {
    content: 'NEW';
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--copper);
    background: var(--copper-soft);
    padding: 2px 6px;
    border-radius: 9999px;
  }
  .trade-chip.selected.new-trade::after {
    color: var(--ink);
    background: var(--mint);
  }

  /* ==================== DISCOVERY FLOW ==================== */
  .discovery-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 56px;
    align-items: start;
  }
  @media (max-width: 900px) { .discovery-layout { grid-template-columns: 1fr; gap: 32px; } }

  .question-card {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 40px 44px;
    box-shadow: var(--shadow-md);
  }
  @media (max-width: 600px) { .question-card { padding: 28px 24px; } }

  .question-num {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 24px;
  }
  .question-num .current {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: var(--copper);
    line-height: 1;
  }
  .question-num .total {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--ink-mute);
    letter-spacing: 0.05em;
  }
  .question-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .question-helper {
    font-size: 14px;
    color: var(--ink-mute);
    margin-bottom: 32px;
    line-height: 1.55;
  }

  .options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .option:hover {
    background: var(--bg-deep);
    border-color: var(--line-soft);
  }
  .option.selected {
    background: var(--copper-soft);
    border-color: var(--copper);
  }
  .option-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-mute);
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: all 0.15s ease;
  }
  .option.selected .option-radio {
    border-color: var(--copper);
    background: var(--copper);
  }
  .option.selected .option-radio::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    background: var(--paper);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .option-content { flex: 1; }
  .option-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 2px;
  }
  .option-desc {
    font-size: 13px;
    color: var(--ink-mute);
    line-height: 1.45;
  }

  .question-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
  }

  /* ==================== MARKETS SCREEN ==================== */
  .markets-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 40px;
    margin-bottom: 32px;
    align-items: start;
  }
  @media (max-width: 900px) { .markets-layout { grid-template-columns: 1fr; gap: 24px; } }

  .markets-picker {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
  }
  .markets-states-section {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line-soft);
  }
  .states-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }
  .state-chip {
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    user-select: none;
    font-weight: 500;
    color: var(--ink-soft);
  }
  .state-chip:hover {
    border-color: var(--copper);
    transform: translateY(-1px);
    color: var(--ink);
  }
  .state-chip.selected {
    background: var(--copper);
    color: var(--paper);
    border-color: var(--copper);
    font-weight: 600;
  }
  .state-chip-name {
    display: block;
    line-height: 1.2;
  }

  .markets-dmas-section { min-height: 100px; }
  .markets-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--ink-mute);
    font-size: 14px;
    border: 1px dashed var(--line-soft);
    border-radius: 8px;
  }

  .markets-state-section {
    margin-bottom: 24px;
  }
  .markets-state-section:last-child { margin-bottom: 0; }
  .markets-state-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
  }
  .markets-state-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .markets-state-count {
    font-size: 11px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
  }

  .markets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
  }
  .market-chip {
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
  }
  .market-chip:hover {
    border-color: var(--copper);
    transform: translateY(-1px);
  }
  .market-chip.selected {
    background: var(--copper);
    color: var(--paper);
    border-color: var(--copper);
  }
  .market-chip .check {
    opacity: 0;
    color: var(--mint);
    font-weight: 700;
    font-size: 11px;
  }
  .market-chip.selected .check { opacity: 1; }
  .market-tier {
    font-size: 9px;
    padding: 2px 6px;
    background: var(--bg-deep);
    color: var(--ink-mute);
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
  .market-chip.selected .market-tier {
    background: rgba(255, 255, 255, 0.2);
    color: var(--mint);
  }

  .markets-summary {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 24px;
    max-height: 70vh;
    overflow-y: auto;
  }
  .selected-markets-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .selected-markets-empty {
    padding: 20px 0;
    color: var(--ink-mute);
    font-size: 13px;
    text-align: center;
    
  }
  .selected-market-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 2px;
    font-size: 13px;
  }
  .selected-market-state {
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 4px;
    font-weight: 600;
  }
  .selected-market-remove {
    background: none;
    border: none;
    color: var(--ink-mute);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 2px;
    transition: all 0.15s ease;
  }
  .selected-market-remove:hover {
    background: var(--copper);
    color: var(--paper);
  }

  /* ==================== OPPORTUNITY SCREEN ==================== */
  .opp-hero {
    margin-bottom: 48px;
    animation: fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .opp-hero-frame {
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    border: 1px solid var(--purple-deep);
    border-radius: 16px;
    padding: 64px 48px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    color: var(--paper);
  }
  .opp-hero-frame::before {
    content: '';
    position: absolute;
    top: -10%; right: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(147, 21, 246, 0.4) 0%, transparent 65%);
    pointer-events: none;
  }
  .opp-hero-frame::after {
    content: '';
    position: absolute;
    bottom: -20%; left: -10%;
    width: 450px; height: 450px;
    background: radial-gradient(circle, rgba(0, 173, 169, 0.18) 0%, transparent 65%);
    pointer-events: none;
  }
  .opp-annual-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--mint);
    font-weight: 600;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
  }
  .opp-annual-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(72px, 12vw, 144px);
    line-height: 0.9;
    color: var(--paper);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    animation: scaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
    letter-spacing: -0.03em;
  }
  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
  }
  .opp-monthly {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 26px;
    color: var(--mint);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
  }
  .opp-disclaimer {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
    position: relative;
    z-index: 1;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .opp-breakdown {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 48px;
    animation: fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
  }
  @media (max-width: 900px) {
    .opp-breakdown { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 500px) {
    .opp-breakdown { grid-template-columns: 1fr; }
  }
  .opp-stat {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 22px 20px;
    transition: all 0.2s ease;
  }
  .opp-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }
  .opp-stat-feature {
    background: linear-gradient(135deg, var(--copper) 0%, var(--copper-deep) 100%);
    color: var(--paper);
    border-color: var(--copper);
  }
  .opp-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    font-weight: 600;
    margin-bottom: 12px;
  }
  .opp-stat-feature .opp-stat-label { color: var(--mint); }
  .opp-stat-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }
  .opp-stat-feature .opp-stat-num { color: var(--paper); }
  .opp-stat-sub {
    font-size: 11px;
    color: var(--ink-mute);
    line-height: 1.4;
  }
  .opp-stat-feature .opp-stat-sub { color: rgba(255,255,255,0.7); }

  .opp-cta-block {
    background: var(--bg-deep);
    border-radius: 12px;
    padding: 36px 40px;
    border-left: 4px solid var(--copper);
    animation: fadeUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
  }
  .opp-cta-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.45;
    color: var(--ink);
    margin-bottom: 24px;
    max-width: 800px;
  }

  /* ==================== OPP REMINDER (sidebar) ==================== */
  .opp-reminder {
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    color: var(--paper);
    padding: 18px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
  }
  .opp-reminder::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: var(--mint);
  }
  .opp-reminder-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--copper-soft);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .opp-reminder-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    
    font-size: 32px;
    line-height: 1;
    color: var(--paper);
    margin-bottom: 4px;
  }
  .opp-reminder-sub {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* ==================== SIDEBAR ==================== */
  .side-panel {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 32px 28px;
    position: sticky;
    top: 24px;
  }
  .panel-header {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
  }
  .panel-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  .confidence-display {
    margin-bottom: 28px;
  }
  .confidence-number {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
  }
  .confidence-number .num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 56px;
    line-height: 1;
    color: var(--copper);
    
  }
  .confidence-number .pct {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--ink-mute);
  }
  .confidence-bar {
    height: 6px;
    background: var(--bg-deep);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--copper) 0%, var(--copper-deep) 100%);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
  }
  .confidence-label {
    font-size: 12px;
    color: var(--ink-mute);
    line-height: 1.5;
  }

  .selected-trades {
    margin-bottom: 24px;
  }
  .selected-trades-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }
  .trade-tag {
    font-size: 11px;
    padding: 4px 10px;
    background: var(--bg-deep);
    border-radius: 12px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
  }

  .stage-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .stage-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
  }
  .stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-soft);
    margin-top: 6px;
    flex-shrink: 0;
    transition: all 0.3s ease;
  }
  .stage-item.complete .stage-dot {
    background: var(--green);
  }
  .stage-item.active .stage-dot {
    background: var(--copper);
    box-shadow: 0 0 0 4px var(--copper-soft);
  }
  .stage-text { flex: 1; }
  .stage-name {
    font-weight: 500;
    color: var(--ink-soft);
  }
  .stage-item.active .stage-name { color: var(--ink); }
  .stage-detail {
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 2px;
  }

  /* ==================== EARLY EXIT BAR ==================== */
  .early-exit {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line-soft);
  }
  .early-exit-text {
    font-size: 12px;
    color: var(--ink-mute);
    margin-bottom: 12px;
    line-height: 1.5;
  }

  /* ==================== RESULTS SCREEN ==================== */
  .results-hero {
    margin-bottom: 56px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line-soft);
  }
  .results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }
  @media (max-width: 900px) { .results-grid { grid-template-columns: 1fr; } }

  .results-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--copper);
    margin-bottom: 14px;
    font-weight: 600;
  }
  .results-title {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    margin-bottom: 20px;
  }
  .results-summary {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
  }

  .confidence-block {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 32px;
    box-shadow: var(--shadow-md);
  }
  .confidence-block .num-large {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 96px;
    line-height: 0.9;
    color: var(--copper);
    
    margin-bottom: 8px;
  }
  .confidence-block .num-large .pct-mark {
    font-style: normal;
    font-size: 32px;
    color: var(--ink-mute);
    margin-left: 4px;
  }

  .recommendation {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
  }
  .recommendation:hover { box-shadow: var(--shadow-md); }

  .rec-header {
    padding: 24px 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(180deg, transparent, rgba(232, 219, 254, 0.3));
  }
  .rec-rank {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 36px;
    color: var(--copper);
    line-height: 1;
    min-width: 30px;
    letter-spacing: -0.02em;
  }
  .rec-title-block { }
  .rec-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    margin-bottom: 4px;
  }
  .rec-subtitle {
    font-size: 12px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .rec-fit-badge {
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 9999px;
    white-space: nowrap;
  }
  .fit-strong { background: var(--mint); color: var(--ink); }
  .fit-conditional { background: #FFE9C7; color: #8B5A0E; }
  .fit-flag { background: #FCDCDC; color: var(--red); }

  .rec-body {
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  @media (max-width: 700px) { .rec-body { grid-template-columns: 1fr; gap: 20px; } }

  .rec-section h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    margin-bottom: 12px;
    font-weight: 600;
  }
  .rec-section ul {
    list-style: none;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .rec-section li {
    padding-left: 18px;
    position: relative;
    margin-bottom: 6px;
  }
  .rec-section li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 1px;
    background: var(--copper);
  }
  .rec-section p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  .rec-benchmarks {
    background: var(--bg);
    padding: 20px 28px;
    border-top: 1px solid var(--line-soft);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 24px;
  }
  .benchmark .bm-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .benchmark .bm-label {
    font-size: 11px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* ==================== CONSIDERATIONS / DISCONNECTS ==================== */
  .considerations-block {
    background: var(--copper-soft);
    border-left: 4px solid var(--copper);
    padding: 28px 32px;
    margin-bottom: 40px;
    border-radius: 0 12px 12px 0;
  }
  .considerations-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
  }
  .considerations-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--copper);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    flex-shrink: 0;
  }
  .considerations-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--copper-deep);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .considerations-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
  }
  .considerations-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .considerations-list li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    padding: 12px 0 12px 0;
    border-top: 1px solid rgba(147, 21, 246, 0.15);
  }
  .considerations-list li:first-child {
    border-top: none;
  }

  /* ==================== BUNDLE HEADER CARD ==================== */
  .bundle-card {
    position: relative;
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    border-radius: 16px;
    padding: 40px 44px;
    margin-bottom: 40px;
    color: var(--paper);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .bundle-card::before {
    content: '';
    position: absolute;
    top: -10%; right: -8%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(147, 21, 246, 0.4) 0%, transparent 65%);
    pointer-events: none;
  }
  .bundle-card::after {
    content: '';
    position: absolute;
    bottom: -20%; left: -10%;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(0, 173, 169, 0.18) 0%, transparent 65%);
    pointer-events: none;
  }
  .bundle-card-content {
    position: relative;
    z-index: 1;
  }
  .bundle-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--mint);
    margin-bottom: 16px;
    font-weight: 700;
  }
  .bundle-products {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
  }
  .bundle-product {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--paper);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .bundle-plus {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 26px;
    color: var(--mint);
    line-height: 1;
  }
  .bundle-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 24px;
    padding: 24px 0;
    margin-bottom: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .bundle-stat-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    color: var(--paper);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
  }
  .bundle-stat-big .bundle-stat-num {
    font-size: 48px;
    color: var(--mint);
  }
  .bundle-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
  }
  .bundle-stat-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
  }
  .bundle-narrative {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 720px;
  }

  /* ==================== PROBABILITY BADGE ==================== */
  .rec-fit-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }
  .rec-probability {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--copper-soft);
    padding: 8px 14px;
    border-radius: 9999px;
  }
  .rec-prob-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    color: var(--copper-deep);
    letter-spacing: -0.02em;
  }
  .rec-prob-pct {
    font-size: 13px;
    color: var(--copper-deep);
  }
  .rec-prob-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--copper-deep);
    font-weight: 600;
    line-height: 1.15;
  }

  /* Featured benchmark for available volume */
  .benchmark.benchmark-feature .bm-num {
    color: var(--copper);
  }
  .benchmark.benchmark-feature .bm-label {
    color: var(--copper-deep);
    font-weight: 600;
  }

  /* ==================== RECS SECTION TITLES ==================== */
  .recs-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--copper);
    font-weight: 700;
    margin: 8px 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .recs-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line-soft);
  }
  .recs-section-title.recs-section-addon {
    margin-top: 32px;
    color: var(--ink-mute);
  }

  /* ==================== REC CARD VARIANTS ==================== */
  .recommendation-addon {
    background: var(--bg-deep);
  }
  .recommendation-addon .rec-header {
    background: linear-gradient(180deg, transparent, rgba(232, 219, 254, 0.4));
  }
  .recommendation-addon .rec-rank {
    background: var(--copper);
    color: var(--paper);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    min-width: 36px;
  }
  .recommendation-special .rec-rank {
    color: var(--warning);
  }

  .rec-detail {
    font-size: 13px;
    color: var(--ink-mute);
    line-height: 1.5;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line-soft);
  }

  .rec-concerns {
    padding: 18px 28px;
    background: rgba(238, 145, 26, 0.06);
    border-top: 1px solid var(--line-soft);
  }
  .rec-concerns-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--warning);
    font-weight: 700;
    margin-bottom: 10px;
  }
  .rec-concerns ul {
    list-style: none;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
    padding: 0;
    margin: 0;
  }
  .rec-concerns li {
    padding-left: 18px;
    position: relative;
    margin-bottom: 6px;
  }
  .rec-concerns li::before {
    content: '⚠';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--warning);
    font-size: 11px;
  }

  /* ==================== EXCLUDED PRODUCTS ==================== */
  .excluded-section {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--line-soft);
  }
  .excluded-header {
    margin-bottom: 20px;
  }
  .excluded-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .excluded-sub {
    font-size: 14px;
    color: var(--ink-mute);
    line-height: 1.5;
    max-width: 700px;
  }
  .excluded-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .excluded-item {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
    align-items: baseline;
  }
  .excluded-item:last-child {
    border-bottom: 1px solid var(--line-soft);
  }
  @media (max-width: 700px) {
    .excluded-item { grid-template-columns: 1fr; gap: 4px; }
  }
  .excluded-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
  }
  .excluded-reason {
    font-size: 13px;
    color: var(--ink-mute);
    line-height: 1.5;
  }

  .actions-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--line-soft);
  }

  /* ==================== UTILITY ==================== */
  .spacer { height: 32px; }
  .divider {
    height: 1px;
    background: var(--line-soft);
    margin: 24px 0;
  }

  /* ==================== HOW IT WORKS / PRODUCTS / CHANNELS SCREENS ==================== */
  .hiw-hero {
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    border-radius: 16px;
    padding: 56px 56px;
    margin-bottom: 56px;
    color: var(--paper);
    position: relative;
    overflow: hidden;
    min-height: 240px;
    display: flex;
    align-items: center;
  }
  .hiw-hero::before {
    content: '';
    position: absolute;
    top: -10%; right: -5%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(147, 21, 246, 0.4) 0%, transparent 65%);
    pointer-events: none;
  }
  .hiw-hero::after {
    content: '';
    position: absolute;
    bottom: -20%; left: -10%;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(0, 173, 169, 0.18) 0%, transparent 65%);
    pointer-events: none;
  }
  .hiw-hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
  }
  @media (max-width: 720px) { .hiw-hero { padding: 36px 24px; } }
  .hiw-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--mint);
    font-weight: 700;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .hiw-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--mint);
  }
  .hiw-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.05;
    color: var(--paper);
    margin-bottom: 22px;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }
  @media (max-width: 900px) {
    .hiw-title { white-space: normal; }
  }
  .hiw-title em {
    font-style: normal;
    color: var(--mint);
  }
  .hiw-lede {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    max-width: 720px;
    margin: 0;
  }
  .hiw-section {
    margin-bottom: 80px;
  }
  .hiw-section-header {
    margin-bottom: 36px;
    max-width: 720px;
  }
  .hiw-section-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--copper);
    font-weight: 700;
    margin-bottom: 14px;
  }
  .hiw-section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
  }
  .hiw-section-sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
  }
  .journey-svg-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--purple-deep);
  }
  .journey-svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .hiw-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: var(--bg-deep);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 80px;
  }
  @media (max-width: 700px) {
    .hiw-stats-strip { grid-template-columns: repeat(2, 1fr); }
  }
  .hiw-stat { text-align: center; }
  .hiw-stat-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1;
    color: var(--copper);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }
  .hiw-stat-label {
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 500;
    line-height: 1.4;
  }
  .pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  @media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; } }
  .pillar-card {
    background: var(--paper);
    border: 1.5px solid var(--line-soft);
    border-radius: 12px;
    padding: 32px 28px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
  }
  .pillar-card:hover {
    border-color: var(--copper);
    box-shadow: var(--shadow-md);
  }
  .pillar-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--copper);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 20px;
  }
  .pillar-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
  }
  .pillar-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 18px;
    flex: 1;
  }
  .pillar-quote {
    padding: 14px 16px;
    background: var(--bg-deep);
    border-left: 3px solid var(--copper);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink);
    font-weight: 500;
  }
  .cohort-table {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }
  .cohort-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1.4fr;
    align-items: center;
    border-bottom: 1px solid var(--line-soft);
  }
  .cohort-row:last-child { border-bottom: none; }
  .cohort-header { background: var(--bg-deep); }
  .cohort-header .cohort-cell {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
    padding: 16px 18px;
  }
  .cohort-cell {
    padding: 18px;
    font-size: 14px;
    color: var(--ink-soft);
  }
  .cohort-tier {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
  }
  .cohort-rev {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--copper);
    font-size: 16px;
    letter-spacing: -0.01em;
  }
  .cohort-best {
    background: linear-gradient(90deg, rgba(201, 252, 181, 0.2) 0%, transparent 100%);
  }
  .cohort-best .cohort-tier { color: var(--copper-deep); }
  .cohort-note {
    font-size: 13px;
    color: var(--ink-mute);
    margin-top: 14px;
    font-style: italic;
  }
  .hiw-cta {
    background: var(--bg-deep);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    border: 1px solid var(--line-soft);
  }
  .hiw-cta-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--ink);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
  }

  /* ==================== PRODUCTS GRID ==================== */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 56px;
  }
  .product-card {
    background: var(--paper);
    border: 1.5px solid var(--line-soft);
    border-radius: 12px;
    padding: 28px 26px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .product-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  .product-card:hover {
    transform: translateY(-6px);
    border-color: var(--purple-deep);
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    box-shadow: 0 20px 40px rgba(53, 33, 87, 0.35), 0 8px 16px rgba(53, 33, 87, 0.18);
  }
  .product-card:hover .product-card-title {
    color: #FFFFFF;
  }
  .product-card:hover .product-card-tagline {
    color: var(--mint);
  }
  .product-card:hover .product-card-summary {
    color: rgba(255, 255, 255, 0.85);
    border-top-color: rgba(255, 255, 255, 0.15);
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }
  .product-card:hover .product-card-opp {
    background: rgba(201, 252, 181, 0.10);
    border-color: rgba(201, 252, 181, 0.25);
  }
  .product-card:hover .product-card-opp-rev {
    color: var(--mint);
  }
  .product-card:hover .product-card-opp-rev-sub {
    color: rgba(255, 255, 255, 0.7);
  }
  .product-card:hover .product-card-opp-funnel {
    color: rgba(255, 255, 255, 0.85);
  }
  .product-card:hover .product-card-opp-rev-small {
    color: rgba(255, 255, 255, 0.85);
  }
  .product-card:hover .product-card-opp-rev-small em {
    color: var(--mint);
  }
  .product-card:hover .product-card-cta {
    color: var(--mint);
  }
  .product-card-placeholder {
    background: var(--bg-deep);
    opacity: 0.85;
  }
  .product-placeholder-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--warning);
    color: var(--paper);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 4px 10px;
    border-radius: 9999px;
  }
  .product-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }
  .product-card-tagline {
    font-size: 13px;
    color: var(--copper);
    line-height: 1.4;
    margin-bottom: 18px;
    font-weight: 600;
  }
  .product-card-summary {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 22px;
    flex: 1;
    padding: 18px 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }
  .product-card-cta {
    color: var(--copper);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .product-card:hover .product-card-cta .arrow {
    transform: translateX(3px);
  }

  /* ==================== PRODUCT CARD OPPORTUNITY ==================== */
  .product-card-opp {
    margin: 0 0 20px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(147, 21, 246, 0.06) 0%, rgba(201, 252, 181, 0.10) 100%);
    border: 1px solid rgba(147, 21, 246, 0.12);
    border-radius: 12px;
    user-select: none;
  }
  .product-card-opp-content {
    display: block;
  }
  .product-card-opp-rev {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.1;
    color: var(--copper);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .product-card-opp-rev-sub {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: var(--ink-mute);
    margin-left: 6px;
    letter-spacing: 0;
  }
  .product-card-opp-funnel {
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .product-card-opp-rev-small {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.4;
  }
  .product-card-opp-rev-small em {
    color: var(--copper);
    font-style: normal;
    font-weight: 700;
  }
  .product-card-opp-finance,
  .product-card-opp-placeholder {
    cursor: default;
  }
  .product-card-opp-finance:hover,
  .product-card-opp-placeholder:hover {
    border-color: rgba(147, 21, 246, 0.12);
  }

  /* ==================== PRODUCT DETAIL MODAL ==================== */
  .product-detail {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    animation: fadeIn 0.2s ease;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .product-detail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(53, 33, 87, 0.6);
    backdrop-filter: blur(6px);
  }
  .product-detail-panel {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 80px);
    background: var(--paper);
    border-radius: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 32px 80px rgba(53, 33, 87, 0.4);
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes popIn {
    from { transform: scale(0.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  .product-detail-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: var(--paper);
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    transition: all 0.15s ease;
    backdrop-filter: blur(8px);
  }
  .product-detail-close:hover {
    background: var(--paper);
    color: var(--copper);
  }
  .product-detail-header {
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    padding: 48px 44px 36px;
    color: var(--paper);
    position: relative;
    overflow: hidden;
  }
  .product-detail-header::before {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(147, 21, 246, 0.4) 0%, transparent 65%);
    pointer-events: none;
  }
  .product-detail-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.1;
    color: var(--paper);
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
    padding-right: 50px;
  }
  .product-detail-tagline {
    font-size: 15px;
    color: var(--mint);
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: 500;
  }
  .product-detail-body {
    padding: 32px 44px 44px;
  }
  @media (max-width: 600px) {
    .product-detail { padding: 20px 12px; }
    .product-detail-panel { max-height: calc(100vh - 40px); }
    .product-detail-header { padding: 36px 24px 28px; }
    .product-detail-body { padding: 24px 24px 32px; }
    .product-detail-title { font-size: 26px; }
  }
  .product-detail-detail {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line-soft);
  }
  .product-detail-section { margin-bottom: 32px; }
  .product-detail-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--copper);
    font-weight: 700;
    margin-bottom: 16px;
  }
  .product-detail-steps {
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
  }
  .product-detail-steps li {
    counter-increment: step;
    padding-left: 48px;
    margin-bottom: 16px;
    position: relative;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .product-detail-steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: var(--copper-soft);
    color: var(--copper-deep);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 12px;
  }
  .product-detail-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .product-detail-checklist li {
    padding: 10px 0 10px 28px;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line-soft);
  }
  .product-detail-checklist li:last-child { border-bottom: none; }
  .product-detail-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 11px;
    color: var(--copper);
    font-weight: 800;
  }
  .product-detail-benchmarks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    padding: 20px;
    background: var(--bg-deep);
    border-radius: 8px;
  }
  .product-detail-bm-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
  }
  .product-detail-bm-label {
    font-size: 11px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
  }
  .product-detail-quote {
    padding: 22px 26px;
    background: var(--copper-soft);
    border-left: 4px solid var(--copper);
    border-radius: 0 8px 8px 0;
    margin-bottom: 32px;
  }
  .product-detail-quote-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--copper-deep);
    font-weight: 700;
    margin-bottom: 8px;
  }
  .product-detail-quote p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0;
    font-weight: 500;
  }
  .product-detail-placeholder {
    padding: 40px 28px;
    background: var(--bg-deep);
    border-radius: 8px;
    text-align: center;
    border: 2px dashed var(--line-soft);
  }
  .product-detail-placeholder-tag {
    display: inline-block;
    background: var(--warning);
    color: var(--paper);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 5px 12px;
    border-radius: 9999px;
    margin-bottom: 16px;
  }
  .product-detail-placeholder h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 8px;
  }
  .product-detail-placeholder p {
    font-size: 14px;
    color: var(--ink-mute);
    line-height: 1.5;
    margin: 0;
  }
  .product-detail-cta-block {
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
    text-align: center;
  }

  /* REC LEARN MORE LINK */
  .rec-footer-link {
    padding: 16px 28px;
    border-top: 1px solid var(--line-soft);
  }
  .rec-learn-more {
    background: transparent;
    border: none;
    color: var(--copper);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    transition: color 0.15s ease;
  }
  .rec-learn-more:hover { color: var(--copper-deep); }
  .rec-learn-more:hover .arrow { transform: translateX(3px); }
  .rec-learn-more .arrow { transition: transform 0.15s ease; }

  /* ==================== CHANNELS PAGE ==================== */
  .channels-hero {
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    border-radius: 16px;
    padding: 56px 56px 56px 56px;
    margin-bottom: 40px;
    color: var(--paper);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: center;
    min-height: 420px;
  }
  @media (max-width: 900px) {
    .channels-hero {
      grid-template-columns: 1fr;
      padding: 40px 28px 0;
      min-height: 0;
    }
  }
  .channels-hero::before {
    content: '';
    position: absolute;
    top: -10%; left: -5%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(147, 21, 246, 0.4) 0%, transparent 65%);
    pointer-events: none;
  }
  .channels-hero-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
  }
  .channels-hero-visual {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden;
  }
  @media (min-width: 901px) {
    .channels-hero-visual {
      position: absolute;
      right: -200px;
      top: 50%;
      transform: translateY(-50%);
      width: 580px;
      height: auto;
    }
  }
  @media (max-width: 900px) {
    .channels-hero-visual {
      margin: 0 -28px -20px;
      text-align: center;
    }
  }
  .everywhere-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
  }
  @media (max-width: 900px) {
    .everywhere-image { max-width: 360px; margin: 0 auto; }
  }

  .channels-intro {
    margin-bottom: 24px;
    text-align: center;
  }
  .channels-intro p {
    font-size: 14px;
    color: var(--ink-mute);
    margin: 0;
  }

  /* ==================== CHANNELS GRID ==================== */
  .channels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 56px;
  }
  @media (max-width: 800px) {
    .channels-grid { grid-template-columns: 1fr; }
  }
  .channel-card {
    background: var(--paper);
    border: 1.5px solid var(--line-soft);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
  }
  .channel-card:hover {
    background: var(--copper);
    border-color: var(--copper);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }
  .channel-card:hover .channel-card-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--paper);
  }
  .channel-card:hover .channel-card-name,
  .channel-card:hover .channel-card-tagline {
    color: var(--paper);
  }
  .channel-card:hover .channel-card-toggle {
    background: var(--paper);
    color: var(--copper);
    border-color: var(--paper);
  }
  .channel-card.expanded {
    grid-column: 1 / -1;
    background: var(--paper);
    border-color: var(--copper);
    box-shadow: var(--shadow-md);
    transform: none;
  }
  .channel-card.expanded:hover {
    background: var(--paper);
    transform: none;
  }
  .channel-card.expanded:hover .channel-card-icon {
    background: var(--copper);
    color: var(--paper);
  }
  .channel-card.expanded:hover .channel-card-name,
  .channel-card.expanded:hover .channel-card-tagline {
    color: var(--ink);
  }
  .channel-card.expanded:hover .channel-card-tagline {
    color: var(--ink-mute);
  }
  .channel-card.expanded:hover .channel-card-toggle {
    background: var(--copper);
    color: var(--paper);
    border-color: var(--copper);
  }
  .channel-card-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    cursor: pointer;
    user-select: none;
    transition: padding 0.2s ease;
  }
  .channel-card-icon {
    width: 44px;
    height: 44px;
    background: var(--copper-soft);
    color: var(--copper);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .channel-card.expanded .channel-card-icon {
    background: var(--copper);
    color: var(--paper);
  }
  .channel-card-titles {
    min-width: 0;
  }
  .channel-card-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 3px;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
  }
  .channel-card-tagline {
    font-size: 12.5px;
    color: var(--ink-mute);
    margin: 0;
    line-height: 1.4;
    transition: color 0.2s ease;
  }
  .channel-card-toggle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-mute);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    transition: all 0.25s ease;
    border: 1.5px solid var(--line-soft);
    flex-shrink: 0;
  }
  .channel-card.expanded .channel-card-toggle {
    transform: rotate(180deg);
    background: var(--copper);
    color: var(--paper);
    border-color: var(--copper);
  }
  .channel-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .channel-card.expanded .channel-card-body {
    max-height: 6000px;
  }
  .channel-card-inner {
    padding: 0 28px 28px;
    border-top: 1px solid var(--line-soft);
  }
  .channel-card-summary {
    padding: 24px 0 20px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
  }
  .channel-card-details {
    padding: 18px 22px;
    background: var(--bg-deep);
    border-radius: 8px;
    margin-bottom: 20px;
  }
  .channel-card-details h4 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--copper-deep);
    font-weight: 700;
    margin-bottom: 12px;
  }
  .channel-card-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .channel-card-details li {
    padding-left: 22px;
    position: relative;
    margin-bottom: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .channel-card-details li:last-child { margin-bottom: 0; }
  .channel-card-details li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 1.5px;
    background: var(--copper);
  }
  .channel-card-examples h4 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--copper-deep);
    font-weight: 700;
    margin-bottom: 14px;
  }
  .channel-card-examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
  }
  .ad-example {
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    transition: all 0.15s ease;
  }
  .ad-example:hover {
    border-color: var(--copper);
    box-shadow: var(--shadow-sm);
  }
  .ad-example-source {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .ad-example-favicon {
    width: 12px;
    height: 12px;
    background: var(--copper);
    border-radius: 50%;
    flex-shrink: 0;
  }
  .ad-example-url {
    font-size: 11px;
    color: var(--ink-mute);
    font-weight: 500;
  }
  .ad-example-title {
    font-size: 13px;
    color: #1a0dab;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 5px;
  }
  .ad-example-body {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .channel-card-examples-note {
    padding: 14px 18px;
    background: var(--bg);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--ink-mute);
    font-style: italic;
  }

  /* ==================== TRUSTED BY MARQUEE ==================== */
  .trusted-by-strip {
    margin: 12px -40px 0;
    padding: 28px 40px 28px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid var(--line-soft);
  }
  @media (max-width: 720px) {
    .trusted-by-strip { margin: 8px -20px 0; padding: 24px 20px 22px; }
  }
  .trusted-by-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    font-weight: 600;
    text-align: center;
    margin-bottom: 26px;
  }
  .logo-marquee {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .logo-track {
    display: flex;
    align-items: center;
    gap: 80px;
    width: max-content;
    animation: scroll-marquee 50s linear infinite;
  }
  @keyframes scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .logo-marquee:hover .logo-track { animation-play-state: paused; }
  .logo-item {
    flex-shrink: 0;
    height: 81px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .logo-item img {
    max-height: 81px;
    max-width: 212px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.25s ease;
  }
  .logo-item:hover img {
    transform: scale(1.08);
  }

  /* ==================== LANDING PAGES POPUP ==================== */
  .landing-popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    animation: fadeIn 0.25s ease;
  }
  .landing-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(53, 33, 87, 0.65);
    backdrop-filter: blur(8px);
  }
  .landing-popup-panel {
    position: relative;
    width: 100%;
    max-width: 1100px;
    max-height: calc(100vh - 80px);
    background: var(--paper);
    border-radius: 16px;
    overflow-y: auto;
    box-shadow: 0 32px 80px rgba(53, 33, 87, 0.45);
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .landing-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--paper);
    font-size: 17px;
    cursor: pointer;
    z-index: 2;
    transition: all 0.15s ease;
    backdrop-filter: blur(8px);
  }
  .landing-popup-close:hover {
    background: var(--paper);
    color: var(--copper);
  }
  .landing-popup-header {
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    padding: 44px 48px 36px;
    color: var(--paper);
    position: relative;
    overflow: hidden;
  }
  .landing-popup-header::before {
    content: '';
    position: absolute;
    top: -30%; right: -10%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(147, 21, 246, 0.4) 0%, transparent 65%);
    pointer-events: none;
  }
  .landing-popup-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.1;
    color: var(--paper);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
  }
  .landing-popup-title em {
    font-style: normal;
    color: var(--mint);
  }
  .landing-popup-lede {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 720px;
    position: relative;
    z-index: 1;
  }
  .landing-popup-grid {
    padding: 36px 48px 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  @media (max-width: 800px) {
    .landing-popup-grid { grid-template-columns: 1fr; padding: 28px 24px 20px; }
    .landing-popup-header { padding: 32px 24px 26px; }
    .landing-popup-title { font-size: 26px; }
  }
  .landing-page-card {
    background: var(--paper);
    border: 1.5px solid var(--line-soft);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
  }
  .landing-page-card:hover {
    border-color: var(--copper);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .landing-page-img-wrap {
    background: var(--bg-deep);
    border-bottom: 1px solid var(--line-soft);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: flex-start;
  }
  .landing-page-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
  }
  .landing-page-meta {
    padding: 16px 18px;
  }
  .landing-page-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  .landing-page-url {
    font-size: 12px;
    color: var(--copper);
    font-weight: 500;
    margin-bottom: 10px;
  }
  .landing-page-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .landing-page-tags span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
    background: var(--bg-deep);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 600;
  }
  .landing-popup-footer {
    padding: 0 48px 36px;
    text-align: center;
  }
  .landing-popup-footer p {
    font-size: 13px;
    color: var(--ink-mute);
    font-style: italic;
    margin: 0;
  }

  /* ==================== CHANNEL FAMILY LOGOS ==================== */
  .channel-card-family {
    margin-bottom: 20px;
  }
  .channel-card-family h4 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--copper-deep);
    font-weight: 700;
    margin-bottom: 14px;
  }
  .channel-family-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
  }
  .channel-family-logo {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    transition: all 0.15s ease;
  }
  .channel-family-logo:hover {
    border-color: var(--copper);
    background: var(--bg-deep);
  }
  .channel-family-logo img {
    max-width: 100%;
    max-height: 36px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* ==================== CHANNEL HOVER FIX ==================== */
  /* When card is expanded, kill hover purple entirely */
  .channel-card.expanded:hover {
    background: var(--paper) !important;
    border-color: var(--copper) !important;
    transform: none !important;
    box-shadow: var(--shadow-md) !important;
  }
  .channel-card.expanded:hover .channel-card-icon {
    background: var(--copper) !important;
    color: var(--paper) !important;
  }
  .channel-card.expanded:hover .channel-card-name {
    color: var(--ink) !important;
  }
  .channel-card.expanded:hover .channel-card-tagline {
    color: var(--ink-mute) !important;
  }
  .channel-card.expanded:hover .channel-card-toggle {
    background: var(--copper) !important;
    color: var(--paper) !important;
    border-color: var(--copper) !important;
  }

  /* ==================== RIGHT PRICING EMBED ==================== */
  /* Right Pricing screen: full-bleed, tight top to maximize calculator space */
  #screen-right-pricing {
    margin: -20px -40px 0;
    max-width: none;
    padding: 0;
  }
  @media (max-width: 720px) { #screen-right-pricing { margin: -16px -20px 0; } }
  .rp-embed-wrap {
    position: relative;
    width: 100%;
    background: var(--bg-deep);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .rp-iframe {
    width: 100%;
    height: calc(100vh - 130px);
    min-height: 720px;
    border: none;
    display: block;
    background: #FFFFFF;
  }
  .rp-embed-loader {
    min-height: calc(100vh - 130px);
  }
  .rp-embed-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    color: var(--paper);
    z-index: 1;
  }
  .rp-loader-spin {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--mint);
    border-radius: 50%;
    animation: rp-spin 0.9s linear infinite;
  }
  @keyframes rp-spin { to { transform: rotate(360deg); } }
  .rp-loader-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
  }

  /* Results page CTA */
  .rp-results-cta {
    margin: 40px 0;
    padding: 32px 40px;
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
    color: var(--paper);
    position: relative;
    overflow: hidden;
  }
  .rp-results-cta::before {
    content: '';
    position: absolute;
    top: -30%; right: -10%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(147, 21, 246, 0.4) 0%, transparent 65%);
    pointer-events: none;
  }
  @media (max-width: 720px) {
    .rp-results-cta { grid-template-columns: 1fr; padding: 24px; }
  }
  .rp-results-cta-content { position: relative; z-index: 1; }
  .rp-results-cta-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--mint);
    font-weight: 700;
    margin-bottom: 12px;
  }
  .rp-results-cta-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
    color: var(--paper);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  .rp-results-cta-title em {
    font-style: normal;
    color: var(--mint);
  }
  .rp-results-cta-sub {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 620px;
  }
  .rp-results-cta-btn {
    position: relative;
    z-index: 1;
    background: var(--mint) !important;
    color: var(--purple-deep) !important;
    font-weight: 700 !important;
    border: none !important;
  }
  .rp-results-cta-btn:hover {
    background: var(--paper) !important;
    transform: translateY(-1px);
  }

  /* Suppress hover state during expand/collapse transition */
  .channel-card.no-hover:hover {
    background: var(--paper) !important;
    border-color: var(--line-soft) !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .channel-card.no-hover:hover .channel-card-icon {
    background: var(--copper-soft) !important;
    color: var(--copper) !important;
  }
  .channel-card.no-hover:hover .channel-card-name {
    color: var(--ink) !important;
  }
  .channel-card.no-hover:hover .channel-card-tagline {
    color: var(--ink-mute) !important;
  }
  .channel-card.no-hover:hover .channel-card-toggle {
    background: transparent !important;
    color: var(--ink-mute) !important;
    border-color: var(--line-soft) !important;
  }
  .channel-card.expanded.no-hover:hover .channel-card-icon,
  .channel-card.expanded .channel-card-icon {
    background: var(--copper) !important;
    color: var(--paper) !important;
  }
  .channel-card.expanded.no-hover:hover .channel-card-toggle,
  .channel-card.expanded .channel-card-toggle {
    background: var(--copper) !important;
    color: var(--paper) !important;
    border-color: var(--copper) !important;
  }

  .logo-item.logo-item-cap img {
    max-height: 65px;
    max-width: 130px;
  }

  /* Tighter top spacing on Right Pricing screen */
  /* Right Pricing: zero gap between outer top bar and RP internal nav */
  /* Topbar has: padding-bottom: 24px (creates space below logo/nav before line), margin-bottom: 48px (gap between topbar and content) */
  /* We override topbar's bottom margin AND bottom padding when rp-active */
  body.rp-active .shell {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    max-width: none !important;
  }
  body.rp-active .topbar {
    margin: 0 !important;
    padding: 14px 40px !important;
    border-bottom: 1px solid var(--line-soft) !important;
    background: var(--bg) !important;
  }
  body.rp-active #screen-right-pricing {
    margin: 0 !important;
  }
  @media (max-width: 720px) {
    body.rp-active .topbar { padding: 12px 20px !important; }
    body.rp-active #screen-right-pricing { margin: 0 !important; }
  }
  body.rp-active .rp-embed-wrap {
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: 1px solid var(--line-soft);
  }
  body.rp-active .rp-iframe {
    height: calc(100vh - 90px) !important;
  }


  /* ==================== HIW STATS FEATURE (top of page, prominent) ==================== */
  .hiw-stats-feature {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin: -32px 0 56px;
    position: relative;
    z-index: 2;
  }
  @media (max-width: 1100px) {
    .hiw-stats-feature { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 700px) {
    .hiw-stats-feature { grid-template-columns: repeat(2, 1fr); margin-top: -24px; }
  }
  .hiw-stat-card {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 24px 18px 22px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(53, 33, 87, 0.08), 0 2px 6px rgba(53, 33, 87, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }
  .hiw-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--copper) 0%, var(--mint) 100%);
    transform: translateY(-3px);
    transition: transform 0.3s ease;
  }
  .hiw-stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--copper);
    box-shadow: 0 16px 32px rgba(53, 33, 87, 0.14), 0 4px 12px rgba(53, 33, 87, 0.06);
  }
  .hiw-stat-card:hover::before {
    transform: translateY(0);
  }
  .hiw-stat-card-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1;
    color: var(--copper);
    letter-spacing: -0.025em;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--copper) 0%, var(--copper-deep) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hiw-stat-card-label {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
    line-height: 1.4;
  }
  .diagnostic-stats-feature {
    max-width: 1180px;
    margin: -18px auto 48px;
  }
  .depth-footer:has(> .btn) {
    justify-content: flex-end;
  }

  /* ==================== TWO-SIDED (HOMEOWNERS / CONTRACTORS) ==================== */
  .twosided-section {
    margin-bottom: 80px;
  }
  .twosided-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  @media (max-width: 900px) {
    .twosided-grid { grid-template-columns: 1fr; }
  }
  .twosided-card {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 36px 32px 32px;
    box-shadow: 0 4px 16px rgba(53, 33, 87, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
  }
  .twosided-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(53, 33, 87, 0.12);
    border-color: var(--copper);
  }
  .twosided-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }
  .twosided-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .twosided-card-contractor .twosided-icon {
    background: linear-gradient(135deg, var(--copper) 0%, var(--copper-deep) 100%);
  }
  .twosided-card-titles { flex: 1; min-width: 0; }
  .twosided-card-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--copper);
    font-weight: 700;
    margin-bottom: 6px;
  }
  .twosided-card-contractor .twosided-card-eyebrow { color: var(--purple-deep); }
  .twosided-card-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.02em;
  }
  /* The rotating word */
  .twosided-rotator {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: bottom;
    min-width: 1px;
  }
  .twosided-rotator-word {
    display: inline-block;
    color: #9315F6;
    font-weight: 800;
    background: linear-gradient(135deg, #9315F6 0%, #6B0FBA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .twosided-card-contractor .twosided-rotator-word {
    background: linear-gradient(135deg, #9315F6 0%, #6B0FBA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .twosided-card-body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 26px;
  }
  .twosided-card-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: auto;
  }
  @media (max-width: 520px) {
    .twosided-card-pillars { grid-template-columns: 1fr; }
  }
  .twosided-pillar {
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 14px 14px 14px;
    transition: all 0.2s ease;
  }
  .twosided-pillar:hover {
    background: var(--paper);
    border-color: var(--copper);
  }
  .twosided-pillar-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 10px;
    color: var(--copper);
    letter-spacing: 0.14em;
    margin-bottom: 4px;
  }
  .twosided-card-contractor .twosided-pillar-num { color: var(--purple-deep); }
  .twosided-pillar-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 4px;
    letter-spacing: -0.005em;
  }
  .twosided-pillar-desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--ink-mute);
  }

  /* ==================== MARKETING ARCHITECTURE PYRAMID ==================== */
  .architecture-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin: 32px auto 0;
    max-width: 1000px;
  }
  .pyramid-layer {
    width: 100%;
    background: var(--paper);
    border: 1.5px solid var(--line-soft);
    border-radius: 14px;
    padding: 22px 28px;
    position: relative;
    box-shadow: 0 4px 14px rgba(53, 33, 87, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .pyramid-layer:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(53, 33, 87, 0.10);
    border-color: var(--copper);
  }
  /* Three widths to create a true pyramid stack */
  .pyramid-l1 { max-width: 360px; }
  .pyramid-l2 { max-width: 760px; }
  .pyramid-l3 { max-width: 960px; }
  .pyramid-l4 { max-width: 960px; }
  .pyramid-l1 {
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    color: var(--paper);
    border-color: var(--purple-deep);
  }
  .pyramid-l2 {
    background: var(--paper);
  }
  .pyramid-l3 {
    background: linear-gradient(135deg, var(--copper-soft) 0%, #F4ECFE 100%);
    border-color: var(--copper);
  }
  .pyramid-l4 {
    background: linear-gradient(135deg, var(--copper-soft) 0%, #F4ECFE 100%);
    border-color: var(--copper);
  }
  .pyramid-badge {
    position: absolute;
    top: -10px;
    left: 18px;
    background: var(--copper);
    color: var(--paper);
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 4px 10px;
    border-radius: 9999px;
  }
  .pyramid-l2 .pyramid-badge,
  .pyramid-l3 .pyramid-badge,
  .pyramid-l4 .pyramid-badge {
    background: var(--purple-deep);
  }
  .pyramid-content {
    text-align: center;
  }
  .pyramid-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .pyramid-l2 .pyramid-label,
  .pyramid-l3 .pyramid-label,
  .pyramid-l4 .pyramid-label {
    color: var(--ink);
  }
  .pyramid-label-note {
    display: inline-block;
    font-size: 0.58em;
    font-weight: 700;
    color: var(--ink-mute);
    letter-spacing: -0.01em;
    vertical-align: middle;
  }
  .pyramid-sub {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.92;
    line-height: 1.5;
  }
  .pyramid-l2 .pyramid-sub,
  .pyramid-l3 .pyramid-sub,
  .pyramid-l4 .pyramid-sub {
    color: var(--ink-soft);
    opacity: 1;
  }
  .pyramid-sources-cluster {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed rgba(53, 33, 87, 0.12);
  }
  .pyramid-source-chip {
    display: inline-block;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 9999px;
  }
  .pyramid-source-more {
    background: var(--copper-soft);
    color: var(--copper-deep);
    border-color: var(--copper);
    font-weight: 700;
  }
  @media (max-width: 700px) {
    .pyramid-l1, .pyramid-l2, .pyramid-l3, .pyramid-l4 { max-width: 100%; }
  }

  /* ==================== DFL SECTION ==================== */
  .dfl-section {
    margin-top: 64px;
  }
  .dfl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
    margin-top: 32px;
  }
  @media (max-width: 1000px) {
    .dfl-grid { grid-template-columns: 1fr; }
  }
  .dfl-loop-wrap {
    background: var(--paper);
    border: 1.5px solid var(--line-soft);
    border-left: 4px solid var(--copper);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(53, 33, 87, 0.04);
  }
  .dfl-loop {
    width: min(100%, 520px);
    max-width: 520px;
    height: auto;
    display: block;
    margin: 0 auto;
    align-self: center;
  }
  .dfl-quote-card {
    margin: 20px auto 0;
    width: min(100%, 520px);
    max-width: 520px;
    align-self: center;
    box-sizing: border-box;
    background: var(--paper);
    border: 1.5px solid var(--line-soft);
    border-left: 4px solid var(--copper);
    border-radius: 14px;
    padding: 20px 22px;
  }
  .dfl-quote {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.35;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .dfl-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .dfl-card {
    background: var(--paper);
    border: 1.5px solid var(--line-soft);
    border-radius: 14px;
    padding: 24px 24px 22px;
    flex: 1;
  }
  .dfl-card-input {
    border-left: 4px solid var(--copper);
  }
  .dfl-card-output {
    border-left: 4px solid #9315F6;
  }
  .dfl-card-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--copper);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
  }
  .dfl-card-output .dfl-card-eyebrow { color: #9315F6; }
  .dfl-card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
  }
  .dfl-card-block { margin-bottom: 14px; }
  .dfl-card-block:last-of-type { margin-bottom: 0; }
  .dfl-card-block-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 6px;
  }
  .dfl-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0;
  }
  .dfl-card-list li {
    position: relative;
    padding: 4px 0 4px 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.45;
  }
  .dfl-card-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--copper);
    font-weight: 700;
    font-size: 13px;
  }
  .dfl-card-list-soft li::before {
    content: '•';
    color: var(--ink-mute);
  }
  .dfl-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 16px;
    margin-top: 14px;
    border-top: 1px dashed rgba(53, 33, 87, 0.12);
  }
  .dfl-card-meta-key {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 2px;
  }
  .dfl-card-meta-val {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
  }
  .dfl-card-meta-val em {
    font-style: normal;
    font-weight: 500;
    color: var(--ink-soft);
    font-size: 11px;
  }
  .dfl-card-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: dflstep;
  }
  .dfl-card-steps li {
    position: relative;
    padding: 8px 0 8px 34px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
    counter-increment: dflstep;
    border-bottom: 1px dashed rgba(53, 33, 87, 0.08);
  }
  .dfl-card-steps li:last-child { border-bottom: none; }
  .dfl-card-steps li::before {
    content: counter(dflstep);
    position: absolute;
    left: 0;
    top: 8px;
    width: 22px;
    height: 22px;
    background: #9315F6;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dfl-card-steps li strong {
    color: var(--ink);
    font-weight: 700;
  }
  .dfl-card-steps li em {
    color: #9315F6;
    font-style: normal;
    font-weight: 700;
  }

  /* ==================== DFL EXAMPLE DATASET ==================== */
  .dfl-dataset {
    margin-top: 40px;
    background: var(--paper);
    border: 1.5px solid var(--line-soft);
    border-left: 4px solid var(--copper);
    border-radius: 16px;
    overflow: hidden;
  }
  .dfl-dataset-header {
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--line-soft);
  }
  .dfl-dataset-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #9315F6;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 4px;
  }
  .dfl-dataset-title {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  .dfl-dataset-sub {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0;
    max-width: 880px;
  }
  .dfl-table-wrap {
    width: 100%;
    overflow-x: auto;
  }
  .dfl-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
  }
  .dfl-table thead th {
    background: linear-gradient(180deg, #352157 0%, #4A2E70 100%);
    color: var(--paper);
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
  /* Gradient purple header chips for column emphasis (matching the visual reference) */
  .dfl-table thead th:nth-child(3) { background: linear-gradient(180deg, #9315F6 0%, #7B11D1 100%); }
  .dfl-table thead th:nth-child(4) { background: linear-gradient(180deg, #A22EF8 0%, #8B1FE0 100%); }
  .dfl-table thead th:nth-child(5) { background: linear-gradient(180deg, #B14CF9 0%, #9A2EE8 100%); }
  .dfl-table thead th:nth-child(6) { background: linear-gradient(180deg, #C170FA 0%, #AA56EF 100%); }
  .dfl-table thead th:nth-child(7) { background: linear-gradient(180deg, #D094FB 0%, #BB7EF3 100%); }
  .dfl-table thead th:nth-child(8) { background: linear-gradient(180deg, #DEB3FC 0%, #CCA1F5 100%); color: #352157; }
  .dfl-table thead th:nth-child(9) { background: linear-gradient(180deg, #ECCFFD 0%, #DEC0F8 100%); color: #352157; }
  .dfl-table tbody td {
    padding: 12px 14px;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
  }
  .dfl-table tbody tr:hover td {
    background: var(--bg-deep);
  }
  .dfl-table-row-win td {
    background: linear-gradient(90deg, rgba(201, 252, 181, 0.15) 0%, transparent 100%);
    color: var(--ink);
    font-weight: 600;
  }
  .dfl-table-row-win td:nth-child(9) {
    color: #4A8638;
    font-weight: 700;
  }

  /* ==================== RIGHT PRICING HAND-OFF ==================== */
  .rp-handoff {
    margin-top: 48px;
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    border-radius: 16px;
    padding: 32px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    color: var(--paper);
    position: relative;
    overflow: hidden;
  }
  .rp-handoff::before {
    content: '';
    position: absolute;
    top: -30%; right: -10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(147, 21, 246, 0.35) 0%, transparent 65%);
    pointer-events: none;
  }
  .rp-handoff-content {
    flex: 1;
    position: relative;
    z-index: 1;
  }
  .rp-handoff-eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--mint);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
  }
  .rp-handoff-title {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
  }
  .rp-handoff-title em {
    font-style: normal;
    color: var(--mint);
  }
  .rp-handoff-sub {
    font-family: 'Poppins', sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 700px;
  }
  .rp-handoff-btn {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }
  @media (max-width: 800px) {
    .rp-handoff { flex-direction: column; align-items: flex-start; padding: 28px; }
  }


  /* ==================== V6 MOBILE INTERACTION FIXES ==================== */
  @media (max-width: 600px) {
    html, body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
    .shell {
      padding: 18px 16px 52px;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
    .topbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 44px;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      padding-bottom: 18px;
      overflow: visible;
      z-index: 50;
    }
    .brand {
      min-width: 0;
      max-width: 100%;
      gap: 8px;
      align-items: center;
      overflow: hidden;
      white-space: nowrap;
    }
    .brand-mark {
      font-size: clamp(19px, 5.4vw, 23px);
      line-height: 1;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .brand-sub {
      font-size: 8px;
      line-height: 1.15;
      letter-spacing: 0.08em;
      padding-left: 8px;
      max-width: 145px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1 1 auto;
    }
    .mobile-menu-toggle {
      position: relative;
      z-index: 1002;
      justify-self: end;
      pointer-events: auto;
      -webkit-tap-highlight-color: transparent;
    }
    .topnav {
      grid-column: 1 / -1;
      top: calc(100% + 8px);
      z-index: 1001;
      pointer-events: auto;
    }
    .topbar.nav-open .topnav { display: flex; }
    .topnav-link,
    .depth-card,
    .depth-cta,
    .btn {
      pointer-events: auto;
      -webkit-tap-highlight-color: rgba(147, 21, 246, 0.14);
    }
    .progress-meter {
      grid-column: 1 / -1;
      width: 100%;
      order: unset;
      margin-top: 2px;
    }
    .intro-top {
      padding: 34px 22px;
      overflow: hidden;
    }
    .intro-title {
      font-size: clamp(30px, 9vw, 38px);
      line-height: 1.08;
      overflow-wrap: anywhere;
    }
    .hiw-stats-feature {
      grid-template-columns: 1fr;
      margin-top: 22px;
    }
    .hiw-stat-card {
      overflow: visible;
      padding-left: 14px;
      padding-right: 14px;
    }
    .hiw-stat-card-num {
      font-size: clamp(25px, 7vw, 31px);
      line-height: 1.2;
      white-space: normal;
      overflow: visible;
    }
    .depth-grid,
    .products-grid,
    .trades-grid,
    .states-grid,
    .markets-grid,
    .channels-grid {
      grid-template-columns: 1fr;
      max-width: 100%;
    }
  }


  /* ==================== V8 REQUESTED REFINEMENTS ==================== */
  /* Keep the Marketing hero graphic in the V6 placement while forcing the copy to wrap before it collides. */
  @media (min-width: 901px) {
    .channels-hero-content {
      max-width: min(560px, calc(100% - 520px));
      min-width: 360px;
      padding-right: clamp(24px, 4vw, 64px);
    }
    .channels-hero .hiw-title,
    .channels-hero .hiw-lede {
      overflow-wrap: normal;
      word-break: normal;
    }
  }
  @media (min-width: 901px) and (max-width: 1080px) {
    .channels-hero-content {
      max-width: 460px;
      min-width: 0;
    }
    .channels-hero .hiw-title {
      font-size: clamp(34px, 4.2vw, 48px);
      white-space: normal;
    }
    .channels-hero .hiw-lede {
      font-size: 15px;
      max-width: 420px;
    }
  }
  .pyramid-l1 { max-width: 360px; }
  .pyramid-l2 { max-width: 740px; }
  .pyramid-l3 { max-width: 960px; }
  .pyramid-label-note {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ink-soft);
    letter-spacing: 0;
    vertical-align: baseline;
  }
  .dfl-quote-card {
    width: min(100%, 520px);
    max-width: 520px;
  }
  @media (max-width: 600px) {
    .topbar {
      grid-template-columns: minmax(0, 1fr) 44px;
    }
    .brand {
      width: 100%;
      max-width: 100%;
      white-space: nowrap;
    }
    .brand-sub {
      max-width: 132px;
    }
    .mobile-menu-toggle {
      display: inline-flex !important;
      pointer-events: auto !important;
    }
    .diagnostic-stats-feature .hiw-stat-card {
      overflow: visible;
    }
    .diagnostic-stats-feature .hiw-stat-card-num {
      font-size: clamp(23px, 6.7vw, 30px);
      line-height: 1.22;
      white-space: nowrap;
      overflow: visible;
    }
  }
  @media (max-width: 380px) {
    .brand-sub {
      display: none;
    }
    .diagnostic-stats-feature {
      grid-template-columns: 1fr;
    }
  }

  /* V8 iPhone vertical fixes: keep controls tappable and avoid clipping the Diagnostic stats text. */
  @media (max-width: 600px) {
    .topbar {
      position: relative;
      isolation: isolate;
      z-index: 10000;
    }
    .mobile-menu-toggle {
      position: relative;
      z-index: 10002;
      cursor: pointer;
    }
    .topbar.nav-open .topnav {
      display: flex !important;
      z-index: 10001;
    }
    .diagnostic-stats-feature .hiw-stat-card {
      min-width: 0;
      overflow: visible;
    }
    .diagnostic-stats-feature .hiw-stat-card-num {
      font-size: clamp(21px, 6.1vw, 28px);
      line-height: 1.15;
      white-space: normal;
      overflow: visible;
      overflow-wrap: normal;
      word-break: keep-all;
    }
  }


  /* ==================== V9 REQUESTED REFINEMENTS ==================== */
  /* Marketing hero: keep V6-style desktop graphic placement, but force a hard no-overlap zone. */
  @media (min-width: 1181px) {
    .channels-hero {
      column-gap: 96px;
    }
    .channels-hero-content {
      max-width: 390px;
      padding-right: 0;
    }
    .channels-hero .hiw-title {
      white-space: normal;
      overflow-wrap: normal;
      word-break: normal;
    }
    .channels-hero .hiw-lede {
      max-width: 390px;
    }
  }
  @media (min-width: 901px) and (max-width: 1180px) {
    .channels-hero {
      grid-template-columns: 1fr;
      padding: 48px 42px 0;
      min-height: 0;
    }
    .channels-hero-content {
      max-width: 680px;
      min-width: 0;
      padding-right: 0;
    }
    .channels-hero .hiw-title {
      white-space: normal;
      font-size: clamp(38px, 5vw, 54px);
      max-width: 680px;
    }
    .channels-hero .hiw-lede {
      max-width: 640px;
    }
    .channels-hero-visual {
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      width: min(100%, 620px);
      margin: 8px auto -20px;
      height: auto;
      text-align: center;
    }
  }

  /* iPhone/mobile tap reliability: keep the tappable controls above any visual layer and avoid header wrapping. */
  @media (max-width: 900px) {
    .topbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 44px;
      align-items: center;
      overflow: visible;
      isolation: isolate;
      z-index: 10000;
    }
    .brand {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
    }
    .brand-mark, .brand-sub {
      white-space: nowrap;
    }
    .mobile-menu-toggle {
      display: inline-flex !important;
      position: relative;
      z-index: 10002;
      pointer-events: auto !important;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(147, 21, 246, 0.14);
    }
    .topnav {
      grid-column: 1 / -1;
      pointer-events: auto !important;
      z-index: 10001;
    }
    .topbar.nav-open .topnav {
      display: flex !important;
    }
    .depth-card, .depth-cta, .topnav-link, .btn {
      position: relative;
      z-index: 2;
      pointer-events: auto !important;
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(147, 21, 246, 0.14);
    }
    .intro-top::before, .intro-top::after, .channels-hero::before {
      pointer-events: none !important;
    }
  }

  @media (max-width: 430px) {
    .brand-sub { display: none; }
    .intro-title {
      font-size: clamp(30px, 8.6vw, 36px);
      line-height: 1.1;
    }
    .diagnostic-stats-feature .hiw-stat-card-num {
      font-size: clamp(22px, 6vw, 28px);
      line-height: 1.18;
      white-space: normal;
      overflow: visible;
    }
  }


  /* ==================== V10 REQUESTED REFINEMENTS ==================== */
  /* Marketing hero: use a fixed responsive buffer so copy can expand when space exists, but never collide with the graphic. */
  @media (min-width: 1181px) {
    .channels-hero {
      column-gap: 48px;
    }
    .channels-hero-content {
      /* Graphic intrudes ~200px from the right in the V6 placement. This leaves a hard 48px buffer. */
      max-width: min(760px, calc(100% - 304px));
      min-width: 0;
      padding-right: 0;
    }
    .channels-hero .hiw-title {
      white-space: nowrap;
      max-width: 100%;
    }
    .channels-hero .hiw-lede {
      max-width: min(720px, 100%);
    }
  }
  @media (min-width: 981px) and (max-width: 1180px) {
    .channels-hero {
      grid-template-columns: 1.1fr 0.9fr;
      padding: 48px 42px;
      min-height: 400px;
      column-gap: 40px;
    }
    .channels-hero-content {
      max-width: min(620px, calc(100% - 252px));
      min-width: 0;
      padding-right: 0;
    }
    .channels-hero .hiw-title {
      white-space: normal;
      font-size: clamp(40px, 4.6vw, 56px);
      max-width: 100%;
    }
    .channels-hero .hiw-lede {
      max-width: 560px;
    }
    .channels-hero-visual {
      position: absolute;
      right: -200px;
      top: 50%;
      transform: translateY(-50%);
      width: 580px;
      height: auto;
      margin: 0;
      text-align: left;
    }
  }
  @media (min-width: 901px) and (max-width: 980px) {
    .channels-hero {
      grid-template-columns: 1fr;
      padding: 44px 36px 0;
    }
    .channels-hero-content {
      max-width: 680px;
      min-width: 0;
      padding-right: 0;
    }
    .channels-hero-visual {
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      width: min(100%, 620px);
      margin: 8px auto -20px;
      height: auto;
      text-align: center;
    }
  }

  /* Step hover states: make trade and market choices feel consistent with the brand purple. */
  .trade-chip:hover:not(.selected),
  .state-chip:hover:not(.selected),
  .market-chip:hover:not(.selected) {
    background: var(--copper);
    color: var(--paper);
    border-color: var(--copper);
    box-shadow: var(--shadow-sm);
  }
  .trade-chip:hover:not(.selected)::after {
    background: var(--mint);
    color: var(--ink);
  }
  .market-chip:hover:not(.selected) .market-tier {
    background: rgba(255, 255, 255, 0.2);
    color: var(--mint);
  }

  /* CSS-only mobile nav fallback. The label toggles this checkbox even if mobile Safari drops the JS click. */
  .mobile-nav-check {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  @media (max-width: 900px) {
    .mobile-nav-check:checked + .topbar .topnav {
      display: flex !important;
    }
    .mobile-nav-check:checked + .topbar .mobile-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-nav-check:checked + .topbar .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
    .mobile-nav-check:checked + .topbar .mobile-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  }

  /* Restore the clean mobile header layout: logo, subtitle, hamburger on one row when space allows. */
  @media (max-width: 900px) {
    .topbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 44px;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      overflow: visible;
      isolation: isolate;
      z-index: 10000;
    }
    .brand {
      min-width: 0;
      max-width: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      overflow: hidden;
      white-space: nowrap;
    }
    .brand-mark {
      flex-shrink: 0;
      white-space: nowrap;
      line-height: 1;
      font-size: clamp(20px, 5.6vw, 24px);
    }
    .brand-sub {
      display: inline-block;
      flex: 1 1 auto;
      min-width: 0;
      max-width: 168px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 8.5px;
      line-height: 1.15;
      letter-spacing: 0.08em;
      padding-left: 8px;
    }
    .mobile-menu-toggle {
      display: inline-flex !important;
      justify-self: end;
      position: relative;
      z-index: 10002;
      pointer-events: auto !important;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(147, 21, 246, 0.14);
      -webkit-user-select: none;
      user-select: none;
    }
    .topnav {
      grid-column: 1 / -1;
      top: calc(100% + 8px);
      z-index: 10001;
      pointer-events: auto !important;
    }
    .topnav-link {
      text-decoration: none;
    }
  }
  @media (max-width: 390px) {
    .brand-sub {
      max-width: 130px;
      display: inline-block;
    }
  }
  @media (max-width: 340px) {
    .brand-sub { display: none; }
  }


  /* ==================== V11 REQUESTED REFINEMENTS ==================== */
  /* Remove underline from header links in every state. */
  .topnav-link,
  .topnav-link:link,
  .topnav-link:visited,
  .topnav-link:hover,
  .topnav-link:active,
  .topnav-link:focus {
    text-decoration: none !important;
  }

  /* Marketing hero: preserve a hard visual buffer without forcing unnecessary wrapping. */
  .channels-hero .hiw-eyebrow {
    white-space: nowrap;
    max-width: 100%;
  }

  @media (min-width: 1181px) {
    .channels-hero {
      padding-right: clamp(340px, 31vw, 430px);
      column-gap: 0;
    }
    .channels-hero-content {
      max-width: min(820px, 100%);
      width: 100%;
      padding-right: 0;
    }
    .channels-hero .hiw-title {
      white-space: nowrap;
      font-size: clamp(46px, 4.25vw, 60px);
      max-width: 100%;
    }
    .channels-hero .hiw-lede {
      max-width: min(780px, 100%);
      font-size: 17px;
    }
    .channels-hero-visual {
      right: -200px;
      width: 580px;
    }
  }

  @media (min-width: 1021px) and (max-width: 1180px) {
    .channels-hero {
      grid-template-columns: 1fr;
      padding: 48px clamp(330px, 30vw, 390px) 48px 42px;
      min-height: 400px;
      column-gap: 0;
    }
    .channels-hero-content {
      max-width: 100%;
      width: 100%;
      padding-right: 0;
    }
    .channels-hero .hiw-title {
      white-space: nowrap;
      font-size: clamp(40px, 4.3vw, 54px);
      max-width: 100%;
    }
    .channels-hero .hiw-lede {
      max-width: min(650px, 100%);
    }
    .channels-hero-visual {
      position: absolute;
      right: -200px;
      top: 50%;
      transform: translateY(-50%);
      width: 580px;
      height: auto;
      margin: 0;
      text-align: left;
    }
  }

  @media (min-width: 901px) and (max-width: 1020px) {
    .channels-hero {
      grid-template-columns: 1fr;
      padding: 44px 36px 0;
    }
    .channels-hero-content {
      max-width: 760px;
      width: 100%;
    }
    .channels-hero .hiw-title {
      white-space: normal;
      font-size: clamp(38px, 5vw, 54px);
      max-width: 760px;
    }
    .channels-hero .hiw-lede {
      max-width: 700px;
    }
    .channels-hero-visual {
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      width: min(100%, 620px);
      margin: 8px auto -20px;
      height: auto;
      text-align: center;
    }
  }

  @media (max-width: 900px) {
    .channels-hero .hiw-eyebrow {
      white-space: normal;
    }
    .mobile-menu-toggle {
      border: 1px solid var(--line-soft);
      font: inherit;
      appearance: none;
      -webkit-appearance: none;
    }
  }


  /* ==================== V12 REQUESTED REFINEMENTS ==================== */
  .topnav-link,
  .topnav-link:link,
  .topnav-link:visited,
  .topnav-link:hover,
  .topnav-link:active,
  .topnav-link:focus { text-decoration: none !important; }

  @media (min-width: 1181px) {
    .channels-hero {
      grid-template-columns: 1fr;
      padding: 56px clamp(400px, 31vw, 460px) 56px 56px;
      column-gap: 0;
      min-height: 420px;
    }
    .channels-hero-content { width: 100%; max-width: 760px; min-width: 0; padding-right: 0; }
    .channels-hero .hiw-eyebrow { white-space: nowrap; }
    .channels-hero .hiw-title { white-space: nowrap; max-width: 100%; font-size: clamp(46px, 4.25vw, 60px); }
    .channels-hero .hiw-lede { max-width: 720px; font-size: 17px; line-height: 1.58; }
    .channels-hero-visual { position: absolute; right: -200px; top: 50%; transform: translateY(-50%); width: 580px; height: auto; margin: 0; text-align: left; }
  }
  @media (min-width: 1021px) and (max-width: 1180px) {
    .channels-hero {
      grid-template-columns: 1fr;
      padding: 48px clamp(355px, 31vw, 410px) 48px 42px;
      column-gap: 0;
      min-height: 400px;
    }
    .channels-hero-content { width: 100%; max-width: 720px; min-width: 0; padding-right: 0; }
    .channels-hero .hiw-eyebrow { white-space: nowrap; }
    .channels-hero .hiw-title { white-space: nowrap; font-size: clamp(38px, 4.2vw, 52px); max-width: 100%; }
    .channels-hero .hiw-lede { max-width: 690px; font-size: 16px; line-height: 1.58; }
    .channels-hero-visual { position: absolute; right: -200px; top: 50%; transform: translateY(-50%); width: 580px; height: auto; margin: 0; text-align: left; }
  }
  @media (min-width: 901px) and (max-width: 1020px) {
    .channels-hero { grid-template-columns: 1fr; padding: 44px 36px 0; min-height: 0; }
    .channels-hero-content { width: 100%; max-width: 760px; min-width: 0; padding-right: 0; }
    .channels-hero .hiw-eyebrow { white-space: nowrap; }
    .channels-hero .hiw-title { white-space: normal; font-size: clamp(38px, 5vw, 54px); max-width: 760px; }
    .channels-hero .hiw-lede { max-width: 720px; font-size: 16px; }
    .channels-hero-visual { position: relative; right: auto; top: auto; transform: none; width: min(100%, 620px); margin: 8px auto -20px; height: auto; text-align: center; }
  }

  @media (max-width: 900px) {
    .topbar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; overflow: visible; isolation: isolate; z-index: 10000; }
    .mobile-menu-toggle { display: inline-flex !important; position: relative; z-index: 10003; pointer-events: auto !important; cursor: pointer; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: rgba(147, 21, 246, 0.14); }
    .topnav { grid-column: 1 / -1; pointer-events: auto !important; z-index: 10002; }
    .mobile-nav-check:checked + .topbar .topnav,
    .topbar.nav-open .topnav { display: flex !important; }
    .topnav-link, .depth-card, .depth-cta, .btn { pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: rgba(147, 21, 246, 0.14); }
  }



  /* ==================== V14 REQUESTED REFINEMENTS ==================== */
  /* Keep the top navigation visible while scrolling. */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 20000;
    background: rgba(250, 249, 254, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding-top: 12px;
  }

  /* Let section headers/subheaders use the same broad reading width as the hero/banner areas on larger screens. */
  @media (min-width: 901px) {
    .step-header,
    .depth-header,
    .hiw-section-header,
    .results-hero,
    .excluded-header {
      max-width: 1180px !important;
      width: 100% !important;
    }
    .step-desc,
    .depth-sub,
    .hiw-section-sub,
    .results-summary,
    .excluded-sub {
      max-width: 1040px !important;
    }
    .hiw-hero-content {
      max-width: 1040px !important;
    }
  }

  /* Mobile: keep the sticky header compact, put the menu above page content, and make every menu row easy to tap. */
  @media (max-width: 900px) {
    .topbar {
      top: 0;
      z-index: 20000 !important;
      padding-top: 10px;
      padding-bottom: 12px;
      margin-bottom: 28px;
      background: rgba(250, 249, 254, 0.98);
    }
    .topnav {
      z-index: 20001 !important;
    }
    .topnav-link {
      display: block !important;
      position: relative;
      z-index: 20002 !important;
      min-height: 44px;
      line-height: 20px;
    }
    .depth-card,
    .depth-cta,
    .btn,
    .topnav-link,
    .mobile-menu-toggle {
      cursor: pointer;
      pointer-events: auto !important;
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(147, 21, 246, 0.14);
    }
  }


  /* ==================== SUCCESS SCREEN ==================== */
  .success-screen {
    --success-max: 1180px;
  }
  .success-screen .hiw-hero,
  .success-screen .success-section,
  .success-screen .success-cta {
    max-width: var(--success-max);
    margin-left: auto;
    margin-right: auto;
  }
  .success-screen .hiw-hero {
    margin-bottom: 40px;
  }
  .success-intro-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: var(--success-max);
    margin: 0 auto 56px;
  }
  .success-stat {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
  }
  .success-stat .label {
    display: block;
    margin-bottom: 10px;
  }
  .success-stat-value {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 10px;
  }
  .success-stat-copy {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.55;
  }
  .success-section {
    margin-bottom: 64px;
  }
  .success-section-header {
    max-width: 880px;
    margin-bottom: 28px;
  }
  .success-section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 14px;
  }
  .success-section-sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
  }
  .success-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  .success-pillar-card {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-height: 210px;
  }
  .success-pillar-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(147, 21, 246, 0.35);
  }
  .success-pillar-badge {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(147, 21, 246, 0.14) 0%, rgba(185, 177, 231, 0.24) 100%);
    border: 1px solid rgba(147, 21, 246, 0.18);
    color: var(--copper-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
  }
  .success-pillar-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.12;
    color: var(--ink);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
  }
  .success-pillar-copy {
    font-size: 15px;
    line-height: 1.62;
    color: var(--ink-soft);
  }
  .success-roadmap-wrap {
    background: linear-gradient(180deg, rgba(232, 228, 248, 0.56) 0%, rgba(255, 255, 255, 0.92) 100%);
    border: 1px solid var(--line-soft);
    border-radius: 20px;
    padding: 34px 28px 28px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .success-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
    position: relative;
  }
  .success-roadmap-grid::before {
    content: '';
    position: absolute;
    top: 56px;
    left: 9%;
    right: 9%;
    height: 6px;
    background: linear-gradient(90deg, #9315F6 0%, #B56BEE 50%, #D4BDF0 100%);
    border-radius: 9999px;
    z-index: 0;
    opacity: 0.6;
  }
  .success-roadmap-step {
    position: relative;
    z-index: 1;
    min-width: 0;
  }
  .success-roadmap-node {
    width: 112px;
    height: 112px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--paper);
    border: 10px solid rgba(147, 21, 246, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(53, 33, 87, 0.06);
  }
  .success-roadmap-step:nth-child(1) .success-roadmap-node { border-color: #9315F6; }
  .success-roadmap-step:nth-child(2) .success-roadmap-node { border-color: #A642EF; }
  .success-roadmap-step:nth-child(3) .success-roadmap-node { border-color: #B56BEE; }
  .success-roadmap-step:nth-child(4) .success-roadmap-node { border-color: #C590ED; }
  .success-roadmap-step:nth-child(5) .success-roadmap-node { border-color: #D4BDF0; }
  .success-roadmap-num {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
  }
  .success-roadmap-title {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.08;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 14px;
  }
  .success-roadmap-list {
    padding-left: 20px;
    margin: 0;
    color: var(--ink-soft);
  }
  .success-roadmap-list li {
    font-size: 15px;
    line-height: 1.62;
    margin-bottom: 6px;
  }
  .success-cta {
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    color: var(--paper);
    border-radius: 18px;
    padding: 34px 36px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .success-cta::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -6%;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(147, 21, 246, 0.42) 0%, transparent 70%);
    pointer-events: none;
  }
  .success-cta::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -8%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(0, 173, 169, 0.18) 0%, transparent 72%);
    pointer-events: none;
  }
  .success-cta > * { position: relative; z-index: 1; }
  .success-cta-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.18;
    margin-bottom: 14px;
    color: var(--paper);
    letter-spacing: -0.02em;
  }
  .success-cta-copy {
    font-size: 15px;
    line-height: 1.65;
    max-width: 820px;
    color: rgba(255,255,255,0.86);
    margin-bottom: 22px;
  }

  @media (max-width: 1100px) {
    .success-pillars-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .success-roadmap-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .success-roadmap-grid::before { display: none; }
    .success-roadmap-step {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 18px;
      align-items: start;
    }
    .success-roadmap-node {
      margin: 0;
    }
    .success-roadmap-title {
      text-align: left;
    }
  }

  @media (max-width: 720px) {
    .success-intro-strip {
      grid-template-columns: 1fr;
      margin-bottom: 40px;
    }
    .success-section {
      margin-bottom: 48px;
    }
    .success-pillars-grid {
      grid-template-columns: 1fr;
    }
    .success-roadmap-wrap {
      padding: 24px 18px;
    }
    .success-roadmap-step {
      grid-template-columns: 1fr;
    }
    .success-roadmap-node {
      margin: 0 auto 14px;
      width: 96px;
      height: 96px;
      border-width: 8px;
    }
    .success-roadmap-title {
      text-align: center;
      font-size: 24px;
    }
    .success-roadmap-list li,
    .success-pillar-copy,
    .success-section-sub {
      font-size: 14px;
    }
    .success-cta {
      padding: 28px 22px;
    }
  }


  /* ==================== V16 REFINEMENTS ==================== */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 9000;
    padding: 14px 18px 16px;
    margin: 0 -18px 44px;
    border: 1px solid rgba(214, 208, 232, 0.72);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,245,252,0.96) 62%, rgba(243,238,251,0.88) 100%);
    box-shadow: 0 14px 28px rgba(53,33,87,0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  @media (max-width: 720px) {
    .topbar {
      margin: 0 -8px 32px;
      padding: 12px 12px 14px;
      border-radius: 16px;
    }
  }
  .product-detail,
  .landing-popup,
  .channel-popup { z-index: 30000 !important; }
  .product-detail-overlay,
  .landing-popup-overlay,
  .channel-popup-overlay { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .product-detail-panel,
  .landing-popup-panel,
  .channel-popup-panel { position: relative; z-index: 1; }

  .hiw-hero.process-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 460px);
    gap: clamp(28px, 4vw, 52px);
    align-items: center;
  }
  .process-hero .hiw-hero-content { max-width: 720px; }
  .process-hero-visual {
    position: relative;
    z-index: 1;
    min-width: 0;
  }
  .process-brand-cloud {
    position: relative;
    min-height: 300px;
    border-radius: 22px;
    padding: 22px;
    background: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.08) 100%);
    border: 1px solid rgba(255,255,255,0.16);
    overflow: hidden;
  }
  .process-brand-cloud::before {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 18px;
    border: 1px solid rgba(201,252,181,0.18);
    pointer-events: none;
  }
  .process-brand-cloud-label {
    position: relative;
    z-index: 1;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--mint);
    font-weight: 700;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .process-brand-cloud-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--mint);
  }
  .process-brand-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }
  .process-brand-card {
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    padding: 16px 14px;
    min-height: 98px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 26px rgba(53,33,87,0.12);
  }
  .process-brand-card img {
    max-width: 100%;
    max-height: 54px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  .process-brand-orb {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,173,169,0.26) 0%, rgba(201,252,181,0.35) 100%);
    border: 1px solid rgba(201,252,181,0.34);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-align: center;
    padding: 10px;
    box-shadow: 0 16px 26px rgba(53,33,87,0.16);
  }
  @media (max-width: 940px) {
    .hiw-hero.process-hero { grid-template-columns: 1fr; }
    .process-brand-cloud { min-height: auto; }
    .process-brand-orb { position: relative; right: auto; bottom: auto; margin: 16px auto 0; }
  }
  @media (max-width: 560px) {
    .process-brand-grid { grid-template-columns: 1fr; }
  }

  .twosided-card-pillars { grid-auto-rows: 1fr; align-items: stretch; }
  .twosided-pillar { min-height: 122px; display: flex; flex-direction: column; }
  .twosided-card-contractor .twosided-pillar-num { color: var(--copper); }

  .pyramid-l1 { max-width: 340px; }
  .pyramid-l2 { max-width: 620px; }
  .pyramid-l3 { max-width: 820px; }
  .pyramid-l4 { max-width: 980px; }
  .pyramid-l2 { background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,245,252,0.98) 100%); }
  .pyramid-l3 { background: var(--paper); }
  .pyramid-l4 { background: linear-gradient(180deg, rgba(245,240,254,0.95) 0%, rgba(255,255,255,0.98) 100%); }
  .pyramid-brand-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin-top: 18px;
  }
  .pyramid-brand-card {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    box-shadow: 0 8px 18px rgba(53,33,87,0.06);
  }
  .pyramid-brand-card img { max-width: 100%; max-height: 38px; width: auto; height: auto; object-fit: contain; display: block; }
  @media (max-width: 900px) { .pyramid-brand-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .pyramid-label-note { font-size: inherit; font-weight: inherit; color: inherit; opacity: 1; }
  .pyramid-l3 .pyramid-sub strong { color: var(--copper-deep); font-weight: 700; }

  .channel-card { cursor: pointer; }
  .channel-card-header { cursor: pointer; }
  .channel-card-quick {
    padding: 0 28px 24px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .channel-card-cta-row { padding: 0 28px 28px; display:flex; }
  .channel-card-cta {
    background: transparent;
    border: 1px solid var(--line-soft);
    border-radius: 9999px;
    padding: 10px 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--copper-deep);
  }
  .channel-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 20px;
    animation: fadeIn 0.2s ease;
  }
  .channel-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(53,33,87,0.66);
  }
  .channel-popup-panel {
    width: 100%;
    max-width: 1040px;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    background: var(--paper);
    border-radius: 18px;
    box-shadow: 0 32px 80px rgba(53,33,87,0.45);
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .channel-popup-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.18);
    color: var(--paper);
    cursor: pointer;
    font-size: 16px;
    z-index: 2;
    backdrop-filter: blur(8px);
  }
  .channel-popup-close:hover { background: var(--paper); color: var(--copper); }
  .channel-popup-header {
    position: relative;
    padding: 44px 44px 34px;
    background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 100%);
    color: var(--paper);
    overflow: hidden;
  }
  .channel-popup-header::before {
    content: '';
    position: absolute;
    top: -22%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(147,21,246,0.38) 0%, transparent 68%);
    pointer-events: none;
  }
  .channel-popup-header > * { position: relative; z-index: 1; }
  .channel-popup-title-row { display:flex; align-items:flex-start; gap:18px; padding-right:40px; }
  .channel-popup-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255,255,255,0.14);
    color: var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .channel-popup-title { font-family: 'Poppins', sans-serif; font-weight:800; font-size:32px; line-height:1.08; margin-bottom:8px; color:var(--paper); letter-spacing:-0.02em; }
  .channel-popup-tagline { color: var(--mint); font-size: 14px; font-weight: 500; margin:0; }
  .channel-popup-body { padding: 30px 36px 36px; }
  .channel-popup-summary { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 24px; }
  .channel-popup-grid { display:grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap:24px; align-items:start; }
  .channel-popup-card { background: var(--bg-deep); border:1px solid var(--line-soft); border-radius: 14px; padding: 20px 20px 18px; }
  .channel-popup-card h4 { font-size:10px; text-transform:uppercase; letter-spacing:0.16em; color: var(--copper-deep); font-weight:700; margin-bottom:12px; }
  .channel-popup-card ul { list-style:none; padding:0; margin:0; }
  .channel-popup-card li { position:relative; padding-left:18px; margin-bottom:10px; font-size: 13.5px; line-height:1.55; color: var(--ink-soft); }
  .channel-popup-card li::before { content:''; position:absolute; left:0; top:9px; width:8px; height:1.5px; background: var(--copper); }
  .channel-popup-examples { margin-top: 24px; }
  .channel-popup-examples h4 { font-size:10px; text-transform:uppercase; letter-spacing:0.16em; color: var(--copper-deep); font-weight:700; margin-bottom:14px; }
  .channel-popup-examples-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
  .channel-popup-family-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
  .channel-popup-family-logo { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px; min-height: 72px; display:flex; align-items:center; justify-content:center; }
  .channel-popup-family-logo img { max-width: 100%; max-height: 36px; width:auto; height:auto; object-fit:contain; }
  @media (max-width: 860px) {
    .channel-popup-header { padding: 36px 24px 28px; }
    .channel-popup-body { padding: 24px 20px 28px; }
    .channel-popup-grid { grid-template-columns: 1fr; }
  }

  .success-pillar-badge {
    background: #fff;
    color: var(--ink);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid rgba(147,21,246,0.14);
    box-shadow: 0 10px 18px rgba(53,33,87,0.08);
  }
  .success-pillar-badge svg,
  .success-roadmap-node svg { width: 40px; height: 40px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .success-roadmap-step { display:flex; flex-direction:column; align-items:stretch; gap: 14px; }
  .success-roadmap-node { margin-bottom: 0; color: var(--ink); }
  .success-roadmap-copy {
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    padding: 18px 18px 18px 20px;
    min-height: 236px;
    box-shadow: 0 12px 24px rgba(53,33,87,0.06);
  }
  .success-roadmap-title { text-align: left; font-size: 24px; margin-bottom: 12px; }
  .success-roadmap-list li { margin-bottom: 8px; }
  @media (max-width: 1100px) {
    .success-roadmap-copy { min-height: auto; }
    .success-roadmap-title { text-align: left; }
  }
  @media (max-width: 720px) {
    .success-roadmap-copy { padding: 16px 16px 16px 18px; }
    .success-roadmap-title { text-align: center; }
  }


  /* ==================== V17 POLISH ==================== */
  .topbar { z-index: 7000; }
  .landing-popup, .product-detail, .channel-popup { z-index: 60000 !important; }
  .product-detail { position: fixed; inset: 0; align-items: center; justify-content: center; padding: 40px 20px; }
  .product-detail-panel { position: relative; width: 100%; max-width: 1040px; max-height: calc(100vh - 80px); overflow-y: auto; z-index: 1; }
  .product-detail-overlay { position: absolute; inset: 0; z-index: 0; background: rgba(53,33,87,0.68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .hiw-hero.process-hero { grid-template-columns: minmax(0, 1.08fr) minmax(340px, 470px); gap: clamp(34px, 5vw, 64px); }
  .process-hero .hiw-hero-content { max-width: 700px; padding-right: clamp(8px, 2vw, 20px); }
  .process-hero-visual { padding-left: clamp(10px, 2vw, 24px); }
  .process-brand-cloud { min-height: 340px; padding: 22px; background: linear-gradient(145deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%); border: 1px solid rgba(255,255,255,0.18); }
  .process-brand-cloud::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 18%, rgba(201,252,181,0.13), transparent 28%), radial-gradient(circle at 78% 16%, rgba(147,21,246,0.18), transparent 32%), radial-gradient(circle at 82% 84%, rgba(0,173,169,0.18), transparent 28%); pointer-events: none; }
  .process-brand-cloud-label::before { display:none; }
  .process-brand-cloud-label { margin-bottom: 20px; }
  .process-brand-grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 68px; gap: 14px; }
  .process-brand-card { min-height: 0; padding: 16px; border-radius: 18px; background: rgba(255,255,255,0.95); position: relative; overflow: hidden; }
  .process-brand-card::after { content: ''; position: absolute; inset: auto -15% -45% auto; width: 120px; height: 120px; background: radial-gradient(circle, rgba(147,21,246,0.07), transparent 65%); pointer-events:none; }
  .process-brand-card:nth-child(1) { grid-column: 1 / span 7; grid-row: 1 / span 1; }
  .process-brand-card:nth-child(2) { grid-column: 8 / span 5; grid-row: 1 / span 1; }
  .process-brand-card:nth-child(3) { grid-column: 1 / span 5; grid-row: 2 / span 1; }
  .process-brand-card:nth-child(4) { grid-column: 6 / span 7; grid-row: 2 / span 1; }
  .process-brand-card img { max-height: 44px; }
  .process-brand-orb { width: 96px; height: 96px; font-size: 11px; letter-spacing: 0.16em; right: 16px; bottom: 16px; }
  @media (max-width: 940px) { .process-hero-visual { padding-left: 0; } .process-brand-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } .process-brand-card:nth-child(1), .process-brand-card:nth-child(2), .process-brand-card:nth-child(3), .process-brand-card:nth-child(4) { grid-column: auto; grid-row: auto; } }
  .twosided-card-pillars { grid-template-columns: 1fr 1fr; }
  .twosided-pillar { min-height: 132px; justify-content: flex-start; }
  .twosided-pillar-title { min-height: 38px; display:flex; align-items:flex-start; }
  .twosided-pillar-desc { flex: 1; }
  .success-pillar-badge { padding: 14px; }
  .success-pillar-badge img, .success-roadmap-node img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .success-roadmap-node { padding: 18px; display:flex; align-items:center; justify-content:center; }
  .success-roadmap-grid { align-items: stretch; }
  .success-roadmap-step { height: 100%; }
  .success-roadmap-copy { min-height: 252px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 20px 20px 18px 22px; }
  .success-roadmap-title { text-align: left; width: 100%; min-height: 52px; display:flex; align-items:flex-start; }
  .success-roadmap-list { width: 100%; margin-top: 2px; }
  @media (max-width: 1100px) { .success-roadmap-copy { min-height: auto; } .success-roadmap-title { min-height: 0; } }
  .pyramid-label-note { font-family: Inter, system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
  .channel-card:hover .channel-card-name, .channel-card:hover .channel-card-tagline, .channel-card:hover .channel-card-quick { color: var(--paper); }
  .channel-card:hover .channel-card-toggle { background: var(--paper); color: var(--copper-deep); border-color: var(--paper); }
  .channel-card:hover .channel-card-cta { background: var(--paper); color: var(--copper-deep); border-color: var(--paper); }
  .channel-card:hover .channel-card-icon { background: rgba(255,255,255,0.16); color: var(--paper); }


  /* ==================== V18 REFINEMENTS ==================== */
  html { scrollbar-color: #9315F6 rgba(53,33,87,0.10); scrollbar-width: thin; }
  *::-webkit-scrollbar { width: 12px; height: 12px; }
  *::-webkit-scrollbar-track { background: rgba(53,33,87,0.08); border-radius: 999px; }
  *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #9315F6 0%, #B56BEE 100%); border: 2px solid rgba(255,255,255,0.72); border-radius: 999px; }
  *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #7f11da 0%, #a558ea 100%); }
  *::-webkit-scrollbar-corner { background: transparent; }

  .hiw-hero.process-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(380px, 520px);
    gap: clamp(36px, 4.5vw, 58px);
    align-items: stretch;
  }
  .process-hero .hiw-hero-content { max-width: 710px; padding-right: clamp(6px, 1.4vw, 14px); }
  .process-hero-visual { align-self: stretch; display: flex; margin: -6px -12px -8px 0; padding-left: 0; }
  .process-brand-cloud {
    width: 100%; min-height: 336px; padding: 18px 18px 16px; border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.07) 100%);
    border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 20px 34px rgba(53,33,87,0.12);
  }
  .process-brand-cloud-label { margin-bottom: 14px; }
  .process-brand-grid { display:grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-rows: 70px; gap: 12px; }
  .process-brand-card {
    min-height: 0; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,0.96);
    border: 1px solid rgba(147,21,246,0.10); box-shadow: 0 12px 22px rgba(53,33,87,0.08);
  }
  .process-brand-card.brand-modernize { grid-column: 1 / span 7; grid-row: 1; }
  .process-brand-card.brand-finance { grid-column: 8 / span 5; grid-row: 1; }
  .process-brand-card.brand-homebuddy { grid-column: 1 / span 5; grid-row: 2; }
  .process-brand-card.brand-ccm { grid-column: 6 / span 7; grid-row: 2; }
  .process-brand-card.brand-best { grid-column: 1 / span 5; grid-row: 3; }
  .process-brand-card.brand-aqua { grid-column: 6 / span 7; grid-row: 3; }
  .process-brand-card img { max-height: 42px; transform-origin: center; }
  .process-brand-card.brand-modernize img { max-height: 50px; }
  .process-brand-card.brand-finance img { max-height: 28px; }
  .process-brand-card.brand-best img { transform: scale(1.4); }
  .process-brand-card.brand-aqua img { transform: scale(1.2); }
  .process-brand-orb { display:none; }

  .twosided-card-pillars { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 124px; align-items: stretch; }
  .twosided-pillar { min-height: 124px; height: 124px; padding: 13px 14px 12px; display:flex; flex-direction:column; justify-content:flex-start; }
  .twosided-pillar-title { min-height: 36px; font-size: 14px; line-height: 1.15; }
  .twosided-pillar-desc { font-size: 11.5px; line-height: 1.36; }

  .journey-svg-wrap { max-width: 960px; margin: 0 auto; }

  .success-screen .success-section-header { max-width: 1100px; }
  @media (min-width: 900px) { .success-roadmap-heading { white-space: nowrap; } }
  .success-roadmap-wrap {
    background: linear-gradient(180deg, rgba(244,236,254,0.55) 0%, rgba(255,255,255,0.18) 100%);
    border: 1px solid rgba(147,21,246,0.10); border-radius: 28px; padding: 24px 18px 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 16px 28px rgba(53,33,87,0.06); overflow: visible;
  }
  .success-roadmap-grid::before { top: 56px; left: 11%; right: 11%; opacity: 0.42; }
  .success-roadmap-copy {
    background: linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.18) 100%);
    border: 1px solid rgba(147,21,246,0.08); box-shadow: none; border-radius: 18px;
    padding: 18px 16px 16px; min-height: 230px; align-items: center; text-align: center;
  }
  .success-roadmap-title { width: 100%; min-height: 50px; justify-content: center; text-align: center; font-size: 24px; margin-bottom: 10px; }
  .success-roadmap-list { display: inline-block; text-align: left; margin: 0 auto; }
  .success-roadmap-list li { margin-bottom: 8px; }

  .pyramid-l1 .pyramid-sub { font-size: 14px; }
  .pyramid-brand-grid { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: stretch; }
  .pyramid-brand-card { min-height: 92px; padding: 16px 14px; }
  .pyramid-brand-card img { max-height: 42px; transform-origin: center; }
  .pyramid-brand-card.brand-modernize img { max-height: 48px; }
  .pyramid-brand-card.brand-finance img { max-height: 26px; }
  .pyramid-brand-card.brand-best img { transform: scale(1.4); }
  .pyramid-brand-card.brand-aqua img { transform: scale(1.15); }
  @media (max-width: 760px) { .pyramid-brand-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

  .dfl-loop-wrap { align-items: stretch; }
  .dfl-quote-card { width: 100%; max-width: none; margin: 20px 0 0; }

  .hiw-cta {
    margin-top: 62px; padding: 34px 36px; border-radius: 22px; border: 1px solid rgba(147,21,246,0.16);
    background: linear-gradient(135deg, rgba(53,33,87,1) 0%, rgba(93,57,154,0.98) 58%, rgba(111,75,178,0.98) 100%);
    box-shadow: 0 20px 34px rgba(53,33,87,0.18); color: var(--paper); position: relative; overflow: hidden;
  }
  .hiw-cta::before { content:''; position:absolute; inset:auto -10% -55% auto; width:340px; height:340px; background: radial-gradient(circle, rgba(201,252,181,0.20) 0%, transparent 68%); pointer-events:none; }
  .hiw-cta::after { content:''; position:absolute; inset:-18% auto auto -8%; width:240px; height:240px; background: radial-gradient(circle, rgba(147,21,246,0.26) 0%, transparent 70%); pointer-events:none; }
  .hiw-cta > * { position: relative; z-index: 1; }
  .hiw-cta-title { color: var(--paper); font-size: 28px; margin-bottom: 18px; }
  .hiw-cta .btn { box-shadow: 0 14px 24px rgba(0,0,0,0.14); }
  @media (max-width: 900px) { .process-hero-visual { margin:0; } .hiw-hero.process-hero { grid-template-columns: 1fr; } }


  /* ==================== V19 REFINEMENTS ==================== */
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
  *::-webkit-scrollbar-track-piece { background: rgba(53,33,87,0.06); }

  .hiw-hero.process-hero {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 500px);
    gap: clamp(38px, 4vw, 52px);
    align-items: center;
  }
  .process-hero .hiw-hero-content { max-width: 650px; }
  .process-hero-visual {
    align-self: stretch;
    display: flex;
    margin: -18px -18px -18px 0;
    padding-left: 0;
  }
  .process-brand-cloud {
    width: 100%;
    min-height: 100%;
    padding: 12px;
  }
  .process-brand-cloud::before { inset: 12px; }
  .process-brand-cloud-label {
    margin-bottom: 12px;
    padding-left: 2px;
  }
  .process-brand-cloud-label::before { display: none; }
  .process-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 12px;
    align-items: center;
  }

  .process-brand-grid > .process-brand-card {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch;
  }
  .process-brand-card {
    min-height: 84px;
    padding: 12px 14px;
  }
  .process-brand-card.brand-modernize img { max-height: 46px; }
  .process-brand-card.brand-finance img { max-height: 24px; }
  .process-brand-card.brand-best img { transform: scale(1.4); }
  .process-brand-card.brand-aqua img { transform: scale(1.2); }
  .process-brand-card.brand-ccm {
    width: 80%;
    justify-self: end;
  }
  .process-brand-card.brand-aqua {
    width: 85%;
    justify-self: end;
  }

  .success-roadmap-copy {
    background: linear-gradient(180deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.12) 100%);
    border-color: rgba(147,21,246,0.06);
  }
  .success-roadmap-list {
    padding-left: 18px;
  }

  .pyramid-brand-card.brand-best img { transform: scale(1.68); }
  .pyramid-sub-line2 {
    display: block;
    margin-top: 6px;
  }

  .dfl-loop-wrap { align-items: stretch !important; }
  .dfl-loop-wrap .dfl-loop { width: min(100%, 520px); align-self: center; }
  .dfl-loop-wrap .dfl-quote-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    box-sizing: border-box;
    margin: 20px 0 0 !important;
    align-self: stretch !important;
  }

  @media (max-width: 940px) {
    .process-hero-visual { margin: 0; }
  }


  /* ==================== V20 REFINEMENTS ==================== */
  *::-webkit-scrollbar { width: 6px; height: 6px; }
  *::-webkit-scrollbar-button { width: 0 !important; height: 0 !important; display: none !important; }
  *::-webkit-scrollbar-track { background: rgba(53,33,87,0.05); border-radius: 999px; }
  *::-webkit-scrollbar-track-piece { background: rgba(53,33,87,0.05); border-radius: 999px; }
  *::-webkit-scrollbar-thumb { border: 1px solid rgba(255,255,255,0.72); border-radius: 999px; }

  .hiw-hero.process-hero {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 430px) !important;
    gap: clamp(44px, 5vw, 64px) !important;
    align-items: stretch !important;
    padding: 48px 14px 14px 48px !important;
  }
  .process-hero .hiw-hero-content {
    max-width: 610px !important;
    padding-right: 16px !important;
    min-width: 0 !important;
  }
  .process-hero-visual {
    align-self: stretch !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
  }
  .process-brand-cloud {
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 18px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
  }
  .process-brand-cloud-label {
    margin-bottom: 14px !important;
    padding-left: 0 !important;
  }
  .process-brand-cloud-label::before { display: none !important; }
  .process-brand-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 78px !important;
    gap: 14px !important;
    align-content: stretch !important;
  }
  .process-brand-grid > .process-brand-card {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    height: 78px !important;
    min-height: 78px !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }
  .process-brand-card img { max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; }
  .process-brand-card.brand-modernize img { max-height: 44px !important; }
  .process-brand-card.brand-finance img { max-height: 24px !important; }
  .process-brand-card.brand-homebuddy img { max-height: 42px !important; }
  .process-brand-card.brand-ccm img { max-height: 42px !important; }
  .process-brand-card.brand-best img { max-height: 42px !important; transform: scale(1.3) !important; }
  .process-brand-card.brand-aqua img { max-height: 42px !important; transform: scale(1.12) !important; }

  .example-ads-panel { max-width: 1120px; }
  .example-ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 14px;
    padding: 28px 32px 8px;
  }
  .example-ad-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 18px rgba(53,33,87,0.05);
  }
  .example-ad-channel {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(147,21,246,0.10);
    color: var(--copper-deep);
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .success-roadmap-node { border-width: 7.5px !important; }
  .success-roadmap-copy { background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.09) 100%) !important; }
  .success-roadmap-list { padding-left: 34px !important; }

  .dfl-loop-wrap { align-items: center !important; }
  .dfl-loop-wrap .dfl-loop,
  .dfl-loop-wrap .dfl-quote-card {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    box-sizing: border-box !important;
    align-self: center !important;
  }
  .dfl-loop-wrap .dfl-quote-card { margin: 20px auto 0 !important; }

  @media (max-width: 940px) {
    .hiw-hero.process-hero {
      grid-template-columns: 1fr !important;
      padding: clamp(32px, 8vw, 48px) clamp(22px, 6vw, 36px) !important;
    }
    .process-brand-cloud { height: auto !important; }
  }


  /* ==================== V21 CLEAN REBUILD CHANGES ==================== */
  .process-hero { align-items: stretch !important; }
  .process-hero-visual {
    align-self: stretch !important;
    display: flex !important;
    margin-top: -14px !important;
    margin-right: -14px !important;
    margin-bottom: -14px !important;
    padding-left: clamp(18px, 3vw, 34px) !important;
  }
  .process-brand-cloud {
    width: 100% !important;
    min-height: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }
  .process-brand-cloud::before { border: none !important; box-shadow: none !important; inset: 0 !important; }
  .process-brand-cloud-label { margin-bottom: 16px !important; }
  .process-brand-cloud-label::before { display: none !important; }
  .process-brand-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(78px, 1fr) !important;
    gap: 14px !important;
    flex: 1 1 auto !important;
    align-content: stretch !important;
  }
  .process-brand-grid > .process-brand-card {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: 78px !important;
    height: 100% !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 16px !important;
  }
  .process-brand-card.brand-best img { transform: scale(1.4); }
  .process-brand-card.brand-aqua img { transform: scale(1.2); }
  @media (max-width: 940px) { .process-hero-visual { margin: 0 !important; padding-left: 0 !important; } }

  .scale-metrics-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 28px auto 72px;
    max-width: 1180px;
  }
  .scale-metric-box {
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(53, 33, 87, 0.10);
    border-radius: 16px;
    padding: 28px 22px;
    min-height: 138px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 10px 24px rgba(53,33,87,0.06);
  }
  .scale-metric-number {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1;
    color: var(--purple-mid);
    letter-spacing: -0.03em;
    margin-bottom: 10px;
  }
  .scale-metric-label { max-width: 190px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); font-weight: 500; }
  @media (max-width: 900px) { .scale-metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .scale-metrics-strip { grid-template-columns: 1fr; } }

  .channel-color-sem { background:#9315F6 !important; color:#FFFFFF !important; border-color:#9315F6 !important; }
  .channel-color-native { background:#07509D !important; color:#FFFFFF !important; border-color:#07509D !important; }
  .channel-color-owned_operated { background:#7AC98F !important; color:#FFFFFF !important; border-color:#7AC98F !important; }
  .channel-color-seo { background:#D32F37 !important; color:#FFFFFF !important; border-color:#D32F37 !important; }
  .channel-color-publishers { background:#F36D5B !important; color:#FFFFFF !important; border-color:#F36D5B !important; }
  .channel-color-social { background:#EE911A !important; color:#FFFFFF !important; border-color:#EE911A !important; }
  .channel-color-call_center { background:#FFD827 !important; color:#FFFFFF !important; border-color:#FFD827 !important; }

  .success-roadmap-node { border-width: 4.2px !important; }

  html { scrollbar-color: #9315F6 rgba(53,33,87,0.07); scrollbar-width: thin; }
  *::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
  *::-webkit-scrollbar-button,
  *::-webkit-scrollbar-button:single-button,
  *::-webkit-scrollbar-button:vertical:start:decrement,
  *::-webkit-scrollbar-button:vertical:end:increment,
  *::-webkit-scrollbar-button:horizontal:start:decrement,
  *::-webkit-scrollbar-button:horizontal:end:increment {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
  }
  *::-webkit-scrollbar-track { background: rgba(53,33,87,0.05) !important; border-radius: 999px !important; }
  *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #9315F6 0%, #B56BEE 100%) !important; border: 1px solid rgba(255,255,255,0.72) !important; border-radius: 999px !important; }

  .dfl-loop-wrap { align-items: stretch !important; }
  .dfl-loop-wrap .dfl-loop { width: 100% !important; max-width: none !important; align-self: stretch !important; }
  .dfl-loop-wrap .dfl-quote-card {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    margin: 20px 0 0 !important;
    box-sizing: border-box !important;
  }


  /* ==================== V22 TARGETED FIXES ==================== */
  /* Process hero brand box: equal visual gap from top/right/bottom hero edges */
  .hiw-hero.process-hero {
    padding: 48px 14px 14px 48px !important;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 430px) !important;
    gap: clamp(44px, 5vw, 64px) !important;
    align-items: stretch !important;
  }
  .process-hero-visual {
    margin-top: -34px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    display: flex !important;
    min-width: 0 !important;
  }
  .process-brand-cloud {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 18px !important;
    box-sizing: border-box !important;
  }
  .process-brand-cloud::before {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  .process-brand-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 78px !important;
    gap: 14px !important;
    align-content: start !important;
  }
  .process-brand-grid > .process-brand-card {
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
  }

  /* Match Diagnostic hero-to-card spacing on Process and Marketing */
  #screen-how-it-works .process-hero,
  #screen-channels .channels-hero {
    margin-bottom: 40px !important;
  }
  #processScaleStrip,
  #channelsScaleStrip {
    margin-top: 0 !important;
  }

  /* Equal-size channel pills with white text */
  .pyramid-source-chip,
  .example-ad-channel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 126px !important;
    min-width: 126px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .pyramid-source-chip { font-size: 11px !important; }
  .example-ad-channel { font-size: 10px !important; margin-bottom: 12px !important; }
  .channel-color-sem,
  .channel-color-native,
  .channel-color-owned_operated,
  .channel-color-seo,
  .channel-color-publishers,
  .channel-color-social,
  .channel-color-call_center {
    color: #FFFFFF !important;
  }

  /* Remove scrollbar arrow buttons wherever the browser allows CSS control */
  html { scrollbar-width: thin !important; scrollbar-color: #9315F6 rgba(53,33,87,0.06) !important; }
  *::-webkit-scrollbar,
  .landing-popup-panel::-webkit-scrollbar,
  .product-detail-panel::-webkit-scrollbar,
  .channel-popup-panel::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }
  *::-webkit-scrollbar-button,
  *::-webkit-scrollbar-button:single-button,
  *::-webkit-scrollbar-button:vertical,
  *::-webkit-scrollbar-button:vertical:start,
  *::-webkit-scrollbar-button:vertical:end,
  *::-webkit-scrollbar-button:vertical:start:decrement,
  *::-webkit-scrollbar-button:vertical:end:increment,
  *::-webkit-scrollbar-button:horizontal,
  *::-webkit-scrollbar-button:horizontal:start,
  *::-webkit-scrollbar-button:horizontal:end,
  *::-webkit-scrollbar-button:horizontal:start:decrement,
  *::-webkit-scrollbar-button:horizontal:end:increment,
  .landing-popup-panel::-webkit-scrollbar-button,
  .product-detail-panel::-webkit-scrollbar-button,
  .channel-popup-panel::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
  }
  *::-webkit-scrollbar-track,
  .landing-popup-panel::-webkit-scrollbar-track,
  .product-detail-panel::-webkit-scrollbar-track,
  .channel-popup-panel::-webkit-scrollbar-track {
    background: rgba(53,33,87,0.05) !important;
    border-radius: 999px !important;
  }
  *::-webkit-scrollbar-thumb,
  .landing-popup-panel::-webkit-scrollbar-thumb,
  .product-detail-panel::-webkit-scrollbar-thumb,
  .channel-popup-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9315F6 0%, #B56BEE 100%) !important;
    border: 1px solid rgba(255,255,255,0.72) !important;
    border-radius: 999px !important;
  }

  /* DFL: match Operating Principle border to the visible DFL SVG border above it */
  .dfl-loop-wrap {
    align-items: center !important;
  }
  .dfl-loop-wrap .dfl-loop {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
  }
  .dfl-loop-wrap .dfl-quote-card {
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    align-self: center !important;
    margin: 20px auto 0 !important;
    box-sizing: border-box !important;
  }

  @media (max-width: 940px) {
    .hiw-hero.process-hero {
      padding: clamp(32px, 8vw, 48px) clamp(22px, 6vw, 36px) !important;
    }
    .process-hero-visual {
      margin: 0 !important;
    }
  }


  /* ==================== V23 TARGETED FIXES ==================== */
  /* Process Our Brands: only enlarge Best Company logo by 25% from current v22 scale */
  #screen-how-it-works .process-brand-card.brand-best img {
    transform: scale(1.75) !important;
  }

  /* Standardize hero-to-next-section spacing using current Process spacing as the baseline */
  .intro-top,
  .hiw-hero,
  .channels-hero,
  .opp-hero-frame {
    margin-bottom: 40px !important;
  }
  .scale-metrics-strip,
  #processScaleStrip,
  #channelsScaleStrip,
  .hiw-stats-strip,
  .depth-section,
  .products-grid,
  .success-intro-strip,
  .architecture-pyramid {
    margin-top: 0 !important;
  }

  /* Channel pills: 20% smaller than v22, equal sized, white text */
  .pyramid-source-chip,
  .example-ad-channel {
    width: 102px !important;
    min-width: 102px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  .pyramid-sources-cluster {
    gap: 6px !important;
  }
  .example-ad-channel {
    margin-bottom: 10px !important;
  }
  .channel-color-sem,
  .channel-color-native,
  .channel-color-owned_operated,
  .channel-color-seo,
  .channel-color-publishers,
  .channel-color-social,
  .channel-color-call_center {
    color: #FFFFFF !important;
  }

  /* Strongest CSS-supported scrollbar arrow removal for all popups and page scrollbars */
  html,
  body,
  .landing-popup-panel,
  .product-detail-panel,
  .channel-popup-panel,
  .example-ads-panel {
    scrollbar-width: thin !important;
    scrollbar-color: #9315F6 rgba(53,33,87,0.05) !important;
  }
  *::-webkit-scrollbar,
  .landing-popup-panel::-webkit-scrollbar,
  .product-detail-panel::-webkit-scrollbar,
  .channel-popup-panel::-webkit-scrollbar,
  .example-ads-panel::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }
  *::-webkit-scrollbar-button,
  *::-webkit-scrollbar-button:single-button,
  *::-webkit-scrollbar-button:vertical,
  *::-webkit-scrollbar-button:vertical:start,
  *::-webkit-scrollbar-button:vertical:end,
  *::-webkit-scrollbar-button:vertical:start:decrement,
  *::-webkit-scrollbar-button:vertical:end:increment,
  *::-webkit-scrollbar-button:horizontal,
  *::-webkit-scrollbar-button:horizontal:start,
  *::-webkit-scrollbar-button:horizontal:end,
  *::-webkit-scrollbar-button:horizontal:start:decrement,
  *::-webkit-scrollbar-button:horizontal:end:increment,
  .landing-popup-panel::-webkit-scrollbar-button,
  .product-detail-panel::-webkit-scrollbar-button,
  .channel-popup-panel::-webkit-scrollbar-button,
  .example-ads-panel::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
  }

  /* DFL Operating Principle: match the visible SVG card border using its 524/560 viewBox ratio */
  .dfl-loop-wrap {
    align-items: center !important;
  }
  .dfl-loop-wrap .dfl-loop {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
  }
  .dfl-loop-wrap .dfl-quote-card {
    width: 93.5714286% !important;
    max-width: 93.5714286% !important;
    align-self: center !important;
    margin: 20px auto 0 !important;
    box-sizing: border-box !important;
  }


  /* ==================== V24 TARGETED FIX ==================== */
  /* Match Diagnostic hero-to-next-section spacing to Process / Products / Success / Marketing. */
  #screen-intro .intro-top {
    margin-bottom: 40px !important;
  }
  #screen-intro .diagnostic-stats-feature {
    margin-top: 0 !important;
  }


  /* ==================== V25 CLEAN VIDEO MODAL ==================== */
  .flow-video-popup {
    position: fixed;
    inset: 0;
    z-index: 60000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px 20px;
    animation: fadeIn 0.2s ease;
  }
  .flow-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(53,33,87,0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .flow-video-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 920px);
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    background: linear-gradient(135deg, rgba(53,33,87,0.98) 0%, rgba(93,57,154,0.98) 100%);
    box-shadow: 0 32px 80px rgba(20,12,34,0.52);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 22px;
    padding: 38px;
    color: var(--paper);
  }
  .flow-video-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.16);
    color: var(--paper);
    cursor: pointer;
    font-size: 16px;
    z-index: 2;
  }
  .flow-video-close:hover { background: var(--paper); color: var(--copper-deep); }
  .flow-video-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 360px);
    gap: clamp(26px, 5vw, 54px);
    align-items: center;
  }
  .flow-video-copy .hiw-eyebrow { margin-bottom: 18px; }
  .flow-video-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: var(--paper);
    margin-bottom: 18px;
  }
  .flow-video-title em { color: var(--mint); font-style: normal; }
  .flow-video-lede {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255,255,255,0.82);
    max-width: 560px;
  }
  .iphone-frame-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .iphone-frame {
    position: relative;
    width: min(100%, 310px);
    aspect-ratio: 9 / 19.5;
    border-radius: 44px;
    padding: 12px;
    background: linear-gradient(145deg, #16101f 0%, #3b2b4e 42%, #0c0712 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.12),
      inset 0 0 0 5px rgba(0,0,0,0.65),
      0 28px 60px rgba(0,0,0,0.42);
  }
  .iphone-frame::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 24px;
    border-radius: 999px;
    background: #050407;
    z-index: 3;
  }
  .iphone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 34px;
    background: #000;
  }
  .iphone-screen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
  }
  @media (max-width: 820px) {
    .flow-video-panel { padding: 34px 24px; }
    .flow-video-layout { grid-template-columns: 1fr; }
    .flow-video-copy { text-align: left; }
    .flow-video-lede { max-width: none; }
  }


  /* ==================== V30 TARGETED FIXES ==================== */
  /* Make popup scrollbars wide enough for native arrows without clipping. */
  .landing-popup-panel,
  .product-detail-panel,
  .channel-popup-panel,
  .flow-video-panel {
    scrollbar-width: auto;
    scrollbar-color: #9315F6 rgba(53,33,87,0.12);
  }
  .landing-popup-panel::-webkit-scrollbar,
  .product-detail-panel::-webkit-scrollbar,
  .channel-popup-panel::-webkit-scrollbar,
  .flow-video-panel::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 18px !important;
    height: 18px !important;
  }
  .landing-popup-panel::-webkit-scrollbar-button,
  .product-detail-panel::-webkit-scrollbar-button,
  .channel-popup-panel::-webkit-scrollbar-button,
  .flow-video-panel::-webkit-scrollbar-button,
  *::-webkit-scrollbar-button {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background-color: rgba(53,33,87,0.10) !important;
  }
  .landing-popup-panel::-webkit-scrollbar-track,
  .product-detail-panel::-webkit-scrollbar-track,
  .channel-popup-panel::-webkit-scrollbar-track,
  .flow-video-panel::-webkit-scrollbar-track,
  *::-webkit-scrollbar-track {
    background: rgba(53,33,87,0.08) !important;
    border-radius: 999px;
  }
  .landing-popup-panel::-webkit-scrollbar-thumb,
  .product-detail-panel::-webkit-scrollbar-thumb,
  .channel-popup-panel::-webkit-scrollbar-thumb,
  .flow-video-panel::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9315F6 0%, #B56BEE 100%) !important;
    border: 5px solid rgba(255,255,255,0.78) !important;
    border-radius: 999px !important;
  }

  /* iPhone/video layering and rounded media corners. */
  .iphone-frame {
    overflow: visible !important;
  }
  .iphone-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 44px;
    pointer-events: none;
    z-index: 5;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.18),
      inset 0 0 0 5px rgba(0,0,0,0.72),
      inset 0 0 18px rgba(255,255,255,0.05);
  }
  .iphone-frame::before {
    z-index: 6 !important;
  }
  .iphone-screen {
    z-index: 1;
    border-radius: 34px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 34px);
  }
  .iphone-screen video {
    border-radius: 30px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 30px);
    object-fit: contain !important;
  }
  .iphone-frame.hvac-mode {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .iphone-frame.hvac-mode::before,
  .iphone-frame.hvac-mode::after {
    display: none !important;
  }
  .iphone-frame.hvac-mode .iphone-screen {
    border-radius: 44px !important;
    clip-path: inset(0 round 44px);
    background: transparent !important;
  }
  .iphone-frame.hvac-mode .iphone-screen video {
    border-radius: 44px !important;
    clip-path: inset(0 round 44px);
    object-fit: contain !important;
    background: transparent !important;
  }

  /* Mobile nav: simplify layering and ensure the dropdown is actually tappable on iPhone. */
  .topbar {
    z-index: 9000 !important;
  }
  .mobile-menu-toggle {
    position: relative;
    z-index: 9002 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  @media (max-width: 900px) {
    .topbar.nav-open .topnav,
    body.mobile-nav-open .topnav {
      display: flex !important;
      z-index: 9001 !important;
      pointer-events: auto !important;
    }
    .topnav-link {
      pointer-events: auto !important;
      cursor: pointer !important;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      appearance: none;
      -webkit-appearance: none;
      background-clip: padding-box;
    }
  }