/* BizSetupMY Finder: all eight questions visible, results below */
@media (min-width:981px){
  #finder.section{
    padding:34px 0 38px!important;
  }
  #finder .finder-shell{
    width:min(1180px,96%)!important;
    max-width:1180px!important;
  }
  #finder .section-head{
    margin-bottom:16px!important;
    max-width:900px!important;
  }
  #finder .section-head h2{
    font-size:2rem!important;
    margin:3px 0 6px!important;
  }
  #finder .section-head p{
    font-size:.9rem!important;
    margin:0!important;
  }

  /* Stack questionnaire and results as two clear sections. */
  #finder .finder-two-column{
    display:block!important;
  }

  #finder .quiz-card{
    padding:0 20px 18px!important;
    border-radius:18px!important;
    box-shadow:0 14px 34px rgba(31,65,122,.12)!important;
  }
  #finder .quiz-card::before{
    margin:0 -20px 14px!important;
    padding:10px 20px!important;
    font-size:.68rem!important;
    letter-spacing:.07em!important;
  }

  /* Progress belongs to the old step-by-step flow. */
  #finder .progress-wrap{display:none!important}

  #finder #wizardForm{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;
    align-items:start!important;
  }
  #finder .question,
  #finder .question.active{
    display:block!important;
    padding:12px!important;
    margin:0!important;
    border:1px solid #E0E8F3!important;
    border-radius:13px!important;
    background:#FBFCFE!important;
    min-height:188px!important;
  }
  #finder .question-kicker{
    font-size:.58rem!important;
    padding:3px 7px!important;
  }
  #finder .question h3{
    font-size:.92rem!important;
    line-height:1.22!important;
    margin:7px 0 9px!important;
    min-height:44px!important;
  }
  #finder .choice-grid,
  #finder .choice-grid.two{
    grid-template-columns:1fr!important;
    gap:5px!important;
  }
  #finder .choice{
    min-height:30px!important;
    padding:6px 7px 6px 28px!important;
    border-radius:8px!important;
    font-size:.72rem!important;
    line-height:1.18!important;
  }
  #finder .choice::before{
    left:8px!important;
    width:12px!important;
    height:12px!important;
    border-width:1.3px!important;
  }
  #finder .choice.selected{padding-left:28px!important}
  #finder .choice.selected::before{
    width:14px!important;
    height:14px!important;
    font-size:.54rem!important;
  }
  #finder .wizard-actions{display:none!important}

  #finder .all-question-actions{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding-top:12px;
    border-top:1px solid #E4EAF2;
  }
  #finder .all-question-status{
    display:flex;
    flex-direction:column;
    gap:2px;
    color:#6A778A;
    font-size:.78rem;
  }
  #finder .all-question-status strong{
    color:#22304A;
    font-size:.86rem;
  }
  #finder .all-question-actions .btn{
    min-width:210px;
    padding:10px 16px!important;
    font-size:.82rem!important;
  }

  /* Results below, four cards across. */
  #finder .persistent-dashboard{
    position:static!important;
    margin-top:18px!important;
    padding:18px!important;
    border-radius:18px!important;
    box-shadow:0 14px 34px rgba(18,35,61,.16)!important;
  }
  #finder .persistent-dashboard .result-hero{
    margin:0 0 12px!important;
    padding:0 0 12px!important;
  }
  #finder .persistent-dashboard .result-hero h2{
    font-size:1.45rem!important;
    margin:4px 0!important;
  }
  #finder .persistent-dashboard .result-hero p{
    font-size:.78rem!important;
    line-height:1.4!important;
    margin:0!important;
  }
  #finder .persistent-dashboard .result-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
  }
  #finder .persistent-dashboard .result-card{
    min-height:230px!important;
    padding:13px!important;
    border-radius:12px!important;
  }
  #finder .persistent-dashboard .result-label{
    font-size:.58rem!important;
  }
  #finder .persistent-dashboard .result-card h3{
    font-size:1rem!important;
    line-height:1.2!important;
    margin:5px 0!important;
    padding-right:24px!important;
  }
  #finder .persistent-dashboard .result-card p{
    font-size:.72rem!important;
    line-height:1.35!important;
    margin:4px 0!important;
  }

  /* Why/reason is supporting text, not an action. Keep it visually quiet so the CTA is the only button-shaped element. */
  #finder .persistent-dashboard .reason,
  #finder .persistent-dashboard .result-card .why,
  #finder .persistent-dashboard .result-card .result-why{
    font-size:.66rem!important;
    line-height:1.35!important;
    padding:0!important;
    margin:7px 0 10px!important;
    background:transparent!important;
    border:none!important;
    border-radius:0!important;
    color:#B9C7D8!important;
    box-shadow:none!important;
  }
  #finder .persistent-dashboard .reason::before,
  #finder .persistent-dashboard .result-card .why::before,
  #finder .persistent-dashboard .result-card .result-why::before{
    content:""!important;
  }

  #finder .persistent-dashboard .result-card .btn{
    min-height:34px!important;
    padding:7px 8px!important;
    font-size:.68rem!important;
    border-radius:7px!important;
    margin-top:auto!important;
  }
  #finder .persistent-dashboard .card-status-tick{
    top:9px!important;
    right:9px!important;
    width:20px!important;
    height:20px!important;
    font-size:.62rem!important;
  }
  #finder .persistent-dashboard .next-step-box,
  #finder .persistent-dashboard .affiliate-note{
    display:none!important;
  }
}

@media (max-width:980px){
  #finder .finder-two-column{display:block!important}
  #finder #wizardForm{display:block!important}
  #finder .question,
  #finder .question.active{display:block!important}
  #finder .progress-wrap{display:none!important}
  #finder .question{margin-bottom:14px!important}
  #finder .all-question-actions{display:block;margin-top:16px}
  #finder .all-question-actions .btn{width:100%;margin-top:12px}
  #finder .persistent-dashboard{margin-top:20px!important;position:static!important}

  /* Same clarity on mobile/tablet: reasons are text, CTA is the only button-like control. */
  #finder .persistent-dashboard .reason,
  #finder .persistent-dashboard .result-card .why,
  #finder .persistent-dashboard .result-card .result-why{
    background:transparent!important;
    border:none!important;
    border-radius:0!important;
    box-shadow:none!important;
    padding:0!important;
    color:#B9C7D8!important;
  }
}

/* Mobile-only interaction: one question at a time. Desktop/tablet layout above is unchanged. */
.mobile-question-nav{display:none}

@media (max-width:780px){
  #finder.section{padding:46px 0 52px!important}
  #finder .section-head{margin-bottom:18px!important}
  #finder .section-head h2{font-size:1.85rem!important}
  #finder .section-head p{font-size:.94rem!important;line-height:1.5!important}

  #finder .quiz-card{
    padding:0 16px 18px!important;
    border-radius:18px!important;
  }
  #finder .quiz-card::before{
    margin:0 -16px 16px!important;
    padding:9px 16px!important;
    font-size:.67rem!important;
    letter-spacing:.055em!important;
  }

  #finder #wizardForm{display:block!important}
  #finder .question,
  #finder .question.active{
    display:none!important;
    margin:0!important;
    padding:4px 0 8px!important;
    border:0!important;
    background:transparent!important;
    min-height:0!important;
  }
  #finder .question.mobile-current,
  #finder .question.active.mobile-current{display:block!important}

  #finder .question-kicker{
    display:inline-flex!important;
    font-size:.7rem!important;
    padding:5px 9px!important;
    margin-bottom:4px!important;
  }
  #finder .question h3{
    font-size:1.45rem!important;
    line-height:1.18!important;
    margin:8px 0 18px!important;
    min-height:0!important;
  }
  #finder .choice-grid,
  #finder .choice-grid.two{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  #finder .choice{
    width:100%!important;
    min-height:48px!important;
    padding:12px 14px 12px 42px!important;
    border-radius:10px!important;
    font-size:.95rem!important;
    line-height:1.25!important;
  }
  #finder .choice::before{
    left:14px!important;
    width:18px!important;
    height:18px!important;
  }
  #finder .choice.selected{padding-left:42px!important}
  #finder .choice.selected::before{
    width:20px!important;
    height:20px!important;
    font-size:.72rem!important;
  }

  #finder .all-question-actions{display:none!important}

  #finder .mobile-question-nav{
    display:block!important;
    margin-top:18px!important;
    padding-top:16px!important;
    border-top:1px solid #E4EAF2!important;
  }
  #finder .mobile-question-meta{margin-bottom:14px!important}
  #finder .mobile-question-meta strong{
    display:block!important;
    font-size:.84rem!important;
    color:#4C5A70!important;
    margin-bottom:7px!important;
  }
  #finder .mobile-question-progress{
    height:6px!important;
    border-radius:999px!important;
    background:#E9EEF5!important;
    overflow:hidden!important;
  }
  #finder .mobile-question-progress span{
    display:block!important;
    height:100%!important;
    width:12.5%;
    border-radius:999px!important;
    background:#2F6FEC!important;
    transition:width .2s ease!important;
  }
  #finder .mobile-question-buttons{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  #finder .mobile-question-buttons .btn{
    width:100%!important;
    min-height:44px!important;
    padding:10px 12px!important;
    font-size:.9rem!important;
  }
  #finder .mobile-question-buttons .btn:disabled{
    opacity:.48!important;
    cursor:not-allowed!important;
  }

  #finder .persistent-dashboard{margin-top:18px!important}
}