/* mf-gate.css — self-contained sign-up gate + free-preview timer.
   Safe to drop on ANY page: no :root overrides, no layout rules, everything
   scoped under .mf-gate / .mf-timer so it can't disturb the host page. */
.mf-timer{display:none;align-items:center;gap:7px;background:rgba(245,197,66,.16);border:1px solid rgba(245,197,66,.55);
  color:#7a5c10;border-radius:99px;padding:5px 12px;font:600 12.5px/1 'DM Sans',system-ui,sans-serif;white-space:nowrap}
.mf-timer.show{display:inline-flex} .mf-timer b{color:#111;font-variant-numeric:tabular-nums}
/* floating fallback when a page has no header slot */
.mf-timer.mf-float{position:fixed;top:12px;right:14px;z-index:999;background:#111a2b;border-color:rgba(245,197,66,.6);color:#ffe08a;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.mf-timer.mf-float b{color:#fff}
html.mfa-signedin .mf-timer{display:none!important}

.mf-gate{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(5,17,31,.66);backdrop-filter:blur(3px);font-family:'DM Sans',system-ui,sans-serif}
.mf-gate.show{display:flex}
.mf-gate *{box-sizing:border-box}
.mf-gate .box{background:#fff;border-radius:18px;max-width:440px;width:100%;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);animation:mfgpop .25s ease}
@keyframes mfgpop{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.mf-gate .top{background:linear-gradient(135deg,#05111F,#12233a);color:#fff;padding:26px 28px 22px;position:relative}
.mf-gate .pill{display:inline-block;background:rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:99px;margin-bottom:12px}
.mf-gate h3{font-family:'Bebas Neue','DM Sans',sans-serif;font-weight:400;font-size:30px;letter-spacing:.5px;margin:0 0 8px;color:#fff}
.mf-gate h3 b{color:#f5c542}
.mf-gate .top p{font-size:14px;color:#C3D0E0;line-height:1.55;margin:0}
.mf-gate .x{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.15);border:0;color:#fff;width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1}
.mf-gate .body{padding:22px 28px 26px;display:flex;flex-direction:column;gap:12px}
.mf-gate .g-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;cursor:pointer;border:0;border-radius:11px;
  font:700 15px/1 'DM Sans',system-ui,sans-serif;color:#17213c;padding:14px 22px;text-decoration:none;
  background:linear-gradient(180deg,#f5c542,#c9982a);box-shadow:0 4px 0 #d9a520,0 8px 18px rgba(201,152,42,.34),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .08s,box-shadow .08s}
.mf-gate .g-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #d9a520}
.mf-gate .g-btn.blue{background:linear-gradient(180deg,#2f4fb0,#1e3a8a);color:#fff;box-shadow:0 4px 0 #16296b,0 8px 18px rgba(30,58,138,.34),inset 0 1px 0 rgba(255,255,255,.25)}
.mf-gate .g-btn.blue:active{transform:translateY(3px);box-shadow:0 1px 0 #16296b}
.mf-gate .fine{font-size:12px;color:#727b90;text-align:center;margin-top:4px;line-height:1.5}
.mf-gate .fine a{color:#8a6a15}