/* === PLAYGROUND: giant hero bg word, ported from .pm-hero-bg (paid-media.css) === */
.fr-hero .crt-container { position: relative; overflow: hidden; padding: clamp(96px, 13vw, 168px) 0 clamp(20px, 3vw, 32px); container-type: inline-size; }
.fr-hero .fr-hero-body { position: relative; z-index: 6; }  /* above the CRT scanlines (z4) + scanbar (z5) so the form/buttons stay clean */
.nl-hero-bg {
  position: absolute; top: 16px; left: 0; right: 0; z-index: 0;
  text-align: center; white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--display); font-weight: 400; font-synthesis: none;
  font-size: min(11.5cqi, 150px); line-height: 1; letter-spacing: -0.02em;
  color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.20) 0 25%,
      rgba(255, 255, 255, 0.135) 25% 50%,
      rgba(255, 255, 255, 0.08) 50% 75%,
      rgba(255, 255, 255, 0.04) 75% 100%);
  background-size: 150px 150px, 100% 100%;
  background-blend-mode: overlay;
  -webkit-background-clip: text; background-clip: text;
  opacity: .9;
}
/* keep the giant wordmark readable + fully on-screen on small viewports:
   let it drop from one bleeding line to two centered lines, sized in vw so it always fits */
@media (max-width: 860px) {
  .nl-hero-bg { white-space: normal; font-size: 16vw; line-height: 0.86; top: 22px; padding: 0 10px; }
}

/* === PLAYGROUND polish (Joey, 2026-07-23): center the above-the-fold, chunky-gradient headline === */
.fr-hero .fr-hero-body { text-align: center; }
.fr-hero .fr-h1, .fr-hero .fr-lead { max-width: 42rem; margin-left: auto; margin-right: auto; }
.fr-hero .fr-chips { justify-content: center; }
.fr-hero .fr-capture { margin-left: auto; margin-right: auto; }
.fr-hero .fr-micro { text-align: center; }

/* enhanced terminal email field — used by BOTH the hero and the "Get it in your inbox" row.
   any <input class="fr-input"> wrapped in <span class="nl-cli"> gets the dark recessed box + > prompt */
.nl-cli { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.nl-cli::before { content: ">"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,0.55); pointer-events: none; z-index: 1; }
.nl-cli .fr-input {
  flex: 1 1 auto; width: 100%; padding-left: 30px;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04), 0 0 16px rgba(255,255,255,0.03);
  color: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.nl-cli .fr-input::placeholder { color: rgba(255,255,255,0.5); }
.nl-cli .fr-input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.62);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.55), 0 0 0 3px rgba(255,255,255,0.06), 0 0 22px rgba(255,255,255,0.09);
}


/* === PLAYGROUND: testimonial "TV" — CRT channel-flip set (Joey, 2026-07-23). All scoped under .nl-tv === */
.nl-tv { margin: 8px 0 48px; }
.nl-tv-head { text-align: center; margin-bottom: 30px; }
.nl-tv-head .fr-eyebrow { justify-content: center; }
.nl-tv-head .fr-h2 { margin: 12px 0 0; }

.nl-tv .tv { position: relative; max-width: 800px; margin: 0 auto; padding: 30px 34px 22px; border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 12%),
    linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) 8%, rgba(0,0,0,0) 92%, rgba(0,0,0,0.5)),
    linear-gradient(180deg, #2a2a2f 0%, #1b1b1f 46%, #121214 78%, #0d0d0f 100%);
  box-shadow: inset 0 3px 1px rgba(255,255,255,0.09), inset 0 -8px 16px rgba(0,0,0,0.7),
    0 48px 90px -32px rgba(0,0,0,0.95), 0 2px 0 rgba(255,255,255,0.04); }
.nl-tv .tv::before { content: ''; position: absolute; inset: 0; border-radius: 30px; pointer-events: none; opacity: 0.55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px; }
.nl-tv .tv::after { content: ''; position: absolute; inset: 0; border-radius: 30px; pointer-events: none; opacity: 0.4; mix-blend-mode: soft-light;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, rgba(0,0,0,0.05) 1px 3px); }

.nl-tv .screw { position: absolute; z-index: 4; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #45454b, #2a2a2e 55%, #0d0d0f 100%);
  box-shadow: inset 0 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.6); }
.nl-tv .screw::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 1.6px; background: rgba(0,0,0,0.55);
  transform: translate(-50%,-50%) rotate(-35deg); border-radius: 1px; }
.nl-tv .screw.tl { top: 12px; left: 13px; } .nl-tv .screw.tr { top: 12px; right: 13px; }
.nl-tv .screw.bl { bottom: 64px; left: 13px; } .nl-tv .screw.br { bottom: 64px; right: 13px; }

.nl-tv .bezel { position: relative; z-index: 2; padding: 14px; border-radius: 46px / 36px;
  background: linear-gradient(180deg, #0b0b0d, #050506);
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.9), inset 0 -1px rgba(255,255,255,0.05), 0 1px rgba(255,255,255,0.05); }

.nl-tv .screen { position: relative; aspect-ratio: 4 / 3; border-radius: 40px / 30px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 45%, #101012 0%, #0a0a0c 60%, #050506 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.8), inset 0 0 30px 6px rgba(0,0,0,0.7), inset 0 0 120px 20px rgba(0,0,0,0.55); }
.nl-tv .tube { position: absolute; inset: 0; transform: scale(1.02); border-radius: 40px / 30px; }

.nl-tv .chan { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5%; padding: 15% 9% 11%; opacity: 0; visibility: hidden; transition: opacity .18s ease; }
.nl-tv .chan.on { opacity: 1; visibility: visible; }
.nl-tv .q { text-align: center; max-width: 46ch; will-change: transform; animation: nltv-drift 6s ease-in-out infinite; }
.nl-tv .q:nth-child(2) { animation-duration: 7.2s; animation-delay: -1.5s; }
.nl-tv .q:nth-child(3) { animation-duration: 6.6s; animation-delay: -3s; }
.nl-tv .q p { margin: 0; font-family: var(--body); font-weight: 400; font-size: clamp(12px, 1.5vw, 16px); line-height: 1.5; color: #eef0f2;
  text-shadow: -0.6px 0 rgba(255,40,80,0.42), 0.6px 0 rgba(0,230,255,0.34), 0 0 12px rgba(255,255,255,0.16); }
.nl-tv .q cite { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 11px; font-style: normal;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.55);
  text-shadow: -0.6px 0 rgba(255,40,80,0.4), 0.6px 0 rgba(0,230,255,0.3); }
.nl-tv .q cite b { color: #fff; font-weight: 400; }
.nl-tv .q .av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none;
  filter: grayscale(0.4) contrast(1.06) brightness(0.92); box-shadow: 0 0 0 1px rgba(255,255,255,0.28), 0 0 9px rgba(255,255,255,0.12); }

.nl-tv .fx { position: absolute; inset: 0; pointer-events: none; border-radius: 40px / 30px; }
.nl-tv .fx-scan { display: none; }  /* scanlines removed - the ATF hero already carries the CRT effect (Joey 2026-07-30) */
.nl-tv .fx-static { opacity: 0.06; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; animation: nltv-snow 0.6s steps(4) infinite; }
.nl-tv .fx-roll { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 48%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.05) 52%, rgba(255,255,255,0) 100%);
  height: 34%; animation: nltv-roll 9s linear infinite; opacity: 0.6; }
.nl-tv .fx-vig { box-shadow: inset 0 0 90px 30px rgba(0,0,0,0.6), inset 0 0 24px 4px rgba(0,0,0,0.5); }
.nl-tv .fx-glare { background: radial-gradient(60% 40% at 28% 16%, rgba(255,255,255,0.09), rgba(255,255,255,0) 60%); }

.nl-tv .osd { position: absolute; z-index: 3; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); text-shadow: 0 0 8px rgba(255,255,255,0.3); pointer-events: none; }
.nl-tv .osd-tl { top: 6%; left: 8%; } .nl-tv .osd-tr { top: 6%; right: 8%; display: flex; align-items: center; gap: 7px; }
.nl-tv .led { width: 6px; height: 6px; border-radius: 50%; background: rgba(40,200,64,0.9); box-shadow: 0 0 7px rgba(40,200,64,0.7); }
.nl-tv .bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; }
.nl-tv .bars i { width: 3px; background: rgba(255,255,255,0.6); }
.nl-tv .bars i:nth-child(1){height:40%} .nl-tv .bars i:nth-child(2){height:65%} .nl-tv .bars i:nth-child(3){height:100%}

.nl-tv .screen.zap .fx-static { opacity: 0.5; animation-duration: 0.12s; }
.nl-tv .screen.zap .tube { animation: nltv-rollglitch 0.28s steps(3); }
.nl-tv .screen.zap .chan.on { opacity: 0.15; }

.nl-tv .panel { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 0 4px; }
.nl-tv .plate { display: flex; align-items: center; gap: 12px; }
.nl-tv .grille { display: grid; grid-template-columns: repeat(2, 4px); gap: 4px 5px; }
.nl-tv .grille i { width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #000, #050506); box-shadow: inset 0 1px rgba(255,255,255,0.05); }
.nl-tv .brandplate { font-family: var(--display); font-size: 15px; letter-spacing: 0.02em; color: rgba(255,255,255,0.5); }
.nl-tv .dial { display: flex; align-items: center; gap: 14px; }
.nl-tv .tvbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); background: linear-gradient(180deg,#2c2c31,#161618);
  color: #fff; font-size: 15px; display: grid; place-items: center; cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,0.14), 0 2px 5px rgba(0,0,0,0.5); transition: transform .1s ease, border-color .15s ease; }
.nl-tv .tvbtn:hover { border-color: rgba(255,255,255,0.4); } .nl-tv .tvbtn:active { transform: translateY(1px); }
.nl-tv .ch-read { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); min-width: 92px; text-align: center; }
.nl-tv .ch-read b { color: #fff; font-weight: 400; }
.nl-tv .dots { display: flex; gap: 7px; }
.nl-tv .dots button { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: transparent; padding: 0; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.nl-tv .dots button.on { background: #fff; border-color: #fff; }
.nl-tv .tv-hint { text-align: center; margin-top: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.32); }

@media (prefers-reduced-motion: reduce) { .nl-tv .q, .nl-tv .fx-static, .nl-tv .fx-roll { animation: none !important; } }
@media (max-width: 560px) { .nl-tv .tv { padding: 18px 18px 16px; border-radius: 20px; } .nl-tv .panel { flex-wrap: wrap; justify-content: center; gap: 12px; } .nl-tv .screw.bl, .nl-tv .screw.br { bottom: 92px; } }

@keyframes nltv-drift { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes nltv-snow { to { background-position: 180px 90px } }
@keyframes nltv-roll { 0% { transform: translateY(-120%) } 100% { transform: translateY(320%) } }
@keyframes nltv-rollglitch { 0%{transform:scale(1.02) translateY(0)} 33%{transform:scale(1.02) translateY(-3px) skewX(-1deg)} 66%{transform:scale(1.02) translateY(2px) skewX(0.6deg)} 100%{transform:scale(1.02)} }


/* PLAYGROUND: "What you unlock" account-perks section (Joey, 2026-07-28). Scoped under .nl-unlock. Monochrome only - no blue/green accents, no drop-shadow hover (per DC taste rules). */
.nl-unlock { margin: 8px 0 56px; }
.nl-unlock-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.nl-unlock-head .fr-eyebrow { justify-content: center; }
.nl-unlock-head .fr-h2 { margin: 12px 0 0; }
.nl-unlock-head p { margin: 14px auto 0; max-width: 52ch; color: rgba(255,255,255,0.62); font-family: var(--body); font-size: 15px; line-height: 1.6; }

.nl-unlock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .nl-unlock-grid { grid-template-columns: 1fr; } }

.nl-perk { border-radius: 4px; padding: 26px 24px 24px; min-width: 0; display: flex; flex-direction: column; }
/* radial rim-noise vignette (ported from .tier-card on the DC service pages): white grain heaviest on the outer rim, fading clean toward the centre */
.nl-perk::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='pk'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.24 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pk)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  -webkit-mask: radial-gradient(ellipse 120% 120% at 50% 50%, transparent 40%, #000 98%);
          mask: radial-gradient(ellipse 120% 120% at 50% 50%, transparent 40%, #000 98%); }
/* warm sunlight glow pools from the top-right on hover (glow only, no drop shadow) */
.nl-perk::before { content: ''; position: absolute; inset: -1px; pointer-events: none; opacity: 0; transition: opacity 0.45s ease;
  background: radial-gradient(72% 60% at 100% 0%, rgba(255,248,235,0.10) 0%, rgba(255,245,228,0.03) 42%, transparent 70%); }
.nl-perk:hover::before { opacity: 1; }
.nl-perk > * { position: relative; z-index: 1; }

.nl-emblem { display: block; margin-bottom: 16px; }
.nl-emblem img { display: block; width: 80px; height: 80px; object-fit: contain; }

.nl-perk-title { font-family: var(--body); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: #fff; margin: 0 0 8px; }
.nl-perk-desc { font-family: var(--body); font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0 0 18px; flex: 1 1 auto; }
.nl-perk-foot { font-family: var(--mono); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.42); padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); }

/* Deals teaser: real deals shown openly (name -> offer). "+N more" nods to the full list behind signup. */
.nl-deal-teasers { display: flex; flex-direction: column; margin: 0 0 4px; flex: 1 1 auto; }
.nl-deal-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.07); }
.nl-deal-name { font-family: var(--body); font-size: 13px; color: rgba(255,255,255,0.82); }
.nl-deal-off { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: #fff; flex: none; white-space: nowrap; }
.nl-deal-row:last-child { border-bottom: 0; }
.nl-deal-more { font-family: var(--mono); text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.12em; font-weight: 500;
  color: #fff; padding-top: 13px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.14); }

.nl-unlock-cta { text-align: center; margin-top: 26px; }
.nl-unlock-cta .fr-micro { margin-top: 12px; }


/* PLAYGROUND: "How do we source our insights" section (Joey, 2026-07-28). Scoped .nl-source. Dark-native rebuild of the light emoji reference. */
.nl-source { margin: 8px 0 60px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center; }
@media (max-width: 860px) { .nl-source { grid-template-columns: 1fr; gap: 30px; } }
.nl-source-copy .fr-h2 { margin: 12px 0 0; }
.nl-source-copy p { font-family: var(--body); font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.62); margin: 18px 0 0; max-width: 42ch; }

/* fixed coordinate canvas so the SVG wires and the HTML nodes stay aligned; everything sized in cqw so it scales as one unit */
.nl-flow { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 560 / 440; container-type: inline-size; }
.nl-flow .wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nl-flow .node, .nl-flow .hub { position: absolute; transform: translateX(-50%); text-align: center; }
.nl-node-box { width: 9cqw; height: 9cqw; margin: 0 auto; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 2cqw; background: rgba(255,255,255,0.03); }
.nl-node-box svg { width: 4.4cqw; height: 4.4cqw; stroke: #fff; fill: none; stroke-width: 1.7; }
.nl-node-lbl { font-family: var(--mono); text-transform: uppercase; font-size: 1.75cqw; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55); margin-top: 1.6cqw; width: 21cqw; line-height: 1.35; }
.nl-hub { }
.nl-hub-box { width: 16cqw; height: 13cqw; margin: 0 auto; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 2.4cqw;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow: 0 0 8cqw -3cqw rgba(255,246,230,0.22), inset 0 1px 0 rgba(255,255,255,0.09); }
.nl-hub-box svg { width: 6cqw; height: 6cqw; stroke: #fff; fill: none; stroke-width: 1.6; }
.nl-hub-lbl { font-family: var(--display); font-size: 3.4cqw; color: #fff; margin-top: 2cqw; letter-spacing: 0.01em; }


/* PLAYGROUND: latest edition -> Editorial Hero (Joey, 2026-07-23). Scoped .nl-ed; reuses the real Read button + 339 watermark, real site fonts only. */
.nl-featured.nl-ed { display: block; text-align: center; overflow: hidden; padding: clamp(44px,6vw,78px) clamp(24px,5vw,60px); background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); }
.nl-ed .nl-featured-in { max-width: 780px; margin: 0 auto; }
/* Latest edition: frontier.css caps .nl-featured-in at 40ch (=336px) for the
   layout that has art alongside. This page has none, so the 46px title wrapped
   to 5-6 lines inside a 1128px-wide card. Two classes to beat that rule. */
.nl-featured .nl-featured-in { max-width: 62rem; }
.nl-featured .nl-featured-deck { max-width: 74ch; }
/* Badge before the "Latest issue . date" line, with air between them. The markup
   order comes from build_frontier.py into views.json, which the content refresh
   overwrites daily - so this is done with flex order rather than by editing
   generated data. align-self keeps the title and deck full-width; the container
   is align-items:flex-start so the badge and button stay content-width. */
.nl-featured .nl-featured-in { display: flex; flex-direction: column; align-items: flex-start; }
.nl-featured .nl-featured-in > .badge { order: -1; margin: 0 0 18px !important; }
.nl-featured .nl-latest-tag { margin: 0 0 16px; }
.nl-featured .nl-featured-title,
.nl-featured .nl-featured-deck { align-self: stretch; }
.nl-ed .nl-ed-kick { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.nl-ed .nl-ed-rule { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(320px, 62%); margin: 16px auto 0; }
.nl-ed .nl-ed-rule .ln { flex: 1; height: 1px; background: rgba(255,255,255,0.28); }
.nl-ed .nl-ed-rule .dot { width: 6px; height: 6px; border: 1px solid #fff; transform: rotate(45deg); flex: none; }
.nl-ed .nl-ed-meta { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin-top: 14px; }
.nl-ed .nl-ed-title { font-size: clamp(34px, 5.2vw, 62px); line-height: 1.0; letter-spacing: -0.01em; margin: 22px auto 0; max-width: 15ch; }
.nl-ed .nl-ed-deck { font-family: var(--body); color: rgba(255,255,255,0.7); font-size: 17px; line-height: 1.55; margin: 20px auto 30px; max-width: 52ch; }
.nl-ed .nl-read-btn { display: inline-flex; margin: 0 auto; }
.nl-ed .nl-featured-watermark { right: -6px; bottom: -38px; color: rgba(255,255,255,0.05); }
@media (max-width: 560px) { .nl-featured.nl-ed { padding: 40px 18px; } }

/* PLAYGROUND (Joey, 2026-07-28): the whole archive is newsletters, so the per-card "Newsletter" badge is redundant - hide it, keep the disk slider strip. */
#nl-archive .floppy-slider .badge { display: none; }
/* Newsletter archive: black/white/grey only - no teal edition numbers / topics (Joey 2026-07-29) */
.nl-disk-num { color: rgba(255,255,255,0.42) !important; }
.nl-disk:hover .nl-disk-num { color: rgba(255,255,255,0.80) !important; }
.nl-topic { color: rgba(255,255,255,0.5) !important; }

/* Latest-edition card: grey, no teal either (Joey 2026-07-29) */
.nl-latest-tag { color: rgba(255,255,255,0.6) !important; }
.nl-featured { background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02) 60%) !important; }
.nl-featured .badge--deepdive { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.22); }

/* Google subscribe option under the hero email form (Joey 2026-07-30) */
.nl-hero-alt { max-width: 32rem; margin: 6px auto 0; }