/* Responsive enhancements for mobile and tablet */
/* Mobile menu toggle button */
.menu-toggle{display:none}
@media (max-width:900px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#0f1630;color:#eaf1ff}
  .menu-toggle .bar{width:18px;height:2px;background:currentColor;display:block;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor;border-radius:2px}
  .brand{flex:1}
}

/* Primary nav transforms into full-screen panel on mobile */
@media (max-width:900px){
  header.site-header nav{display:none;position:fixed;inset:0;background:rgba(11,16,32,.98);padding:80px 16px 24px 16px;overflow:auto;z-index:70}
  header.site-header nav[data-open]{display:block}
  header.site-header nav ul{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
  header.site-header nav a{display:block;width:100%;padding:12px 14px;border-radius:10px}
}

/* Hero & spacing tweaks */
@media (max-width:900px){
  .hero .cta-row{gap:10px}
}
@media (max-width:600px){
  .hero h1{font-size:1.6rem}
  .hero img{max-width:520px;margin-inline:auto}
  .grid{gap:10px}
  .card{padding:14px}
}

/* Safer container padding on small screens */
@media (max-width:600px){
  .container{padding:16px}
}

/* Ensure brand text doesn’t overflow on narrow iPhones */
@media (max-width:480px){
  .brand{min-width:0}
  .brand strong{display:inline-block;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Sticky CTA: avoid iPhone home indicator overlap & reserve space */
@media (max-width:768px){
  .sticky-cta{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  body{padding-bottom:72px}
}

/* Make tables scrollable on small viewports */
@media (max-width:600px){
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table table{min-width:560px}
}

/* Improve tap targets on mobile */
@media (max-width:600px){
  .btn{min-height:44px}
  nav a{padding:12px 14px}
}