/* Paywall screen (static/paywall.js) — Convergence Grid: Ink Navy on Ice,
   Plus Jakarta Sans + IBM Plex Mono, 2px radius, hairline borders, no
   shadows/gradients. z-index 290 sits above the page header (150) and below
   the auth and embedded-checkout overlays (300), so sign-in and checkout
   open on top of it. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

.qr-paywall {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: #F7F8FA;
  color: #0D1F3C;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.qr-paywall[hidden] { display: none; }

html.qr-paywall-open,
html.qr-paywall-open body { overflow: hidden; }

.qr-paywall-panel {
  width: 100%;
  max-width: 440px;
  padding: 32px 28px;
  background: #F7F8FA;
  border: 1px solid rgba(13, 31, 60, 0.16);
  border-radius: 2px;
}

.qr-paywall-kicker,
.qr-paywall-msg,
.qr-paywall-links {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

.qr-paywall-kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 31, 60, 0.6);
}

.qr-paywall-title {
  margin: 10px 0 8px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: #0D1F3C;
}

.qr-paywall-body {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(13, 31, 60, 0.82);
}

.qr-paywall-steps {
  margin: -8px 0 24px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(13, 31, 60, 0.82);
}
.qr-paywall-steps li + li { margin-top: 4px; }

.qr-paywall-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qr-paywall-btn {
  width: 100%;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid #0D1F3C;
  border-radius: 2px;
  background: #0D1F3C;
  color: #F7F8FA;
  font: 600 14px 'Plus Jakarta Sans', system-ui, sans-serif;
  cursor: pointer;
}
.qr-paywall-btn-secondary {
  background: transparent;
  color: #0D1F3C;
}
.qr-paywall-btn:disabled { opacity: 0.55; cursor: default; }
.qr-paywall-btn:focus-visible,
.qr-paywall-links a:focus-visible {
  outline: 2px solid #0D1F3C;
  outline-offset: 2px;
}

.qr-paywall-msg {
  min-height: 18px;
  margin-top: 12px;
  font-size: 12px;
  color: rgba(13, 31, 60, 0.75);
}

.qr-paywall-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(13, 31, 60, 0.12);
  font-size: 12px;
}
.qr-paywall-links a { color: #0D1F3C; }

/* Free-tier grace banner (paywall.js _graceBanner): slim, in normal flow at
   the top of <body>, hairline bottom border, date in Plex Mono. The button
   reuses .qr-paywall-btn-secondary, compacted for one line. */
.qr-grace-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 8px 16px;
  background: #F7F8FA;
  color: #0D1F3C;
  border-bottom: 1px solid rgba(13, 31, 60, 0.16);
  font: 500 13px/1.4 'Plus Jakarta Sans', system-ui, sans-serif;
}
.qr-grace-text { margin: 0; }
.qr-grace-date {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
}
.qr-grace-banner .qr-paywall-btn {
  width: auto;
  min-height: 32px;
  padding: 5px 14px;
  font-size: 13px;
}