/* Shared pieces for every NEMTMark page: the phone menu, the two call-to-action buttons, the driver-app note, and the header and footer of the plain pages
   (support, account deletion, text-message terms). Loaded after each page's own styles. */

:root{ --nm-navy:#0A1628; --nm-navy2:#020810; --nm-teal:#00D4FF; --nm-line:#1d3248; }

/* ---- the buttons, same everywhere ---- */
.btn{display:inline-block;font-weight:700;font-size:15px;padding:13px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;}
.btn-teal{background:#00D4FF;color:#0A1628;}
.btn-teal:hover{background:#40e2ff;text-decoration:none;}
.btn-ghost{border-color:#33485e;color:#dce4ec;}
.btn-ghost:hover{border-color:#00D4FF;color:#fff;text-decoration:none;}
.cta-pair{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* ---- header links ---- */
.nav-links a{white-space:nowrap;}
.nav-links a.nav-login{color:#fff;}
.nav-links a.nav-contact{color:#fff;border:1px solid #33485e;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:800;}
.nav-links a.nav-contact:hover{border-color:#00D4FF;color:#00D4FF;text-decoration:none;}

/* ---- the phone menu button ---- */
.nav-toggle{display:none;background:transparent;border:1px solid #33485e;border-radius:9px;width:44px;height:44px;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.nav-toggle span{display:block;width:20px;height:2px;background:#e8f4ff;border-radius:2px;}
.nav-toggle:focus-visible{outline:2px solid #00D4FF;outline-offset:2px;}
@media (max-width:1100px){
  .nav-toggle{display:inline-flex;}
  .nav .nav-links,.plain .nav .nav-links{display:none;}
  .nav.open .nav-links{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#0A1628;padding:10px 24px 18px;border-bottom:1px solid #1d3248;max-height:calc(100vh - 62px);overflow:auto;}
  .nav.open .nav-links a{display:flex !important;align-items:center;padding:12px 4px;font-size:16px;}
  .nav.open .nav-links a.nav-contact,.nav.open .nav-links a.nav-cta{justify-content:center;margin-top:8px;padding:12px 15px;}
}

/* ---- the driver-app note ---- */
.app-note{background:#f6f7f9;padding:34px 0;border-top:1px solid #e3e7ec;}
.app-note h3{margin:0 0 8px;font-size:20px;color:#0A1628;}
.app-note p{margin:0 0 10px;color:#3d4f61;max-width:70ch;}
.app-note .store{display:inline-block;margin:4px 10px 4px 0;padding:10px 16px;border:1px solid #c9d3dd;border-radius:10px;background:#fff;color:#0A1628;font-weight:700;font-size:14px;}
.app-note .store-soon{color:#3d4f61;font-weight:600;}

/* ---- header and footer for the plain pages (body class "plain") ---- */
.plain{margin:0;}
.plain .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.plain .nav{background:#0A1628;color:#fff;position:sticky;top:0;z-index:60;border-bottom:1px solid #1d3248;}
.plain .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;}
.plain .nav .logo{height:30px;width:auto;display:block;}
.plain .nav-links{display:flex;align-items:center;gap:18px;}
.plain .nav-links a{color:#cdd9e5;font-weight:600;font-size:14px;text-decoration:none;}
.plain .nav-links a:hover{color:#00D4FF;}
.plain .nav-links a.nav-cta{font-size:13px;font-weight:800;color:#0A1628;background:#00D4FF;padding:9px 15px;border-radius:9px;}
.plain .nav-links a.nav-cta:hover{background:#40e2ff;}
.plain footer{background:#020810;color:#aebccb;border-top:1px solid #1d3248;padding:34px 0;font-size:14px;}
.plain footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center;}
.plain footer .logo{height:26px;width:auto;display:block;}
.plain footer a{color:#cdd9e5;text-decoration:none;}
.plain footer a:hover{color:#00D4FF;}
.plain .foot-links{display:flex;gap:20px;flex-wrap:wrap;}