/* ══════════════════════════════════════════════
   FOR LAVIN — style.css  (heartfelt / comeback)
   Deep Crimson · Soft Rose · Champagne Gold
   ══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Quicksand:wght@300;400;600;700&display=swap');

/* ─── Reset & Tokens ──────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg0:    #07000e;
  --bg1:    #0f0018;
  --bg2:    #180024;
  --red:    #e8174a;
  --rose:   #ff5c8a;
  --pink:   #ffadc8;
  --gold:   #ffe066;
  --gold2:  #ffb347;
  --purple: #9b3de8;
  --purple2:#c084fc;
  --white:  #fff5f8;
  --muted:  #c9a0b8;
  --glass:  rgba(255,255,255,0.055);
  --border: rgba(255,92,138,0.22);
  --glow-r: rgba(232,23,74,0.45);
  --glow-g: rgba(255,224,102,0.3);
  --glow-p: rgba(155,61,232,0.35);
}

html { font-size:16px; }
body {
  font-family: 'Quicksand', sans-serif;
  background: var(--bg0);
  color: var(--white);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ─── Canvas ──────────────────────────────── */
#canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ─── Aurora ──────────────────────────────── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora > div {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: auroraMove 14s ease-in-out infinite;
}
.a1 {
  width: 650px; height: 650px;
  background: radial-gradient(circle, var(--red) 0%, transparent 65%);
  top: -180px; left: -180px;
  opacity: 0.22;
  animation-duration: 13s;
}
.a2 {
  width: 580px; height: 580px;
  background: radial-gradient(circle, var(--purple) 0%, transparent 65%);
  bottom: -160px; right: -160px;
  opacity: 0.20;
  animation-duration: 17s;
  animation-direction: reverse;
}
.a3 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--gold) 0%, transparent 65%);
  top: 45%; left: 42%;
  opacity: 0.10;
  animation-duration: 20s;
}
@keyframes auroraMove {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(50px,-35px) scale(1.12); }
  66%      { transform: translate(-35px,55px) scale(0.92); }
}

/* ══════════════════════════════════════════════
   SPLASH SCREEN
   ══════════════════════════════════════════════ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg0);
  transition: opacity .9s ease, transform .9s ease;
}
.splash.out {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}

/* Rings */
.splash-rings { position: absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,92,138,0.18);
  animation: ringBreath 4s ease-in-out infinite;
}
.r1 { width:220px; height:220px; animation-delay:0s; }
.r2 { width:340px; height:340px; animation-delay:.5s; border-color:rgba(255,92,138,0.11); }
.r3 { width:460px; height:460px; animation-delay:1s; border-color:rgba(255,92,138,0.07); }
.r4 { width:580px; height:580px; animation-delay:1.5s; border-color:rgba(255,92,138,0.04); }
@keyframes ringBreath {
  0%,100% { transform:scale(1); opacity:.7; }
  50%      { transform:scale(1.05); opacity:1; }
}

.splash-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.splash-heart {
  font-size: 5.5rem;
  filter: drop-shadow(0 0 35px rgba(232,23,74,.85));
  animation: sHeartBeat 1.3s ease infinite;
}
@keyframes sHeartBeat {
  0%,100% { transform:scale(1); }
  14%     { transform:scale(1.32); }
  28%     { transform:scale(1.05); }
  42%     { transform:scale(1.22); }
}

.splash-for {
  font-size: .85rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--muted);
}

.splash-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.5rem, 13vw, 7rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), var(--rose), var(--purple2), var(--gold));
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nameShimmer 4s linear infinite;
  filter: drop-shadow(0 4px 24px rgba(255,92,138,.35));
  line-height: 1;
}
@keyframes nameShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.splash-tagline {
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: .5px;
  margin-top: .2rem;
}

/* ─── CTA Button ──────────────────────────── */
.cta-btn {
  position: relative;
  margin-top: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 2.8rem;
  border: none;
  border-radius: 60px;
  background: linear-gradient(135deg, var(--red) 0%, var(--rose) 50%, var(--purple) 100%);
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(232,23,74,.5);
  animation: ctaPulse 2.5s ease-in-out infinite;
  transition: transform .2s;
}
.cta-btn:hover { transform: scale(1.06); }
.cta-btn:active { transform: scale(.95); }
.cta-icon { font-size: 1.4rem; }

@keyframes ctaPulse {
  0%,100% { box-shadow: 0 8px 40px rgba(232,23,74,.5); }
  50%      { box-shadow: 0 8px 60px rgba(232,23,74,.8), 0 0 80px rgba(155,61,232,.3); }
}

.cta-shine {
  position: absolute;
  top:-50%; left:-55%;
  width:35%; height:200%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-20deg);
  animation: shineSweep 3s ease-in-out infinite;
}
@keyframes shineSweep {
  0%,40%  { left:-55%; }
  100% { left:160%; }
}

/* ══════════════════════════════════════════════
   EXPERIENCE / PAGES
   ══════════════════════════════════════════════ */
.experience {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.experience.hidden { display: none; }

/* ─── Pages ───────────────────────────────── */
.page {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem 4rem;
  animation: pageIn .65s cubic-bezier(.34,1.56,.64,1) forwards;
}
.page.active { display: flex; }

@keyframes pageIn {
  from { opacity:0; transform:scale(.87) translateY(28px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* ─── Cards ───────────────────────────────── */
.card {
  max-width: 580px;
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 2.4rem 2rem;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 30px 70px rgba(0,0,0,.55),
    0 0 60px rgba(232,23,74,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  max-height: 88vh;
  overflow-y: auto;
}
.card::-webkit-scrollbar { width:3px; }
.card::-webkit-scrollbar-thumb { background:var(--rose); border-radius:2px; }

.wide-card { max-width: 700px; }

/* ─── Shared Typography ───────────────────── */
.card-label {
  font-size: .78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--muted);
}

.lavin-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 9vw, 5rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), var(--rose));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(255,224,102,.4));
  line-height: 1.1;
}

.card-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  font-weight: 700;
  color: var(--pink);
}

.gradient-text {
  background: linear-gradient(135deg, var(--gold), var(--rose), var(--purple2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-body {
  font-size: 1.05rem;
  line-height: 2;
  color: var(--muted);
  max-width: 400px;
}

/* ─── Floating Icons ──────────────────────── */
.moon-icon, .rose-icon {
  font-size: 3rem;
  animation: floatIcon 3s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255,92,138,.5));
}
@keyframes floatIcon {
  0%,100% { transform:translateY(0) rotate(-6deg); }
  50%     { transform:translateY(-12px) rotate(6deg); }
}

/* ─── Pill Button ─────────────────────────── */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 2rem;
  border: 1px solid rgba(255,92,138,.35);
  border-radius: 60px;
  background: linear-gradient(135deg, rgba(232,23,74,.25), rgba(155,61,232,.25));
  color: var(--pink);
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s ease;
  backdrop-filter: blur(8px);
  margin-top: .4rem;
}
.pill-btn:hover {
  background: linear-gradient(135deg, rgba(232,23,74,.5), rgba(155,61,232,.5));
  border-color: var(--rose);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(232,23,74,.35);
  color: #fff;
}
.pill-btn:active { transform: scale(.95); }

/* ══════════════════════════════════════════════
   PAGE 2 — ECG / Heartbeat
   ══════════════════════════════════════════════ */
.ecg-wrapper {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}
.ecg {
  width: 100%;
  height: 68px;
  overflow: visible;
}
.ecg-path {
  fill: none;
  stroke: var(--rose);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: drawECG 1.8s ease forwards;
  filter: drop-shadow(0 0 7px var(--rose));
}
@keyframes drawECG {
  to { stroke-dashoffset: 0; }
}
.ecg-label {
  font-size: .85rem;
  color: var(--muted);
  letter-spacing: 1px;
  animation: fadeIn 1s ease 1.6s backwards;
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}

.type-box {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,92,138,.12);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  text-align: left;
  min-height: 120px;
}
.type-box p {
  font-size: 1rem;
  line-height: 2;
  color: var(--muted);
  white-space: pre-wrap;
}

/* ══════════════════════════════════════════════
   PAGE 3 — Reasons Grid
   ══════════════════════════════════════════════ */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  width: 100%;
}
.reason {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: rgba(232,23,74,.07);
  border: 1px solid rgba(232,23,74,.15);
  border-radius: 14px;
  text-align: left;
  opacity: 0;
  transform: translateY(18px);
  animation: reasonIn .5s ease var(--d, 0s) forwards;
  transition: all .3s ease;
  cursor: default;
}
.reason:hover {
  background: rgba(232,23,74,.18);
  border-color: var(--rose);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(232,23,74,.2);
}
@keyframes reasonIn {
  to { opacity:1; transform:translateY(0); }
}
.reason span { font-size: 1.6rem; flex-shrink:0; }
.reason p    { font-size: .88rem; color: var(--muted); line-height:1.5; }

/* ══════════════════════════════════════════════
   PAGE 4 — Promise List
   ══════════════════════════════════════════════ */
.promise-list {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  text-align: left;
}
.promise-list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.1rem;
  background: rgba(255,224,102,.05);
  border-left: 3px solid var(--gold);
  border-radius: 0 14px 14px 0;
  color: var(--muted);
  font-size: .98rem;
  opacity: 0;
  transform: translateX(20px);
  animation: promiseIn .5s ease var(--d, 0s) forwards;
  transition: all .3s ease;
  cursor: default;
}
.promise-list li:hover {
  background: rgba(255,224,102,.12);
  border-left-color: var(--gold2);
  transform: translateX(6px);
  color: var(--white);
}
@keyframes promiseIn {
  to { opacity:1; transform:translateX(0); }
}
.p-dot { font-size: 1.3rem; flex-shrink:0; }

/* ══════════════════════════════════════════════
   PAGE 5 — Grand Finale
   ══════════════════════════════════════════════ */
.finale-card {
  background: linear-gradient(135deg,
    rgba(232,23,74,.12),
    rgba(155,61,232,.12),
    rgba(255,224,102,.06)) !important;
  border-color: rgba(255,224,102,.25) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 30px 80px rgba(0,0,0,.6),
    0 0 80px rgba(232,23,74,.15),
    0 0 120px rgba(155,61,232,.1) !important;
}

.big-heart {
  font-size: 7rem;
  animation: bigBeat 1.1s ease infinite;
  filter: drop-shadow(0 0 40px rgba(232,23,74,.9));
  cursor: pointer;
  user-select: none;
}
@keyframes bigBeat {
  0%,100% { transform:scale(1); }
  15%     { transform:scale(1.3); }
  30%     { transform:scale(1.04); }
  45%     { transform:scale(1.18); }
}

.finale-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 12vw, 6.5rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), var(--rose), var(--purple2), var(--gold));
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nameShimmer 3s linear infinite;
  filter: drop-shadow(0 4px 30px rgba(255,92,138,.4));
  line-height: 1;
}

.finale-sub {
  font-size: 1.05rem;
  color: var(--muted);
  font-style: italic;
  max-width: 360px;
}

.finale-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--gold);
  background: rgba(255,224,102,.08);
  border: 1px solid rgba(255,224,102,.18);
  border-radius: 12px;
  padding: .9rem 1.3rem;
  max-width: 380px;
  line-height: 1.7;
}

.finale-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin-top: .4rem;
}

.glow-btn {
  position: relative;
  width: 100%;
  max-width: 280px;
  padding: 1.1rem 2rem;
  border: none;
  border-radius: 60px;
  background: linear-gradient(135deg, var(--gold2), var(--red), var(--purple));
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(255,179,71,.4);
  animation: glowPulse 2s ease-in-out infinite;
  transition: transform .2s;
}
.glow-btn:hover  { transform: scale(1.07); }
.glow-btn:active { transform: scale(.95); }
@keyframes glowPulse {
  0%,100% { box-shadow: 0 10px 40px rgba(255,179,71,.4); }
  50%      { box-shadow: 0 10px 70px rgba(255,179,71,.7), 0 0 100px rgba(232,23,74,.3); }
}

.ghost-btn {
  background: none;
  border: 1px solid rgba(255,92,138,.28);
  border-radius: 60px;
  color: var(--muted);
  font-family: 'Quicksand', sans-serif;
  font-size: .9rem;
  padding: .6rem 1.6rem;
  cursor: pointer;
  transition: all .3s;
}
.ghost-btn:hover {
  border-color: var(--rose);
  color: var(--white);
  background: rgba(255,92,138,.1);
}

/* ─── Finale Closing ─────────────────────────── */
.finale-closing {
  font-size: 1rem;
  line-height: 2;
  color: var(--muted);
  max-width: 380px;
  background: rgba(255,92,138,.06);
  border: 1px solid rgba(255,92,138,.15);
  border-radius: 16px;
  padding: 1.1rem 1.4rem;
}

/* mood emoji float */
.mood-emoji {
  font-size: 3rem;
  animation: floatIcon 3s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(232,23,74,.4));
}

/* ══════════════════════════════════════════════
   NAV DOTS
   ══════════════════════════════════════════════ */
.dots-nav {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  z-index: 300;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,92,138,.35);
  background: rgba(255,92,138,.18);
  cursor: pointer;
  transition: all .3s;
  padding: 0;
}
.dot:hover  { background: var(--pink); transform: scale(1.3); }
.dot.active {
  background: var(--rose);
  border-color: var(--rose);
  box-shadow: 0 0 10px var(--rose);
  transform: scale(1.45);
}

/* ─── Step Label ──────────────────────────── */
.step-label-bar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .75rem;
  letter-spacing: 2px;
  color: rgba(255,92,138,.4);
  z-index: 300;
}

/* ══════════════════════════════════════════════
   CONFETTI & FLOATING HEARTS
   ══════════════════════════════════════════════ */
#confettiLayer, #heartsLayer {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
}

.cf-piece {
  position: absolute;
  top: -16px;
  animation: cfFall var(--d,3s) ease-in var(--dl,0s) forwards;
}
@keyframes cfFall {
  0%   { transform: translateY(0) rotate(0) translateX(0); opacity:1; }
  100% { transform: translateY(108vh) rotate(var(--r,540deg)) translateX(var(--x,50px)); opacity:0; }
}

.fheart {
  position: absolute;
  bottom: -40px;
  animation: fHeartUp var(--d,8s) ease-in-out var(--dl,0s) forwards;
  opacity: .6;
  pointer-events: none;
  font-size: var(--fs, 1.5rem);
}
@keyframes fHeartUp {
  0%   { transform: translateY(0) translateX(0) rotate(0); opacity:.6; }
  100% { transform: translateY(-110vh) translateX(var(--x,40px)) rotate(360deg); opacity:0; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 520px) {
  .card { padding: 1.6rem 1.1rem; border-radius: 22px; }
  .reasons-grid { grid-template-columns: 1fr; }
  .dots-nav { right: .7rem; }
  .splash-name { font-size: clamp(3rem, 16vw, 5rem); }
}

/* ─── Scrollbar ───────────────────────────── */
::-webkit-scrollbar       { width:5px; }
::-webkit-scrollbar-track { background: var(--bg0); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius:3px; }

/* ══════════════════════════════════════════════
   RESPONSE SECTION — Lavin's choice
   ══════════════════════════════════════════════ */
.response-section {
  width: 100%;
  max-width: 420px;
  background: rgba(255,92,138,.06);
  border: 1px solid rgba(255,92,138,.2);
  border-radius: 20px;
  padding: 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: fadeIn 1s ease forwards;
}

.response-question {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--pink);
  text-align: center;
  line-height: 1.6;
}

.response-btns {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: 100%;
  align-items: center;
}

/* YES button */
.yes-btn {
  position: relative;
  width: 100%;
  max-width: 300px;
  padding: 1rem 1.8rem;
  border: none;
  border-radius: 60px;
  background: linear-gradient(135deg, #e8174a, #ff5c8a, #9b3de8);
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(232,23,74,.5);
  animation: yesPulse 2s ease-in-out infinite;
  transition: transform .2s ease;
  letter-spacing: .3px;
}
.yes-btn:hover  { transform: scale(1.06); }
.yes-btn:active { transform: scale(.95); }

@keyframes yesPulse {
  0%,100% { box-shadow: 0 6px 30px rgba(232,23,74,.45); }
  50%      { box-shadow: 0 6px 50px rgba(232,23,74,.75), 0 0 70px rgba(155,61,232,.25); }
}

/* MAYBE button */
.maybe-btn {
  width: 100%;
  max-width: 300px;
  padding: .8rem 1.8rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 60px;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-family: 'Quicksand', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .3s ease;
  backdrop-filter: blur(8px);
}
.maybe-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
  color: var(--white);
  transform: translateY(-2px);
}
.maybe-btn:active { transform: scale(.96); }

/* ── After YES ─────────────────────────────── */
.after-yes {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 1.5rem 1.2rem;
  background: linear-gradient(135deg, rgba(232,23,74,.12), rgba(155,61,232,.12));
  border: 1px solid rgba(255,92,138,.3);
  border-radius: 20px;
  animation: popIn .6s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes popIn {
  from { opacity:0; transform: scale(.8); }
  to   { opacity:1; transform: scale(1); }
}

.after-yes-heart {
  font-size: 4rem;
  animation: bigBeat 1s ease infinite;
  filter: drop-shadow(0 0 25px rgba(232,23,74,.8));
}

.after-yes-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--pink);
  text-align: center;
}

.after-yes-sub {
  font-size: .88rem;
  color: var(--muted);
  text-align: center;
  letter-spacing: .5px;
}

/* ── After MAYBE ───────────────────────────── */
.after-maybe {
  width: 100%;
  max-width: 380px;
  padding: 1.3rem 1.4rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  font-size: 1rem;
  line-height: 2;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  animation: fadeIn .8s ease forwards;
}

.after-maybe-text { color: var(--muted); }

/* ── Hidden utility ─────────────────────────── */
.hidden { display: none !important; }