/* 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. */
/* ── the free-preview clock ────────────────────────────────────────────────
   A sticker in the bottom-right corner shaped like a wind-up alarm clock:
   two bells, a face, two feet. Drawn in CSS so it costs no request and stays
   crisp at any zoom. The second hand sweeps once a minute — the only moving
   part, and the reason the thing reads as a clock rather than a badge. */
.mf-timer{display:none}
.mf-timer.show{display:flex}
/* Bottom-LEFT. The right-hand corner is where every page keeps its own
   furniture — the Research tab's Display button sits at 12px/12px and the two
   were sitting on top of each other. The left corner is empty on every page
   here, and a clock counting down does not need to fight for it. */
.mf-timer.mf-float{position:fixed;left:18px;bottom:18px;z-index:900;
  align-items:center;gap:10px;padding:9px 14px 9px 10px;border-radius:14px;white-space:nowrap;
  background:linear-gradient(180deg,#16243c,#0b1626);
  border:1px solid rgba(245,197,66,.42);
  box-shadow:0 10px 30px rgba(0,0,0,.42),0 2px 0 rgba(255,255,255,.05) inset;
  font-family:'DM Sans',system-ui,sans-serif;color:#ffe6a8;
  animation:mfc-in .34s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes mfc-in{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}

/* the clock itself */
.mfc-clock{position:relative;width:34px;height:34px;flex:none;display:block}
.mfc-face{position:absolute;inset:3px 0 3px 0;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe9b0,#f5c542 62%,#d9a520);
  border:2px solid #0b1626;box-shadow:inset 0 -2px 5px rgba(0,0,0,.22)}
.mfc-bell{position:absolute;top:-1px;width:12px;height:12px;border-radius:50% 50% 40% 40%;
  background:linear-gradient(180deg,#f5c542,#c9982a);border:2px solid #0b1626}
.mfc-bell.l{left:-2px;transform:rotate(-24deg)} .mfc-bell.r{right:-2px;transform:rotate(24deg)}
.mfc-foot{position:absolute;bottom:-2px;width:5px;height:6px;border-radius:0 0 3px 3px;
  background:#c9982a;border:2px solid #0b1626;border-top:0}
.mfc-foot.l{left:4px;transform:rotate(18deg)} .mfc-foot.r{right:4px;transform:rotate(-18deg)}
/* the sweeping hand — one turn a minute, so it ticks with the countdown */
.mfc-hand{position:absolute;left:50%;top:50%;width:2px;height:9px;background:#7a2b1f;
  border-radius:2px;transform-origin:50% 100%;transform:translate(-50%,-100%);
  animation:mfc-sweep 60s linear infinite}
.mfc-hand::after{content:"";position:absolute;left:50%;bottom:-2px;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:#7a2b1f}
@keyframes mfc-sweep{to{transform:translate(-50%,-100%) rotate(360deg)}}

/* the reading */
.mfc-txt{display:flex;flex-direction:column;line-height:1.15;min-width:74px}
.mfc-txt span{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:#b9c8dd;
  font-weight:600;white-space:nowrap}
.mfc-txt b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:16px;font-weight:700;
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.5px}

/* under two minutes it stops being decoration */
.mf-timer.mf-warn.mf-float{border-color:rgba(229,90,70,.72);
  background:linear-gradient(180deg,#2a1a1c,#180d10)}
.mf-timer.mf-warn .mfc-txt b{color:#ffb4a6}
.mf-timer.mf-warn .mfc-clock{animation:mfc-shake 1.1s ease-in-out infinite}
@keyframes mfc-shake{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-9deg)}96%{transform:rotate(9deg)}}

@media(prefers-reduced-motion:reduce){
  .mfc-hand,.mf-timer.mf-warn .mfc-clock,.mf-timer.mf-float{animation:none}
}
@media(max-width:640px){
  .mf-timer.mf-float{left:12px;bottom:12px;padding:8px 12px 8px 9px;gap:9px}
  .mfc-clock{width:28px;height:28px} .mfc-txt b{font-size:14px}
}
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}

/* Preview over: it stops being a countdown and becomes the way back in, so it
   says so and invites the click rather than showing a frozen 0:00. */
.mf-timer.mf-over.mf-float{cursor:pointer;border-color:rgba(245,197,66,.65);
  background:linear-gradient(180deg,#2a2213,#161009)}
.mf-timer.mf-over .mfc-txt b{font-family:'DM Sans',system-ui,sans-serif;font-size:12.5px;
  letter-spacing:0;color:#ffd88a}
.mf-timer.mf-over .mfc-hand{animation:none}