/* ============================================================
   LaterVape Landing Page — Style System
   Title/headlines: Fredoka SemiBold (600) — one step lighter than Bold.
   Body/UI: system font stack (no extra download).
   ============================================================ */

/* --- CUSTOM PROPERTIES --- */
:root {
  --cream: #EFE9E1;
  --cream-dark: #E4DDCF;
  --card-white: rgba(255, 255, 255, 0.68);
  --charcoal: #4F4A45;
  --teal: #9FB7B1;
  --teal-mid: #8FA9B3;
  --magenta: #D1188D;
  --plum: #4A2B5F;
  --plum-light: #6B4190;
  --pink-glow: #FFB7E8;
  --sky-glow: #9EDCFF;
  --green-club: #4CAF50;
  --sunshine: #FFD84D;

  /* Title font: Fredoka SemiBold 600 (one weight, ~18 KB). */
  --font-head: 'Fredoka', sans-serif;
  /* Body and numbers: system stack — no extra font download */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-number: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

  --r-card: 28px;
  --r-btn: 50px;

  --shadow-card: 0 8px 32px rgba(79, 74, 69, 0.12);
  --shadow-hover: 0 16px 48px rgba(79, 74, 69, 0.18);
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Prevent browser default bold on headings so our font-weight: 600 (semi-bold) always wins */
h1, h2, h3, h4, h5, h6 { font-weight: inherit; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--cream);
  color: var(--charcoal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* --- UTILITIES --- */
.container { max-width: 1080px; margin: 0 auto; }
.text-center { text-align: center; }

/* Visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-mid);
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.12;
  color: var(--charcoal);
  margin-bottom: 14px;
  text-wrap: balance;
}
.section-title.light { color: #fff; }
.section-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: var(--charcoal);
  opacity: 0.72;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.55;
  text-wrap: pretty;
}
.section-sub.light { color: rgba(255, 255, 255, 0.82); opacity: 1; }

/* --- SCROLL REVEAL --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }


/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s;
}
.nav.scrolled {
  opacity: 1;
  pointer-events: auto;
  background: rgba(239, 233, 225, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 16px rgba(79, 74, 69, 0.08);
}
.nav-logo img {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 1px 4px rgba(74, 43, 95, 0.2));
}
.nav-cta {
  background: var(--magenta);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: var(--r-btn);
  border: none;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s;
  letter-spacing: 0.01em;
}
.nav-cta:hover { transform: scale(1.05); box-shadow: 0 4px 18px rgba(209, 24, 141, 0.35); }
.nav-cta:active { transform: scale(0.96); }


/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 80px;
  overflow: hidden;
  text-align: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/hero-bg.png');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(239, 233, 225, 0) 0%,
    rgba(239, 233, 225, 0.05) 55%,
    rgba(239, 233, 225, 0.85) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 100px;
  max-width: 520px;
  width: 100%;
}
.hero-logo {
  width: 88px;
  height: auto;
  animation: springIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-headline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.5rem, 9vw, 3.8rem);
  line-height: 1.08;
  color: var(--plum);
  -webkit-text-stroke: 1.5px var(--plum);
  paint-order: stroke fill;
  animation: springIn 0.55s 0.08s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Speech bubble + unicorn mascot */
.hero-mascot-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  animation: springIn 0.55s 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  width: 100%;
}
.hero-bubble-container {
  position: relative;
  width: min(250px, 62vw);
  flex-shrink: 0;
  z-index: 1;
}
.hero-bubble-img {
  width: 100%;
  filter: drop-shadow(0 6px 20px rgba(74, 43, 95, 0.15));
}
.hero-bubble-text {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-number);
  font-weight: 700;
  font-size: clamp(0.75rem, 2.2vw, 0.9rem);
  color: var(--plum);
  text-align: center;
  width: 76%;
  line-height: 1.38;
  pointer-events: none;
}
.hero-unicorn {
  width: min(120px, 30vw);
  margin-left: -14px; /* tuck behind bubble tail */
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 16px rgba(255, 183, 232, 0.75))
    drop-shadow(0 0 32px rgba(158, 220, 255, 0.4));
  /* no floating animation — static beside the bubble */
}

.hero-calendars {
  width: min(190px, 55vw);
  animation: springIn 0.55s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  filter: drop-shadow(0 8px 20px rgba(79, 74, 69, 0.15));
}
.hero-tagline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  color: var(--charcoal);
  opacity: 0.75;
  animation: springIn 0.55s 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: springIn 0.55s 0.46s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-cta-img {
  width: min(240px, 72vw);
  cursor: pointer;
  animation: ctaFloat 2.2s ease-in-out infinite;
  transition: transform 0.12s;
  filter: drop-shadow(0 4px 14px rgba(209, 24, 141, 0.28));
}
.hero-cta-img:hover { transform: scale(1.05); }
.hero-cta-img:active { transform: scale(0.94); }
.hero-coming-soon {
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 2.2vw, 1rem);
  color: var(--plum);
  opacity: 0.6;
  letter-spacing: 0.04em;
  animation: springIn 0.55s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-app-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(26, 26, 26, 0.88);
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s;
  backdrop-filter: blur(8px);
}
.hero-app-badge:hover { transform: scale(1.04) translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.28); }
.hero-app-badge:active { transform: scale(0.96); }
.hero-badge-icon { font-size: 22px; }
.hero-badge-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.hero-badge-small { font-size: 10px; opacity: 0.65; font-family: var(--font-body); }
.hero-badge-large { font-size: 16px; font-weight: 700; font-family: var(--font-number); letter-spacing: -0.02em; }

/* Floating sticker decorations */
.hero-sticker {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.82;
  filter: drop-shadow(0 4px 8px rgba(79, 74, 69, 0.2));
}
.hs-1 { top: 20%; left: 5%;  width: 56px; animation: floatA 3.3s ease-in-out infinite; }
.hs-2 { top: 28%; right: 4%; width: 48px; animation: floatB 2.8s ease-in-out infinite 0.6s; }
.hs-3 { bottom: 28%; left: 6%; width: 52px; animation: floatA 3.7s ease-in-out infinite 1.1s; }
.hs-4 { top: 18%; right: 8%; width: 44px; animation: floatB 3.0s ease-in-out infinite 1.8s; }

/* Hero variant: painted unicorn splash + overlay */
.hero.hero-painting {
  height: 62vh;
  min-height: 360px;
  max-height: 520px;
  justify-content: stretch;
  padding: 0;
}
.hero-painting-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-painting-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero-painting-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Darken only the bottom so the image stays bright */
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 55%,
    rgba(15, 8, 28, 0.25) 75%,
    rgba(15, 8, 28, 0.65) 100%
  );
}
.hero-painting-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 24px 36px;
  max-width: 520px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}
.hero-painting-top {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
}
.hero-painting-bottom {
  flex-shrink: 0;
  text-align: center;
}
.hero-painting-logo {
  width: 80px;
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4));
  animation: springIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-painting-headline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.85rem, 6vw, 3.2rem);
  line-height: 1.12;
  color: #fff;
  text-shadow:
    0 0 2px rgba(0,0,0,0.8),
    0 1px 4px rgba(0,0,0,0.6),
    0 2px 12px rgba(0,0,0,0.5),
    0 4px 24px rgba(0,0,0,0.4);
  margin: 0 0 12px;
  animation: springIn 0.55s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  text-wrap: balance;
}
.hero-painting-subhead {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  color: rgba(255,255,255,0.98);
  text-shadow:
    0 0 2px rgba(0,0,0,0.9),
    0 1px 3px rgba(0,0,0,0.7),
    0 2px 8px rgba(0,0,0,0.5),
    0 3px 16px rgba(0,0,0,0.4);
  margin: 0 0 20px;
  line-height: 1.35;
  animation: springIn 0.55s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  text-wrap: balance;
}
.hero-cta-btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.1rem;
  padding: 14px 28px;
  border-radius: var(--r-btn);
  background: #fff;
  color: var(--plum);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  transition: transform 0.2s, box-shadow 0.2s;
  animation: springIn 0.55s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-cta-btn:hover {
  transform: scale(1.04);
  box-shadow: var(--shadow-hover);
}
.hero-painting-content .hero-coming-soon {
  font-size: clamp(0.8rem, 2vw, 0.95rem);
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.06em;
  margin: 0;
  text-shadow:
    0 0 3px rgba(0,0,0,0.95),
    0 1px 4px rgba(0,0,0,0.8),
    0 2px 6px rgba(0,0,0,0.6),
    0 3px 12px rgba(0,0,0,0.5);
  animation: springIn 0.55s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Puff goal intro — cloud vibe + goal calendars */
.puff-goal-intro {
  position: relative;
  padding: 72px 24px 80px;
  overflow: hidden;
  background: var(--plum);
}
.puff-goal-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--plum) 0%, var(--plum-light) 50%, #3d2250 100%);
  z-index: 0;
}
.puff-goal-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 50%);
}
.puff-goal-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.puff-goal-headline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
  text-wrap: balance;
}
.puff-goal-tagline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: rgba(255,255,255,0.85);
  margin: 0 0 32px;
  text-wrap: pretty;
}
.puff-goal-calendars-wrap {
  display: flex;
  justify-content: center;
}
.puff-goal-calendars {
  width: min(280px, 75vw);
  filter: drop-shadow(0 8px 28px rgba(0,0,0,0.35));
}

/* ============================================================
   APP CAROUSEL — auto-cycling app screenshots
   ============================================================ */
.app-carousel-section {
  background: var(--cream-dark);
  padding: 72px 24px 80px;
}
.app-carousel-section .container { padding: 0 24px; }
/* Match iPhone 14/15/16 Pro corner radius (~55pt device) at 320px width ≈ 47px */
.app-carousel {
  max-width: 320px;
  margin: 36px auto 0;
  position: relative;
  overflow: visible;
}
/* Full phone height; shadow on track only so it sits under the phone */
.app-carousel-track {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  background: #1a1a1a;
  border-radius: 47px;
  overflow: hidden;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
}
.app-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
  border-radius: 47px;
  overflow: hidden;
}
.app-carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.app-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.app-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0 12px;
}
.app-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--teal-mid);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.app-carousel-dot:hover {
  opacity: 0.7;
}
.app-carousel-dot.active {
  opacity: 1;
  background: var(--plum);
  transform: scale(1.2);
}

/* ============================================================
   HOW IT WORKS — minimal flow
   ============================================================ */
.mechanic {
  background: var(--cream);
  padding: 88px 24px;
}
.steps-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.flow-step {
  background: var(--card-white);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-card);
  padding: 36px 28px 28px;
  text-align: center;
  flex: 1;
  min-width: 180px;
  max-width: 240px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.22s, box-shadow 0.22s;
}
.flow-step:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--shadow-hover); }
.flow-num {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 4rem;
  color: var(--teal);
  line-height: 1;
}
.flow-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--charcoal);
}
.flow-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--charcoal);
  opacity: 0.48;
}
.flow-arrow {
  font-size: 2rem;
  color: var(--teal);
  opacity: 0.45;
  flex-shrink: 0;
  font-family: var(--font-head);
  font-weight: 600;
}
.mechanic-coda {
  text-align: center;
  margin-top: 28px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--charcoal);
  opacity: 0.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ============================================================
   TAP DEMO
   ============================================================ */
.tap-demo {
  background: var(--plum);
  padding: 88px 24px;
  position: relative;
  overflow: hidden;
}
.tap-demo-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/themes/unicorn-chaos-bg.png');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
}
.tap-demo .section-label { color: var(--pink-glow); }
.tap-demo .section-title { color: #fff; }
.tap-demo .section-sub { color: rgba(255, 255, 255, 0.72); opacity: 1; }

.widget-demo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.widget-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 32px;
  padding: 28px 32px 26px;
  width: min(340px, 88vw);
  text-align: center;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 0 40px rgba(255, 183, 232, 0.2);
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.widget-card:active { transform: scale(0.97); }
.widget-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(191, 216, 210, 0.4) 0%, rgba(216, 207, 199, 0.4) 100%);
  pointer-events: none;
}
.widget-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.widget-logo { height: 26px; width: auto; }
.widget-streak {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--charcoal);
  background: rgba(255, 255, 255, 0.55);
  padding: 4px 10px;
  border-radius: 20px;
}
.widget-count-area {
  position: relative;
  z-index: 1;
  margin: 6px 0;
}
.widget-count {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 5.5rem;
  color: var(--teal);
  line-height: 1;
  transition: transform 0.12s cubic-bezier(0.34, 2.2, 0.64, 1), color 0.3s;
}
.widget-count.pop { transform: scale(1.18); }
.widget-goal-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  opacity: 0.58;
  margin-top: 2px;
}
.widget-status {
  position: relative;
  z-index: 1;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--charcoal);
  margin-top: 16px;
  min-height: 1.5em;
  transition: opacity 0.18s;
}
.widget-sticker-img {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 58px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}
.widget-hint {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  color: var(--charcoal);
  opacity: 0.38;
  margin-top: 10px;
  font-family: var(--font-body);
  transition: opacity 0.3s;
}
/* Tap ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(159, 183, 177, 0.3);
  transform: scale(0);
  animation: rippleOut 0.52s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}


/* ============================================================
   THEMES — character sticker cards
   ============================================================ */
.themes {
  background: var(--cream);
  padding: 88px 0 88px;
}
.themes .container { padding: 0 24px; }
.themes-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--magenta);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 8px 18px;
  border-radius: 50px;
  margin-top: 20px;
  box-shadow: 0 4px 18px rgba(209, 24, 141, 0.25);
}
.theme-cards-wrap {
  margin-top: 44px;
  padding: 0 24px;
}
.theme-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.theme-card {
  border-radius: 28px;
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 22px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.15);
  transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.22s;
  cursor: default;
}
.theme-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
}
.tc-unicorn { background: linear-gradient(155deg, #C5A4EC 0%, #8FC8F4 100%); }
.tc-cottage { background: linear-gradient(155deg, #B8D8A0 0%, #E4CFA0 100%); }
.tc-pups    { background: linear-gradient(155deg, #F2D4A8 0%, #B8E0CC 100%); }
.tc-goth    { background: linear-gradient(155deg, #2C1850 0%, #141028 100%); }

.theme-card-sticker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  width: 78%;
  max-width: 170px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.2));
}
.tc-unicorn .theme-card-sticker { animation: floatA 3.3s ease-in-out infinite; }
.tc-cottage .theme-card-sticker { animation: floatB 2.9s ease-in-out infinite 0.5s; }
.tc-pups    .theme-card-sticker { animation: floatA 3.6s ease-in-out infinite 1.0s; }
.tc-goth    .theme-card-sticker { animation: floatB 3.1s ease-in-out infinite 1.5s; }

.tc-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tc-sparkles::before, .tc-sparkles::after {
  content: '✦';
  position: absolute;
  color: rgba(255, 255, 255, 0.5);
  animation: floatB 2.5s ease-in-out infinite;
}
.tc-sparkles::before { top: 18%; left: 14%; font-size: 10px; }
.tc-sparkles::after  { top: 22%; right: 16%; font-size: 14px; animation-delay: 1.2s; }
.tc-goth .tc-sparkles::before,
.tc-goth .tc-sparkles::after { color: rgba(200, 180, 255, 0.45); }

.theme-card-name {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 16px;
  border-radius: 50px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.themes-note {
  text-align: center;
  margin-top: 28px;
  font-size: 0.88rem;
  color: var(--charcoal);
  opacity: 0.45;
  font-family: var(--font-body);
}


/* ============================================================
   FRIENDS
   ============================================================ */
.friends {
  background: #ECE7DF;
  padding: 88px 24px;
  position: relative;
}
.friends-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.friends-text .section-title,
.friends-text .section-sub { text-align: left; }
.friends-text .section-sub { margin-left: 0; margin-right: 0; }
.friends-list {
  list-style: none;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.friends-list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--charcoal);
  text-align: left;
}
.friends-list-item .fi-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.fi-icon {
  width: 42px;
  height: 42px;
  background: var(--card-white);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(79, 74, 69, 0.1);
}
.fi-text {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  /* Avoid orphans: keep at least 2 words on last line where possible */
  overflow-wrap: break-word;
}

/* Friends world visual */
.friends-visual {}
.friends-world-img-wrap {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  aspect-ratio: 754 / 547;
  width: 100%;
}
.friends-world-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* Walking sprite strip */
.sprite-strip {
  background: rgba(200, 220, 212, 0.35);
  border-radius: 20px;
  overflow: hidden;
  height: 80px;
  position: relative;
  margin-top: 24px;
}
.sprite {
  position: absolute;
  bottom: 4px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Unicorn: 1024×1024, 6 cols × 4 rows → frame = 170.67×256px
   Display at h=70px → w = 70 × (170.67/256) = 46.7px ≈ 47px
   bg-size = 47×6=282px × 70×4=280px  */
.sprite-unicorn {
  width: 47px;
  height: 70px;
  background-image: url('../assets/img/avatars/unicorn.png');
  background-size: 282px 280px;
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: 0;        /* row 0 = happy facing right */
  left: -60px;
  animation:
    framesUnicorn 1.15s steps(6) infinite,
    walkRight      14s linear       infinite;
}

/* Goth: 512×512, 6 cols × 4 rows → frame = 85.33×128px
   Display at h=62px → w = 62 × (85.33/128) = 41.3px ≈ 41px
   bg-size = 41×6=246px × 62×4=248px  */
.sprite-goth {
  width: 41px;
  height: 62px;
  background-image: url('../assets/img/avatars/goth.png');
  background-size: 246px 248px;
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: -62px;    /* row 1 = happy facing left */
  left: calc(100% + 60px);
  animation:
    framesGoth 1.35s steps(6) infinite,
    walkLeft   17s linear       infinite 6s;
}

/* Sleepy: 512×512, same proportions as goth */
.sprite-sleepy {
  width: 41px;
  height: 62px;
  background-image: url('../assets/img/avatars/sleepy.png');
  background-size: 246px 248px;
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: 0;        /* row 0 = happy facing right */
  left: -60px;
  animation:
    framesSleepy 1.5s steps(6) infinite,
    walkRight    20s linear      infinite 10s;
}


/* ============================================================
   ZERO CLUB
   ============================================================ */
.zero-club {
  background: var(--cream);
  padding: 88px 24px;
  text-align: center;
}
.zc-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.zc-watcher-wrap { flex: 0 0 auto; }
.zc-watcher-img {
  width: min(260px, 42vw);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(79, 74, 69, 0.16);
  transform: rotate(1deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.zc-watcher-img:hover { transform: rotate(0deg) scale(1.02); }
.zc-card {
  background: var(--card-white);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 36px;
  padding: 56px 40px;
  max-width: 440px;
  flex: 0 1 440px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.72);
  text-align: center;
}
.zc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #4CAF50, #388E3C);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 10px 24px;
  border-radius: 50px;
  margin-bottom: 24px;
  box-shadow: 0 4px 18px rgba(76, 175, 80, 0.32);
  letter-spacing: 0.01em;
}
.zc-streak {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 5.5rem;
  color: var(--green-club);
  line-height: 1;
}
.zc-streak-label {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--charcoal);
  opacity: 0.56;
  margin-bottom: 28px;
}
.zc-quote {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--charcoal);
  line-height: 1.35;
  margin-bottom: 12px;
}
.zc-sub {
  font-size: 0.97rem;
  color: var(--charcoal);
  opacity: 0.62;
  line-height: 1.55;
  font-family: var(--font-body);
}
.comeback-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 152, 0, 0.1);
  border: 1.5px solid rgba(255, 152, 0, 0.28);
  color: #BF6000;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 7px 16px;
  border-radius: 50px;
  margin-top: 24px;
}


/* ============================================================
   DOWNLOAD CTA
   ============================================================ */
.download-cta {
  background: var(--plum);
  padding: 100px 24px 110px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.download-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 110%, rgba(255, 183, 232, 0.18) 0%, transparent 65%);
  pointer-events: none;
}
.download-cta .section-title { color: #fff; }
.download-cta-unicorn {
  width: min(150px, 46vw);
  margin: 0 auto 28px;
  filter: drop-shadow(0 0 24px rgba(255, 183, 232, 0.65));
  animation: heroFloat 2.9s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.dl-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  position: relative;
  z-index: 1;
}
.dl-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #1a1a1a;
  padding: 14px 28px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.14s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}
.dl-badge:hover { transform: scale(1.05) translateY(-3px); box-shadow: 0 10px 36px rgba(0, 0, 0, 0.32); }
.dl-badge:active { transform: scale(0.96); }
.dl-badge-icon { font-size: 28px; }
.dl-badge-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.dl-badge-small { font-size: 11px; opacity: 0.55; font-family: var(--font-body); }
.dl-badge-large { font-size: 18px; font-weight: 700; font-family: var(--font-number); letter-spacing: -0.02em; }
.dl-tagline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 24px;
  position: relative;
  z-index: 1;
}


/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: rgba(0, 0, 0, 0.25);
  background-blend-mode: multiply;
  background-color: var(--plum);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px 24px;
  text-align: center;
}
.footer-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.footer-logo { height: 44px; width: auto; display: block; }
.footer-links {
  display: flex;
  gap: 28px;
}
.footer-link {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color 0.2s;
  font-family: var(--font-body);
}
.footer-link:hover { color: rgba(255, 255, 255, 0.85); }
.footer-credit {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
  font-family: var(--font-body);
}


/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes springIn {
  from { opacity: 0; transform: scale(0.84) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-11px); }
}
@keyframes ctaFloat {
  0%, 100% { transform: translateY(0px); }
  40%       { transform: translateY(-8px); }
  70%       { transform: translateY(-4px); }
}
@keyframes floatA {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(6deg); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-9px) rotate(-7deg); }
}
@keyframes rippleOut {
  to { transform: scale(4.5); opacity: 0; }
}

/* Sprite frame animations */
@keyframes framesUnicorn {
  from { background-position-x: 0;     }
  to   { background-position-x: -282px; }
}
@keyframes framesGoth {
  from { background-position-x: 0;     }
  to   { background-position-x: -246px; }
}
@keyframes framesSleepy {
  from { background-position-x: 0;     }
  to   { background-position-x: -246px; }
}

/* Sprite position walks */
@keyframes walkRight {
  from { left: -70px; }
  to   { left: calc(100% + 70px); }
}
@keyframes walkLeft {
  from { left: calc(100% + 70px); }
  to   { left: -70px; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 780px) {
  .mechanic-steps {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .friends-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .friends-text .section-title,
  .friends-text .section-sub { text-align: center; }
  .friends-text .section-sub { margin-left: auto; margin-right: auto; }
  .friends-list { align-items: center; }

  .mechanic, .tap-demo, .themes, .friends, .zero-club, .download-cta,
  .app-carousel-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .social-game .container { padding-top: 32px; padding-bottom: 48px; }
  .nav { padding: 12px 18px; }
  .hero-content { padding-bottom: 80px; }
}

@media (max-width: 480px) {
  .section-title { font-size: 1.9rem; }
  .widget-count { font-size: 4.5rem; }
  .zc-streak { font-size: 4.5rem; }
  .zc-card { padding: 40px 22px; }
  .carousel-fade-left, .carousel-fade-right { width: 50px; }
  .carousel-track { padding: 12px 60px 24px; }
}




/* ============================================================
   GOBLIN SECTION
   ============================================================ */
.goblin-section {
  background: var(--cream-dark);
  padding: 88px 24px;
}
.goblin-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
.goblin-cartoon-wrap {
  display: flex;
  justify-content: center;
  /* allow it to bleed past the container on mobile */
  margin-left: -24px;
  margin-right: -24px;
}
.goblin-cartoon-img {
  width: 100%;
  max-width: 480px;
  border-radius: 0;
  display: block;
}
.goblin-card {
  border-radius: 12px;
  box-shadow:
    0 4px 24px rgba(79, 74, 69, 0.2),
    0 1px 3px rgba(79, 74, 69, 0.12);
  transform: rotate(-1.5deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.3s;
}
.goblin-card:hover {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 0 12px 48px rgba(79, 74, 69, 0.28);
}
.goblin-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.goblin-text .section-label,
.goblin-text .section-title { text-align: left; }
.goblin-body {
  font-family: var(--font-body);
  font-size: clamp(0.97rem, 2.2vw, 1.08rem);
  color: var(--charcoal);
  opacity: 0.72;
  line-height: 1.58;
  max-width: 440px;
  margin-top: 14px;
}
.goblin-body em {
  font-style: italic;
  color: var(--plum-light);
  opacity: 1;
}
@media (max-width: 700px) {
  .goblin-section { padding: 0 24px 64px; }
  .goblin-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .goblin-cartoon-wrap {
    margin-left: -24px;
    margin-right: -24px;
  }
  .goblin-cartoon-img { max-width: 100%; border-radius: 0; }
  .goblin-card { max-width: 260px; margin: 0 auto; }
  .goblin-text .section-label,
  .goblin-text .section-title { text-align: center; }
  .goblin-body { max-width: none; text-align: center; }
  .goblin-text { padding-top: 24px; }
}


/* ============================================================
   HOW IT WORKS
   ============================================================ */
.mechanic { background: var(--cream); padding: 88px 24px; }
.steps-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-top: 52px;
  flex-wrap: wrap;
}
.flow-step {
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px 26px;
  background: var(--card-white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.flow-num {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 3.5rem;
  color: var(--plum-light);
  opacity: 0.28;
  line-height: 1;
  margin-bottom: 10px;
}
.flow-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: 6px;
}
.flow-sub {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--charcoal);
  opacity: 0.55;
  line-height: 1.4;
}
.flow-arrow {
  flex: 0 0 auto;
  font-size: 1.8rem;
  color: var(--teal-mid);
  opacity: 0.45;
  padding: 0 8px;
  align-self: center;
  margin-top: -6px;
}
.mechanic-coda {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--charcoal);
  opacity: 0.4;
  margin-top: 36px;
  text-align: center;
}
.mechanic-pup {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.mechanic-pup img {
  width: min(200px, 50vw);
  opacity: 0.88;
}
@media (max-width: 700px) {
  .flow-arrow { display: none; }
  .steps-flow { gap: 12px; }
  .flow-step { min-width: 140px; max-width: none; flex: 1 1 140px; padding: 28px 16px 22px; }
  .flow-num  { font-size: 3rem; }
}


/* ============================================================
   FRIENDS
   ============================================================ */
.friends {
  background: #ECE7DF;
  padding: 88px 24px;
  position: relative;
}
.friends-cartoon-wrap {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}
.friends-cartoon-img {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 16px 60px rgba(79, 74, 69, 0.2);
}
.friends-cartoon-caption {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--charcoal);
  opacity: 0.38;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* New illustrated visuals replacing old mini-phone screenshots */
.friends-visuals {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.friends-ui-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.friends-ui-card {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(79, 74, 69, 0.2);
  background: rgba(255,255,255,0.5);
}
.friends-ui-img {
  width: 100%;
  display: block;
  vertical-align: top;
}
.friends-ui-caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--charcoal);
  opacity: 0.75;
  text-align: center;
  padding: 10px 12px 14px;
  margin: 0;
}
@media (min-width: 620px) {
  .friends-ui-row {
    flex-direction: row;
    gap: 24px;
    max-width: 720px;
  }
  .friends-ui-card {
    flex: 1;
    min-width: 0;
  }
}
.friends-world-img-wrap,
.friends-chaos-img-wrap {
  width: 100%;
  max-width: 300px;
}
.friends-world-img,
.friends-chaos-img {
  width: 100%;
  display: block;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(79, 74, 69, 0.18);
}
/* keep legacy styles but hide them if somehow still rendered */
.friends-shots-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.friends-screenshots {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mini-phone {
  flex: 1;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mini-phone img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(79, 74, 69, 0.18);
}
.mini-phone-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--charcoal);
  opacity: 0.5;
  text-align: center;
}


/* ============================================================
   ZERO CLUB — responsive
   ============================================================ */
@media (max-width: 700px) {
  .zc-layout { flex-direction: column; gap: 28px; }
  .zc-watcher-img { width: min(210px, 60vw); }
  .zc-card { padding: 40px 22px; flex-basis: auto; max-width: 100%; }
  .zc-streak { font-size: 4.5rem; }
}


/* ============================================================
   WAITLIST
   ============================================================ */
.waitlist-section {
  background: var(--cream);
  padding: 100px 24px 110px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.waitlist-section::before {
  content: none;
}
.waitlist-section .section-title.light {
  color: var(--charcoal);
}
.waitlist-section .section-sub.light {
  color: var(--charcoal);
  opacity: 0.85;
}
.waitlist-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.waitlist-before-after {
  position: relative;
  width: min(460px, 90vw);
  margin: 0 auto 40px;
}
.waitlist-ba-img {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.38);
}
.waitlist-ba-labels {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}
.ba-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.82rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 14px;
  border-radius: 50px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.waitlist-form {
  width: 100%;
  max-width: 560px;
  margin-top: 32px;
}
.waitlist-input-row {
  position: relative;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.waitlist-email {
  flex: 1 1 220px;
  min-width: 0;
  height: 44px;
  max-height: 44px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 50px;
  border: 1.5px solid rgba(79, 74, 69, 0.25);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1;
  background: #fff;
  color: var(--charcoal);
  outline: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  box-shadow: 0 2px 12px rgba(79, 74, 69, 0.08);
  -webkit-appearance: none;
  appearance: none;
}
.waitlist-email::placeholder { color: rgba(79, 74, 69, 0.45); }
.waitlist-email:focus {
  border-color: var(--plum);
  box-shadow: 0 2px 16px rgba(74, 43, 95, 0.15);
}
.waitlist-btn {
  flex: 0 0 auto;
  padding: 14px 24px;
  border-radius: 50px;
  border: none;
  background: var(--magenta);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 20px rgba(209, 24, 141, 0.38);
}
.waitlist-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 28px rgba(209, 24, 141, 0.52); }
.waitlist-btn:active { transform: scale(0.97); }
.waitlist-note {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(79, 74, 69, 0.6);
  margin-top: 20px;
  line-height: 1.55;
}
.waitlist-success {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--charcoal);
  margin: 0 0 8px;
}
.waitlist-success-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(79, 74, 69, 0.85);
  margin: 0;
}
@media (max-width: 560px) {
  .waitlist-input-row { flex-direction: column; align-items: stretch; }
  .waitlist-email, .waitlist-btn { width: 100%; }
}


/* ============================================================
   FLOW STEPS + THEME CARDS — responsive
   ============================================================ */
@media (max-width: 700px) {
  .theme-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .theme-cards-wrap { padding: 0 16px; }
}
@media (max-width: 400px) {
  .theme-cards { gap: 10px; }
  .theme-card-name { font-size: 0.78rem; padding: 5px 12px; }
}


/* ============================================================
   HERO — desktop split layout + hero-body wrapper
   ============================================================ */
.hero-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 14px;
}
.hero-text {
  display: contents; /* transparent on mobile — children flow into hero-content column */
}
.hero-calendars-wrap {
  display: contents;
}

@media (min-width: 800px) {
  .hero-painting-content {
    max-width: 700px;
    padding: 28px 40px 40px;
  }
  .hero-painting-bottom {
    max-width: 620px;
    margin: 0 auto;
  }
  .hero {
    justify-content: center;
  }
  .hero-content {
    max-width: 1120px;
    padding: 32px 56px 72px;
    align-items: center;
  }
  .hero-logo { width: 116px; }
  .hero-body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    display: flex;
    width: 100%;
  }
  .hero-text {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
  }
  .hero-mascot-area {
    justify-content: flex-start;
    gap: 0;
  }
  .hero-bubble-container { width: min(340px, 38vw); }
  .hero-unicorn { width: min(180px, 20vw); }
  .hero-headline {
    font-size: clamp(3.4rem, 5.5vw, 5.4rem);
    line-height: 1.05;
  }
  .hero-tagline { text-align: left; font-size: clamp(1.1rem, 2vw, 1.4rem); }
  .hero-calendars-wrap {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
  }
  .hero-calendars {
    width: min(400px, 38vw);
    animation: springIn 0.55s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}


/* ============================================================
   AVATAR PARADE — sprite strip between hero and goblin
   ============================================================ */
.avatar-parade {
  height: 69px;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}

/* Social — full-bleed friends screen grab + title overlay (like hero), then copy below */
.social-game {
  padding: 0;
  background: var(--cream);
  text-align: center;
}
.social-fullbleed-wrap {
  position: relative;
  width: 100%;
}
.social-fullbleed-img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  min-height: 50vh;
  max-height: 65vh;
}
.social-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 24px 20px 32px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 35%,
    rgba(10, 5, 20, 0.4) 65%,
    rgba(10, 5, 20, 0.82) 100%
  );
}
.social-overlay-heading {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.85rem, 5.5vw, 3rem);
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  margin: 0;
  text-align: center;
  line-height: 1.15;
  text-wrap: balance;
}
.social-game .container {
  padding: 0 24px 56px;
}
.social-copy-intro {
  max-width: 520px;
  margin: 0 auto 1.25rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--charcoal);
  opacity: 0.9;
  text-wrap: pretty;
}
.social-game .friends-list {
  margin-bottom: 0;
  justify-content: center;
  flex-wrap: wrap;
}
/* Single game-world image: tight crop so characters on grass show, no black border */
.social-game-world-wrap {
  margin: 2.5rem auto 0.5rem;
  max-width: 720px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: var(--shadow-hover);
  background: #0a0a0a;
}
.social-game-world-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.social-game .friends-list {
  margin-top: 0;
}


/* ============================================================
   MECHANIC — background image (friends-couch)
   ============================================================ */
.mechanic {
  position: relative;
  padding: 0 0 80px;
  background: var(--cream);
}
/* Full-bleed friends-couch with step bubbles overlaid */
.mechanic {
  padding: 0;
  overflow: hidden;
  background: #1a1118; /* dark fallback while image loads */
}
.mechanic-fullbleed {
  position: relative;
  width: 100%;
}
.mechanic-bg-photo {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center 20%;
  min-height: 75vw;
  max-height: 90vw;
}
.mechanic-bubble-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px 32px;
  background: linear-gradient(
    to bottom,
    rgba(10, 5, 20, 0) 0%,
    rgba(10, 5, 20, 0) 45%,
    rgba(10, 5, 20, 0.55) 70%,
    rgba(10, 5, 20, 0.82) 100%
  );
}
.mechanic-label {
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.mechanic-heading {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 3rem);
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
  margin: 0 0 20px;
  text-align: center;
  line-height: 1.1;
}
.step-bubbles {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 680px;
}
.step-bubble {
  flex: 1;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 18px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.step-num {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--sunshine);
  line-height: 1;
}
.step-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
  margin: 0;
}
@media (max-width: 480px) {
  .mechanic-bg-photo { min-height: 130vw; max-height: 160vw; object-position: 60% 10%; }
  .step-bubbles { gap: 6px; }
  .step-bubble { padding: 12px 10px; border-radius: 14px; }
  .step-num { font-size: 1.5rem; }
  .step-text { font-size: 1rem; }
}
@media (min-width: 700px) {
  .mechanic-bg-photo { min-height: 50vw; max-height: 60vw; }
  .mechanic-bubble-layer { padding: 0 40px 48px; }
  .step-bubbles { gap: 16px; max-width: 760px; }
  .step-bubble { padding: 20px 18px; }
  .step-num { font-size: 2rem; }
  .step-text { font-size: 1.15rem; }
}


/* ============================================================
   PAINTERLY FULL-BLEED + OVERLAY (Relatable, Friends, Zero Club)
   ============================================================ */
.goblin-section.goblin-fullbleed {
  padding: 0;
  background: transparent;
}
.goblin-fullbleed-wrap {
  position: relative;
  width: 100%;
}
.goblin-fullbleed-img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center 40%;
  min-height: 55vw;
  max-height: 70vw;
}
.goblin-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px 28px;
  background: linear-gradient(to bottom, transparent 0%, transparent 45%, rgba(10,5,20,0.5) 75%, rgba(10,5,20,0.85) 100%);
}
.goblin-overlay-label {
  color: rgba(255,255,255,0.75);
  margin: 0 0 4px;
}
.goblin-overlay-heading {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  margin: 0;
  text-align: center;
  line-height: 1.1;
  text-wrap: balance;
}
.goblin-body-wrap {
  padding: 40px 24px 56px;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.goblin-body-wrap .goblin-body {
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
}

.friends-fullbleed { padding: 0; background: #ECE7DF; }
.friends-fullbleed-wrap {
  position: relative;
  width: 100%;
}
.friends-fullbleed-img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center 35%;
  min-height: 50vw;
  max-height: 65vw;
}
.friends-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px 28px;
  background: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(10,5,20,0.45) 70%, rgba(10,5,20,0.82) 100%);
}
.friends-overlay-label {
  color: rgba(255,255,255,0.8);
  margin: 0 0 4px;
}
.friends-overlay-heading {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  margin: 0;
  text-align: center;
  line-height: 1.1;
  text-wrap: balance;
}
.friends-fullbleed .container { padding-top: 40px; padding-bottom: 56px; }

.zero-club.zc-fullbleed { padding: 0; background: var(--cream); }
.zc-fullbleed-wrap {
  position: relative;
  width: 100%;
}
.zc-fullbleed-img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center 30%;
  min-height: 55vw;
  max-height: 72vw;
}
/* Focus on right half (girl with sundae) when image has two figures */
.zc-fullbleed-img.zc-focus-right {
  object-position: right center;
}
.zc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px 28px;
  background: linear-gradient(to bottom, transparent 0%, transparent 45%, rgba(10,5,20,0.5) 75%, rgba(10,5,20,0.85) 100%);
}
.zc-overlay-label {
  color: rgba(255,255,255,0.75);
  margin: 0 0 4px;
}
.zc-overlay-heading {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  margin: 0;
  text-align: center;
  line-height: 1.1;
  text-wrap: balance;
}
.zc-fullbleed .container { padding-top: 32px; padding-bottom: 56px; }


/* ============================================================
   TAP TRACK — directly under Cut back (cream bg, distinct from plum)
   ============================================================ */
.tap-track {
  background: var(--cream);
  padding: 80px 24px;
}
.tap-track-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 860px;
  margin: 0 auto;
}
.tap-track-text {
  text-align: center;
}
.tap-track-text .section-label { color: var(--teal-mid); }
.tap-track-text .section-title {
  color: var(--charcoal);
  text-align: center;
}
.how-it-works-steps {
  margin: 0 0 16px;
}
.how-it-works-steps-inner {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.how-it-works-numbers {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 24px;
  padding: 2px 0; /* so first/last circles aren’t flush to edges */
}
.how-it-works-numbers .step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--plum);
  color: #fff;
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 24px;
  text-align: center;
  flex-shrink: 0;
}
.how-it-works-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}
.how-it-works-text .step-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.5vw, 1.12rem);
  color: var(--charcoal);
  line-height: 1.5;
}
.how-it-works-text .step-text strong { color: var(--plum); }
.tap-track-body {
  font-family: var(--font-body);
  font-size: clamp(0.97rem, 2.5vw, 1.1rem);
  color: var(--charcoal);
  opacity: 0.85;
  line-height: 1.6;
  max-width: 400px;
  margin: 8px auto 0;
}
.tap-track-screen {
  display: flex;
  justify-content: center;
}
.tap-screen-img {
  width: min(260px, 72vw);
  border-radius: 47px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.tap-track-widget-wrap {
  text-align: center;
  margin-top: 24px;
}
.tap-track-widget-img {
  width: min(560px, 90vw);
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: block;
  margin: 0 auto;
}
.tap-track-widget-caption {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--charcoal);
  opacity: 0.75;
  margin-top: 10px;
  margin-bottom: 0;
}
@media (min-width: 700px) {
  .tap-track-split {
    flex-direction: row;
    align-items: center;
    gap: 64px;
    flex-wrap: wrap;
  }
  .tap-track-text {
    flex: 1;
    text-align: left;
    min-width: 280px;
  }
  .tap-track-text .section-title { text-align: left; }
  .tap-track-body { margin: 8px 0 0; }
  .tap-track-screen { flex: 0 0 auto; }
  .tap-screen-img { width: min(300px, 35vw); }
  .tap-track-widget-wrap {
    flex: 0 0 100%;
    margin-top: 20px;
  }
  .tap-track-widget-img { width: min(420px, 50vw); }
}


/* ============================================================
   THEMES — cycling single-card stage
   ============================================================ */
.theme-stage {
  max-width: 380px;
  margin: 44px auto 28px;
  border-radius: 40px;
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 32px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
  transition: background 0.6s ease;
  cursor: pointer;
}
.theme-stage-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 28px;
}
.theme-stage-character {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  width: 72%;
  max-width: 230px;
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.22));
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.theme-stage-character.fading {
  opacity: 0;
  transform: translate(-50%, -60%) scale(0.92);
}
.theme-stage-name {
  position: relative;
  z-index: 2;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 9px 22px;
  border-radius: 50px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.theme-dots {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}
.theme-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
}
.theme-dot.active {
  background: #fff;
  transform: scale(1.3);
}
.themes-note {
  text-align: center;
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--charcoal);
  opacity: 0.45;
  font-family: var(--font-body);
}


/* ============================================================
   ZERO CLUB — before-after image
   ============================================================ */
.zc-ba-wrap {
  flex: 0 0 auto;
  position: relative;
  width: min(520px, 92vw);
}
.zc-ba-img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 16px 60px rgba(79, 74, 69, 0.25);
}
.zc-ba-labels {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}


/* ============================================================
   WAITLIST — cartoon image
   ============================================================ */
.waitlist-cartoon {
  width: min(300px, 72vw);
  margin-bottom: 28px;
  border-radius: 20px;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.28);
}


/* ============================================================
   RESPONSIVE — misc fixes
   ============================================================ */
@media (max-width: 700px) {
  .mechanic { padding: 0; }
  .zc-layout { flex-direction: column; gap: 24px; }
  .zc-ba-wrap { width: min(400px, 94vw); }
}