@media (max-width: 920px) {
  .storefront-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    min-height: auto;
    padding-block: 4rem 2rem;
  }

  .storefront-hero .hero-copy { max-width: 780px; }
  .storefront-hero .hero-stage { width: min(760px, 100%); margin-inline: auto; }
  .platform-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .journey-layout {
    grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr);
    gap: 1.5rem;
  }

  .cost-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adoption-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .adoption-timeline::before {
    top: 1.55rem;
    left: 25%;
    right: 25%;
  }

  .video-proof { grid-template-columns: 1fr; }
  .product-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .section-shell.storefront-band,
  .section-shell.final-conversion { padding-inline: max(1.25rem, env(safe-area-inset-left)); }
  .storefront-hero { padding-block: 2.5rem 1rem; }
  .storefront-hero h1 { font-size: clamp(2.05rem, 8vw, 2.6rem); }
  .hero-stage-tabs { width: 100%; border-radius: 1rem; }
  .hero-stage-tab { flex: 1 1 8rem; }

  .platform-ribbon,
  .problem-grid,
  .cost-grid,
  .product-story-grid,
  .product-flow-grid { grid-template-columns: 1fr; }

  .platform-ribbon { gap: 1px; }
  .journey-layout { grid-template-columns: 1fr; }

  .journey-media {
    position: relative;
    top: auto;
    max-height: min(70svh, 34rem);
  }

  .journey-media img,
  .journey-media video { height: 100%; object-fit: cover; object-position: top; }

  .scenario-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 0.7rem;
  }

  .scenario-switch,
  .currency-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.scenario-switch, .currency-switch) button { width: 100%; }

  .cost-total {
    align-items: start;
    grid-template-columns: 1fr;
  }
  .cost-total .button { grid-column: 1; grid-row: auto; margin-top: 0.75rem; }

  .adoption-timeline { grid-template-columns: 1fr; gap: 0.2rem; }

  .adoption-timeline::before {
    top: 1rem;
    bottom: 1rem;
    left: 1.5rem;
    right: auto;
    width: 1px;
    height: auto;
    transform: translateX(-50%);
  }

  .adoption-step {
    min-height: 4.5rem;
    padding: 0.8rem 0.8rem 0.8rem 4rem;
    text-align: left;
  }

  .adoption-step::before { top: 1rem; left: 1.5rem; }

  .final-conversion {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .final-actions { display: grid; width: 100%; }
  .final-actions .button { width: 100%; }
}

@media (max-width: 420px) {
  :root {
    --commerce-radius: 1.25rem;
    --commerce-radius-sm: 0.85rem;
  }

  .storefront-hero h1 { font-size: clamp(1.95rem, 8.5vw, 2.25rem); }
  .storefront-hero .hero-actions { display: grid; }
  .storefront-hero .hero-actions .button { width: 100%; }

  .hero-stage-tabs {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0.45rem;
  }

  .hero-stage-tab { width: 100%; }
  .platform-ribbon { border-radius: 1rem; }
  .platform-ribbon > * { padding: 0.9rem; }
  .storefront-band { padding: 1.3rem; }

  .problem-card,
  .cost-card,
  .story-card,
  .flow-card { padding: 1.05rem; }

  .journey-step { grid-template-columns: 1fr; gap: 0.7rem; }
  .journey-step:hover,
  .journey-step.is-active { transform: none; }
  .journey-index { width: 2.2rem; height: 2.2rem; }

  .scenario-switch,
  .currency-switch { grid-template-columns: 1fr; }

  .cost-total { padding: 1.25rem; }
  .cost-total strong { font-size: 2rem; }
  .video-proof { padding: 1.1rem; }
  .final-conversion { padding: 1.5rem; }
  .final-conversion :is(h2, h3) { font-size: clamp(2rem, 12vw, 3rem); }
  .final-conversion .button { width: 100%; }

  .product-proof-strip { display: grid; }
  .product-proof-strip > * { flex-basis: auto; padding: 0.9rem 1rem; }
}