/* ===========================================================================
   components.css — buttons, cards, forms, social tiles, floating WA, nav
   =========================================================================== */

/* =======================================================================
   BUTTONS
   ======================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 18px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition:
    background var(--dur-sm) var(--ease-out),
    border-color var(--dur-sm) var(--ease-out),
    color var(--dur-sm) var(--ease-out),
    transform var(--dur-sm) var(--ease-out);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-sm) var(--ease-out);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(4px);
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--accent-red);
  color: var(--text-primary);
}

/* Primary red-outline CTA */
.btn--primary {
  border-color: var(--accent-red);
  background: var(--accent-red-dim);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-red);
  transform: translateY(101%);
  transition: transform var(--dur-md) var(--ease-out);
  z-index: -1;
}
.btn--primary:hover::before,
.btn--primary:focus-visible::before {
  transform: translateY(0);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  border-color: var(--accent-red-hot);
  color: var(--text-primary);
}

/* Ghost button — text only, subtle hover */
.btn--ghost {
  padding: 12px 0;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-bottom-color: var(--accent-red);
  color: var(--text-primary);
}

/* Outline button — secondary CTA, white border, fills white on hover */
.btn--outline {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}
.btn--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--text-primary);
  transform: translateY(101%);
  transition: transform var(--dur-md) var(--ease-out);
  z-index: -1;
}
.btn--outline:hover::before,
.btn--outline:focus-visible::before {
  transform: translateY(0);
}
.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--text-primary);
  color: var(--bg-primary);
}

.btn--large { padding: 22px 36px; font-size: 0.875rem; }

/* Inline link — red underline slide on hover */
.link-inline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  padding-bottom: 4px;
}
.link-inline::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent-red);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--dur-md) var(--ease-out);
}
.link-inline:hover::after,
.link-inline:focus-visible::after { transform: scaleX(1); }

/* =======================================================================
   NAVIGATION
   ======================================================================= */

.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: var(--space-5) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.site-nav > * { pointer-events: auto; }

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav__logo {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* No filter, no transform-animation here — both rasterize the
     logo through a compositor layer and produce visible pixelation
     on small images. Glow is achieved on the <img> via box-shadow alternative below. */
}
.site-nav__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Crisp on retina + non-retina without compositor resample. */
  image-rendering: -webkit-optimize-contrast;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.site-nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--text-primary);
  text-transform: uppercase;
  white-space: nowrap;
}
.site-nav__wordmark small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--tr-eyebrow);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: var(--fw-regular);
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 8px 0;
  transition: color var(--dur-sm) var(--ease-out);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-md) var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link:focus-visible { color: var(--text-primary); }
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { transform: scaleX(1); }

.site-nav__num {
  color: var(--accent-red);
  margin-right: 6px;
  font-size: 0.625rem;
}

@media (max-width: 760px) {
  .site-nav__menu { display: none; }
  .site-nav__logo { width: 55px; height: 55px; }
  .site-nav__wordmark { font-size: 1.1rem; }
  .site-nav__wordmark small { font-size: 0.625rem; }
}

/* =======================================================================
   CARDS
   ======================================================================= */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
  transition:
    border-color var(--dur-md) var(--ease-out),
    transform var(--dur-md) var(--ease-out),
    background var(--dur-md) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 0%),
    rgba(213, 43, 30, 0.12),
    transparent 55%
  );
  opacity: 0;
  transition: opacity var(--dur-md) var(--ease-out);
  pointer-events: none;
}

.card:hover {
  border-color: var(--border-red);
  transform: translateY(-2px);
}
.card:hover::after { opacity: 1; }

.card__meta {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.card__meta span:not(:last-child)::after {
  content: "·";
  margin-left: var(--space-4);
  color: var(--text-dim);
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.05;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.card__body {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  flex-grow: 1;
}

.card__cta {
  margin-top: auto;
  padding-top: var(--space-3);
}

.card__ribbon {
  position: absolute;
  top: 20px;
  right: -32px;
  background: var(--accent-red);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  padding: 4px 40px;
  transform: rotate(35deg);
}

/* =======================================================================
   FORMS
   ======================================================================= */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}

.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.field__label .req { color: var(--accent-red); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-sm) var(--ease-out), background var(--dur-sm) var(--ease-out);
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--accent-red);
  background: var(--bg-secondary);
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--text-dim); }

.field__textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-body);
}

.field__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--text-muted) 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
  cursor: pointer;
}

.field__error {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--accent-red-hot);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  display: none;
}
.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea { border-color: var(--accent-red-hot); }
.field--error .field__error { display: block; }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Inline email capture (newsletter / gated resources) */
.inline-form {
  display: flex;
  gap: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 4px;
  background: var(--bg-tertiary);
  max-width: 560px;
  transition: border-color var(--dur-sm) var(--ease-out);
}
.inline-form:focus-within { border-color: var(--accent-red); }

.inline-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px 20px;
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-family: var(--font-body);
}
.inline-form input::placeholder { color: var(--text-muted); }

.inline-form button {
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  background: var(--accent-red);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-sm) var(--ease-out);
  white-space: nowrap;
}
.inline-form button:hover { background: var(--accent-red-hot); }

@media (max-width: 560px) {
  .inline-form { flex-direction: column; border-radius: var(--radius-md); }
  .inline-form button { width: 100%; }
}

/* Success state for forms */
.form-success {
  display: none;
  padding: var(--space-6);
  border: 1px solid var(--accent-red);
  background: var(--accent-red-dim);
  border-radius: var(--radius-md);
  position: relative;
}
.form-success__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.form-success__body {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.form--submitted .form-success { display: block; }
.form--submitted form { display: none; }

/* =======================================================================
   SOCIAL TILES
   ======================================================================= */

.social-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-3);
}

@media (max-width: 1100px) { .social-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .social-grid { grid-template-columns: repeat(2, 1fr); } }

.social-tile {
  position: relative;
  aspect-ratio: 1 / 1.15;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: color var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
  color: var(--text-primary);
  isolation: isolate;
}

.social-tile__fill {
  position: absolute;
  inset: 0;
  background: var(--plat-color, var(--accent-red));
  transform: translateY(101%);
  transition: transform var(--dur-md) var(--ease-out);
  z-index: -1;
}

.social-tile:hover .social-tile__fill,
.social-tile:focus-visible .social-tile__fill { transform: translateY(0); }
.social-tile:hover,
.social-tile:focus-visible {
  color: #000;
  transform: translateY(-4px);
}

.social-tile__icon {
  width: 32px;
  height: 32px;
  color: currentColor;
}
.social-tile__icon svg { width: 100%; height: 100%; }

.social-tile__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.social-tile__platform {
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: -0.005em;
}
.social-tile__handle {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: currentColor;
  opacity: 0.7;
}
.social-tile__role {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.85;
}

/* =======================================================================
   FLOATING WHATSAPP BUTTON
   ======================================================================= */

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--plat-whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35);
  transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out);
  opacity: 0;
  transform: scale(0.6) translateY(20px);
  pointer-events: none;
}

.whatsapp-float.is-revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.whatsapp-float:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 40px rgba(37, 211, 102, 0.55);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
}

.whatsapp-float::before,
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--plat-whatsapp);
  animation: wa-pulse 2.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}
.whatsapp-float::after { animation-delay: 1.25s; }

@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  80%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

@media (max-width: 420px) {
  .whatsapp-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* =======================================================================
   WHATSAPP — "COMING SOON" MODAL
   Interim component shown when [data-wa-trigger] is clicked.
   Remove this block once the real WA line is wired up.
   ======================================================================= */

.wa-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-md) var(--ease-out), visibility 0s linear var(--dur-md);
}

.wa-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-md) var(--ease-out), visibility 0s linear 0s;
}

.wa-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.wa-modal__panel {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--accent-red);
  border-radius: var(--radius-md);
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(213, 43, 30, 0.08);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur-md) var(--ease-out);
}

.wa-modal.is-open .wa-modal__panel {
  transform: translateY(0) scale(1);
}

.wa-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out),
              background var(--dur-sm) var(--ease-out);
}
.wa-modal__close svg { width: 12px; height: 12px; }
.wa-modal__close:hover,
.wa-modal__close:focus-visible {
  color: var(--text-primary);
  border-color: var(--accent-red);
  background: rgba(213, 43, 30, 0.1);
  outline: none;
}

.wa-modal__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: var(--space-4);
  position: relative;
  padding-left: 26px;
}
.wa-modal__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--accent-red);
}

.wa-modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}

.wa-modal__body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  margin: 0 0 var(--space-6);
}

.wa-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.wa-modal__cta-primary,
.wa-modal__cta-secondary {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
}

.wa-modal__cta-secondary {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.wa-modal__cta-secondary:hover,
.wa-modal__cta-secondary:focus-visible {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

@media (prefers-reduced-motion: reduce) {
  .wa-modal,
  .wa-modal__panel { transition: none; }
}

/* =======================================================================
   TAG / CHIP
   ======================================================================= */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.chip--live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 8px var(--accent-red-hot);
  animation: chip-live 1.4s ease-in-out infinite;
}

@keyframes chip-live {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ============================================================
   Beehiiv subscribe form — iframe + cinematic dark frame.

   The iframe content is cross-origin so we can't restyle the
   form internals from here. Brand match is done in two places:
     1. Beehiiv → Subscribe Forms → Style tab (background, button,
        text colors set to the same tokens used in this stylesheet).
     2. This wrapper, which gives the iframe a dark "card" with a
        red accent rule + mono eyebrow so it reads as a deliberate
        ARB component, not a third-party drop-in.

   When (1) is configured to background #0B0B0C the iframe edges
   merge into .bh-frame and the seam disappears.
   ============================================================ */
.bh-frame {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 22px 6px;
  background: var(--bg-secondary, #0B0B0C);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
  /* the red accent rule is the load-bearing brand signal */
  border-top: 2px solid var(--accent-red, #D52B1E);
  box-shadow: 0 32px 80px -32px rgba(213, 43, 30, 0.32),
              0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  isolation: isolate;
  /* Clip the iframe's reserved scrollbar gutters — Beehiiv's body
     reserves a scrollbar track even when content fits, and we can't
     restyle it from here (cross-origin). The iframe is oversized
     by .bh-frame__viewport so those gutters fall outside the clip. */
  overflow: hidden;
}

/* Inner viewport that hosts the iframe and clips ONLY the vertical
   scrollbar gutter on the right edge. We deliberately do NOT clip
   vertically — the iframe's height is set by Beehiiv's embed.js to
   the form's natural height, so any vertical clip would either
   reveal the iframe's white body background (if we oversize) or
   cut off real form content (if we undersize). The horizontal
   scrollbar gutter at the bottom is rare in practice; if it ever
   shows, the user can disable it inside Beehiiv → Style tab. */
.bh-frame__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Reserved gutter size — comfortably larger than any platform's
     default scrollbar (Mac WebKit ~15px, Windows/Linux ~17px). */
  --bh-gutter-x: 20px;
}

/* Tiny mono "// label" above the iframe — a brand cue that
   identifies the form even before the iframe paints */
.bh-frame__eyebrow {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-micro, 0.7rem);
  letter-spacing: var(--tr-eyebrow, 0.18em);
  text-transform: uppercase;
  color: var(--text-muted, #8A8A8E);
}

.bh-frame__eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--accent-red, #D52B1E);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(213, 43, 30, 0.15);
  animation: chip-live 2.6s ease-in-out infinite;
}

/* Subtle red bloom anchored to the top edge — drama without weight */
.bh-frame::before {
  content: "";
  position: absolute;
  inset: -2px 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(213, 43, 30, 0) 8%,
    rgba(213, 43, 30, 0.55) 50%,
    rgba(213, 43, 30, 0) 92%,
    transparent 100%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}

/* Beehiiv's embed.js writes inline `width: <Npx>` (the form's
   configured width) and `height: <auto>px` on the iframe element.
   Inline styles beat normal CSS, so we !important the width down
   to 100% and let Beehiiv keep ownership of the height (it
   measures its own content). */
.beehiiv-embed {
  /* Oversize horizontally so Beehiiv's reserved vertical scrollbar
     gutter (on the right edge of the iframe) sits past the viewport
     clip. We let the height come from Beehiiv's natural form
     measurement — no min-height override — so the iframe doesn't
     contain extra page-body whitespace. */
  width: calc(100% + var(--bh-gutter-x, 20px)) !important;
  max-width: none !important;
  border: 0;
  border-radius: 0 !important;
  background-color: transparent !important;
  display: block;
  color-scheme: dark;
  box-shadow: none !important;
  margin: 0;
}

.bh-frame--footer {
  max-width: 460px;
  padding: 18px 18px 4px;
}

@media (max-width: 720px) {
  .bh-frame { padding: 16px 12px 4px; }
}

/* On true-mobile widths, claw back every pixel of horizontal room for the
   Beehiiv iframe so its inline form (input + button row) doesn't get squeezed
   into a sliver. We drop the frame inset to a hairline and widen the gutter
   clip so the iframe itself is meaningfully larger than its viewport — the
   Beehiiv form's natural breakpoints then have room to breathe.
   NOTE for ops: if the email input still renders too narrow, the cleanest
   fix is in the Beehiiv dashboard → Forms → Style → set layout to "stacked"
   (input on its own row above the button). That is a 1-click config and
   doesn't require redeploying the site. */
@media (max-width: 480px) {
  .bh-frame { padding: 14px 8px 4px; }
  .bh-frame__viewport { --bh-gutter-x: 32px; }
}

/* ============================================================
   Subscribed-back toast — fires when Beehiiv redirects the
   visitor to /?subscribed=1 after a successful signup.
   Top-of-page slide-down banner in the brand voice.
   ============================================================ */
.subscribed-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 120;
  transform: translate(-50%, -120%);
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  width: min(560px, calc(100vw - 32px));
  padding: 14px 16px 14px 18px;
  background: var(--bg-secondary, #0B0B0C);
  border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.14));
  border-top: 2px solid var(--accent-red, #D52B1E);
  box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(213, 43, 30, 0.18) inset;
  color: var(--text-primary, #fff);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity   220ms ease-out;
}

.subscribed-toast.is-shown {
  transform: translate(-50%, 0);
  opacity: 1;
}

.subscribed-toast__check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-red, #D52B1E);
  color: #fff;
  font-family: var(--font-mono, monospace);
  font-size: 0.95rem;
  font-weight: 600;
}

.subscribed-toast__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: var(--lh-tight, 1.2);
  flex: 1 1 auto;
}

.subscribed-toast__copy strong {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
}

.subscribed-toast__copy span {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #D1D3D4);
}

.subscribed-toast__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  color: var(--text-muted, #8A8A8E);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.subscribed-toast__close:hover {
  border-color: var(--accent-red, #D52B1E);
  color: var(--accent-red-hot, #FF2A1B);
}

@media (prefers-reduced-motion: reduce) {
  .subscribed-toast { transition: opacity 200ms ease-out; }
}