/* ============================================================
   NEWSLETTER LANDING  —  studio 2-column signup
   Loaded only on /newsletter/. Mirrors the homepage hero's visual
   language (portrait card + glow + soft background) using the global
   studio tokens from tokens.css. Studio theme (body defaults to "build").
   ============================================================ */

/* ---- section + soft background ---- */
.nl-hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100vh - 4rem); }
.nl-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nl-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.nl-blob--1 { width: 34rem; height: 34rem; top: -10rem; left: -8rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); }
.nl-blob--2 { width: 30rem; height: 30rem; top: -4rem; right: -8rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent 70%); }
.nl-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  opacity: .5;
}

/* ---- eyebrow pill dot ---- */
.nl-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); display: inline-block; }

/* ---- portrait + glow ---- */
.nl-portrait-wrap { position: relative; max-width: 30rem; margin: 0 auto; }
.nl-portrait-glow {
  position: absolute; inset: -8% -6% -4%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, var(--accent-2) 35%, transparent) 45%, transparent 70%);
  filter: blur(40px); opacity: .7; animation: nl-glow 6s ease-in-out infinite;
}
@keyframes nl-glow { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .8; transform: scale(1.04); } }
.nl-portrait {
  position: relative; z-index: 1; width: 100%; display: block;
  /* Transparent cutout — floats on the page (no card frame). drop-shadow follows
     the silhouette (unlike box-shadow), grounding the figure with soft depth. */
  filter: drop-shadow(0 16px 24px color-mix(in srgb, var(--ink) 16%, transparent));
}

/* ---- floating proof chips ---- */
.nl-chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .8rem; font-size: .8rem; font-weight: 600; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  white-space: nowrap;
}
.nl-chip--tl { top: 7%;  left: -12%; transform: rotate(-3deg); animation: nl-float 7s ease-in-out infinite; }
.nl-chip--tr { top: 4%;  right: -10%; transform: rotate(3deg); animation: nl-float 8s ease-in-out infinite .5s; }
@keyframes nl-float { 0%,100% { transform: rotate(var(--nl-rot, 0deg)) translateY(0); } 50% { transform: rotate(var(--nl-rot, 0deg)) translateY(-8px); } }
.nl-chip--tl { --nl-rot: -3deg; }
.nl-chip--tr { --nl-rot: 3deg; }

/* ---- mobile: copy leads, portrait supports ---- */
@media (max-width: 1023px) {
  .nl-chip { display: none; }
  .nl-portrait-wrap { max-width: 22rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nl-portrait-glow, .nl-chip { animation: none; }
}