/* ============================================================================
   Newsletter: inscrição (uma dobra) e páginas de retorno (confirmado, erro,
   descadastrado). Usa os tokens de /assets/css/site.css.
   ========================================================================== */
[hidden] { display: none !important; }

.nl-main { padding-bottom: clamp(48px, 8vh, 96px); }
.nl-hero {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 36px clamp(32px, 5.5vw, 88px);
  min-height: calc(100svh - var(--topbar-h) - clamp(40px, 7vh, 80px) - 96px);
}
.nl-intro { min-width: 0; }
.nl-title { font-size: clamp(32px, 4.5vw, 62px); letter-spacing: -.058em; margin-bottom: 22px; }
.nl-intro .lede { max-width: 56ch; }

.nl-list { display: grid; gap: 0; margin: clamp(24px, 4vh, 38px) 0 0; padding: 0; list-style: none; max-width: 58ch; }
.nl-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.nl-list li:last-child { border-bottom: 1px solid var(--line); }
.nl-list__n { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: 11px; color: var(--accent); font-family: var(--mono); font-size: 12px; }
.nl-list strong { display: block; margin-bottom: 4px; color: var(--white); font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.nl-list p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* cartão do formulário */
.nl-card { position: relative; display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); min-width: 0; }
.nl-card::before { content: ""; position: absolute; top: -1px; left: 30px; width: 56px; height: 2px; border-radius: 2px; background: var(--accent); }
.nl-card__head { display: grid; gap: 10px; justify-items: start; }
.nl-card__head h2 { margin: 0; }
.nl-card__head .body { font-size: 14px; }
.nl-form { display: grid; gap: 14px; }
.nl-form .field { gap: 8px; }
.nl-form .field-error { min-height: 0; }
.nl-form .field-error:empty { display: none; }
.nl-form .opt { color: var(--dim); text-transform: none; letter-spacing: 0; font-family: inherit; }
.nl-consent .check { min-height: 44px; padding: 4px 0; font-size: 12.5px; }
.nl-consent .check a { color: var(--accent); text-underline-offset: 3px; }
.nl-consent .field-error { margin-top: 4px; }
.check input[aria-invalid="true"] { outline: 2px solid #f0a58a; outline-offset: 2px; }
.nl-alert { margin: 0; padding: 12px 14px; border: 1px solid rgba(240, 165, 138, .4); border-radius: 12px; color: #f0a58a; font-size: 13px; line-height: 1.5; }
.nl-note { margin: 0; color: var(--dim); font-size: 11.5px; line-height: 1.5; text-align: center; }
.nl-form .btn { margin-top: 2px; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .arrow-box svg { display: none; }
.btn.is-loading .arrow-box::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(22, 32, 14, .25); border-top-color: var(--accent-ink); animation: nl-spin .7s linear infinite; }
@keyframes nl-spin { to { transform: rotate(360deg); } }

/* estados de sucesso e páginas de retorno */
.nl-done { display: grid; gap: 16px; justify-items: start; }
.nl-done h2, .nl-done h1 { margin: 0; }
.nl-done:focus, .nl-done h2:focus { outline: none; }
.nl-ok { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(var(--accent-rgb), .4); border-radius: 16px; background: rgba(var(--accent-rgb), .07); color: var(--accent); }
.nl-ok svg { width: 26px; height: 26px; }
.nl-ok--warn { border-color: rgba(240, 165, 138, .45); background: rgba(240, 165, 138, .07); color: #f0a58a; }
.nl-sent { margin: 0; padding: 10px 14px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--white); font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.nl-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.nl-steps li { position: relative; padding-left: 36px; color: var(--soft); font-size: 14.5px; line-height: 1.55; counter-increment: s; }
.nl-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--accent); font-family: var(--mono); font-size: 11px; }
.nl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.link-btn {
  min-height: 44px; padding: 8px 2px; border: 0; background: none; color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: rgba(145, 151, 143, .4); text-underline-offset: 4px;
}
.link-btn:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* páginas de retorno */
.nl-page { display: grid; gap: clamp(28px, 5vh, 48px); max-width: 880px; margin-inline: auto; }
.nl-page__card { padding: clamp(24px, 4vw, 44px); }
.nl-page__card .lede { max-width: 54ch; }
.nl-page__title { font-size: clamp(30px, 4vw, 52px); }
.nl-picks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nl-pick { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 16, 15, .6); transition: border-color .25s, transform .25s var(--ease); }
.nl-pick:hover { border-color: rgba(var(--accent-rgb), .32); transform: translateY(-2px); }
.nl-pick img { width: 132px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #0a0c0b; }
.nl-pick__body { display: grid; gap: 6px; min-width: 0; }
.nl-pick__cat { color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.nl-pick a { color: var(--white); font-size: 16.5px; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; text-decoration: none; }
.nl-pick a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.nl-pick a:focus-visible { outline-offset: -2px; }
.nl-pick__meta { color: var(--dim); font-size: 12.5px; }
.nl-picks-head { display: grid; gap: 8px; }
.nl-picks-head h2 { margin: 0; }

@media (max-width: 960px) {
  .nl-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; align-items: start; }
}
@media (max-width: 600px) {
  .nl-pick { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .nl-pick img { width: 96px; }
  .nl-pick a { font-size: 15.5px; }
  .nl-actions .btn { width: 100%; }
}
@media (max-width: 900px) {
  .brand-mark { min-height: 44px; }
  .site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
}