/* Only phone widths. Existing packs and desktop styles remain authoritative. */
@media (max-width: 767px) {
  #ms-page-loader, .ms-callbar, nav[class$="-sticky-cta"] { display: none !important; }
  html body { padding-bottom: 0 !important; scroll-padding-bottom: 0; }
  .ms-site-footer .ms-footer-brand--mobile .ms-footer-logo {
    width: 132px; height: auto; max-height: 68px; padding: 4px;
    border-radius: 7px; background: #fff; filter: none !important; opacity: 1 !important;
  }
  .ms-site-footer .ms-footer-policies {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 14px;
    text-align: left; align-items: start; padding: 8px 16px 12px;
  }
  .ms-site-footer .ms-footer-policies a { margin: 0; padding: 4px 0; line-height: 1.3; }
  .msh-page .msh-section { padding-block: 40px; }
  .msh-page .msh-section--symptoms { padding-bottom: 24px; }
  .msh-page .msh-section--services { padding-top: 26px; }
  .msh-page .msh-areas-hint::before, .msh-page .msh-areas-hint::after { content: none !important; }
  .msh-page .msh-areas-hint .ms-mobile-arrow { margin-inline-end: .4em; }
  .msh-page .msh-svc-card-nav {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  }
  .msh-page .msh-svc-position {
    color: #003c7a; font-size: .875rem; font-weight: 800; font-variant-numeric: tabular-nums;
  }
  .msh-page .msh-svc-card-nav > .msh-svc-nav { display: none !important; }
  .msh-page .msh-svc-card-nav .msh-svc-dots {
    display: flex; flex-wrap: nowrap; gap: 0; width: max-content; max-width: 100%;
    align-items: center; justify-content: center; padding: 0; min-height: 32px;
  }
  .msh-page .msh-svc-dots > .msh-svc-dot {
    flex: 0 0 12px; width: 12px; min-width: 12px !important; height: 34px; margin: 0; padding: 0;
    background: transparent !important; border: 0; border-radius: 0; display: grid; place-items: center;
    transform: none !important; translate: none !important;
  }
  .msh-page .msh-svc-dots > .msh-svc-dot::before {
    content: ''; display: block; width: 8px; height: 8px; background: #b5c6d7; border-radius: 50%;
  }
  .msh-page .msh-svc-dots > .msh-svc-dot.is-active::before {
    background: #003c7a; width: 8px; height: 8px; border-radius: 50%;
  }
  .msh-svc-slider { position: relative; }
  .msh-page .msh-svc-card .msh-svc-card-top { padding-inline-end: 52px; }
  .msh-page .msh-svc-card::after {
    display: block;
    opacity: 1;
    transform: none;
  }
  .msh-page :is(.msh-sx-pick-btn,.msh-why-pick-btn) { position: relative; padding-inline-end: 48px !important; }
  .msh-page :is(.msh-sx-pick-btn,.msh-why-pick-btn)::after { content: none !important; }
  .msh-page .ms-mobile-disclosure {
    position: absolute; inset-inline-end: 12px; top: 50%; translate: 0 -50%;
    color: currentColor; font-size: 20px; font-weight: 600; line-height: 1;
  }
  .msh-page .ms-mobile-disclosure::after { content: '+'; }
  .msh-page [aria-expanded="true"] > .ms-mobile-disclosure::after { content: '−'; }
  .msh-page .msh-faq summary { position: relative; padding-inline-end: 48px !important; }
  .msh-page .msh-faq-chev { display: none !important; }
  .msh-page details[open] > summary > .ms-mobile-disclosure::after { content: '−'; }
  .ms-mobile-inline-link { text-decoration: underline !important; text-underline-offset: .16em; color: inherit !important; }

  /* One horizontal scroll owner per carousel, using the browser's touch scroll. */
  body .ms-mobile-snap {
    display: flex !important; grid-template-columns: none !important; align-items: stretch !important;
    flex-direction: row !important; flex-wrap: nowrap !important;
    gap: 12px !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important;
    overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory !important; scroll-padding-inline: 0 !important;
    scrollbar-width: none; direction: ltr; touch-action: pan-x pan-y !important;
    transform: none !important; transition: none !important; padding: 0 !important; margin: 0 !important;
  }
  .ms-mobile-snap::-webkit-scrollbar { display: none; }
  .ms-mobile-snap > * {
    flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; scroll-snap-align: start; scroll-snap-stop: always;
    position: relative !important; top: auto !important; transform: none !important;
    align-self: stretch; height: auto !important; margin: 0 !important;
  }
  .ms-mobile-snap > :is(.mss-brand-card,.mss-prep-card,.msb-why-card) { flex-basis: 88% !important; }
  .ms-mobile-snap.ms-mobile-peek > * { pointer-events: auto !important; }
  .ms-mobile-snap::after { content: ''; flex: 0 0 calc(12% - 12px); }
  .ms-mobile-snap:not(.ms-mobile-peek)::after { content: none; }
  .ms-mobile-snap > :is(.msh-svc-card,.msb-svc-card,.mss-prep-card,.mss-brand-card,.msb-why-card):is(:hover,:focus-visible) {
    transform: none !important;
  }
  .ms-mobile-snap-viewport { touch-action: pan-x pan-y !important; overflow: hidden !important; }
  .msh-svc-slider[data-ms-swipe], .msb-svc-slider[data-ms-swipe] { touch-action: pan-x pan-y !important; }
  .ms-mobile-snap-viewport, .ms-mobile-snap { min-width: 0; }
  .ms-mobile-snap .ms-mobile-active { opacity: 1; }
  .mss-section--brand-slider .mss-brand-slider-track.ms-mobile-snap {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
  }
  .mss-section--brand-slider .ms-mobile-snap > .mss-brand-card {
    background: #eff4fa !important;
    opacity: 1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Keep the steps in document flow so each card can stick as the next one arrives. */
  body :is(.msh-steps-grid, .mshb-steps-grid, .mss-steps-slider-track, .mss-steps-grid,
    .msb-steps-slider-track, .msb-steps-grid, .msa-steps-grid, .mso-steps-grid, .msc-steps-grid) {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: 440px !important;
    margin-inline: auto;
    overflow: visible !important;
    transform: none !important;
  }
  body :is(.msh-steps-item, .mshb-steps-item, .mss-steps-item, .msb-steps-item,
    .msa-steps-item, .mso-steps-item, .msc-steps-item) {
    position: sticky !important;
    top: calc(var(--ms-header-h-scrolled, 64px) + 12px + var(--ms-step-i, 0) * 10px) !important;
    z-index: calc(1 + var(--ms-step-i, 0)) !important;
    flex: none !important;
    padding-bottom: 24px !important;
  }
  body :is(.msh-steps-item, .mshb-steps-item, .mss-steps-item, .msb-steps-item,
    .msa-steps-item, .mso-steps-item, .msc-steps-item):last-child {
    padding-bottom: 8px !important;
  }
  body :is(.msh-section--steps, .mshb-section--steps, .mss-section--steps, .msb-section--steps,
    .msa-section--steps, .mso-section--steps, .msc-section--steps, .mss-steps-slider-viewport,
    .msb-steps-slider-viewport, .msa-steps-viewport) {
    overflow: visible !important;
  }
  body :is(.mss-steps-slider-viewport, .msb-steps-slider-viewport) {
    touch-action: pan-y pinch-zoom !important;
  }
  body :is(.mss-steps-slider-top, .msb-steps-slider-top) { display: none !important; }
  body :is(.mss-steps-card, .msb-steps-card) {
    display: flex !important;
    flex-direction: column;
  }
  body :is(.mss-steps-card-body, .msb-steps-card-body) { order: -1; }
  .mss-page .mss-section h2:not(.mss-form-card h2) { font-size: clamp(29px, 7.55vw, 34px) !important; text-wrap: balance; }
  .mss-section--problems .mss-problem-body > .mss-problem-stage {
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    margin-top: 12px;
    border-radius: 10px;
  }
  .mss-section--problems .mss-problem-body .mss-problem-stage__frame { position: relative; }
  /* Let the visible photo size the frame while the other layer crossfades. */
  .mss-section--problems .mss-problem-body .mss-problem-stage__img.is-active {
    position: relative;
    height: auto !important;
  }
  .mss-problem-motion::details-content {
    display: grid;
    grid-template-rows: 0fr;
    content-visibility: visible;
    opacity: 0;
    transition: grid-template-rows 380ms cubic-bezier(.4, 0, .2, 1), opacity 240ms ease;
  }
  .mss-problem-motion[open]::details-content {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .mss-problem-reveal { min-height: 0; overflow: hidden; }
  .mss-problem-motion > .mss-problem-reveal > .mss-problem-body {
    padding-top: 14px;
    border-top-color: var(--mss-line);
  }
  .mss-problem-photo {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 12px;
    border: 1px solid var(--mss-line, #e8eef5);
    border-radius: 10px;
  }
  @media (prefers-reduced-motion: reduce) {
    .mss-problem-motion::details-content { transition: none; }
  }
  .mss-section--why .mss-why-split > .mss-why-media { order: 1; }
  .mss-decide .mss-decide-row--flip > .mss-decide-media { order: -1; }
  .mss-page :is(.mss-why-media,.mss-tests-media,.mss-decide-media,.mss-cta-media),
  .msb-page :is(.msb-cta-media,.msb-why-media) {
    min-height: 0; max-width: 100%; overflow: hidden; border-radius: 14px;
  }
  .mss-page :is(.mss-why-media,.mss-tests-media,.mss-decide-media,.mss-cta-media) img,
  .msb-page :is(.msb-cta-media,.msb-why-media) img {
    position: static !important; display: block; width: 100% !important; height: auto !important;
    max-height: 320px; object-fit: contain !important; object-position: center;
  }
  .msh-page .msh-svc-card {
    --msh-svc-card-inset: 20px;
    padding-inline: var(--msh-svc-card-inset);
    padding-bottom: 0;
  }
  .msh-page .msh-svc-card-media {
    width: calc(100% + 2 * var(--msh-svc-card-inset));
    max-width: none;
    margin-inline: calc(-1 * var(--msh-svc-card-inset));
    min-height: 0;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }
  .msh-page .msh-svc-card-media img {
    display: block; width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center 18% !important; transform: none !important;
  }
  .msb-page .msb-svc-card-media {
    background: #e8eef5; overflow: hidden; min-height: 0; aspect-ratio: 1 / 1;
  }
  .msb-page .msb-svc-card-media img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    object-position: center 18% !important; transform: none !important;
  }
  .msb-page .msb-steps-card-media img,
  .mss-page .mss-steps-card-media img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
    object-position: center !important; transform: none !important;
  }
  body :is(.mss-steps-card-media,.msb-steps-card-media) {
    width: 100%; height: auto !important; aspect-ratio: 16 / 9; background: #e8eef5;
  }
  .msb-page .msb-tech-card__media img,
  .msb-page .msb-tech-card.is-active .msb-tech-card__media img {
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
  }
  .msb-page .msb-tech-card__icon-arrow { display: none !important; }
  .msb-page .msb-tech-card__icon-plus { display: inline-flex !important; }
  .msb-page .msb-errors-explorer__slider { display: block; min-width: 0; }
  .msb-page .msb-errors-explorer__slider .msb-errors-m-nav { display: none !important; }
  .msb-page .msb-errors-explorer__viewport { min-width: 0; max-width: 100%; overflow: visible; }
  .msb-page .msb-errors-explorer__codes {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    width: 100%; max-width: 100%; overflow: visible !important; touch-action: auto !important;
  }
  .msb-page .msb-errors-m-code {
    min-height: 44px; min-width: 46px; max-width: 100%; font-size: 14px;
    padding-inline: 12px; flex-shrink: 0; white-space: normal; overflow-wrap: anywhere;
  }
  .msb-page .msb-errors-m-panel__top { display: flex; flex-wrap: wrap; gap: 6px; }
  .msb-page :is(.msb-errors-code,.msb-errors-appliance) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .mso-page .mso-hero { background: #0a1523; }
  .mso-page .mso-hero > .mso-hero-bg {
    position: relative !important; display: block; inset: auto; width: 100%; height: auto;
    max-height: 360px; object-fit: contain; border-radius: 12px; margin: 0 0 20px;
  }
  .mso-page .mso-hero > .mso-hero-overlay { display: none; }
  .mso-page .mso-hero-inner { grid-template-columns: minmax(0,1fr); gap: 24px; }
}