/* ==========================================================================
   COMPONENTS · PAYWALL — the locked-report interstitial, the conversion moment.
   The head of a paid brief dissolves into the paper and a leaf gate overlaps
   the fade with the unlock offer. The rubric appears ONLY on the kicker and the
   debossed lock; the primary action is SOLID INK, never the spot — a gate
   persuades by restraint, never by alarm.
   ========================================================================== */

.op-paywall {
  position: relative;
}

/* The preview: a real masthead + a few prose paragraphs, dissolved into the
   page so the reader sees exactly what they are buying. The faded tail is
   aria-hidden in the markup so a screen reader is never fed a half-sentence. */
.op-paywall__preview {
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, black 35%, transparent);
          mask-image: linear-gradient(to bottom, black 35%, transparent);
}
/* No-mask fallback: an ink-to-paper veil dissolves the foot of the preview */
@supports not ((-webkit-mask-image: linear-gradient(black, black)) or (mask-image: linear-gradient(black, black))) {
  .op-paywall__preview { -webkit-mask-image: none; mask-image: none; }
  .op-paywall__preview::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 60%;
    background: linear-gradient(to bottom, transparent, var(--surface));
    pointer-events: none;
  }
}

/* The one-line verdict lifted from the extracted preview block, set just below
   the masked prose as the teaser's bottom line. */
.op-paywall__verdict {
  margin-block-start: var(--space-2xs);
}

/* The gate: a leaf sheet that overlaps the fade and carries the offer */
.op-paywall__gate {
  position: relative;
  z-index: var(--z-raised);
  max-inline-size: 34rem;
  margin-inline: auto;
  margin-block-start: calc(-1 * var(--space-3xl));
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-page);
}

/* The lock: a small debossed imprimatur drawn in CSS — the only rubric mark on
   the gate besides the kicker. A shackle arch over a solid body. */
.op-paywall__lock {
  position: relative;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  border-radius: var(--radius-seal);
  background: var(--surface-raised);
  border: 1px solid var(--accent-keyline);
  box-shadow: var(--shadow-deboss);
}
.op-paywall__lock::before {       /* the shackle */
  content: "";
  position: absolute;
  inset-block-start: 0.78rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 0.66rem;
  block-size: 0.55rem;
  border: 2px solid var(--accent);
  border-block-end: 0;
  border-start-start-radius: var(--radius-pill);
  border-start-end-radius: var(--radius-pill);
}
.op-paywall__lock::after {        /* the lock body */
  content: "";
  position: absolute;
  inset-block-start: 1.26rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 1.05rem;
  block-size: 0.82rem;
  background: var(--accent);
  border-radius: var(--radius-xs);
}

.op-paywall__title {
  font-family: var(--font-reading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.op-paywall__note {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  max-inline-size: var(--measure-narrow);
}

/* What you unlock — printed checks, the pricing-feature vernacular */
.op-paywall__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
  text-align: start;
  font-size: var(--text-sm);
  color: var(--text);
}
.op-paywall__list li {
  display: grid;
  grid-template-columns: 1.4em 1fr;
  align-items: baseline;
}
.op-paywall__list li::before {
  content: "\2713";               /* a printed check */
  color: var(--positive);
  font-family: var(--font-data);
}

/* The price line — mono, tabular, honest */
.op-paywall__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
}
.op-paywall__amount {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--text);
}
.op-paywall__period {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The actions: a solid-ink primary beside a paper secondary */
.op-paywall__actions {
  display: grid;
  gap: var(--space-2xs);
  inline-size: 100%;
}
@media (min-width: 40rem) {
  .op-paywall__actions { grid-template-columns: 1fr 1fr; }
}

.op-paywall__signin {
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}