/* ═══════════════════════════════════════════════════════
   NEWSLETTER SIGNUP: in-flow card at the calculator result,
   at the end of content pages, and in the footer.

   Class names are ns- prefixed and every rule is scoped under
   .newsletter-signup on purpose. layout.css already owns the
   bare .newsletter-heading/-form/-input/-button names (dead
   markup from an older footer block), and page sheets carry
   element-level resets such as `.lifepath-page button
   { background: none }` — which outranks a bare single class.
   Scoping wins both fights without a single !important.
═══════════════════════════════════════════════════════ */

.newsletter-signup {
  --ns-card: rgba(20, 18, 58, 0.72);
  --ns-card-2: rgba(28, 24, 78, 0.5);
  --ns-border: rgba(139, 127, 217, 0.28);
  --ns-text-1: #ffffff;
  --ns-text-2: #d8d5f0;
  --ns-text-3: #a8a5c8;
  --ns-gold: #ffd93d;

  max-width: 900px;
  margin: 32px auto;
  padding: 24px 22px;
  background: linear-gradient(135deg, var(--ns-card) 0%, var(--ns-card-2) 100%);
  border: 1px solid var(--ns-border);
  border-radius: 18px;
  font-family: var(--font-secondary, 'Inter', sans-serif);
}

.newsletter-signup .ns-heading {
  margin: 0;
  font-family: var(--font-secondary, 'Inter', sans-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ns-text-1);
}

.newsletter-signup .ns-sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ns-text-2);
}

.newsletter-signup .ns-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  max-width: none;
}

.newsletter-signup .ns-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ns-text-1);
  background: rgba(10, 9, 30, 0.55);
  border: 1px solid var(--ns-border);
  border-radius: 10px;
}

.newsletter-signup .ns-input::placeholder {
  color: var(--ns-text-3);
}

.newsletter-signup .ns-input:focus-visible {
  outline: 2px solid var(--ns-gold);
  outline-offset: 1px;
}

.newsletter-signup .ns-button {
  flex: 0 0 auto;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #12112a;
  background: var(--ns-gold);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.newsletter-signup .ns-button:hover {
  background: #ffe066;
}

.newsletter-signup .ns-consent {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ns-text-3);
}

.newsletter-signup .ns-consent a {
  color: var(--ns-text-2);
}

/* Honeypot: off-screen for humans, present in the DOM for bots. Never
   display:none — some bots skip hidden fields, which defeats the trap. */
.newsletter-signup .ns-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* In the footer the card sits on an already-dark band: flatten it so it
   reads as part of the footer rather than a second floating panel. */
.site-footer .newsletter-signup {
  margin: 0 0 28px;
  background: rgba(10, 9, 30, 0.35);
}

@media (max-width: 520px) {
  .newsletter-signup .ns-form {
    flex-direction: column;
  }

  /* The 240px basis is a WIDTH hint for the row layout; once the flex
     direction turns to column it becomes a HEIGHT and stretches the input
     into a tall box. Reset it here — width comes from the column instead. */
  .newsletter-signup .ns-input {
    flex: 0 0 auto;
    width: 100%;
  }

  .newsletter-signup .ns-button {
    width: 100%;
  }
}