/* /newsletter — ported from docs/product-knowledge/brand-exploration/prototype/newsletters.html
   + styles.css (.nlx-* ~lines 691-723, .nls-* ~lines 1000-1056) and app.js's scroll-driven
   newsletter scene (~lines 368-456). Scoped under .nlx-front so it never leaks onto other pages.
   Shares the same token values as homepage_front.css / cities_front.css (ink #212121, link/accent
   blue #216bff, hover #0054fc, city-red #c8102e, Inter + 'Bricolage Grotesque'). The masthead/
   footer use the shared .hf-mast / .hf-ftr rules from homepage_front.css (also linked on this page). */

.nlx-front {
  --nf-ink: #212121;
  --nf-ink-a70: rgba(33, 33, 33, 0.7);
  --nf-ink-a50: rgba(33, 33, 33, 0.5);
  --nf-ink-a10: rgba(33, 33, 33, 0.1);
  --nf-white: #ffffff;
  --nf-link: #216bff;
  --nf-accent: #216bff;
  --nf-accent-hover: #0054fc;
  --nf-city-red: #c8102e;
  --nf-border: var(--nf-ink-a10);
  --nf-border-field: var(--nf-ink-a50);
  --nf-surface-blue: #d2f4ff;
  --nf-pastel-butter: #fdf4cd;
  --nf-pastel-mint: #d6f5e3;
  --nf-pastel-blue: #d2f4ff;
  --nf-font-primary: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nf-font-editorial: 'Bricolage Grotesque', Inter, system-ui, sans-serif;
  --nf-space-4: 4px;
  --nf-space-8: 8px;
  --nf-space-12: 12px;
  --nf-space-16: 16px;
  --nf-space-20: 20px;
  --nf-space-24: 24px;
  --nf-space-32: 32px;
  --nf-space-40: 40px;
  --nf-space-48: 48px;
  --nf-space-section-moderate: clamp(48px, calc(48px + 5.8vw), 96px);
  --nf-space-section-dense: clamp(24px, calc(24px + 2.9vw), 48px);
  --nf-radius-pill: 9999px;
  --nf-radius-control: 6px;
  --nf-radius-panel: 16px;
  --nf-radius-media: 10px;

  color: var(--nf-ink);
  font-family: var(--nf-font-primary);
  background: var(--nf-white);
}

.nlx-front .nlx-edge { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.nlx-front .nlx-col { max-width: 44rem; }
.nlx-front .nlx-c-primary { color: var(--nf-ink); }
.nlx-front .nlx-c-secondary { color: var(--nf-ink-a70); }
.nlx-front .nlx-c-body { color: var(--nf-ink-a70); }
.nlx-front .nlx-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.nlx-front .nlx-metadata { font-size: 13px; font-weight: 500; }
.nlx-front .nlx-body-ui { font-size: 15px; }
.nlx-front .nlx-ic20 { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nlx-front a { color: inherit; text-decoration: none; }

.nlx-front .nlx-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: var(--nf-radius-control); font-weight: 600; font-size: 15px; }
.nlx-front .nlx-btn-primary { background: var(--nf-accent); color: var(--nf-white); }
.nlx-front .nlx-btn-primary:hover { background: var(--nf-accent-hover); }

/* HERO */
.nlx-front .nlx-hero { padding-block: var(--nf-space-section-moderate) var(--nf-space-48); border-bottom: 1px solid var(--nf-border); text-align: center; }
.nlx-front .nlx-hero .nlx-col { display: flex; flex-direction: column; align-items: center; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.nlx-front .nlx-pill { display: inline-flex; align-items: center; gap: var(--nf-space-8); padding: var(--nf-space-4) var(--nf-space-12); border-radius: var(--nf-radius-pill); background: var(--nf-pastel-butter); color: var(--nf-ink); }
.nlx-front .nlx-display-xl {
  font-family: var(--nf-font-editorial); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98;
  font-size: clamp(34px, calc(34px + 2.4vw), 56px); max-width: 16ch; margin: var(--nf-space-16) 0 0;
}
.nlx-front .nlx-dek { margin-top: var(--nf-space-16); max-width: 40ch; font-size: clamp(17px, calc(17px + 0.12vw), 18px); }
.nlx-front .nlx-proof { margin-top: var(--nf-space-24); font-weight: 600; color: var(--nf-ink); }
.nlx-front .nlx-quote { margin: var(--nf-space-12) 0 0; max-width: 36ch; font-style: italic; color: var(--nf-ink-a70); }

/* BODY / SELECT / CARD / ISSUES */
.nlx-front .nlx-body { padding-block: var(--nf-space-40) var(--nf-space-section-dense); }
.nlx-front .nlx-count { display: block; margin-bottom: var(--nf-space-8); color: var(--nf-ink); }
/* City select (FM2): 50px field, 20px inset, 16px icons, field-text type, ink-50 boundary (FR-D4, tokens.json). */
.nlx-front .nlx-select { position: relative; }
.nlx-front .nlx-ic16 { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nlx-front .nlx-select select,
.nlx-front .nlx-select-trigger {
  width: 100%; height: 50px; padding: 0 var(--nf-space-20); border: 1px solid var(--nf-border-field); border-radius: var(--nf-radius-control);
  background: var(--nf-white); font-family: var(--nf-font-primary); font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--nf-ink); cursor: pointer;
  transition: border-color 150ms ease-out;
}
.nlx-front .nlx-select select { appearance: none; -webkit-appearance: none; padding-right: 48px; }
.nlx-front .nlx-select-native-chevron { position: absolute; right: var(--nf-space-20); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--nf-ink); }
.nlx-front .nlx-select.is-enhanced .nlx-select-native-chevron { display: none; }
.nlx-front .nlx-select-trigger { display: flex; align-items: center; gap: var(--nf-space-8); text-align: left; }
.nlx-front .nlx-select-trigger[hidden] { display: none; }
.nlx-front .nlx-select-trigger:hover,
.nlx-front .nlx-select-trigger[aria-expanded="true"] { border-color: var(--nf-ink); }
.nlx-front .nlx-select select:focus-visible,
.nlx-front .nlx-select-trigger:focus-visible { outline: 2px solid var(--nf-accent); outline-offset: 2px; }
.nlx-front .nlx-select-value { flex: 1; min-width: 0; }
.nlx-front .nlx-select-chevron { transition: transform 150ms ease-out; }
.nlx-front .nlx-select-trigger[aria-expanded="true"] .nlx-select-chevron { transform: rotate(180deg); }

.nlx-front .nlx-select-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + var(--nf-space-4)); max-height: min(450px, 60vh); overflow-y: auto;
  margin: 0; padding: var(--nf-space-4); list-style: none; background: var(--nf-white);
  border: 1px solid var(--nf-border-field); border-radius: var(--nf-radius-control);
  outline: none; animation: nlx-select-open 150ms ease-out;
}
.nlx-front .nlx-select-list.is-above { top: auto; bottom: calc(100% + var(--nf-space-4)); }
.nlx-front .nlx-select-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-12); min-height: 44px; padding: 0 var(--nf-space-16);
  border-radius: var(--nf-radius-control); font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--nf-ink); cursor: pointer;
}
.nlx-front .nlx-select-option.is-active { background: #EEF2F6; }
.nlx-front .nlx-select-option svg { visibility: hidden; color: var(--nf-accent); }
.nlx-front .nlx-select-option[aria-selected="true"] svg { visibility: visible; }
@keyframes nlx-select-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nlx-front .nlx-select-list { animation: none; }
  .nlx-front .nlx-select-trigger, .nlx-front .nlx-select-chevron { transition: none; }
}

.nlx-front .nlx-card {
  margin-top: var(--nf-space-24); padding: var(--nf-space-32) var(--nf-space-40);
  border-radius: var(--nf-radius-panel); background: var(--nf-surface-blue); text-align: center;
}
/* Restyle the existing, untouched signup partial's inner markup to match the prototype's
   .nlx-card visual treatment without altering its fields/attributes/inline script. */
.nlx-front .nlx-card [id^="custom-form-"] {
  background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0;
}
.nlx-front .nlx-card h2 { font-family: var(--nf-font-editorial); font-weight: 800; font-size: clamp(24px, calc(24px + 1.2vw), 32px); letter-spacing: -0.02em; line-height: 1.1; color: var(--nf-ink) !important; }
.nlx-front .nlx-card p { color: inherit; }

/* LATEST ISSUES */
.nlx-front .nlx-issues { margin-top: var(--nf-space-48); }
.nlx-front .nlx-section-heading { font-family: var(--nf-font-editorial); font-weight: 800; font-size: clamp(22px, calc(22px + 0.8vw), 28px); letter-spacing: -0.02em; }
.nlx-front .nlx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nf-space-16); margin: var(--nf-space-20) 0 0; padding: 0; list-style: none; }
.nlx-front .nlx-issue {
  display: flex; flex-direction: column; gap: var(--nf-space-8); padding: var(--nf-space-16) var(--nf-space-20) var(--nf-space-20);
  border: 1px solid var(--nf-border); border-radius: var(--nf-radius-media); background: var(--nf-white);
}
.nlx-front .nlx-issue:hover { border-color: var(--nf-accent); }
.nlx-front .nlx-issue a { display: flex; flex-direction: column; gap: 4px; }
.nlx-front .nlx-issue-city { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.nlx-front .nlx-issue-title { margin: 0; font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--nf-ink); }

@media (max-width: 639px) {
  .nlx-front .nlx-hero { padding-block: var(--nf-space-40) var(--nf-space-32); }
  .nlx-front .nlx-card { padding: var(--nf-space-24) var(--nf-space-20); }
  .nlx-front .nlx-grid { grid-template-columns: 1fr; }
}

/* ---------- NEWSLETTER SCENE ---------- */
.nlx-front .nls { position: relative; background: var(--nf-surface-blue); overflow: clip; }
.nlx-front .nls-stage { position: relative; overflow: hidden; min-height: 30rem; display: grid; align-items: center; }
.nlx-front .nls-white { position: absolute; inset: 0; background: var(--nf-white); opacity: 0; pointer-events: none; }
.nlx-front .nls-wall {
  position: absolute; inset: -10% -5%; display: flex; flex-direction: column; justify-content: center; gap: .08em;
  opacity: .07; transform: scale(.92); transform-origin: 50% 50%; pointer-events: none;
  font-family: var(--nf-font-editorial); font-weight: 700; font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); color: var(--nf-ink);
}
.nlx-front .nls-row { white-space: nowrap; }
.nlx-front .nls-row > div { display: inline-flex; align-items: center; gap: .28em; transform: translate3d(-25%, 0, 0); will-change: transform; }
.nlx-front .nls-row i { font-style: normal; color: var(--nf-link); }
.nlx-front .nls-row .nls-chip { padding: 0 .22em .04em; border-radius: .18em; line-height: 1; }
.nlx-front .nls-row .nls-chip.butter { background: var(--nf-pastel-butter); }
.nlx-front .nls-row .nls-chip.mint { background: var(--nf-pastel-mint); }
.nlx-front .nls-row .nls-chip.paper { background: var(--nf-white); box-shadow: inset 0 0 0 .04em var(--nf-ink); }

.nlx-front .nls-count { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; text-align: center; }
.nlx-front .nls-num { font-family: var(--nf-font-editorial); font-weight: 800; font-size: clamp(7rem, 4rem + 16vw, 18rem); line-height: .85; letter-spacing: -.06em; color: var(--nf-ink); font-variant-numeric: tabular-nums; }
.nlx-front .nls-lbl { margin-top: var(--nf-space-12); padding: var(--nf-space-4) var(--nf-space-16); border-radius: var(--nf-radius-pill); background: var(--nf-ink); color: var(--nf-white); font-weight: 600; font-size: 17px; }

.nlx-front .nls-copy { position: relative; z-index: 2; padding-block: var(--nf-space-48); }
.nlx-front .nls-copy .nlx-edge { display: flex; flex-direction: column; align-items: flex-start; }
.nlx-front .nls-h {
  margin: 0; max-width: 12ch; font-family: var(--nf-font-editorial); font-weight: 800;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); line-height: .95; letter-spacing: -.04em; color: var(--nf-ink);
}
.nlx-front .nls-h .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.nlx-front .nls-h .w > span { display: inline-block; will-change: transform; }
.nlx-front .nls-sub { margin-top: var(--nf-space-16); max-width: 34ch; font-size: 17px; }
.nlx-front .nls-cta { margin-top: var(--nf-space-24); }

.nlx-front .nls-cards { position: relative; z-index: 1; height: 20rem; margin: var(--nf-space-32) auto 0; width: min(22rem, 80vw); pointer-events: none; }
.nlx-front .nls-card {
  position: absolute; left: 50%; top: 0; width: 15rem; margin-left: -7.5rem; padding: var(--nf-space-16) var(--nf-space-16) var(--nf-space-20);
  border-radius: var(--nf-radius-panel); background: var(--nf-white); box-shadow: 0 16px 40px rgba(33, 33, 33, .16);
  display: flex; flex-direction: column; gap: 6px;
}
.nlx-front .nls-card[data-i="0"] { rotate: -9deg; translate: -4.5rem 1.5rem; }
.nlx-front .nls-card[data-i="1"] { rotate: 2deg; translate: 0 0; z-index: 2; }
.nlx-front .nls-card[data-i="2"] { rotate: 10deg; translate: 4.5rem 2rem; z-index: 1; }
.nlx-front .nls-card-top {
  display: flex; justify-content: space-between; margin: calc(-1 * var(--nf-space-16)) calc(-1 * var(--nf-space-16)) var(--nf-space-4);
  padding: var(--nf-space-8) var(--nf-space-16); border-radius: var(--nf-radius-panel) var(--nf-radius-panel) 0 0;
  font-size: 12px; font-weight: 600; color: var(--nf-ink-a70); background: var(--nf-pastel-butter);
}
.nlx-front .nls-card[data-i="1"] .nls-card-top { background: var(--nf-pastel-mint); }
.nlx-front .nls-card[data-i="2"] .nls-card-top { background: var(--nf-pastel-blue); }
.nlx-front .nls-card-city { margin: var(--nf-space-4) 0 var(--nf-space-4); font-family: var(--nf-font-editorial); font-weight: 800; font-size: 1.625rem; line-height: .95; letter-spacing: -.03em; color: var(--nf-ink); }
.nlx-front .nls-card .bar { display: block; height: 8px; border-radius: 4px; background: var(--nf-ink-a10); }
.nlx-front .nls-card .bar.w90 { width: 90%; }
.nlx-front .nls-card .bar.w80 { width: 80%; }
.nlx-front .nls-card .bar.w70 { width: 70%; }
.nlx-front .nls-card-pill { align-self: flex-start; margin-top: var(--nf-space-8); padding: var(--nf-space-4) var(--nf-space-12); border-radius: var(--nf-radius-pill); background: var(--nf-ink); color: var(--nf-white); font-size: 12px; font-weight: 600; }

@media (min-width: 900px) {
  .nlx-front .nls-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nlx-front .nls-copy, .nlx-front .nls-cards { grid-row: 1; }
  .nlx-front .nls-copy { grid-column: 1; }
  .nlx-front .nls-copy .nlx-edge { margin-right: 0; max-width: 36rem; }
  .nlx-front .nls-cards { grid-column: 2; margin-top: 0; height: 22rem; align-self: center; }
}

/* live: the section becomes a tall scroll track and the stage pins to the viewport. This applies
   at EVERY width (gated only on prefers-reduced-motion, matching the prototype) — it must not be
   scoped to a min-width, otherwise mobile never gets position:sticky and the scene just scrolls
   away normally instead of pinning. */
@media (prefers-reduced-motion: no-preference) {
  .nlx-front .nls.is-live { height: 340vh; }
  .nlx-front .nls.is-live .nls-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
  .nlx-front .nls.is-live .nls-white { opacity: 1; }
  .nlx-front .nls.is-live .nls-wall { opacity: 1; transform: scale(1.12) rotate(-4deg); }
  .nlx-front .nls.is-live .nls-card { opacity: 0; }
  .nlx-front .nls.is-live .nls-h .w > span { transform: translate3d(0, 105%, 0); }
  .nlx-front .nls.is-live .nls-sub, .nlx-front .nls.is-live .nls-cta { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .nlx-front .nls.is-live { height: 300vh; }
  .nlx-front .nls.is-live .nls-stage { align-content: center; grid-template-rows: auto auto; }
  .nlx-front .nls.is-live .nls-cards { height: 15rem; margin-top: 0; transform: scale(.82); transform-origin: 50% 0; }
  .nlx-front .nls.is-live .nls-copy { padding-block: var(--nf-space-16) 0; }
}