/* Marketing-page responsive overrides. Loaded only by public/index.html
   (sandbox uses src/styles/responsive.css). Linked last so equal-specificity
   rules win. */


@media (max-width: 760px){
  /* Pull the hero up under the transparent header. Uses `--header-h` (set by
     headerScroll.js from the live header height) so the two stay coupled.
     Fallback covers the brief moment before JS runs. */
  .hero{
    margin-top:calc(var(--header-h, 88px) * -1);
    padding-top:calc(var(--header-h, 88px) + 40px);
  }
}


/* Featured spotlight CTA — center "Learn more" on stacked mobile layouts. */
@media (max-width: 760px){
  .featured-spotlight__cta{
    justify-content:center;
    align-items:center;
  }
}


/* Back-to-top — keep clear of safe areas and the button's drop shadow. */
@media (max-width: 760px){
  .back-to-top{
    right:max(28px, env(safe-area-inset-right, 0px) + 20px);
    bottom:max(20px, env(safe-area-inset-bottom, 0px) + 16px);
  }
}


/* Sandbox button — index.css hides it at ≤760px. Bring it back between
   761 and 1100px as an icon-only button (text kept in DOM for screen
   readers via font-size:0). Below 761px the Sandbox + Request Demo CTAs
   live inside the hamburger drawer instead. */
@media (max-width: 1100px) and (min-width: 761px){
  .header-cta .btn-ghost{
    display:inline-flex;
    font-size:0;
    gap:0;
    padding:0;
    width:42px;height:42px;
    align-items:center;justify-content:center;
  }
  .header-cta .btn-ghost i{font-size:18px;}
}

@media (max-width: 760px){
  /* CTAs move into the drawer — hide the header-bar copies. */
  .header-cta .btn-ghost,
  .header-cta .btn-primary{display:none;}
  /* Show the hamburger toggle + paint the drawer/backdrop (index.css sets
     them to display:none by default so they can't leak onto desktop). */
  .nav-toggle{display:inline-flex;}
  .mobile-menu{display:block;}
  .mobile-menu-backdrop{display:block;}
}


/* Header collision fixes — tighten gaps/padding progressively as the nav,
   brand, and CTAs compete for space between 760 and 1200px. */
@media (max-width: 1200px){
  .header-inner{gap:16px;}
  .nav{gap:4px;}
  .nav a{padding:8px 12px;}
}

@media (max-width: 1100px){
  .brand-text{display:none;}
  .header-cta .btn-primary{padding:10px 14px;font-size:13.5px;}
}

@media (max-width: 900px){
  .nav a{padding:6px 10px;font-size:13px;}
  .header-inner{gap:10px;}
}