/* site-chrome.css — the exact header + footer from the MyPodOps homepage, reused on
   every marketing page. Scoped under #mk-header / #mk-footer so it never affects page
   content (which keeps its own marketing.css styling). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

#mk-header .wrap, #mk-header .nav, #mk-footer .wrap { width:100%; max-width:1400px; margin:0 auto; padding:0 24px; }

/* buttons (chrome only) */
#mk-header .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:10px 19px; font:600 13px Poppins,sans-serif; border:1px solid transparent; transition:.2s; cursor:pointer; }
#mk-header .btn-primary { color:#fff; background:linear-gradient(100deg,#2f91ee,#6a2ae3); box-shadow:0 12px 26px rgba(91,24,209,.2); }
#mk-header .btn-outline { color:#5f2bcf; background:#fff; border-color:#cfc1f0; }
#mk-header .btn:hover { transform:translateY(-2px); }

/* header */
#mk-header header { height:78px; display:flex; align-items:center; border-bottom:1px solid #f0edf5; background:rgba(255,255,255,.95); position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); }
#mk-header .nav { display:flex; align-items:center; justify-content:space-between; }
#mk-header .brand img { width:168px; height:auto; display:block; }
#mk-header .navlinks { display:flex; gap:30px; font:600 13px Poppins,sans-serif; color:#20243a; align-items:center; }
#mk-header a, #mk-footer a { text-decoration:none; }
#mk-header .navlinks a { color:#20243a; }
#mk-header .navlinks a:hover { color:#6f35d8; }
#mk-header .nav-actions { display:flex; gap:12px; }

/* footer */
#mk-footer footer { background:#0d1c38; color:#c2cae0; padding:60px 0 30px; }
#mk-footer .footer-grid { display:grid; grid-template-columns:1.5fr repeat(5,1fr); gap:20px; }
#mk-footer p { color:#9aa4bd; }
#mk-footer .logo-chip { display:inline-block; background:#fff; padding:11px 15px; border-radius:13px; box-shadow:0 8px 20px rgba(0,0,0,.22); }
#mk-footer .footer-logo { width:172px; height:auto; display:block; }
/* For Creators dropdown */
#mk-header .nav-dd { position:relative; display:flex; align-items:center; }
#mk-header .nav-dd > a::after { content:"\25BE"; margin-left:5px; font-size:.85em; opacity:.65; }
#mk-header .nav-dd-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%); background:#fff; border:1px solid #e9e6f5; border-radius:12px; box-shadow:0 18px 40px rgba(40,26,90,.16); padding:8px; min-width:190px; display:none; z-index:200; }
#mk-header .nav-dd:hover .nav-dd-menu { display:block; }
#mk-header .nav-dd-menu a { display:block; padding:9px 14px; border-radius:8px; color:#20243a; font-size:14px; white-space:nowrap; text-decoration:none; }
#mk-header .nav-dd-menu a:hover { background:#f3effe; color:#6f35d8; }
#mk-footer .footer-col h4 { font:600 12px Poppins,sans-serif; color:#fff; margin:0 0 12px; }
#mk-footer .footer-col a { display:block; font-size:11px; margin:7px 0; color:#bdc4d6; }
#mk-footer .footer-col a:hover { color:#fff; }
#mk-footer .socials { display:flex; gap:9px; margin:10px 0; }
#mk-footer .socials a { width:26px; height:26px; border-radius:50%; background:#1a2d4c; display:grid; place-items:center; font-size:11px; color:#c2cae0; }
#mk-footer .socials a:hover { background:#274169; color:#fff; }
#mk-footer .store-row { display:flex; gap:12px; flex-wrap:wrap; }
#mk-footer .store-badge { line-height:0; display:inline-block; transition:.15s; }
#mk-footer .store-badge:hover { transform:translateY(-2px); }
#mk-footer .store-badge img { height:38px; width:auto; display:block; }
#mk-footer .footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:11px; color:#93a0bd; }
#mk-footer .footer-bottom a { color:#93a0bd; }
#mk-footer .footer-bottom a:hover { color:#fff; }
#mk-footer .footer-legal { display:flex; gap:18px; flex-wrap:wrap; }

#mk-header .nav-burger { display:none; background:none; border:0; font-size:22px; color:#20243a; cursor:pointer; padding:4px 8px; line-height:1; }
@media (max-width:1050px) {
  #mk-header .nav-burger { display:block; margin-left:auto; }
  #mk-header .nav { flex-wrap:wrap; }
  #mk-header .navlinks, #mk-header .nav-actions { display:none; }
  #mk-header header.nav-open { height:auto; }
  #mk-header header.nav-open .navlinks { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; order:5; padding:8px 0 4px; }
  #mk-header header.nav-open .nav-actions { display:flex; width:100%; order:6; gap:12px; padding-bottom:14px; }
  #mk-header header.nav-open .nav-dd { display:block; width:100%; }
  #mk-header header.nav-open .nav-dd-menu { position:static; transform:none; display:block; box-shadow:none; border:0; padding:0 0 4px 14px; min-width:0; }
  #mk-footer .footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px) {
  #mk-header .brand img { width:140px; }
  #mk-footer .footer-grid { grid-template-columns:1fr 1fr; }
}