/* PHASE 1 — chrome colors below are neutral editorial placeholders, NOT the
   approved final visual identity. Deliberately NOT MindType's neon
   magenta/cyan "Mind Scan" signature (brief section 7: must not visually
   look like MindType or AuraType) and NOT a final romantic palette either
   (that's real visual-design work, not architecture). Each of the 8
   LoveTypes gets its own accent via `colors` in archetypes-data.js
   (currently placeholder too) — these root vars only drive shared chrome:
   buttons, borders, the quiz shell. */
:root {
  --bg: #0a0a0f;
  --bg-card: #17161d;
  --text: #f5f4f7;
  --text-dim: #9b98a8;
  --accent: #b8925a;
  --accent-2: #8a7267;
  --border: #2a2830;
}

* { 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; scroll-behavior: smooth; }

/* ---------- AMBIENT BACKGROUND (Visual Phase 7.3) ----------
   Cinematic black-cherry/burgundy/rose atmosphere behind the whole app —
   AuraType-depth-inspired (mottled color + a field of independently-timed
   light points) but its own romantic identity, not a recolor. Fixed,
   z-index:0, pointer-events:none — .app is explicitly z-index:1 so this
   stays behind it (see the comment on .app; negative z-index measurably
   failed to paint behind .app's own stacking context in this page).
   No flames, no confetti, no obvious floating hearts — the 3 heart points
   are undersized/underlit on purpose so they read as discovered, not
   decorated. Base stays near-black so text contrast and the 8 photographic
   cards are always the strongest objects on screen. */
.ambient-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background: var(--bg);
}

/* Mottled irregular clouds — one element, six radial-gradient layers at
   different positions/sizes/colors so the shape reads as organic mottling
   rather than a single clean glow. background-position drifts very slowly
   (90s) for a "breathing" feel; the element is oversized (140% x 140%,
   centered -20%/-20%) so the drift never reveals a hard edge. */
.ambient-clouds {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  filter: blur(70px);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(122,18,38,0.85) 0%, rgba(122,18,38,0) 34%),
    radial-gradient(circle at 78% 15%, rgba(76,12,28,0.8)  0%, rgba(76,12,28,0)  30%),
    radial-gradient(circle at 85% 72%, rgba(100,28,44,0.75) 0%, rgba(100,28,44,0) 32%),
    radial-gradient(circle at 30% 80%, rgba(60,10,22,0.85) 0%, rgba(60,10,22,0)  30%),
    radial-gradient(circle at 55% 48%, rgba(140,45,62,0.55) 0%, rgba(140,45,62,0) 36%),
    radial-gradient(circle at 8% 55%,  rgba(90,20,34,0.7)  0%, rgba(90,20,34,0)  28%);
  background-repeat: no-repeat;
  background-size: 70% 70%;
  animation: ambientCloudDrift 90s ease-in-out infinite alternate;
  will-change: background-position, filter;
}

@keyframes ambientCloudDrift {
  0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%, 0% 50%; filter: blur(70px) brightness(1); }
  50%  { background-position: 8% 6%, 92% 10%, 90% 88%, 10% 92%, 45% 55%, 6% 46%; filter: blur(78px) brightness(1.12); }
  100% { background-position: 3% 10%, 96% 3%, 94% 92%, 5% 86%, 52% 42%, 12% 58%; filter: blur(72px) brightness(1.05); }
}

/* Light points — soft white/rose glows that fade in, hold, and fade out on
   their own independent clock (--al-dur/--al-delay per point, set inline),
   so nothing in the field ever blinks in unison. */
.ambient-lights { position: absolute; inset: 0; }

.al {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: alPulse var(--al-dur, 7s) ease-in-out var(--al-delay, 0s) infinite;
}
.al-dot {
  width: var(--al-size, 3px);
  height: var(--al-size, 3px);
  background: radial-gradient(circle, rgba(255,235,240,0.95) 0%, rgba(235,170,185,0.5) 45%, rgba(235,170,185,0) 75%);
  filter: blur(0.4px);
}

/* Heart points — ~15-20% of the light field (3 of 17), sized and lit to
   actually read as a heart at peak brightness ("oh, that's a tiny heart"),
   not just a slightly-bigger dot. Fade in/glow/fade out only — no upward
   float, no drift; the faint scale change is the only motion. Still small,
   still soft (light blur for glow), never a decorative Valentine shape. */
.al-heart {
  width: 18px;
  height: 18px;
  filter: blur(0.3px);
  background: radial-gradient(circle at 50% 40%, rgba(255,240,244,0.95) 0%, rgba(240,190,205,0.7) 50%, rgba(240,190,205,0) 78%);
  clip-path: path("M9 16.2C9 16.2 2.4 11.4 2.4 6.6A4 4 0 0 1 9 3.2A4 4 0 0 1 15.6 6.6C15.6 11.4 9 16.2 9 16.2Z");
}

@keyframes alPulse {
  0%, 100% { opacity: 0; transform: scale(0.7); }
  45%      { opacity: 0.85; transform: scale(1); }
  70%      { opacity: 0.5; transform: scale(0.95); }
}
.al-heart { animation-name: alHeartPulse; }
@keyframes alHeartPulse {
  0%, 100% { opacity: 0;    transform: scale(0.8); }
  45%      { opacity: 0.8;  transform: scale(1); }
  70%      { opacity: 0.5;  transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-clouds { animation: none; }
  .al { animation: none; opacity: 0.35; }
  .al-heart { animation: none; opacity: 0.28; }
}

.app {
  min-height: 100vh;
  display: flex;
  align-items: center;
  align-items: safe center;
  justify-content: center;
  position: relative;
  /* Explicit stacking above .ambient-bg (z-index:0) — needed because this
     element's own sceneIntro animation (transform/filter) makes it create
     a stacking context, and without an explicit z-index here the ambient
     layer was empirically found to paint over it instead of behind it. */
  z-index: 1;
  /* No `both`/`forwards` fill-mode: the "to" keyframe below is visually
     identical to no animation at all (blur(0)/scale(1)/opacity:1), but a
     persisted non-"none" transform/filter on this element after the intro
     ends creates a new containing block for every position:fixed
     descendant (age-gate-modal, coach-panel) — pinning them to this
     scrollable box instead of the viewport once the user has scrolled.
     Letting the animation NOT persist its end-state removes that leak
     with no visible difference. */
  animation: sceneIntro 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@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 / HERO ---------- */
#screen-intro { align-items: center; text-align: center; overflow: hidden; gap: 22px; padding-top: 26px; padding-bottom: 40px; }

.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); }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; }
}

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

@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; }

.hero-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0;
  max-width: 320px;
  color: var(--text);
}

.hero-support {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.9;
  line-height: 1.4;
  margin-top: 1px;
}

.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(184,146,90,0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(184,146,90,0.24); }

.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: 12px; color: var(--text-dim); margin-top: 2px; opacity: 0.8; }

a.btn-primary { display: inline-block; text-decoration: none; text-align: center; }

/* ---------- COACH HERO ----------
   2026-08-31: repositioned as the LoveType/problem-first hero — the quiz is
   the homepage's lead product, Coach is downstream (see index.html for the
   section order). Class name kept as-is to avoid an unnecessary rename;
   this now styles the top-of-page hero regardless of which product it
   introduces. Bordered/glowing panel on top of the existing ambient
   burgundy background — intentionally the strongest object on screen,
   without introducing a new color palette or a clinical/corporate look.
   Coach functionality itself is NOT built here — positioning/copy only. */
.coach-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 22px 22px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(122,18,38,0.34), rgba(20,14,20,0.6));
  border: 1px solid rgba(184,146,90,0.38);
  box-shadow: 0 0 0 1px rgba(184,146,90,0.06), 0 22px 60px rgba(122,18,38,0.38), 0 0 44px rgba(184,146,90,0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.05s forwards;
}

.coach-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(184,146,90,0.16);
  border: 1px solid rgba(184,146,90,0.45);
  color: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.coach-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.22;
  color: var(--text);
  max-width: 300px;
}

/* The benefit line — extremely simple, emotional consumer language,
   immediately under the headline. This carries the most weight after the
   headline itself, so a visitor understands the product in ~5 seconds. */
.coach-benefit {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  max-width: 300px;
}

/* What the Coach actually helps with — secondary to the benefit line,
   quieter, still short. */
.coach-helps {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 300px;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Reserved for a future Premium price line inside .coach-hero (e.g. "Your
   personal Love Coach from €X.XX/month") — not rendered anywhere yet; no
   price has been calculated or approved. Ready so one line of markup is
   all that's needed once pricing is decided. */
.coach-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 6px;
}

/* ---------- RECONNECTION STRIP (above the fold, 2026-09-01) ----------
   A second, immediate entry path next to the quiz for visitors already in
   an active breakup/reconnection situation. Deliberately smaller/quieter
   than .coach-hero (no backdrop-blur, no scale-in animation) so the hero
   stays the strongest object on screen, but the border/glow is a touch
   warmer/stronger than the hero's to read as "a real paid thing," not
   another value-prop card. */
.reconnect-strip {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 20px 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(184,146,90,0.16), rgba(20,14,20,0.55));
  border: 1px solid rgba(184,146,90,0.55);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35), 0 0 30px rgba(184,146,90,0.12);
  text-align: center;
}
.reconnect-strip-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.reconnect-strip-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--text);
}
.reconnect-strip-support {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 290px;
}
.reconnect-strip-cta { margin-top: 6px; padding: 14px 20px; font-size: 15px; }

/* Concrete "phone at night" Coach value moments — real thoughts, not
   feature bullets. Left-aligned quote cards, quiet not clinical. */
.coach-moments {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coach-moment {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text);
  opacity: 0.94;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 2px solid var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
}

/* Growth note — makes clear LoveType isn't only for emergencies; sits
   between the acute "moments" list and the YOU/THEM/US differentiation. */
.coach-growth-note {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Differentiation from a generic chatbot — YOU/THEM/US, no fake
   compatibility score, no soulmate claim, no scientific-validity
   overclaim, no "it knows what they're thinking" claim. */
.coach-diff {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.coach-diff-lead {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  max-width: 300px;
}

.coach-diff-utu {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.coach-diff-utu .mt-dot {
  color: var(--text-dim);
  font-weight: 400;
  margin: 0 2px;
}

/* Daily-habit retention pitch — sells "love better every day," not only
   in-the-moment help, so the homepage gives a reason to stay subscribed,
   not just a reason to open the app in a crisis. */
.coach-daily {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 20px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(184,146,90,0.22);
}

.coach-daily-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(184,146,90,0.14);
  border: 1px solid rgba(184,146,90,0.4);
  color: var(--accent);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.coach-daily-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  max-width: 280px;
}

.coach-daily-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 300px;
}

.coach-daily-close {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.92;
  max-width: 300px;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Quiz entry — the quiz is the onboarding/intelligence layer into the
   Coach, not the headline product; this is its bridge copy + CTA. The
   CTA is a same-page anchor scroll to #home-quiz, so the quiz itself
   (Quiz V2 questions/logic) is completely untouched. */
.quiz-entry {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding-top: 4px;
}

.quiz-entry-lead {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--text);
  max-width: 280px;
}

#home-quiz { scroll-margin-top: 20px; }

/* ---------- "Meet the 8 LoveTypes" (intro screen) ----------
   Interactive tiles — start as a gradient chip (colors[] pair), then swap to
   the real card artwork as a cover background once it's confirmed loaded
   (see the has-art preload pattern in index.html's inline script). Tapping a
   tile opens the explore modal below. All 8 keys have approved art as of
   Visual Phase 7.3, so tiles swap to real photography on load. */
.lovetype-explore-section {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  text-align: center;
}

.lovetype-explore-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 6px;
}

.lovetype-explore-sub {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 18px;
}

.lovetype-explore-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.lovetype-explore-card {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.lovetype-explore-card:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .lovetype-explore-card:hover { border-color: rgba(255,255,255,0.28); }
}
.lovetype-explore-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lovetype-explore-card-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.lovetype-explore-card-hook {
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  margin-top: 4px;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Once real artwork has loaded, the tile IS the card — hide the HTML text
   overlay so nothing duplicates/clashes. LoveType's art bakes name/tagline/
   profile copy directly into the photo (MindType model, decided in Visual
   Phase 7.3), so this overlay only ever shows during the gradient fallback. */
.lovetype-explore-card.has-art .lovetype-explore-card-name,
.lovetype-explore-card.has-art .lovetype-explore-card-hook {
  display: none;
}

/* Mobile: horizontal swipe carousel of full 9:16 cards instead of a cropped
   2-col grid (same reasoning as MindType's own mobile carousel pass). */
@media (max-width: 680px) {
  .lovetype-explore-heading, .lovetype-explore-sub { padding: 0 24px; }

  .lovetype-explore-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    margin: 0 -24px;
    padding: 4px 24px 16px;
    scrollbar-width: none;
  }
  .lovetype-explore-grid::-webkit-scrollbar { display: none; }

  .lovetype-explore-card {
    flex: 0 0 84vw;
    max-width: 360px;
    scroll-snap-align: start;
    padding: 0;
    justify-content: flex-end;
  }
  .lovetype-explore-card-name,
  .lovetype-explore-card-hook {
    padding: 0 16px;
  }
  .lovetype-explore-card-name { margin-top: 14px; }
  .lovetype-explore-card-hook { margin-bottom: 14px; }
}

/* Desktop: static 2x4 gallery, breaks out of the 480px hero column so the
   tall 9:16 cards render large enough to read (same technique as MindType). */
@media (min-width: 681px) {
  #screen-intro { overflow: visible; }

  .lovetype-explore-section {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .lovetype-explore-heading, .lovetype-explore-sub {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
  }

  .lovetype-explore-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: clamp(20px, 3vw, 36px);
    max-width: 960px;
    margin: 0 auto;
    padding: 6px 24px 24px;
  }

  .lovetype-explore-card {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 0;
    justify-content: flex-end;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .lovetype-explore-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }
  }
  .lovetype-explore-card-name,
  .lovetype-explore-card-hook {
    padding: 0 18px;
  }
  .lovetype-explore-card-name { margin-top: 16px; }
  .lovetype-explore-card-hook { margin-bottom: 16px; }
}

/* ---------- ARCHETYPE EXPLORE MODAL ----------
   In-page modal (MindType's choice, vs. AuraType's separate /auras/{slug}
   pages) so exploring an archetype never loses homepage scroll position.
   Same content (renderProfileInto), closable via X, backdrop click, Escape. */
.explore-modal { position: fixed; inset: 0; z-index: 50; display: none; }
.explore-modal.open { display: block; }
.explore-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,10,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.explore-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  margin: 6vh auto 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 480px) {
  .explore-modal-panel { border-radius: 22px; margin-top: 6vh; }
}
.explore-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(8,8,12,0.55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.explore-modal-scroll { overflow-y: auto; padding: 0 22px 22px; }
.explore-modal-art { display: block; width: calc(100% + 44px); margin: 0 -22px 16px; }
.explore-modal-tagline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 16px;
}
.explore-modal-cta { margin: 18px 0 4px; }

/* ---------- 18+ SAFETY GATE (Phase P2) ----------
   Reusable modal invoked programmatically by love-age-gate.js — never by
   the quiz/result/Weekly Love Practice flow. Deliberately lightweight: a
   short yes/no question, not a legal screen. Shares the modal-open body
   lock below with the explore modal. */
.age-gate-modal { position: fixed; inset: 0; z-index: 60; display: none; }
.age-gate-modal.open { display: block; }
.age-gate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,10,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.age-gate-panel {
  position: relative;
  z-index: 1;
  width: calc(100% - 32px);
  max-width: 360px;
  margin: 14vh auto 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 28px 22px 22px;
  text-align: center;
}
.age-gate-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(8,8,12,0.55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.age-gate-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}
.age-gate-text { font-size: 14px; line-height: 1.5; margin-bottom: 20px; opacity: 0.85; }
.age-gate-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- DECISION BRIDGE (2026-08-31 funnel fix pass) ----------
   Sits right after the full profile: the result must not end at
   personality insight, so this bridges recognition into a concrete next
   action. Plain text + pill buttons — no new UI system. */
.decision-bridge {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.decision-bridge-lead { font-size: 15px; font-weight: 700; line-height: 1.5; }
.decision-bridge-question { font-size: 13px; color: var(--text-dim); margin-bottom: 2px; }
.decision-paths {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.decision-path {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.15s ease;
}
.decision-path:hover { border-color: var(--accent); }

/* ---------- RECONNECTION CTA CARD (2026-08-31 funnel fix pass) ----------
   The Reconnection product's only entry point from the main funnel.
   Mirrors .coach-entry's card shape so it reads as part of the same
   family without competing visually. */
.reconnect-cta-card {
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.reconnect-cta-title { font-size: 17px; font-weight: 800; }
.reconnect-cta-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.reconnect-cta-btn { margin-top: 4px; padding: 14px 18px; font-size: 15px; }

/* ---------- AI LOVE COACH — entry card + panel (Phase P3) ---------- */
.coach-entry {
  width: 100%;
  max-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.coach-entry-title { font-size: 17px; font-weight: 800; }
.coach-entry-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.coach-entry-btn { margin-top: 4px; padding: 14px 18px; font-size: 15px; }

.coach-panel { position: fixed; inset: 0; z-index: 65; display: none; }
.coach-panel.open { display: block; }
.coach-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,10,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.coach-panel-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  height: 92vh;
  margin: 8vh auto 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 480px) {
  .coach-panel-sheet { border-radius: 22px; margin-top: 4vh; height: 90vh; }
}
.coach-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.coach-panel-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; }
.coach-panel-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(8,8,12,0.55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.coach-onboarding {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.coach-onboarding-lead { font-size: 13px; color: var(--text-dim); text-align: center; }
.coach-onboarding-block { display: flex; flex-direction: column; gap: 8px; }
.coach-onboarding-label { font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.coach-onboarding-toggle { display: flex; gap: 10px; }
.coach-onboarding-toggle .btn-ghost { flex: 1; }
.coach-onboarding-toggle .btn-ghost.active,
.coach-onboarding-partner-type.active {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #12100f;
}
.coach-onboarding-partner-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.coach-onboarding-partner-type {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.coach-onboarding-block input,
.coach-onboarding-block textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  resize: none;
}
.coach-onboarding-block input:focus,
.coach-onboarding-block textarea:focus { outline: none; border-color: var(--accent); }
.coach-onboarding-start { margin-top: 4px; }

.coach-quickstarts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.coach-quickstart-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
}
.coach-quickstart-chip:hover { border-color: var(--accent-2); }

.coach-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.coach-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.coach-message {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.coach-message-user {
  align-self: flex-end;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  color: #12100f;
  border-bottom-right-radius: 4px;
}
.coach-message-coach {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.coach-message-system {
  align-self: center;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
  max-width: 100%;
}
.coach-message-typing { align-self: flex-start; color: var(--text-dim); font-size: 13px; padding: 4px 14px; }
.coach-input-form {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.coach-input-form input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
}
.coach-input-form input:focus { outline: none; border-color: var(--accent); }
.coach-send-btn { width: auto; max-width: none; margin-top: 0; padding: 12px 18px; font-size: 14px; box-shadow: none; flex-shrink: 0; }
.coach-chat-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 8px 18px 14px;
  flex-shrink: 0;
}
.coach-forget-btn,
.coach-manage-subscription-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 11.5px;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
}

/* ---- Phase P4: Premium offer + ready screens ---- */
.coach-premium,
.coach-premium-ready {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 24px 28px;
  overflow-y: auto;
}
.coach-premium-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-2);
}
.coach-premium-title {
  font-size: 21px;
  line-height: 1.3;
  margin: 0;
}
.coach-premium-bullets {
  list-style: none;
  padding: 0;
  margin: 6px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  width: 100%;
  max-width: 320px;
}
.coach-premium-bullets li {
  font-size: 13.5px;
  color: var(--text-dim);
  padding-left: 20px;
  position: relative;
  line-height: 1.4;
}
.coach-premium-bullets li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.coach-premium-price { font-size: 22px; font-weight: 700; margin: 4px 0 0; }
.coach-premium-billing-note { font-size: 12px; color: var(--text-dim); margin: 0; }
.coach-premium-subscribe-btn { width: 100%; max-width: 320px; margin-top: 8px; }
.coach-premium-error {
  font-size: 12.5px;
  color: #d9534f;
  margin: 4px 0 0;
}
.coach-premium-restore { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 320px; }
.coach-premium-restore-toggle {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.coach-premium-restore-form { display: flex; gap: 8px; width: 100%; }
.coach-premium-restore-form input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
}
.coach-premium-restore-form input:focus { outline: none; border-color: var(--accent); }
.coach-premium-restore-msg { font-size: 12px; color: var(--text-dim); margin: 0; }

.coach-premium-ready-title { font-size: 19px; margin: 0 0 8px; }

body.modal-open { overflow: hidden; }

/* ---------- QUIZ (inline inside #screen-intro, not a separate screen) ---------- */
.home-quiz {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 16px 14px 18px;
  border-radius: 20px;
  border: 1px solid rgba(184,146,90,0.16);
  background: linear-gradient(180deg, rgba(184,146,90,0.06), rgba(0,0,0,0) 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.quiz-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.quiz-status-row { display: flex; align-items: center; justify-content: space-between; }

.scan-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.scan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 1px rgba(184,146,90,0.7);
  animation: scanDotPulse 1.6s ease-in-out infinite;
}
@keyframes scanDotPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

.quiz-count {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.quiz-count-sep { color: var(--text-dim); margin: 0 3px; }

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

.quiz-body { transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1), transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); }
.quiz-body.quiz-fade { opacity: 0; transform: translateX(-32px) scale(0.97); }

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

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

.option {
  position: relative;
  padding: 15px 18px 15px 22px;
  border-radius: 14px;
  border: 1px solid rgba(184,146,90,0.24);
  background: linear-gradient(180deg, rgba(184,146,90,0.06), rgba(0,0,0,0)), var(--bg-card);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 4px 14px rgba(0,0,0,0.25);
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.option::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: 0.85;
}
.option:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .option:hover {
    border-color: rgba(184,146,90,0.5);
    box-shadow: 0 0 0 1px rgba(184,146,90,0.2), 0 0 22px rgba(184,146,90,0.12);
  }
}
.option.selected {
  border-color: var(--accent);
  background: linear-gradient(120deg, rgba(184,146,90,0.18), rgba(138,114,103,0.14));
  animation: optionSelectPulse 0.32s ease-out;
}
@keyframes optionSelectPulse {
  0% { box-shadow: 0 0 0 0 rgba(184,146,90,0.5); }
  60% { box-shadow: 0 0 0 6px rgba(184,146,90,0.08); }
  100% { box-shadow: 0 0 0 0 rgba(184,146,90,0); }
}

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

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

/* Locked to 9:16 per Phase 1 approved visual direction (section 7) — this
   is the exact card that gets downloaded/shared to TikTok/IG Stories/Reels,
   so its aspect ratio is architecture, not a design preference. */
.result-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.55);
  background: linear-gradient(158deg, var(--rc-c1, #6d5a3f), var(--rc-c2, #8a7267));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 24px 22px;
  color: #fff;
  font-family: 'Manrope', sans-serif;
}

.rc-art-img { display: none; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.result-card.has-art { padding: 0; }
.result-card.has-art .rc-fallback { display: none; }

.rc-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.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.35) 0%, rgba(255,255,255,0.12) 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.25) 0%, rgba(255,255,255,0.08) 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;
}

.rc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 22px 0 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);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

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

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

.result-quote {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  color: var(--text);
  max-width: 320px;
  line-height: 1.4;
}

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

/* ---------- ACCURACY FEEDBACK ---------- */
.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); }
.accuracy-submit { padding: 8px; font-size: 13px; }
.accuracy-thanks { font-size: 13px; font-weight: 700; color: var(--text-dim); }

/* ---------- FULL PROFILE (ungated result depth) ---------- */
.full-profile-wrap {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.full-profile-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}
.full-profile { display: flex; flex-direction: column; gap: 12px; }
.profile-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px 14px;
  text-align: left;
}
.profile-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.profile-text { font-size: 14px; line-height: 1.6; color: var(--text); }
.profile-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.profile-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  padding-left: 16px;
  position: relative;
}
.profile-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
}

/* ---------- EMAIL CAPTURE ---------- */
.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: 2px; }
.capture-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-bottom: 6px; }
.capture-submit { margin-top: 4px; padding: 14px; font-size: 15px; box-shadow: none; }
.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); }
.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-box.submitted .capture-form { display: none; }
.capture-box.submitted .capture-desc { display: none; }
.capture-box.submitted .capture-success { display: flex; }

/* ---------- WEEKLY LOVE PRACTICE (Phase 6.2) ---------- */
.weekly-practice-wrap {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.weekly-practice-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}
.weekly-status-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.weekly-status-label {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}
.weekly-status-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.weekly-status-pill {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.weekly-status-pill:hover { border-color: var(--accent-2); }
.weekly-status-pill.active {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #12100f;
}
.weekly-practice-card { display: flex; flex-direction: column; gap: 12px; }
.weekly-practice-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  text-align: center;
  padding: 0 4px 4px;
}
.weekly-say-this-text {
  font-style: italic;
  position: relative;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
}
.weekly-ktla-block { border-color: var(--accent-2); }
.weekly-ktla-block .profile-label { color: var(--accent-2); }

@media (max-height: 700px) {
  #screen-intro { padding-top: 20px; padding-bottom: 20px; gap: 28px; }
}