/* Newsletter box in the footer (the footer is always dark navy). Logical properties only. */
.nl-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 32px; align-items: center; padding: 22px 0 26px; margin-bottom: 28px; border-block: 1px solid rgba(255, 255, 255, .1); }
.nl-text h4 { margin-bottom: 6px; }
.nl-text p { margin: 0; font-size: 14px; }
.nl-form { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.nl-input { flex: 1 1 220px; min-width: 0; font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; }
.nl-input::placeholder { color: rgba(234, 240, 255, .6); }
.nl-input:focus { outline: none; border-color: #8db8ff; box-shadow: 0 0 0 4px rgba(141, 184, 255, .25); }
.nl-note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: rgba(234, 240, 255, .6); }
.nl-note a { text-decoration: underline; }
@media (max-width: 760px) { .nl-box { grid-template-columns: minmax(0, 1fr); } .nl-form .btn { flex: 1 1 100%; } }