.newsletter-gate {
  --newsletter-ink: oklch(0.115 0.012 26);
  --newsletter-surface: oklch(0.185 0.016 26);
  --newsletter-paper: oklch(0.965 0.02 82);
  --newsletter-copy: oklch(0.84 0.04 78);
  --newsletter-muted: oklch(0.66 0.035 70);
  --newsletter-red: oklch(0.57 0.18 29);
  --newsletter-red-dark: oklch(0.48 0.17 28);
  --newsletter-serif: Georgia, "Times New Roman", serif;
  --newsletter-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --newsletter-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

body.newsletter-open {
  overflow: hidden;
}

.newsletter-gate[hidden] {
  display: none;
}

.newsletter-gate {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  color: var(--newsletter-paper);
  font-family: var(--newsletter-sans);
  opacity: 0;
  transition-property: opacity;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.newsletter-gate.is-visible {
  opacity: 1;
}

.newsletter-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background:
    radial-gradient(circle at 50% 48%, oklch(0.48 0.17 28 / 0.2), transparent 30rem),
    oklch(0.07 0.01 26 / 0.86);
  border: 0;
  opacity: 0;
  backdrop-filter: blur(0);
  transition-property: opacity, backdrop-filter;
  transition-duration: 320ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.newsletter-gate.is-visible .newsletter-backdrop {
  opacity: 1;
  backdrop-filter: blur(14px);
}

.newsletter-card {
  position: relative;
  isolation: isolate;
  width: min(100%, 680px);
  overflow: hidden;
  padding: clamp(30px, 5vw, 58px);
  background:
    linear-gradient(135deg, oklch(1 0 0 / 0.045), transparent 42%),
    var(--newsletter-surface);
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.12),
    0 36px 90px oklch(0 0 0 / 0.58),
    0 0 80px oklch(0.48 0.17 28 / 0.14);
  opacity: 0;
  filter: blur(10px);
  transform: translateY(18px) scale(0.96);
  transition-property: opacity, filter, transform;
  transition-duration: 360ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.newsletter-gate.is-visible .newsletter-card {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.newsletter-card::before {
  position: absolute;
  z-index: -1;
  content: "";
  inset: -30% auto auto 48%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, oklch(0.48 0.17 28 / 0.24), transparent 64%);
  transform: translateX(-50%);
  pointer-events: none;
}

.newsletter-signal {
  position: absolute;
  z-index: 4;
  inset: 50% auto auto 50%;
  width: 24px;
  height: 24px;
  border: 2px solid var(--newsletter-red);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  pointer-events: none;
}

.newsletter-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(42px, 7vw, 72px);
  color: var(--newsletter-muted);
  font-family: var(--newsletter-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.newsletter-kicker i {
  width: 8px;
  height: 8px;
  background: var(--newsletter-red);
  border-radius: 50%;
  box-shadow: 0 0 18px var(--newsletter-red);
  animation: newsletter-pulse 1.8s ease-in-out infinite;
}

.newsletter-label {
  margin: 0 0 12px;
  color: var(--newsletter-red);
  font-family: var(--newsletter-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.newsletter-copy h2 {
  max-width: 13ch;
  margin: 0;
  color: var(--newsletter-paper);
  font-family: var(--newsletter-serif);
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.94;
  text-wrap: balance;
}

.newsletter-copy h2 em {
  color: var(--newsletter-red);
  font-weight: inherit;
}

.newsletter-copy > p:last-child {
  max-width: 55ch;
  margin: 22px 0 0;
  color: var(--newsletter-copy);
  font-family: var(--newsletter-serif);
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.newsletter-form {
  margin-top: 30px;
}

.newsletter-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.newsletter-form > label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.newsletter-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px;
  background: var(--newsletter-ink);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.12),
    0 14px 36px oklch(0 0 0 / 0.28);
  transition-property: box-shadow;
  transition-duration: 180ms;
}

.newsletter-field:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--newsletter-red),
    0 14px 36px oklch(0 0 0 / 0.28),
    0 0 0 4px oklch(0.48 0.17 28 / 0.18);
}

.newsletter-field input {
  min-width: 0;
  height: 54px;
  padding: 0 16px;
  color: var(--newsletter-paper);
  background: transparent;
  border: 0;
  outline: 0;
}

.newsletter-field input::placeholder {
  color: var(--newsletter-muted);
}

.newsletter-field button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 174px;
  min-height: 54px;
  padding: 0 18px;
  color: var(--newsletter-paper);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--newsletter-red-dark);
  border: 0;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.12),
    0 8px 20px oklch(0.48 0.17 28 / 0.28);
  cursor: pointer;
  transition-property: background-color, transform;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.newsletter-field button:hover,
.newsletter-field button:focus-visible {
  background: var(--newsletter-red);
}

.newsletter-field button:active {
  transform: scale(0.96);
}

.newsletter-field button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.newsletter-button-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.newsletter-form.is-sending .newsletter-button-icon {
  animation: newsletter-transmit 660ms ease-in-out infinite alternate;
}

.newsletter-error {
  min-height: 18px;
  margin: 8px 4px 0;
  color: oklch(0.76 0.16 28);
  font-size: 0.72rem;
}

.newsletter-returning {
  margin: 2px 4px 12px;
  color: var(--newsletter-copy);
  font-family: var(--newsletter-serif);
  font-size: 0.82rem;
  line-height: 1.5;
}

.newsletter-returning strong {
  color: var(--newsletter-red);
  font-family: var(--newsletter-sans);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.newsletter-terms {
  margin: 0 4px;
  color: var(--newsletter-muted);
  font-size: 0.65rem;
  line-height: 1.45;
}

.newsletter-terms a {
  color: var(--newsletter-copy);
}

.newsletter-confirmation {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 32px;
  text-align: center;
  background:
    radial-gradient(circle, oklch(0.48 0.17 28 / 0.34), transparent 50%),
    var(--newsletter-surface);
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.25);
  pointer-events: none;
  transition-property: opacity, filter, transform;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.newsletter-gate.is-confirmed .newsletter-confirmation {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.confirmation-mark {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin-bottom: 28px;
  color: var(--newsletter-paper);
  font-family: var(--newsletter-serif);
  font-size: 1.2rem;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.32),
    0 0 0 12px oklch(0.48 0.17 28 / 0.12),
    0 0 52px oklch(0.48 0.17 28 / 0.56);
}

.newsletter-confirmation p,
.newsletter-confirmation strong,
.newsletter-confirmation small {
  margin: 0;
}

.newsletter-confirmation p {
  color: var(--newsletter-red);
  font-family: var(--newsletter-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.newsletter-confirmation strong {
  margin-top: 10px;
  color: var(--newsletter-paper);
  font-family: var(--newsletter-serif);
  font-size: clamp(2.3rem, 6vw, 4.7rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.newsletter-confirmation small {
  margin-top: 16px;
  color: var(--newsletter-copy);
  font-size: 0.76rem;
}

.newsletter-gate.is-confirmed .newsletter-signal {
  animation: newsletter-shockwave 760ms cubic-bezier(0.2, 0, 0, 1) forwards;
}

.newsletter-gate.is-exiting {
  animation: newsletter-gate-flash 680ms ease-in forwards;
}

.newsletter-gate.is-exiting .newsletter-card {
  animation: newsletter-card-exit 680ms cubic-bezier(0.7, 0, 1, 0.5) forwards;
}

.newsletter-gate.is-closing .newsletter-card {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(12px) scale(0.98);
}

@keyframes newsletter-pulse {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes newsletter-transmit {
  from {
    opacity: 0.4;
    transform: translateX(-3px);
  }
  to {
    opacity: 1;
    transform: translateX(3px);
  }
}

@keyframes newsletter-shockwave {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(38);
  }
}

@keyframes newsletter-gate-flash {
  0% {
    filter: brightness(1);
    opacity: 1;
  }
  24% {
    filter: brightness(2.25);
    opacity: 1;
  }
  100% {
    filter: brightness(1);
    opacity: 0;
  }
}

@keyframes newsletter-card-exit {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
  28% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-4px) scale(1.025);
  }
  100% {
    opacity: 0;
    filter: blur(18px);
    transform: translateY(14px) scale(0.72);
  }
}

@media (max-width: 640px) {
  .newsletter-gate {
    align-items: end;
    padding: 10px;
  }

  .newsletter-card {
    width: 100%;
    padding: 30px 22px 24px;
    border-radius: 24px;
  }

  .newsletter-kicker {
    margin-bottom: 42px;
  }

  .newsletter-copy h2 {
    font-size: clamp(2.35rem, 13vw, 3.7rem);
  }

  .newsletter-field {
    grid-template-columns: 1fr;
  }

  .newsletter-field button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .newsletter-kicker i,
  .newsletter-form.is-sending .newsletter-button-icon,
  .newsletter-gate.is-exiting,
  .newsletter-gate.is-exiting .newsletter-card,
  .newsletter-gate.is-confirmed .newsletter-signal {
    animation: none;
  }

  .newsletter-gate,
  .newsletter-backdrop,
  .newsletter-card,
  .newsletter-confirmation {
    transition-duration: 1ms;
  }
}