/* Layout for the opt-in page. Every colour, font and space comes from styles.css tokens. */
[hidden] { display: none !important; }

body { display: flex; justify-content: center; -webkit-text-size-adjust: 100%; }

.page { width: 100%; max-width: 480px; padding-bottom: var(--space-8); }
@media (min-width: 481px) {
  .page { border-inline: 1px solid var(--color-divider); }
}

.masthead {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--space-4) var(--space-6) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.wordmark { font-family: var(--font-heading); font-weight: 600; font-size: 36px; letter-spacing: 0.02em; }

.kicker { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-accent-700); }
.masthead .kicker { font-size: 10px; letter-spacing: 0.3em; }
.micro-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }

.sec { padding: var(--space-6) var(--space-6) 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack.wide-gap { gap: var(--space-4); }
.stack.tight { gap: var(--space-2); }

h1.display {
  font-family: var(--font-heading); font-weight: 400; font-size: 42px;
  line-height: 1.02; letter-spacing: -0.01em; margin: 0; text-wrap: pretty;
}
h2.display { font-family: var(--font-heading); font-weight: 400; line-height: 1.06; margin: 0; }

.rule-accent { height: 1px; background: var(--color-accent); width: 54px; }
.rule-accent.short { width: 40px; }
.hr.flush { margin: 0; }

.justified { text-align: justify; hyphens: auto; margin: 0; }
.lede { font-size: 15px; line-height: 1.62; }
.body-sm { font-size: 14px; line-height: 1.62; }
.aside { font-size: 13px; line-height: 1.55; margin: 0; }
.aside em { font-size: 16px; }
.fine { font-size: 11px; line-height: 1.5; margin: 0; }
.error { font-size: 12px; line-height: 1.45; margin: var(--space-2) 0 0; color: var(--color-accent-700); }

.band {
  display: flex; flex-direction: column; gap: var(--space-3);
  border-top: 1px solid var(--color-accent); border-bottom: 1px solid var(--color-accent);
  padding: var(--space-4) 0;
}
.band .input { min-height: 52px; font-size: 17px; padding: 0 14px; letter-spacing: 0.03em; }
.btn-block { min-height: 52px; font-size: 16px; letter-spacing: 0.06em; margin-top: 0; }
.band .btn-block { min-height: 54px; }

.who { display: flex; flex-direction: column; gap: var(--space-4); }
.who .plate { width: 215px; height: 270px; align-self: center; }
.who .plate img { width: 100%; height: 100%; object-fit: cover; }

.benefit h3 {
  font-family: var(--font-heading); font-weight: 600; font-size: 22px;
  line-height: 1.1; margin: 0 0 6px;
}

.credentials { font-size: 14px; }
.credentials th { width: 86px; letter-spacing: 0.14em; padding-left: 0; vertical-align: top; }
.credentials td { padding-right: 0; line-height: 1.55; }

.signature {
  display: flex; align-items: baseline; gap: var(--space-2);
  border-top: 1px solid var(--color-divider); padding-top: var(--space-3);
}
.signature .name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; margin-left: auto; }

footer.site {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-6) var(--space-6) 0; padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
footer.site .name { font-family: var(--font-heading); font-weight: 600; font-size: 14px; }
footer.site .spacer { font-size: 11px; margin-left: auto; }
footer.site a { font-size: 11px; }

/* The standalone thank-you and privacy pages */
.plain { padding: var(--space-8) var(--space-6); }
.plain h1 { font-family: var(--font-heading); font-weight: 400; font-size: 36px; line-height: 1.04; margin: 0 0 var(--space-3); }
.plain h2 { font-family: var(--font-heading); font-weight: 600; font-size: 19px; margin: var(--space-6) 0 var(--space-2); }
.plain p, .plain li { font-size: 14px; line-height: 1.62; }
.plain ul { padding-left: var(--space-4); margin: 0 0 var(--space-3); }