/* Claim and opt-out pages: /c/:token, /unsubscribe/:token. Linked from the page body because
   index.ts sets style-src 'self'. Tokens come from site.css; both themes flow from them. */
.claim{max-width:760px;margin:32px auto;text-align:center}
.narrow-claim{max-width:560px;text-align:left}
.claim h1{font-size:2rem;letter-spacing:-.02em;margin:0 0 6px}
.claim-kicker{font-family:var(--font-mono);color:var(--accent-link);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;margin:0 0 6px}
.claim-meta{color:var(--muted);margin:0 0 20px}
.claim-card{margin:0 0 24px}
.claim-card img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-lg)}
.claim-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 14px}
.claim-help{color:var(--text-2);font-size:.95rem;max-width:560px;margin:0 auto 20px}
.claim-optout{font-size:.9rem;margin:28px 0 0}
.narrow-claim form{margin:20px 0}
@media (max-width:640px){.claim-actions .btn{width:100%}}

/* Do Not Email list: /do-not-email. The amber banner is fixed to one colour pair in both themes
   because it is a warning the reader must notice before anything else on the page. */
.dne-banner{background:#fff3cd;color:#5c3d00;border:1px solid #d29922;border-radius:var(--radius);padding:12px 16px;margin:0 0 20px;font-size:1.05rem}
:root[data-theme="dark"] .dne-banner{background:#3a2a00;color:#ffd77a;border-color:#d29922}
.dne label{display:block;font-weight:600;margin:16px 0 6px}
.dne input[type="email"],.dne input[type="text"]{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface,#fff);color:inherit;font-size:1rem}
.dne input[type="text"]{text-transform:uppercase}
.dne .help{color:var(--text-2);font-size:.9rem;margin:6px 0 0}
.dne .btn{margin-top:20px}
.dne .form-errors{color:#f85149;padding-left:20px;margin:0 0 12px}