/* ============================================================================
   mf-plan-gate.css — the locked-section overlay.
   ----------------------------------------------------------------------------
   The section behind stays rendered and is blurred, because a reader should be
   able to see that there IS something there — a blank page sells nothing. What
   the panel in front does is say exactly what is behind it, item by item, so
   the decision to pay is made on facts rather than on a padlock.

   NOTE, and it matters: a CSS blur is a shop window, not a safe. The content is
   still in the DOM and anyone who opens developer tools can read it. Enforcing
   the plan properly means the RPCs themselves checking it server-side.
   ============================================================================ */
.pgate-wrap{position:relative}
.pgate-blur{filter:blur(7px) saturate(.7);pointer-events:none;user-select:none;
  transform:scale(1.01);transition:filter .2s}
.pgate-blur::after{content:"";position:absolute;inset:0}

/* Fixed, and starting immediately under the header — which is the only part
   of the page still meant to be used. --pgate-top is measured at run time
   because the date capsule is on some pages and not others. */
.pgate{position:fixed;top:var(--pgate-top,100px);left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:flex-start;justify-content:center;padding:18px 18px 26px;overflow-y:auto;
  background:linear-gradient(180deg,rgba(239,233,219,.72),rgba(239,233,219,.93) 26%,var(--paper,#efe9db) 62%)}
.pgate-card{width:100%;max-width:900px;background:var(--paper2,#fff);
  border:1px solid var(--line2,#c8bda3);border-radius:16px;padding:22px 26px 22px;
  box-shadow:0 2px 4px rgba(13,21,38,.06),0 26px 60px rgba(13,21,38,.20)}

.pgate-top{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.pgate-lock{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,#1b2745,#0d1526);box-shadow:0 4px 12px rgba(13,21,38,.28)}
.pgate-lock svg{width:22px;height:22px;stroke:#f5c542;fill:none;stroke-width:2}
.pgate-badge{display:inline-block;font:700 10.5px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:linear-gradient(180deg,#f5c542,#c9982a);color:#17213c}
.pgate-badge.adv{background:linear-gradient(180deg,#2f4fb0,#1e3a8a);color:#fff}

.pgate h2{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:27px;letter-spacing:.6px;
  margin:8px 0 5px;color:var(--ink,#0d1526);line-height:1.05}
.pgate .lede{font-size:13.5px;line-height:1.55;color:var(--ink2,#2b3452);margin:0 0 14px;max-width:78ch}

.pgate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:6px 22px;margin:0 0 14px}
.pgate-grid h4{grid-column:1/-1;font:700 10.5px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut,#5a637a);margin:16px 0 6px}
.pgate-grid h4:first-child{margin-top:0}
.pgate-feat{display:flex;gap:8px;align-items:flex-start;font-size:12.6px;line-height:1.45;color:var(--ink2,#2b3452)}
.pgate-feat i{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;
  background:var(--up-bg,#ddf5ee);display:grid;place-items:center;font-style:normal;
  font-size:10px;font-weight:800;color:var(--up,#0a5f58)}
.pgate-feat b{color:var(--ink,#0d1526);font-weight:600}
.pgate-feat span{color:var(--mut,#5a637a)}

.pgate-metrics{border:1px solid var(--line,#ded5c2);border-radius:12px;padding:12px 14px;margin:0 0 14px;
  background:#fbf8f1}
.pgate-metrics h4{font:700 10.5px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut,#5a637a);margin:0 0 10px}
.pgate-mgroup{margin-bottom:6px;font-size:12.2px;line-height:1.5}
.pgate-mgroup:last-child{margin-bottom:0}
.pgate-mgroup b{display:inline-block;min-width:132px;color:var(--ink,#0d1526);font-weight:600}
.pgate-mgroup span{color:var(--mut,#5a637a)}
.pgate-mgroup em{font-style:normal;color:var(--brand-d,#6f550f);font-weight:600}

.pgate-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pgate-cta .go{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:0;border-radius:11px;
  font:700 14.5px/1 'DM Sans',system-ui,sans-serif;color:#17213c;padding:12px 22px;text-decoration:none;
  background:linear-gradient(180deg,#f5c542,#c9982a);
  box-shadow:0 4px 0 #d9a520,0 8px 18px rgba(201,152,42,.34);transition:transform .08s,box-shadow .08s}
.pgate-cta .go:active{transform:translateY(3px);box-shadow:0 1px 0 #d9a520}
.pgate-cta .go.adv{background:linear-gradient(180deg,#2f4fb0,#1e3a8a);color:#fff;box-shadow:0 4px 0 #16296b,0 8px 18px rgba(30,58,138,.34)}
.pgate-cta .go.adv:active{box-shadow:0 1px 0 #16296b}
.pgate-cta .alt{font-size:13.5px;color:var(--brand-d,#6f550f);text-decoration:none;font-weight:600}
.pgate-cta .alt:hover{text-decoration:underline}
.pgate-note{font-size:11.5px;color:var(--mut,#5a637a);margin:10px 0 0;line-height:1.55}

@media(max-width:640px){
  .pgate{padding:26px 12px 40px}
  .pgate-card{padding:22px 18px 20px;border-radius:14px}
  .pgate h2{font-size:25px}
  .pgate-mgroup b{min-width:0;display:block}
}

/* A blurred backdrop is a preview, not the page. Without a cap the gate
   stretched over whatever was behind it — on the Builder that was a rendered
   sheet of 8,468 rows and a document 355,777 pixels tall. */
.pgate-blur{max-height:min(78vh,760px);overflow:hidden}
.pgate-wrap{max-height:min(78vh,760px);overflow:hidden}