/* mbp_gate.css — the paywall (mbpw-css) and account dialog (mbp-auth-css) styles, one file for every page */

#mbpw-gate{position:fixed;inset:0;z-index:999000;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#eef0ee;
  background:radial-gradient(120% 85% at 14% -5%,#1b2947 0%,rgba(27,41,71,0) 55%),
             radial-gradient(130% 95% at 92% 105%,#3c1420 0%,rgba(60,20,32,0) 55%),#090a10}
html[data-mbpw="web"] #mbpw-gate{display:block}
#mbpw-gate *{box-sizing:border-box}
#mbpw-gate button{-webkit-appearance:none;appearance:none;font-family:inherit}
#mbpw-gate img{max-width:100%}
#mbpw-gate .pw{max-width:760px;margin:0 auto;padding:46px 24px 64px;text-align:center;position:relative;z-index:2}
#mbpw-gate .pw-logo{width:150px;height:auto;filter:drop-shadow(0 8px 22px rgba(0,0,0,.5));margin:0 auto 8px;display:block}
#mbpw-gate .pw-wm{position:relative;width:360px;max-width:80%;height:90px;margin:4px auto 0;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 7px #37a0f0) drop-shadow(0 0 17px #37a0f0) drop-shadow(0 0 34px rgba(55,160,240,.5))}
#mbpw-gate .pw-wm svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
#mbpw-gate .pw-wm path{fill:#dcefff}
#mbpw-gate .pw-div{display:flex;align-items:center;gap:14px;justify-content:center;margin:30px auto 20px;color:#8fb98f;font-size:13px;letter-spacing:.32em;font-weight:600;text-transform:uppercase}
#mbpw-gate .pw-div::before,#mbpw-gate .pw-div::after{content:"";height:1px;width:38px;background:linear-gradient(90deg,transparent,rgba(160,200,140,.5),transparent)}
#mbpw-gate h1{font-size:44px;line-height:1.06;font-weight:800;letter-spacing:-.02em;margin:0}
#mbpw-gate h1 .grn{color:#a7d36a}
#mbpw-gate .pw-sub{color:#c9ccc4;font-size:18px;line-height:1.5;margin:18px auto 0;max-width:520px}
#mbpw-gate .pw-price{margin:34px auto 0;max-width:660px;border:1.5px solid rgba(167,211,106,.4);border-radius:18px;background:linear-gradient(180deg,rgba(167,211,106,.05),rgba(255,255,255,.015));display:flex;align-items:center;justify-content:center;gap:30px;padding:22px 30px;box-shadow:0 8px 30px rgba(0,0,0,.28)}
#mbpw-gate .others{color:#8b8f88;font-size:14px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;text-align:center}
#mbpw-gate .others .row{display:flex;align-items:baseline;gap:4px;justify-content:center;margin-top:3px}
#mbpw-gate .others .amt{color:#c96b6b;font-size:40px;font-weight:800;text-decoration:line-through;text-decoration-thickness:3px}
#mbpw-gate .others .u{color:#8b8f88;font-size:19px;font-weight:700}
#mbpw-gate .arrow{color:#6f736c;font-size:30px}
#mbpw-gate .ours{text-align:left}
#mbpw-gate .ours .row{display:flex;align-items:baseline;gap:5px}
#mbpw-gate .ours .amt{color:#a7d36a;font-size:56px;font-weight:800;letter-spacing:-.02em;line-height:1}
#mbpw-gate .ours .u{color:#c9ccc4;font-size:24px;font-weight:700}
#mbpw-gate .ours .ein{color:#8b8f88;font-size:13px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;margin-top:4px}
#mbpw-gate .pw-cta{margin:26px auto 0;display:block;background:linear-gradient(180deg,#b6e07a,#8fc24e);color:#12200a;font:800 18px/1 inherit;border:0;border-radius:14px;padding:17px 40px;cursor:pointer;box-shadow:0 8px 26px rgba(143,194,78,.35);transition:transform .12s,box-shadow .12s}
#mbpw-gate .pw-cta:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 32px rgba(143,194,78,.45)}
#mbpw-gate .pw-cta:disabled{opacity:.7;cursor:default;transform:none;box-shadow:none}
#mbpw-gate .mbpw-msg{min-height:20px;margin:12px auto 0;color:#a7d36a;font-size:14px;font-weight:600;padding:0 16px}
#mbpw-gate .mbpw-msg.err{color:#e6a0a0}
#mbpw-gate .pw-trust{margin:14px auto 0;color:#8b8f88;font-size:13.5px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
#mbpw-gate .pw-trust span+span::before{content:"\00b7";margin-right:14px;color:#555}
#mbpw-gate .pw-links{margin:16px auto 0;color:#7b7f78;font-size:13px}
#mbpw-gate .pw-links a{color:#a7d36a;text-decoration:none;cursor:pointer;margin:0 4px}
#mbpw-gate .pw-mocks{margin:46px auto 0;display:flex;justify-content:center;align-items:flex-start;gap:26px;max-width:900px}
#mbpw-gate .mock{position:relative;flex:0 0 auto;width:330px}
#mbpw-gate .mock .plabel{position:absolute;top:-16px;left:50%;transform:translateX(-50%);z-index:3;background:#a7d36a;color:#12200a;font:800 13px/1 inherit;letter-spacing:.08em;padding:7px 18px;border-radius:20px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
#mbpw-gate .mock .frame{border:8px solid #14151a;border-radius:26px;overflow:hidden;background:#0a0b09;box-shadow:0 20px 50px rgba(0,0,0,.5);max-height:520px}
#mbpw-gate .mock.basic{transform:rotate(-3deg) translateY(10px)}
#mbpw-gate .mock.pro{transform:rotate(3deg)}
#mbpw-gate .mock .frame img{width:100%;display:block}
#mbpw-gate .mbpw-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#mbpw-gate .mbpw-spin{width:46px;height:46px;border-radius:50%;border:3px solid rgba(167,211,106,.25);border-top-color:#a7d36a;animation:mbpwspin .8s linear infinite}
@keyframes mbpwspin{to{transform:rotate(360deg)}}
@media (max-width:720px){#mbpw-gate h1{font-size:32px}#mbpw-gate .pw-price{flex-direction:column;gap:12px}#mbpw-gate .arrow{transform:rotate(90deg)}#mbpw-gate .pw-mocks{gap:10px}#mbpw-gate .mock{width:46%}}


  .mpauth-back{position:fixed; inset:0; z-index:999500;  /* web: above the paywall gate at 999000, below RC checkout at 1000002 */ display:flex; align-items:center; justify-content:center;
    background:rgba(4,6,10,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    padding:calc(env(safe-area-inset-top,0px) + 18px) 18px calc(env(safe-area-inset-bottom,0px) + 18px)}
  .mpauth-back[hidden]{display:none}
  .mpauth{position:relative; width:100%; max-width:380px; background:#141821; border:1px solid #2a3140;
    border-radius:18px; padding:22px 20px 20px; box-shadow:0 24px 60px rgba(0,0,0,.6); color:#e8ecf3;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  .mpauth-x{position:absolute; top:11px; right:12px; width:32px; height:32px; border:0; background:transparent;
    color:#7f8ba0; font-size:17px; cursor:pointer; border-radius:8px}
  .mpauth-x:active{background:rgba(255,255,255,.06)}
  .mpauth-brand{width:46px; height:46px; margin:2px auto 10px; border-radius:12px;
    background:var(--brandmark) center/72% no-repeat, #0e1116; border:1px solid #2a3140}
  .mpauth-h{font-size:20px; font-weight:800; text-align:center; letter-spacing:-.2px}
  .mpauth-sub{font-size:12.5px; line-height:1.45; color:#9aa6b8; text-align:center; margin:5px auto 16px; max-width:300px}
  .mpauth input{display:block; width:100%; margin:0 0 10px; padding:12px 13px; font-size:15px;
    color:#fff; background:rgba(255,255,255,.05); border:1px solid #2f3746; border-radius:10px; outline:none}
  .mpauth input:focus{border-color:#4c9ffe; background:rgba(255,255,255,.07)}
  .mpauth input::placeholder{color:#8a94a6}
  .mpauth-cta{display:block; width:100%; margin:4px 0 0; padding:12px; font-size:15px; font-weight:800;
    color:#04150a; background:var(--accent,#8fe388); border:0; border-radius:10px; cursor:pointer}
  .mpauth-cta:active{filter:brightness(.94)}
  .mpauth-cta.ghost{background:transparent; color:#ff8f8f; border:1px solid #5a3140; font-weight:700}
  .mpauth-msg{min-height:16px; font-size:12.5px; line-height:1.4; text-align:center; margin:9px 2px 2px; color:#ff8080}
  .mpauth-row{display:flex; justify-content:space-between; margin-top:13px; font-size:12.5px}
  .mpauth-row a{color:#9aa6b8; cursor:pointer}
  .mpauth-row a:active{color:#cfd8e6}
  .mpauth-me{font-size:14.5px; text-align:center; margin:2px 0 14px; color:#cfd8e6}
  .mpauth-me b{color:#fff}
  .mpauth-foot{font-size:11px; color:#6f7a8c; text-align:center; margin-top:14px; line-height:1.4}
/* the account page's plan card (1.1) — same look as the app */
.mpacct{background:#0e1116;border:1px solid #2a3140;border-radius:14px;padding:14px 14px 12px;margin:0 0 14px;text-align:left}
.mpacct-k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8a94a6}
.mpacct-v{font-size:17px;font-weight:800;margin-top:4px;color:#fff}
.mpacct-v .pill{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;vertical-align:2px;background:rgba(143,227,136,.14);color:#8fe388}
.mpacct-v .pill.free{background:rgba(154,166,184,.14);color:#cfd8e6}
.mpacct-v .pill.warn{background:rgba(251,191,36,.14);color:#fbbf24}
.mpacct-s{font-size:13px;line-height:1.45;color:#b8c2d2;margin-top:4px}
.mpacct-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mpacct-b{flex:1 1 auto;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid #2f3746;background:rgba(255,255,255,.04);color:#e8ecf3;font-family:inherit;font-size:13.5px;font-weight:700;line-height:1;cursor:pointer}
.mpacct-b.go{background:#0076B6;color:#fff;border-color:transparent}
.mpacct-b:disabled{opacity:.6}
.mpacct-b[hidden]{display:none}
.mpacct-m{font-size:12.5px;line-height:1.4;margin-top:8px;color:#b8c2d2}
.mpacct-m:empty{display:none}
/* app download badges, top-right of the paywall (1.1) */
#mbpw-gate .pw-apps{position:fixed;top:16px;right:20px;z-index:3;display:flex;gap:10px;align-items:center}
#mbpw-gate .pw-badge{display:block;height:40px;border-radius:7px;line-height:0;text-decoration:none;transition:transform .15s,box-shadow .15s}
#mbpw-gate .pw-badge img{display:block;height:40px;width:auto;max-width:none}
#mbpw-gate .pw-badge:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.45)}
#mbpw-gate .pw-badge:focus-visible{outline:2px solid #a7d36a;outline-offset:3px}
/* ThrownZone: a hand of three real cards (Rare, Elite, Legendary) fanned out of a black badge */
#mbpw-gate .pw-tz{position:relative;display:flex;align-items:center;height:40px;padding:0 14px 0 100px;background:#000;border:1px solid #8c8c8c;color:#fff;line-height:1;font-family:inherit;overflow:visible}
#mbpw-gate .pw-tz-fan{position:absolute;left:8px;bottom:4px;width:72px;height:52px;pointer-events:none}
#mbpw-gate .pw-tz-fan img{position:absolute;bottom:0;width:38px;height:50px;max-width:none;border-radius:3px;box-shadow:0 4px 10px rgba(0,0,0,.6);
  transform-origin:50% 100%;transition:transform .22s cubic-bezier(.3,.7,.2,1)}
#mbpw-gate .pw-tz-fan .c1{left:0;transform:rotate(-15deg)}
#mbpw-gate .pw-tz-fan .c2{left:17px;bottom:3px;transform:rotate(0deg)}
#mbpw-gate .pw-tz-fan .c3{left:34px;transform:rotate(15deg)}
#mbpw-gate .pw-tz:hover .c1{transform:rotate(-22deg) translateX(-3px)}
#mbpw-gate .pw-tz:hover .c2{transform:translateY(-4px)}
#mbpw-gate .pw-tz:hover .c3{transform:rotate(22deg) translateX(3px)}
#mbpw-gate .pw-tz-t{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
#mbpw-gate .pw-tz-t .k{font-size:10px;font-weight:600;letter-spacing:.04em}
#mbpw-gate .pw-tz-t .v{font-size:16px;font-weight:700;letter-spacing:-.01em}
@media (prefers-reduced-motion:reduce){#mbpw-gate .pw-tz-fan img{transition:none}}
/* narrow screens: the badges sit in a row above the logo instead of over it */
@media (max-width:820px){
  #mbpw-gate .pw-apps{position:static;justify-content:center;flex-wrap:wrap;gap:8px;margin:-26px auto 18px}
  #mbpw-gate .pw-badge,#mbpw-gate .pw-badge img{height:36px}
  #mbpw-gate .pw-tz{height:36px;padding-left:88px}
  #mbpw-gate .pw-tz-fan{transform:scale(.92);transform-origin:0 100%}
  #mbpw-gate .pw-tz-t .v{font-size:14px}
}