/* Newsletter signup components. Built on the Modernist tokens in ds/styles.css. */

.nl-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.nl-form[hidden] { display: none; }
.nl-form .input { flex: 1 1 220px; min-height: 48px; font-size: 16px; padding: 10px 14px; }
.nl-form .btn { min-height: 48px; padding: 0 24px; font-size: 15px; flex: 0 0 auto; }
.nl-stack { flex-direction: column; }
.nl-stack .input, .nl-stack .btn { flex: none; width: 100%; }

/* Honeypot: off-screen for people, still filled in by naive bots. */
.nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.nl-status { font-size: 14px; line-height: 22px; min-height: 22px; margin: 10px 0 0; }
.nl-status[data-state="error"] { color: #b42318; font-weight: 600; }
.nl-fine { font-size: 13px; line-height: 20px; margin: 4px 0 0; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

.nl-success[hidden] { display: none; }
.nl-success { border-left: 4px solid var(--color-accent); background: var(--color-surface); padding: 20px 22px; }
.nl-success h3 { font-size: 20px; margin: 0 0 6px; }
.nl-success p { font-size: 15px; margin: 0 0 12px; }
.nl-link {
  display: block; word-break: break-all; font-size: 14px; font-weight: 700;
  padding: 10px 12px; margin: 0 0 12px;
  background: var(--color-bg); border: 1px solid var(--color-divider);
}
.nl-share[hidden] { display: none; }
.nl-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-share-row .btn { min-height: 40px; }

.nl-kicker {
  display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); margin: 0 0 14px;
}

/* Home page block: copy beside the form, stacked on narrow screens. */
.nl-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px clamp(24px, 5vw, 96px); align-items: center; padding: 84px 0;
}
@media (max-width: 880px) { .nl-split { grid-template-columns: 1fr; padding: 64px 0; } }

/* Free resource request forms (/free-resources/) */
.res-form { display: grid; gap: 10px; margin: 0; }
.res-form .input { min-height: 46px; font-size: 16px; padding: 10px 14px; }
.res-form .btn { min-height: 46px; font-size: 14px; }
.res-opt { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 20px; cursor: pointer; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.res-opt input { margin: 3px 0 0; accent-color: var(--color-accent); }
.res-form .nl-status { margin: 0; min-height: 0; }
.res-done { border-left: 4px solid var(--color-accent); background: var(--color-surface); padding: 14px 16px; font-size: 14.5px; line-height: 22px; }
.res-done strong { display: block; font-family: var(--font-heading); font-weight: 800; }
.res-note { font-size: 13px; line-height: 20px; margin: 28px 0 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* Free resources: two per row on desktop, one on phones */
.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 760px) { .res-grid { grid-template-columns: 1fr; } }
.res-grid > div { padding: clamp(24px, 3vw, 40px) !important; }
.res-download { width: 100%; min-height: 46px; font-size: 14px; }