/* HOODBTC final mobile refinement layer.
   Loaded last so iPhone/Safari gets stable touch scrolling, safe-area spacing,
   lighter hero compositing and predictable CTA behavior without changing desktop. */

@media (max-width:700px){
  html{
    scroll-padding-top:84px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overscroll-behavior-x:none;
  }

  body{
    min-width:0;
    -webkit-text-size-adjust:100%;
    overflow-x:clip!important;
    overscroll-behavior-x:none;
    touch-action:pan-y pinch-zoom;
  }

  a,button,summary{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }

  img{
    -webkit-user-drag:none;
  }

  /* Respect notches / landscape safe areas instead of forcing fixed 14px margins. */
  .hoodbtcPolished .shell,
  .hoodbtcPolished .heroFocus{
    width:auto!important;
    max-width:none!important;
    margin-left:max(14px,env(safe-area-inset-left))!important;
    margin-right:max(14px,env(safe-area-inset-right))!important;
  }

  /* Native-feeling mobile navigation. */
  .hoodbtcPolished .menu-btn{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    padding:0!important;
    display:grid!important;
    place-items:center;
    border:1px solid rgba(76,243,122,.12)!important;
    border-radius:14px;
    background:rgba(76,243,122,.035)!important;
    color:#f4f7f5!important;
    line-height:1!important;
  }

  .hoodbtcPolished .mobilePanel{
    position:fixed!important;
    top:72px!important;
    left:0!important;
    right:0!important;
    max-height:calc(100dvh - 72px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:10px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))!important;
    background:rgba(4,8,5,.985)!important;
    box-shadow:0 18px 40px rgba(0,0,0,.34)!important;
  }

  .hoodbtcPolished .mobilePanel a{
    min-height:50px;
    padding:0 4px!important;
    display:flex;
    align-items:center;
    font-size:14px;
  }

  /* The hero is decorative: never let it compete with finger scrolling. */
  .hoodbtcPolished .heroFocus{
    overflow:clip;
    touch-action:pan-y pinch-zoom;
  }

  .imageHeroV3,
  .imageHeroV3 *{
    pointer-events:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;
  }

  .imageHeroV3 .heroHCoreRotor,
  .imageHeroV3 .chainOrbit,
  .imageHeroV3 .rr1,
  .imageHeroV3 .rr2,
  .imageHeroV3 .br1{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  /* JS pauses hero motion offscreen and for the full duration of touch/momentum scrolling. */
  .imageHeroV3.heroMotionPaused .heroHCoreRotor,
  .imageHeroV3.heroMotionPaused .chainOrbit,
  .imageHeroV3.heroMotionPaused .rr1,
  .imageHeroV3.heroMotionPaused .rr2,
  .imageHeroV3.heroMotionPaused .br1{
    animation-play-state:paused!important;
  }

  /* Fixed CTA is class-driven by IntersectionObserver. No transform animation while scrolling. */
  .hoodbtcPolished .mobileCta,
  .hoodbtcPolished .ecosystemMobileCta{
    display:grid!important;
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    bottom:max(10px,env(safe-area-inset-bottom))!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none!important;
    transform:none!important;
    transition:opacity .14s linear,visibility 0s linear .14s!important;
    contain:none!important;
  }

  .hoodbtcPolished .mobileCta.isVisible,
  .hoodbtcPolished .ecosystemMobileCta.isVisible{
    opacity:1;
    visibility:visible;
    pointer-events:auto!important;
    transition-delay:0s!important;
  }

  .hoodbtcPolished .mobileCta.isVisible a,
  .hoodbtcPolished .ecosystemMobileCta.isVisible a{
    pointer-events:auto!important;
  }

  .hoodTouchActive .hoodbtcPolished .mobileCta,
  .hoodTouchActive .hoodbtcPolished .ecosystemMobileCta{
    transition:none!important;
  }

  .hoodbtcPolished .mobileCta a,
  .hoodbtcPolished .ecosystemMobileCta a,
  .hoodbtcPolished .heroActions>a,
  .hoodbtcPolished .productButton,
  .hoodbtcPolished .finalActions>a{
    min-height:52px;
  }

  /* Small tactile response only after a real tap; no hover lift on touch screens. */
  .hoodbtcPolished .menu-btn:active,
  .hoodbtcPolished .heroActions>a:active,
  .hoodbtcPolished .productButton:active,
  .hoodbtcPolished .finalActions>a:active,
  .hoodbtcPolished .mobileCta a:active{
    opacity:.9;
  }

  .hoodbtcPolished .faqList summary{
    min-height:58px;
    display:flex;
    align-items:center;
  }

  /* Subtle mobile-only finishing touches. */
  .hoodbtcPolished .productPanel{
    border-radius:18px;
  }

  .hoodbtcPolished .productFeatures span{
    border-radius:10px;
  }

  .hoodbtcPolished .ecosystemBridge,
  .hoodbtcPolished .connectCard,
  .hoodbtcPolished .ecosystemFinal{
    border-radius:16px;
  }

  .hoodbtcPolished .heroCenter h1,
  .hoodbtcPolished .sectionHead h2,
  .hoodbtcPolished .productPanel h3,
  .hoodbtcPolished .final h2{
    text-wrap:balance;
  }

  .hoodbtcPolished .heroLead,
  .hoodbtcPolished .sectionHead p,
  .hoodbtcPolished .productLead,
  .hoodbtcPolished .connectSteps p{
    text-wrap:pretty;
  }

  .hoodbtcPolished footer{
    padding-bottom:calc(100px + env(safe-area-inset-bottom))!important;
  }

  :focus-visible{
    outline:2px solid var(--green)!important;
    outline-offset:3px!important;
  }
}

@media (max-width:390px){
  .hoodbtcPolished .heroCenter h1{
    font-size:42px!important;
    letter-spacing:-3px!important;
  }

  .hoodbtcPolished .mobileCta a,
  .hoodbtcPolished .ecosystemMobileCta a{
    font-size:11px!important;
    padding-inline:8px!important;
  }
}

@media (hover:none) and (pointer:coarse){
  .hoodbtcPolished .productPanel:hover,
  .hoodbtcPolished .heroActions>a:hover,
  .hoodbtcPolished .productButton:hover,
  .problemGrid article:hover{
    transform:none!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .hoodbtcPolished .mobileCta,
  .hoodbtcPolished .ecosystemMobileCta{
    transition:none!important;
  }
}