/* Phase 5 visual correction: mobile card hierarchy and sheet contrast only.
   Both rulesets remain inside the existing wizard; no JS or layout routing changes. */
@media (max-width: 960px) {
  /* Override the legacy pill's justify-content:center, which puts PHONE/SERIES
     in the middle of the card even though the name is left-aligned. */
  html body.homepage-premium-page #primitive-wizard-container #pr-steps-area.animated-area:has(> :is(#device-card-results, #brand-card-results, #series-card-results, .repair-select-panel)) :is(.device-card-results, .brand-card-results, .series-card-results, .repair-card-results) > button.opt-card > .opt-card-body > .opt-badge {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    align-self: stretch !important;
    width: 100% !important;
  }

  /* These DIRECT-CHILD selectors intentionally outrank the old dark summary
     styles for .filled labels and .card-back:not(:disabled). */
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card > .card-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #283343 !important;
    font: 700 .7rem/1.35 "Manrope", sans-serif !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card > .card-label,
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card:is(.filled, .is-complete-step, .is-current-step, .is-missing-choice) > .card-label {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    color: #263546 !important;
    font: 600 .71rem/1.4 "Manrope", sans-serif !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-shadow: none !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    opacity: 1 !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card.is-upcoming-step > .card-label {
    color: #6a788a !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card > .card-back:not(:disabled) {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0d9199 !important;
    font: 800 .65rem/1 "Manrope", sans-serif !important;
    letter-spacing: 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    text-transform: none !important;
    box-shadow: none !important;
  }
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card > .card-back:focus-visible {
    outline: 2px solid #0d9199 !important;
    outline-offset: 2px !important;
  }
}
@media (max-width: 350px) {
  html body.homepage-premium-page #primitive-wizard-container #pr-selection-cards.pr-saas-summary .blueprint-profile-grid > .pr-progress-card > .card-back:not(:disabled) {
    width: 37px !important;
    min-width: 37px !important;
  }
}