/* =========================================================
   C.A.R.E.S. marketing site: tablet + phone layer (21 Oct 2026).
   Linked LAST on every marketing page, after the page's own
   styles, so its rules win the cascade. Laptop widths (above
   1100px) are left exactly as they were; everything below is
   scoped to the widths where the header hides its links.
   ========================================================= */

/* ---- the menu button and panel ---- */
.site-burger{display:none}
.site-menu{display:none}
.site-menu[hidden]{display:none !important}
@media (max-width:1100px){
  nav#nav, body > nav{
    background:rgba(255,255,255,.94) !important;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 1px 0 rgba(30,27,46,.06) !important;
    padding:10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)) !important;
    padding-top:calc(10px + env(safe-area-inset-top)) !important;
    gap:10px;
  }
  /* one breakpoint for every marketing page: the header's link list hides here and the menu button takes over */
  nav#nav .nav-links, body > nav .nav-links{display:none !important}
  nav#nav .nav-r, body > nav .nav-r{margin-left:auto}
  nav#nav .nav-r .btn, body > nav .nav-r .btn{min-height:44px;padding:10px 18px;white-space:nowrap}
  .site-burger{
    display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:48px;height:48px;flex:0 0 48px;margin:0;padding:0;border:0;border-radius:14px;
    background:#F1EEFB;color:#1E1B2E;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .site-burger:focus-visible{outline:3px solid #7C6CE0;outline-offset:2px}
  .site-burger-bar{display:block;width:22px;height:2.5px;border-radius:2px;background:#2b2846;transition:transform .2s ease,opacity .2s ease}
  .site-burger.is-open .site-burger-bar:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .site-burger.is-open .site-burger-bar:nth-child(2){opacity:0}
  .site-burger.is-open .site-burger-bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  .site-menu{
    display:block;position:fixed;left:0;right:0;bottom:0;top:72px;z-index:99;
    background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:12px max(20px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    box-shadow:0 -1px 0 rgba(30,27,46,.06) inset;
  }
  .site-menu-links{display:flex;flex-direction:column}
  .site-menu-link{
    display:flex;align-items:center;min-height:56px;padding:4px 6px;
    font-size:18px;font-weight:600;color:#1E1B2E;text-decoration:none;
    border-bottom:1px solid #ECE9F6;
  }
  .site-menu-link.active{color:#6d4ef0}
  .site-menu-link:focus-visible,.site-menu-login:focus-visible{outline:3px solid #7C6CE0;outline-offset:2px;border-radius:10px}
  .site-menu-link::after{content:none !important}
  .site-menu-login{display:flex !important;justify-content:center;margin-top:20px;min-height:52px;font-size:17px}
  body.site-menu-open{overflow:hidden}
}
@media (max-width:420px){
  /* the lockup, Log In and the menu button must share 360px */
  nav#nav, body > nav{gap:6px;padding-left:max(12px, env(safe-area-inset-left)) !important;padding-right:max(12px, env(safe-area-inset-right)) !important}
  nav#nav .logo, body > nav .logo{gap:8px;padding:4px 8px 4px 4px}
  nav#nav .logo-mk, body > nav .logo-mk{width:32px !important;height:32px !important}
  nav#nav .logo-mk img, body > nav .logo-mk img{width:32px !important;height:32px !important}
  nav#nav .logo-wm, body > nav .logo-wm{font-size:1rem !important;letter-spacing:.02em}
  nav#nav .nav-r .btn, body > nav .nav-r .btn{padding:8px 12px;font-size:.95rem}
  .site-burger{width:44px;height:44px;flex-basis:44px}
}

/* ---- phone and tablet layout rules shared by every marketing page ---- */
@media (max-width:1100px){
  /* pages whose first section sat under the fixed header (checkout, early access): clear it */
  main > .wrap > section.hero,main.ea-page > section.ea-hero{padding-top:calc(96px + env(safe-area-inset-top)) !important}
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  /* fixed header and decorative backdrops never wider than the screen */
  nav#nav, body > nav{box-sizing:border-box;width:auto !important;max-width:100vw;left:0 !important;right:0 !important;margin:0 !important}
  .bg-mesh{width:100% !important;max-width:100vw !important;left:0 !important;right:0 !important}
  main.wrap,.wrap{box-sizing:border-box;max-width:100%}
  .card{max-width:100%;box-sizing:border-box}
  img,svg,video{max-width:100%}
  /* iPhone: inputs under 16px zoom the page on focus */
  input,select,textarea{font-size:16px}
  /* tap targets */
  .btn,button,[role="button"]{min-height:44px}
  footer a{display:inline-block;padding:6px 0}
}
@media (max-width:640px){
  /* pricing: the comparison grid is one column on a phone */
  .compare-grid{grid-template-columns:minmax(0,1fr) !important;max-width:100%}
  .compare-card{max-width:100%;width:auto !important;min-width:0 !important;overflow-x:auto}
  .card{min-width:0 !important}
  /* text floor on phones: nothing under 14px */
  body,p,li,small,.small,.sub,.muted,.meta,.foot,.fdis,.note,.hint,.caption,.gc-t span,.fc-t span,.trust span,.badge,.chip,.tag,.pill{font-size:max(14px,1em)}
  footer,footer p,footer a,footer li,footer small{font-size:max(14px,1em)}
}