/* Cocoon V220 — final public-site mobile consistency pass.
   Purpose: consistent mobile gutters, readable wrapping, and removal of the
   persistent waitlist chip on small screens. Story scene design is untouched. */

:root{--cocoon-mobile-gutter:18px}

@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}

  /* Mobile already has waitlist routes in the menu, page CTAs and the timed modal.
     Removing the fixed chip prevents it competing with story controls/content. */
  .cw-trigger{display:none!important}

  /* One consistent mobile content gutter across the page families that evolved
     independently during the build. */
  :where(
    .ac-shell,.attention-shell,.availability-shell,.call-shell,.ct-shell,
    .faq-shell,.features-shell,.gc-shell,.handle-shell,.holding-shell,.how-shell,
    .incoming-shell,.learn-shell,.mc208-shell,.par-shell,.pc-shell,.permission-shell,
    .pp-shell,.pricing-shell,.relationship-shell,.sc-shell,.usecases-shell,.wl212-shell
  ){
    width:auto!important;
    max-width:none!important;
    margin-left:var(--cocoon-mobile-gutter)!important;
    margin-right:var(--cocoon-mobile-gutter)!important;
  }

  /* The connected-channel section was the one homepage full-bleed section whose
     inner wrap had no phone gutter. */
  #connected-channels{
    padding-left:var(--cocoon-mobile-gutter)!important;
    padding-right:var(--cocoon-mobile-gutter)!important;
  }
  #connected-channels>.v144-wrap{
    width:100%!important;
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Guard against long headings, labels and CTA copy touching or escaping the edge. */
  .standard-page main :where(h1,h2,h3,h4,p,li,summary,label,a,button),
  #main>.v144-section :where(h2,h3,p,a,button),
  #connected-channels :where(h2,h3,p,a,button){
    overflow-wrap:break-word;
    word-break:normal;
  }
  .standard-page main :where(img,video){max-width:100%;height:auto}
  .standard-page main :where(a,button){max-width:100%}

  /* Keep mobile explore / related modules on the same visual grid. */
  .standard-page .cocoon-explore{
    padding-left:0!important;
    padding-right:0!important;
    margin-left:var(--cocoon-mobile-gutter)!important;
    margin-right:var(--cocoon-mobile-gutter)!important;
    width:auto!important;
  }

  /* Mobile story controls should only exist while the story itself occupies the
     viewport. This prevents the dock sitting over normal homepage CTAs after a user
     scrolls away from the story. */
  body.story-authorised:not(.story-frame-in-view) .mobile-story-dock{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.story-authorised.story-frame-in-view .mobile-story-dock{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}

@media (max-width:360px){
  :root{--cocoon-mobile-gutter:16px}
}

/* Cocoon V220 — mobile waitlist modal safety repair.
   The mobile navigation header intentionally uses an extreme z-index. The waitlist
   dialog must sit above it, and its close control must remain viewport-accessible
   even while the modal content scrolls. */
.cw-modal{
  z-index:2147483600!important;
}
.cw-modal .cw-backdrop{
  z-index:0!important;
}
.cw-modal .cw-card{
  position:relative!important;
  z-index:1!important;
}
.cw-modal .cw-close{
  z-index:2147483646!important;
}
body.cw-modal-open .site-header{
  pointer-events:none!important;
}

@media (max-width:760px){
  .cw-modal{
    place-items:start center!important;
    padding:calc(env(safe-area-inset-top,0px) + 8px) 8px calc(env(safe-area-inset-bottom,0px) + 8px)!important;
    overflow:hidden!important;
  }
  .cw-modal .cw-card{
    width:100%!important;
    max-width:520px!important;
    max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px)!important;
    border-radius:24px!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .cw-modal .cw-close{
    position:fixed!important;
    top:calc(env(safe-area-inset-top,0px) + 12px)!important;
    right:12px!important;
    width:44px!important;
    height:44px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.30)!important;
    border-radius:50%!important;
    background:rgba(15,5,23,.94)!important;
    color:#fff!important;
    box-shadow:0 10px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
    font:300 28px/1 Arial,sans-serif!important;
    cursor:pointer!important;
    pointer-events:auto!important;
  }
  .cw-modal .cw-copy{
    padding-top:58px!important;
  }
}