/* ════════════════════════════════════════════════════════════════
   Word2Talk — shared design components.
   The harmonized visual language (eyebrow pills, masked headline,
   editorial cards, section rhythm) lifted from the persona pages so
   every marketing page is in sync. Pairs with /static/w2t-motion.js.
   Uses the brand tokens already in marketing.css :root. Generic class
   names (.w2t-*) so any page can opt in without touching its own CSS.
   No soundwave, no audio reader — those stay persona-only.
   ════════════════════════════════════════════════════════════════ */

/* ── Eyebrow pill ── */
.w2t-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full, 9999px);
  background: color-mix(in srgb, var(--bg-card) 70%, transparent);
  backdrop-filter: blur(6px);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.w2t-eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-teal);
  box-shadow: 0 0 0 0 rgba(49, 207, 234, 0.6);
  animation: w2t-pulse 2.4s ease-out infinite;
}

@keyframes w2t-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(49, 207, 234, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(49, 207, 234, 0); }
  100% { box-shadow: 0 0 0 0 rgba(49, 207, 234, 0); }
}

/* ── Masked word-by-word headline reveal (geometry shared with persona) ──
   Mask line-height (1) + a little descender padding stays smaller than the
   headline line-height (1.14) so wrapped lines never overlap. */
[data-split] { line-height: 1.14; }

.w2t-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
  padding-bottom: 0.1em;
}

.w2t-w { display: inline-block; line-height: 1; }

/* ── Editorial cards (spotlight + optional number) ── */
.w2t-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 24px);
  padding: 32px 30px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.w2t-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%),
    rgba(49, 207, 234, 0.13), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.w2t-card:hover {
  border-color: color-mix(in srgb, var(--accent-teal) 45%, var(--border));
  transform: translateY(-4px);
  box-shadow: 0 22px 56px rgba(3, 10, 24, 0.4);
}

.w2t-card:hover::before { opacity: 1; }

.w2t-card__num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--accent-teal) 22%, transparent);
}

.w2t-card > * { position: relative; }

/* ── Section eyebrow header (centered) ── */
.w2t-shead {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.w2t-shead__eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin-bottom: 14px;
}

.w2t-shead__title {
  font-family: 'Sora', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text-primary);
  margin: 0;
}

/* ── Align CTA controls to one height/baseline (shared with persona) ──
   The global .waitlist-form bottom margin otherwise inflates a centered
   flex row and pushes the secondary button down. */
.w2t-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.w2t-cta-row .waitlist-form { margin: 0; }

.w2t-cta-row .btn-primary,
.w2t-cta-row .btn-secondary {
  height: 54px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  line-height: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.w2t-cta-row .waitlist-input {
  height: 54px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  box-sizing: border-box;
}

/* ── Reduced motion: kill the eyebrow pulse ── */
@media (prefers-reduced-motion: reduce) {
  .w2t-eyebrow__dot { animation: none; }
}