/* ============================================================
   12.8.7 — MOBILE QA / MOTION CALIBRATION
   Final mobile-only overrides after a full section-by-section audit.
   Desktop is intentionally untouched.
   ============================================================ */
@media (max-width:680px){
  /* Gallery -> RSVP: remove the residual 46px dark tail left by the legacy
     mobile gallery padding so the ivory handoff is physically continuous. */
  .gallery-stage{padding-bottom:0!important}

  /* RSVP lives under the fixed navigation on mobile. The page-level M&Y mark
     already identifies the invitation, so remove the redundant paper monogram
     and place the RSVP chapter marker safely below the nav. */
  .rsvp-monogram{display:none!important}
  .rsvp-paper-accent{top:78px!important;left:22px!important;right:auto!important;max-width:70vw!important}
  .rsvp-section.has-answer .rsvp-paper-accent{display:none!important}
  .rsvp-step-choice{padding-top:44px!important}

  /* Touch devices should never retain the desktop hover fill after a tap. */
  .rsvp-choice:hover{background:transparent!important;color:#403a34!important;border-color:rgba(65,57,48,.2)!important}
  .rsvp-choice:hover::before{transform:translate3d(-102%,0,0)!important}
  .rsvp-choice:hover b{transform:none!important}
  .rsvp-choice:active{transform:scale(.988)!important;background:rgba(39,35,31,.055)!important}

  /* The global chapter indicator already displays 06 / WITH LOVE. Keeping the
     local index produced a visible duplicate in the lower-left corner. */
  .finale-side-index{display:none!important}

  /* Preserve the gold sweep but avoid rasterising a huge blurred layer on every
     scroll frame. The gradient itself provides the softness on phone screens. */
  .finale-gold-sweep{filter:none!important}

  /* Let the actual webXCode panel begin underneath the final ivory statement.
     This is the same overlap language used by the other section handoffs. */
  #creatorCredits.creator-webx{
    margin-top:-16svh!important;
    min-height:100svh!important;
    padding-top:max(88px,calc(env(safe-area-inset-top) + 76px))!important;
  }

  /* Mobile webXCode entrance: motion/masking only, no blur transition. */
  #creatorCredits.wx-armed:not(.wx-in) .webx-brand-lockup{filter:none!important}
  #creatorCredits .creator-red-glow{filter:blur(11px)!important}
  #creatorCredits.wx-settled .creator-x-outline,
  #creatorCredits.wx-settled .creator-red-glow{animation:none!important}
  #creatorCredits.wx-settled .creator-entry-edge,
  #creatorCredits.wx-settled .creator-topline,
  #creatorCredits.wx-settled .webx-brand-lockup,
  #creatorCredits.wx-settled .creator-eyebrow,
  #creatorCredits.wx-settled .creator-message h2 span,
  #creatorCredits.wx-settled .creator-message h2 em,
  #creatorCredits.wx-settled .creator-message p,
  #creatorCredits.wx-settled .creator-primary,
  #creatorCredits.wx-settled .creator-secondary,
  #creatorCredits.wx-settled .creator-bottomline{will-change:auto!important}
}

/* Smaller phones get slightly more breathing room beneath the fixed nav, while
   keeping the exact same motion windows. */
@media (max-width:360px){
  .rsvp-paper-accent{top:74px!important}
  .rsvp-step-choice{padding-top:40px!important}
  #creatorCredits.creator-webx{margin-top:-14svh!important}
}

@media (max-width:680px){
  /* RSVP -> closing: bring the first closing statement slightly higher in the
     viewport so it is already visible while the RSVP paper is completing its
     exit. The other two beats keep their established desktop-derived centring. */
  .finale-opening-copy{top:45%!important}
}