/* Mobile camera composition. Desktop remains on the original stylesheet. */
@media (max-width: 700px) {
  .journey-header { height: 72px; padding-inline: 20px; }
  .journey-header .mobile-menu { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin-right: -10px; }
  .journey-header nav { top: 66px; left: 20px; right: 20px; z-index: 45; padding: 14px 22px; box-shadow: 0 24px 64px #000d; }
  .journey-header nav a { display: flex; align-items: center; min-height: 48px; font-size: 15px; }

  /* Preserve the angled hero plane, but give the island its own mobile crop. */
  .frame-fit { top: 9%; }
  .native-island { left: 390px; transform: scale(2.55); }
  .island-content strong { font-size: 14px; }
  .scene-copy, .motion-scene .scene-copy { left: 24px; right: 24px; bottom: clamp(140px, 19svh, 172px); }
  .scene-copy.hero-copy { bottom: clamp(144px, 19svh, 176px); }
  .scene-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.65; }
  .scene-copy .chapter-subline { display: block; font-size: 11px; color: #a8a8a3; margin-top: 10px; }
  .hero-copy > p:not(.eyebrow) { font-size: 14px; text-wrap: balance; }
  .button { font-size: 13px; }
  .subtle-action { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .compat { font-size: 10px; }

  /* One quiet baseline instead of six tiny rules. The camera selects the label. */
  .stage-controls { left: 20px; right: 20px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .chapter-rail { position: relative; width: 100%; gap: 6px; overflow-x: auto; overflow-y: hidden; border-top: 1px solid #343431; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; }
  .chapter-rail::-webkit-scrollbar { display: none; }
  .chapter-rail a { flex: 0 0 auto; min-width: 92px; min-height: 44px; padding: 9px 8px 6px 0; border-top: 0; display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; line-height: 1.25; scroll-snap-align: center; }
  .chapter-rail a::before { top: auto; bottom: 0; height: 2px; }
  .chapter-rail small { font-size: 10px; }
  .chapter-rail a:nth-child(4) span { font-size: 12px; }
  .stage-tools { margin-top: 3px; align-items: center; }
  .stage-tools button { min-height: 44px; font-size: 11px; }
  #next-shot { min-height: 44px; font-size: 11px; gap: 10px; }
  .quiet-footer { font-size: 11px; }

  @scope (.content-chapter) {
    .shadow-sequence { height: calc(max(100svh, 700px) + 80svh); }
    .shadow-stage { height: max(100svh, 700px); min-height: 0; }
    .shadow-intro, .comparison-heading { top: clamp(98px, 13svh, 120px); }
    .shadow-intro h1 { font-size: clamp(33px, 10vw, 42px); }
    .comparison-heading h2 { text-wrap: balance; }
    .subline { font-size: 14px; line-height: 1.6; }
    .shadow-figure { top: clamp(252px, 34svh, 294px); }
    .shadow-figure figcaption { font-size: 11px; }
    .light-fragment { bottom: 120px; width: min(56vw, 225px); }
    .feature-chapters { left: 24px; right: 24px; bottom: 56px; flex-direction: row; gap: 5px; font-size: clamp(10px, 2.8vw, 12px); }
    .feature-chapters a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
    .feature-chapters a:last-child { display: none; }
    .comparison-options { left: 24px; right: 24px; bottom: 24px; display: grid; justify-content: start; gap: 3px; }
    .comparison-options fieldset { gap: clamp(13px, 4vw, 28px); }
    .comparison-options legend { min-width: 55px; margin-right: 12px; font-size: 11px; }
    .comparison-options button { min-height: 44px; font-size: 12px; }
    .comparison-options .micro { display: none; }

    .guide-stage { height: max(100svh, 700px); min-height: 0; }
    .guide-heading { top: clamp(98px, 14svh, 124px); }
    .guide-heading h1 { font-size: clamp(26px, 7.3vw, 32px); }
    .os-switch { top: clamp(205px, 27svh, 240px); gap: 40px; }
    .os-switch button { min-height: 44px; font-size: 13px; }
    .menu-breadcrumb { top: clamp(278px, 35svh, 320px); font-size: 11px; }
    .menu-perspective { top: clamp(318px, 44svh, 378px); }
    .guide-bottom { left: 24px; right: 24px; bottom: max(20px, env(safe-area-inset-bottom)); gap: 12px; }
    .guide-steps { width: 100%; gap: 16px; overflow-x: auto; scrollbar-width: none; }
    .guide-steps::-webkit-scrollbar { display: none; }
    .guide-steps button { flex: 0 0 auto; min-height: 44px; font-size: 12px; }
    .guide-steps small { font-size: 10px; }
    #guide-instruction { font-size: 13px; line-height: 1.6; }
    .menu-disclaimer { bottom: 146px; font-size: 10px; }

    .versions-heading { padding-top: 116px; }
    .updates { margin-top: 48px; }
    .update-copy .update-name { font-size: clamp(30px, 8.5vw, 42px); }
    .update-copy h3 { font-size: clamp(19px, 6.8vw, 23px); text-wrap: balance; }
    .version-notes { font-size: 13px; line-height: 1.7; }

    .acquisition { min-height: 100svh; padding: clamp(110px, 13svh, 140px) 24px 116px; gap: clamp(24px, 5svh, 44px); }
    .acquisition-brand img { width: 42px; height: 42px; margin-bottom: 16px; }
    .acquisition-brand > p { font-size: 15px; }
    .acquisition-action h2 { margin-bottom: 20px; }
    .acquisition-action .light-button { min-height: 60px; }
    .compatibility { bottom: 64px; }
    .acquisition-note { bottom: 16px; font-size: 11px; }
  }
}

@media (max-width: 700px) and (max-height: 680px) {
  .scene-copy, .scene-copy.hero-copy, .motion-scene .scene-copy { bottom: 124px; }
  .scene-copy h1, .scene-copy h2 { font-size: 35px; }
  .scene-copy .chapter-subline { display: none; }
}

@media (max-width: 360px) {
  @scope (.content-chapter) {
    .light-fragment { width: 44vw; bottom: 113px; }
  }
}