/* ============================================================
   PiccoLumi - Muse-Style Precision Landing Page
   Palette: Warm Honey Lumi + Periwinkle Accent System
   Typography: SF Pro / Inter Clean Humanist Hierarchy
   ============================================================ */

:root {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F0F2F7;
  --fill-elevated: #ECEEF4;
  --fill-secondary: #E5E8F0;
  --fill-blur: rgba(255, 255, 255, 0.78);
  --fill-blur-thick: rgba(255, 255, 255, 0.88);

  --text-primary: #0F121A;
  --text-secondary: #636A79;
  --text-tertiary: #9CA3AF;
  --text-white: #FFFFFF;

  --border-subtle: rgba(15, 18, 26, 0.08);
  --border-focus: rgba(107, 115, 232, 0.5);

  --accent-periwinkle: #6B73E8;
  --accent-periwinkle-hover: #5B63D3;
  --accent-periwinkle-active: #4F56C2;
  --accent-periwinkle-light: rgba(107, 115, 232, 0.10);
  --accent-periwinkle-glow: rgba(107, 115, 232, 0.25);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --radius-pill: 9999px;
  --radius-squircle: 22px;
  --radius-card: 28px;

  --header-height: 56px;

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.21, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #090A0F;
    --bg-secondary: #12131C;
    --fill-elevated: #181A25;
    --fill-secondary: #202332;
    --fill-blur: rgba(9, 10, 15, 0.75);
    --fill-blur-thick: rgba(18, 19, 28, 0.85);

    --text-primary: #F3F4F8;
    --text-secondary: #949BAE;
    --text-tertiary: #5E6575;

    --border-subtle: rgba(255, 255, 255, 0.08);

    --accent-periwinkle: #868DFF;
    --accent-periwinkle-hover: #989EFF;
    --accent-periwinkle-active: #7279F2;
    --accent-periwinkle-light: rgba(134, 141, 255, 0.15);
    --accent-periwinkle-glow: rgba(134, 141, 255, 0.30);
  }
}

html.dark {
  --bg-primary: #090A0F;
  --bg-secondary: #12131C;
  --fill-elevated: #181A25;
  --fill-secondary: #202332;
  --fill-blur: rgba(9, 10, 15, 0.75);
  --fill-blur-thick: rgba(18, 19, 28, 0.85);

  --text-primary: #F3F4F8;
  --text-secondary: #949BAE;
  --text-tertiary: #5E6575;

  --border-subtle: rgba(255, 255, 255, 0.08);

  --accent-periwinkle: #868DFF;
  --accent-periwinkle-hover: #989EFF;
  --accent-periwinkle-active: #7279F2;
  --accent-periwinkle-light: rgba(134, 141, 255, 0.15);
  --accent-periwinkle-glow: rgba(134, 141, 255, 0.30);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

/* ============================================================
   AMBIENT MESH
   ============================================================ */
.ambient-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-glow-periwinkle {
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-periwinkle-light) 0%, rgba(107, 115, 232, 0) 70%);
  opacity: 0.8;
  filter: blur(60px);
}

.ambient-glow-warm {
  position: absolute;
  top: 15%;
  left: 48%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(234, 168, 70, 0.08) 0%, rgba(234, 168, 70, 0) 70%);
  filter: blur(50px);
}

/* ============================================================
   iOS SMART APP BANNER (Mobile 1:1 with Muse.ai)
   ============================================================ */
.smart-app-banner {
  position: relative;
  z-index: 60;
  width: 100%;
  height: 58px;
  background: rgba(244, 246, 248, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
}

html.dark .smart-app-banner {
  background: rgba(26, 28, 36, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.smart-app-banner.dismissed {
  display: none !important;
}

@media (min-width: 769px) {
  .smart-app-banner {
    display: none !important;
  }
}

.banner-close-btn {
  background: none;
  border: none;
  padding: 6px;
  margin-right: 6px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.banner-close-btn svg {
  width: 13px;
  height: 13px;
}

.banner-app-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  margin-right: 10px;
}

.banner-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-app-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.banner-app-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

.banner-app-subtitle {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-tertiary);
  line-height: 1.25;
}

.banner-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--accent-periwinkle);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.banner-download-btn:active {
  transform: scale(0.96);
  opacity: 0.9;
}

/* ============================================================
   STICKY GLASS HEADER (Muse.ai 1:1 Architecture)
   ============================================================ */
.landing-header {
  position: fixed;
  top: 58px;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: top 0.25s var(--ease-spring), background 0.3s var(--ease-spring);
}

@media (min-width: 769px) {
  .landing-header {
    top: 0 !important;
  }
}

.landing-header.scrolled {
  top: 0 !important;
}

body.banner-dismissed .landing-header {
  top: 0 !important;
}

.landing-header-bg {
  position: absolute;
  inset: 0;
  background: var(--fill-blur);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-spring);
}

.landing-header.scrolled .landing-header-bg {
  opacity: 1;
}

.landing-header-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

@media (min-width: 768px) {
  .landing-header-inner {
    padding: 0 36px;
  }
}

.header-wordmark {
  justify-self: start;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 1;
}

.header-wordmark .header-brand-name {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.brand-logo-glyph-nav {
  display: none !important;
}

.header-center-logo {
  justify-self: center;
  display: flex;
  align-items: center;
}

.header-lumi-chip {
  width: 41px;
  height: 41px;
  border-radius: 12px;
  overflow: hidden;
  background: #99A2FB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}

.landing-header.scrolled-logo .header-lumi-chip {
  opacity: 1;
  pointer-events: auto;
}

.header-lumi-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header-logo-img {
  height: 32px;
  width: 32px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s var(--ease-spring), transform 0.25s var(--ease-spring);
  pointer-events: none;
}

.landing-header.scrolled .header-logo-img {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-header-download {
  height: 36px;
  padding: 0 15px 0 12px;
  border-radius: var(--radius-pill);
  background: var(--fill-elevated);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-header-download:hover {
  background: var(--fill-secondary);
  filter: brightness(0.98);
}

.btn-header-download svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ============================================================
   LANGUAGE PICKER
   ============================================================ */
.lang-switch {
  display: inline-flex;
  align-items: center;
}

.lang-picker-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 26px 0 32px;
  background: var(--fill-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.lang-picker-pill:hover,
.lang-picker-pill:focus-within {
  background: var(--fill-secondary);
  border-color: var(--border-hover, rgba(35, 39, 51, 0.25));
}

.lang-globe-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  stroke: var(--text-secondary);
  pointer-events: none;
  transition: stroke 0.15s ease;
}

.lang-picker-pill:hover .lang-globe-icon,
.lang-picker-pill:focus-within .lang-globe-icon {
  stroke: var(--text-primary);
}

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-primary);
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 100%;
}

/* Custom chevron on the right */
.lang-picker-pill::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.15s ease;
}

.lang-picker-pill option {
  background: #ffffff;
  color: #1c1c1e;
  font-size: 14px;
}

.dark .lang-picker-pill option {
  background: #1c1c1e;
  color: #f2f2f7;
}

@media (max-width: 768px) {
  .lang-picker-pill {
    height: 32px;
    padding: 0 22px 0 28px;
    font-size: 12px;
  }
  .lang-globe-icon {
    left: 8px;
    width: 13px;
    height: 13px;
  }
  .lang-select {
    font-size: 12px;
  }
  .lang-picker-pill::after {
    right: 7px;
  }
}

.footer-lang-switch {
  margin-top: 14px;
  display: inline-flex;
}

/* ============================================================
   RTL SUPPORT (Arabic)
   ============================================================ */
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .landing-header-inner {
  direction: rtl;
}

html[dir="rtl"] .header-wordmark {
  justify-self: start;
}

html[dir="rtl"] .header-actions {
  justify-self: end;
}

html[dir="rtl"] .lang-picker-pill {
  padding: 0 32px 0 26px;
}

html[dir="rtl"] .lang-globe-icon {
  left: auto;
  right: 10px;
}

html[dir="rtl"] .lang-picker-pill::after {
  right: auto;
  left: 10px;
}

@media (max-width: 768px) {
  html[dir="rtl"] .lang-picker-pill {
    padding: 0 28px 0 22px;
  }
  html[dir="rtl"] .lang-globe-icon {
    right: 8px;
  }
  html[dir="rtl"] .lang-picker-pill::after {
    left: 7px;
  }
}

html[dir="rtl"] .video-section-heading,
html[dir="rtl"] .video-section-sub,
html[dir="rtl"] .muse-section-eyebrow,
html[dir="rtl"] .muse-section-heading,
html[dir="rtl"] .muse-section-sub,
html[dir="rtl"] .download-hub-heading,
html[dir="rtl"] .download-hub-sub {
  text-align: right;
}

html[dir="rtl"] .landing-footer-bottom {
  direction: rtl;
}

/* ============================================================
   HERO SECTION (PAGE 1) - Muse.ai 1:1 Architecture
   ============================================================ */
.hero-stage {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 20px 110px;
  text-align: center;
  box-sizing: border-box;
  overflow-x: clip;
}

@media (max-width: 768px) {
  .hero-stage {
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
    justify-content: center;
    align-items: center;
    padding: 20px 14px 72px;
    box-sizing: border-box;
    overflow-x: clip;
  }
}

.hero-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: clip;
}

/* Top Center Interactive Lumi Video Mascot (Muse.ai 1:1) */
.hero-mascot-container {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  overflow: hidden;
  background: #FDFAF6;
  box-shadow: 0 4px 18px rgba(107, 115, 232, 0.22), 0 1px 3px rgba(0, 0, 0, 0.06);
  margin: 0 auto 36px;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  flex-shrink: 0;
}

.hero-mascot-container:hover,
.hero-mascot-container:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 8px 28px rgba(107, 115, 232, 0.38), 0 3px 8px rgba(0, 0, 0, 0.14);
}

.hero-mascot-container:active {
  transform: scale(0.96);
}

.mascot-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.mascot-idle-video {
  opacity: 1 !important;
  z-index: 1;
}

.mascot-hover-video {
  opacity: 0;
  z-index: 2;
  transition: opacity 0.4s ease;
  will-change: opacity;
}

.hero-mascot-container.is-hovered .mascot-hover-video {
  opacity: 1;
}

@media (min-width: 769px) {
  .hero-mascot-container {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    margin: 0 auto 38px;
  }
}

/* Rebus Headline: Muse.ai 1:1 Display Typography */
.hero-headline {
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.032em;
  color: var(--text-primary);
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.16em;
}

.headline-row {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 0.28em;
}

.headline-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.headline-block.block-4 {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
}

.headline-tail {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .hero-stage {
    padding: 24px 14px 48px !important;
  }
  .hero-mascot-container {
    width: 120px !important;
    height: 120px !important;
    border-radius: 36px !important;
    margin: 4px auto 22px !important;
    box-shadow: 0 14px 40px rgba(107, 115, 232, 0.35), 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  }
  .hero-headline {
    font-size: clamp(30px, 8.2vw, 38px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.036em !important;
    font-weight: 600 !important;
    gap: 0.12em !important;
    padding: 0 8px !important;
    text-align: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .headline-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 0.12em !important;
    white-space: normal !important;
  }
  .headline-block {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .headline-block.block-2 {
    letter-spacing: -0.046em !important;
    white-space: nowrap !important;
    font-size: 0.94em !important;
  }
  .headline-block.block-4 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.08em !important;
    width: 100% !important;
  }
  .headline-tail {
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .rebus-slot {
    margin: 0.04em 0 !important;
    max-width: 96vw !important;
  }
}

@media (max-width: 380px) {
  .hero-stage {
    padding: 18px 8px 36px !important;
  }
  .hero-mascot-container {
    width: 102px !important;
    height: 102px !important;
    border-radius: 30px !important;
    margin: 6px auto 16px !important;
  }
  .hero-headline {
    font-size: clamp(25px, 7.5vw, 30px) !important;
    padding: 0 4px !important;
  }
  .headline-block.block-2 {
    font-size: 0.90em !important;
    letter-spacing: -0.05em !important;
  }
}

/* Desktop layout (>= 769px): Consolidate to Muse's 2-line desktop layout */
@media (min-width: 769px) {
  .hero-headline {
    flex-direction: column !important;
    gap: 0.18em !important;
    font-size: clamp(2.3rem, 3.8vw, 3.4rem) !important;
    line-height: 1.22 !important;
    max-width: 1240px !important;
  }
  .headline-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    width: 100% !important;
    gap: 0.28em !important;
  }
  .headline-block {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    white-space: nowrap !important;
  }
  .headline-block.block-4 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.28em !important;
  }
  .headline-tail {
    display: inline-block !important;
    white-space: nowrap !important;
  }
}

/* 1) Clean Avatar Circle - 6 Lumi States */
.rebus-avatar-slot {
  display: inline-flex;
  position: relative;
  width: 1.14em;
  height: 1.14em;
  vertical-align: -0.18em;
  margin: 0 0.10em 0 0.16em;
  border-radius: 50%;
  overflow: hidden;
  background: #FDFAF6;
  cursor: pointer;
  transform: translateZ(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.rebus-avatar-slot:active {
  transform: scale(0.94);
}

.avatar-state-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  user-select: none;
}

.avatar-state-current {
  opacity: 1;
  z-index: 2;
  transform: scale(1);
}

.avatar-state-next {
  opacity: 0;
  z-index: 1;
  transform: scale(0.96);
}

/* 2) Spring Dynamic Slot - Tight Hugging & Spring Interpolation */
.rebus-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 1.25em;
  vertical-align: middle;
  margin: 0 0.10em;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  transition: width 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

.rebus-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.16em;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max-content;
  white-space: nowrap;
  transform: translate(-50%, 65%);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.rebus-frame.active {
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: auto;
}

.rebus-frame.exit-up {
  transform: translate(-50%, -165%);
  opacity: 0;
}

.rebus-word {
  color: var(--accent-periwinkle);
  font-weight: 500;
  letter-spacing: -0.025em;
}

/* 3D App Chips */
.rebus-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.14em;
}

.rebus-icon-chip {
  display: inline-block;
  width: 1.08em;
  height: 1.08em;
  vertical-align: middle;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   HERO CARD: GET THE APP (Mobile-First)
   ============================================================ */
.hero-auth-card {
  margin-top: 28px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: heroCardFadeIn 0.8s var(--ease-spring) backwards 0.2s;
}

@keyframes heroCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-header-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* Official Apple App Store Download Button */
.btn-appstore-download {
  width: 100%;
  height: 50px;
  border-radius: var(--radius-pill);
  background: #000000;
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.15s ease;
  user-select: none;
}

.btn-appstore-download:hover {
  filter: brightness(1.2);
}

.btn-appstore-download:active {
  transform: scale(0.985);
}

.btn-appstore-download svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  margin: 0;
  flex-shrink: 0;
}

/* Divider */
.auth-divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 400;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* Omni Form for Phone Link */
.auth-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.auth-input-wrap {
  width: 100%;
  position: relative;
}

.auth-input {
  width: 100%;
  height: 50px;
  border-radius: 20px;
  padding: 0 18px;
  background: var(--fill-elevated);
  border: 1.5px solid transparent;
  font-size: 14.5px;
  color: var(--text-primary);
  font-family: inherit;
  transition: all 0.2s ease;
}

.auth-input::placeholder {
  color: var(--text-tertiary);
}

.auth-input:focus {
  outline: none;
  border-color: var(--accent-periwinkle);
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px var(--accent-periwinkle-glow);
}

/* Submit Button */
.btn-auth-submit {
  width: 100%;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--accent-periwinkle);
  color: var(--text-white);
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.btn-auth-submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-auth-submit:not(:disabled):hover {
  background: var(--accent-periwinkle-hover);
  box-shadow: 0 4px 16px var(--accent-periwinkle-glow);
}

.btn-auth-submit:not(:disabled):active {
  background: var(--accent-periwinkle-active);
  transform: scale(0.99);
}

/* Desktop QR Code trigger button */
.auth-qr-toggle {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.auth-qr-toggle:hover {
  color: var(--accent-periwinkle);
}

.auth-qr-toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* On Mobile, hide hero auth card (clean Muse.ai hero) - kept on desktop */
@media (max-width: 768px) {
  .header-actions.desktop-only,
  .btn-header-download.desktop-only,
  .desktop-only {
    display: none !important;
  }
  .hero-stage .hero-auth-card {
    display: none !important;
  }
}

/* ============================================================
   DEDICATED DOWNLOAD HUB SECTION (Mobile & Anchor Target)
   ============================================================ */
.landing-download-section {
  position: relative;
  width: 100%;
  background: var(--fill-primary);
  border-top: 1px solid var(--border-subtle);
  padding: 80px 20px 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .landing-download-section {
    display: none !important; /* On desktop, download hub is already in the hero */
  }
}

.download-section-inner {
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download-section-title {
  font-size: clamp(1.8rem, 5vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.download-section-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.standalone-auth-card {
  margin-top: 0 !important;
  width: 100%;
}

/* ============================================================
   FLOATING "LEARN MORE" PILL (Bottom)
   ============================================================ */
.landing-learn-more {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  height: 42px;
  padding: 0 18px 0 16px;
  border-radius: var(--radius-pill);
  background: var(--fill-blur-thick);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity 0.25s var(--ease-spring), transform 0.25s var(--ease-spring);
  user-select: none;
}

.landing-learn-more:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.landing-learn-more.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  pointer-events: none;
}

.landing-learn-more svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.landing-learn-more:hover svg {
  transform: translateY(2px);
}

/* ============================================================
   PAGE 2: SIZZLE / VIDEO SECTION (Muse.ai Squircle-24 Architecture)
   ============================================================ */
.landing-video-theme-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--fill-secondary);
  border-top: 1px solid var(--border-subtle);
  padding: 90px 20px 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
}

@media (min-width: 768px) {
  .landing-video-theme-section {
    padding: 110px 36px 130px;
  }
}

@media (max-width: 767px) {
  .landing-video-theme-section {
    padding: 56px 16px 64px;
  }
  .video-section-header {
    margin: 0 auto 24px;
    padding: 0 10px;
  }
  .video-section-heading {
    font-size: clamp(33px, 8.8vw, 44px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
  }
  .video-section-sub {
    font-size: clamp(17px, 4.5vw, 20px) !important;
    line-height: 1.48 !important;
    max-width: min(92vw, 420px) !important;
    margin: 0 auto !important;
  }
}

.video-section-header {
  max-width: 840px;
  width: 100%;
  text-align: center;
  margin: 0 auto 40px;
  padding: 0 16px;
}

.video-section-heading {
  font-size: clamp(2.2rem, 4.4vw, 3.65rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  line-height: 1.18;
  margin-bottom: 16px;
  text-wrap: balance;
}

.video-section-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.32rem);
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto;
  text-wrap: pretty;
}

.landing-video-stage {
  width: 100%;
  max-width: min(116.6vh, 1260px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  transform: scale(0.91);
  opacity: 0.5;
  transform-origin: center center;
  will-change: transform, opacity;
}

.video-squircle-frame {
  position: relative;
  width: 100%;
  border-radius: 36px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #ffffff;
  box-shadow: 0 28px 80px -16px rgba(0, 0, 0, 0.22), 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-subtle);
  transform: translateZ(0);
  will-change: border-radius, transform;
}

@media (min-width: 768px) {
  .video-squircle-frame {
    aspect-ratio: 16 / 9;
  }
}

.landing-promo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
  transform-origin: center center;
  will-change: transform;
}

/* ============================================================
   DECORATIVE FLOATING VOLUME TOGGLE (Top Right of Video Box)
   ============================================================ */
.video-volume-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 28;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 18, 26, 0.68);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35);
  user-select: none;
}
.video-volume-toggle:hover {
  background: rgba(15, 18, 26, 0.88);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.04);
}
.video-volume-toggle:active {
  transform: scale(0.96);
}
.video-volume-toggle.is-unmuted {
  background: rgba(107, 115, 232, 0.88);
  border-color: rgba(255, 255, 255, 0.45);
}
.video-volume-toggle .vol-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .video-volume-toggle {
    top: 14px;
    right: 14px;
    padding: 6px 12px;
    font-size: 12px;
    gap: 6px;
  }
  .video-volume-toggle .vol-icon {
    width: 14px;
    height: 14px;
  }
}

/* ============================================================
   MUSE.AI FLOATING VIDEO PLAYER CONTROL BAR
   ============================================================ */
.landing-video-player {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 25;
  width: calc(100% - 48px);
  max-width: 820px;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: rgba(30, 36, 46, 0.76);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 40px -6px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  user-select: none;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-video-player.player-idle {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}

.video-squircle-frame:hover .landing-video-player,
.landing-video-player:hover,
.landing-video-player:focus-within {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.player-btn {
  background: transparent;
  border: none;
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.88;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  border-radius: 50%;
}

.player-btn:hover {
  opacity: 1;
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.1);
}

.player-btn:active {
  transform: scale(0.95);
}

.player-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Scrubber Timeline Container: Fills remaining player bar space */
.player-timeline-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.player-time {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.88);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Scrubber Timeline & Capsule Thumb */
.player-scrubber {
  position: relative;
  flex: 1;
  min-width: 60px;
  height: 28px;
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.player-track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.24);
  transition: height 0.15s ease;
}

.player-scrubber:hover .player-track {
  height: 5px;
}

.player-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 2px;
  background: #FFFFFF;
  pointer-events: none;
}

/* The Horizontal Capsule Thumb from Muse.ai */
.player-pill-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 10px;
  border-radius: 5px;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: transform 0.08s ease, width 0.15s ease, height 0.15s ease;
}

.player-scrubber:hover .player-pill-thumb {
  width: 26px;
  height: 12px;
  border-radius: 6px;
}

/* Playback Speed Menu & Floating Popover */
.player-speed-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.player-speed-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0 6px;
  width: auto;
  min-width: 32px;
  height: 28px;
  border-radius: 8px;
}

.player-speed-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(26, 32, 44, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  gap: 3px;
  z-index: 50;
  min-width: 72px;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.player-speed-popover.open {
  display: flex !important;
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

.speed-option {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.82);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease, color 0.12s ease;
}

.speed-option:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.speed-option.active {
  background: rgba(107, 115, 232, 0.45);
  color: #FFFFFF;
  font-weight: 700;
}

/* Mobile Responsiveness */
@media (max-width: 680px) {
  .landing-video-player {
    bottom: 12px;
    height: 42px;
    padding: 0 10px;
    gap: 6px;
    width: calc(100% - 20px);
  }
  .player-timeline-wrap {
    gap: 6px;
  }
  .player-btn {
    width: 26px;
    height: 26px;
  }
  .player-btn svg {
    width: 16px;
    height: 16px;
  }
  .player-time {
    font-size: 11px;
  }
  .player-pill-thumb {
    width: 16px;
    height: 8px;
  }
  .player-speed-btn {
    font-size: 11px;
    min-width: 26px;
    height: 24px;
    padding: 0 4px;
  }
}

/* ============================================================
   POPOVER MODAL (QR & App Store Download)
   ============================================================ */
.download-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-spring);
}

.download-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.download-modal-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.25s var(--ease-spring);
}

.download-modal-backdrop.open .download-modal-card {
  transform: scale(1);
}

.download-modal-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(107, 115, 232, 0.2);
  margin-bottom: 14px;
}

.download-modal-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.download-modal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 16px;
}

.qr-code-frame {
  width: 160px;
  height: 160px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-subtle);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code-frame svg {
  width: 100%;
  height: 100%;
}

.download-modal-btn {
  width: 100%;
  height: 46px;
  border-radius: var(--radius-pill);
  background: var(--accent-periwinkle);
  color: var(--text-white);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease;
}

.download-modal-btn:hover {
  background: var(--accent-periwinkle-hover);
}

.download-modal-close {
  margin-top: 12px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px 12px;
}

.download-modal-close:hover {
  color: var(--text-primary);
}

/* ============================================================
   PAGE 3: FEATURE 1 — DEVELOPMENTAL PLAY (Muse.ai 1:1 Parity)
   ============================================================ */
.landing-feature-row {
  position: relative;
  width: 100%;
  padding: 96px 48px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
  overflow: hidden;
  z-index: 1;
}

/* Alternating Page Background Sequence (Muse.ai 1:1 Parity) */
.landing-feature-row.landing-feature-alt,
.landing-feature-alt {
  background: var(--bg-secondary) !important;
}

.landing-feature-row.landing-feature-showcase,
#page-8 {
  background: var(--bg-secondary) !important;
}

.landing-video-theme-section,
#page-2 {
  background: var(--bg-secondary) !important;
}

.feature-row-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

/* Text Column (Right on desktop order-2, Top on mobile order-1) */
.feature-text-col {
  order: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.feature-hero-title {
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #E0915A;
  margin: 0 0 16px 0;
  font-family: var(--font-sans);
}

.feature-headline {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  text-wrap: balance;
}

.feature-description {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 14px;
  margin-bottom: 0;
  max-width: 576px;
  text-pretty: true;
}

/* Visual Column (Left on desktop order-1, Bottom on mobile order-2) */
.feature-visual-col {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}

.feature-stage-canvas {
  position: relative;
  width: 100%;
  max-width: 600px;
  min-height: 880px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------
   Activities Demo Phone Mockup (v2 Pacing)
   Tokens lifted from DesignSystem.swift and ActivityTheme.swift
   --------------------------------------------------------------- */
#activityPhone {
  --cream:#FDFAF6;
  --cream-deep:#FBF6EC;
  --surface:#FFFCF6;
  --border:#E8E2D6;
  --text:#2C241C;
  --text2:#6B5D4F;
  --muted:#A89B8C;
  --gold:#D4A574;
  --gold-deep:#A77D4C;
  --gold-label:#854F0B;
  --peri:#7C8AD8;
  --peri-deep:#56629F;
  --hand:#FFF6E4;
  --lumi-top:#CB9D4F;
  --lumi-bot:#B08038;
  --success:#5C9070;
  --flash:#FFF4D6;
  --toast-bg:rgba(44,36,28,.92);
  --toast-fg:#F5E6D0;
  --sans:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --disp:"Comfortaa",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --write:"Caveat","Comfortaa",cursive;
}

#activityPhone * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- phone frame ---------------- */
#activityPhone.phone {
  position: relative;
  width: 401px;
  height: 860px;
  border-radius: 56px;
  background: #000;
  padding: 4px;
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  font-family: var(--sans);
  color: #8a8074;
  user-select: none;
}

#activityPhone.phone:hover {
  transform: scale(1.025);
  box-shadow: 0 50px 110px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1);
}

#activityPhone .screen {
  position: relative;
  width: 393px;
  height: 852px;
  border-radius: 52px;
  overflow: hidden;
  background: var(--cream);
  isolation: isolate;
}

#activityPhone .notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 124px;
  height: 34px;
  border-radius: 20px;
  background: #000;
  z-index: 60;
}

#activityPhone .statusbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  pointer-events: none;
}

#activityPhone .sb-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
#activityPhone .sb-right svg {
  display: block;
}

/* ---------------- page stack ---------------- */
#activityPhone .page {
  position: absolute;
  inset: 0;
  padding-top: 54px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  will-change: transform;
}
#activityPhone .page-play {
  transform: translateX(100%);
}
#activityPhone .is-open .page-deck {
  transform: translateX(-26%);
}
#activityPhone .is-open .page-deck::after {
  opacity: 1;
}
#activityPhone .is-open .page-play {
  transform: translateX(0);
}
#activityPhone .page-deck::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30,26,21,.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s cubic-bezier(.32,.72,0,1);
}
#activityPhone .animate .page {
  transition: transform .42s cubic-bezier(.32,.72,0,1);
}

/* ---------------- header ---------------- */
#activityPhone .hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px 6px;
}
#activityPhone .hdr-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.66);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--text2);
  flex: none;
  cursor: pointer;
}
#activityPhone .hdr-btn svg {
  display: block;
}
#activityPhone .hdr-title {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--gold-deep);
}

#activityPhone .body {
  flex: 1;
  overflow: hidden;
  padding: 0 24px;
}
#activityPhone .scroll {
  will-change: transform;
  transition: transform 1.15s cubic-bezier(.4,0,.2,1);
}

/* ---------------- lede ---------------- */
#activityPhone .lede {
  padding-top: 10px;
  text-align: center;
}
#activityPhone .lede h1 {
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.3px;
  color: var(--text);
  line-height: 1.25;
}
#activityPhone .lede p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

#activityPhone .slabel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 26px 2px 10px;
}
#activityPhone .slabel .l {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--muted);
}
#activityPhone .slabel .r {
  font-family: var(--disp);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------- the day's card ---------------- */
#activityPhone .card {
  padding: 10px 10px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 5px 10px rgba(30,26,21,.06);
}
#activityPhone .hero {
  position: relative;
  aspect-ratio: 3/2;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cream-deep);
}
#activityPhone .hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .34s ease;
}
#activityPhone .hero img.on {
  opacity: 1;
}

/* played today, the seal the app puts on a finished game */
#activityPhone .seal {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--deep);
  background: rgba(255,255,255,.92);
  border: 1px solid var(--ring);
  padding: 5px 9px;
  border-radius: 999px;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
#activityPhone .played .seal {
  opacity: 1;
  transform: none;
}

#activityPhone .thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}
#activityPhone .thumb {
  position: relative;
  width: 64px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  opacity: .72;
  transition: opacity .25s ease;
  flex: none;
  cursor: pointer;
}
#activityPhone .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#activityPhone .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  transition: border-color .25s ease;
}
#activityPhone .thumb.sel {
  opacity: 1;
}
#activityPhone .thumb.sel::after {
  border-color: var(--deep);
}
#activityPhone .thumb.next::after {
  border-color: var(--gold);
  animation: actBreath 2.4s ease-in-out infinite alternate;
}
@keyframes actBreath {
  from { opacity: 0; box-shadow: none; }
  to { opacity: .55; box-shadow: 0 0 7px rgba(212,165,116,.44); }
}
#activityPhone .tick {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--ring);
  display: grid;
  place-items: center;
  color: var(--deep);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
#activityPhone .thumb.done .tick {
  opacity: 1;
  transform: none;
}

#activityPhone .meat {
  padding: 12px 8px 0;
}
#activityPhone .pill {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: var(--deep);
  background: var(--tint);
  padding: 4px 9px;
  border-radius: 999px;
}
#activityPhone .card h2 {
  font-family: var(--disp);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.4px;
  color: var(--text);
  line-height: 1.2;
  margin-top: 8px;
}
#activityPhone .card .sum,
#activityPhone .idcard .sum {
  font-size: 13.5px;
  color: var(--text2);
  line-height: 17.5px;
  margin-top: 5px;
}
#activityPhone .chips {
  display: flex;
  gap: 6px;
  margin-top: 11px;
}
#activityPhone .chip {
  font-size: 11px;
  font-weight: 700;
  color: var(--deep);
  background: var(--tint);
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

#activityPhone .begin {
  display: grid;
  place-items: center;
  height: 48px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--deep);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 12px var(--lift);
  transition: background .3s ease,box-shadow .3s ease,color .3s ease,transform .14s ease;
  cursor: pointer;
}
#activityPhone .played .begin {
  background: var(--surface);
  color: var(--deep);
  box-shadow: none;
  border: 1px solid var(--ring);
}

#activityPhone .fade {
  transition: opacity .22s ease,transform .22s ease;
}
#activityPhone .swapping .fade {
  opacity: 0;
  transform: translateY(6px);
}

#activityPhone .library {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 36px 2px 10px;
}
#activityPhone .library .l {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--muted);
}
#activityPhone .library .fam {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: var(--gold-label);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(212,165,116,.14);
  border: 1px solid rgba(212,165,116,.45);
}
#activityPhone .library .r {
  margin-left: auto;
  font-family: var(--disp);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

/* ---------------- the activity page ---------------- */
#activityPhone .idcard {
  padding: 10px 10px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(30,26,21,.05);
}
#activityPhone .idcard h2 {
  font-family: var(--disp);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.4px;
  color: var(--text);
  line-height: 1.2;
  margin-top: 12px;
}

#activityPhone .step-hero {
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg,var(--peri) 0%,var(--peri-deep) 100%);
  box-shadow: 0 5px 10px rgba(86,98,159,.35);
}
#activityPhone .step-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
#activityPhone .step-top .n {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
#activityPhone .step-top .hint {
  font-size: 10.5px;
  color: rgba(255,255,255,.75);
}
#activityPhone .step-text {
  margin-top: 11px;
  min-height: 118px;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--disp);
  font-size: 20px;
  color: #fff;
  line-height: 25px;
  cursor: pointer;
}
#activityPhone .step-text .spoken {
  font-family: var(--write);
  font-size: 24px;
  color: var(--hand);
}
#activityPhone .step-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
#activityPhone .beads {
  display: flex;
  align-items: center;
  gap: 7px;
}
#activityPhone .bead {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  transition: background .25s ease;
}
#activityPhone .bead.done {
  background: #fff;
}
#activityPhone .bead.now {
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,.15);
  border: 2px solid #fff;
  animation: actPulse 1.3s ease-in-out infinite alternate;
}
@keyframes actPulse {
  from { transform: scale(1); }
  to { transform: scale(1.22); }
}
#activityPhone .step-back {
  margin-left: auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity .25s ease;
  cursor: pointer;
}
#activityPhone .step-back.on {
  opacity: 1;
}
#activityPhone .step-next {
  font-size: 13px;
  font-weight: 700;
  color: var(--peri-deep);
  background: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
}

/* what it builds */
#activityPhone .builds {
  padding: 16px;
  border-radius: 20px;
  background: var(--tint);
  border: 1px solid var(--ring);
  box-shadow: 0 5px 10px var(--soft);
}
#activityPhone .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
#activityPhone .tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--deep);
  background: #fff;
  border: 1px solid var(--ring);
  padding: 6px 11px;
  border-radius: 999px;
}
#activityPhone .why {
  font-size: 15px;
  color: var(--text2);
  line-height: 20px;
}
#activityPhone .why b {
  font-weight: 600;
  color: var(--text);
}

/* from Lumi */
#activityPhone .lumi {
  position: relative;
  margin-top: 26px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg,var(--lumi-top) 0%,var(--lumi-bot) 100%);
  box-shadow: 0 5px 10px rgba(167,125,76,.35);
}
#activityPhone .lumi::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.65px;
  background: conic-gradient(from var(--ang, 0deg),transparent 0 88%,rgba(255,255,255,.10) 91.5%,rgba(255,255,255,.55) 95.5%,var(--hand) 97.8%,transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: actLap 9s linear infinite;
  pointer-events: none;
}
@keyframes actLap {
  to { --ang: 360deg; }
}
#activityPhone .lumi-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
#activityPhone .lumi-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hand);
  box-shadow: 0 0 4px rgba(255,255,255,.7);
  animation: actDot 2.6s ease-in-out infinite alternate;
}
@keyframes actDot {
  from { transform: scale(.82); opacity: .62; }
  to { transform: scale(1.18); opacity: 1; }
}
#activityPhone .lumi-top span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: #fff;
}
#activityPhone .lumi p {
  font-size: 15.5px;
  font-style: italic;
  color: #fff;
  line-height: 18.5px;
}

/* we did it */
#activityPhone .didit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  margin-top: 26px;
  border-radius: 999px;
  background: #fff;
  color: var(--peri-deep);
  border: 1px solid rgba(124,138,216,.45);
  font-size: 15.5px;
  font-weight: 700;
  box-shadow: 0 5px 10px rgba(86,98,159,.25);
  transition: opacity .14s ease,transform .14s ease,background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease;
  cursor: pointer;
}
#activityPhone .didit.busy {
  opacity: .84;
  transform: scale(.985);
}
#activityPhone .didit.done {
  background: var(--surface);
  color: var(--success);
  border-color: var(--border);
  box-shadow: none;
}
#activityPhone .spin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(86,98,159,.25);
  border-top-color: var(--peri-deep);
  animation: actSpin .7s linear infinite;
}
@keyframes actSpin {
  to { transform: rotate(360deg); }
}
#activityPhone .tail {
  height: 28px;
}

/* flash */
#activityPhone .flash {
  position: absolute;
  inset: 0;
  z-index: 65;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(320px 320px at 50% 55%,rgba(255,244,214,.85),rgba(255,244,214,0));
  transition: opacity .3s ease;
}
#activityPhone .flash.on {
  opacity: 1;
}

/* toast */
#activityPhone .toast {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 92px;
  z-index: 66;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--toast-fg);
  text-align: center;
  background: var(--toast-bg);
  padding: 9px 16px;
  border-radius: 22px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);
}
#activityPhone .toast.on {
  opacity: 1;
  transform: none;
}

/* entrance */
#activityPhone .rise {
  opacity: 0;
  transform: translateY(10px);
}
#activityPhone.booted .rise,
#activityPhone .booted .rise {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
}
#activityPhone.booted .card,
#activityPhone .booted .card {
  animation: actCardIn .7s cubic-bezier(.2,.7,.2,1) both .34s;
}
@keyframes actCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* tap ring */
#activityPhone .ring {
  position: absolute;
  z-index: 70;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(44,36,28,.4);
  opacity: 0;
  pointer-events: none;
}
#activityPhone .ring.go {
  animation: actRip .58s ease-out;
}
@keyframes actRip {
  from { opacity: .75; transform: scale(.55); }
  to { opacity: 0; transform: scale(2.3); }
}
#activityPhone .ring.light {
  border-color: rgba(255,255,255,.75);
}

@media (prefers-reduced-motion: reduce) {
  #activityPhone .ring { display: none; }
  #activityPhone .animate .page,
  #activityPhone .hero img,
  #activityPhone .fade,
  #activityPhone .scroll { transition: none; }
  #activityPhone .bead.now,
  #activityPhone .lumi-dot,
  #activityPhone .lumi::after,
  #activityPhone .thumb.next::after { animation: none; }
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
  .landing-feature-row {
    padding: 64px 20px 52px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .feature-row-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }
  .feature-text-col,
  .landing-feature-alt .feature-text-col {
    order: 1 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: min(92vw, 420px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .header-center-logo {
    display: none !important;
  }
  .feature-hero-title {
    font-size: clamp(23px, 5.8vw, 29px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    text-align: center;
  }
  .feature-headline {
    font-size: clamp(31px, 8.4vw, 40px);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    text-align: center;
    margin: 0 auto 14px;
    max-width: min(92vw, 420px);
    padding: 0;
    box-sizing: border-box;
    text-wrap: balance;
  }
  .feature-description {
    font-size: clamp(17px, 4.6vw, 20px);
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 auto 20px;
    max-width: min(92vw, 400px);
    text-pretty: true;
  }
  .feature-disclaimer {
    margin: 0 auto 16px;
    text-align: center;
    max-width: 340px;
  }
  .feature-visual-col,
  .landing-feature-alt .feature-visual-col {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .feature-stage-canvas {
    width: 100%;
    max-width: 100%;
    min-height: 650px;
    height: 650px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    margin: 0 auto;
  }
  #activityPhone.phone {
    transform: scale(0.75);
    transform-origin: top center;
    margin: 0 auto;
  }
  #activityPhone.phone:hover {
    transform: scale(0.76);
  }
}

@media (max-width: 385px) {
  .feature-stage-canvas {
    min-height: 590px;
    height: 590px;
  }
  #activityPhone.phone {
    transform: scale(0.68);
    transform-origin: top center;
    margin: 0 auto;
  }
}

/* Desktop layout for alternating rows */
@media (min-width: 992px) {
  .landing-feature-alt .feature-text-col {
    order: 1;
    text-align: left;
  }
  .landing-feature-alt .feature-visual-col {
    order: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

#page-4 {
  --peach: #E0915A;      /* piccoHomePeach, the LUMICAST label */
  --nap: #4E4187;        /* piccoLumicastTileNextNap */
  --sleeping: #4B4678;   /* piccoLumicastTileSleeping */
  --fill-next: #9FC0F5;  /* the colour behind the picture, per state */
  --fill-ready: #F3C88C;
  --fill-asleep: #86A9E4;
  --fill-now: #8FD9C4;
  --wash-top: rgba(14,20,50,.33);
  --wash-mid: rgba(14,20,50,.30);
  --wash-foot: rgba(14,20,50,.22);
  --ink-shadow: rgba(5,8,23,.42);
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --disp: "Comfortaa", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#page-4 .feature-row-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(360px, 480px) 1fr;
  align-items: center;
  gap: 48px;
}

#page-4 .lumicast-stage-wrapper {
  position: relative;
  width: 100%;
  max-width: 880px;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: pointer;
}

#page-4 .stage {
  width: 760px;
  height: 520px;
  flex: none;
  overflow: hidden;   /* the tile that leaves is cut off, never faded */
  perspective: 1800px;
  perspective-origin: 50% 46%;
  transform-origin: center center;
  transform: scale(1.134); /* 10% smaller than 1.26 */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-4 .stack {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateX(-26px) rotateX(9deg) rotateY(-13deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-4 .lumicast-stage-wrapper:hover .stack {
  transform: translateX(-26px) rotateX(9deg) rotateY(-13deg) scale(1.025);
}

#page-4 .tile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 361px;
  margin: -118px 0 0 -181px;
  border-radius: 26px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .78s cubic-bezier(.34,.02,.2,1), filter .78s ease, opacity .5s ease;
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
}

#page-4 .tile.snap {
  transition: none;
}

#page-4 .tile.enter {
  transition: transform .84s cubic-bezier(.2,.6,.2,1), filter .84s ease;
}

/* one slot per depth: all four are on screen at once */
#page-4 .tile[data-slot="0"] { transform: translate3d(-112px, 42px, 60px); filter: none; }
#page-4 .tile[data-slot="1"] { transform: translate3d(-30px, 6px, -110px); filter: brightness(.94); }
#page-4 .tile[data-slot="2"] { transform: translate3d(48px, -32px, -280px); filter: brightness(.86); }
#page-4 .tile[data-slot="3"] { transform: translate3d(124px, -66px, -450px); filter: brightness(.78); }
/* out through the bottom of the frame, and back in behind the last one */
#page-4 .tile[data-slot="exit"] {
  transform: translate3d(-330px, 420px, 430px) rotateZ(-5deg);
  opacity: 0;
  pointer-events: none;
  filter: brightness(1);
}
#page-4 .tile[data-slot="pre"]  {
  transform: translate3d(210px, -104px, -660px);
  opacity: 0;
  pointer-events: none;
  filter: brightness(.7);
}

/* the white row: Activities own top row, in LumiCast's words */
#page-4 .head {
  display: flex;
  align-items: center;
  padding: 10px 20px 8px;
  background: #FFFFFF;
}
#page-4 .head .mark {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--peach);
}
#page-4 .head .end {
  margin-left: auto;
  display: flex;
  align-items: center;
}
#page-4 .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  animation: lumicastBreath 3.5s ease-in-out infinite;
}
@keyframes lumicastBreath {
  0%, 100% { opacity: .42; transform: scale(.88); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
#page-4 .head .state {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--accent);
}

/* the picture band */
#page-4 .pic {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--fill);
}
#page-4 .scene,
#page-4 .layer {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
#page-4 .scene,
#page-4 .layer.on {
  display: block;
}
#page-4 .wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--wash-top) 0%, var(--wash-mid) 55%, var(--wash-foot) 100%);
}

/* the words, centred in the room above the lane */
#page-4 .words {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 66px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  text-align: center;
  color: #fff;
}
#page-4 .words > * {
  text-shadow: 0 1px 2px var(--ink-shadow);
}
#page-4 .block {
  width: 100%;
}
#page-4 .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: rgba(255,255,255,.92);
  height: 12px;
  line-height: 12px;
  white-space: nowrap;
}
#page-4 .time {
  font-family: var(--disp);
  font-weight: 500;
  letter-spacing: -1.4px;
  color: #fff;
  height: 52px;
  line-height: 52px;
  white-space: nowrap;
}
#page-4 .eyebrow + .time {
  margin-top: 8px;
}
#page-4 .sentence {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.94);
  margin-top: 10px;
  line-height: 18px;
}
#page-4 .lead {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.84);
  margin-top: 6px;
  white-space: nowrap;
}

/* the lane */
#page-4 .lane {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  height: 48px;
  display: flex;
  gap: 10px;
}
#page-4 .shell {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
}
#page-4 .write {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  height: 48px;
  overflow: hidden;
}
#page-4 .orb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
}
#page-4 .write .lines {
  min-width: 0;
  color: #fff;
  text-shadow: 0 1px 2px var(--ink-shadow);
}
#page-4 .write .t {
  font-size: 15px;
  font-weight: 700;
  line-height: 17px;
  white-space: nowrap;
}
#page-4 .write .s {
  font-size: 11px;
  font-weight: 600;
  opacity: .8;
  line-height: 13px;
  white-space: nowrap;
  margin-top: 1px;
}
#page-4 .pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 18px;
  height: 48px;
  flex: none;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 2px var(--ink-shadow);
}
#page-4 .pill svg {
  opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
  #page-4 .dot { animation: none; opacity: 1; }
  #page-4 .tile { transition: none; }
}

@media (max-width: 1300px) {
  #page-4 .lumicast-stage-wrapper {
    height: 468px;
  }
  #page-4 .stage {
    transform: scale(0.99);
  }
}

@media (max-width: 1100px) {
  #page-4 .lumicast-stage-wrapper {
    height: 414px;
  }
  #page-4 .stage {
    transform: scale(0.864);
  }
}

@media (max-width: 991px) {
  #page-4 .feature-row-inner {
    grid-template-columns: minmax(300px, 400px) 1fr;
    gap: 32px;
  }
  #page-4 .lumicast-stage-wrapper {
    height: 360px;
  }
  #page-4 .stage {
    transform: scale(0.72);
  }
}

@media (max-width: 767px) {
  #page-4 .feature-row-inner {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    overflow: visible;
    gap: 10px !important;
  }
  #page-4 .feature-text-col {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    overflow: visible;
  }
  #page-4 .feature-description {
    margin-bottom: 4px !important;
  }
  #page-4 .feature-visual-col {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start !important;
    overflow: visible;
    margin: 0 auto;
  }
  #page-4 .lumicast-stage-wrapper {
    width: 100%;
    max-width: 100%;
    height: 420px !important;
    display: flex;
    align-items: flex-start !important;
    justify-content: center;
    overflow: visible;
    margin: 0 auto;
    padding-top: 0 !important;
  }
  #page-4 .stage {
    transform: scale(0.78) !important;
    transform-origin: top center !important;
    margin: 0 auto;
  }
  #page-4 .stack {
    transform: translateX(0) rotateX(8deg) rotateY(-8deg) !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 440px) {
  #page-4 .lumicast-stage-wrapper {
    height: 400px !important;
  }
  #page-4 .stage {
    transform: scale(0.74) !important;
    transform-origin: top center !important;
  }
}

@media (max-width: 375px) {
  #page-4 .lumicast-stage-wrapper {
    height: 380px !important;
  }
  #page-4 .stage {
    transform: scale(0.70) !important;
    transform-origin: top center !important;
  }
}


/* ============================================================
   PAGE 5: CARE TRACKERS PHONE SHELF (Muse.ai 1:1 Parity)
   ============================================================ */
#page-5 {
  --ink: #1E1A15;
  --ink2: #5C544A;
  --ink3: #8C8478;
  --border: #E8E2D6;
  --cream: #FDFAF6;
  --onAcc: #FFFFFF;
  --toggleOff: rgba(0,0,0,.12);
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --disp: "Comfortaa", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#page-5 .feature-row-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

#page-5 .feature-text-col {
  order: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

#page-5 .feature-visual-col {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-5 .trackers-stage-wrapper {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#page-5 .stage {
  position: relative;
  width: 900px;
  height: 860px;
  flex: none;
  overflow: hidden;
  transform-origin: center center;
  transform: scale(0.72);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-5 .rail {
  position:absolute;top:50%;left:50%;width:0;height:0
}

#page-5 .slot {
  position:absolute;left:0;top:0;width:401px;margin-left:-200.5px;margin-top:-430px;
  transform-origin:50% 50%;will-change:transform,opacity;
  transition:transform .76s cubic-bezier(.3,.72,.16,1),opacity .76s ease,filter .76s ease;
}

#page-5 .slot.jump {
  transition:none
}

#page-5 .slot > .name {
  display:none
}

#page-5 .phone {
  position:relative;width:401px;height:860px;border-radius:56px;
  background:transparent;padding:4px;
  transition:background .6s ease,box-shadow .6s ease;
}

#page-5 .slot[data-d="0"] {
  opacity:1;z-index:20
}

#page-5 .slot[data-d="1"] {
  opacity:.62;z-index:12;filter:saturate(.9)
}

#page-5 .slot[data-d="2"] {
  opacity:.34;z-index:8;filter:saturate(.8)
}

#page-5 .slot[data-d="3"] {
  opacity:.18;z-index:5;filter:saturate(.7)
}

#page-5 .slot[data-d="0"] .phone {
  background:#0B0B0C;
  box-shadow:0 34px 70px rgba(40,36,30,.30),0 0 0 1px rgba(0,0,0,.16);
}

#page-5 .slot[data-d="0"] .notch {
  opacity:1
}

#page-5 .notch {
  opacity:0;transition:opacity .5s ease
}

#page-5 .slot:not([data-d="0"]) .screen {
  box-shadow:0 18px 40px rgba(40,36,30,.14)
}

#page-5 .screen {
  position:relative;width:393px;height:852px;border-radius:52px;overflow:hidden;isolation:isolate
}

#page-5 .notch {
  position:absolute;top:11px;left:50%;transform:translateX(-50%);width:124px;height:34px;border-radius:20px;background:#000;z-index:60
}

#page-5 .sb {
  position:absolute;top:0;left:0;right:0;height:54px;z-index:55;
  display:flex;align-items:center;justify-content:space-between;padding:16px 32px 0;
  font-size:15px;font-weight:700;color:var(--ink);
}

#page-5 .sb .r {
  display:flex;align-items:center;gap:6px
}

#page-5 .sb svg {
  display:block
}

#page-5 .room {
  position:absolute;inset:0;padding-top:54px;display:flex;flex-direction:column;overflow:hidden
}

#page-5 .room .bgwash {
  position:absolute;inset:0;z-index:0
}

#page-5 .room > * {
  position:relative;z-index:1;
}

#page-5 .hdr {
  display:flex;align-items:center;padding:8px 24px 0
}

#page-5 .hdr .circ {
  width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.64);border:1px solid var(--border);color:var(--ink2);
}

#page-5 .hdr .title {
  flex:1;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:2.4px;color:var(--deep)
}

#page-5 .modes {
  position:relative;height:46px;margin:8px 22px 0;border-radius:999px;
  background:var(--trough);border:1px solid var(--border);display:flex
}

#page-5 .modes .thumb {
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;
  background:#fff;box-shadow:0 4px 8px var(--lift18);
}

#page-5 .modes button {
  position:relative;flex:1;height:46px;border:0;background:none;cursor:default;
  font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink3);
}

#page-5 .modes button.on {
  color:var(--deep)
}

#page-5 .scroll {
  flex:1;overflow:hidden;padding:18px 24px 0
}

#page-5 .slabel {
  font-size:10px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--ink3)
}

#page-5 .card {
  background:rgba(255,255,255,.70);border:1px solid var(--border);border-radius:16px
}

#page-5 .notebtn {
  display:flex;align-items:center;gap:10px;padding:13px;border-radius:14px;
  background:#fff;border:1px solid var(--border);margin-top:12px;
}

#page-5 .notebtn span {
  flex:1;font-size:14px;color:var(--ink3)
}

#page-5 .notebtn svg {
  color:var(--deep)
}

#page-5 .toggle {
  width:44px;height:26px;border-radius:999px;background:var(--toggleOff);position:relative;flex:none
}

#page-5 .toggle i {
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15)
}

#page-5 .toggle.on {
  background:var(--acc)
}

#page-5 .toggle.on i {
  left:auto;right:3px
}

#page-5 .savebar {
  position:absolute;left:0;right:0;bottom:0;z-index:5
}

#page-5 .savebar .fade {
  height:24px;background:linear-gradient(180deg,var(--bg2-0) 0%,var(--bg2-96) 60%,var(--bg2) 100%)
}

#page-5 .savebar .well {
  background:var(--bg2);padding:0 24px 28px
}

#page-5 .savebar .btn {
  min-height:56px;display:grid;place-items:center;border-radius:999px;background:var(--deep);
  color:var(--cream);font-size:15.5px;font-weight:700;box-shadow:0 10px 18px var(--lift45);
}

#page-5 .empty {
  font-family:var(--disp);font-style:italic;font-size:15px;color:var(--ink3);text-align:center;padding:18px 0
}

#page-5 .dgrid {
  display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:14px 22px 0
}

#page-5 .dtile {
  position:relative;height:120px;border-radius:22px;overflow:hidden;padding:16px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,255,255,.64));
  border:1px solid rgba(155,179,120,.34);
}

#page-5 .dtile canvas {
  position:absolute;inset:0;width:100%;height:100%;z-index:0
}

#page-5 .dtile .top, #page-5 .dtile .bot {
  position:relative;z-index:1
}

#page-5 .dtile .top {
  display:flex;align-items:flex-start;justify-content:space-between
}

#page-5 .dtile .top svg {
  width:26px;height:26px;color:#9BB378
}

#page-5 .dtile .top em {
  font-family:var(--disp);font-size:16px;font-style:normal;letter-spacing:-.2px;color:var(--ink3);font-variant-numeric:tabular-nums
}

#page-5 .dtile .bot b {
  display:block;font-family:var(--disp);font-weight:400;font-size:22px;letter-spacing:-.4px;color:var(--ink)
}

#page-5 .dtile .bot span {
  display:block;font-size:11px;color:var(--ink);margin-top:2px
}

#page-5 .dtile.on {
  border-color:var(--tint);box-shadow:0 9px 16px var(--tint30)
}

#page-5 .dtile.on .top svg, #page-5 .dtile.on .top em, #page-5 .dtile.on .bot b, #page-5 .dtile.on .bot span {
  color:var(--onAcc)
}

#page-5 .dtile[data-type="dirty"] {
  --tint:#E8C268;--tint30:rgba(232,194,104,.30)
}

#page-5 .dtile[data-type="wet"] {
  --tint:#7BB3C7;--tint30:rgba(123,179,199,.30)
}

#page-5 .dtile[data-type="mixed"] {
  --tint:#83B0A0;--tint30:rgba(131,176,160,.30)
}

#page-5 .dtile[data-type="dry"] {
  --tint:#B8A4C9;--tint30:rgba(184,164,201,.30)
}

#page-5 .dtile.on {
  background:linear-gradient(135deg,rgba(255,255,255,.78),var(--tint18))
}

#page-5 .dtile[data-type="dirty"].on {
  --tint18:rgba(232,194,104,.18)
}

#page-5 .chips {
  display:flex;gap:8px
}

#page-5 .chip {
  flex:1;text-align:center;padding:15px 0;border-radius:16px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.70);border:1px solid var(--border);color:var(--ink);
}

#page-5 .chip.on {
  background:var(--c);border-color:var(--c);color:var(--onAcc);box-shadow:0 6px 12px rgba(232,194,104,.30)
}

#page-5 .rash {
  display:flex;align-items:center;gap:12px;padding:14px 16px;margin-top:16px
}

#page-5 .rash b {
  display:block;font-size:14px;font-weight:500;color:var(--ink)
}

#page-5 .rash span {
  display:block;font-size:12px;color:var(--ink3);margin-top:2px
}

#page-5 .rash > div:first-child {
  flex:1
}

#page-5 .rows {
  margin-top:8px;display:flex;flex-direction:column;gap:8px
}

#page-5 .lrow {
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;
  background:rgba(255,255,255,.72);border:1px solid var(--border);
}

#page-5 .lrow > i {
  width:4px;height:34px;border-radius:999px;flex:none
}

#page-5 .lrow > svg {
  width:22px;height:15px;flex:none
}

#page-5 .lrow .txt {
  flex:1;min-width:0
}

#page-5 .lrow .txt b {
  display:block;font-size:13.5px;font-weight:500;color:var(--ink)
}

#page-5 .lrow .txt span {
  display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums
}

#page-5 .lrow em {
  font-family:var(--disp);font-style:italic;font-size:15px;color:var(--ink2);padding-right:34px;font-variant-numeric:tabular-nums
}

#page-5 .more {
  display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;font-size:13px;font-weight:600;color:var(--deep)
}

#page-5 .collapse {
  overflow:hidden;max-height:0;opacity:0;transition:max-height .32s cubic-bezier(.2,.7,.2,1),opacity .28s ease
}

#page-5 .collapse.open {
  max-height:120px;opacity:1
}

#page-5 .chip.on {
  color:var(--onAcc)
}

#page-5 .dtile {
  transition:border-color .36s ease,box-shadow .36s ease,transform .22s ease
}

#page-5 .dtile .top svg, #page-5 .dtile .top em, #page-5 .dtile .bot b, #page-5 .dtile .bot span {
  transition:color .36s ease
}

#page-5 .dtile.press {
  transform:scale(.972)
}

#page-5 .lrow {
  animation:rowIn .42s cubic-bezier(.2,.7,.2,1) both
}

@keyframes rowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

#page-5 .ring {
  position:absolute;left:0;top:0;z-index:70;width:0;height:0;pointer-events:none
}

#page-5 .ring i {
  position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  margin:-17px 0 0 -17px;border:2px solid rgba(30,26,21,.38);opacity:0;
}

#page-5 .ring.go i {
  animation:rip .58s ease-out
}

#page-5 .ring.light i {
  border-color:rgba(255,255,255,.8)
}

@keyframes rip {
  from { opacity: .75; transform: scale(.55); }
  to   { opacity: 0; transform: scale(2.3); }
}

#page-5 .hero {
  position:relative;height:200px;margin:12px 22px 0;border-radius:24px;overflow:hidden;
  background:rgba(255,255,255,.72);border:1px solid var(--border);box-shadow:0 12px 18px rgba(0,0,0,.10);
}

#page-5 .hero canvas {
  position:absolute;inset:0;width:100%;height:100%
}

#page-5 .hero .herowash {
  position:absolute;inset:0;background:radial-gradient(150px 150px at 50% 50%,rgba(253,250,246,.80) 0%,rgba(253,250,246,.42) 55%,rgba(253,250,246,0) 100%)
}

#page-5 .hero .herotext {
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 18px;text-align:center;gap:8px
}

#page-5 .hero .state {
  display:flex;align-items:center;gap:8px
}

#page-5 .hero .state i {
  width:7px;height:7px;border-radius:50%;background:var(--acc)
}

#page-5 .hero .state span {
  font-size:12px;font-weight:700;letter-spacing:2.2px;color:var(--deep)
}

#page-5 .hero .big {
  display:flex;align-items:baseline;gap:5px;color:var(--deep);font-family:var(--disp);font-weight:300
}

#page-5 .hero .big b {
  font-weight:300;font-size:76px;letter-spacing:-2.6px;line-height:1;font-variant-numeric:tabular-nums
}

#page-5 .hero .big.recall b {
  font-size:56px;letter-spacing:-1.6px
}

#page-5 .hero .big u {
  font-weight:300;font-size:24px;text-decoration:none;opacity:.62
}

#page-5 .hero .sub {
  font-family:var(--disp);font-style:italic;font-size:13.5px;color:var(--ink3)
}

#page-5 .unitrow {
  display:flex;justify-content:center;margin-top:10px
}

#page-5 .unit {
  display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(123,179,199,.24)
}

#page-5 .unit span {
  padding:6px 15px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:1.1px;color:var(--ink3)
}

#page-5 .unit span.on {
  background:var(--acc);color:var(--onAcc)
}

#page-5 .typerow {
  display:flex;gap:8px;margin-top:8px
}

#page-5 .tchip {
  flex:1;text-align:center;padding:12px 16px;border-radius:999px;font-size:14px;font-weight:600;
  background:#fff;border:1px solid var(--border);color:var(--ink2);transition:background .3s,color .3s,border-color .3s;
}

#page-5 .tchip.on {
  background:var(--acc);border-color:transparent;color:var(--onAcc)
}

#page-5 .amount {
  margin-top:8px
}

#page-5 .slidewrap {
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid var(--border)
}

#page-5 .nudge {
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(123,179,199,.16);color:var(--deep)
}

#page-5 .slider {
  position:relative;flex:1;height:44px;display:flex;align-items:center
}

#page-5 .slider .track {
  position:absolute;left:0;right:0;height:4px;border-radius:2px;background:rgba(30,26,21,.12)
}

#page-5 .slider .fillt {
  height:4px;border-radius:2px;background:var(--acc);width:40%
}

#page-5 .slider .knob {
  position:absolute;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transform:translateX(-13px);left:40%;transition:left .3s cubic-bezier(.2,.7,.2,1)
}

#page-5 .qrow {
  display:flex;gap:6px;margin-top:8px
}

#page-5 .qrow .same {
  padding:8px 11px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--deep);white-space:nowrap;
  background:rgba(123,179,199,.14);border:1px solid rgba(123,179,199,.42);
}

#page-5 .qrow .q {
  flex:1;text-align:center;padding:8px 0;border-radius:999px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.72);border:1px solid var(--border);color:var(--ink2);
  font-variant-numeric:tabular-nums;transition:background .3s,color .3s,border-color .3s;
}

#page-5 .qrow .q.on {
  background:var(--acc);border-color:var(--acc);color:var(--onAcc);box-shadow:0 5px 10px rgba(123,179,199,.24)
}

#page-5 .brow {
  display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid var(--border);animation:rowIn .42s cubic-bezier(.2,.7,.2,1) both
}

#page-5 .brow > i {
  width:4px;height:32px;border-radius:999px;flex:none;background:linear-gradient(180deg,#A8D4E2,#7BB3C7);box-shadow:0 0 8px rgba(123,179,199,.20)
}

#page-5 .brow .txt {
  flex:1;min-width:0
}

#page-5 .brow .txt b {
  display:block;font-size:14px;font-weight:500;color:var(--ink)
}

#page-5 .brow .txt span {
  display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums
}

#page-5 .brow em {
  font-family:var(--disp);font-style:italic;font-size:18px;letter-spacing:-.3px;color:var(--deep);padding-right:34px
}

#page-5 .tchip.sm {
  font-size:12.5px;padding:12px 6px
}

#page-5 .symgrid {
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px
}

#page-5 .sym {
  text-align:center;padding:11px 4px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:#fff;border:1px solid var(--border);color:var(--ink2);
  transition:background .3s,color .3s,border-color .3s;
}

#page-5 .sym.on {
  background:var(--band);border-color:var(--band);color:var(--onAcc)
}

#page-5 .trow {
  display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid var(--border);animation:rowIn .42s cubic-bezier(.2,.7,.2,1) both
}

#page-5 .trow > i {
  width:4px;height:32px;border-radius:999px;flex:none
}

#page-5 .trow .txt {
  flex:1;min-width:0
}

#page-5 .trow .txt b {
  display:block;font-size:14px;font-weight:500;color:var(--ink)
}

#page-5 .trow .txt span {
  display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums
}

#page-5 .trow em {
  font-family:var(--disp);font-style:italic;font-size:18px;letter-spacing:-.3px;padding-right:34px
}

#page-5 .mdose {
  display:flex;align-items:baseline;gap:5px;font-family:var(--disp)
}

#page-5 .mdose b {
  font-weight:300;font-size:66px;letter-spacing:-2px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums
}

#page-5 .mdose u {
  font-style:italic;font-weight:400;font-size:22px;text-decoration:none;color:var(--ink3)
}

#page-5 .medname {
  position:absolute;left:0;right:0;bottom:22px;text-align:center;font-family:var(--disp);font-style:italic;font-size:14px;color:var(--ink3)
}

#page-5 .medrow {
  display:flex;gap:8px;margin-top:8px;overflow:hidden;padding:2px 0
}

#page-5 .mpill {
  display:flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;border-radius:999px;flex:none;
  background:#fff;border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap;
  transition:background .3s,color .3s,border-color .3s;
}

#page-5 .mpill .dot {
  width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal
}

#page-5 .mpill.on {
  color:var(--onAcc)
}

#page-5 .unitchips {
  display:flex;gap:6px;margin-top:8px
}

#page-5 .uc {
  flex:1;text-align:center;padding:8px 0;border-radius:999px;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.72);border:1px solid var(--border);color:var(--ink2);
  transition:background .3s,color .3s,border-color .3s;
}

#page-5 .uc.on {
  background:var(--acc);border-color:var(--acc);color:var(--onAcc)
}

#page-5 .mrow {
  display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid var(--border);animation:rowIn .42s cubic-bezier(.2,.7,.2,1) both
}

#page-5 .mrow > i {
  width:4px;height:32px;border-radius:999px;flex:none
}

#page-5 .mrow .txt {
  flex:1;min-width:0
}

#page-5 .mrow .txt b {
  display:block;font-size:14px;font-weight:500;color:var(--ink)
}

#page-5 .mrow .txt span {
  display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums
}

#page-5 .mrow em {
  font-family:var(--disp);font-style:italic;font-size:18px;letter-spacing:-.3px;color:var(--deep);padding-right:34px
}

#page-5 #scr-sleep .hdr .title {
  color:#4A5C8C
}

#page-5 .smodes {
  display:flex;margin:8px 22px 0;padding:4px;border-radius:999px;background:#ECEFF7;border:1px solid #DADFEA
}

#page-5 .smodes .seg {
  flex:1;text-align:center;padding:13px 0;border-radius:999px;font-size:13.5px;font-weight:700;letter-spacing:.2px;color:#82889C
}

#page-5 .smodes .seg.on {
  background:#fff;color:#4A5C8C;box-shadow:0 4px 8px rgba(74,92,140,.12)
}

#page-5 .shero {
  position:relative;height:204px;margin:12px 22px 0;border-radius:24px;overflow:hidden;
  background:#fff;border:1px solid #DADFEA;box-shadow:0 12px 18px rgba(58,71,112,.08);
}

#page-5 .shero canvas {
  position:absolute;inset:0;width:100%;height:100%
}

#page-5 .shero .swash {
  position:absolute;inset:0;background:radial-gradient(150px 150px at 50% 50%,rgba(243,245,251,.82) 0%,rgba(243,245,251,0) 100%)
}

#page-5 .shero .stext {
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px
}

#page-5 .shero .state {
  display:flex;align-items:center;gap:8px;margin-bottom:12px
}

#page-5 .shero .state i {
  width:7px;height:7px;border-radius:50%;background:rgba(130,136,156,.7)
}

#page-5 .shero .state span {
  font-size:14px;font-weight:700;letter-spacing:2.6px;color:#82889C
}

#page-5 .shero.asleep .state i {
  background:#6B7FB3
}

#page-5 .shero.asleep .state span {
  color:#4A5C8C
}

#page-5 .sclock {
  display:flex;align-items:last baseline;gap:2px;font-family:var(--disp);font-weight:300;color:#6072B0;font-variant-numeric:tabular-nums;transition:color .6s ease
}

#page-5 .sclock b {
  font-weight:300;font-size:78px;letter-spacing:-2.6px;line-height:1
}

#page-5 .sclock u {
  font-weight:300;font-size:34px;letter-spacing:-.6px;text-decoration:none;opacity:.5
}

#page-5 .shero.asleep .sclock {
  color:#33406A
}

#page-5 .startpill {
  display:flex;align-items:center;gap:5px;margin-top:12px;padding:6px 12px;border-radius:999px;
  background:#EEF1FA;border:1px solid rgba(107,127,179,.30);color:#4A5C8C;font-size:11.5px;font-weight:600;
}

#page-5 .srow {
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#fff;border:1px solid #DADFEA;animation:rowIn .42s cubic-bezier(.2,.7,.2,1) both
}

#page-5 .srow > i {
  width:4px;height:32px;border-radius:999px;flex:none;background:#6B7FB3
}

#page-5 .srow .txt {
  flex:1;min-width:0
}

#page-5 .srow .txt b {
  display:block;font-size:14px;font-weight:500;color:#1E1A15
}

#page-5 .srow .txt span {
  display:block;font-size:11.5px;color:#82889C;margin-top:2px;font-variant-numeric:tabular-nums
}

#page-5 .srow em {
  font-family:var(--disp);font-style:italic;font-size:18px;letter-spacing:-.3px;color:#4A5C8C;padding-right:34px
}

#page-5 #scr-sleep .btn {
  height:56px;min-height:56px
}

#page-5 .quiet {
  text-align:center;padding:4px 0;margin-top:10px;font-size:12.5px;font-weight:600;color:#C77A6A
}

#page-5 #scr-sleep .slabel {
  color:#82889C
}

#page-5 .platecard {
  position:relative;height:214px;margin:12px 22px 0;border-radius:26px;overflow:hidden;
  background:radial-gradient(240px 240px at 50% 0%,rgba(79,141,203,.10),rgba(79,141,203,0)),rgba(255,255,255,.72);
  border:1px solid var(--border);box-shadow:0 10px 16px rgba(0,0,0,.10);
  display:flex;align-items:flex-start;justify-content:center;
}

#page-5 .ftpill {
  position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:#FBF3E4;border:1px solid rgba(212,165,116,.55);color:#A77D4C;
  font-size:11px;font-weight:700;letter-spacing:.4px;
}

#page-5 .plate {
  position:relative;width:169.2px;height:169.2px;margin-top:30px;border-radius:50%;
  background:#fff;border:2px solid var(--border);box-shadow:0 9px 15px rgba(30,26,21,.10)
}

#page-5 .plate .rim {
  position:absolute;left:50%;top:50%;width:153px;height:153px;margin:-76.5px 0 0 -76.5px;border-radius:50%;border:1.5px solid #F1EBE0
}

#page-5 .plate .well {
  position:absolute;left:50%;top:50%;width:133.2px;height:133.2px;margin:-66.6px 0 0 -66.6px;border-radius:50%;
  background:#FBF6EE;border:1.5px solid #EDE6D8;overflow:hidden
}

#page-5 .plate .foods {
  position:absolute;inset:0
}

#page-5 .plate .wedge {
  position:absolute;inset:0
}

#page-5 .mound {
  position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.55);transform:translate(-50%,-50%)
}

#page-5 .fchip {
  position:absolute;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.95);
  border:1.5px solid var(--border);box-shadow:0 4px 6px rgba(0,0,0,.12);transform:translate(-50%,-50%);
  display:grid;place-items:center;
}

#page-5 .fchip img {
  width:66%;height:66%;object-fit:contain
}

#page-5 .bookline {
  display:flex;gap:10px;margin-top:6px
}

#page-5 .book {
  flex:1;display:flex;align-items:center;gap:13px;height:72px;padding:0 14px;border-radius:24px;
  background:rgba(255,255,255,.74);border:1px solid var(--border);
}

#page-5 .book i {
  width:46px;height:46px;flex:none;display:grid;place-items:center;color:var(--deep)
}

#page-5 .book b {
  display:block;font-size:14px;font-weight:600;color:var(--ink)
}

#page-5 .book span {
  display:block;font-size:11.5px;color:var(--ink3);margin-top:2px
}

#page-5 .searchbtn {
  width:52px;height:72px;border-radius:24px;display:grid;place-items:center;background:rgba(255,255,255,.74);border:1px solid var(--border);color:var(--ink2)
}

#page-5 .gridlabel {
  margin-top:14px;font-size:10px;font-weight:700;letter-spacing:2.2px;color:var(--ink3)
}

#page-5 .foodgrid {
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:10px
}

#page-5 .ftile {
  display:flex;flex-direction:column;align-items:center;gap:7px
}

#page-5 .ftile .art {
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;overflow:hidden
}

#page-5 .ftile .art img {
  width:45px;height:45px;object-fit:contain
}

#page-5 .ftile b {
  font-size:12px;font-weight:600;color:var(--ink2);text-align:center;line-height:14px;transition:color .3s
}

#page-5 .ftile.on b {
  color:var(--deep)
}

#page-5 .frow {
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid var(--border)
}

#page-5 .frow > i {
  width:4px;height:32px;border-radius:999px;flex:none
}

#page-5 .frow .txt {
  flex:1;min-width:0
}

#page-5 .frow .txt b {
  display:block;font-size:14px;font-weight:500;color:var(--ink)
}

#page-5 .frow .txt span {
  display:block;font-size:11.5px;color:var(--ink3);margin-top:2px;font-variant-numeric:tabular-nums
}

#page-5 .frow em {
  font-family:var(--disp);font-style:italic;font-size:15px;color:var(--ink2);padding-right:34px
}

#page-5 .well2 {
  background:var(--bg2);padding:0 24px 28px
}

#page-5 #scr-solids .btn {
  background:var(--deep);box-shadow:0 10px 18px rgba(62,120,180,.45)
}

@media (max-width: 1300px) {
  #page-5 .trackers-stage-wrapper {
    height: 580px;
  }
  #page-5 .stage {
    transform: scale(0.64);
  }
}

@media (max-width: 1100px) {
  #page-5 .trackers-stage-wrapper {
    height: 520px;
  }
  #page-5 .stage {
    transform: scale(0.56);
  }
}

@media (max-width: 991px) {
  #page-5 .feature-row-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  #page-5 .trackers-stage-wrapper {
    height: 480px;
  }
  #page-5 .stage {
    transform: scale(0.50);
  }
}

@media (max-width: 767px) {
  #page-5 .feature-row-inner {
    grid-template-columns: 1fr;
    width: 100%;
    overflow: visible;
    gap: 28px;
  }
  #page-5 .feature-text-col {
    order: 1;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  #page-5 .feature-visual-col {
    order: 2;
    width: 100%;
    overflow: visible;
    display: flex;
    justify-content: center;
  }
  #page-5 .trackers-stage-wrapper {
    width: 100%;
    max-width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    margin: 0 auto;
  }
  #page-5 .stage {
    transform: scale(0.68);
    transform-origin: top center;
  }
}

@media (max-width: 440px) {
  #page-5 .trackers-stage-wrapper {
    height: 570px;
  }
  #page-5 .stage {
    transform: scale(0.64);
    transform-origin: top center;
  }
}

@media (max-width: 375px) {
  #page-5 .trackers-stage-wrapper {
    height: 530px;
  }
  #page-5 .stage {
    transform: scale(0.60);
    transform-origin: top center;
  }
}

/* ============================================================
   PAGE 6: TASKS & FAMILY SYNC (Muse.ai 1:1 Parity)
   ============================================================ */
#page-6 {
  --ink: #1E1A15;
  --ink2: #5C544A;
  --ink3: #8C8478;
  --border: #E8E2D6;
  --surface: #FFFFFF;
  --cream: #FDFAF6;
  --recessed: #F5F1EA;
  --rose: #CC7C9C;
  --roseDeep: #A85E7F;
  --roseTint: #F9ECF1;
  --mom: #A86060;
  --dad: #5E7D40;
  --gold: #D4A574;
  --goldBright: #E6B989;
  --accOwner: #B87A3A;
  --accFull: #668D49;
  --accLimited: #5F78B2;
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --disp: "Comfortaa", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#page-6 .feature-row-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

#page-6 .feature-text-col {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

#page-6 .feature-visual-col {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-6 .tasks-stage-wrapper {
  position: relative;
  width: 100%;
  max-width: 680px;
  height: 660px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#page-6 .stage {
  position: relative;
  width: 900px;
  height: 860px;
  flex: none;
  overflow: hidden;
  transform-origin: center center;
  transform: scale(0.72);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#page-6 .rail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

#page-6 .slot {
  position: absolute;
  left: 0;
  top: 0;
  width: 401px;
  margin-left: -200.5px;
  margin-top: -430px;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: transform .76s cubic-bezier(.3, .72, .16, 1), opacity .76s ease, filter .76s ease;
}

#page-6 .slot.jump {
  transition: none;
}

#page-6 .slot[data-d="0"] {
  opacity: 1;
  z-index: 20;
}

#page-6 .slot[data-d="1"] {
  opacity: .62;
  z-index: 12;
  filter: saturate(.9);
}

#page-6 .slot[data-d="2"] {
  opacity: .34;
  z-index: 8;
  filter: saturate(.8);
}

#page-6 .slot[data-d="3"] {
  opacity: .18;
  z-index: 5;
  filter: saturate(.7);
}

#page-6 .phone {
  position: relative;
  width: 401px;
  height: 860px;
  border-radius: 56px;
  background: transparent;
  padding: 4px;
  transition: background .6s ease, box-shadow .6s ease;
}

#page-6 .slot[data-d="0"] .phone {
  background: #0B0B0C;
  box-shadow: 0 34px 70px rgba(40, 36, 30, .30), 0 0 0 1px rgba(0, 0, 0, .16);
}

#page-6 .slot[data-d="0"] .notch {
  opacity: 1;
}

#page-6 .notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 124px;
  height: 34px;
  border-radius: 20px;
  background: #000;
  z-index: 60;
  opacity: 0;
  transition: opacity .5s ease;
}

#page-6 .slot:not([data-d="0"]) .screen {
  box-shadow: 0 18px 40px rgba(40, 36, 30, .14);
}

#page-6 .screen {
  position: relative;
  width: 393px;
  height: 852px;
  border-radius: 52px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
}

#page-6 .sb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

#page-6 .sb .r {
  display: flex;
  align-items: center;
  gap: 6px;
}

#page-6 .sb svg {
  display: block;
}

#page-6 .room {
  position: absolute;
  inset: 0;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#page-6 .room .bgwash {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#page-6 .room > * {
  position: relative;
  z-index: 1;
}

#page-6 .hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px 0;
}

#page-6 .hdr .circ {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .64);
  border: 1px solid var(--border);
  color: var(--ink2);
}

#page-6 .hdr .title {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
}

#page-6 .scroll {
  flex: 1;
  overflow: hidden;
}

#page-6 .ring {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 70;
  width: 0;
  height: 0;
  pointer-events: none;
}

#page-6 .ring i {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(30, 26, 21, .38);
  opacity: 0;
}

#page-6 .ring.go i {
  animation: rip .58s ease-out;
}

#page-6 .ring.light i {
  border-color: rgba(255, 255, 255, .8);
}

/* Tasks screen styles */
#page-6 .strip {
  display: flex;
  gap: 8px;
  padding: 14px 24px 0;
  overflow: hidden;
}

#page-6 .schip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 8px;
  border-radius: 999px;
  flex: none;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 600;
  transition: background .3s, border-color .3s, color .3s;
}

#page-6 .schip i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
}

#page-6 .schip i.num {
  background: var(--roseTint);
  color: var(--roseDeep);
}

#page-6 .schip b {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink3);
}

#page-6 .schip.on {
  background: var(--roseTint);
  border-color: rgba(168, 94, 127, .55);
  color: var(--roseDeep);
}

#page-6 .glabel {
  margin-top: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--ink3);
}

#page-6 .tlist {
  margin-top: 4px;
}

#page-6 .trow {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(232, 226, 214, .7);
  animation: rowIn .42s cubic-bezier(.2, .7, .2, 1) both;
}

#page-6 .trow .ck {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.6px solid var(--c);
  flex: none;
}

#page-6 .trow .mid {
  flex: 1;
  min-width: 0;
}

#page-6 .trow .mid b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

#page-6 .trow .mid span {
  display: block;
  font-size: 11.5px;
  color: var(--ink3);
  margin-top: 2px;
}

#page-6 .trow .av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

#page-6 .newbar {
  padding: 0 24px 22px;
}

#page-6 .newbar .btn {
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--roseDeep);
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(168, 94, 127, .45);
}

#page-6 .sheetveil {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(30, 26, 21, .28);
  opacity: 0;
  transition: opacity .38s ease;
  pointer-events: none;
}

#page-6 .sheetveil.on {
  opacity: 1;
}

#page-6 .sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  padding: 0 20px 26px;
  background: var(--cream);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -12px 30px rgba(30, 26, 21, .16);
  transform: translateY(100%);
  transition: transform .46s cubic-bezier(.25, .8, .25, 1);
}

#page-6 .sheet.on {
  transform: translateY(0);
}

#page-6 .grab {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 10px auto 16px;
}

#page-6 .tfield {
  min-height: 58px;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--disp);
  font-size: 22px;
  color: var(--ink);
  transition: border-color .3s, border-width .3s;
}

#page-6 .tfield.focus {
  border-color: var(--rose);
  border-width: 1.5px;
}

#page-6 .tfield .ph {
  color: var(--ink3);
}

#page-6 .tfield .caret {
  display: inline-block;
  width: 2px;
  height: 24px;
  background: var(--rose);
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
  vertical-align: -4px;
}

@keyframes blink {
  50% { opacity: 0; }
}

#page-6 .clabel {
  margin-top: 16px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--ink3);
}

#page-6 .crow {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}

#page-6 .cchip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink2);
  font-size: 12.5px;
  font-weight: 600;
  transition: background .3s, border-color .3s, color .3s;
}

#page-6 .cchip i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  margin-left: -4px;
}

#page-6 .cchip i.dash {
  border: 1.5px dashed var(--border);
  background: none;
}

#page-6 .cchip.on {
  background: var(--roseTint);
  border-color: var(--rose);
  color: var(--roseDeep);
}

#page-6 .cta {
  margin-top: 20px;
  padding: 15px 0;
  text-align: center;
  border-radius: 999px;
  background: var(--roseDeep);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 5px 12px rgba(168, 94, 127, .32);
  transition: opacity .3s;
}

/* Push notification screen styles */
#page-6 .lock {
  position: absolute;
  inset: 0;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

#page-6 .lockbg {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% 0%, #2B3326 0%, #171A16 62%, #101208 100%);
}

#page-6 .lockdate {
  position: relative;
  margin-top: 46px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, .80);
}

#page-6 .locktime {
  position: relative;
  margin-top: 2px;
  font-family: var(--disp);
  font-weight: 300;
  font-size: 82px;
  letter-spacing: -2px;
  color: #fff;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

#page-6 .banner {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 290px;
  padding: 13px 15px 15px;
  border-radius: 22px;
  background: rgba(248, 246, 242, .86);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .30);
  opacity: 0;
  transform: translateY(-26px) scale(.97);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}

#page-6 .banner.on {
  opacity: 1;
  transform: none;
}

#page-6 .banner .app {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

#page-6 .banner .app svg {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  display: block;
}

#page-6 .banner .app span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  color: rgba(30, 26, 21, .55);
}

#page-6 .banner .app em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: rgba(30, 26, 21, .45);
}

#page-6 .banner b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}

#page-6 .banner p {
  margin-top: 2px;
  font-size: 14px;
  color: rgba(30, 26, 21, .78);
}

/* Caregiver Invite screen styles */
#page-6 .invsheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 54px;
  bottom: 0;
  background: var(--cream);
  border-radius: 28px 28px 0 0;
  padding: 0 24px 30px;
  overflow: hidden;
}

#page-6 .invtop {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

#page-6 .invtop .back {
  width: 82px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink2);
}

#page-6 .dots {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 7px;
}

#page-6 .dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(30, 26, 21, .16);
  transition: background .3s, width .3s;
}

#page-6 .dots i.on {
  background: var(--roseDeep);
  width: 18px;
  border-radius: 999px;
}

#page-6 .facts {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink2);
}

#page-6 .facts i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(30, 26, 21, .28);
  flex: none;
}

#page-6 .invsheet h2 {
  margin-top: 18px;
  font-family: var(--disp);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -.6px;
  color: var(--ink);
  line-height: 1.2;
}

#page-6 .invsheet > p {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink3);
}

#page-6 .roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 18px;
}

#page-6 .role {
  padding: 13px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background .3s, border-color .3s;
}

#page-6 .role b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

#page-6 .role span {
  display: block;
  font-size: 11px;
  color: var(--ink3);
  margin-top: 2px;
}

#page-6 .role.on {
  background: var(--roseTint);
  border-color: var(--rose);
}

#page-6 .role.on b {
  color: var(--roseDeep);
}

#page-6 .levels {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#page-6 .lev {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background .3s, border-color .3s;
}

#page-6 .lev i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

#page-6 .lev b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

#page-6 .lev span {
  display: block;
  font-size: 11.5px;
  color: var(--ink3);
  margin-top: 2px;
}

#page-6 .lev.on {
  background: var(--roseTint);
  border-color: var(--rose);
}

#page-6 .codecard {
  margin-top: 20px;
  padding: 22px 18px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}

#page-6 .codecard .cl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: var(--ink3);
}

#page-6 .codecard .code {
  margin-top: 10px;
  font-family: var(--disp);
  font-weight: 500;
  font-size: 34px;
  letter-spacing: 2px;
  color: var(--roseDeep);
}

#page-6 .codecard .cn {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink3);
}

#page-6 .icta {
  margin-top: 20px;
  padding: 15px 0;
  text-align: center;
  border-radius: 999px;
  background: var(--roseDeep);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 5px 12px rgba(168, 94, 127, .32);
}

/* Family Orbit screen styles */
#page-6 .famtitle {
  padding: 18px 24px 0;
}

#page-6 .famtitle h2 {
  font-family: var(--disp);
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -.8px;
  color: var(--ink);
}

#page-6 .famtitle p {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink3);
}

#page-6 .orbit {
  display: block;
  width: 100%;
  height: 190px;
  margin-top: 8px;
}

#page-6 .famlabel {
  margin-top: 18px;
  padding: 0 24px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: rgba(30, 26, 21, .42);
}

#page-6 .famcard {
  margin: 10px 16px 0;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .04);
  overflow: hidden;
}

#page-6 .prow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  min-height: 60px;
  border-bottom: 1px solid var(--border);
}

#page-6 .prow:last-child {
  border-bottom: 0;
}

#page-6 .prow .av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

#page-6 .prow .av.ghost {
  background: none;
  border: 1.5px dashed var(--border);
  color: var(--ink3);
}

#page-6 .prow .mid {
  flex: 1;
  min-width: 0;
}

#page-6 .prow .mid .nm {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

#page-6 .prow .mid b {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

#page-6 .prow .mid u {
  text-decoration: none;
  font-size: 11.5px;
  color: var(--ink3);
}

#page-6 .prow .mid span {
  display: block;
  font-size: 11.5px;
  color: var(--ink2);
  margin-top: 2px;
}

#page-6 .prow .chev {
  color: rgba(30, 26, 21, .30);
  flex: none;
}

#page-6 .prow.invite .av {
  background: rgba(204, 124, 156, .12);
  color: var(--roseDeep);
}

#page-6 .prow.invite b {
  color: var(--roseDeep);
}

#page-6 .edgecard {
  margin: 24px 24px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(212, 165, 116, .10);
  border: 1px solid rgba(212, 165, 116, .34);
  font-size: 12.5px;
  line-height: 17px;
  color: var(--ink2);
}

/* Page 6 Responsive media queries */
@media (max-width: 1300px) {
  #page-6 .tasks-stage-wrapper {
    height: 580px;
  }
  #page-6 .stage {
    transform: scale(0.64);
  }
}

@media (max-width: 1100px) {
  #page-6 .tasks-stage-wrapper {
    height: 520px;
  }
  #page-6 .stage {
    transform: scale(0.56);
  }
}

@media (max-width: 991px) {
  #page-6 .feature-row-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  #page-6 .tasks-stage-wrapper {
    height: 480px;
  }
  #page-6 .stage {
    transform: scale(0.50);
  }
}

@media (max-width: 767px) {
  #page-6 .feature-row-inner {
    grid-template-columns: 1fr;
    width: 100%;
    overflow: visible;
    gap: 28px;
  }
  #page-6 .feature-text-col {
    order: 1;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  #page-6 .feature-visual-col {
    order: 2;
    width: 100%;
    overflow: visible;
    display: flex;
    justify-content: center;
  }
  #page-6 .tasks-stage-wrapper {
    width: 100%;
    max-width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    margin: 0 auto;
  }
  #page-6 .stage {
    transform: scale(0.68);
    transform-origin: top center;
  }
}

@media (max-width: 440px) {
  #page-6 .tasks-stage-wrapper {
    height: 570px;
  }
  #page-6 .stage {
    transform: scale(0.64);
    transform-origin: top center;
  }
}

@media (max-width: 375px) {
  #page-6 .tasks-stage-wrapper {
    height: 530px;
  }
  #page-6 .stage {
    transform: scale(0.60);
    transform-origin: top center;
  }
}

/* ============================================================
   PAGE 7: FEATURE 5 — LUMI CHAT (Muse.ai 1:1 Parity)
   ============================================================ */
#page-7 {
  --ink: #1E1A15;
  --ink2: #5C544A;
  --ink3: #8C8478;
  --border: #E8E2D6;
  --divider: #EFE9DE;
  --surface: #FFFFFF;
  --cream: #FDFAF6;
  --recessed: #F5F1EA;
  --atmTop: #FFFBF5;
  --floor: #F6EFE3;
  --cardBot: #FFFCF7;
  --gold: #D4A574;
  --goldBright: #E6B989;
  --goldWarm: #B87A3A;
  --goldDeep: #B08A3E;
  --sleep: #6B7FB3;
  --sleepTint: #EEF1FA;
  --bath: #7AB3B3;
  --bathTint: #E2EFEF;
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --disp: "Comfortaa", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

#page-7 .feature-visual-col {
  order: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#page-7 .feature-text-col {
  order: 2;
}

#page-7 .chat-stage-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 860px;
}

#page-7 .stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 401px;
  height: 860px;
  transform: scale(0.86);
  transform-origin: center center;
  transition: transform 0.3s ease;
}

#page-7 .phone {
  position: relative;
  width: 401px;
  height: 860px;
  border-radius: 56px;
  padding: 4px;
  flex: none;
  background: #0B0B0C;
  box-shadow: 0 40px 80px rgba(40, 36, 30, 0.30), 0 0 0 1px rgba(0, 0, 0, 0.16);
}

#page-7 .screen {
  position: relative;
  width: 393px;
  height: 852px;
  border-radius: 52px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
}

#page-7 .notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 124px;
  height: 34px;
  border-radius: 20px;
  background: #000;
  z-index: 60;
}

#page-7 .sb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

#page-7 .sb .r {
  display: flex;
  align-items: center;
  gap: 6px;
}

#page-7 .sb svg {
  display: block;
}

#page-7 .ring {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 80;
  width: 0;
  height: 0;
  pointer-events: none;
}

#page-7 .ring i {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(30, 26, 21, 0.38);
  opacity: 0;
}

#page-7 .ring.go i {
  animation: p7rip 0.58s ease-out;
}

#page-7 .ring.light i {
  border-color: rgba(255, 255, 255, 0.8);
}

@keyframes p7rip {
  from { opacity: 0.75; transform: scale(0.55); }
  to { opacity: 0; transform: scale(2.3); }
}

#page-7 .room {
  position: absolute;
  inset: 0;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#page-7 .atm {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--atmTop) 0%, var(--cream) 50%, var(--floor) 100%);
}

#page-7 .bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform;
}

#page-7 .bloom.b1 {
  width: 300px;
  height: 300px;
  left: -39px;
  top: -70px;
  background: radial-gradient(circle, rgba(230, 185, 137, 0.50) 0%, rgba(230, 185, 137, 0) 70%);
  animation: p7drift1 16s ease-in-out infinite alternate;
}

#page-7 .bloom.b2 {
  width: 260px;
  height: 260px;
  left: 192px;
  top: 30px;
  background: radial-gradient(circle, rgba(244, 206, 170, 0.42) 0%, rgba(244, 206, 170, 0) 70%);
  animation: p7drift2 19s ease-in-out infinite alternate;
}

#page-7 .bloom.b3 {
  width: 240px;
  height: 240px;
  left: 61px;
  top: 160px;
  background: radial-gradient(circle, rgba(255, 232, 200, 0.40) 0%, rgba(255, 232, 200, 0) 70%);
  animation: p7drift3 22s ease-in-out infinite alternate;
}

@keyframes p7drift1 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(30px, 24px) scale(1.12); }
}

@keyframes p7drift2 {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-26px, 30px) scale(1.15); }
}

@keyframes p7drift3 {
  from { transform: translate(0, 0) scale(1.05); }
  to { transform: translate(20px, -26px) scale(0.92); }
}

#page-7 .room > * {
  position: relative;
  z-index: 1;
}

#page-7 .chdr {
  display: flex;
  align-items: center;
  padding: 6px 16px 10px;
}

#page-7 .chdr .sp {
  flex: 1;
}

#page-7 .chdr .grp {
  display: flex;
  gap: 7px;
}

#page-7 .hbtn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink2);
  cursor: pointer;
}

#page-7 .body {
  position: relative;
  flex: 1;
  overflow: hidden;
}

#page-7 .tscroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 0 20px 10px;
  transition: transform 0.95s cubic-bezier(0.25, 0.8, 0.25, 1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0px, transparent 15px, rgba(0, 0, 0, 0.5) 50px, #000 95px);
  mask-image: linear-gradient(180deg, transparent 0px, transparent 15px, rgba(0, 0, 0, 0.5) 50px, #000 95px);
}

#page-7 .fade {
  display: none;
}

#page-7 .lumiwrap {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 8;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translateY(202px) scale(1);
  transition: transform 0.62s cubic-bezier(0.28, 0.9, 0.3, 1);
}

#page-7 .lumiwrap canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

#page-7 .corona,
#page-7 .halo {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

#page-7 .corona {
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: conic-gradient(rgba(230, 185, 137, 0) 0deg, rgba(230, 185, 137, 0.18) 30deg, rgba(230, 185, 137, 0) 60deg,
    rgba(230, 185, 137, 0.14) 130deg, rgba(230, 185, 137, 0) 170deg, rgba(230, 185, 137, 0.16) 250deg,
    rgba(230, 185, 137, 0) 300deg, rgba(230, 185, 137, 0) 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 40%, #000 62%, transparent 100%);
  mask-image: radial-gradient(circle, transparent 40%, #000 62%, transparent 100%);
  animation: p7spin 26s linear infinite;
}

@keyframes p7spin {
  to { transform: rotate(360deg); }
}

#page-7 .halo {
  width: 172px;
  height: 160px;
  margin: -80px 0 0 -86px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(230, 185, 137, 0.30) 0%, rgba(212, 165, 116, 0.12) 46%, rgba(212, 165, 116, 0) 70%);
  animation: p7halobr 4.6s ease-in-out infinite alternate;
}

@keyframes p7halobr {
  from { transform: scale(0.92); opacity: 0.72; }
  to { transform: scale(1.1); opacity: 1; }
}

#page-7 .lumiwrap.compact .corona,
#page-7 .lumiwrap.compact .halo {
  opacity: 0;
}

#page-7 .heroname {
  text-align: center;
  font-family: var(--disp);
  font-weight: 300;
  font-size: 34px;
  letter-spacing: -0.6px;
  color: var(--ink);
  text-shadow: 0 0 15px rgba(230, 185, 137, 0.55);
  padding-top: 14px;
}

#page-7 .safety {
  text-align: center;
  font-family: var(--disp);
  font-size: 15px;
  color: var(--ink2);
  padding-top: 7px;
  min-height: 22px;
  transition: opacity 0.45s ease;
}

#page-7 .hero {
  padding: 8px 0 22px;
  transition: opacity 0.3s ease;
}

#page-7 .herobox {
  position: relative;
  height: 172px;
}

#page-7 .hero.gone,
#page-7 .starters.gone {
  display: none;
}

#page-7 .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--ink3);
  padding-left: 4px;
}

#page-7 .chips {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 11px;
  padding-bottom: 16px;
}

#page-7 .chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--cardBot));
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 14px rgba(40, 36, 30, 0.06);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#page-7 .chip:active {
  transform: scale(0.98);
}

#page-7 .chip i {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
}

#page-7 .chip b {
  flex: 1;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}

#page-7 .starters {
  transition: opacity 0.3s ease;
}

#page-7 .turn {
  margin-bottom: 16px;
}

#page-7 .pwrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

#page-7 .pbub {
  margin-left: 56px;
  border-radius: 20px 20px 6px 20px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(212, 165, 116, 0.20), rgba(212, 165, 116, 0.13));
  border: 1px solid rgba(212, 165, 116, 0.42);
  box-shadow: 0 5px 10px rgba(184, 122, 58, 0.16);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.45;
  animation: p7msgIn 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes p7msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

#page-7 .dots {
  display: inline-flex;
  gap: 7px;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(212, 165, 116, 0.22);
  box-shadow: 0 4px 10px rgba(212, 165, 116, 0.10);
  animation: p7msgIn 0.3s ease both;
}

#page-7 .dots s {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  text-decoration: none;
  background: linear-gradient(180deg, var(--goldBright), var(--gold));
  animation: p7dot 0.55s ease-in-out infinite alternate;
}

#page-7 .dots s:nth-child(2) { animation-delay: 0.18s; }
#page-7 .dots s:nth-child(3) { animation-delay: 0.36s; }

@keyframes p7dot {
  from { transform: translateY(2.5px) scale(0.72); opacity: 0.42; }
  to { transform: translateY(-3.5px) scale(1.12); opacity: 1; }
}

#page-7 .acard {
  position: relative;
  border-radius: 24px;
  padding: 19px 20px 17px;
  background: linear-gradient(180deg, var(--surface), var(--cardBot));
  border: 1px solid rgba(212, 165, 116, 0.20);
  box-shadow: 0 12px 20px rgba(184, 122, 58, 0.14);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#page-7 .acard:before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(230, 185, 137, 0), rgba(230, 185, 137, 0.85), rgba(230, 185, 137, 0));
}

#page-7 .acard .blk {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}

#page-7 .acard.rev .blk {
  opacity: 1;
  transform: none;
}

#page-7 .acard h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  padding-top: 2px;
}

#page-7 .acard p {
  font-size: 15.5px;
  color: var(--ink2);
  line-height: 1.45;
}

#page-7 .acard p em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

#page-7 .acard ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#page-7 .acard li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

#page-7 .acard li span {
  flex: 1;
  font-size: 15.5px;
  color: var(--ink2);
  line-height: 1.35;
}

#page-7 .acard li:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  margin-top: 6px;
  box-shadow: 0 0 4px rgba(212, 165, 116, 0.7);
}

#page-7 .acard .note {
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

#page-7 .acard .note hr {
  border: 0;
  height: 1px;
  background: var(--divider);
}

#page-7 .acard .note span {
  font-size: 14.5px;
  color: var(--ink2);
  line-height: 1.4;
}

#page-7 .rec {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 16px;
  margin-top: 1px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

#page-7 .rec:active {
  transform: scale(0.98);
}

#page-7 .rec .ic {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  flex: none;
  display: grid;
  place-items: center;
}

#page-7 .rec .mid {
  flex: 1;
  min-width: 0;
}

#page-7 .rec .mid b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

#page-7 .rec .mid span {
  display: block;
  font-size: 12px;
  color: var(--ink3);
  margin-top: 2px;
}

#page-7 .gicon {
  color: var(--goldWarm);
  vertical-align: -2px;
  margin: 0 1px;
}

#page-7 .dock {
  padding: 10px 14px 12px;
  background: linear-gradient(180deg, rgba(246, 239, 227, 0) 0%, var(--floor) 50%);
}

#page-7 .pill {
  border-radius: 28px;
  background: linear-gradient(180deg, var(--surface), var(--cardBot));
  border: 1px solid rgba(212, 165, 116, 0.22);
  box-shadow: 0 8px 16px rgba(184, 122, 58, 0.18);
  position: relative;
  overflow: hidden;
}

#page-7 .pill .txt {
  padding: 12px 16px 0;
  min-height: 36px;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.4;
}

#page-7 .pill .txt.ph {
  color: var(--ink3);
}

#page-7 .pill .txt .car {
  display: inline-block;
  width: 1.5px;
  height: 17px;
  background: var(--goldWarm);
  vertical-align: -3px;
  margin-left: 1px;
  animation: p7blink 1s step-end infinite;
}

@keyframes p7blink {
  50% { opacity: 0; }
}

#page-7 .pill .row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  position: relative;
  z-index: 2;
}

#page-7 .cbtn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--recessed);
  color: var(--ink2);
  cursor: pointer;
}

#page-7 .cbtn.go {
  background: var(--ink);
  color: var(--surface);
  transition: opacity 0.3s ease;
}

#page-7 .cbtn.go.dim {
  opacity: 0.35;
}

#page-7 .pill .sp {
  flex: 1;
}

#page-7 .lap {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow: hidden;
  z-index: 1;
}

#page-7 .lap.on {
  opacity: 1;
}

#page-7 .lap i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  background: conic-gradient(rgba(212, 165, 116, 0) 0deg, rgba(212, 165, 116, 0) 310deg, rgba(212, 165, 116, 0.05) 326deg,
    rgba(184, 122, 58, 0.30) 343deg, rgba(230, 185, 137, 0.55) 352deg, rgba(212, 165, 116, 0) 360deg);
  animation: p7spin 2.6s linear infinite;
}

#page-7 .lap u {
  position: absolute;
  inset: 1.2px;
  border-radius: 27px;
  background: linear-gradient(180deg, var(--surface), var(--cardBot));
}

#page-7 .levels {
  flex: 1;
  height: 42px;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
}

#page-7 .hint {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink3);
  padding-top: 9px;
  min-height: 20px;
  transition: opacity 0.3s ease;
}

#page-7 .spin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(184, 122, 58, 0.25);
  border-top-color: var(--goldWarm);
  animation: p7spin 0.8s linear infinite;
  margin-right: 3px;
  flex: none;
}

#page-7 .veil {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(30, 26, 21, 0.18);
  opacity: 0;
  transition: opacity 0.38s ease;
  pointer-events: none;
}

#page-7 .veil.on {
  opacity: 1;
  pointer-events: auto;
}

#page-7 .hsheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 34px;
  z-index: 41;
  background: var(--cream);
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -12px 30px rgba(30, 26, 21, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.46s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#page-7 .hsheet.on {
  transform: translateY(0);
}

#page-7 .grab {
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: #DCD5C8;
  margin: 9px auto 0;
  flex: none;
}

#page-7 .hsheet h2 {
  font-family: var(--disp);
  font-weight: 300;
  font-size: 27px;
  letter-spacing: -0.5px;
  color: var(--ink);
  padding: 20px 22px 2px;
  line-height: 1.18;
}

#page-7 .hsheet .cnt {
  font-family: var(--disp);
  font-size: 13.5px;
  color: var(--ink2);
  padding: 0 22px;
}

#page-7 .srch {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 22px 4px;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--recessed);
  border: 1px solid var(--border);
  color: var(--ink3);
  font-size: 14.5px;
}

#page-7 .hlist {
  flex: 1;
  overflow: hidden;
  position: relative;
}

#page-7 .hinner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding-bottom: 20px;
  transition: transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#page-7 .glab {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--ink3);
  padding: 14px 22px 3px;
}

#page-7 .crow {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 4px 22px;
  margin: 4px 0;
  cursor: pointer;
  animation: p7rowIn 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes p7rowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

#page-7 .crow .spine {
  width: 4px;
  min-height: 38px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--border);
  flex: none;
}

#page-7 .crow.act .spine {
  background: var(--gold);
}

#page-7 .crow .mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#page-7 .crow .mid b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

#page-7 .crow .mid .sn {
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#page-7 .crow .mid .dt {
  font-family: var(--disp);
  font-size: 11.5px;
  color: var(--ink3);
}

#page-7 .crow .mid .by {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink2);
}

#page-7 .crow .open {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: var(--goldDeep);
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(212, 165, 116, 0.16);
  flex: none;
  margin-top: 2px;
}

#page-7 .mcard {
  margin: 10px 22px;
  padding: 16px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 14px rgba(184, 122, 58, 0.12);
}

#page-7 .mcard .hd {
  display: flex;
  align-items: center;
  gap: 9px;
}

#page-7 .mcard .hd s {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  text-decoration: none;
  flex: none;
  box-shadow: 0 0 5px rgba(230, 185, 137, 0.9);
}

#page-7 .mcard .hd h3 {
  font-family: var(--disp);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
}

#page-7 .mcard .sub {
  font-size: 12px;
  color: var(--ink3);
  line-height: 1.45;
  padding-top: 5px;
}

#page-7 .mrows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 13px;
}

#page-7 .mrow {
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--recessed);
  border: 1px solid var(--border);
  animation: p7rowIn 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

#page-7 .mrow.note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.4;
}

#page-7 .mrow.note:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  margin-top: 6px;
}

#page-7 .mrow.fact {
  display: flex;
  align-items: center;
  gap: 10px;
}

#page-7 .mrow.fact .k {
  font-size: 12.5px;
  color: var(--ink2);
}

#page-7 .mrow.fact .sp {
  flex: 1;
}

#page-7 .mrow.fact .v {
  font-family: var(--disp);
  font-size: 14.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

#page-7 .mrow.fact .cf {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  padding: 3px 6px;
  border-radius: 999px;
  flex: none;
}

#page-7 .cf.high {
  color: #3F6B52;
  background: #EAF3ED;
}

#page-7 .cf.med {
  color: #8B6A3F;
  background: #F9F1DF;
}

#page-7 .mshow {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  background: none;
  border: 0;
  font-family: var(--sans);
  cursor: pointer;
}

#page-7 .mclear {
  margin-top: 13px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  animation: p7rowIn 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (max-width: 960px) {
  #page-7 .stage {
    transform: scale(0.80);
  }
}

@media (max-width: 768px) {
  #page-7.landing-feature-row {
    padding: 64px 24px;
  }
  #page-7 .feature-row-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  #page-7 .feature-text-col {
    order: 1;
    text-align: center;
  }
  #page-7 .feature-visual-col {
    order: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
  }
  #page-7 .chat-stage-wrapper {
    min-height: 720px;
    height: 720px;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0 auto;
  }
  #page-7 .stage {
    transform: scale(0.78);
    transform-origin: top center;
    margin: 0 auto;
  }
}

@media (max-width: 440px) {
  #page-7 .chat-stage-wrapper {
    min-height: 660px;
    height: 660px;
  }
  #page-7 .stage {
    transform: scale(0.72);
    transform-origin: top center;
    margin: 0 auto;
  }
}

@media (max-width: 375px) {
  #page-7 .chat-stage-wrapper {
    min-height: 610px;
    height: 610px;
  }
  #page-7 .stage {
    transform: scale(0.66);
    transform-origin: top center;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-7 .bloom,
  #page-7 .corona,
  #page-7 .halo,
  #page-7 .lap i,
  #page-7 .dots s,
  #page-7 .spin {
    animation: none !important;
  }
}

/* ============================================================
   PAGE 8: SOUNDS, VAULT, MILESTONES & MORE (Showcase)
   ============================================================ */
#page-8 {
  position: relative;
  width: 100%;
  padding: 96px 24px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --ink:#1E1A15; --ink2:#5C544A; --ink3:#8C8478;
  --border:#E8E2D6; --surface:#FFFFFF; --cream:#FDFAF6; --recessed:#F5F1EA;
  --gold:#D4A574; --goldBright:#E6B989; --goldWarm:#B87A3A;
  --soundGlyph:#3A2C0A;
  --white:#9AA7B8; --pink:#C78A9E; --brown:#B58A5E; --rain:#7BB3C7;
  --ocean:#6FA8A4; --fan:#8093C2; --womb:#D08F7E; --heart:#C9787C; --shush:#9B8AB8;
  --sage:#6FA083; --vaultDeep:#4E7D60; --terra:#B95B45; --info:#5A8AB3;
  --medicine:#8B7BB3; --stone:#8C8478; --meals:#E89B5A;
  --aur:#8B7BB3; --aurDeep:#6C5F96; --aurTint:#F0EDF8;
  --sageTint:#EAF3ED; --rose:#CC7C9C; --roseDeep:#B25E86; --roseTint:#F9EDF3;
  --sans:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --disp:"Comfortaa",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --hand:"Caveat",ui-rounded,Georgia,serif;
}

#page-8 .showcase-header {
  max-width: 840px;
  margin: 0 auto 54px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#page-8 .feature-hero-title {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 16px 0;
  font-family: var(--font-sans);
}

#page-8 .feature-headline {
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  text-wrap: balance;
}

#page-8 .feature-description {
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0;
  max-width: 700px;
  text-pretty: true;
}

#page-8 .stage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 20px;
}

#page-8 {
  --s: .74;
}

#page-8 .showcase-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  max-width: 1200px;
}

#page-8 .showcase-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(401px * var(--s));
}

#page-8 .showcase-col-header {
  width: 100%;
  text-align: center;
  margin-bottom: 22px;
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#page-8 .showcase-col-title {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  line-height: 1.25;
}

#page-8 .showcase-col-desc {
  font-size: 14.5px;
  line-height: 21px;
  font-weight: 400;
  color: var(--text-secondary);
  margin: 0;
  text-wrap: pretty;
}

#page-8 .slot {
  position: relative;
  width: calc(401px * var(--s));
  height: calc(860px * var(--s));
  flex: none;
}

#page-8 .phone {
  position: absolute;
  left: 0;
  top: 0;
  width: 401px;
  height: 860px;
  border-radius: 56px;
  padding: 4px;
  background: #0B0B0C;
  box-shadow: 0 34px 66px rgba(40,36,30,.28), 0 0 0 1px rgba(0,0,0,.16);
  transform: scale(var(--s));
  transform-origin: top left;
}

#page-8 .screen {
  position: relative;
  width: 393px;
  height: 852px;
  border-radius: 52px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream);
}

#page-8 .notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 124px;
  height: 34px;
  border-radius: 20px;
  background: #000;
  z-index: 60;
}

#page-8 .sb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

#page-8 .sb .r {
  display: flex;
  align-items: center;
  gap: 6px;
}

#page-8 .sb svg {
  display: block;
}

#page-8 .ring {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 80;
  width: 0;
  height: 0;
  pointer-events: none;
}

#page-8 .ring i {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(30,26,21,.38);
  opacity: 0;
}

#page-8 .ring.go i {
  animation: p8rip .58s ease-out;
}

#page-8 .ring.light i {
  border-color: rgba(255,255,255,.85);
}

@keyframes p8rip {
  from { opacity: .75; transform: scale(.55); }
  to { opacity: 0; transform: scale(2.3); }
}

#page-8 .room {
  position: absolute;
  inset: 0;
  padding-top: 54px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#page-8 .room > * {
  position: relative;
  z-index: 1;
}

#page-8 .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#page-8 .scroll {
  flex: 1;
  overflow: hidden;
  position: relative;
}

#page-8 .scroll .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transition: transform .9s cubic-bezier(.25,.8,.25,1);
}

/* Responsive scale breakpoints for showcase grid */
@media (max-width: 1240px) {
  #page-8 {
    --s: .62;
  }
  #page-8 .showcase-grid {
    gap: 22px;
  }
  #page-8 .showcase-col-header {
    min-height: 104px;
  }
}

@media (max-width: 1020px) {
  #page-8 {
    --s: .52;
  }
  #page-8 .showcase-grid {
    gap: 16px;
  }
  #page-8 .showcase-col-header {
    min-height: 120px;
  }
  #page-8 .showcase-col-title {
    font-size: 18px;
  }
  #page-8 .showcase-col-desc {
    font-size: 13px;
    line-height: 19px;
  }
}

@media (max-width: 860px) {
  #page-8 {
    --s: .76;
    padding: 72px 0 88px;
    overflow-x: hidden;
  }
  #page-8 .showcase-header {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 28px;
  }
  #page-8 .feature-hero-title {
    font-size: clamp(23px, 5.8vw, 29px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    text-align: center;
  }
  #page-8 .feature-headline {
    font-size: clamp(30px, 8.2vw, 38px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    max-width: min(92vw, 420px);
    margin: 0 auto 16px;
    text-align: center;
    text-wrap: balance;
  }
  /* Page 8 Top Screen Progress Indicator */
  .showcase-top-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 22px;
    width: 100%;
    max-width: 320px;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .showcase-progress-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
  }
  .showcase-progress-seg {
    flex: 1;
    height: 5px;
    background: rgba(120, 125, 140, 0.22);
    border: none;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color 0.28s ease, transform 0.2s ease;
  }
  .showcase-progress-seg.active {
    background: #6FA083;
    transform: scaleY(1.2);
  }
  .showcase-counter {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #558769;
    font-variant-numeric: tabular-nums;
    background: rgba(111, 160, 131, 0.12);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
  }
  /* Per-screen progress pill on top of each mockup column */
  .screen-progress-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 10px;
    padding: 4px 12px;
    background: rgba(111, 160, 131, 0.09);
    border: 1px solid rgba(111, 160, 131, 0.2);
    border-radius: 999px;
  }
  .screen-progress-count {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #558769;
  }
  .screen-progress-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .screen-progress-dots i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(111, 160, 131, 0.25);
    transition: all 0.2s ease;
  }
  .screen-progress-dots i.active {
    width: 14px;
    border-radius: 4px;
    background: #558769;
  }
  #page-8 .stage {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
    display: block;
  }
  #page-8 .stage::-webkit-scrollbar {
    display: none;
  }
  #page-8 .showcase-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: max-content !important;
    margin: 0 !important;
    padding: 0 calc((100vw - min(330px, 86vw)) / 2) !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }
  #page-8 .showcase-col {
    flex: 0 0 min(330px, 86vw) !important;
    width: min(330px, 86vw) !important;
    max-width: min(330px, 86vw) !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #page-8 .showcase-col-header {
    min-height: 84px;
    margin-bottom: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  #page-8 .showcase-col-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 6px;
  }
  #page-8 .showcase-col-desc {
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    max-width: 310px;
    margin: 0 auto;
    color: #9A9EAB;
  }
  #page-8 .slot {
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
}

@media (min-width: 861px) {
  .showcase-top-indicator,
  .screen-progress-pill {
    display: none !important;
  }
}

@media (max-width: 440px) {
  #page-8 {
    --s: .72;
  }
  #page-8 .showcase-col {
    flex: 0 0 min(315px, 86vw) !important;
    width: min(315px, 86vw) !important;
    max-width: min(315px, 86vw) !important;
  }
  #page-8 .showcase-grid {
    padding: 0 calc((100vw - min(315px, 86vw)) / 2) !important;
  }
}

@media (max-width: 375px) {
  #page-8 {
    --s: .68;
  }
  #page-8 .showcase-col {
    flex: 0 0 min(295px, 86vw) !important;
    width: min(295px, 86vw) !important;
    max-width: min(295px, 86vw) !important;
  }
  #page-8 .showcase-grid {
    padding: 0 calc((100vw - min(295px, 86vw)) / 2) !important;
  }
}

/* ================= SOUNDS STYLES ================= */
#page-8 .s-bg {
  background:
    radial-gradient(circle 300px at 50% 26%, rgba(123,179,199,.07) 0%, rgba(123,179,199,0) 100%),
    radial-gradient(circle 360px at 50% -2%, rgba(230,185,137,.30) 0%, rgba(230,185,137,0) 100%),
    #FDFAF6;
}
#page-8 .s-hdr {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 0;
}
#page-8 .s-hdr .eyebrow {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.6px;
  color: var(--goldWarm);
}
#page-8 .s-circ {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.66);
  border: 1px solid var(--border);
  color: var(--ink2);
}
#page-8 .s-tabs {
  display: flex;
  gap: 4px;
  margin: 10px 22px 0;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  border: 1px solid var(--border);
}
#page-8 .s-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
}
#page-8 .s-tab.on {
  background: linear-gradient(180deg, var(--goldBright), var(--gold));
  color: var(--soundGlyph);
}
#page-8 .s-stage {
  height: 241px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-8 .vessel {
  position: relative;
  width: 218px;
  height: 218px;
  border-radius: 50%;
  transition: box-shadow .6s ease;
  box-shadow: 0 9px 18px rgba(0,0,0,.24);
  cursor: pointer;
}
#page-8 .vessel.playing {
  box-shadow: 0 0 28px rgba(123,179,199,.5);
}
#page-8 .vessel .disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.92) 0%, rgba(245,241,234,.55) 100%);
  border: 1px solid rgba(30,26,21,.14);
}
#page-8 .vessel canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 218px;
  height: 218px;
}
#page-8 .vessel .glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--soundGlyph);
  z-index: 3;
  transition: color .3s ease;
}
#page-8 .vessel .glyph.sub {
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
}
#page-8 .s-now {
  text-align: center;
  padding: 10px 22px 0;
}
#page-8 .s-now b {
  display: block;
  font-family: var(--disp);
  font-weight: 300;
  font-size: 26px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-8 .s-now span {
  display: block;
  font-size: 12.5px;
  color: var(--ink2);
  margin-top: 5px;
}
#page-8 .glass {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(40,36,30,.06);
  backdrop-filter: blur(8px);
}
#page-8 .s-slider {
  margin: 18px 22px 0;
  padding: 5px 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
}
#page-8 .s-slider .track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(30,26,21,.12);
  position: relative;
}
#page-8 .s-slider .track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--goldWarm);
  transition: width .5s ease;
}
#page-8 .s-slider .track u {
  position: absolute;
  top: 50%;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.24);
  transition: left .5s ease;
}
#page-8 .s-lab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 28px 22px 0;
}
#page-8 .s-lab b {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--ink3);
}
#page-8 .s-lab span {
  font-size: 11px;
  color: var(--ink3);
}
#page-8 .s-timer {
  margin: 12px 22px 0;
  padding: 13px 16px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
#page-8 .s-timer .val {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--goldWarm);
  font-variant-numeric: tabular-nums;
}
#page-8 .s-timer .sp {
  flex: 1;
}
#page-8 .s-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 16px 0;
}
#page-8 .s-tile {
  min-height: 92px;
  border-radius: 18px;
  padding: 15px 6px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  position: relative;
  transition: background .35s ease, border-color .35s ease;
  cursor: pointer;
}
#page-8 .s-tile i {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
#page-8 .s-tile b {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink2);
  text-align: center;
  line-height: 1.2;
  transition: color .35s ease;
}
#page-8 .s-tile.on b {
  color: var(--ink);
}
#page-8 .s-tile .badge {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  animation: p8pop .3s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes p8pop {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: none; }
}

/* ================= VAULT STYLES ================= */
#page-8 .v-bg {
  background: #FDFAF6;
}
#page-8 .v-hdr {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 22px;
}
#page-8 .v-hdr .eyebrow {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  color: var(--vaultDeep);
}
#page-8 .v-circ {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,.66);
  border: 1px solid var(--border);
  color: var(--ink2);
}
#page-8 .v-lab {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--ink3);
  padding: 0 22px;
}
#page-8 .v-pins {
  display: flex;
  gap: 10px;
  padding: 10px 22px 0;
  overflow: hidden;
}
#page-8 .v-pin {
  flex: none;
  width: 88px;
}
#page-8 .v-pin .thumb {
  position: relative;
  width: 88px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--recessed);
  border: 1px solid var(--border);
}
#page-8 .v-pin .thumb .cap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
}
#page-8 .v-pin .thumb .star {
  position: absolute;
  top: 6px;
  right: 6px;
  color: var(--vaultDeep);
}
#page-8 .v-pin span {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink2);
  line-height: 1.25;
}
#page-8 .v-em {
  margin: 18px 22px 0;
  padding: 14px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, #FFFFFF, rgba(185,91,69,.03));
  border: 1px solid var(--border);
}
#page-8 .v-em .ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(185,91,69,.12);
  color: var(--terra);
}
#page-8 .v-em .mid {
  flex: 1;
  min-width: 0;
}
#page-8 .v-em .rowb {
  display: flex;
  align-items: center;
  gap: 8px;
}
#page-8 .v-em .blood {
  font-family: var(--disp);
  font-size: 13px;
  font-weight: 600;
  color: var(--terra);
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(185,91,69,.10);
}
#page-8 .v-em .al {
  font-size: 12px;
  color: var(--ink2);
}
#page-8 .v-em .ped {
  display: block;
  font-size: 11.5px;
  color: var(--ink3);
  margin-top: 3px;
}
#page-8 .v-em .call {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--sage), var(--vaultDeep));
  box-shadow: 0 4px 6px rgba(111,160,131,.25);
  cursor: pointer;
}
#page-8 .v-search {
  margin: 12px 22px 0;
  padding: 11px 14px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--recessed);
  border: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--ink3);
}
#page-8 .v-cats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 22px 0;
}
#page-8 .v-cat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 3px 6px rgba(0,0,0,.04);
  transition: transform .3s ease;
  cursor: pointer;
}
#page-8 .v-cat:hover {
  transform: translateY(-1px);
}
#page-8 .v-cat .ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
}
#page-8 .v-cat .mid {
  flex: 1;
  min-width: 0;
}
#page-8 .v-cat .mid b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
#page-8 .v-cat .mid span {
  display: block;
  font-size: 12px;
  color: var(--ink3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-8 .v-cat .n {
  font-family: var(--disp);
  font-weight: 300;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}
#page-8 .v-add {
  padding: 20px 22px 14px;
  background: linear-gradient(180deg, rgba(253,250,246,0), #FDFAF6 42%);
}
#page-8 .v-add .cta {
  height: 50px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--sage);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 10px 14px rgba(111,160,131,.3);
  cursor: pointer;
}
#page-8 .v-veil {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(30,26,21,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .36s ease;
}
#page-8 .v-veil.on {
  opacity: 1;
  pointer-events: auto;
}
#page-8 .v-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 60px;
  z-index: 41;
  background: #FDFAF6;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -12px 30px rgba(30,26,21,.16);
  padding: 16px 22px 0;
  transform: translateY(100%);
  transition: transform .44s cubic-bezier(.25,.8,.25,1);
  overflow: hidden;
}
#page-8 .v-sheet.on {
  transform: translateY(0);
}
#page-8 .v-sheet .grab {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 0 auto 16px;
  cursor: pointer;
}
#page-8 .v-sheet h3 {
  font-family: var(--disp);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
}
#page-8 .v-sheet .sub {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink3);
  margin-top: 4px;
}
#page-8 .v-docs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
#page-8 .v-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
  animation: p8rowIn .38s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes p8rowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
#page-8 .v-doc .ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
}
#page-8 .v-doc .mid {
  flex: 1;
  min-width: 0;
}
#page-8 .v-doc .mid b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page-8 .v-doc .mid span {
  display: block;
  font-size: 12px;
  color: var(--ink2);
  margin-top: 2px;
}
#page-8 .v-doc .dt {
  font-size: 12.5px;
  color: var(--ink2);
  flex: none;
}
#page-8 .v-doc .star {
  color: var(--vaultDeep);
  flex: none;
}

/* ================= MILESTONES STYLES ================= */
#page-8 .m-bg {
  background: #FDFAF6;
}
#page-8 .m-nav {
  display: flex;
  align-items: center;
  padding: 8px 22px 0;
}
#page-8 .m-nav .sp {
  flex: 1;
}
#page-8 .m-circ {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.66);
  border: 1px solid var(--border);
  color: var(--ink2);
}
#page-8 .m-toggle {
  display: flex;
  margin: 8px 22px 0;
  padding: 4px;
  border-radius: 999px;
  position: relative;
  background: var(--recessed);
  border: 1px solid var(--border);
}
#page-8 .m-toggle .pillbg {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(108,95,150,.16);
  transition: transform .34s cubic-bezier(.3,.8,.3,1);
}
#page-8 .m-toggle b {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink3);
  position: relative;
  z-index: 1;
  transition: color .3s ease;
  cursor: pointer;
}
#page-8 .m-toggle b.on {
  color: var(--aurDeep);
}
#page-8 .m-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px 0;
}
#page-8 .m-head b {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--ink3);
}
#page-8 .m-head .sp {
  flex: 1;
}
#page-8 .m-dots {
  display: flex;
  gap: 7px;
}
#page-8 .m-dots s {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  text-decoration: none;
  border: 1.5px solid var(--border);
  transition: background .4s ease, border-color .4s ease, transform .4s ease;
}
#page-8 .m-deck {
  position: relative;
  margin: 14px 22px 0;
  min-height: 172px;
}
#page-8 .m-ghost {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 19px;
  background: #fff;
  border: 1px solid var(--border);
}
#page-8 .m-card {
  position: relative;
  border-radius: 19px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 12px 14px rgba(30,26,21,.08);
  padding: 26px 22px 20px;
  min-height: 172px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background .4s ease, border-color .4s ease;
}
#page-8 .m-card.saved {
  background: var(--sageTint);
  border-color: rgba(111,160,131,.5);
}
#page-8 .m-card .bloom {
  position: absolute;
  right: -76px;
  top: -96px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
}
#page-8 .m-card h4 {
  position: relative;
  font-family: var(--disp);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -.4px;
  color: var(--ink);
  line-height: 1.25;
  padding-right: 20px;
}
#page-8 .m-card .sp {
  flex: 1;
  min-height: 22px;
}
#page-8 .m-card .acts {
  position: relative;
  display: flex;
  gap: 9px;
}
#page-8 .m-card .acts .pri {
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--aurDeep);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 7px rgba(108,95,150,.3);
  cursor: pointer;
}
#page-8 .m-card .acts .sec {
  padding: 11px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#page-8 .m-card .flash {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--sage);
  font-size: 13px;
  font-weight: 700;
}
#page-8 .m-tile {
  margin: 14px 22px 0;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--border);
}
#page-8 .m-tile .th {
  display: flex;
  align-items: center;
  gap: 10px;
}
#page-8 .m-tile .th b {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  color: var(--ink3);
}
#page-8 .m-tile .th .sp {
  flex: 1;
}
#page-8 .m-tile .th u {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--aurDeep);
  text-decoration: none;
  cursor: pointer;
}
#page-8 .m-book {
  margin-top: 4px;
}
#page-8 .m-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  animation: p8rowIn .42s cubic-bezier(.2,.7,.2,1) both;
}
#page-8 .m-row + .m-row {
  border-top: 1px solid rgba(232,226,214,.6);
}
#page-8 .m-row .ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
}
#page-8 .m-row .mid {
  flex: 1;
  min-width: 0;
}
#page-8 .m-row .mid b {
  display: block;
  font-family: var(--disp);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.25;
}
#page-8 .m-row .mid span {
  display: block;
  font-size: 12px;
  color: var(--ink3);
  margin-top: 3px;
}
#page-8 .m-row .mid em {
  display: block;
  font-family: var(--hand);
  font-style: normal;
  font-size: 18px;
  color: var(--ink2);
  margin-top: 2px;
}
#page-8 .m-keep {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink3);
  padding-top: 10px;
}
#page-8 .m-add {
  margin: 14px 22px 0;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
#page-8 .m-add .bloom {
  position: absolute;
  left: -66px;
  bottom: -96px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204,124,156,.16) 0%, rgba(204,124,156,0) 70%);
}
#page-8 .m-add .plus {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--roseTint);
  border: 1px solid rgba(204,124,156,.28);
  color: var(--roseDeep);
}
#page-8 .m-add .mid {
  position: relative;
}
#page-8 .m-add .mid b {
  display: block;
  font-family: var(--disp);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -.3px;
  color: var(--ink);
}
#page-8 .m-add .mid span {
  display: block;
  font-size: 13px;
  color: var(--ink3);
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #page-8 * {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Contextual Medical Disclaimers
   ========================================================================== */
.feature-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8A8F9A;
  max-width: 520px;
}
.feature-disclaimer svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.7;
}

/* ==========================================================================
   Official Apple App Store Badge
   ========================================================================== */
.btn-appstore-download {
  width: 100%;
  height: 54px;
  border-radius: 12px;
  background: #000000;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.14s ease, border-color 0.15s ease, filter 0.15s ease;
  user-select: none;
  padding: 0 16px;
}
.btn-appstore-download:hover {
  filter: brightness(1.15);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-appstore-download:active {
  transform: scale(0.985);
}
.btn-appstore-download .apple-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex-shrink: 0;
}
.btn-appstore-download .badge-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
}
.btn-appstore-download .badge-sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2px;
  opacity: 0.85;
  text-align: center;
}
.btn-appstore-download .badge-main {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-align: center;
}

/* ==========================================================================
   Comprehensive Site Footer
   ========================================================================== */
.landing-footer {
  background: #07090E;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 64px 24px 40px;
  color: #A0A5B5;
  font-size: 14px;
  position: relative;
  z-index: 10;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.footer-top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand-logo {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  transition: opacity 0.2s ease;
}
.footer-brand-logo:hover {
  opacity: 0.88;
}
.brand-logo-glyph-footer {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: inline-block;
}
.footer-brand-tagline {
  font-size: 14px;
  line-height: 1.6;
  color: #8A8F9A;
  max-width: 340px;
  margin: 0 0 20px;
}
.footer-coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 18px 0 14px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  color: #FFFFFF;
  text-decoration: none;
  transition: transform 0.14s ease, border-color 0.15s ease, filter 0.15s ease;
  user-select: none;
}
.footer-coming-soon-badge:hover {
  filter: brightness(1.15);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.footer-coming-soon-badge .apple-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex-shrink: 0;
}
.footer-coming-soon-badge .badge-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.15;
}
.footer-coming-soon-badge .badge-sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2px;
  opacity: 0.85;
  text-align: center;
}
.footer-coming-soon-badge .badge-main {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-align: center;
}
.footer-nav-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #FFFFFF;
  margin: 0 0 16px;
}
.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav-list li {
  margin-bottom: 10px;
}
.footer-nav-list a {
  color: #8A8F9A;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-nav-list a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}
.footer-disclaimer-box {
  display: flex;
  gap: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 32px;
}
.footer-disclaimer-icon {
  flex-shrink: 0;
  color: #B08A3E;
  margin-top: 2px;
}
.footer-disclaimer-text {
  font-size: 12.5px;
  line-height: 1.6;
  color: #7A7F8E;
  margin: 0;
}
.footer-disclaimer-text strong {
  color: #A0A5B5;
}
.footer-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: #626775;
}
.footer-copyright {
  margin: 0;
  max-width: 620px;
  line-height: 1.5;
}
.footer-legal-quicklinks {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-legal-quicklinks a {
  color: #8A8F9A;
  text-decoration: none;
}
.footer-legal-quicklinks a:hover {
  color: #FFFFFF;
}
.footer-legal-quicklinks .sep {
  color: #4A4F5E;
}

@media (max-width: 860px) {
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand-col {
    grid-column: span 2;
  }
}
@media (max-width: 540px) {
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-brand-col {
    grid-column: span 1;
  }
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}