/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — breakpoint overrides for all sections. Loaded LAST so
   these rules win over the per-section base layouts.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /* Power-of-4 (mobile): drop the overlap composition. Photo on top, then the
     three widgets stacked full-width BELOW it in normal flow — clean card
     stack, no widgets covering the face. */
  .power-stage {
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: stretch;                  /* children fill the stage width */
    gap: 14px;
  }
  .power-photo {
    width: 100%;
    align-self: stretch;
    margin: 0;
    height: 300px;
    object-fit: cover;
    border-radius: 22px;
    display: block;
  }

  /* Widgets: out of absolute positioning, full-width rows. Text left, the
     visual (tube / pills / ring) pinned right via space-between. */
  .widget {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 20px 22px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .widget-big { font-size: 40px; }
  .widget-head { font-size: 15px; }
  .widget-foot { font-size: 13px; }

  /* Each widget's inner row also spreads full width so the right-hand visual
     hugs the right edge. (.w-hydration has no .widget-row wrapper — its tube
     is a direct child, so the flex on .widget handles it.) */
  .w-breathing .widget-row,
  .w-movement .widget-row {
    width: 100%;
    justify-content: space-between;
    gap: 20px;
  }

  .hydration-tube { width: 40px; height: 96px; }
  .breath-pill { width: 32px; height: 66px; }
  .breath-pills { gap: 12px; }
  .move-ring { width: 80px; height: 80px; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-pill { padding-left: 18px; }
  .journal { padding-bottom: clamp(56px, 9vh, 110px); }
  /* The fan cramps on narrow screens → become a horizontal scroll-snap
     carousel: phones un-rotate, un-overlap, sit side by side full-size and
     swipeable. Breathing is OFF here (it fights scroll-snap and reads odd on
     a carousel) — undo the animation + the desktop fan transforms. */
  .journal-art {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /* CRITICAL: override the desktop `justify-content: center`. On an
       overflowing scroll container, centering pushes overflow to BOTH
       sides and makes the left content unreachable — that was the
       "can't scroll back to the left" bug. */
    justify-content: flex-start;
    gap: 16px;
    padding: 10px 24px 24px;           /* 24px gutters = the scroll end-stops */
    margin-inline: -24px;              /* bleed to the section edges */
    max-width: none;
    overflow-x: auto;
    /* proximity (not mandatory) so the first/last items can rest fully at
       the gutters instead of being yanked back to a centre snap — that was
       the "won't scroll one way" bug. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;             /* Firefox */
  }
  .journal-art::-webkit-scrollbar { display: none; }
  /* Fully reset the desktop fan: kill rotation, the negative overlap
     margins and top-drop, the breathe transform, and the heavy directional
     drop-shadow that rings the phone. Items snap by their start edge so the
     leftmost can reach the left gutter. */
  .jphone,
  .jphone-left,
  .jphone-right,
  .jphone-center {
    width: min(74vw, 300px);
    flex: 0 0 min(74vw, 300px);        /* fixed basis so items don't shrink */
    margin: 0;
    rotate: 0deg;
    translate: 0 0;
    scroll-snap-align: start;
    /* No drop-shadow on the carousel — it traced each phone's silhouette
       and read as a dark outline/border. The PNG's own baked glow is
       enough; the screens sit clean on the background. */
    filter: none;
  }
  .breathe { animation: none; translate: 0 0; }  /* no breathing on carousel */
  /* Carousel dots: visible only in carousel mode, centred under the phones. */
  .journal-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
  }
  .autopilot {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .autopilot-copy { max-width: none; margin-inline: auto; }
  .autopilot-body { margin-inline: auto; }
  .phone-float picture { width: min(70%, 280px); }

  /* Privacy card: stack copy above the padlock, centred. */
  .privacy-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 28px;
  }
  .privacy-body { margin-inline: auto; }

  /* Footer: link columns wrap, QR drops below. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-qr { grid-column: 1 / -1; justify-self: center; }
}