/* ==========================================================================
   Mobile navigation — hamburger menu + sticky join bar
   Loaded after each page's inline <style>, so it can refine existing rules.
   Colours/fonts come from the site's existing custom properties.
   ========================================================================== */

/* --- Header ---------------------------------------------------------------
   .navw is already position:fixed with a .sc scrolled state. We only lift it
   above the menu so the close button stays tappable, and force the solid
   background while the menu is open (hero pages start transparent). */
.navw{z-index:110}
body.menu-open .navw{
  background:rgba(11,12,18,0.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-color:var(--border);
}

/* --- Hamburger ----------------------------------------------------------- */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  margin-left:auto;          /* keeps it beside the CTA, not mid-header */
  padding:0;
  background:none;
  border:0;
  border-radius:10px;
  cursor:pointer;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nav-toggle svg{width:24px;height:24px;display:block;margin:auto}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-burger{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

/* --- Full-screen menu ----------------------------------------------------- */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:105;               /* under .navw (110), over the consent banner (100) */
  display:flex;
  flex-direction:column;
  padding:calc(78px + env(safe-area-inset-top,0px)) 22px calc(22px + env(safe-area-inset-bottom,0px));
  background:var(--bg);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.mobile-menu.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .2s ease,transform .2s ease;
}
.mobile-menu__list{list-style:none;margin:0;padding:0;flex:1}
.mobile-menu__list li + li{border-top:1px solid var(--border)}
.mobile-menu__list a{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:16px 2px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:21px;
  font-weight:600;
  line-height:1.25;
  color:var(--text);
  text-decoration:none;
}
.mobile-menu__list a span{font-size:13.5px;font-weight:400;color:var(--body);letter-spacing:0}
.mobile-menu__list a:active{color:var(--blue)}
.mobile-menu__list a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}

.mobile-menu__cta{
  display:block;
  margin-top:22px;
  padding:17px;
  background:var(--blue);
  color:#fff;
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  border-radius:12px;
}
.mobile-menu__proof{
  margin:14px 0 0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px;
  line-height:1.5;
  color:var(--body);
  text-align:center;
}
.mobile-menu__proof strong{color:var(--gold);font-weight:600}

/* keep the menu readable on tablets rather than stretching edge to edge */
@media(min-width:600px){
  .mobile-menu__list,.mobile-menu__cta,.mobile-menu__proof{
    width:100%;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
  .mobile-menu__list a{font-size:23px}
}

body.menu-open{overflow:hidden}
/* the cookie banner is fixed at z-index 100 — keep it off the menu's CTA */
body.menu-open .cc-cb{display:none}

/* --- Sticky join bar ------------------------------------------------------
   Reuses the site's existing .sticky-cta element, restyled from a single
   full-width button into a text + button bar. */
.sticky-cta{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:70;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom,0px));
  background:rgba(11,12,18,0.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  transform:translateY(110%);
  transition:transform .3s ease-out;
}
.sticky-cta.show{transform:none}
.sticky-cta__text{
  font-family:'Inter',system-ui,sans-serif;
  font-size:12.5px;
  line-height:1.35;
  color:var(--body);
}
.sticky-cta__text strong{display:block;font-size:15px;color:var(--text);font-weight:600}
.sticky-cta .btn{width:auto;flex:none;white-space:nowrap;padding:13px 20px;font-size:15px;border-radius:11px}

/* --- Mobile breakpoint ----------------------------------------------------
   900px matches the brief and normalises the site (some pages hid .nav-links
   at 840px, others at 900px). */
@media(max-width:900px){
  /* anchors land below the fixed header rather than under it */
  html{scroll-padding-top:86px}
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .sticky-cta{display:flex}
  .navw .nav{gap:10px}
  /* several pages use a full-size .btn in the header — trim it so the
     lockup, hamburger and CTA fit on a 375px screen, and never let the
     label wrap onto a second line */
  .navw .nav > .btn{padding:10px 16px;font-size:14px;border-radius:10px;white-space:nowrap;flex:none}
  .navw .lockup{min-width:0}
  .navw .endorse{white-space:nowrap}
}
@media(max-width:400px){
  .navw .nav{padding-left:16px;padding-right:16px;gap:8px}
  .navw .nav > .btn{padding:10px 13px;font-size:13.5px}
  .navw .lockup{gap:8px}
  .navw .lockup .mark{width:27px;height:27px}
  .navw .wordmark{font-size:15px}
  .navw .endorse{font-size:9px;letter-spacing:0.05em}
  .mobile-menu{padding-left:16px;padding-right:16px}
}

/* --- Polish: gold eyebrow pill stays on one line -------------------------- */
@media(max-width:600px){
  .cg-eyebrow{
    font-size:11px;
    letter-spacing:0.06em;
    padding:7px 14px;
    gap:7px;
    white-space:nowrap;
    max-width:100%;
  }
  .cg-eyebrow .mono{width:16px !important;height:17px !important}
}
@media(max-width:360px){
  .cg-eyebrow{font-size:10px;letter-spacing:0.04em;padding:6px 12px}
}

/* --- Polish: hero proof row stacks cleanly -------------------------------- */
@media(max-width:600px){
  .proof-row{
    flex-direction:column;
    align-items:center;
    gap:8px;
    text-align:center;
  }
  .proof-row .dot{display:none}
  .proof-row .stars{order:-1}
}

@media(prefers-reduced-motion:reduce){
  .mobile-menu,.sticky-cta{transition:none}
}