.paywall {
  align-items: center;
  background: linear-gradient(135deg, #4969ce, #3556b8);
  color: #fff;
  display: grid;
  gap: 64px;
  grid-template-columns: 1.15fr .85fr;
  padding: 86px max(28px, calc((100vw - 1120px) / 2));
}

.paywall-copy > p:not(.eyebrow) { color: #dce6f2; font-size: 1.1rem; max-width: 680px; }
.paywall-copy ul { list-style: none; margin: 28px 0 0; padding: 0; }
.paywall-copy li { border-top: 1px solid #ffffff2b; padding: 12px 0; }
.paywall-copy li::before { color: #d5a63d; content: "✓"; font-weight: 900; margin-right: 12px; }
.paywall-card { background: #fff; box-shadow: 16px 16px 0 #d5a63d; color: #10233d; padding: 34px; text-align: center; }
.paywall-card > p { font-size: .75rem; font-weight: 900; letter-spacing: .14em; }
.paywall-card > strong { display: block; font-size: 5.5rem; line-height: 1; }
.paywall-card sup { font-size: 2rem; }
.paywall-card > span { display: block; font-weight: 800; }
.paywall-card button { background: #d5a63d; border: 0; color: #10233d; cursor: pointer; font: inherit; font-weight: 900; margin-top: 22px; padding: 15px 18px; width: 100%; }
.paywall-card button:hover,.paywall-card button:focus { background: #e3b84f; }
.lost-access { display: block; font-weight: 800; margin: 18px 0; }
.preview-review-link { background: #3556b8; color: #fff; display: block; font-weight: 900; margin: 12px 0 18px; padding: 13px 16px; text-decoration: none; }
.preview-review-link[hidden] { display: none; }
.preview-review-link:hover,.preview-review-link:focus { background: #29489f; }
.paywall-card small { color: #607087; display: block; line-height: 1.5; }
.paid-header-note { color: #39704b; font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.access-error { background: #fff; border: 1px solid #e3c7c7; margin: 10vh auto; max-width: 680px; padding: 32px; }
.admin-recovery { background: #fff; border: 1px solid #dce3eb; box-shadow: 0 18px 50px #10233d12; margin: 8vh auto; max-width: 720px; padding: 40px; }
.admin-recovery h1 { font-size: clamp(2.6rem, 7vw, 4.8rem); }
.admin-recovery form { display: grid; gap: 18px; margin-top: 28px; }
.admin-recovery label { font-weight: 800; }
.admin-recovery input,.recovery-link { border: 1px solid #dce3eb; display: block; font: inherit; margin-top: 7px; padding: 12px; width: 100%; }
.admin-recovery button { background: #10233d; border: 0; color: #fff; cursor: pointer; font: inherit; font-weight: 900; padding: 14px 18px; }
.recovery-link { min-height: 150px; overflow-wrap: anywhere; resize: vertical; }
.recovery-error { border-left: 4px solid #d5a63d; font-weight: 800; padding: 10px 14px; }
.recovery-success { border-left: 4px solid #2f855a; font-weight: 800; padding: 10px 14px; }
.admin-reset { display: inline-block; text-decoration: none; }

@media (max-width: 800px) {
  .paywall { gap: 40px; grid-template-columns: 1fr; padding-bottom: 70px; padding-top: 70px; }
}

@media (max-width: 520px) {
  .paywall { padding: 54px 20px; }
  .paywall-card { box-shadow: 8px 8px 0 #d5a63d; padding: 26px 20px; }
  .paywall-card > strong { font-size: 4.5rem; }
  .paywall-card button { padding-left: 10px; padding-right: 10px; }
}