:root {
  --bg: #0a0a0f;
  --bg-card: #14141c;
  --text: #f5f4f7;
  --text-dim: #9b98a8;
  --accent: #debc7a;
  --accent-2: #4a3f8f;
  --border: #26242f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  overflow-x: hidden;
}

.app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  align-items: safe center;
  justify-content: center;
  position: relative;
  /* fill-mode "backwards" (not "both") — the "to" keyframe's transform/filter
     values must NOT persist after the 1.2s intro finishes. Even a no-op
     value like scale(1)/blur(0) being left "set" on this ancestor creates a
     new containing block for its position:fixed children (.hero-bg,
     .hero-overlay), which silently confines their inset:0 to .app's own box
     instead of the real viewport — the exact cause of the hard background
     cutoff once the page grows taller than one screen. */
  animation: sceneIntro 1.2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes sceneIntro {
  from { opacity: 0; filter: blur(8px); transform: scale(1.05); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

.screen {
  display: none;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  padding: 20px 24px;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  position: relative;
}
.screen.active { display: flex; }

/* ---------- INTRO ---------- */
#screen-intro { align-items: center; text-align: center; overflow: hidden; }

.hero-bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: 0.3;
  filter: blur(30px) saturate(0.8) brightness(0.95);
  z-index: 0;
  animation: bgDrift 9s ease-in-out infinite;
}

@keyframes bgDrift {
  0%, 100% { transform: scale(1.35) translate(2%, 1.5%); }
  50% { transform: scale(1.6) translate(-4%, -4%); }
}

.hero-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,15,0.35) 0%, rgba(10,10,15,0.45) 40%, rgba(10,10,15,0.7) 68%, rgba(10,10,15,0.92) 88%, var(--bg) 100%);
  z-index: 0;
}

.reveal-flash {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at 50% 32%, rgba(255,255,255,0.9) 0%, rgba(222,188,122,0.45) 22%, transparent 60%);
  opacity: 0;
  animation: flashBurst 1.2s ease-out forwards;
}

@keyframes flashBurst {
  0% { opacity: 0; transform: scale(0.25); }
  18% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.sparkles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  animation: sparkleFloat 3.5s ease-in-out infinite;
}
.sparkle.s1 { top: 18%; left: 15%; animation-delay: 0s; }
.sparkle.s2 { top: 30%; left: 82%; animation-delay: 0.8s; width: 3px; height: 3px; }
.sparkle.s3 { top: 55%; left: 8%; animation-delay: 1.6s; }
.sparkle.s4 { top: 68%; left: 88%; animation-delay: 2.4s; width: 5px; height: 5px; }
.sparkle.s5 { top: 12%; left: 55%; animation-delay: 3.2s; width: 3px; height: 3px; }
.sparkle.s6 { top: 80%; left: 45%; animation-delay: 4s; }

@keyframes sparkleFloat {
  0%, 100% { opacity: 0; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-22px) scale(1.4); }
}

/* ---------- CINEMATIC COSMIC PASS ----------
   Deep-space identity for the homepage hero and Daily V2. Pure CSS: tiled
   radial-gradient starfields, blurred nebula/galaxy-haze blobs, sphere-
   shaded planets, an SVG constellation layer, floating zodiac glyphs, and
   rare shooting stars — all layered into three depth GROUPS (far/mid/near)
   so cursor/scroll parallax can move them at different rates. Deliberately
   no canvas/WebGL/video — only background-position/opacity/transform
   animation, so it stays smooth on low-end mobile. The dark .hero-overlay
   gradient (unchanged, reused) still sits on top for text contrast. */
.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% -10%, #1b1530 0%, #0d0b16 45%, #050408 100%);
}

.cosmic-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
/* Near objects move slightly more than far ones — the actual depth cue —
   by multiplying the SAME base offset cosmic-parallax.js computes rather
   than asking the script to track three separate values. */
.cosmic-layer-far { transform: translate3d(calc(var(--cosmic-px, 0px) * 0.25), calc(var(--cosmic-py, 0px) * 0.25), 0); transition: transform 0.4s ease-out; }
.cosmic-layer-mid { transform: translate3d(calc(var(--cosmic-px, 0px) * 0.55), calc(var(--cosmic-py, 0px) * 0.55), 0); transition: transform 0.4s ease-out; }
.cosmic-layer-near { transform: translate3d(calc(var(--cosmic-px, 0px) * 1), calc(var(--cosmic-py, 0px) * 1), 0); transition: transform 0.4s ease-out; }

/* GALAXY / NEBULA DEPTH */
.cosmic-galaxy-haze {
  position: absolute;
  top: -35%;
  left: -25%;
  width: 160%;
  height: 110%;
  background: radial-gradient(ellipse 65% 45% at 30% 20%, rgba(74,63,143,0.48) 0%, transparent 64%),
    radial-gradient(ellipse 55% 40% at 75% 15%, rgba(222,188,122,0.36) 0%, transparent 66%),
    radial-gradient(ellipse 50% 38% at 50% 85%, rgba(74,63,143,0.3) 0%, transparent 65%);
  filter: blur(70px);
  opacity: 0.9;
  animation: cosmicGalaxyDrift 70s ease-in-out infinite;
}
.cosmic-dust {
  position: absolute;
  inset: -10% -10%;
  background: radial-gradient(ellipse 50% 34% at 65% 70%, rgba(56,224,216,0.38) 0%, transparent 68%),
    radial-gradient(ellipse 40% 28% at 10% 55%, rgba(56,224,216,0.28) 0%, transparent 68%),
    radial-gradient(ellipse 42% 30% at 88% 25%, rgba(56,224,216,0.22) 0%, transparent 68%);
  filter: blur(50px);
  opacity: 0.88;
  animation: cosmicGalaxyDrift 50s ease-in-out infinite reverse;
}
@keyframes cosmicGalaxyDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, 2%) scale(1.06); }
}
/* Void-contrast patches — near-black radial pools that sit UNDER the
   haze/dust color layers, giving the nebula color somewhere dark to glow
   against instead of the whole frame reading as one even color wash. Own
   long, non-round drift cycle (85s) so it never lines up with the other
   two galaxy layers. */
.cosmic-void {
  position: absolute;
  inset: -15% -15%;
  background: radial-gradient(ellipse 38% 32% at 18% 30%, rgba(0,0,0,0.55) 0%, transparent 62%),
    radial-gradient(ellipse 42% 30% at 82% 78%, rgba(0,0,0,0.5) 0%, transparent 64%);
  opacity: 0.6;
  animation: cosmicGalaxyDrift 85s ease-in-out infinite;
}

.cosmic-stars {
  position: absolute;
  inset: -20% -20%;
  background-repeat: repeat;
}
.cosmic-stars-far {
  background-image:
    radial-gradient(1.3px 1.3px at 12% 22%, rgba(255,255,255,0.85) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 68% 8%, rgba(255,255,255,0.7) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 35% 65%, rgba(255,255,255,0.8) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 85% 48%, rgba(255,255,255,0.65) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 55% 88%, rgba(255,255,255,0.75) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 5% 45%, rgba(255,255,255,0.6) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 95% 92%, rgba(255,255,255,0.6) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 42% 12%, rgba(255,255,255,0.6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 24% 78%, rgba(255,255,255,0.65) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 60% 40%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 78% 68%, rgba(255,255,255,0.6) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 90% 15%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 18% 5%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 48% 52%, rgba(255,255,255,0.6) 50%, transparent 52%),
    radial-gradient(1px 1px at 72% 92%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 3% 78%, rgba(255,255,255,0.5) 50%, transparent 52%);
  background-size: 230px 230px;
  animation: cosmicDriftSlow 140s linear infinite;
  opacity: 0.85;
}
.cosmic-stars-mid {
  background-image:
    radial-gradient(1.8px 1.8px at 20% 40%, rgba(255,255,255,0.9) 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 78% 20%, rgba(255,255,255,0.8) 50%, transparent 52%),
    radial-gradient(1.9px 1.9px at 46% 75%, rgba(255,255,255,0.85) 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 92% 82%, rgba(255,255,255,0.75) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 8% 85%, rgba(255,255,255,0.7) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 60% 10%, rgba(255,255,255,0.7) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 33% 30%, rgba(255,255,255,0.65) 50%, transparent 52%);
  background-size: 180px 180px;
  animation: cosmicDriftSlow 95s linear infinite reverse;
  opacity: 0.8;
}
.cosmic-stars-near {
  background-image:
    radial-gradient(2.4px 2.4px at 30% 15%, rgba(255,255,255,1) 50%, transparent 52%),
    radial-gradient(2.2px 2.2px at 62% 55%, rgba(255,255,255,0.92) 50%, transparent 52%),
    radial-gradient(2.3px 2.3px at 15% 78%, rgba(255,255,255,0.95) 50%, transparent 52%),
    radial-gradient(2.1px 2.1px at 88% 35%, rgba(255,255,255,0.88) 50%, transparent 52%),
    radial-gradient(2px 2px at 50% 92%, rgba(255,255,255,0.85) 50%, transparent 52%);
  background-size: 150px 150px;
  animation: cosmicDriftSlow 60s linear infinite;
  opacity: 0.9;
}
@keyframes cosmicDriftSlow {
  from { background-position: 0 0; }
  to { background-position: -260px -260px; }
}

.cosmic-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.68;
  will-change: transform;
}
.cosmic-nebula-1 {
  width: 540px;
  height: 540px;
  top: -8%;
  left: -14%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 68%);
  animation: cosmicFloat1 35s ease-in-out infinite;
}
.cosmic-nebula-2 {
  width: 500px;
  height: 500px;
  top: 28%;
  right: -16%;
  background: radial-gradient(circle, var(--accent-2) 0%, transparent 68%);
  animation: cosmicFloat2 50s ease-in-out infinite;
}
.cosmic-nebula-3 {
  width: 440px;
  height: 440px;
  bottom: -10%;
  left: 18%;
  background: radial-gradient(circle, #38e0d8 0%, transparent 70%);
  opacity: 0.52;
  animation: cosmicFloat1 70s ease-in-out infinite reverse;
}
.cosmic-nebula-4 {
  width: 380px;
  height: 380px;
  top: 55%;
  right: 8%;
  background: radial-gradient(circle, #b76bff 0%, transparent 70%);
  opacity: 0.5;
  animation: cosmicFloat2 42s ease-in-out infinite reverse;
}
/* 5th blob, deliberately centered — the four corner/edge blobs above left a
   dead, uniformly-black gap in the middle of the frame; this fills it with
   the same restrained deep-violet family so the sky reads as continuous
   rather than four islands of color on black. */
.cosmic-nebula-5 {
  width: 460px;
  height: 460px;
  top: 32%;
  left: 32%;
  background: radial-gradient(circle, #4a3b8f 0%, transparent 72%);
  opacity: 0.4;
  animation: cosmicFloat1 58s ease-in-out infinite reverse;
}
/* 6th blob — covers the "Meet the 8 Auras" scroll depth specifically, which
   previously had only faint edge-color at that point down the page. */
.cosmic-nebula-6 {
  width: 420px;
  height: 420px;
  top: 68%;
  left: 55%;
  background: radial-gradient(circle, #ff2e93 0%, transparent 70%);
  opacity: 0.34;
  animation: cosmicFloat2 64s ease-in-out infinite;
}

/* NEBULA CLUSTER PROTOTYPE — real cloud structure instead of a single flat
   radial gradient. A dozen small soft "puffs": bright color puffs use
   mix-blend-mode:screen so overlapping hues glow/brighten like real gas
   (never muddy), a handful of dark "void" puffs use mix-blend-mode:multiply
   so there are genuine darker lanes threading through the cluster instead
   of one even wash. Confined to one prominent region (behind the near-layer
   hero planet + Scorpio constellation) as the proof-of-concept scene —
   not yet replicated across the whole page. */
.cosmic-nebula-cluster {
  position: absolute;
  top: -4%;
  right: -14%;
  width: 640px;
  height: 640px;
  pointer-events: none;
}
.nebula-puff {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  mix-blend-mode: screen;
}
.nebula-puff.void {
  mix-blend-mode: multiply;
  filter: blur(30px);
}
.puff-1 { top: 8%; left: 12%; width: 230px; height: 230px; background: radial-gradient(circle, #7b68ee 0%, transparent 72%); opacity: 0.95; animation: cosmicFloat1 52s ease-in-out infinite; }
.puff-2 { top: 22%; left: 46%; width: 200px; height: 200px; background: radial-gradient(circle, #ff2e93 0%, transparent 72%); opacity: 0.85; animation: cosmicFloat2 61s ease-in-out infinite; }
.puff-3 { top: 42%; left: 6%; width: 210px; height: 210px; background: radial-gradient(circle, #4a7fff 0%, transparent 72%); opacity: 0.8; }
.puff-4 { top: 56%; left: 50%; width: 170px; height: 170px; background: radial-gradient(circle, #38e0d8 0%, transparent 72%); opacity: 0.7; animation: cosmicFloat1 47s ease-in-out infinite reverse; }
.puff-5 { top: 2%; left: 55%; width: 180px; height: 180px; background: radial-gradient(circle, #b76bff 0%, transparent 72%); opacity: 0.72; }
.puff-6 { top: 50%; left: 26%; width: 210px; height: 210px; background: radial-gradient(circle, #ff2e93 0%, transparent 72%); opacity: 0.78; animation: cosmicFloat2 58s ease-in-out infinite reverse; }
.puff-7 { top: 32%; left: 64%; width: 155px; height: 155px; background: radial-gradient(circle, #4a7fff 0%, transparent 72%); opacity: 0.62; }
.puff-8 { top: 66%; left: 12%; width: 145px; height: 145px; background: radial-gradient(circle, #38e0d8 0%, transparent 72%); opacity: 0.58; }
.puff-void-1 { top: 26%; left: 32%; width: 160px; height: 160px; background: radial-gradient(circle, rgba(0,0,0,0.95) 0%, transparent 70%); opacity: 0.7; }
.puff-void-2 { top: 12%; left: 38%; width: 115px; height: 115px; background: radial-gradient(circle, rgba(0,0,0,0.92) 0%, transparent 70%); opacity: 0.65; }
.puff-void-3 { top: 60%; left: 40%; width: 135px; height: 135px; background: radial-gradient(circle, rgba(0,0,0,0.92) 0%, transparent 70%); opacity: 0.6; animation: cosmicFloat1 66s ease-in-out infinite; }
.puff-void-4 { top: 40%; left: 58%; width: 100px; height: 100px; background: radial-gradient(circle, rgba(0,0,0,0.88) 0%, transparent 70%); opacity: 0.55; }
@keyframes cosmicFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, 3%) scale(1.08); }
}
@keyframes cosmicFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5%, 4%) scale(1.05); }
}

/* CONSTELLATIONS — eight real zodiac asterisms (Aries, Taurus, Gemini, Leo,
   Virgo, Libra, Scorpio, Pisces), each its own small SVG positioned inside
   one of the three depth layers (far/mid/near) so they read as scattered
   patches of real sky rather than one flat diagram overlay. Stars-first:
   thin, dim connecting lines sit well below the brightness of the star
   points themselves; only the 1-2 brightest ("hero") stars per shape twinkle
   and bloom. Each constellation has its own slow reveal envelope (mostly
   dim, brightens for a window, fades back) so they feel discovered rather
   than always-on UI — no traveling dot, no uniform node grid. */
.cosmic-constellation {
  position: absolute;
  opacity: 0.16;
  will-change: opacity;
}
.cosmic-constellation .constellation-lines {
  opacity: 0.45;
}
.cosmic-constellation .constellation-lines line {
  stroke: rgba(255,255,255,0.7);
  stroke-width: 0.55;
  stroke-linecap: round;
}
.cosmic-constellation .constellation-stars circle {
  fill: rgba(255,255,255,1);
}
.cosmic-constellation .ambient-stars circle {
  fill: #fff;
}
.cosmic-constellation .constellation-stars circle.star-hero {
  fill: rgba(255,255,255,1);
  filter: drop-shadow(0 0 5px rgba(230,240,255,0.95)) drop-shadow(0 0 10px rgba(180,200,255,0.5));
}
@keyframes constellationReveal {
  0%, 20% { opacity: 0.16; }
  40% { opacity: var(--cnst-peak, 0.7); }
  85% { opacity: var(--cnst-peak, 0.7); }
  100% { opacity: 0.16; }
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
/* NEAR — largest, brightest, most parallax response */
.cnst-aries { top: 6%; left: 4%; width: 230px; height: 230px; --cnst-peak: 0.85; animation: constellationReveal 58s ease-in-out infinite 4s; }
/* Prototype hero constellation — enlarged and repositioned into the same
   top-right cluster as planet-1 + the nebula-cluster puffs (was bottom:10%
   right:3% at 250px, tucked outside the natural hero viewport). Shorter
   cycle + no delay so it reaches peak within ~17s for review, rather than
   the ~33s the shared stagger would otherwise require. */
.cnst-scorpio { top: 6%; right: -5%; width: 460px; height: 460px; --cnst-peak: 0.92; animation: constellationReveal 42s ease-in-out infinite 0s; }
/* MID */
.cnst-gemini { top: 10%; right: 4%; width: 190px; height: 190px; --cnst-peak: 0.75; animation: constellationReveal 70s ease-in-out infinite 10s; }
.cnst-virgo { bottom: 4%; left: 10%; width: 200px; height: 200px; --cnst-peak: 0.72; animation: constellationReveal 74s ease-in-out infinite 30s; }
.cnst-leo { top: 48%; right: -7%; width: 170px; height: 170px; --cnst-peak: 0.7; animation: constellationReveal 68s ease-in-out infinite 45s; }
/* FAR — smallest, dimmest, slowest */
.cnst-taurus { top: 5%; left: -6%; width: 140px; height: 140px; --cnst-peak: 0.58; animation: constellationReveal 88s ease-in-out infinite 8s; }
.cnst-libra { top: 35%; left: -5%; width: 120px; height: 120px; --cnst-peak: 0.55; animation: constellationReveal 92s ease-in-out infinite 40s; }
.cnst-pisces { bottom: 6%; left: 38%; width: 130px; height: 130px; --cnst-peak: 0.56; animation: constellationReveal 85s ease-in-out infinite 55s; }

/* CELESTIAL DEPTH — a small number of large, soft glowing spheres, partly
   off-screen, sphere-shaded (offset highlight + rim light + falloff) rather
   than pure haze. One is sharper/closer, others softer/farther, for real
   dimensionality — not identical disks at different sizes. */
.cosmic-planet {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.cosmic-planet-1 {
  width: 360px;
  height: 360px;
  top: -9%;
  right: -11%;
  opacity: 0.92;
  filter: blur(1px);
  background:
    radial-gradient(circle at 74% 76%, rgba(190,180,255,0.55) 0%, transparent 12%),
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.8) 0%, var(--accent-2) 18%, rgba(74,63,143,0.55) 50%, rgba(74,63,143,0.16) 74%, transparent 82%);
  box-shadow: 0 0 170px 42px rgba(74,63,143,0.42), inset -18px -14px 40px rgba(0,0,0,0.4);
  animation: cosmicPlanetFloat1 46s ease-in-out infinite;
}
/* Atmospheric halo ring, a touch larger than the sphere itself and much
   softer — the "atmosphere" cue a bare sphere gradient can't give on its
   own. Separate element (not a box-shadow) so it can have its own blur
   radius independent of the sphere's inset shading shadow. */
.cosmic-planet-1::after {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, transparent 58%, rgba(160,150,255,0.32) 70%, transparent 80%);
  filter: blur(14px);
  pointer-events: none;
}
.cosmic-planet-2 {
  width: 240px;
  height: 240px;
  bottom: -7%;
  left: -9%;
  opacity: 0.8;
  filter: blur(3px);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.7) 0%, #38e0d8 18%, rgba(56,224,216,0.48) 52%, transparent 80%);
  box-shadow: 0 0 130px 30px rgba(56,224,216,0.32);
  animation: cosmicPlanetFloat2 54s ease-in-out infinite;
}
.cosmic-planet-3 {
  width: 145px;
  height: 145px;
  top: 46%;
  left: -6%;
  opacity: 0.72;
  filter: blur(5px);
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.6) 0%, var(--accent) 20%, rgba(222,188,122,0.42) 55%, transparent 80%);
  box-shadow: 0 0 90px 22px rgba(222,188,122,0.26);
  animation: cosmicPlanetFloat1 68s ease-in-out infinite reverse;
}
/* Fourth, smallest and farthest planet — heavier blur/lower opacity than
   planet-3 on purpose, so the four together read as a real depth ladder
   (1 nearest/sharpest -> 4 farthest/softest) rather than four equal disks. */
.cosmic-planet-4 {
  width: 105px;
  height: 105px;
  bottom: 6%;
  right: 22%;
  opacity: 0.55;
  filter: blur(8px);
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.5) 0%, #f5cf6b 20%, rgba(245,207,107,0.34) 55%, transparent 80%);
  box-shadow: 0 0 70px 16px rgba(245,207,107,0.2);
  animation: cosmicPlanetFloat2 63s ease-in-out infinite reverse;
}
@keyframes cosmicPlanetFloat1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3%, 2.5%); }
}
@keyframes cosmicPlanetFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2.5%, -2%); }
}

/* ZODIAC GLYPHS — decorative only, large and very faint, each fades in from
   darkness, holds, then fades out again on its own long, staggered cycle so
   at most one or two are ever visible together. */
.cosmic-zodiac {
  position: absolute;
  color: #fff;
  opacity: 0;
  line-height: 1;
  user-select: none;
}
.cosmic-zodiac svg {
  display: block;
  width: 1em;
  height: 1em;
  overflow: visible;
}
.cosmic-zodiac-1 { top: 8%; left: 8%; font-size: 92px; animation: zodiacDrift1 38s ease-in-out infinite; }
.cosmic-zodiac-2 { top: 62%; right: 6%; font-size: 120px; animation: zodiacDrift2 46s ease-in-out infinite 9s; }
.cosmic-zodiac-3 { top: 32%; right: 22%; font-size: 70px; animation: zodiacDrift3 41s ease-in-out infinite 18s; }
/* Moved into the same top-right hero cluster as planet-1/cnst-scorpio for
   the single-scene prototype (was top:80% left:20%, far from that cluster).
   Delay shortened so it emerges within the review window. */
.cosmic-zodiac-4 { top: 34%; right: 16%; font-size: 84px; animation: zodiacDrift1 44s ease-in-out infinite 2s; }
.cosmic-zodiac-5 { top: 4%; right: 14%; font-size: 64px; animation: zodiacDrift2 39s ease-in-out infinite 33s; }
.cosmic-zodiac-6 { top: 46%; left: 45%; font-size: 100px; animation: zodiacDrift3 43s ease-in-out infinite 6s; }
.cosmic-zodiac-7 { top: 18%; left: 55%; font-size: 58px; animation: zodiacDrift1 40s ease-in-out infinite 15s; }
.cosmic-zodiac-8 { top: 70%; right: 38%; font-size: 110px; animation: zodiacDrift2 45s ease-in-out infinite 21s; }
.cosmic-zodiac-9 { top: 90%; right: 8%; font-size: 76px; animation: zodiacDrift3 37s ease-in-out infinite 30s; }
/* Each glyph now genuinely emerges from darkness, holds visible for a real
   stretch of its cycle, then fades back out — not a low-amplitude flicker.
   Peak opacity raised (0.06-0.11 -> 0.2-0.25) but each cycle still spends
   most of its time fully invisible (0% between ~46-100%), so staggered
   glyphs never crowd the frame at once. */
@keyframes zodiacDrift1 {
  0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10% { opacity: 0.32; }
  25% { opacity: 0.46; transform: translate(1.5%, -1%) rotate(3deg); }
  40% { opacity: 0.44; transform: translate(2.4%, -1.8%) rotate(4deg); }
  55% { opacity: 0.3; }
  68% { opacity: 0.08; }
}
@keyframes zodiacDrift2 {
  0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  12% { opacity: 0.3; }
  28% { opacity: 0.44; transform: translate(-1.8%, 1.4%) rotate(-4deg); }
  42% { opacity: 0.42; transform: translate(-2.6%, 2%) rotate(-5deg); }
  56% { opacity: 0.28; }
  70% { opacity: 0.07; }
}
@keyframes zodiacDrift3 {
  0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  14% { opacity: 0.32; }
  30% { opacity: 0.48; transform: translate(1.2%, 1.8%) rotate(2deg); }
  44% { opacity: 0.45; transform: translate(1.8%, 2.5%) rotate(3deg); }
  58% { opacity: 0.3; }
  72% { opacity: 0.08; }
}

/* SHOOTING STARS — rare (long cycles, brief active window near the end),
   never constant. A thin streak with a fading trail. */
.cosmic-shooting-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
}
.cosmic-shooting-star::before {
  content: "";
  position: absolute;
  top: 0;
  right: 2px;
  width: 90px;
  height: 1px;
  background: linear-gradient(270deg, rgba(255,255,255,0.9), transparent);
  transform-origin: right center;
}
.cosmic-shooting-star-1 { top: 14%; left: 65%; animation: shootingStar1 26s linear infinite; }
.cosmic-shooting-star-2 { top: 58%; left: 15%; animation: shootingStar2 34s linear infinite 9s; }
@keyframes shootingStar1 {
  0%, 96% { opacity: 0; transform: translate(0, 0); }
  97% { opacity: 1; }
  99% { opacity: 0.6; transform: translate(-140px, 90px); }
  100% { opacity: 0; transform: translate(-150px, 96px); }
}
@keyframes shootingStar2 {
  0%, 95% { opacity: 0; transform: translate(0, 0); }
  96% { opacity: 1; }
  98.5% { opacity: 0.6; transform: translate(160px, 80px); }
  100% { opacity: 0; transform: translate(172px, 86px); }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-stars, .cosmic-nebula, .cosmic-planet, .cosmic-constellation,
  .cosmic-galaxy-haze, .cosmic-dust, .cosmic-void,
  .cosmic-zodiac, .cosmic-shooting-star {
    animation: none;
  }
  /* Hero-star twinkle is set via inline style="animation:..." (per-star
     duration/delay variety), which beats external stylesheet specificity —
     !important is required here to actually stop it. */
  .cosmic-constellation .constellation-stars circle.star-hero {
    animation: none !important;
  }
  .cosmic-shooting-star { opacity: 0; }
  .cosmic-zodiac { opacity: 0.22; }
  .cosmic-constellation { opacity: 0.45; }
  .cosmic-layer-far, .cosmic-layer-mid, .cosmic-layer-near, .cosmic-bg {
    transition: none;
    transform: none;
  }
}

/* Trim decorative object count on small/mid phones — keeps the identity
   intact (galaxy haze, stars, void contrast, 3 planets, core constellations)
   while dropping the most marginal extras for scroll/tap smoothness.
   Widened from 480px to 768px now that the pass adds a 4th planet, 2 more
   constellation groups and 4 more zodiac glyphs — more paint/composite
   weight overall, so more needs trimming on real phones, not just the
   smallest ones. */
@media (max-width: 768px) {
  .cosmic-nebula-4, .cosmic-nebula-6, .cosmic-planet-3, .cosmic-planet-4,
  .cosmic-zodiac-3, .cosmic-zodiac-5, .cosmic-zodiac-7, .cosmic-zodiac-8, .cosmic-zodiac-9,
  .cnst-libra, .cnst-pisces, .cnst-leo, .cosmic-shooting-star-2,
  .puff-void-3, .puff-void-4, .puff-7, .puff-8 {
    display: none;
  }
}

/* DAILY V2 — same cosmic backdrop, deliberately dimmer: a long-form reading
   needs stronger text contrast than the homepage hero, so depth stays
   present but recedes rather than competing with the copy. Opacity on the
   whole container scales every child down proportionally, preserving their
   relative depth differences, rather than fighting each child's own
   more-specific opacity rule. */
.natal-page .cosmic-bg,
.daily-page .cosmic-bg {
  opacity: 0.6;
}
/* Daily V2 (reading.html) amplification pass — same 4-point rationale as
   the rest of the amplification, but this page has both .natal-page and
   .daily-page on <body>. Equal specificity to the rule above, placed after
   it, so this wins for reading.html specifically; plain daily-page-only
   pages (daily.html, which has no .cosmic-bg element at all) are
   unaffected either way. */
.natal-page .cosmic-bg {
  opacity: 0.78;
}

/* The quiz-result share card's continuous 3D tilt (resultCardLife) is fine
   at its small, glanceable size — but the SAME class is reused for the
   long-form Daily reading card, where a constant tilt actively fights
   readability while scrolling through paragraphs. Keep the glow pulse
   (color-only, no layout/position movement) and drop the tilt there only. */
.daily-page .result-card {
  animation: resultGlowPulse 3s ease-in-out infinite;
}

.intro-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.intro-content > * { opacity: 0; animation: fadeInUp 0.6s ease forwards; }
.intro-content > *:nth-child(1) { animation-delay: 0.05s; }
.intro-content > *:nth-child(2) { animation-delay: 0.15s; }
.intro-content > *:nth-child(3) { animation-delay: 0.25s; }
.intro-content > *:nth-child(4) { animation-delay: 0.35s; }
.intro-content > *:nth-child(5) { animation-delay: 0.45s; }
.intro-content > *:nth-child(6) { animation-delay: 0.55s; }
.intro-content > *:nth-child(7) { animation-delay: 0.65s; }
.intro-content > *:nth-child(8) { animation-delay: 0.75s; }
.intro-content > *:nth-child(9) { animation-delay: 0.85s; }
.intro-content > *:nth-child(10) { animation-delay: 0.95s; }

.badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 2px;
}

/* Brand mark stays visible but deliberately smaller than the hook below it —
   the hook (.tagline) is the true hero headline; the logo's job here is just
   to identify the product, not compete with the sentence that has to make a
   stranger want the result. See .tagline for the hierarchy this supports. */
.logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.logo span {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 360px;
  margin-top: 2px;
}

.subtext {
  font-size: 15px;
  font-weight: 500;
  color: #c3c0cf;
  line-height: 1.5;
  max-width: 340px;
  margin-top: -2px;
}

/* ---------- PHASE 2C-5 HOMEPAGE — approved hero hierarchy ----------
   WHAT IT IS (headline) -> WHAT IT DOES (subhead) -> PRICE/TRIAL ->
   HOW IT WORKS (formula) -> birth details -> "Now discover your Aura" -> Q1.
   The headline must read as visually dominant — largest, boldest element
   on the screen — everything else steps down from it. ---------- */
.logo-small {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  opacity: 0.85;
  margin-bottom: 2px;
}

/* New Aura Zodiac brand-mark image (wheel + figure emblem + wordmark),
   replacing the old text-only .logo — same "smaller than the hero
   headline" role as .logo-small above, sized so the wordmark stays
   legible without competing with .hero-headline below it. */
.logo-mark-wrap { line-height: 0; }
.logo-mark {
  display: block;
  width: auto;
  height: 68px;
  margin: 0 auto;
}

.hero-headline {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 380px;
  margin-top: 2px;
}

.hero-subhead {
  font-size: 15px;
  font-weight: 500;
  color: #c3c0cf;
  line-height: 1.5;
  max-width: 380px;
  margin-top: 2px;
}

.hero-price-line {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.45;
  max-width: 380px;
  margin-top: 6px;
}
.hero-price-line strong {
  color: var(--accent);
  font-weight: 800;
  font-size: 1.08em;
  white-space: nowrap;
}

/* PHASE 2C-6 HOMEPAGE HERO (approved copy, 2026-09-14) -- short transitional
   lines above/below the CTA, same visual weight as .hero-subhead but a touch
   bolder since each one is a single punchy sentence, not a full explanation. */
.hero-lede {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  max-width: 380px;
  margin-top: 2px;
}
.hero-lede-2 { margin-top: 10px; }

.hero-free-badge {
  text-align: center;
  margin-top: 8px;
  margin-bottom: 0;
}

.hero-formula {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  max-width: 340px;
  line-height: 1.7;
  margin-top: 6px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.hero-formula-op {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.discover-aura-heading {
  position: relative;
  z-index: 1;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  margin: 4px auto 10px;
}

.btn-primary {
  margin-top: 12px;
  width: 100%;
  max-width: 320px;
  padding: 17px 24px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(222,188,122,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(222,188,122,0.3); }

/* .btn-primary is applied to real <button>s everywhere else; these two spots
   use an <a> instead so a click both tracks and navigates in one gesture —
   an inline anchor needs an explicit box + centered text to render the same
   as a button. */
a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

.cta-wrap { width: 100%; display: flex; justify-content: center; }
.btn-primary { animation: ctaFloat 2.4s ease-in-out infinite, ctaPulse 2.4s ease-in-out infinite; }
@keyframes ctaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(222,188,122,0.35); }
  50% { box-shadow: 0 8px 32px rgba(222,188,122,0.55), 0 0 0 6px rgba(222,188,122,0.08); }
}

.btn-secondary {
  width: 100%;
  max-width: 320px;
  padding: 15px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease;
  animation: btnSecondaryPulse 2.4s ease-in-out infinite;
}
.btn-secondary:active { transform: scale(0.97); }

@keyframes btnSecondaryPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(74,63,143,0.12); }
  50% { box-shadow: 0 4px 26px rgba(74,63,143,0.35), 0 0 0 4px rgba(74,63,143,0.08); }
}

.btn-ghost {
  width: 100%;
  max-width: 320px;
  padding: 12px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.microcopy {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}

.guide-teaser-line {
  font-weight: 700;
  color: var(--text);
}

.guide-teaser-sub {
  margin-top: -2px;
  font-size: 11.5px;
}

/* ---------- QUIZ (now rendered inline inside #screen-intro — see
   index.html — so the visitor's first interaction is answering Q1, not
   clicking a CTA into a separate screen) ---------- */
#screen-intro { justify-content: flex-start; }

/* Explicit width so the row stretches to the same width as .quiz-body below
   it — without this, #screen-intro's align-items:center lets .quiz-header
   shrink to its own fit-content size, which is too narrow for Back and the
   counter to sit at opposite ends of the row. */
.quiz-header { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; margin-bottom: 22px; width: 100%; }

.progress-track {
  width: 100%;
  height: 6px;
  background: var(--bg-card);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.quiz-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
}

/* Reserves its layout space at all times (visibility, not display) so the
   question counter never shifts position between Q1 (no Back) and Q2-10. */
.btn-back {
  visibility: hidden;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text-dim);
  cursor: pointer;
}
.btn-back:hover { color: var(--text); }
.btn-back.visible { visibility: visible; }

/* Cosmic pass — the quiz card floats above the starfield rather than
   sitting flush with it: a faint glass panel (subtle blur + tint + edge
   light), no new entrance animation of its own beyond the existing
   question-fade transition. */
.quiz-body {
  position: relative;
  padding: 22px 18px;
  border-radius: 20px;
  background: rgba(20,18,28,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 20px 60px rgba(0,0,0,0.3);
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.quiz-body.quiz-fade { opacity: 0; transform: translateX(-40px) scale(0.96); }
/* Desktop-only restrained edge-light on hover — the card feels like it's
   floating above the universe rather than flush with the page. No new
   entrance/loop animation, just a hover-triggered shadow transition. */
@media (hover: hover) and (pointer: fine) {
  .quiz-body:hover {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 40px rgba(74,63,143,0.16), 0 20px 60px rgba(0,0,0,0.3);
  }
}

/* Soft-start progressive-commitment transition, shown once after Q3
   (see PATTERN_TRANSITION_AFTER_QUESTION in app.js) — reuses the same
   fade timing as .quiz-fade so it feels like part of the same rhythm,
   not a separate gimmick. No layout of its own: absolutely positioned
   over the question/options so it never shifts progress-bar height. */
.pattern-message {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 0 24px;
}
.pattern-message.visible { display: flex; opacity: 1; }
.pattern-dots span {
  opacity: 0;
  animation: patternDot 1.2s infinite;
}
.pattern-dots span:nth-child(2) { animation-delay: 0.2s; }
.pattern-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes patternDot {
  0%, 20% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.question-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 28px;
}

.options { display: flex; flex-direction: column; gap: 12px; }

.option {
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease, box-shadow 0.2s ease;
}
/* One-shot glow sweep across a just-selected answer, before the question
   advances — a brief star-like highlight passing through, not a loop.
   Pseudo-element so it never affects layout; overflow:hidden on .option
   clips it to the card (box-shadow above is unaffected, it paints outside
   the border box regardless of the element's own overflow). */
.option::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.22) 48%, rgba(255,255,255,0.22) 52%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.option.selected::after {
  animation: optionSelectSweep 0.5s ease-out 1;
}
@keyframes optionSelectSweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
.option:active { transform: scale(0.98); }
/* Touch devices synthesize :hover at the tap coordinate — without this
   guard, that hover state lands on whatever renders at the same position
   in the NEXT question, looking exactly like a carried-over selection.
   Real pointer devices (mouse) are unaffected by this and keep the hover.
   Desktop-only glow/depth reaction; mobile keeps plain tap feedback only. */
@media (hover: hover) and (pointer: fine) {
  .option:hover { border-color: var(--accent-2); background: #18161f; box-shadow: 0 4px 22px rgba(74,63,143,0.18); transform: translateY(-1px); }
}
.option.selected {
  border-color: var(--accent);
  background: linear-gradient(120deg, rgba(222,188,122,0.12), rgba(74,63,143,0.12));
  box-shadow: 0 0 0 1px rgba(222,188,122,0.25), 0 0 26px rgba(222,188,122,0.22), 0 0 46px rgba(74,63,143,0.14);
  animation: optionAuraGlow 1.8s ease-in-out infinite;
}
@keyframes optionAuraGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(222,188,122,0.25), 0 0 26px rgba(222,188,122,0.22), 0 0 46px rgba(74,63,143,0.14); }
  50% { box-shadow: 0 0 0 1px rgba(222,188,122,0.32), 0 0 34px rgba(222,188,122,0.3), 0 0 58px rgba(74,63,143,0.2); }
}
@media (prefers-reduced-motion: reduce) {
  .option.selected { animation: none; }
  .option.selected::after { animation: none; }
}

/* ---------- RESULT ---------- */
#screen-result { align-items: center; padding-top: 32px; padding-bottom: 32px; }

.result-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; perspective: 1200px; }

.result-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  min-height: 425px;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.55);
  animation: resultCardLife 5s ease-in-out infinite, resultGlowPulse 3s ease-in-out infinite;
  background: linear-gradient(158deg, var(--rc-c1, #ff2e93), var(--rc-c2, #7b68ee));
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1.6px),
    linear-gradient(158deg, var(--rc-c1, #ff2e93), var(--rc-c2, #7b68ee));
  background-size: 16px 16px, 100% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 24px 22px;
  color: #fff;
  font-family: 'Manrope', sans-serif;
}

.result-card.has-art {
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.result-card.has-art .rc-blob,
.result-card.has-art .rc-emoji {
  display: none;
}
.result-card.has-art .rc-name,
.result-card.has-art .rc-tagline {
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

@keyframes resultCardLife {
  0%, 100% { transform: rotateY(-4deg) rotateX(1deg) translateY(0); }
  50% { transform: rotateY(4deg) rotateX(-1deg) translateY(-8px); }
}

@keyframes resultGlowPulse {
  0%, 100% { box-shadow: 0 25px 70px rgba(0,0,0,0.55), 0 0 40px rgba(255,46,147,0.2); }
  50% { box-shadow: 0 25px 80px rgba(0,0,0,0.55), 0 0 70px rgba(255,46,147,0.45); }
}

.rc-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.rc-blob-1 {
  width: 65%; height: 65%; top: -22%; left: -20%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0) 72%);
}
.rc-blob-2 {
  width: 58%; height: 58%; bottom: -20%; right: -16%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0) 72%);
}

.rc-watermark {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.8;
  position: relative;
  z-index: 1;
}

/* ---------- Daily Aura personal identity (token path only) ---------- */
/* Additive only — sits between the existing watermark and emoji. */
.rc-greeting {
  font-size: 15px;
  font-weight: 700;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}

.rc-personal-subtext {
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.85;
  max-width: 90%;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.rc-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

.rollover-banner {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 6px 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.24);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.rollover-banner.visible {
  opacity: 1;
  transform: translateY(0);
}

.email-optin-btn {
  width: auto;
  max-width: none;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 12.5px;
  margin-top: 2px;
}
.email-optin-btn:disabled { opacity: 0.6; cursor: default; }

.rc-emoji { font-size: 54px; margin: 18px 0 10px; position: relative; z-index: 1; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25)); }

.rc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.rc-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.18;
  text-shadow: 0 2px 14px rgba(0,0,0,0.22);
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.rc-tagline {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0.94;
  max-width: 92%;
  position: relative;
  z-index: 1;
}

.rc-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 20px;
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

.rc-desc {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.96;
  margin-bottom: 14px;
  text-align: left;
}

.rc-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.rc-stat-track {
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}
.rc-stat-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.85), #fff);
  box-shadow: 0 0 10px rgba(255,255,255,0.65);
}

.rc-footer {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 20px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.88;
}

/* ---------- Daily Aura dashboard: 6 personalized sections ---------- */
/* Additive only — same visual language as .rc-panel/.rc-desc above,
   repeated once per section instead of a single stat panel. */
.aura-sections {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aura-section {
  width: 100%;
  padding: 14px 16px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
  text-align: left;
}

.aura-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}

.aura-section-text {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.96;
}

/* ---------- STAGE A — personalized natal reading upgrade (reading.html
   only, scoped to .natal-page/.result-card.natal-mode so the free Daily
   Aura page (daily.html) and the generic/non-natal fallback state on
   reading.html itself are completely unaffected). Dark premium cosmic
   surface instead of the bright per-Aura share-card gradient, reserved for
   a genuine personalized (natal AI) reading. ---------- */
.result-card.natal-mode {
  background:
    radial-gradient(circle at 18% 12%, rgba(74,63,143,0.35), transparent 55%),
    radial-gradient(circle at 85% 0%, rgba(111,168,220,0.28), transparent 50%),
    linear-gradient(165deg, #0d0d16 0%, #14141f 55%, #0a0a12 100%);
  background-size: 100% 100%;
  animation: none;
  box-shadow: 0 25px 70px rgba(0,0,0,0.6), 0 0 50px rgba(74,63,143,0.12);
}
.result-card.natal-mode .rc-blob { opacity: 0.5; }
.result-card.natal-mode .rc-watermark,
.result-card.natal-mode .rc-label { opacity: 0.55; }

.natal-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 14px 0 4px;
}
.natal-header-line1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
}
.natal-header-aura {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.8;
  margin-top: 2px;
}
.natal-header-birth {
  font-size: 11px;
  letter-spacing: 0.03em;
  opacity: 0.6;
  margin-top: 6px;
}
.natal-header-sub {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.7;
  max-width: 88%;
  margin: 8px auto 0;
}

.natal-sky-highlights {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 10px;
  padding: 12px 14px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}
.natal-sky-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 8px;
}
.natal-sky-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.natal-sky-item {
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.88;
  padding-left: 14px;
  position: relative;
}
.natal-sky-item::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 10px;
  opacity: 0.6;
}

.result-card.natal-mode .aura-section {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.aura-section-icon {
  display: inline-block;
  width: 16px;
  text-align: center;
  margin-right: 6px;
  opacity: 0.9;
}
.aura-section[data-section="energy"] .aura-section-icon { color: #F5B942; }
.aura-section[data-section="love"] .aura-section-icon { color: #FF6B9D; }
.aura-section[data-section="work"] .aura-section-icon { color: #5FD3C4; }
.aura-section[data-section="mindset"] .aura-section-icon { color: #9B8CFF; }
.aura-section[data-section="avoid"] .aura-section-icon { color: #FF8A5B; }
.aura-section[data-section="action"] .aura-section-icon { color: #6FD1FF; }

.aura-section-layer {
  margin-top: 8px;
}
.aura-section-caption {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 3px;
}
.aura-section-body {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.96;
}

/* ---------- PHASE 2C-6 — paid Daily Reading editorial redesign
   (reading.html only, same .natal-mode scoping as the rest of Stage A).
   Headline / The Day / Quick Signals sit above the six sections;
   technical evidence (.aura-section-evidence) is demoted to a small,
   muted secondary line under each section's main synthesis paragraph
   instead of a labelled "what it means" box. ---------- */
.natal-headline {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  margin: 14px 0 2px;
}
.natal-day {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.85;
  max-width: 92%;
  margin: 6px auto 0;
}
.natal-signals {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}
.natal-signal {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}
.natal-signal-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 3px;
}
.natal-signal-value {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  opacity: 0.95;
}

.aura-section-evidence {
  margin-top: 8px;
  font-size: 11px;
  font-style: italic;
  line-height: 1.5;
  opacity: 0.55;
}

.result-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.capture-box {
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.capture-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.capture-submit { margin-top: 4px; padding: 14px; font-size: 15px; box-shadow: none; }

.capture-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 2px auto 12px;
  padding: 0;
  font-size: 13px;
  color: var(--text-dim);
}

.capture-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.capture-form input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
}
.capture-form input:focus { outline: none; border-color: var(--accent-2); }

.capture-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
}
.capture-checkbox-label input {
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
}

.capture-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}

.capture-success-btn { margin-top: 0; }

.capture-box.submitted .capture-form { display: none; }
.capture-box.submitted .capture-bullets { display: none; }
.capture-box.submitted .capture-success { display: flex; }

/* ---------- PHASE 2C-1 (corrected): compact, inline, non-gating optional
   birth block — sits above Q1 on the SAME screen, deliberately small and
   quiet so it never competes with the quiz for visual weight. ---------- */
.birth-inline-block {
  max-width: 480px;
  margin: 0 auto 18px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.birth-inline-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.birth-inline-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 10px;
}
.birth-inline-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.birth-inline-fields input,
.birth-inline-fields .birth-autocomplete-wrap {
  flex: 1 1 140px;
  min-width: 120px;
}
.birth-inline-fields input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
}
.birth-inline-fields input:focus { outline: none; border-color: var(--accent-2); }
.birth-inline-checkbox {
  margin-top: 8px;
  font-size: 11.5px;
}

.birth-autocomplete-wrap { position: relative; }
.birth-autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.birth-autocomplete-item {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.birth-autocomplete-item:hover { background: var(--border); }

/* ---------- GUIDE TEASER (result screen, above the email capture box)
   ---------- */
.guide-teaser-box { gap: 10px; }
.guide-teaser-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---------- ACCURACY FEEDBACK (result screen, optional/lightweight)
   ---------- */
.accuracy-box {
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.accuracy-question { font-size: 14px; font-weight: 700; }

.accuracy-stars { display: flex; gap: 6px; }
.star {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  padding: 2px;
  transition: color 0.15s ease, transform 0.1s ease;
}
.star.active { color: var(--accent); transform: scale(1.08); }

.accuracy-detail {
  display: none;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.accuracy-text {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 13.5px;
  resize: none;
}
.accuracy-text:focus { outline: none; border-color: var(--accent-2); }

.accuracy-submit { padding: 8px; font-size: 13px; }

.accuracy-thanks {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
}

.tagline-break { display: none; }

@media (min-width: 420px) {
  .logo { font-size: 40px; }
  .tagline { font-size: 22px; max-width: 432px; }
  .tagline-break { display: inline; }
  .hero-headline { font-size: 36px; max-width: 460px; }
  .hero-lede { max-width: 440px; }
  .hero-subhead { max-width: 440px; }
  .hero-price-line { max-width: 420px; }
  .hero-formula { font-size: 13px; max-width: 400px; }
}

/* ---------- SHORT VIEWPORT COMPACTION (intro screen only) ----------
   Keeps Q1's answer options reachable without a large initial scroll on the
   smallest common phone viewports and squeezed in-app-browser heights.
   Only touches spacing, not the approved visual identity itself. */
@media (max-height: 700px) {
  #screen-intro { padding-top: 10px; padding-bottom: 10px; }
  .intro-content { gap: 5px; }
  .badge { margin-bottom: 0; padding: 5px 10px; }
  .tagline { font-size: 22px; }
  .quiz-header { margin-top: 8px; margin-bottom: 8px; }
  .hero-headline { font-size: 24px; }
  .hero-lede { font-size: 13px; margin-top: 1px; }
  .hero-subhead { font-size: 13.5px; }
  .hero-price-line { font-size: 11.5px; margin-top: 1px; }
  .hero-free-badge { margin-top: 4px; }
  .hero-formula { padding: 8px 12px; font-size: 11px; }
  .free-reading-line { margin: 8px auto 6px; font-size: 12px; }
  .birth-inline-block { margin-bottom: 6px; padding: 8px 12px; }
  .discover-aura-heading { margin: 0 auto 4px; font-size: 15px; }
}

.daily-home-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 20px;
  z-index: 1;
}
.daily-home-link span {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- DAILY AURA READABILITY (scoped to daily.html only —
   the quiz-result card on index.html keeps its original compact sizing,
   since it's designed to be a small shareable image, not a reading
   surface) ---------- */
.daily-page .result-card {
  max-width: 460px;
  min-height: 0;
  padding: 36px 26px 28px;
}
.daily-page .aura-sections {
  gap: 18px;
  margin-top: 22px;
}
.daily-page .aura-section {
  padding: 20px 20px 18px;
  border-radius: 20px;
}
.daily-page .aura-section-label {
  font-size: 12px;
  margin-bottom: 8px;
}
.daily-page .aura-section-text {
  font-size: 16px;
  line-height: 1.7;
}
.daily-page .rc-greeting { font-size: 17px; }
.daily-page .rc-personal-subtext { font-size: 14px; }
.daily-page .rc-date { font-size: 12px; }

/* natal-page-specific readability (mobile-first, same scale-up as the
   rules above, applied to the Stage A natal-reading elements only). */
.natal-page .aura-section-body {
  font-size: 16px;
  line-height: 1.7;
}
.natal-page .aura-section-caption {
  font-size: 11px;
}
.natal-page .natal-header-line1 {
  font-size: 22px;
}
.natal-page .natal-header-aura,
.natal-page .natal-header-sub {
  font-size: 14px;
}
.natal-page .natal-sky-item {
  font-size: 13.5px;
}
.natal-page .natal-headline {
  font-size: 21px;
}
.natal-page .natal-day {
  font-size: 15px;
}
.natal-page .natal-signal-value {
  font-size: 14.5px;
}
.natal-page .aura-section-evidence {
  font-size: 12.5px;
}

/* ---------- ADD TO HOME SCREEN CARD (daily.html only) ----------
   Fixed to the bottom, not a full-screen backdrop — the page behind it
   stays visible and scrollable, so it never blocks reading the day's
   reading. */
.a2hs-card {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 0 16px 16px;
  transform: translateY(120%);
  transition: transform 0.35s ease;
}
.a2hs-card.visible { transform: translateY(0); }
.a2hs-card-inner {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.a2hs-title { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.a2hs-text { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }
.a2hs-instructions p { font-size: 13.5px; line-height: 1.6; margin-bottom: 10px; }
.a2hs-instructions { margin-bottom: 14px; }
.a2hs-actions { display: flex; flex-direction: column; gap: 8px; }
.a2hs-card .btn-primary,
.a2hs-card .btn-ghost {
  margin-top: 0;
  max-width: none;
}

/* ---------- STREAK BANNER (daily.html only) ---------- */
.streak-banner {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 2px 0 4px;
}
.streak-line {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.streak-subtext {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ---------- MONTHLY AURA CALENDAR (daily.html only) ----------
   Premium/minimal, not a productivity-app grid: no cell borders, no
   dividing lines — just dimmed numerals for neutral days, a soft
   gradient fill for visited days, and a thin ring for today. */
.aura-calendar {
  width: 100%;
  max-width: 460px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 20px 18px;
  margin-top: 4px;
}
.aura-calendar-title {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 14px;
}
.aura-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.aura-calendar-weekdays span {
  text-align: center;
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.aura-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 6px;
}
.aura-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  border-radius: 50%;
  margin: 0 auto;
  width: 30px;
  position: relative;
}
.aura-calendar-day.aura-calendar-empty { visibility: hidden; }
.aura-calendar-day.visited {
  background: linear-gradient(120deg, rgba(222,188,122,0.35), rgba(74,63,143,0.35));
  color: var(--text);
}
.aura-calendar-day.today {
  box-shadow: 0 0 0 1.5px var(--accent-2);
  color: var(--text);
}
.aura-calendar-footer {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 14px;
}

/* ---------- DAILY AURA PREVIEW (index.html result screen only) ----------
   Bridges the quiz result into the Daily Aura product, before the email
   capture. Uses the same solid-panel treatment as .aura-calendar (bg-card +
   border), not .aura-section's translucent-on-art style, since this panel
   sits on the plain app background here, with no archetype art behind it. */
#daily-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* Bridge reads as the product's core tagline — bigger and brighter than a
   caption, with a small dim line underneath for the supporting thought. */
.daily-preview-bridge {
  text-align: center;
  max-width: 300px;
}

.daily-preview-bridge-main {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}

.daily-preview-bridge-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 6px;
}

.daily-preview {
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.daily-preview-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}

.daily-preview-subtitle {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-dim);
  margin-top: -10px;
}

/* Today's Energy is the one real, unlocked reading — it gets its own card
   treatment (tinted background, more padding, bigger type) so it visually
   reads as substance, not just the first row of a list. */
.daily-preview-energy-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  background: linear-gradient(135deg, rgba(222,188,122,0.14), rgba(74,63,143,0.14));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.daily-preview-energy-card .daily-preview-icon { font-size: 20px; }
.daily-preview-energy-card .daily-preview-label { font-size: 11px; }
.daily-preview-energy-card .daily-preview-text { font-size: 14.5px; line-height: 1.6; color: var(--text); }

.daily-preview-locked-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.daily-preview-section {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}

.daily-preview-icon {
  font-size: 15px;
  line-height: 1.5;
}

.daily-preview-body { flex: 1; }

.daily-preview-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 3px;
}

.daily-preview-text {
  font-size: 13px;
  line-height: 1.5;
}

.daily-preview-locked .daily-preview-text { color: var(--text-dim); font-style: italic; }

.daily-preview-tagline {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ---------- AURA EXPLORE GRID (homepage "Meet the 8 Auras" section
   AND the "Or maybe you're something else..." section on /auras/* pages —
   shared, one definition) ---------- */
.aura-explore-section {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.aura-explore-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 8px;
}

.aura-explore-sub {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}

.aura-explore-sub-2 {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}

.aura-explore-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.aura-explore-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  text-decoration: none;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.15s ease;
}
.aura-explore-card:active { transform: scale(0.97); }

/* Each Aura reads as its own faint luminous energy, not a colored dot —
   a soft halo glowing out from behind the card. box-shadow (not a blurred
   pseudo-element) is used deliberately: .aura-explore-card has
   overflow:hidden for its cover image, which would clip any inset glow
   layer, but box-shadow paints outside the border box and is unaffected
   by the element's own overflow clipping. One shared slow pulse, staggered
   per card so the grid never reads as one synchronized loop. */
.aura-explore-card { animation: auraHaloPulse 7s ease-in-out infinite; }
.aura-explore-card[data-aura="delulu"] { animation-name: auraHaloPulseDelulu; }
.aura-explore-card[data-aura="goblin"] { animation-name: auraHaloPulseGoblin; animation-delay: 0.6s; }
.aura-explore-card[data-aura="cleangirl"] { animation-name: auraHaloPulseCleangirl; animation-delay: 1.2s; }
.aura-explore-card[data-aura="cottagecore"] { animation-name: auraHaloPulseCottagecore; animation-delay: 1.8s; }
.aura-explore-card[data-aura="hyperpop"] { animation-name: auraHaloPulseHyperpop; animation-delay: 2.4s; }
.aura-explore-card[data-aura="darkacademia"] { animation-name: auraHaloPulseDarkacademia; animation-delay: 3s; }
.aura-explore-card[data-aura="y2k"] { animation-name: auraHaloPulseY2k; animation-delay: 3.6s; }
.aura-explore-card[data-aura="coastal"] { animation-name: auraHaloPulseCoastal; animation-delay: 4.2s; }
@keyframes auraHaloPulseDelulu {
  0%, 100% { box-shadow: 0 0 35px 3px rgba(255,46,147,0.48); }
  50% { box-shadow: 0 0 62px 11px rgba(255,46,147,0.78); }
}
@keyframes auraHaloPulseGoblin {
  0%, 100% { box-shadow: 0 0 35px 3px rgba(111,191,106,0.48); }
  50% { box-shadow: 0 0 62px 11px rgba(111,191,106,0.78); }
}
@keyframes auraHaloPulseCleangirl {
  0%, 100% { box-shadow: 0 0 35px 3px rgba(245,207,107,0.48); }
  50% { box-shadow: 0 0 62px 11px rgba(245,207,107,0.78); }
}
@keyframes auraHaloPulseCottagecore {
  0%, 100% { box-shadow: 0 0 35px 3px rgba(245,244,247,0.42); }
  50% { box-shadow: 0 0 62px 11px rgba(245,244,247,0.68); }
}
@keyframes auraHaloPulseHyperpop {
  0%, 100% { box-shadow: 0 0 35px 3px rgba(0,229,255,0.48); }
  50% { box-shadow: 0 0 62px 11px rgba(0,229,255,0.78); }
}
@keyframes auraHaloPulseDarkacademia {
  0%, 100% { box-shadow: 0 0 35px 3px rgba(220,75,92,0.48); }
  50% { box-shadow: 0 0 62px 11px rgba(220,75,92,0.78); }
}
@keyframes auraHaloPulseY2k {
  0%, 100% { box-shadow: 0 0 35px 3px rgba(123,104,238,0.48); }
  50% { box-shadow: 0 0 62px 11px rgba(123,104,238,0.78); }
}
@keyframes auraHaloPulseCoastal {
  0%, 100% { box-shadow: 0 0 35px 3px rgba(111,168,220,0.48); }
  50% { box-shadow: 0 0 62px 11px rgba(111,168,220,0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .aura-explore-card { animation: none !important; }
  .aura-explore-card[data-aura="delulu"] { box-shadow: 0 0 30px 4px rgba(255,46,147,0.4); }
  .aura-explore-card[data-aura="goblin"] { box-shadow: 0 0 30px 4px rgba(111,191,106,0.4); }
  .aura-explore-card[data-aura="cleangirl"] { box-shadow: 0 0 30px 4px rgba(245,207,107,0.4); }
  .aura-explore-card[data-aura="cottagecore"] { box-shadow: 0 0 30px 4px rgba(245,244,247,0.35); }
  .aura-explore-card[data-aura="hyperpop"] { box-shadow: 0 0 30px 4px rgba(0,229,255,0.4); }
  .aura-explore-card[data-aura="darkacademia"] { box-shadow: 0 0 30px 4px rgba(220,75,92,0.4); }
  .aura-explore-card[data-aura="y2k"] { box-shadow: 0 0 30px 4px rgba(123,104,238,0.4); }
  .aura-explore-card[data-aura="coastal"] { box-shadow: 0 0 30px 4px rgba(111,168,220,0.4); }
}

.aura-explore-card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.aura-explore-card-hook {
  font-size: 11px;
  color: rgba(255,255,255,0.82);
  margin-top: 3px;
  line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.aura-explore-card-link {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  margin-top: 9px;
}

/* ---------- PUBLIC AURA PAGES (/auras/{slug}) ----------
   Static, server-free marketing/teaser pages — same tokens, fonts, and
   hero-bg/sparkles background treatment as index.html, laid out as a normal
   scrolling page (no .screen/.app SPA-screen wrapper needed here). */
.aura-page {
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-bottom: 40px;
}

.aura-hero {
  padding: 32px 24px 12px;
  text-align: center;
}

.aura-hero-art {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 26px;
  background-size: cover;
  background-position: center;
  margin-bottom: 26px;
}

.aura-hero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.aura-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 38px;
  margin-bottom: 12px;
}

.aura-hero-hook {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.aura-hero-question {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 20px;
}

.aura-section-block {
  padding: 36px 24px;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.aura-h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 21px;
  margin-bottom: 16px;
  text-align: center;
}

.aura-body-text {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-dim);
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

.aura-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.aura-list li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}

.unlock-more-line {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 18px;
}

.locked-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
}

.locked-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  text-align: left;
}

.locked-icon {
  font-size: 20px;
  margin-bottom: 8px;
  display: block;
}

.locked-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

.locked-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 10px;
}

.locked-tag {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.aura-main-cta, .aura-final-cta {
  text-align: center;
}

.aura-final-line {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 18px;
}

/* ============================================================
   CINEMATIC SCENE v4 — LIVING NEBULA + CELESTIAL ZODIAC WHEEL
   index.html hero + Meet the 8 Auras only. Purely additive: no existing
   .cosmic-* rule above is modified, so reading.html (Daily V2, its own
   separate untouched markup) is unaffected. One coherent scene: nebula
   flows behind a fixed star field (which carries two real constellation
   asterisms) behind a large, slow-rotating celestial wheel carrying the
   12 zodiac glyphs. Three independent parallax tiers, all driven by the
   SAME --scene-px/--scene-py values hero-scene-v3.js computes: stars 0.03
   (near-static), nebula 0.08 (slow drift), wheel 0.34 (strongest, still
   restrained — this is a chart floating in space, not a foreground prop).
   ============================================================ */
.scene-layer { position: absolute; inset: 0; will-change: transform; }
.scene-layer-nebula { transform: translate3d(calc(var(--scene-px, 0px) * 0.08), calc(var(--scene-py, 0px) * 0.08), 0); transition: transform 0.4s ease-out; }
.scene-layer-stars { transform: translate3d(calc(var(--scene-px, 0px) * 0.03), calc(var(--scene-py, 0px) * 0.03), 0); transition: transform 0.4s ease-out; }
.scene-layer-wheel { transform: translate3d(calc(var(--scene-px, 0px) * 0.34), calc(var(--scene-py, 0px) * 0.34), 0); transition: transform 0.4s ease-out; pointer-events: none; }

.living-nebula-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* REAL ZODIAC CONSTELLATIONS — simplified but position-accurate asterisms
   (Scorpius' hook, Leo's sickle + hindquarters triangle) drawn into the
   fixed star field, not a floating icon. Thin lines, varied star size for
   apparent-magnitude, one "bright" star per shape (Antares, Regulus). */
.zodiac-constellation {
  position: absolute;
  overflow: visible;
}
.constellation-line {
  fill: none;
  stroke: rgba(200, 185, 255, 0.28);
  stroke-width: 0.8;
}
.constellation-star {
  fill: rgba(255, 255, 255, 0.75);
}
.constellation-star-bright {
  fill: rgba(255, 214, 214, 0.95);
  filter: drop-shadow(0 0 4px rgba(255, 170, 170, 0.7));
}
.constellation-scorpius { width: min(30vw, 340px); top: 62%; right: 4%; }
.constellation-leo { width: min(24vw, 280px); top: 10%; left: 3%; }
@media (max-width: 640px) {
  .constellation-scorpius { width: 58vw; top: 66%; right: -6%; }
  .constellation-leo { width: 46vw; top: 6%; left: -8%; }
  .constellation-line { stroke: rgba(200, 185, 255, 0.4); }
  .constellation-star { fill: rgba(255, 255, 255, 0.85); }
}

/* CELESTIAL ZODIAC WHEEL — built once by zodiac-wheel.js into a single
   SVG (2 rings, 12 spokes, 36 minor degree ticks, 12 real zodiac glyphs
   at fixed rim positions). Deliberately huge and off-center so only an
   arc of it is ever on screen — "partially visible behind the hero", not
   a centered badge. Rotation is a plain CSS animation on the inner <g>;
   transform-box:fill-box lets a percentage transform-origin work despite
   the group's own bounding box being far larger than the viewport. */
.zodiac-wheel-svg {
  position: absolute;
  width: 82vmax;
  height: 82vmax;
  top: 48%;
  left: 101%;
  transform: translate(-50%, -50%);
  overflow: visible;
}
.wheel-rotate-group {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: wheelSlowRotate 220s linear infinite;
}
@keyframes wheelSlowRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.wheel-ring {
  fill: none;
  stroke: rgba(210, 190, 255, 0.22);
  stroke-width: 1.4;
}
.wheel-ring-inner { stroke: rgba(180, 210, 255, 0.14); }
.wheel-spoke {
  stroke: rgba(200, 180, 255, 0.16);
  stroke-width: 1.1;
}
.wheel-minor-tick {
  stroke: rgba(190, 175, 255, 0.12);
  stroke-width: 0.9;
}
.wheel-tick {
  fill: rgba(225, 210, 255, 0.5);
}
.wheel-glyph {
  font-family: 'Space Grotesk', sans-serif;
  font-variant-emoji: text;
  font-size: 30px;
  fill: rgba(220, 205, 255, 0.5);
  filter: drop-shadow(0 0 10px rgba(170, 130, 255, 0.4));
  animation: wheelGlyphBreathe 9s ease-in-out infinite;
}
@keyframes wheelGlyphBreathe {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.62; }
}
@media (max-width: 640px) {
  .zodiac-wheel-svg { width: 118vmax; height: 118vmax; left: 50%; top: 98%; }
  .wheel-ring { stroke: rgba(210, 190, 255, 0.4); }
  .wheel-ring-inner { stroke: rgba(180, 210, 255, 0.28); }
  .wheel-spoke { stroke: rgba(200, 180, 255, 0.3); }
  .wheel-minor-tick { stroke: rgba(190, 175, 255, 0.22); }
  .wheel-glyph { font-size: 26px; fill: rgba(220, 205, 255, 0.68); }
}

/* VIGNETTE — keeps the copy column dark/legible no matter how present the
   nebula/wheel get elsewhere in the frame. Sits above every scene layer,
   below the actual hero content (which lives outside .cosmic-bg). */
.scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 36%, rgba(8,5,16,0.82) 0%, rgba(8,5,16,0.52) 42%, rgba(8,5,16,0) 74%);
}
@media (max-width: 640px) {
  /* A narrow viewport makes any wide ellipse cover almost the full width
     and, proportionally, far more of the height — the desktop values were
     blanking out the wheel/nebula entirely. Tighter vertically, fades out
     by mid-screen instead of past the fold. */
  .scene-vignette {
    background: radial-gradient(ellipse 92% 32% at 50% 24%, rgba(8,5,16,0.82) 0%, rgba(8,5,16,0.48) 46%, rgba(8,5,16,0) 80%);
  }
}

/* SHOOTING STAR — rare (hero-scene-v3.js fires the .fire class roughly
   every 25–45s), a single quick streak, otherwise fully dormant. */
.scene-shooting-star {
  position: absolute;
  top: 20%;
  left: 70%;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
  border-radius: 2px;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
  pointer-events: none;
}
.scene-shooting-star.fire {
  animation: sceneShootingStarFire 1.1s ease-in;
}
@keyframes sceneShootingStarFire {
  0%   { opacity: 0; transform: rotate(var(--shoot-angle, 215deg)) translateX(0); }
  8%   { opacity: 1; }
  70%  { opacity: 1; transform: rotate(var(--shoot-angle, 215deg)) translateX(-260px); }
  100% { opacity: 0; transform: rotate(var(--shoot-angle, 215deg)) translateX(-320px); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-layer-nebula, .scene-layer-stars, .scene-layer-wheel {
    transform: none !important;
    transition: none !important;
  }
  .wheel-rotate-group { animation: none !important; }
  .dual-cta-wheel-ring { animation: none !important; }
  .wheel-glyph { animation: none !important; opacity: 0.45 !important; }
  .scene-shooting-star { display: none !important; }
}

/* ============================================================
   AURA CARD HOVER — "Meet the 8 Auras" grid. Cards keep their existing
   size/grid/copy; only the interaction layer is new. The existing
   per-Aura halo-pulse colors/keyframes above are reused verbatim for the
   hover glow so every energy color stays consistent with its ambient
   state, just intensified. `overflow:hidden` on .aura-explore-card
   (existing) is what makes the bg-image hover zoom and the shine sweep
   clip cleanly to the card; box-shadow is used for the glow specifically
   because it paints outside the border-box, unaffected by that clipping
   (same reasoning as the existing halo-pulse comment above). */
.aura-explore-card {
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), border-color 0.45s ease, box-shadow 0.45s ease, opacity 0.6s ease;
}
.aura-explore-card:active { transition-duration: 0.12s; }

.aura-explore-card-bg {
  position: absolute;
  top: -6%; left: -6%; right: -6%; bottom: -6%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
  z-index: 0;
}
.aura-explore-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.22) 50%, transparent 58%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.8s ease, opacity 0.8s ease;
  z-index: 1;
}

/* .aura-explore-card-bg/-shine are position:absolute, which paints them
   above plain static content regardless of DOM order — without this,
   they fully hide the name/hook/link text underneath. Lifting the text
   into its own stacking layer on top is the fix, nothing else changes. */
.aura-explore-card-name,
.aura-explore-card-hook,
.aura-explore-card-link {
  position: relative;
  z-index: 2;
}

/* Gentle reveal-on-scroll (mobile point 8, harmless on desktop too):
   hero-scene-v3.js adds .reveal-pending on load, then swaps it for
   .reveal-visible via IntersectionObserver the first time each card
   enters the viewport. No JS at all (or reduced-motion) = cards simply
   render at full opacity, no broken "stuck invisible" state possible. */
.aura-explore-card.reveal-pending { opacity: 0; transform: translateY(14px); }
.aura-explore-card.reveal-visible { opacity: 1; transform: translateY(0); }

@media (hover: hover) and (pointer: fine) {
  .aura-explore-card:hover { transform: translateY(-7px) scale(1.02); }
  .aura-explore-card:hover .aura-explore-card-bg { transform: scale(1.06); }
  .aura-explore-card:hover .aura-explore-card-shine { transform: translateX(130%); opacity: 1; }

  .aura-explore-card[data-aura="delulu"]:hover { border-color: rgba(255,46,147,0.9); animation-play-state: paused; box-shadow: 0 0 95px 18px rgba(255,46,147,0.85); }
  .aura-explore-card[data-aura="goblin"]:hover { border-color: rgba(111,191,106,0.9); animation-play-state: paused; box-shadow: 0 0 95px 18px rgba(111,191,106,0.85); }
  .aura-explore-card[data-aura="cleangirl"]:hover { border-color: rgba(245,207,107,0.9); animation-play-state: paused; box-shadow: 0 0 95px 18px rgba(245,207,107,0.85); }
  .aura-explore-card[data-aura="cottagecore"]:hover { border-color: rgba(245,244,247,0.85); animation-play-state: paused; box-shadow: 0 0 95px 18px rgba(245,244,247,0.75); }
  .aura-explore-card[data-aura="hyperpop"]:hover { border-color: rgba(0,229,255,0.9); animation-play-state: paused; box-shadow: 0 0 95px 18px rgba(0,229,255,0.85); }
  .aura-explore-card[data-aura="darkacademia"]:hover { border-color: rgba(220,75,92,0.9); animation-play-state: paused; box-shadow: 0 0 95px 18px rgba(220,75,92,0.85); }
  .aura-explore-card[data-aura="y2k"]:hover { border-color: rgba(123,104,238,0.9); animation-play-state: paused; box-shadow: 0 0 95px 18px rgba(123,104,238,0.85); }
  .aura-explore-card[data-aura="coastal"]:hover { border-color: rgba(111,168,220,0.9); animation-play-state: paused; box-shadow: 0 0 95px 18px rgba(111,168,220,0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .aura-explore-card.reveal-pending { opacity: 1; transform: none; }
}

/* ============================================================
   UNIFIED FUNNEL — birth-details gating nudge + "free reading" badge.
   Deliberately reuses existing tokens/classes everywhere else (the free
   Aura+Zodiac reading block reuses .daily-preview/.aura-sections, the
   CTA reuses .capture-box/.capture-form/.hero-formula) — this is the only
   new CSS the funnel unification needed.
   ============================================================ */
.birth-inline-title { text-transform: uppercase; letter-spacing: 0.04em; }
.birth-inline-consent {
  font-size: 10.5px;
  color: var(--text-dim);
  margin: 8px 0 0;
  line-height: 1.4;
}
.birth-nudge-message {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  line-height: 1.45;
  margin: 10px 0 0;
}
.birth-inline-block { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.birth-inline-block.birth-inline-nudge { animation: birthNudgePulse 1.6s ease-in-out infinite; }
@keyframes birthNudgePulse {
  0%, 100% { border-color: rgba(255,46,147,0.4); box-shadow: 0 0 22px 2px rgba(123,104,238,0.22); }
  50%      { border-color: rgba(255,46,147,0.95); box-shadow: 0 0 40px 6px rgba(255,46,147,0.5); }
}
.birth-inline-block.birth-inline-confirmed { animation: birthConfirmPulse 1.1s ease-out; }
@keyframes birthConfirmPulse {
  0%   { border-color: rgba(255,46,147,0.9); box-shadow: 0 0 34px 5px rgba(123,104,238,0.4); }
  100% { border-color: var(--border); box-shadow: none; }
}

/* "START HERE" first-impression glow — gentle and slow, distinct from the
   urgent birth-inline-nudge pulse above. Removed permanently (see app.js)
   the moment the visitor touches any field in the block. */
.birth-inline-block.start-here-attn { animation: startHereGlow 2.6s ease-in-out infinite; }
@keyframes startHereGlow {
  0%, 100% { border-color: var(--border); box-shadow: none; }
  50%      { border-color: rgba(255,46,147,0.55); box-shadow: 0 0 18px 2px rgba(123,104,238,0.18); }
}

/* Natural-order handoff cue: birth details completed -> look at Q1 (see
   maybeSignalQuizReady() in app.js). One-shot, purely visual. */
.options.options-ready-pulse { animation: optionsReadyPulse 1.2s ease-out; }
@keyframes optionsReadyPulse {
  0%   { box-shadow: 0 0 0 3px rgba(255,46,147,0.45); border-radius: 14px; }
  100% { box-shadow: 0 0 0 0 rgba(255,46,147,0); border-radius: 14px; }
}
.free-reading-line {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin: 14px auto 8px;
}
.free-reading-line span {
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .birth-inline-block.birth-inline-nudge,
  .birth-inline-block.birth-inline-confirmed {
    animation: none !important;
    border-color: rgba(255,46,147,0.7);
    box-shadow: 0 0 24px 3px rgba(255,46,147,0.3);
  }
  .birth-inline-block.start-here-attn {
    animation: none !important;
    border-color: rgba(255,46,147,0.5);
    box-shadow: 0 0 16px 2px rgba(123,104,238,0.15);
  }
  .options.options-ready-pulse {
    animation: none !important;
    box-shadow: none;
  }
}

/* FREE GUIDE TWO-CARD BLOCK (added 2026-09-17). This whole site keeps a
   fixed ~480px-wide ".screen" column on every viewport (a centered "app
   card" look, not a real responsive-desktop layout) -- see .aura-explore-
   grid's own repeat(2, 1fr) a few hundred lines up for the exact same
   precedent. So "side-by-side on desktop / stacked on mobile" here means
   the same thing .aura-explore-grid already means: 2 columns by default,
   collapsing to 1 only once the viewport itself gets phone-narrow (mirrors
   the existing max-width:640px breakpoint used elsewhere in this file).
   Deliberately NOT a viewport-breakout (100vw negative-margin trick) --
   #screen-intro has overflow:hidden for its background/decoration layers,
   which would clip anything wider than the screen box anyway. */
.dual-cta-block {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  margin-top: 18px;
  align-items: stretch;
}
.dual-cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 6px;
  padding: 16px 14px 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-decoration: none;
  height: 100%;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Hover glow (2026-09-18) -- reuses this site's own established hover
   convention (.option:hover's border+shadow lift, .aura-explore-card's
   transform+transition timing) rather than inventing a new treatment.
   Same glow on BOTH cards (primary and secondary) so neither outranks
   the other visually -- the primary/secondary hierarchy here is carried
   by button style + card order, not by hover intensity (see the
   2026-09-17 comments above on that same principle). Gated behind
   (hover:hover)+(pointer:fine) so touch devices never get a stuck
   synthesized hover state, matching .option's own existing guard. Glow
   radius kept modest (not the 95px aura-card halo) since #screen-intro
   clips overflow near the viewport edge. */
@media (hover: hover) and (pointer: fine) {
  .dual-cta-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 46, 147, 0.55);
    box-shadow: 0 8px 32px rgba(255, 46, 147, 0.22), 0 0 40px 6px rgba(123, 104, 238, 0.28);
  }
}
/* Equal-height visual band, same box for both cards so the wheel graphic
   and the PDF cover align top/height instead of one card floating an
   image and the other leaving dead space above its text (2026-09-17
   visual-balance fix -- the original version had no visual on the
   primary card at all, which is what created the empty-upper-area bug). */
.dual-cta-visual {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 2px;
}
.dual-cta-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.dual-cta-card-secondary .dual-cta-eyebrow { color: #d8b45a; }
.dual-cta-cover {
  max-width: 92px;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
/* 2026-09-21: the primary card's visual used to reuse the same celestial-
   wheel SVG the hero builds via zodiac-wheel.js, cropped/zoomed into this
   small box -- its ring only draws spokes/ticks/glyphs, so the box's own
   center (inside the inner ring) had nothing in it, reading as an empty
   hole ("sloppy"). Replaced with a dedicated ornate wheel graphic (gold
   rim + glyphs, glowing moon/star + figure center). Split into two
   pre-masked PNG layers (personalized-horoscope-wheel-ring.png / -center.png,
   cut at the artwork's own ring boundary via a multi-angle brightness scan
   so the seam lands exactly on the existing gold ring line) so only the
   outer zodiac-glyph ring rotates while the center figure stays fixed --
   a single flattened image would have spun the figure along with the ring. */
.dual-cta-wheel-wrap {
  position: relative;
  display: block;
  width: 108px;
  height: 108px;
  filter: drop-shadow(0 0 14px rgba(180, 140, 255, 0.55));
}
.dual-cta-wheel-ring,
.dual-cta-wheel-center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.dual-cta-wheel-ring {
  animation: wheelSlowRotate 220s linear infinite;
}
.dual-cta-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin-top: 2px;
}
.dual-cta-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  line-height: 1.4;
}
/* Top-anchored, not bottom-anchored (2026-09-17 alignment fix v2):
   margin-top:auto pushed the button based on ALL remaining space in the
   equal-height card, which includes whatever sits BELOW the button too --
   the secondary card has an extra bridge-link line below its button that
   the primary card doesn't have, so auto-margin absorbed a different
   amount of space above the button in each card even though the content
   above (visual/eyebrow/title/sub) is the same height in both. A fixed
   margin here means the button's Y position is now determined purely by
   the (equal) content stacked above it, not by what follows below. */
.dual-cta-btn {
  margin-top: 10px;
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  padding: 12px 10px;
  text-decoration: none;
  /* Fixed min-height (sized to fit the longer, two-line "Download Your Free
     Guide" label) + flex centering so the shorter one-line "Reveal My
     Horoscope" button matches it exactly instead of looking shorter
     (2026-09-17 button-height-match fix). */
  min-height: 58px;
  box-sizing: border-box;
}
.dual-cta-microcopy {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 4px;
}
.dual-cta-bridge-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .dual-cta-block { grid-template-columns: 1fr; }
  .dual-cta-visual { height: 130px; }
}