/* v2.24 mobile tabs (Claude Code, 2026-10-27, Kyle picked option A "like the website").
   Phones only (<=760px): the page tabs show as a plain row under the logo instead of the hamburger,
   with the cyan underline on the page you're on, same as desktop.
   Phone + "Start a project" stay in the bottom Call/Text/Message bar. Desktop and tablet are untouched.
   Linked last on every page. Tab text scales with screen width so all 5 fit from 320px phones up. */
@media(max-width:760px){
 .topbar{flex-wrap:wrap!important;row-gap:0!important;padding-bottom:0!important;background:rgba(5,9,26,.92)!important}
 .topbar .menu-toggle{display:none!important}
 .topbar .main-nav{display:flex!important;position:static!important;inset:auto!important;flex:0 0 calc(100% + 36px)!important;width:calc(100% + 36px)!important;max-height:none!important;margin:8px -18px 0!important;padding:0 10px!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;background:transparent!important;border:0!important;border-top:1px solid rgba(98,135,255,.15)!important;box-shadow:none!important;transform:none!important;opacity:1!important;visibility:visible!important}
 .topbar .main-nav::-webkit-scrollbar{display:none}
 .topbar .main-nav .nav-phone,.topbar .main-nav .nav-cta{display:none!important}
 .topbar .main-nav>a{flex:0 0 auto;font-size:clamp(10px,3.2vw,14px)!important;font-weight:700!important;line-height:1.2!important;letter-spacing:0!important;padding:11px 4px 10px!important;border:0!important;background:none!important;color:#d4dcf5!important;white-space:nowrap;box-shadow:none!important}
 .topbar .main-nav>a:active{color:#fff!important}
 .topbar .main-nav>a[aria-current="page"]{color:#fff!important;box-shadow:inset 0 -2px #0de2ff!important}
 /* the bar is taller by the tab row: push the page down the same amount */
 main{margin-top:26px}
 html{scroll-padding-top:116px!important}
}
/* Tablets / small laptops (761-999px; .02/.98 edges so fractional zoom widths never fall in a gap): same tab row under the logo instead of the hamburger.
   No bottom Call/Text bar at these widths, so the phone number and "Start a project" stay at the end of the row. */
@media(min-width:760.02px) and (max-width:999.98px){
 .topbar{flex-wrap:wrap!important;row-gap:0!important;padding-bottom:0!important;background:rgba(5,9,26,.92)!important}
 .topbar .menu-toggle{display:none!important}
 .topbar .main-nav{display:flex!important;position:static!important;inset:auto!important;flex:0 0 calc(100% + 36px)!important;width:calc(100% + 36px)!important;max-height:none!important;margin:8px -18px 0!important;padding:6px 18px!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;background:transparent!important;border:0!important;border-top:1px solid rgba(98,135,255,.15)!important;box-shadow:none!important;transform:none!important;opacity:1!important;visibility:visible!important}
 .topbar .main-nav>a{white-space:nowrap!important;font-size:14px!important;border:0!important;margin:0!important}
 .topbar .main-nav>a:not(.nav-cta){padding:8px 2px!important;background:none!important}
 .topbar .main-nav>a[aria-current="page"]{color:#fff!important;box-shadow:inset 0 -2px #0de2ff!important}
 .topbar .main-nav .nav-cta{padding:8px 14px!important;font-size:13px!important}
 main{margin-top:42px}
 html{scroll-padding-top:140px!important}
}
/* Laptops (1000-1179px): the one-row desktop bar stays, but tabs no longer wrap onto two lines
   and "Start here" no longer touches MAINFRONT.AI. */
@media(min-width:999.99px){
 .topbar .main-nav{margin-left:24px!important}
 .topbar .main-nav>a{white-space:nowrap!important}
}
@media(min-width:999.99px) and (max-width:1199.98px){
 .topbar .main-nav{gap:14px!important}
 .topbar .main-nav>a:not(.nav-cta){font-size:13px!important}
}
@media(min-width:1199.99px) and (max-width:1299.98px){
 .topbar .main-nav{gap:16px!important}
 .topbar .main-nav>a:not(.nav-cta){font-size:14px!important}
}