/* Responsive QA · 2026-11-02. Loaded after scene styles so every breakpoint shares
   the final media and tab layout rather than historical overrides. */
@media (min-width: 761px) and (max-width: 999px) {
  /* Keep the app tiles in opposite corners, clear of the central reply. */
  .pressure-orbit { width: 45%; max-width: 380px; }
  .pressure-apps { inset: 0; display: block; }
  .pressure-apps li { position: absolute; }
  .pressure-apps .pressure-word { left: 20px; top: 54px; }
  .pressure-apps .pressure-docs { right: 0; bottom: 42px; }
  .pressure-answer { left: 20px; top: 210px; }
  .pressure-answer h3 { font-size: clamp(34px, 4.5vw, 45px); }
  .pressure-emotion { width: 54px; height: 54px; border-width: 4px; }
  .pressure-emotion img { width: 38px; height: 38px; }
}

@media (max-width: 760px) {
  /* Let the reply and app tiles reserve their actual height below the portrait. */
  .pressure-stage { height: auto; display: flex; flex-direction: column; }
  .pressure-photo { position: relative; inset: auto; height: clamp(320px, 90vw, 420px); flex: none; }
  .pressure-stage::before { display: none; }
  .pressure-stage::after {
    inset: 0 0 auto;
    height: clamp(320px, 90vw, 420px);
    background: linear-gradient(180deg, transparent 65%, #eef4fb);
  }
  .pressure-orbit {
    position: relative; inset: auto; width: 100%; height: auto;
    margin-top: -12px; padding: 20px 24px 38px;
    display: flex; flex-direction: column; align-items: center;
  }
  .pressure-answer { position: relative; inset: auto; max-width: 100%; transform: rotate(-3deg); }
  .pressure-answer h3 { font-size: clamp(30px, 8vw, 42px); }
  .pressure-answer-intro { margin-bottom: 10px; }
  .pressure-last-line { gap: 10px; }
  .pressure-emotion { width: 50px; height: 50px; border-width: 4px; }
  .pressure-emotion img { width: 34px; height: 34px; }
  .pressure-apps { position: relative; inset: auto; order: 1; width: 100%; margin-top: 42px; gap: 60px; }
  .pressure-apps li:nth-child(2) { transform: rotate(6deg); }
  .pressure-app-marks { width: 34px; height: 34px; }
  .pressure-word .pressure-app-marks { left: -18px; right: auto; top: -18px; }
  .pressure-docs .pressure-app-marks { right: -18px; left: auto; bottom: -18px; }

  /* A label gets the full column width; icon + wide Unbounded text cannot
     share a narrow row without breaking words or painting into the next tab. */
  .feature-tabs button {
    min-width: 0; min-height: 138px; padding: 12px 8px;
    flex-direction: column-reverse; justify-content: center; gap: 12px;
    text-align: center; font-size: 12px;
  }
  .feature-tabs button > span:first-child {
    display: grid; place-items: center; width: 100%; max-width: none;
    min-width: 0; min-height: 3em; overflow-wrap: normal;
  }
  .tab-icon { width: 48px; height: 48px; }
  .tab-icon img { width: 30px; height: 30px; }
  .feature-panel { min-width: 0; }

  /* Keep rotated stickers and photos inside the available page gutters. */
  .sticker-book { right: 6px; }
  .hero-photo-collage .hero-coursework { right: 12px; }
  .finish-scene { margin-inline: 12px; }
  .finish-sticker { right: 2px; }
  .button { max-width: 100%; white-space: normal; }
  .button span[aria-hidden] { flex: none; }
  .finish-copy .button { white-space: normal; }

}
@media (max-width: 360px) {
  .feature-tabs button { font-size: 11px; }
  .pressure-orbit { padding-inline: 18px; }
  .pressure-apps { gap: 48px; }
  .pressure-emotion { width: 44px; height: 44px; }
  .pressure-emotion img { width: 30px; height: 30px; }
}

/* The motion control remains reachable on small screens and at 200% zoom. */
.site-footer { flex-wrap: wrap; }
.site-footer .motion-toggle { font-family: inherit; cursor: pointer; max-width: 100%; }
@media (max-width: 760px) {
  .site-footer .motion-toggle { order: 4; border-color: var(--border-decorative); }
}