@media (max-width: 1040px) {
  .hero,
  .companion-points,
  .solution-glance,
  .moments-grid,
  .hospital-grid,
  .waitlist,
  .waitlist-benefits,
  .trust-strip {
    grid-template-columns: 1fr;
  }

  /* Put the form above the pitch once the two columns stack.
     Side by side, the copy persuades while the form waits in the next column.
     Stacked, it lands in front of the form: someone who has just tapped
     "Zapisz się" gets 1501px — 1.8 phone screens — of heading, three benefit
     cards, a lead magnet and a photo before the email field. This flips it to
     318px. Bound to the same 1040px breakpoint as the collapse itself, because
     the collapse is what creates the problem; tablet portrait had it too.
     Nothing is hidden — the pitch follows the form, and `.form-callout` above
     the email field already carries the offer, so the field is never contextless.
     Order affects visual order only; the DOM order the crawlers and screen
     readers see is unchanged. */
  .waitlist-form {
    order: -1;
  }

  .ecosystem-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ambient-wave-a {
    top: 12%;
  }

  .ambient-wave-b {
    top: 50%;
  }

  .story-stage {
    min-height: calc(100svh - 92px);
    align-content: start;
  }
}

@media (pointer: coarse), (max-width: 820px) {
  html {
    scroll-snap-type: none;
  }

  .story-stage {
    min-height: auto;
    align-content: start;
    scroll-snap-align: none;
  }
}

/* Below tablet portrait the topbar row runs out of room and the nav collapses.
   It stays in the HTML — crawlers that never run JavaScript, and anyone reading
   the source, still find every section link.

   767px is where the row actually runs out: measured at 768px the brand, the
   three links and the actions occupy 654px of the 736px available, so a tablet
   held upright keeps its navigation. The old rule hid it at 1040px, which cost
   every tablet and every phone a nav and handed them nothing back.

   What phones get instead is `.mobile-cta`. A hamburger would be the reflex
   answer here, but this is a single-page funnel: the menu would enumerate five
   narrative sections almost nobody opens, and it would compete with the one
   action the page is built around. Scrolling is the navigation; the bar keeps
   the destination one thumb away the whole way down. */
@media (max-width: 767px) {
  :root {
    /* Topbar is 58px here, not 78px. */
    --anchor-offset: 78px;
  }

  .topnav {
    display: none;
  }

  .topbar-actions {
    margin-left: auto;
  }

  .topbar-inner {
    min-height: 58px;
    gap: 0.6rem;
  }

  .brand-mark {
    font-size: 1.2rem;
  }

  .brand-sub {
    display: none;
  }

  /* The locale switch and the CTA are the only two controls left in the bar.
     Both have to clear 44x44 for a finger; at their desktop sizes the locale
     pills are 35x31. */
  .locale-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.3rem 0.4rem;
  }

  .topbar-actions .btn-sm {
    min-height: 44px;
  }

  /* The destination of every one of those CTAs. It measured 39.8px. */
  .btn-compact {
    min-height: 44px;
  }

  .has-mobile-cta .mobile-cta {
    display: flex;
  }

  /* The bar floats over the end of the document, where the footer keeps the
     privacy and terms links. Reserved only when the bar is actually in play —
     `has-mobile-cta` is set by the module, so a page with no JavaScript gets
     neither the bar nor a gap where one would have been. */
  .has-mobile-cta .footer {
    padding-bottom: calc(1.65rem + 4.7rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .page-flow {
    gap: 0.86rem;
  }

  .story-stage {
    gap: 0.86rem;
    min-height: calc(100svh - 88px);
  }

  .problem-card,
  .solution-card,
  .companion-strip,
  .moments,
  .hospital-story,
  .hero-peek-card,
  .waitlist-copy,
  .waitlist,
  .faq {
    border-radius: 18px;
  }

  .solution-points {
    grid-template-columns: 1fr;
  }

  .cta-stack {
    align-items: stretch;
  }

  .cta-stack .btn {
    width: 100%;
  }

  .helper-link {
    text-align: center;
  }

  .form-callout h3 {
    font-size: 1.28rem;
  }

  .form-actions {
    justify-content: stretch;
  }

  .btn-compact {
    width: 100%;
    min-width: 0;
  }

  .topbar-actions {
    gap: 0.45rem;
  }

  .hero-peek-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-grad-card-strong);
  }

  .hero-peek-card img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    object-position: center 54%;
  }

  .hero-peek-card figcaption {
    position: relative;
    inset: auto;
    margin: 0;
    width: 100%;
    padding: 0.82rem 0.9rem 0.95rem;
    border-radius: 0 0 18px 18px;
    border-top: 1px solid rgba(116, 212, 255, 0.18);
    background:
      linear-gradient(180deg, rgba(5, 21, 38, 0.96), rgba(5, 21, 38, 0.9)),
      linear-gradient(135deg, rgb(from var(--bg) r g b / 0.88), rgb(from var(--bg) r g b / 0.62));
    backdrop-filter: none;
  }

  .hero-peek-card figcaption strong {
    font-size: 1rem;
    line-height: 1.08;
  }

  .hero-peek-card figcaption span:last-child {
    font-size: 0.84rem;
    line-height: 1.34;
  }

  .moments {
    padding: 1rem 0.9rem 1rem;
  }

  .waitlist-visual img {
    aspect-ratio: 16 / 8.2;
  }

  .ecosystem-grid-3,
  .ecosystem-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .moments-grid {
    gap: 0.9rem;
  }

  .moments-grid article {
    display: grid;
    grid-template-rows: auto auto 1fr;
    position: static;
    background: linear-gradient(180deg, rgb(from var(--paper-elev) r g b / 0.76), rgba(8, 28, 50, 0.96));
  }

  .moments-grid article::after {
    content: none;
  }

  .moments-grid img {
    display: block;
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9.8;
    height: auto;
    margin: 0;
  }

  .moments-grid h3,
  .moments-grid p {
    display: block;
    position: static;
    left: auto;
    right: auto;
    margin-left: 0.9rem;
    margin-right: 0.9rem;
    z-index: auto;
    text-shadow: none;
  }

  .moments-grid h3 {
    bottom: auto;
    margin-top: 0.74rem;
    margin-bottom: 0;
    font-size: 1.18rem;
    color: #f6fbff;
    padding: 0;
    background: none;
    border-radius: 0;
    width: auto;
    max-width: none;
  }

  .moments-grid p {
    bottom: auto;
    margin-top: 0;
    margin-bottom: 0.95rem;
    font-size: 0.94rem;
    line-height: 1.38;
    color: var(--ink-soft);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
  }

  .hospital-grid {
    gap: 0.9rem;
  }

  .hospital-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    position: static;
    background: linear-gradient(180deg, rgb(from var(--paper-elev) r g b / 0.76), rgba(8, 28, 50, 0.96));
  }

  .hospital-card img {
    display: block;
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9.8;
    height: auto;
    margin: 0;
  }

  .hospital-card h3,
  .hospital-card p {
    display: block;
    position: static;
    margin-left: 0.9rem;
    margin-right: 0.9rem;
    text-shadow: none;
  }

  .hospital-card h3 {
    margin-top: 0.74rem;
    margin-bottom: 0;
    font-size: 1.18rem;
    color: #f6fbff;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .hospital-card p {
    margin-top: 0;
    margin-bottom: 0.95rem;
    font-size: 0.94rem;
    line-height: 1.38;
    color: var(--ink-soft);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
  }
}

/* Small phones. Measured at 320px the topbar row wants 341px and has 288px, so
   something has to go — and it was already overflowing by 39px before the
   touch targets above grew to 44px. What goes is the half of the language
   switch that does nothing: the active pill repeats what <html lang>, the
   headline and every other word on the page already say, while occupying the
   widest non-interactive object in the bar. What is left is the language you
   can actually switch to, at full tappable size. */
@media (max-width: 400px) {
  .locale-link.is-active {
    display: none;
  }

  .brand-mark {
    font-size: 1.06rem;
  }

  .topbar-actions .btn-sm {
    padding-inline: 0.85rem;
  }

  .mobile-cta {
    padding-left: 0.8rem;
    gap: 0.5rem;
  }
}

/* A phone held sideways is ~375-430px tall, and its width can land on either
   side of the breakpoint above (an iPhone 14 Pro is 852x393), so this pair is
   keyed on height. A 78px topbar is a fifth of that screen whatever the width,
   so it gets shorter and drops the tagline. */
@media (max-height: 460px) {
  :root {
    --anchor-offset: 68px;
  }

  .topbar-inner {
    min-height: 54px;
  }

  .brand-sub {
    display: none;
  }

  .mobile-cta {
    bottom: calc(0.5rem + env(safe-area-inset-bottom));
    padding-block: 0.34rem;
  }

  .has-mobile-cta .footer {
    padding-bottom: calc(1.65rem + 4.2rem + env(safe-area-inset-bottom));
  }
}

/* Short AND narrow: the nav is already gone and `.mobile-cta` is carrying the
   action, so the topbar has nothing left worth pinning and can go with the
   scroll. Above 767px it stays sticky even when short, because there it is
   still holding the nav and the only CTA. */
@media (max-width: 767px) and (max-height: 460px) {
  :root {
    --anchor-offset: 16px;
  }

  .topbar {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  .ambient-bg {
    display: none;
  }

  ::view-transition-old(nav-active-indicator),
  ::view-transition-new(nav-active-indicator) {
    animation: none;
  }

  /* Deliberately NOT in the blanket list below: that rule forces
     `transform: none; opacity: 1`, which would pin the mobile bar on screen
     permanently, over the submit button included. It keeps its two states and
     simply stops sliding between them. */
  .mobile-cta,
  .mobile-cta.is-visible {
    transition: none;
  }

  .problem-card,
  .solution-card,
  .moments-grid article,
  .hospital-story,
  .hospital-card,
  .ecosystem-row,
  .ecosystem-card,
  .waitlist-copy,
  .waitlist-form,
  details,
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-up {
    transition: none;
    transform: none;
    opacity: 1;
  }
}