/* Shared site header / nav — identical on every page (mirrors the homepage header).
   Self-contained: .nav-in carries its own max-width/padding so it does NOT depend on a
   page's .wrap (content pages use a narrower .wrap). Load this LAST so it wins over any
   older inline nav rules. */
/* iOS rubber-band: the canvas behind the page shows on overscroll (iPad pull-down showed a
   cream bar above the blue header). Two layers of defense: the html canvas matches the header,
   AND a fixed painter parked one screen above the viewport covers the revealed gap directly
   (iPadOS does not reliably use the html background for the overscroll area). */
html{background:#2f6fd6}
body::before{content:"";position:fixed;left:0;right:0;top:-100vh;height:100vh;background:#2f6fd6;z-index:-1;pointer-events:none}
/* Lock the page to vertical scrolling: content wider than the viewport (long translations etc.)
   must never let a phone pan sideways. clip is stricter than hidden on iOS; the hidden line is
   the fallback for older browsers. body (not html) so the sticky nav is unaffected. */
body{overflow-x:hidden;overflow-x:clip}
nav{position:sticky;top:0;z-index:60;background:#2f6fd6;border-bottom:3px solid rgba(255,255,255,.22);transition:box-shadow .25s}
nav.scrolled{box-shadow:0 10px 26px -14px rgba(8,20,60,.65)}
.nav-in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:26px;height:68px}
.logo{display:flex;align-items:center;text-decoration:none}
.nav-links{display:flex;gap:22px;margin-left:8px}
.nav-links a{position:relative;font-family:"Baloo 2";font-weight:700;font-size:16px;color:rgba(255,255,255,.92);text-decoration:none;transition:.15s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2.5px;border-radius:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{margin-left:auto}
.btn-md{padding:11px 18px;font-size:15px}
@media (max-width:980px){.nav-links{display:none}}
@media (max-width:560px){.nav-in{padding:0 18px}}
/* phones: shrink the logo + button so the logo and "Start a timer" never overflow the bar —
   480 covers Pro-Max-class phones (430px), where the full-size nav overflowed even in English */
@media (max-width:480px){
  .nav-in{padding:0 14px;gap:10px;height:62px}
  .logo img{height:44px!important}
  .nav-cta .btn-md{padding:9px 13px;font-size:14px}
}
/* phones: long translated button labels wrap instead of pushing the page wide;
   the nav CTA keeps nowrap (its label is kept short per language in the catalogs) */
@media (max-width:600px){
  .btn{white-space:normal}
  .nav-cta .btn{white-space:nowrap}
}