/* ============================================================
   YUNI — Liquid Glass Design System
   ============================================================ */

:root {
  --bg-primary: #05040f;
  --text-primary: #f5f5f7;
  --text-secondary: #86868b;
  --text-tertiary: #8e8e93;
  --accent-blue: #4685FF;
  --gradient-start: #667eea;
  --gradient-end: #e85d9b;
  --phase-menstruation: #C46B6B;
  --phase-follicular: #5AA882;
  --phase-ovulation: #FFD700;
  --phase-luteal: #8B6FB8;
  --phase-pms: #FFA500;
  --scroll-grad-a: rgba(139, 92, 246, 0.17);
  --scroll-grad-b: rgba(232, 93, 155, 0.13);
  --scroll-grad-c: rgba(70, 133, 255, 0.11);
  --scroll-grad-d: rgba(90, 168, 130, 0.07);

  /* Liquid Glass tokens */
  --glass-bg: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-top: rgba(255, 255, 255, 0.20);
  --glass-blur: blur(24px) saturate(180%);
  --glass-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);

  --section-padding: clamp(80px, 12vh, 160px);
  --content-max: 1080px;
  --content-narrow: 720px;

  /* dedicated body-prose tone — punchier than --text-secondary, used for article paragraphs */
  --text-body: #c7c7cd;
}

/* ============================================================
   Reset
   ============================================================ */

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

/* ============================================================
   Base
   ============================================================ */

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Atmospheric background — persistent gradient mesh */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 60% at 12% 6%, var(--scroll-grad-a) 0%, transparent 65%),
    radial-gradient(ellipse 52% 70% at 88% 20%, var(--scroll-grad-b) 0%, transparent 65%),
    radial-gradient(ellipse 80% 45% at 50% 88%, var(--scroll-grad-c) 0%, transparent 65%),
    radial-gradient(ellipse 38% 50% at 72% 58%, var(--scroll-grad-d) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  transition: background 0.18s linear;
}

.phase-wind {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.56;
  mix-blend-mode: screen;
}

main,
.footer {
  position: relative;
  z-index: 1;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   Nav — Apple-style liquid glass with links + download CTA
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.nav--scrolled {
  background: rgba(5, 4, 15, 0.72);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.35);
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(20px, 4vw, 48px);
  height: 52px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
}

.nav-logo img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.nav-wordmark {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* Center links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 5px 14px;
  border-radius: 20px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
}

.nav-link--active {
  color: var(--text-primary);
}

/* Right actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

/* Lang selector (dropdown) */
.lang-selector {
  position: relative;
}

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-trigger:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

.lang-trigger svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.lang-trigger-chevron {
  width: 10px !important;
  height: 10px !important;
  transition: transform 0.2s ease;
}

.lang-selector.open .lang-trigger-chevron {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: rgba(30, 30, 35, 0.92);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.lang-selector.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-align: left;
}

.lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.lang-option.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.lang-option-check {
  width: 14px;
  text-align: center;
  font-size: 11px;
  opacity: 0;
}

.lang-option.active .lang-option-check {
  opacity: 1;
}

/* Mobile lang selector (in mobile menu) */
.nav-mobile-bottom .lang-selector {
  position: relative;
}

.nav-mobile-bottom .lang-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto;
  left: 0;
  right: auto;
  transform: translateY(4px);
}

.nav-mobile-bottom .lang-selector.open .lang-dropdown {
  transform: translateY(0);
}

/* Download CTA */
.nav-download {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity 0.18s ease, transform 0.15s ease;
  box-shadow: 0 2px 12px rgba(232, 93, 155, 0.28);
}

.nav-download:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 5.5px;
}

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  transform-origin: center;
}

.nav--menu-open .nav-hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav--menu-open .nav-hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav--menu-open .nav-hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu — hidden on desktop */
.nav-mobile-menu {
  display: none;
}

/* Mobile menu items */
.nav-mobile-link {
  display: block;
  padding: 13px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.2s ease;
}

.nav-mobile-link--active,
.nav-mobile-link:hover {
  color: var(--text-primary);
}

.nav-mobile-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
}

.nav-mobile-download {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  transition: opacity 0.18s ease;
  box-shadow: 0 2px 12px rgba(232, 93, 155, 0.28);
}

.nav-mobile-download:hover {
  opacity: 0.88;
}

/* ============================================================
   Responsive Nav
   ============================================================ */

@media (max-width: 768px) {
  .nav-inner {
    grid-template-columns: 1fr auto;
    height: 48px;
  }

  .nav-wordmark {
    display: none;
  }

  .nav-links {
    display: none;
  }

  .nav-actions .lang-selector,
  .nav-actions .nav-download {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-mobile-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(5, 4, 15, 0.92);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px clamp(20px, 4vw, 40px) 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }

  .nav--menu-open .nav-mobile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
  }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero::after {
  content: '';
  position: absolute;
  inset: auto 12% 5% 12%;
  height: 22%;
  background: linear-gradient(to bottom, transparent, rgba(5, 4, 15, 0.72));
  pointer-events: none;
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.hero h1 {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(42px, 7.4vw, 82px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 760px;
  margin-bottom: 16px;
}

.hero-sub {
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--text-secondary);
  max-width: 590px;
  margin-bottom: 44px;
  line-height: 1.5;
}

.hero-device {
  position: relative;
  margin-bottom: 48px;
  width: 100%;
  max-width: 960px;
}

.device-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  background: radial-gradient(ellipse,
    rgba(139, 92, 246, 0.45) 0%,
    rgba(232, 93, 155, 0.30) 40%,
    transparent 70%
  );
  opacity: 0.55;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.70; transform: translate(-50%, -50%) scale(1.07); }
}

/* Hero phones — 4 App Store screenshots in iPhone frames */
.hero-phones {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: nowrap;
}

.hero-phone {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  --phone-offset: 0px;
  --hero-parallax-x: 0px;
  --hero-parallax-y: 0px;
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  border-radius: 28px;
  overflow: hidden;
  background: #1c1c1e;
  /* iPhone 17 frame: thin uniform bezel */
  padding: 6px;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.12),
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(139, 92, 246, 0.14);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translate3d(var(--hero-parallax-x), calc(var(--phone-offset) + var(--hero-parallax-y)), 0)
    rotateX(var(--hero-tilt-y))
    rotateY(var(--hero-tilt-x));
  will-change: transform;
}

.hero-phone img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  user-select: none;
  -webkit-user-drag: none;
}

/* No ::before notch — screenshots already have device frames baked in */

/* Staggered heights for visual rhythm */
.hero-phone:nth-child(1) { --phone-offset: 0px; }
.hero-phone:nth-child(2) { --phone-offset: -20px; }
.hero-phone:nth-child(3) { --phone-offset: 8px; }
.hero-phone:nth-child(4) { --phone-offset: -10px; }

.hero-phone:hover {
  transform: translate3d(var(--hero-parallax-x), calc(var(--phone-offset) + var(--hero-parallax-y) - 8px), 0)
    rotateX(var(--hero-tilt-y))
    rotateY(var(--hero-tilt-x))
    scale(1.02);
}

.app-store-badge {
  display: inline-block;
  transition: opacity 0.2s, transform 0.2s;
}

.app-store-badge:hover {
  opacity: 0.82;
  transform: translateY(-2px);
}

.app-store-badge img {
  height: 48px;
}

/* Hero CTA group */
.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hero-web-btn {
  display: none;
  padding: 12px 28px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 24px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: all 0.2s ease;
  cursor: pointer;
}

.hero-web-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
}

html.is-non-ios .hero-web-btn {
  display: inline-block;
}

/* Hero social proof */
.hero-social-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  animation: fadeInUp 0.8s ease-out 1.2s both;
}

.hero-stars {
  color: #FFD700;
  font-size: 14px;
  letter-spacing: 1px;
}

.hero-proof-text {
  font-size: 13px;
  color: var(--text-tertiary);
  letter-spacing: -0.01em;
}

.hero-trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 720px;
  margin-top: 18px;
}

.hero-trust-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.25;
}

/* Sticky mobile download bar */
.sticky-download {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: rgba(5, 4, 15, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  display: none;
}

.sticky-download.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.sticky-download-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 480px;
  margin: 0 auto;
}

.sticky-download-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sticky-download-info img {
  border-radius: 8px;
}

.sticky-download-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.sticky-download-rating {
  font-size: 12px;
  color: #FFD700;
  line-height: 1.3;
}

.sticky-download-rating span {
  color: var(--text-tertiary);
}

.sticky-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  border-radius: 18px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  transition: opacity 0.18s, transform 0.15s;
  box-shadow: 0 2px 12px rgba(232, 93, 155, 0.3);
}

.sticky-download-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

@media (min-width: 769px) {
  .sticky-download { display: none !important; }
}

@media (max-width: 768px) {
  .sticky-download { display: block; }
  .hero-social-proof { flex-direction: column; gap: 4px; }
}

/* Hero entrance animations */

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

.hero h1,
.hero-kicker,
.hero-sub,
.hero-device,
.hero .app-store-badge,
.hero-trust-strip {
  opacity: 0;
}

.hero--visible .hero-kicker  { animation: fadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.04s forwards; }
.hero--visible h1            { animation: fadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards; }
.hero--visible .hero-sub     { animation: fadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards; }
.hero--visible .hero-device  { animation: fadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.48s forwards; }
.hero--visible .app-store-badge { animation: fadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.66s forwards; }
.hero--visible .hero-trust-strip { animation: fadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.78s forwards; }

/* ============================================================
   Content Sections — General
   ============================================================ */

.how-it-works,
.modes,
.showcase,
.everywhere,
.cta,
.faq {
  padding: var(--section-padding) 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ============================================================
   Who is Yuni for? — editorial split
   ============================================================ */

.for-partners {
  padding: var(--section-padding) 24px calc(var(--section-padding) * 0.55);
  max-width: var(--content-max);
  margin: 0 auto;
}

.for-partners-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}

.for-partners-lead {
  position: relative;
  text-align: left;
}

.for-partners-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 22px;
}

.for-partners-label-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--phase-pms) 65%, transparent));
}

.for-partners-headline {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 26px;
}

.for-partners-headline-line {
  display: block;
}

.for-partners-headline-not {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--text-primary) 78%, transparent);
  margin-right: 0.04em;
}

.for-partners-strike {
  position: relative;
  display: inline-block;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--text-primary) 55%, transparent);
  padding: 0 0.08em;
}

.for-partners-strike::before,
.for-partners-strike::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--phase-menstruation) 0%, transparent) 0%,
    color-mix(in srgb, var(--phase-menstruation) 80%, transparent) 18%,
    color-mix(in srgb, var(--phase-pms) 80%, transparent) 82%,
    color-mix(in srgb, var(--phase-pms) 0%, transparent) 100%);
  border-radius: 2px;
  pointer-events: none;
  transform-origin: left center;
  transform: scaleX(0);
  animation: forPartnersStrike 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.for-partners-strike::before {
  top: 52%;
  transform: scaleX(0) rotate(-1.3deg);
  animation-name: forPartnersStrike;
}

.for-partners-strike::after {
  top: 56%;
  opacity: 0.45;
  filter: blur(4px);
  animation-delay: 0.42s;
}

@keyframes forPartnersStrike {
  0%   { transform: scaleX(0) rotate(-1.3deg); }
  100% { transform: scaleX(1) rotate(-1.3deg); }
}

.for-partners-sub {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 460px;
  margin: 0;
}

.for-partners-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.for-partners-checks li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.18);
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              background 0.3s ease;
}

.for-partners-checks li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--phase-menstruation) 70%, transparent),
    color-mix(in srgb, var(--phase-pms) 70%, transparent));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.for-partners-checks li:hover {
  transform: translateY(-2px);
  border-top-color: rgba(255,255,255,0.30);
  background: linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
}

.for-partners-checks li:hover::before {
  opacity: 1;
}

.for-partners-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--phase-follicular) 22%, rgba(255,255,255,0.04));
  color: color-mix(in srgb, var(--phase-follicular) 95%, white);
  border: 1px solid color-mix(in srgb, var(--phase-follicular) 38%, rgba(255,255,255,0.08));
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .for-partners-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .for-partners-headline {
    font-size: clamp(30px, 8vw, 44px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .for-partners-strike::before,
  .for-partners-strike::after {
    animation: none;
    transform: scaleX(1) rotate(-1.3deg);
  }
}

/* ============================================================
   How It Works — Glass Steps
   ============================================================ */

.section-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  text-align: center;
  margin-bottom: 48px;
}

.steps {
  max-width: var(--content-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 26px 32px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.3s ease;
}

/* Specular line */
.step::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
}

.step:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.28);
}

.step-number {
  font-size: 44px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.65;
  font-family: "Instrument Serif", Georgia, serif;
  line-height: 1;
  min-width: 48px;
  text-align: center;
}

.step-text {
  font-size: 20px;
  color: var(--text-primary);
  flex: 1;
}

/* ============================================================
   5 Modes — Liquid Glass Phase Cards
   ============================================================ */

.section-heading {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.section-sub {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 48px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.modes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

/* Liquid Glass base for mode cards */
.mode-card {
  border-radius: 24px;
  padding: 32px 20px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.35s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Specular highlight on top edge */
.mode-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.42) 50%, transparent 100%);
  pointer-events: none;
}

/* Subtle inner radial top glow */
.mode-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,255,255,0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Phase-specific tinted glass backgrounds */
.mode-card[data-phase="menstruation"] {
  background: linear-gradient(150deg,
    rgba(196, 107, 107, 0.20) 0%,
    rgba(196, 107, 107, 0.07) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
  border-color: rgba(196, 107, 107, 0.28);
}

.mode-card[data-phase="follicular"] {
  background: linear-gradient(150deg,
    rgba(90, 168, 130, 0.20) 0%,
    rgba(90, 168, 130, 0.07) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
  border-color: rgba(90, 168, 130, 0.28);
}

.mode-card[data-phase="ovulation"] {
  background: linear-gradient(150deg,
    rgba(255, 215, 0, 0.16) 0%,
    rgba(255, 215, 0, 0.05) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
  border-color: rgba(255, 215, 0, 0.24);
}

.mode-card[data-phase="luteal"] {
  background: linear-gradient(150deg,
    rgba(139, 111, 184, 0.20) 0%,
    rgba(139, 111, 184, 0.07) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
  border-color: rgba(139, 111, 184, 0.28);
}

.mode-card[data-phase="pms"] {
  background: linear-gradient(150deg,
    rgba(255, 165, 0, 0.16) 0%,
    rgba(255, 165, 0, 0.05) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
  border-color: rgba(255, 165, 0, 0.24);
}

/* Hover states — amplify the phase glow */
.mode-card[data-phase="menstruation"]:hover {
  box-shadow: 0 18px 60px rgba(196, 107, 107, 0.38), 0 0 0 1px rgba(196, 107, 107, 0.42);
  transform: translateY(-7px);
  border-color: rgba(196, 107, 107, 0.50);
}

.mode-card[data-phase="follicular"]:hover {
  box-shadow: 0 18px 60px rgba(90, 168, 130, 0.38), 0 0 0 1px rgba(90, 168, 130, 0.42);
  transform: translateY(-7px);
  border-color: rgba(90, 168, 130, 0.50);
}

.mode-card[data-phase="ovulation"]:hover {
  box-shadow: 0 18px 60px rgba(255, 215, 0, 0.32), 0 0 0 1px rgba(255, 215, 0, 0.38);
  transform: translateY(-7px);
  border-color: rgba(255, 215, 0, 0.44);
}

.mode-card[data-phase="luteal"]:hover {
  box-shadow: 0 18px 60px rgba(139, 111, 184, 0.38), 0 0 0 1px rgba(139, 111, 184, 0.42);
  transform: translateY(-7px);
  border-color: rgba(139, 111, 184, 0.50);
}

.mode-card[data-phase="pms"]:hover {
  box-shadow: 0 18px 60px rgba(255, 165, 0, 0.32), 0 0 0 1px rgba(255, 165, 0, 0.38);
  transform: translateY(-7px);
  border-color: rgba(255, 165, 0, 0.44);
}

.mode-emoji {
  font-size: 38px;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 56px;
  height: 56px;
  position: relative;
  z-index: 1;
}

.mode-emoji .lottie-emoji {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.mode-emoji .lottie-emoji svg,
.mode-emoji .lottie-emoji canvas,
.mode-emoji .lottie-emoji img {
  width: 100% !important;
  height: 100% !important;
}

.mode-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

.mode-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* ============================================================
   Interactive Cycle Preview
   ============================================================ */

.cycle-preview {
  padding: var(--section-padding) 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.cycle-preview-copy {
  max-width: var(--content-narrow);
  margin: 0 auto 46px;
}

.cycle-preview-panel {
  --preview-phase-color: var(--phase-pms);
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(420px, 1.18fr);
  gap: clamp(22px, 4vw, 42px);
  align-items: start;
  position: relative;
  padding: clamp(18px, 3vw, 28px);
  min-height: 760px;
  border-radius: 32px;
  background:
    radial-gradient(ellipse 60% 70% at 25% 14%, color-mix(in srgb, var(--preview-phase-color) 20%, transparent), transparent 68%),
    radial-gradient(ellipse 58% 92% at 82% 28%, color-mix(in srgb, var(--preview-phase-color) 18%, transparent), transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-top-color: rgba(255, 255, 255, 0.22);
  box-shadow: var(--glass-shadow);
  overflow: visible;
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.cycle-preview-panel[data-active-phase="menstruation"] { --preview-phase-color: var(--phase-menstruation); }
.cycle-preview-panel[data-active-phase="follicular"] { --preview-phase-color: var(--phase-follicular); }
.cycle-preview-panel[data-active-phase="ovulation"] { --preview-phase-color: var(--phase-ovulation); }
.cycle-preview-panel[data-active-phase="luteal"] { --preview-phase-color: var(--phase-luteal); }
.cycle-preview-panel[data-active-phase="pms"] { --preview-phase-color: var(--phase-pms); }

.cycle-preview-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.08) 42%, transparent 70%),
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.12), transparent 24%);
  pointer-events: none;
}

.preview-device {
  position: sticky;
  top: 86px;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: clamp(12px, 2vw, 24px) 0;
}

.preview-phone {
  position: relative;
  width: min(100%, 310px);
  aspect-ratio: 300 / 650;
  border-radius: 34px;
  padding: 7px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.24), rgba(255,255,255,0.04)),
    rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.58),
    0 0 70px color-mix(in srgb, var(--preview-phase-color) 18%, transparent);
  overflow: hidden;
}

.preview-phone-glow {
  position: absolute;
  inset: -16%;
  background: radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--preview-phase-color) 38%, transparent), transparent 54%);
  opacity: 0.65;
  filter: blur(26px);
  pointer-events: none;
}

.preview-phone-screen {
  position: absolute;
  inset: 7px;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.42s ease, transform 0.42s ease;
}

.preview-phone-screen.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.preview-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 27px;
}

.preview-progress {
  width: min(76%, 240px);
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}

.preview-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(1);
  transform-origin: left;
  background: linear-gradient(90deg, var(--phase-menstruation), var(--phase-follicular), var(--phase-ovulation), var(--phase-luteal), var(--phase-pms));
  transition: transform 0.32s ease;
}

.cycle-preview-panel[data-active-phase="menstruation"] .preview-progress-fill { transform: scaleX(0.2); }
.cycle-preview-panel[data-active-phase="follicular"] .preview-progress-fill { transform: scaleX(0.4); }
.cycle-preview-panel[data-active-phase="ovulation"] .preview-progress-fill { transform: scaleX(0.6); }
.cycle-preview-panel[data-active-phase="luteal"] .preview-progress-fill { transform: scaleX(0.8); }
.cycle-preview-panel[data-active-phase="pms"] .preview-progress-fill { transform: scaleX(1); }

.preview-story {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
}

.preview-phase-buttons {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border-radius: 18px;
  background: rgba(5, 4, 15, 0.32);
  border: 1px solid rgba(255,255,255,0.08);
}

.preview-phase {
  --phase-dot: var(--phase-pms);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 13px;
  background: rgba(5, 4, 15, 0.34);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

.preview-phase[data-phase="menstruation"] { --phase-dot: var(--phase-menstruation); }
.preview-phase[data-phase="follicular"] { --phase-dot: var(--phase-follicular); }
.preview-phase[data-phase="ovulation"] { --phase-dot: var(--phase-ovulation); }
.preview-phase[data-phase="luteal"] { --phase-dot: var(--phase-luteal); }
.preview-phase[data-phase="pms"] { --phase-dot: var(--phase-pms); }

.preview-phase:hover,
.preview-phase.is-active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--phase-dot) 16%, rgba(255,255,255,0.07));
  border-color: color-mix(in srgb, var(--phase-dot) 36%, rgba(255,255,255,0.16));
  transform: translateY(-2px);
}

.preview-phase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--phase-dot);
  box-shadow: 0 0 18px var(--phase-dot);
  flex-shrink: 0;
}

.preview-output {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 430px;
  padding: clamp(26px, 4vw, 46px);
  border-radius: 26px;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, color-mix(in srgb, var(--preview-phase-color) 18%, transparent), transparent 68%),
    rgba(5, 4, 15, 0.56);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.preview-eyebrow {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.preview-title {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.preview-day {
  color: var(--preview-phase-color);
  font-size: 15px;
  font-weight: 650;
  margin-bottom: 24px;
}

.preview-tip {
  max-width: 440px;
  color: var(--text-secondary);
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.45;
  margin-bottom: 22px;
}

.preview-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.preview-action {
  min-height: 118px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
}

.preview-action-label {
  display: block;
  margin-bottom: 8px;
  color: var(--preview-phase-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.preview-action p {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.38;
}

.preview-story-cards {
  display: grid;
  gap: 12px;
}

.preview-story-card {
  display: flex;
  align-items: center;
  min-height: 128px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 750;
  text-align: left;
  transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.preview-story-card:hover,
.preview-story-card.is-active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--preview-phase-color) 13%, rgba(255,255,255,0.055));
  border-color: color-mix(in srgb, var(--preview-phase-color) 35%, rgba(255,255,255,0.10));
  transform: translateX(-4px);
}

.preview-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(232, 93, 155, 0.24);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.preview-cta:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ============================================================
   AI Weekly Report — "what landed for her this week"
   ============================================================ */

.weekly-report {
  padding: var(--section-padding) 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.weekly-report-copy {
  max-width: var(--content-narrow);
  margin: 0 auto 56px;
}

.weekly-report-panel {
  --preview-phase-color: var(--phase-luteal);
  --report-accent: color-mix(in srgb, var(--phase-luteal) 70%, var(--phase-pms));
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
  gap: clamp(24px, 4.5vw, 56px);
  align-items: center;
  position: relative;
  padding: clamp(20px, 3.5vw, 36px);
  border-radius: 32px;
  background:
    radial-gradient(ellipse 60% 70% at 22% 18%, color-mix(in srgb, var(--phase-luteal) 22%, transparent), transparent 68%),
    radial-gradient(ellipse 56% 90% at 84% 30%, color-mix(in srgb, var(--phase-pms) 18%, transparent), transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025));
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-top-color: rgba(255, 255, 255, 0.22);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.weekly-report-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.07) 42%, transparent 70%),
    radial-gradient(circle at 22% 14%, rgba(255,255,255,0.10), transparent 24%);
  pointer-events: none;
}

/* Phone container (reuses .preview-phone tokens) */
.weekly-report-device {
  display: flex;
  justify-content: center;
  z-index: 1;
}

.weekly-report-phone {
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.58),
    0 0 90px color-mix(in srgb, var(--phase-luteal) 22%, transparent);
}

.weekly-report-screen {
  position: absolute;
  inset: 7px;
  border-radius: 27px;
  padding: 22px 20px 24px;
  background:
    radial-gradient(ellipse 110% 60% at 50% 0%, color-mix(in srgb, var(--phase-luteal) 38%, transparent), transparent 62%),
    linear-gradient(180deg, #0c0a1a 0%, #060512 60%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

.weekly-report-screen::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--phase-pms) 18%, transparent), transparent 70%);
  pointer-events: none;
  opacity: 0.7;
}

.weekly-report-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
}

.weekly-report-time {
  letter-spacing: -0.01em;
}

.weekly-report-status-dots {
  display: inline-flex;
  gap: 3px;
}

.weekly-report-status-dots span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

.weekly-report-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--phase-pms) 80%, white 0%);
  position: relative;
  z-index: 2;
}

.weekly-report-spark {
  font-size: 11px;
  color: var(--phase-pms);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--phase-pms) 70%, transparent));
}

.weekly-report-title {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 4px;
  position: relative;
  z-index: 2;
}

.weekly-report-summary {
  position: relative;
  z-index: 2;
  padding: 14px 14px 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.14);
  border-left: 2px solid color-mix(in srgb, var(--phase-luteal) 70%, transparent);
}

.weekly-report-summary p {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  font-style: italic;
  margin: 0;
}

.weekly-report-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.45);
  margin: 6px 0 -2px;
  position: relative;
  z-index: 2;
}

.weekly-report-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.weekly-report-highlights li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
}

.weekly-report-highlights svg {
  margin-top: 3px;
  color: var(--phase-follicular);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--phase-follicular) 60%, transparent));
}

.weekly-report-pattern {
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
  margin: 0;
  position: relative;
  z-index: 2;
}

.weekly-report-try {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--phase-pms) 22%, transparent),
      color-mix(in srgb, var(--phase-luteal) 22%, transparent));
  border: 1px solid color-mix(in srgb, var(--phase-pms) 35%, transparent);
  position: relative;
  z-index: 2;
}

.weekly-report-try-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--phase-pms) 90%, white);
  margin-bottom: 4px;
}

.weekly-report-try p {
  font-size: 13.5px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  font-weight: 500;
}

/* RIGHT column */
.weekly-report-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  z-index: 1;
  position: relative;
}

.weekly-report-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.weekly-report-bullets li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}

.weekly-report-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  flex-shrink: 0;
}

.weekly-report-bullets h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.weekly-report-bullets p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.weekly-report-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.weekly-report-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 12.5px;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}

.weekly-report-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #ebe8ef 100%);
  color: #0a0814;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

.weekly-report-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.weekly-report-cta svg {
  transition: transform 0.2s ease;
}

.weekly-report-cta:hover svg {
  transform: translateX(2px);
}

/* Tablet */
@media (max-width: 960px) {
  .weekly-report-panel {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: clamp(20px, 4vw, 32px);
  }
  .weekly-report-device {
    order: 0;
  }
  .weekly-report-content {
    order: 1;
  }
  .weekly-report-cta {
    align-self: stretch;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .weekly-report {
    padding: var(--section-padding) 16px;
  }
  .weekly-report-phone {
    width: min(100%, 280px);
  }
  .weekly-report-screen {
    padding: 18px 16px 18px;
    gap: 10px;
  }
  .weekly-report-title {
    font-size: 20px;
  }
  .weekly-report-summary p {
    font-size: 14px;
  }
  .weekly-report-bullets li {
    grid-template-columns: 36px 1fr;
    gap: 14px;
  }
  .weekly-report-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .weekly-report-bullets h3 {
    font-size: 16px;
  }
  .weekly-report-bullets p {
    font-size: 14px;
  }
}

/* ============================================================
   Product Showcase
   ============================================================ */

.showcase-caption {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Legacy 2-phone layout (kept for backward compat) */
.showcase-devices {
  display: flex;
  justify-content: center;
  gap: 48px;
  align-items: flex-start;
}

.showcase-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.showcase-phone img {
  max-height: 480px;
  width: auto;
  border-radius: 24px;
  filter:
    drop-shadow(0 24px 64px rgba(0, 0, 0, 0.65))
    drop-shadow(0 0 40px rgba(139, 92, 246, 0.12));
}

.showcase-phone:first-child img {
  transform: perspective(1200px) rotateY(3deg);
}

.showcase-phone:last-child img {
  transform: perspective(1200px) rotateY(-3deg);
}

/* (Showcase gallery moved to hero-phones) */

.showcase-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 18px;
  border-radius: 20px;
}

/* ============================================================
   Everywhere
   ============================================================ */

.everywhere-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  max-width: 800px;
  margin: 0 auto;
}

.everywhere-grid img {
  max-width: 340px;
  height: auto;
  border-radius: 20px;
  filter:
    drop-shadow(0 8px 40px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 30px rgba(139, 92, 246, 0.09));
}

/* ============================================================
   Widgets — phase variety
   ============================================================ */

.widgets-section {
  padding: var(--section-padding) 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
}

.widgets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
}

.widget-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.widget-card picture {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.widget-card img {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  border-radius: 22px;
  filter:
    drop-shadow(0 12px 36px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 28px rgba(139, 92, 246, 0.1));
  transition: transform 0.4s ease;
}

.widget-card:hover img {
  transform: translateY(-4px);
}

.widget-phase-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  position: relative;
  padding-left: 14px;
}

.widget-phase-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--phase-pms);
}

.widget-card[data-phase="menstruation"] .widget-phase-label::before { background: var(--phase-menstruation); }
.widget-card[data-phase="follicular"] .widget-phase-label::before { background: var(--phase-follicular); }
.widget-card[data-phase="ovulation"] .widget-phase-label::before { background: var(--phase-ovulation); }
.widget-card[data-phase="luteal"] .widget-phase-label::before { background: var(--phase-luteal); }

@media (max-width: 900px) {
  .widgets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 540px) {
  .widgets-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 360px;
  }
  .widget-card img {
    max-height: 220px;
  }
}

/* ============================================================
   Stats Banner — Liquid Glass Pill
   ============================================================ */

.stats-banner {
  padding: clamp(40px, 6vh, 80px) 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 36px;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  padding: 36px clamp(32px, 5vw, 64px);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

/* Shimmer line */
.stats-row::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.40), transparent);
}

/* Subtle inner top glow */
.stats-row::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255,255,255,0.05) 0%, transparent 100%);
  pointer-events: none;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}

.stat-value {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.1;
}

.stat-label {
  font-size: 13px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.stat-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.14), transparent);
  position: relative;
  z-index: 1;
}

/* ============================================================
   Reviews — Liquid Glass Cards
   ============================================================ */

.reviews-wrapper {
  width: 100%;
  position: relative;
  overflow: clip;
}

.reviews-wrapper::before {
  content: '';
  position: absolute;
  left: -15%;
  top: 15%;
  width: 55%;
  height: 70%;
  background: radial-gradient(ellipse, rgba(139, 92, 246, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.reviews {
  padding: var(--section-padding) 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
}

.reviews-carousel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.review-card {
  background: linear-gradient(150deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.03) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 20px;
  padding: 28px;
  border: 1px solid var(--glass-border);
  border-top-color: rgba(255,255,255,0.19);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.30);
}

/* Specular highlight */
.review-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
}

.review-card:hover {
  box-shadow: 0 14px 52px rgba(70, 133, 255, 0.16), 0 4px 24px rgba(0,0,0,0.3);
  transform: translateY(-5px);
  border-color: rgba(70, 133, 255, 0.22);
  border-top-color: rgba(255,255,255,0.28);
}

.review-stars {
  color: #FFD700;
  font-size: 15px;
  letter-spacing: 2px;
}

.review-text {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.68;
  flex: 1;
}

.review-author {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.review-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.review-source {
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   Viral on Threads
   ============================================================ */

.viral {
  padding: var(--section-padding) 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.viral-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.viral-number {
  background: linear-gradient(135deg, #FF3040, #FF8080);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}

.viral-number::after {
  content: '';
  position: absolute;
  inset: -0.16em -0.24em;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 48, 64, 0.22), transparent 64%);
  opacity: 0;
  transform: scale(0.82);
  z-index: -1;
}

.viral.is-counted .viral-number::after {
  animation: viralPulse 900ms ease-out 120ms 1;
}

.viral.is-counted .viral-post {
  animation: viralLift 760ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes viralPulse {
  0% { opacity: 0; transform: scale(0.82); }
  38% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.34); }
}

@keyframes viralLift {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-8px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}

/* Viral grid — 6 real Threads embeds, lazy-hydrated as they enter viewport */
.viral-sub {
  font-size: 14px;
  color: var(--text-tertiary);
  margin: -16px 0 32px;
  letter-spacing: 0.01em;
}

.viral-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 4px;
  align-items: start;
}

.viral-post {
  position: relative;
  width: 100%;
  min-height: 380px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.14);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.3s ease;
}

.viral-post:hover {
  transform: translateY(-3px);
  border-top-color: rgba(255,255,255,0.24);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(232, 93, 155, 0.16);
}

/* Skeleton — visible until the live embed hydrates. Doubles as a graceful
   "View on Threads" link if Meta's embed.js is blocked entirely. */
.viral-post-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
  z-index: 1;
}

.viral-post-skeleton::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192 192' fill='%23ffffff'%3E%3Cpath d='M141.537 88.988a66.7 66.7 0 0 0-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.227c8.249.053 14.474 2.452 18.503 7.131 2.932 3.405 4.893 8.111 5.864 14.05-7.314-1.243-15.224-1.625-23.68-1.139-23.82 1.371-39.134 15.27-38.105 34.58.522 9.793 5.4 18.216 13.735 23.715 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.18-6.6 8.46-15.153 9.91-25.93 5.95 3.591 10.36 8.32 12.795 14.005 4.138 9.667 4.379 25.553-8.587 38.508-11.36 11.349-25.012 16.26-45.63 16.412-22.864-.169-40.158-7.5-51.4-21.787C34.974 139.585 30.81 124.111 30.654 96c.156-28.111 4.32-43.585 14.81-56.815C56.706 24.9 73.999 17.567 96.865 17.4c23.034.169 40.628 7.533 52.297 21.886 5.726 7.038 10.043 15.89 12.873 26.221l16.184-4.298c-3.43-12.717-8.835-23.769-16.205-32.834C147.302 9.515 125.082.171 96.92 0h-.115C68.7.171 46.733 9.551 31.5 27.873 17.95 44.179 10.961 66.879 10.728 95.93L10.727 96l.001.07c.233 29.052 7.222 51.751 20.772 68.057 15.233 18.323 37.2 27.702 65.305 27.873h.115c24.983-.173 42.59-6.713 57.1-21.205 18.979-18.96 18.407-42.722 12.151-57.336-4.484-10.479-13.045-18.991-24.633-24.471Zm-43.928 30.957c-10.434.588-21.272-4.098-21.806-14.124-.396-7.44 5.296-15.746 22.443-16.733 1.964-.114 3.891-.169 5.784-.169 6.223 0 12.044.604 17.336 1.764-1.973 24.659-13.56 28.665-23.757 29.262Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.85;
}

.viral-post-skeleton-handle {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.viral-post-skeleton-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
}

.viral-post-skeleton-bars span {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.14) 45%,
    rgba(255,255,255,0.06) 100%);
  background-size: 220% 100%;
  animation: viralSkeletonShimmer 2.4s ease-in-out infinite;
}

.viral-post-skeleton-bars span:nth-child(1) { width: 92%; }
.viral-post-skeleton-bars span:nth-child(2) { width: 78%; animation-delay: 0.15s; }
.viral-post-skeleton-bars span:nth-child(3) { width: 62%; animation-delay: 0.30s; }

.viral-post-skeleton-cta {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  align-self: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.viral-post-skeleton:hover .viral-post-skeleton-cta {
  color: var(--text-secondary);
  border-bottom-color: rgba(255,255,255,0.16);
}

@keyframes viralSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .viral-post-skeleton-bars span { animation: none; }
}

/* Live embed container — replaces the skeleton once hydrated */
.viral-post.is-hydrated .viral-post-skeleton {
  display: none;
}

.viral-post-live {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
  background: transparent;
}

.viral-post-live[hidden] {
  display: none !important;
}

/* Override Meta's inline white styles on the un-hydrated blockquote so it
   matches our dark theme even before embed.js renders the iframe. */
.viral-post-live blockquote.text-post-media {
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  border-radius: 18px !important;
  max-width: none !important;
  min-width: 0 !important;
  width: 100% !important;
  color: var(--text-primary);
}

.viral-post-live blockquote.text-post-media a {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.viral-post-live iframe {
  display: block;
  width: 100% !important;
  border-radius: 18px;
  background: transparent;
}

.viral-stats {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.14);
  border-radius: 24px;
  padding: 14px 32px;
}

.viral-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--text-secondary);
}

.viral-stat strong {
  color: var(--text-primary);
  font-weight: 600;
}

.viral-stat svg {
  flex-shrink: 0;
}

/* ============================================================
   Privacy — Liquid Glass Floating Card
   ============================================================ */

.privacy-wrapper {
  width: 100%;
  padding: var(--section-padding) 24px;
}

.privacy {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  background: linear-gradient(145deg,
    rgba(70, 133, 255, 0.11) 0%,
    rgba(139, 92, 246, 0.09) 45%,
    rgba(255, 255, 255, 0.04) 100%
  );
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,0.11);
  border-top-color: rgba(255,255,255,0.24);
  box-shadow:
    0 20px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.16);
  padding: 60px 48px;
  position: relative;
  overflow: hidden;
}

/* Glass shimmer */
.privacy::before {
  content: '';
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
}

/* Inner glow */
.privacy::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: radial-gradient(ellipse 75% 45% at 50% 0%, rgba(70, 133, 255, 0.08) 0%, transparent 100%);
  pointer-events: none;
}

.privacy-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.privacy-glow {
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--accent-blue) 0%, transparent 70%);
  opacity: 0.22;
  filter: blur(40px);
  animation: pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { opacity: 0.22; }
  50%       { opacity: 0.38; }
}

.privacy-icon {
  font-size: 54px;
  position: relative;
  z-index: 1;
}

.privacy-text {
  font-size: clamp(18px, 3vw, 22px);
  color: var(--text-primary);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

/* ============================================================
   CTA — Liquid Glass Floating Panel
   ============================================================ */

.cta-wrapper {
  position: relative;
  overflow: hidden;
  padding: var(--section-padding) 24px;
}

.cta-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/og-image.png") center / cover no-repeat;
  opacity: 0.07;
  filter: blur(26px) saturate(180%);
  transform: scale(1.15);
  pointer-events: none;
}

.cta-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(139, 92, 246, 0.13) 0%, transparent 70%);
  pointer-events: none;
}

.cta {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 60px 48px;
  background: linear-gradient(145deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.04) 100%
  );
  backdrop-filter: blur(36px) saturate(200%);
  -webkit-backdrop-filter: blur(36px) saturate(200%);
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.12);
  border-top-color: rgba(255,255,255,0.26);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.20);
  overflow: hidden;
}

/* Specular highlight */
.cta::before {
  content: '';
  position: absolute;
  top: 0; left: 22%; right: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.60), transparent);
  pointer-events: none;
}

.cta-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.cta-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  background: radial-gradient(ellipse, var(--gradient-start) 0%, var(--gradient-end) 50%, transparent 70%);
  opacity: 0.30;
  filter: blur(60px);
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}

.cta-icon-wrap img {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  position: relative;
  z-index: 1;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255,255,255,0.12);
}

.cta-tagline {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  margin: 24px 0 32px;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 32px 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.18);
}

.footer-links {
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--text-tertiary);
  font-size: 13px;
  text-decoration: none;
  margin: 0 16px;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--text-secondary);
}

.footer-copy {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* ============================================================
   Scroll reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .phase-wind {
    display: none;
  }
  .hero h1,
  .hero-kicker,
  .hero-sub,
  .hero-device,
  .hero .app-store-badge,
  .hero-trust-strip {
    opacity: 1;
  }
}

/* ============================================================
   FAQ — Glass Accordion
   ============================================================ */

.faq {
  padding: var(--section-padding) 24px;
  max-width: var(--content-narrow);
  margin: 0 auto;
}

.faq .section-heading {
  margin-bottom: 48px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.15);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item[open] {
  border-color: rgba(255,255,255,0.13);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
}

.faq-question {
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  color: var(--text-tertiary);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s;
  flex-shrink: 0;
  margin-left: 16px;
}

.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
  color: var(--accent-blue);
}

.faq-question:hover {
  color: var(--accent-blue);
}

.faq-answer {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.72;
  padding: 0 24px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================
   Blog Cards — Liquid Glass
   ============================================================ */

.blog-card {
  background: linear-gradient(150deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.09);
  border-top-color: rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 32px;
  transition: border-color 0.3s ease,
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* Specular line */
.blog-card::before {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent);
}

.blog-card:hover {
  border-color: rgba(255,255,255,0.17);
  border-top-color: rgba(255,255,255,0.30);
  transform: translateY(-5px);
  box-shadow: 0 14px 50px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
}

.blog-card-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.blog-card-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.3;
}

.blog-card-excerpt {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 24px;
}

.blog-card-read {
  font-size: 14px;
  color: var(--accent-blue);
  font-weight: 500;
}

/* ============================================================
   Responsive — Tablet (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
  .modes-grid {
    grid-template-columns: repeat(5, 240px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }

  .modes-grid::-webkit-scrollbar {
    display: none;
  }

  .mode-card {
    scroll-snap-align: start;
  }


  .everywhere-grid {
    flex-direction: column;
    max-width: 320px;
  }

  .hero-phones {
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 0 max(20px, calc((100vw - 260px) / 2));
    margin: 0 -24px;
  }

  .hero-phones::-webkit-scrollbar { display: none; }

  .hero-phone {
    width: 260px;
    scroll-snap-align: center;
    border-radius: 26px;
    padding: 5px;
  }

  .hero-phone img { border-radius: 21px; }

  .hero-phone:nth-child(1),
  .hero-phone:nth-child(2),
  .hero-phone:nth-child(3),
  .hero-phone:nth-child(4) {
    --phone-offset: 0px;
    --hero-parallax-x: 0px;
    --hero-parallax-y: 0px;
    --hero-tilt-x: 0deg;
    --hero-tilt-y: 0deg;
  }

  .cycle-preview-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .preview-device {
    position: relative;
    top: auto;
    padding: 4px 0 10px;
  }

  .preview-phone {
    width: min(78vw, 300px);
  }

  .preview-phase-buttons {
    display: grid;
    grid-template-columns: repeat(5, minmax(118px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: start;
    padding-bottom: 2px;
  }

  .preview-phase-buttons::-webkit-scrollbar {
    display: none;
  }

  .preview-phase {
    justify-content: center;
    scroll-snap-align: start;
  }

  .preview-phase:hover,
  .preview-phase.is-active {
    transform: translateY(-2px);
  }

  .preview-output {
    min-height: 300px;
  }

  .preview-actions {
    grid-template-columns: 1fr;
  }

  .preview-action {
    min-height: 0;
  }

  .preview-story-cards {
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .preview-story-cards::-webkit-scrollbar {
    display: none;
  }

  .preview-story-card {
    min-height: 84px;
    scroll-snap-align: start;
  }

  .preview-story-card:hover,
  .preview-story-card.is-active {
    transform: translateY(-2px);
  }

  .reviews-carousel {
    grid-template-columns: repeat(6, 280px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    max-width: 100%;
  }

  .reviews-carousel::-webkit-scrollbar {
    display: none;
  }

  .review-card {
    scroll-snap-align: start;
  }

  .stats-row {
    gap: 24px;
    flex-wrap: wrap;
  }

  .stat-divider {
    height: 32px;
  }

  .viral-post {
    min-height: 320px;
  }
  .viral-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .viral-stats {
    gap: 20px;
    padding: 12px 22px;
  }

  .privacy,
  .cta {
    padding: 44px 32px;
    border-radius: 28px;
  }

  .blog-grid,
  .blog-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Responsive — Small mobile (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {
  :root {
    --section-padding: clamp(60px, 10vh, 120px);
  }

  .modes-grid {
    grid-template-columns: repeat(5, 200px);
  }

  .hero {
    padding: 100px 20px 60px;
  }

  .hero-kicker {
    margin-bottom: 14px;
  }

  .hero h1 {
    font-size: clamp(38px, 11vw, 52px);
    max-width: 360px;
  }

  .hero-sub {
    margin-bottom: 28px;
    max-width: 340px;
  }

  .hero-trust-strip {
    gap: 6px;
  }

  .hero-trust-strip span {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
  }

  .hero-device {
    margin-bottom: 32px;
  }

  .hero-phone {
    width: 240px;
    border-radius: 24px;
    padding: 5px;
  }

  .hero-phone img { border-radius: 19px; }

  .step {
    padding: 20px 22px;
  }

  .step-number {
    font-size: 36px;
  }

  .step-text {
    font-size: 17px;
  }

  .reviews-carousel {
    grid-template-columns: repeat(6, 262px);
  }

  .stat-value {
    font-size: 24px;
  }

  .stat-label {
    font-size: 11px;
  }

  .faq-question {
    font-size: 15px;
    padding: 16px 18px;
  }

  .faq-answer {
    padding: 0 18px 18px;
  }

  .privacy,
  .cta {
    padding: 36px 24px;
    border-radius: 24px;
  }

  .privacy-wrapper,
  .cta-wrapper {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cycle-preview {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cycle-preview-panel {
    border-radius: 24px;
    padding: 14px;
  }

  .preview-phase-buttons {
    grid-template-columns: repeat(5, 112px);
  }

  .preview-phase {
    min-height: 42px;
    padding: 9px 11px;
  }

  .preview-output {
    min-height: 280px;
    border-radius: 20px;
    padding: 28px 22px;
  }

  .preview-tip {
    font-size: 17px;
  }

  .preview-phone {
    width: min(82vw, 250px);
    border-radius: 29px;
  }

  .preview-phone-screen,
  .preview-phone-screen img {
    border-radius: 22px;
  }

  .preview-actions {
    gap: 8px;
  }

  .preview-story-card {
    min-height: 76px;
    padding: 16px;
  }
}

/* ============================================================
   Setup fallback
   ============================================================ */

.setup-fallback {
  text-align: center;
  padding: 120px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.setup-fallback h1 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
}

.setup-fallback p {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

/* ============================================================
   Legal pages (Privacy, Terms)
   ============================================================ */

.legal {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 100px 24px 80px;
}

.legal h1 {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.legal-meta {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.legal-meta:last-of-type {
  margin-bottom: 48px;
}

.legal-meta a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-underline-offset: 2px;
}

.legal h2 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.legal h3 {
  font-size: 16px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.legal p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 12px;
}

.legal ul {
  list-style: none;
  padding: 0;
  margin-bottom: 12px;
}

.legal ul li {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  padding-left: 20px;
  position: relative;
}

.legal ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
}

.legal a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: opacity 0.2s;
}

.legal a:hover {
  opacity: 0.8;
}

.legal strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ============================================================
   Blog listing page
   ============================================================ */

.blog-listing {
  padding: 100px 24px 80px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.blog-listing h1 {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.blog-listing-sub {
  text-align: center;
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 64px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Blog listing — mobile (must be after .blog-grid to win cascade) */
@media (max-width: 768px) {
  .blog-listing {
    padding: 88px 20px 60px;
  }

  .blog-listing-sub {
    margin-bottom: 40px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .blog-card {
    padding: 24px;
    border-radius: 16px;
  }

  .blog-card-label {
    font-size: 11px;
    letter-spacing: 0.13em;
    margin-bottom: 8px;
  }

  .blog-card-title {
    font-size: 20px;
    line-height: 1.25;
    margin-bottom: 8px;
  }

  .blog-card-excerpt {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ============================================================
   Blog article page
   ============================================================ */

.article {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 100px 24px 80px;
}

.article-breadcrumb {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 32px;
}

.article-breadcrumb a {
  color: var(--text-tertiary);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.15);
  text-underline-offset: 2px;
}

.article h1 {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* editorial italic gives the meta line a small magazine signal without committing to a serif body */
.article-meta {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.005em;
  color: var(--text-tertiary);
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* tighter vertical rhythm + 1px hairline as a section break, Linear-style */
.article h2 {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  margin-top: 48px;
  margin-bottom: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.article h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

/* 17px body on a tightened measure — was 85ch at 16px, target ~67ch */
.article p {
  font-size: 17px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 680px;
}

/* lists share the same measure as paragraphs to preserve a single column edge */
.article ul, .article ol {
  padding-left: 0;
  margin-bottom: 20px;
  list-style: none;
  max-width: 680px;
}

.article ul li, .article ol li {
  font-size: 17px;
  color: var(--text-body);
  line-height: 1.7;
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
}

/* round bullet at brand-blue — replaces the en-dash, hanging indent tightened */
.article ul li::before {
  content: "•";
  position: absolute;
  left: 6px;
  top: -1px;
  color: var(--accent-blue);
  font-size: 18px;
  line-height: 1.7;
}

.article ol {
  counter-reset: article-counter;
}

.article ol li {
  counter-increment: article-counter;
}

.article ol li::before {
  content: counter(article-counter) ".";
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
  font-weight: 600;
}

.article strong {
  color: var(--text-primary);
  font-weight: 600;
}

.article a {
  color: var(--accent-blue);
  text-decoration: none;
}

.article a:hover {
  opacity: 0.8;
}

.article-cta {
  margin-top: 64px;
  padding: 40px;
  background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 24px;
  text-align: center;
  box-shadow: var(--glass-shadow);
}

.article-cta p {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* CTA + related cards span the full narrow column — undo the prose measure */
.article-cta p,
.article-related p,
.blog-inline-cta p {
  max-width: none;
}

/* lede paragraph — first <p> after the meta line. Lighter weight, larger size, near-primary tone.
   Apple News / Stripe Press use a similar single-paragraph emphasis. */
.article-meta + p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 28px;
  max-width: 680px;
}

/* the first H2 should not carry the hairline — meta line already provides the rule */
.article-meta + p + h2,
.article-meta + h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 8px;
}

/* tighter H1 leading on small viewports keeps long titles legible without crowding ascenders */
@media (max-width: 600px) {
  .article h1 {
    line-height: 1.18;
  }
}

/* ============================================================
   From the Blog — homepage section
   ============================================================ */

.from-blog {
  padding: var(--section-padding) 24px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

@media (max-width: 768px) {
  .blog-preview-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================================================
   What Yuni Does — phase strip + editorial prose + trust pills
   ============================================================ */

.what-yuni-does {
  padding: 0 24px calc(var(--section-padding) * 0.55);
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  justify-items: center;
}

.phase-strip {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  max-width: 980px;
  background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.18);
  border-radius: 22px;
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
}

.phase-strip::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  pointer-events: none;
}

.phase-strip-item {
  --strip-color: var(--phase-pms);
  flex: 1 1 180px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--strip-color) 14%, transparent),
    color-mix(in srgb, var(--strip-color) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--strip-color) 22%, rgba(255,255,255,0.06));
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease,
              border-color 0.3s ease;
}

.phase-strip-item[data-phase="menstruation"] { --strip-color: var(--phase-menstruation); }
.phase-strip-item[data-phase="follicular"]   { --strip-color: var(--phase-follicular); }
.phase-strip-item[data-phase="ovulation"]    { --strip-color: var(--phase-ovulation); }
.phase-strip-item[data-phase="luteal"]       { --strip-color: var(--phase-luteal); }
.phase-strip-item[data-phase="pms"]          { --strip-color: var(--phase-pms); }

.phase-strip-item:hover {
  transform: translateY(-2px);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--strip-color) 22%, transparent),
    color-mix(in srgb, var(--strip-color) 7%, transparent));
  border-color: color-mix(in srgb, var(--strip-color) 42%, rgba(255,255,255,0.10));
}

.phase-strip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--strip-color);
  box-shadow: 0 0 14px color-mix(in srgb, var(--strip-color) 70%, transparent);
  grid-row: 1 / span 2;
  align-self: center;
  flex-shrink: 0;
}

.phase-strip-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1.2;
}

.phase-strip-tip {
  font-size: 12.5px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

@media (max-width: 720px) {
  .phase-strip-item {
    flex: 1 1 calc(50% - 6px);
  }
  .phase-strip-item:last-child {
    flex: 1 1 100%;
  }
}

.what-yuni-does-prose {
  position: relative;
  max-width: 720px;
  padding: 28px 32px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top-color: rgba(255, 255, 255, 0.12);
}

.what-yuni-does-prose::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--phase-menstruation) 75%, transparent),
    color-mix(in srgb, var(--phase-luteal) 75%, transparent),
    color-mix(in srgb, var(--phase-pms) 75%, transparent));
  opacity: 0.65;
}

.section-prose {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0;
  text-align: left;
  letter-spacing: 0.005em;
}

.trust-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.trust-pills li {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.14);
}

/* ============================================================
   Mid-page CTA
   ============================================================ */

.mid-cta {
  text-align: center;
  padding: 24px 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ============================================================
   Compare Teaser — homepage section
   ============================================================ */

.compare-teaser {
  padding: var(--section-padding) 24px;
  max-width: var(--content-narrow);
  margin: 0 auto;
  text-align: center;
}

.compare-teaser-grid {
  margin: 40px auto 0;
  max-width: 520px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

.compare-teaser-row {
  display: grid;
  grid-template-columns: 1fr 100px 100px;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
}

.compare-teaser-row:last-child {
  border-bottom: none;
}

.compare-teaser-row--header {
  background: rgba(255,255,255,0.04);
}

.compare-teaser-feature,
.compare-teaser-others,
.compare-teaser-yuni {
  padding: 14px 16px;
  font-size: 15px;
}

.compare-teaser-feature {
  text-align: left;
  color: var(--text-secondary);
}

.compare-teaser-others {
  text-align: center;
  border-left: 1px solid var(--glass-border);
  font-size: 13px;
  color: var(--text-tertiary);
}

.compare-teaser-yuni {
  text-align: center;
  border-left: 1px solid rgba(102,126,234,0.25);
  background: linear-gradient(135deg, rgba(102,126,234,0.06), rgba(232,93,155,0.06));
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.compare-teaser-row--header .compare-teaser-yuni {
  background: linear-gradient(135deg, rgba(102,126,234,0.14), rgba(232,93,155,0.14));
  font-size: 14px;
  letter-spacing: 0.01em;
}

.ct-yes {
  display: inline-block;
  color: #5AA882;
  font-size: 18px;
  font-weight: 700;
}

.ct-no {
  display: inline-block;
  color: #C46B6B;
  font-size: 16px;
}

.compare-teaser-link {
  display: inline-block;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}

.compare-teaser-link:hover {
  color: var(--text-primary);
}

/* ============================================================
   Language visibility — show only the active language div
   ============================================================ */

.lang-ru, .lang-fr, .lang-es, .lang-de { display: none; }
[data-lang="ru"] .lang-en { display: none; }
[data-lang="ru"] .lang-ru { display: block; }
[data-lang="fr"] .lang-en { display: none; }
[data-lang="fr"] .lang-fr { display: block; }
[data-lang="es"] .lang-en { display: none; }
[data-lang="es"] .lang-es { display: block; }
[data-lang="de"] .lang-en { display: none; }
[data-lang="de"] .lang-de { display: block; }

/* ============================================================
   Web App Section
   ============================================================ */

.web-app-section {
  padding: var(--section-padding) 24px;
  text-align: center;
  position: relative;
  overflow: clip;
}

.web-app-heading {
  font-style: italic;
}

/* Browser showcase container */
.browser-showcase {
  position: relative;
  display: block;
  width: fit-content;
  margin: 52px auto 48px;
}

/* Atmospheric glow behind the frame */
.browser-glow {
  position: absolute;
  inset: -60px;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(90, 168, 130, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: browserGlowPulse 5s ease-in-out infinite;
}

@keyframes browserGlowPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

/* The browser frame */
.browser-frame {
  position: relative;
  z-index: 1;
  width: min(480px, 90vw);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10, 9, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 2px 0 0 rgba(255,255,255,0.08) inset,
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(90, 168, 130, 0.08);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.browser-frame:hover {
  transform: translateY(-6px) scale(1.008);
  box-shadow:
    0 2px 0 0 rgba(255,255,255,0.10) inset,
    0 48px 100px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(90, 168, 130, 0.18),
    0 0 60px rgba(90, 168, 130, 0.12);
}

/* Browser chrome bar */
.browser-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.browser-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #febc2e; }
.browser-dots span:nth-child(3) { background: #28c840; }

.browser-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 5px 10px;
  letter-spacing: 0.01em;
  text-align: left;
}

.browser-url svg {
  opacity: 0.5;
  flex-shrink: 0;
}

/* App content inside browser */
.browser-content {
  padding: 0;
  background: #0d0d14;
  position: relative;
  overflow: hidden;
}

/* ---- Mock Today view ---- */
.mock-app {
  padding: 28px 24px 20px;
  position: relative;
  min-height: 340px;
}

/* Phase atmosphere — ovulation green */
.mock-phase-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 160px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(90, 168, 130, 0.28) 0%, transparent 70%);
  pointer-events: none;
}

.mock-header {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.mock-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.mock-day {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #5AA882;
  background: rgba(90, 168, 130, 0.12);
  border: 1px solid rgba(90, 168, 130, 0.25);
  border-radius: 100px;
  padding: 4px 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.mock-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5AA882;
  flex-shrink: 0;
}

/* Tip card */
.mock-tip-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.17);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
}

.mock-tip-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.mock-tip-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-primary);
  opacity: 0.9;
}

/* Log button */
.mock-log-btn {
  width: 100%;
  background: #5AA882;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  letter-spacing: 0.01em;
}

/* Bottom nav */
.mock-bottom-nav {
  display: flex;
  justify-content: space-around;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 1;
}

.mock-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--text-tertiary);
  opacity: 0.6;
}

.mock-nav-item--active {
  color: #5AA882;
  opacity: 1;
}

.mock-nav-item--active svg {
  fill: #5AA882;
}

/* CTA button */
.web-app-cta {
  display: block;
  width: fit-content;
  margin: 0 auto;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  background: linear-gradient(145deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.24);
  border-radius: 100px;
  padding: 12px 28px;
  backdrop-filter: blur(12px);
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(90,168,130,0.08);
  letter-spacing: 0.01em;
}

.web-app-cta::after {
  content: '→';
  transition: transform 0.2s ease;
}

.web-app-cta:hover {
  background: linear-gradient(145deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.07) 100%);
  border-color: rgba(90, 168, 130, 0.35);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(90,168,130,0.18), 0 0 30px rgba(90,168,130,0.08);
  transform: translateY(-2px);
  color: #5AA882;
}

.web-app-cta:hover::after {
  transform: translateX(4px);
}


/* ============================================================
   Hero web CTA (non-iOS secondary link)
   ============================================================ */

.hero-web-cta {
  display: none; /* shown by JS when non-iOS */
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}

.hero-web-cta:hover {
  color: var(--text-primary);
  opacity: 1;
}

/* ============================================================
   Nav Web App pulse dot
   ============================================================ */

.nav-link--webapp {
  position: relative;
}

.nav-webapp-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5AA882;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
  top: -1px;
  animation: webapp-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes webapp-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* ============================================================
   Floating Web App pill
   ============================================================ */

.floating-web-pill {
  display: none; /* shown by JS after scroll, non-iOS */
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 200;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 14px;
  border-radius: 100px;
  background: linear-gradient(145deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(90,168,130,0.1);
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.floating-web-pill.is-visible {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-web-pill:hover {
  border-color: rgba(90, 168, 130, 0.35);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(90,168,130,0.2), 0 0 24px rgba(90,168,130,0.07);
  color: #5AA882;
}

.floating-web-pill svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.floating-web-pill__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  margin-left: 4px;
  padding: 0;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.floating-web-pill__close:hover {
  background: rgba(255,255,255,0.18);
  color: var(--text-primary);
}

/* Device-aware: non-iOS elements hidden by default */
/* JS adds 'is-non-ios' class to <html> when not on iOS */
.non-ios-only { display: none; }
html.is-non-ios .hero-web-cta { display: inline; }
/* floating pill display is managed entirely by JS */

/* === Reading Progress Bar === */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
}
.reading-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* === Sticky Blog CTA Bar === */
.blog-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.blog-sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.blog-sticky-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
  padding: 12px 16px;
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.08);
}
@supports (padding: env(safe-area-inset-bottom)) {
  .blog-sticky-inner {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}
.blog-sticky-icon {
  border-radius: 8px;
  flex-shrink: 0;
}
.blog-sticky-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.blog-sticky-text strong {
  font-size: 14px;
  color: var(--text-primary);
}
.blog-sticky-text span {
  font-size: 12px;
  color: var(--text-secondary);
}
.blog-sticky-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: #6366f1;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.blog-sticky-btn:hover {
  background: #4f46e5;
}

/* === Related Articles === */
.related-articles {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}
.related-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
}
.related-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.related-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.related-card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
.related-card-title {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.4;
}
.related-card-arrow {
  color: var(--text-tertiary);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-left: 12px;
}
.related-cta {
  margin-top: 20px;
  text-align: center;
}
.related-all {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.related-all:hover {
  color: var(--text-primary);
}

/* Add bottom padding on blog pages so sticky CTA doesn't cover footer */
body:has(.blog-sticky-cta.is-visible) .footer {
  padding-bottom: 80px;
}

/* ============================================================
   Interaction effects (magnetic CTA, glass refraction,
   phone tilt, phase-driven palette, depth stack, cycle wheel)
   ============================================================ */

/* Magnetic CTAs */
[data-magnetic] {
  --magnet-x: 0px;
  --magnet-y: 0px;
  --magnet-rotate: 0deg;
  --magnet-scale: 1;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0)
    rotate(var(--magnet-rotate))
    scale(var(--magnet-scale));
  transition: transform 0.45s cubic-bezier(0.18, 1.2, 0.4, 1);
  will-change: transform;
}
[data-magnetic]:active {
  transition-duration: 0.12s;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  [data-magnetic] {
    transform: none !important;
    transition: none !important;
  }
}

.app-store-badge[data-magnetic]:hover {
  transform: translate3d(var(--magnet-x), calc(var(--magnet-y) - 2px), 0)
    rotate(var(--magnet-rotate))
    scale(var(--magnet-scale));
}

/* Pressable haptic-style click */
.pressable {
  transition: box-shadow 0.18s ease, filter 0.18s ease;
}
.pressable.is-pressed,
.pressable:active {
  filter: brightness(0.96);
}

/* Phone gyroscope tilt — additive on top of hero parallax */
.preview-phone {
  --phone-tilt-x: 0deg;
  --phone-tilt-y: 0deg;
  --phone-shine-x: 50%;
  --phone-shine-y: 0%;
  transform-style: preserve-3d;
  transform: perspective(900px)
    rotateX(var(--phone-tilt-x))
    rotateY(var(--phone-tilt-y));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.preview-phone::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 27px;
  pointer-events: none;
  background: radial-gradient(circle at var(--phone-shine-x) var(--phone-shine-y),
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 22%,
    transparent 48%);
  mix-blend-mode: screen;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .preview-phone {
    transform: none;
  }
  .preview-phone::after {
    opacity: 0;
  }
}

/* Liquid glass refraction */
[data-glass-reactive] {
  --glass-x: 50%;
  --glass-y: 50%;
  position: relative;
}
[data-glass-reactive]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 220px at var(--glass-x) var(--glass-y),
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.05) 35%,
    transparent 65%);
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}
[data-glass-reactive].is-glass-active::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  [data-glass-reactive]::after {
    display: none;
  }
}
/* Keep card content above the refraction layer */
.review-card > *,
.blog-card > *,
.privacy > *,
.cta > * {
  position: relative;
  z-index: 2;
}

/* Phase-based section palette overrides — gently shift mesh gradient
   to match the dominant section. JS sets data-page-phase on <html>. */
html[data-page-phase="menstruation"] {
  --scroll-grad-a: rgba(196, 107, 107, 0.20);
  --scroll-grad-b: rgba(232, 93, 155, 0.14);
  --scroll-grad-c: rgba(255, 165, 0, 0.10);
  --scroll-grad-d: rgba(139, 92, 246, 0.07);
}
html[data-page-phase="follicular"] {
  --scroll-grad-a: rgba(90, 168, 130, 0.18);
  --scroll-grad-b: rgba(70, 133, 255, 0.13);
  --scroll-grad-c: rgba(255, 215, 0, 0.10);
  --scroll-grad-d: rgba(139, 92, 246, 0.07);
}
html[data-page-phase="ovulation"] {
  --scroll-grad-a: rgba(255, 215, 0, 0.16);
  --scroll-grad-b: rgba(255, 165, 0, 0.12);
  --scroll-grad-c: rgba(232, 93, 155, 0.10);
  --scroll-grad-d: rgba(70, 133, 255, 0.07);
}
html[data-page-phase="luteal"] {
  --scroll-grad-a: rgba(139, 111, 184, 0.18);
  --scroll-grad-b: rgba(232, 93, 155, 0.12);
  --scroll-grad-c: rgba(70, 133, 255, 0.09);
  --scroll-grad-d: rgba(196, 107, 107, 0.07);
}
html[data-page-phase="pms"] {
  --scroll-grad-a: rgba(255, 165, 0, 0.18);
  --scroll-grad-b: rgba(232, 93, 155, 0.13);
  --scroll-grad-c: rgba(139, 92, 246, 0.10);
  --scroll-grad-d: rgba(196, 107, 107, 0.07);
}
body::before {
  transition: background 0.6s ease;
}

/* Screenshot depth stack — applies as user scrolls past hero */
.hero {
  --hero-exit-progress: 0;
}
[data-depth-stack] .hero-phone {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.4s ease,
    opacity 0.4s ease;
}
[data-depth-stack] .hero-phone:nth-child(1) {
  transform: translate3d(var(--hero-parallax-x), calc(var(--phone-offset) + var(--hero-parallax-y) + (var(--hero-exit-progress) * 30px)), 0)
    rotateX(var(--hero-tilt-y))
    rotateY(var(--hero-tilt-x))
    scale(calc(1 - var(--hero-exit-progress) * 0.06));
  filter: blur(calc(var(--hero-exit-progress) * 2px));
  opacity: calc(1 - var(--hero-exit-progress) * 0.55);
}
[data-depth-stack] .hero-phone:nth-child(2) {
  transform: translate3d(calc(var(--hero-parallax-x) - var(--hero-exit-progress) * 18px), calc(var(--phone-offset) + var(--hero-parallax-y) + (var(--hero-exit-progress) * 16px)), 0)
    rotateX(var(--hero-tilt-y))
    rotateY(var(--hero-tilt-x))
    scale(calc(1 - var(--hero-exit-progress) * 0.04));
  filter: blur(calc(var(--hero-exit-progress) * 1px));
  opacity: calc(1 - var(--hero-exit-progress) * 0.32);
}
[data-depth-stack] .hero-phone:nth-child(3) {
  transform: translate3d(calc(var(--hero-parallax-x) + var(--hero-exit-progress) * 18px), calc(var(--phone-offset) + var(--hero-parallax-y) + (var(--hero-exit-progress) * 14px)), 0)
    rotateX(var(--hero-tilt-y))
    rotateY(var(--hero-tilt-x))
    scale(calc(1 - var(--hero-exit-progress) * 0.04));
  filter: blur(calc(var(--hero-exit-progress) * 1px));
  opacity: calc(1 - var(--hero-exit-progress) * 0.32);
}
[data-depth-stack] .hero-phone:nth-child(4) {
  transform: translate3d(var(--hero-parallax-x), calc(var(--phone-offset) + var(--hero-parallax-y) + (var(--hero-exit-progress) * 36px)), 0)
    rotateX(var(--hero-tilt-y))
    rotateY(var(--hero-tilt-x))
    scale(calc(1 - var(--hero-exit-progress) * 0.08));
  filter: blur(calc(var(--hero-exit-progress) * 2.4px));
  opacity: calc(1 - var(--hero-exit-progress) * 0.6);
}
@media (prefers-reduced-motion: reduce) {
  [data-depth-stack] .hero-phone {
    transform: translate3d(var(--hero-parallax-x), calc(var(--phone-offset) + var(--hero-parallax-y)), 0) !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* Cycle wheel */
.phase-wheel {
  --wheel-size: clamp(240px, 36vw, 360px);
  --phase-color: var(--phase-menstruation);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 24px;
  margin: 48px auto 0;
  max-width: var(--content-narrow);
  padding: 0 16px;
}
.phase-wheel[data-active-phase="menstruation"] { --phase-color: var(--phase-menstruation); }
.phase-wheel[data-active-phase="follicular"]   { --phase-color: var(--phase-follicular); }
.phase-wheel[data-active-phase="ovulation"]    { --phase-color: var(--phase-ovulation); }
.phase-wheel[data-active-phase="luteal"]       { --phase-color: var(--phase-luteal); }
.phase-wheel[data-active-phase="pms"]          { --phase-color: var(--phase-pms); }

.phase-wheel-stage {
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  display: grid;
  place-items: center;
}
.phase-wheel-disc {
  --wheel-rotation: 0deg;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    conic-gradient(from -90deg,
      var(--phase-menstruation) 0% 20%,
      var(--phase-follicular) 20% 40%,
      var(--phase-ovulation) 40% 60%,
      var(--phase-luteal) 60% 80%,
      var(--phase-pms) 80% 100%);
  filter: saturate(0.8) brightness(0.85);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 60px color-mix(in srgb, var(--phase-color) 30%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 60px rgba(0, 0, 0, 0.3);
  cursor: grab;
  touch-action: none;
  transform: rotate(var(--wheel-rotation));
  transition: filter 0.4s ease, box-shadow 0.4s ease;
}
.phase-wheel.is-dragging .phase-wheel-disc {
  cursor: grabbing;
  filter: saturate(1) brightness(0.95);
}
.phase-wheel-disc::after {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 55%),
    rgba(5, 4, 15, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.phase-wheel-spoke {
  --spoke-angle: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px;
  display: grid;
  place-items: center;
  font-size: 22px;
  border-radius: 50%;
  background: rgba(5, 4, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  cursor: pointer;
  transform: rotate(var(--spoke-angle)) translateY(calc(var(--wheel-size) / -2 + 32px)) rotate(calc(-1 * var(--spoke-angle)));
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  z-index: 2;
  user-select: none;
}
.phase-wheel-spoke:hover {
  background: rgba(255, 255, 255, 0.12);
}
.phase-wheel-spoke.is-active {
  background: color-mix(in srgb, var(--phase-color) 80%, #05040f);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 24px color-mix(in srgb, var(--phase-color) 60%, transparent);
}
.phase-wheel-pin {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 14px;
  height: 22px;
  margin-left: -7px;
  background: var(--phase-color);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  z-index: 3;
  transition: background 0.4s ease;
}
.phase-wheel-readout {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.phase-wheel-emoji {
  font-size: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  line-height: 1;
}
.phase-wheel-emoji-lottie {
  display: block;
  width: 64px;
  height: 64px;
  position: relative;
}
.phase-wheel-emoji-lottie svg,
.phase-wheel-emoji-lottie canvas,
.phase-wheel-emoji-lottie img {
  width: 100% !important;
  height: 100% !important;
}
.phase-wheel-title {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.phase-wheel-hint {
  font-size: 13px;
  color: var(--text-tertiary);
}
@media (max-width: 540px) {
  .phase-wheel-spoke {
    width: 40px;
    height: 40px;
    margin: -20px;
    font-size: 20px;
    transform: rotate(var(--spoke-angle)) translateY(calc(var(--wheel-size) / -2 + 28px)) rotate(calc(-1 * var(--spoke-angle)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .phase-wheel-disc {
    transition: none;
  }
}

/* ============================================================
   Blog engagement — sticky bottom CTA + mid-article inline CTA
   (Liquid Glass styled; injected at runtime by /js/blog-engagement.js)
   ============================================================ */

.blog-sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 24px);
  width: min(calc(100vw - 32px), 720px);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.blog-sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.blog-sticky-cta.is-dismissed {
  opacity: 0;
  transform: translate(-50%, 24px);
  pointer-events: none;
}

.blog-sticky-cta-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 20px;
  background: linear-gradient(145deg, rgba(20, 18, 36, 0.86) 0%, rgba(12, 10, 22, 0.86) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.blog-sticky-cta-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.blog-sticky-cta-title {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.3;
}

.blog-sticky-cta-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.3;
}

.blog-sticky-cta-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  /* Each button is its own stacking context so ghost button sits cleanly
     beside primary, never under its halo. */
  isolation: isolate;
}

.blog-sticky-cta-btn--primary { position: relative; z-index: 2; }
.blog-sticky-cta-btn--ghost   { position: relative; z-index: 1; }

.blog-sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease;
}

.blog-sticky-cta-btn:active {
  transform: scale(0.97);
}

.blog-sticky-cta-btn--primary {
  background: linear-gradient(145deg, #ffffff 0%, #ededf2 100%);
  color: #0d0d12;
  /* Lift primary without horizontal halo bleed onto sibling button */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.blog-sticky-cta-btn--primary:hover {
  background: linear-gradient(145deg, #ffffff 0%, #ffffff 100%);
}

.blog-sticky-cta-btn--ghost {
  color: var(--text-primary);
  /* Solid enough to fully obscure article text behind the bar */
  background: rgba(40, 38, 56, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.blog-sticky-cta-btn--ghost:hover {
  background: rgba(50, 48, 70, 0.92);
  border-color: rgba(255, 255, 255, 0.20);
}

.blog-sticky-cta-dismiss {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease;
}

.blog-sticky-cta-dismiss:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

@media (max-width: 540px) {
  .blog-sticky-cta {
    bottom: 12px;
    width: calc(100vw - 24px);
  }
  .blog-sticky-cta-inner {
    flex-wrap: wrap;
    padding: 12px 12px 12px 16px;
    gap: 12px;
  }
  .blog-sticky-cta-text {
    flex: 1 1 100%;
    text-align: left;
  }
  .blog-sticky-cta-actions {
    flex: 1 1 100%;
    justify-content: stretch;
  }
  .blog-sticky-cta-btn {
    flex: 1 1 auto;
    height: 40px;
    font-size: 14px;
  }
  .blog-sticky-cta-btn--ghost {
    flex: 0 0 auto;
  }
  .blog-sticky-cta-sub {
    display: none;
  }
}

/* Mid-article inline CTA — Liquid Glass card matching .article-cta but tighter. */
.blog-inline-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 36px 0;
  padding: 22px 24px;
  background: linear-gradient(145deg, rgba(70, 133, 255, 0.10) 0%, rgba(232, 93, 155, 0.06) 100%);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.blog-inline-cta-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 60%),
    linear-gradient(145deg, var(--accent-blue) 0%, var(--gradient-end) 100%);
  box-shadow: 0 4px 12px rgba(70, 133, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.blog-inline-cta-text {
  flex: 1 1 auto;
  min-width: 0;
}

.blog-inline-cta-title {
  display: block;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.blog-inline-cta-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 !important;
}

.blog-inline-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  background: linear-gradient(145deg, #ffffff 0%, #eaeaef 100%);
  color: #0d0d12 !important;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 120ms ease;
}

.blog-inline-cta-btn:hover {
  transform: translateY(-1px);
}

.blog-inline-cta-btn:active {
  transform: scale(0.97);
}

@media (max-width: 540px) {
  .blog-inline-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
  }
  .blog-inline-cta-btn {
    width: 100%;
    height: 44px;
  }
}

/* ============================================================
   Blog TOC sidebar + scroll progress bar
   ============================================================ */

/* Top scroll progress bar — 2px, brand gradient, subtle glow. */
.blog-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 70;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.04);
}

.blog-progress-bar-fill {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  box-shadow: 0 0 8px rgba(232, 93, 155, 0.35), 0 0 16px rgba(70, 133, 255, 0.15);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .blog-progress-bar-fill { box-shadow: none; }
}

/* Desktop sidebar — appears at >=1100px, sticky, kept on the left without
   pushing the centred .article. The article keeps its existing
   max-width: 720px / margin: auto layout; the sidebar is positioned
   absolutely-ish via fixed at the same vertical region as the article. */
.blog-toc-sidebar {
  display: none;
}

.blog-toc-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 14px;
  padding-left: 12px;
}

.blog-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-toc-item {
  margin: 0;
  padding: 0;
}

.blog-toc-item--h3 .blog-toc-link {
  padding-left: 24px;
  font-size: 12.5px;
}

.blog-toc-link {
  position: relative;
  display: block;
  padding: 6px 12px 6px 12px;
  font-size: 13px;
  line-height: 1.45;
  /* WCAG AA: lift inactive TOC items above 4.5:1 against #05040f bg (was --text-tertiary #8e8e93 ≈ 3.8:1, now #b0b0b8 ≈ 7.5:1) */
  color: #b0b0b8;
  text-decoration: none;
  border-left: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.blog-toc-link:hover {
  color: var(--text-primary);
}

.blog-toc-link.is-active {
  color: var(--text-primary);
  border-left-color: var(--accent-blue);
}

.blog-toc-link.is-active::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  box-shadow: 0 0 6px rgba(232, 93, 155, 0.6);
}

@media (min-width: 1100px) {
  .blog-toc-sidebar {
    display: block;
    position: fixed;
    top: 96px;
    /* Anchor on the left edge of the centred article (max 720px) with a
       comfortable 32px gutter. Falls back gracefully on narrower viewports. */
    left: max(24px, calc(50vw - 360px - 32px - 220px));
    width: 220px;
    max-height: calc(100vh - 144px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0 12px;
    z-index: 5;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  }

  .blog-toc-sidebar::-webkit-scrollbar { width: 4px; }
  .blog-toc-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
  }

  /* On desktop, hide the inline accordion. */
  .blog-toc-inline { display: none !important; }
}

/* Mobile inline accordion — Liquid Glass card, default-collapsed. */
.blog-toc-inline {
  display: block;
  margin: 0 0 36px;
  padding: 0;
  background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 16px;
  overflow: hidden;
}

.blog-toc-inline[open] {
  padding-bottom: 8px;
}

.blog-toc-inline-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  user-select: none;
}

.blog-toc-inline-summary::-webkit-details-marker { display: none; }
.blog-toc-inline-summary::marker { content: ""; }

.blog-toc-inline-label {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.blog-toc-inline-count {
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 4px;
}

.blog-toc-inline-chevron {
  font-size: 14px;
  color: var(--text-tertiary);
  transition: transform 200ms ease;
}

.blog-toc-inline[open] .blog-toc-inline-chevron {
  transform: rotate(180deg);
}

.blog-toc-list--inline {
  padding: 4px 8px 8px;
}

.blog-toc-list--inline .blog-toc-link {
  padding: 8px 12px;
  font-size: 14px;
}

.blog-toc-list--inline .blog-toc-item--h3 .blog-toc-link {
  padding-left: 28px;
  font-size: 13px;
}

@media (min-width: 1100px) {
  /* Sidebar mode hides the mobile accordion (kept above for specificity). */
}

@media (max-width: 1099px) {
  .blog-toc-sidebar { display: none; }
}

/* ============================================================
   Article confessional — anonymous opt-in partner quotes
   ============================================================ */

.article-confessional {
  position: relative;
  margin: 36px 0;
  padding: 30px 32px 26px;
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      rgba(232, 93, 155, 0.07) 0%,
      rgba(139, 111, 184, 0.05) 45%,
      rgba(70, 133, 255, 0.06) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.article-confessional::before {
  content: "\201C";
  position: absolute;
  top: -22px;
  left: 14px;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 140px;
  line-height: 1;
  color: rgba(232, 93, 155, 0.18);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.article-confessional-quote {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.article-confessional-quote p {
  margin: 0;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.35em;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

.article-confessional-by {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  font-family: -apple-system, "SF Pro Display", BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.85em;
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
}

@media (max-width: 540px) {
  .article-confessional {
    margin: 28px 0;
    padding: 24px 22px 20px;
    border-radius: 14px;
  }
  .article-confessional::before {
    top: -16px;
    left: 10px;
    font-size: 100px;
  }
  .article-confessional-quote p {
    font-size: 1.18em;
    line-height: 1.42;
  }
  .article-confessional-by {
    margin-top: 12px;
    font-size: 0.82em;
  }
}

/* ============================================================
   Cycle widget — interactive in-article phase explorer
   (Linear/Raycast-style segmented track + reveal panel)
   Mounted by /js/cycle-widget.js
   ============================================================ */

.cycle-widget {
  --phase-active: var(--phase-pms);
  margin: 48px 0;
  padding: 28px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--phase-active) 20%, transparent) 0%, transparent 60%),
    linear-gradient(145deg, rgba(20, 18, 36, 0.8) 0%, rgba(12, 10, 22, 0.8) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
  transition: --phase-active 280ms ease;
}

.cycle-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--phase-active) 14%, transparent) 0%, transparent 50%);
  opacity: 0.7;
  transition: opacity 320ms ease;
}

.cycle-widget-heading {
  margin-bottom: 20px;
  position: relative;
}

.cycle-widget-eyebrow {
  display: inline-block;
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--phase-active);
  filter: brightness(1.4) saturate(1.2);
  opacity: 0.95;
  margin-bottom: 8px;
}

.cycle-widget-title {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
}

.cycle-widget-sub {
  font-size: 14px !important;
  color: var(--text-tertiary) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  max-width: 60ch;
}

.cycle-widget-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 22px;
}

.cycle-widget-pill {
  --phase-color: var(--phase-pms);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 10px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-secondary);
  transition: background 180ms ease, border-color 180ms ease, transform 120ms ease, color 180ms ease;
  position: relative;
  overflow: hidden;
}

.cycle-widget-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--phase-color) 22%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.cycle-widget-pill:hover {
  border-color: color-mix(in oklab, var(--phase-color) 35%, rgba(255,255,255,0.10));
  color: var(--text-primary);
  transform: translateY(-1px);
}

.cycle-widget-pill:hover::before {
  opacity: 0.45;
}

.cycle-widget-pill.is-active {
  /* MF-3: amplify active pill — Linear-grade contrast vs sibling pills */
  background: linear-gradient(145deg, color-mix(in oklab, var(--phase-color) 28%, rgba(255,255,255,0.06)) 0%, rgba(255,255,255,0.03) 100%);
  border-color: color-mix(in oklab, var(--phase-color) 80%, rgba(255,255,255,0.10));
  border-width: 1.5px;
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px color-mix(in oklab, var(--phase-color) 38%, transparent),
    0 0 0 4px color-mix(in oklab, var(--phase-color) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.cycle-widget-pill.is-active .cycle-widget-pill-icon {
  filter: drop-shadow(0 0 12px var(--phase-color)) brightness(1.5) saturate(1.2);
}

.cycle-widget-pill.is-active::before {
  opacity: 1;
}

.cycle-widget-pill-icon {
  font-size: 18px;
  line-height: 1;
  color: var(--phase-color);
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--phase-color) 60%, transparent)) brightness(1.3);
  margin-bottom: 4px;
}

.cycle-widget-pill-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: inherit;
}

.cycle-widget-pill-days {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}

.cycle-widget-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
  border-left: 3px solid var(--phase-active);
  transition: border-left-color 280ms ease;
}

.cycle-widget-panel-header {
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.cycle-widget-panel-title {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}

.cycle-widget-panel-sub {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}

.cycle-widget-panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.cycle-widget-section-label {
  display: block;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.cycle-widget-feels {
  font-size: 14.5px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.cycle-widget-helps {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cycle-widget-helps li {
  font-size: 14.5px !important;
  color: var(--text-secondary) !important;
  line-height: 1.55 !important;
  padding: 0 0 6px 16px !important;
  position: relative;
  margin: 0 !important;
}

.cycle-widget-helps li::before {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--phase-active);
  box-shadow: 0 0 6px color-mix(in oklab, var(--phase-active) 60%, transparent);
}

.cycle-widget-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

.cycle-widget-cta-line {
  flex: 1 1 auto;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.cycle-widget-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  background: linear-gradient(145deg, #ffffff 0%, #ebebef 100%);
  color: #0d0d12 !important;
  font-family: "SF Pro Display", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 100ms ease;
}

.cycle-widget-cta-btn:hover { transform: translateY(-1px); }
.cycle-widget-cta-btn:active { transform: scale(0.97); }

@media (max-width: 720px) {
  .cycle-widget { padding: 22px 18px; }
  /* MF-2: at <=720px all 5 pills must fit at once. Drop day-range, tighten pill content */
  .cycle-widget-track {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    overflow: visible;
  }
  .cycle-widget-pill {
    padding: 10px 4px 8px;
    align-items: center;
    text-align: center;
  }
  .cycle-widget-pill-icon { font-size: 16px; margin-bottom: 2px; }
  .cycle-widget-pill-name { font-size: 11px; line-height: 1.2; }
  .cycle-widget-pill-days { display: none; }
  .cycle-widget-panel-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cycle-widget-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cycle-widget-cta-btn {
    width: 100%;
    justify-content: center;
    height: 40px;
  }
}

/* ============================================================
   Blog footer email capture — secondary CTA below .article-cta
   ============================================================ */
.email-capture {
  margin: 20px 0 0; padding: 28px 32px; text-align: center;
  background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-top-color: var(--glass-border-top);
  border-radius: 18px;
}
.email-capture-title {
  font-size: 18px; font-weight: 600; color: var(--text-primary);
  margin: 0 0 6px; letter-spacing: -0.01em;
}
.email-capture-body {
  font-size: 14.5px; color: var(--text-secondary); line-height: 1.5;
  margin: 0 0 18px !important;
}
.email-capture-row { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; }
.email-capture-input {
  flex: 1 1 auto; height: 44px; padding: 0 14px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--glass-border);
  color: var(--text-primary); font: inherit; font-size: 15px; outline: none;
  transition: border-color 140ms ease;
}
.email-capture-input:focus { border-color: var(--accent-blue); }
.email-capture-btn {
  flex-shrink: 0; position: relative; height: 44px; padding: 0 18px;
  border-radius: 10px; border: 0; cursor: pointer;
  background: linear-gradient(145deg, #ffffff 0%, #eaeaef 100%);
  color: #0d0d12; font: inherit; font-size: 14px; font-weight: 600;
  transition: transform 120ms ease, opacity 140ms ease;
}
.email-capture-btn:hover:not(:disabled) { transform: translateY(-1px); }
.email-capture-btn:disabled { opacity: 0.7; cursor: progress; }
.email-capture-spinner {
  display: none; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(13, 13, 18, 0.25); border-top-color: #0d0d12;
  animation: email-capture-spin 700ms linear infinite;
}
.email-capture.is-submitting .email-capture-btn-label { visibility: hidden; }
.email-capture.is-submitting .email-capture-spinner { display: block; }
@keyframes email-capture-spin { to { transform: rotate(360deg); } }
.email-capture-error { margin: 10px 0 0 !important; font-size: 13px; color: #FF8A8A; }
.email-capture-privacy { margin: 12px 0 0 !important; font-size: 12px; color: var(--text-tertiary); }
.email-capture-success { margin: 0 !important; font-size: 15px; color: var(--text-primary); }
/* Honeypot — off-screen but not display:none (bots flag that). */
.email-capture-honeypot {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden; pointer-events: none;
}
@media (max-width: 540px) {
  .email-capture { padding: 22px 20px; }
  .email-capture-row { flex-direction: column; }
  .email-capture-btn { width: 100%; }
}

/* ============================================================
   Landing refinement - Superhuman-inspired product editorial
   ============================================================ */

body.landing-page {
  --color-ink: #292827;
  --color-ink-soft: #3a3532;
  --color-graphite: #66615d;
  --color-muted: #8a837d;
  --color-parchment: #f2f0eb;
  --color-parchment-deep: #e8e3dc;
  --color-bone: #fffdfa;
  --color-fog: #dfdbd4;
  --color-driftwood: #d0c8bf;
  --color-aubergine: #421d24;
  --color-aubergine-deep: #1d1114;
  --color-iris: #714cb6;
  --color-iris-soft: #d4c7ff;
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-graphite);
  --text-tertiary: var(--color-muted);
  --accent-blue: var(--color-iris);
  --gradient-start: var(--color-iris);
  --gradient-end: var(--color-aubergine);
  --glass-bg: var(--color-bone);
  --glass-border: var(--color-fog);
  --glass-border-top: var(--color-fog);
  --glass-shadow: none;
  --glass-blur: none;
  --section-padding: clamp(72px, 10vh, 132px);
  background: var(--color-parchment);
  color: var(--color-ink);
}

body.landing-page::before,
body.landing-page .phase-wind,
body.landing-page .device-glow,
body.landing-page .browser-glow,
body.landing-page .privacy-glow,
body.landing-page .cta-glow,
body.landing-page .reviews-wrapper::before,
body.landing-page .cta-wrapper::before,
body.landing-page .cta-wrapper::after {
  display: none;
}

body.landing-page .nav {
  color: #fffdfa;
}

body.landing-page .nav--scrolled,
body.landing-page .nav--menu-open {
  background: rgba(242, 240, 235, 0.92);
  border-bottom: 1px solid rgba(41, 40, 39, 0.10);
  box-shadow: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.landing-page .nav-wordmark,
body.landing-page .nav-link--active,
body.landing-page .nav-link:hover,
body.landing-page .nav--scrolled .nav-wordmark,
body.landing-page .nav--scrolled .nav-link--active,
body.landing-page .nav--scrolled .nav-link:hover,
body.landing-page .nav--menu-open .nav-wordmark {
  color: currentColor;
}

body.landing-page .nav--scrolled,
body.landing-page .nav--menu-open {
  color: var(--color-ink);
}

body.landing-page .nav-link,
body.landing-page .lang-trigger {
  color: color-mix(in srgb, currentColor 70%, transparent);
}

body.landing-page .nav-link--active,
body.landing-page .nav-link:hover,
body.landing-page .lang-trigger:hover {
  color: currentColor;
}

body.landing-page .nav-link:hover,
body.landing-page .lang-trigger:hover {
  background: rgba(255, 255, 255, 0.10);
}

body.landing-page .nav--scrolled .nav-link:hover,
body.landing-page .nav--scrolled .lang-trigger:hover,
body.landing-page .nav--menu-open .nav-link:hover,
body.landing-page .nav--menu-open .lang-trigger:hover {
  background: rgba(41, 40, 39, 0.06);
}

body.landing-page .lang-trigger {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.landing-page .nav--scrolled .lang-trigger,
body.landing-page .nav--menu-open .lang-trigger {
  background: rgba(255, 253, 250, 0.74);
  border-color: var(--color-fog);
}

body.landing-page .nav-download,
body.landing-page .nav-mobile-download,
body.landing-page .sticky-download-btn,
body.landing-page .preview-cta,
body.landing-page .web-app-cta,
body.landing-page .weekly-report-cta {
  background: var(--color-iris-soft);
  border: 1px solid color-mix(in srgb, var(--color-iris) 24%, var(--color-fog));
  border-radius: 8px;
  box-shadow: none;
  color: #20152f;
}

body.landing-page .nav-download:hover,
body.landing-page .nav-mobile-download:hover,
body.landing-page .sticky-download-btn:hover,
body.landing-page .preview-cta:hover,
body.landing-page .web-app-cta:hover,
body.landing-page .weekly-report-cta:hover {
  opacity: 1;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-iris) 46%, var(--color-fog));
}

body.landing-page .nav-hamburger span {
  background: currentColor;
}

body.landing-page .nav-mobile-menu {
  background: rgba(242, 240, 235, 0.96);
  border-bottom-color: rgba(41, 40, 39, 0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.landing-page .nav-mobile-link {
  color: var(--color-graphite);
  border-bottom-color: rgba(41, 40, 39, 0.10);
}

body.landing-page .nav-mobile-link--active,
body.landing-page .nav-mobile-link:hover {
  color: var(--color-ink);
}

body.landing-page .hero {
  min-height: min(980px, 100svh);
  padding: clamp(96px, 13vh, 140px) 24px clamp(56px, 8vh, 86px);
  background:
    radial-gradient(ellipse 80% 62% at 50% 40%, rgba(113, 76, 182, 0.26), transparent 68%),
    linear-gradient(180deg, var(--color-aubergine) 0%, #2b171b 54%, var(--color-aubergine-deep) 100%);
  color: #fffdfa;
  overflow: hidden;
}

body.landing-page .hero::after {
  inset: auto 0 0;
  height: 26%;
  background: linear-gradient(to bottom, transparent, var(--color-aubergine-deep));
}

body.landing-page .hero-kicker {
  padding: 0;
  margin-bottom: 18px;
  background: transparent;
  border: 0;
  color: rgba(255, 253, 250, 0.70);
  font-size: 12px;
  letter-spacing: 0.20em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.landing-page .hero h1 {
  max-width: 820px;
  font-size: clamp(56px, 8.8vw, 116px);
  line-height: 0.94;
  letter-spacing: -0.028em;
  color: #fffdfa;
  margin-bottom: 18px;
}

body.landing-page .hero-sub {
  max-width: 620px;
  color: rgba(255, 253, 250, 0.72);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.48;
  margin-bottom: clamp(34px, 5vh, 54px);
}

body.landing-page .hero-device {
  max-width: 840px;
  margin-bottom: 38px;
}

body.landing-page .hero-phones {
  gap: clamp(8px, 2vw, 18px);
}

/* iPhone Pro mockup — SVG frame from magicuidesign/magicui (MIT).
   Container holds the screenshot inside a rounded rect at the SVG's screen
   coordinates (21.25/19.25 from top-left, 389.5×843.5 of 433×882). An SVG
   overlay paints the bezel, side buttons, speaker grille and Dynamic
   Island on top, with a mask that punches out the screen so the image
   shows through. */
body.landing-page .hero-phone {
  position: relative;
  display: inline-block;
  width: clamp(158px, 17vw, 214px);
  aspect-ratio: 433 / 882;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  filter:
    drop-shadow(0 28px 50px rgba(0, 0, 0, 0.55))
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.35));
}

/* Reset every leftover pseudo-element from previous mockup iterations */
body.landing-page .hero-phone::before,
body.landing-page .hero-phone::after {
  content: none;
}

body.landing-page .hero-phone .hero-phone__screen {
  position: absolute;
  left: 4.91%;
  top: 2.18%;
  width: 89.95%;
  height: 95.63%;
  border-radius: 14.31% / 6.61%;
  overflow: hidden;
  background: #000;
  z-index: 0;
}

body.landing-page .hero-phone .hero-phone__screen picture {
  display: block;
  width: 100%;
  height: 100%;
}

body.landing-page .hero-phone .hero-phone__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
}

body.landing-page .hero-phone .hero-phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

body.landing-page .hero-phone:nth-child(1) {
  --phone-offset: 16px;
}

body.landing-page .hero-phone:nth-child(2) {
  --phone-offset: -22px;
}

body.landing-page .hero-phone:nth-child(3) {
  --phone-offset: 18px;
}

body.landing-page .hero h1,
body.landing-page .hero-kicker,
body.landing-page .hero-sub,
body.landing-page .hero-device,
body.landing-page .hero .app-store-badge,
body.landing-page .hero-trust-strip {
  opacity: 1;
}

body.landing-page .hero--visible .hero-kicker,
body.landing-page .hero--visible h1,
body.landing-page .hero--visible .hero-sub,
body.landing-page .hero--visible .hero-device,
body.landing-page .hero--visible .app-store-badge,
body.landing-page .hero--visible .hero-trust-strip {
  animation: none;
}

body.landing-page .hero-cta-group {
  flex-direction: row;
  justify-content: center;
  gap: 14px;
}

body.landing-page .hero-web-btn {
  background: #fffdfa;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: var(--color-ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.landing-page .hero-social-proof,
body.landing-page .hero-trust-strip span {
  color: rgba(255, 253, 250, 0.62);
}

body.landing-page .hero-trust-strip span {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: 8px;
}

body.landing-page .sticky-download {
  background: rgba(242, 240, 235, 0.94);
  border-top-color: rgba(41, 40, 39, 0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.landing-page .how-it-works,
body.landing-page .for-partners,
body.landing-page .what-yuni-does,
body.landing-page .compare-teaser,
body.landing-page .modes,
body.landing-page .cycle-preview,
body.landing-page .weekly-report,
body.landing-page .web-app-section,
body.landing-page .everywhere,
body.landing-page .widgets-section,
body.landing-page .stats-banner,
body.landing-page .reviews,
body.landing-page .viral,
body.landing-page .privacy-wrapper,
body.landing-page .cta-wrapper,
body.landing-page .from-blog,
body.landing-page .faq {
  position: relative;
}

body.landing-page .what-yuni-does,
body.landing-page .compare-teaser,
body.landing-page .modes,
body.landing-page .viral,
body.landing-page .from-blog,
body.landing-page .faq {
  --section-padding: clamp(58px, 8vh, 104px);
}

body.landing-page .section-label,
body.landing-page .for-partners-label,
body.landing-page .widget-phase-label,
body.landing-page .review-source,
body.landing-page .blog-card-label,
body.landing-page .preview-eyebrow,
body.landing-page .weekly-report-section-label,
body.landing-page .phase-wheel-hint {
  color: var(--color-muted);
  letter-spacing: 0.14em;
}

body.landing-page .section-heading,
body.landing-page .for-partners-headline,
body.landing-page .preview-title,
body.landing-page .weekly-report-bullets h3,
body.landing-page .cta-tagline,
body.landing-page .showcase-caption,
body.landing-page .viral-heading {
  color: var(--color-ink);
  letter-spacing: -0.028em;
}

body.landing-page .section-sub,
body.landing-page .for-partners-sub,
body.landing-page .section-prose,
body.landing-page .mode-desc,
body.landing-page .preview-tip,
body.landing-page .preview-story-card,
body.landing-page .weekly-report-bullets p,
body.landing-page .review-text,
body.landing-page .blog-card-excerpt,
body.landing-page .faq-answer,
body.landing-page .viral-sub,
body.landing-page .viral-stat,
body.landing-page .hero-proof-text {
  color: var(--color-graphite);
}

body.landing-page .step,
body.landing-page .for-partners-checks li,
body.landing-page .phase-strip,
body.landing-page .phase-strip-item,
body.landing-page .what-yuni-does-prose,
body.landing-page .compare-teaser-grid,
body.landing-page .mode-card,
body.landing-page .cycle-preview-panel,
body.landing-page .preview-output,
body.landing-page .preview-action,
body.landing-page .preview-story-card,
body.landing-page .weekly-report-panel,
body.landing-page .weekly-report-icon,
body.landing-page .weekly-report-trust-pill,
body.landing-page .widget-card,
body.landing-page .stats-row,
body.landing-page .review-card,
body.landing-page .viral-post,
body.landing-page .viral-stats,
body.landing-page .privacy,
body.landing-page .cta,
body.landing-page .faq-item,
body.landing-page .blog-card,
body.landing-page .browser-frame,
body.landing-page .web-app-cta,
body.landing-page .trust-pills li {
  background: var(--color-bone);
  border: 1px solid var(--color-fog);
  border-top-color: var(--color-fog);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.landing-page .step::before,
body.landing-page .mode-card::before,
body.landing-page .mode-card::after,
body.landing-page .cycle-preview-panel::before,
body.landing-page .weekly-report-panel::before,
body.landing-page .stats-row::before,
body.landing-page .stats-row::after,
body.landing-page .review-card::before,
body.landing-page .privacy::before,
body.landing-page .privacy::after,
body.landing-page .cta::before,
body.landing-page .blog-card::before,
body.landing-page .phase-strip::before {
  display: none;
}

body.landing-page .step:hover,
body.landing-page .for-partners-checks li:hover,
body.landing-page .mode-card:hover,
body.landing-page .preview-story-card:hover,
body.landing-page .review-card:hover,
body.landing-page .blog-card:hover,
body.landing-page .browser-frame:hover,
body.landing-page .viral-post:hover {
  border-color: color-mix(in srgb, var(--color-iris) 30%, var(--color-fog));
  box-shadow: none;
}

body.landing-page .step {
  border-radius: 16px;
  padding: 24px 28px;
}

body.landing-page .step-number {
  background: none;
  -webkit-text-fill-color: var(--color-iris);
  color: var(--color-iris);
  opacity: 1;
}

body.landing-page .step-text,
body.landing-page .mode-title,
body.landing-page .phase-strip-label,
body.landing-page .review-name,
body.landing-page .faq-question,
body.landing-page .blog-card-title {
  color: var(--color-ink);
}

body.landing-page .for-partners-headline-not,
body.landing-page .for-partners-strike {
  color: var(--color-ink-soft);
}

body.landing-page .for-partners-strike::before,
body.landing-page .for-partners-strike::after {
  background: var(--color-iris-soft);
}

body.landing-page .for-partners-tick {
  background: var(--color-iris-soft);
  border-color: color-mix(in srgb, var(--color-iris) 18%, var(--color-iris-soft));
  color: #20152f;
}

body.landing-page .phase-strip-item,
body.landing-page .mode-card[data-phase] {
  background: var(--color-bone);
  border-color: var(--color-fog);
}

body.landing-page .phase-strip-dot,
body.landing-page .preview-phase-dot,
body.landing-page .widget-phase-label::before {
  box-shadow: none;
}

body.landing-page .compare-teaser-row {
  border-bottom-color: var(--color-fog);
}

body.landing-page .compare-teaser-row--header,
body.landing-page .compare-teaser-yuni,
body.landing-page .compare-teaser-row--header .compare-teaser-yuni {
  background: color-mix(in srgb, var(--color-iris-soft) 48%, var(--color-bone));
}

body.landing-page .compare-teaser-others,
body.landing-page .compare-teaser-yuni {
  border-left-color: var(--color-fog);
}

body.landing-page .compare-teaser-link,
body.landing-page .blog-card-read,
body.landing-page .faq-question:hover,
body.landing-page .faq-item[open] .faq-question::after,
body.landing-page .web-app-cta::after {
  color: var(--color-iris);
}

body.landing-page .cycle-preview-panel,
body.landing-page .weekly-report-panel {
  border-radius: 24px;
  overflow: hidden;
}

body.landing-page .preview-phone {
  background: #171416;
  border-color: rgba(41, 40, 39, 0.12);
  box-shadow: 0 24px 70px rgba(41, 40, 39, 0.18);
}

body.landing-page .preview-phone-glow,
body.landing-page .preview-phone::after {
  display: none;
}

body.landing-page .preview-progress {
  background: var(--color-driftwood);
}

body.landing-page .preview-progress-fill {
  background: var(--color-iris);
}

body.landing-page .preview-phase-buttons {
  background: color-mix(in srgb, var(--color-driftwood) 44%, var(--color-bone));
  border-color: var(--color-fog);
}

body.landing-page .preview-phase {
  background: transparent;
  border-color: transparent;
  color: var(--color-graphite);
  border-radius: 10px;
}

body.landing-page .preview-phase:hover,
body.landing-page .preview-phase.is-active {
  background: var(--color-bone);
  border-color: var(--color-fog);
  color: var(--color-ink);
  transform: translateY(-1px);
}

body.landing-page .preview-output {
  background: color-mix(in srgb, var(--color-bone) 88%, var(--color-iris-soft));
  border-radius: 18px;
}

body.landing-page .preview-title {
  color: var(--color-ink);
}

body.landing-page .preview-day,
body.landing-page .preview-action-label {
  color: var(--color-iris);
}

body.landing-page .preview-action p {
  color: var(--color-ink);
}

body.landing-page .preview-story-card {
  border-radius: 14px;
}

body.landing-page .preview-story-card:hover,
body.landing-page .preview-story-card.is-active {
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-iris-soft) 35%, var(--color-bone));
  border-color: color-mix(in srgb, var(--color-iris) 22%, var(--color-fog));
  transform: translateX(-2px);
}

body.landing-page .weekly-report-screen {
  background:
    linear-gradient(180deg, #2e1820 0%, #150e12 100%);
}

body.landing-page .weekly-report-screen::before {
  display: none;
}

body.landing-page .weekly-report-eyebrow,
body.landing-page .weekly-report-spark,
body.landing-page .weekly-report-try-label {
  color: var(--color-iris-soft);
  filter: none;
}

body.landing-page .weekly-report-summary,
body.landing-page .weekly-report-try {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left-color: var(--color-iris-soft);
}

body.landing-page .weekly-report-highlights svg {
  color: var(--color-iris-soft);
  filter: none;
}

body.landing-page .weekly-report-icon,
body.landing-page .weekly-report-trust-pill {
  background: color-mix(in srgb, var(--color-iris-soft) 24%, var(--color-bone));
}

body.landing-page .browser-frame {
  background: #171416;
  border-radius: 14px;
}

body.landing-page .browser-chrome,
body.landing-page .browser-url,
body.landing-page .mock-tip-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  backdrop-filter: none;
}

body.landing-page .mock-log-btn,
body.landing-page .mock-chip-dot,
body.landing-page .nav-webapp-dot {
  background: var(--color-iris);
}

body.landing-page .mock-nav-item--active,
body.landing-page .floating-web-pill:hover,
body.landing-page .web-app-cta:hover {
  color: var(--color-iris);
}

/* Browser mock represents a dark app UI — force readable light text
   regardless of the landing page's --text-primary override. */
body.landing-page .mock-day {
  color: #f5f5f7;
}
body.landing-page .mock-tip-text {
  color: rgba(245, 245, 247, 0.92);
}
body.landing-page .mock-tip-label,
body.landing-page .mock-subtitle {
  color: rgba(245, 245, 247, 0.55);
}
body.landing-page .mock-nav-item {
  color: rgba(245, 245, 247, 0.5);
}
/* Phase chip — switch from teal to iris so it matches brand and stays
   readable on the dark mock background. */
body.landing-page .mock-chip {
  color: var(--color-iris-soft);
  background: rgba(113, 76, 182, 0.16);
  border-color: rgba(113, 76, 182, 0.32);
}

body.landing-page .widget-card {
  padding: 18px;
  border-radius: 16px;
}

body.landing-page .widget-card img,
body.landing-page .showcase-phone img,
body.landing-page .everywhere-grid img {
  filter: drop-shadow(0 18px 38px rgba(41, 40, 39, 0.14));
}

body.landing-page .stats-row,
body.landing-page .footer {
  background: var(--color-aubergine-deep);
  color: #fffdfa;
  border-color: rgba(255, 255, 255, 0.10);
}

body.landing-page .stat-value,
body.landing-page .footer-links a:hover {
  color: #fffdfa;
}

body.landing-page .stat-label,
body.landing-page .footer-copy,
body.landing-page .footer-links a {
  color: rgba(255, 253, 250, 0.58);
}

body.landing-page .review-stars,
body.landing-page .hero-stars {
  color: var(--color-iris-soft);
  letter-spacing: 1px;
}

body.landing-page .viral-number {
  background: none;
  -webkit-text-fill-color: var(--color-iris);
  color: var(--color-iris);
}

body.landing-page .viral-number::after {
  display: none;
}

body.landing-page .viral-post-skeleton-bars span {
  background: linear-gradient(90deg, rgba(41, 40, 39, 0.06), rgba(41, 40, 39, 0.13), rgba(41, 40, 39, 0.06));
}

body.landing-page .viral-post-skeleton-handle,
body.landing-page .viral-stat strong {
  color: var(--color-ink);
}

body.landing-page .privacy,
body.landing-page .cta {
  border-radius: 24px;
}

body.landing-page .privacy-icon {
  color: var(--color-iris);
}

body.landing-page .cta-icon-wrap img {
  box-shadow: none;
}

body.landing-page .faq-item[open] {
  border-color: color-mix(in srgb, var(--color-iris) 26%, var(--color-fog));
  box-shadow: none;
}

body.landing-page .faq-answer,
body.landing-page .review-author {
  border-top-color: var(--color-fog);
}

body.landing-page .floating-web-pill {
  background: rgba(255, 253, 250, 0.94);
  border-color: var(--color-fog);
  box-shadow: 0 10px 28px rgba(41, 40, 39, 0.10);
  color: var(--color-ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.landing-page .phase-wheel-disc {
  filter: saturate(0.72) brightness(1.04);
  box-shadow: none;
}

body.landing-page .phase-wheel-disc::after,
body.landing-page .phase-wheel-spoke {
  background: var(--color-bone);
  border-color: var(--color-fog);
  color: var(--color-ink);
  box-shadow: none;
}

body.landing-page .phase-wheel-spoke.is-active {
  background: var(--color-iris-soft);
  border-color: color-mix(in srgb, var(--color-iris) 26%, var(--color-iris-soft));
  color: #20152f;
  box-shadow: none;
}

body.landing-page .phase-wheel-pin {
  background: var(--color-iris);
  filter: none;
}

@media (max-width: 900px) {
  body.landing-page .hero {
    min-height: auto;
    padding-top: 88px;
  }

  body.landing-page .hero h1 {
    font-size: clamp(46px, 12vw, 70px);
  }

  body.landing-page .hero-device {
    max-width: 100%;
  }

  body.landing-page .hero-phone {
    width: clamp(124px, 30vw, 174px);
  }

  body.landing-page .cycle-preview-panel,
  body.landing-page .weekly-report-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  body.landing-page .hero {
    padding: 82px 16px 54px;
  }

  body.landing-page .hero h1 {
    font-size: clamp(42px, 13vw, 58px);
    line-height: 0.98;
  }

  body.landing-page .hero-sub {
    font-size: 16px;
    margin-bottom: 30px;
  }

  body.landing-page .hero-phones {
    gap: 6px;
  }

  body.landing-page .hero-phone {
    width: clamp(106px, 30vw, 132px);
    /* Use % radii from the main mockup rule — fully responsive */
  }

  body.landing-page .hero-cta-group {
    flex-direction: column;
  }

  body.landing-page .step {
    align-items: flex-start;
    padding: 20px;
  }

  body.landing-page .preview-actions {
    grid-template-columns: 1fr;
  }

  body.landing-page .compare-teaser-row {
    grid-template-columns: minmax(0, 1fr) 72px 72px;
  }
}

/* ============================================================
   Try Yuni — Interactive landing continuation
   ============================================================ */

:root {
  /* iOS phase colors — mirrored from yuni-ios/.../Assets.xcassets/Color/phase*.colorset
     Verified 2026-05-11. Keep in sync with iOS app palette. */
  --phase-menstruation: #C46B6B;
  --phase-follicular:   #5BA882;
  --phase-ovulation:    #E8B563;
  --phase-luteal:       #8A7AAD;
  --phase-pms:          #2EABBA;
}

body.landing-page .try-yuni {
  background: var(--color-parchment-canvas, #f2f0eb);
  padding: 0 24px 96px;
  position: relative;
}

body.landing-page .try-yuni-inner {
  max-width: 1080px;
  margin: 0 auto;
}

body.landing-page .try-eyebrow {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-graphite, #666);
  margin: 48px 0 24px;
  text-align: center;
  font-feature-settings: "smcp";
}

body.landing-page .try-card {
  background: var(--color-bone, #ffffff);
  border: 1px solid var(--color-fog, #e3e3e2);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 56px;
  position: relative;
  overflow: hidden;
}

body.landing-page .try-card::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}

/* ---- State machine: only one state visible at a time ---- */
body.landing-page .try-state { display: none; }
body.landing-page .try-card[data-state="mode"]   .try-state-mode   { display: block; }
body.landing-page .try-card[data-state="date"]   .try-state-date   { display: block; }
body.landing-page .try-card[data-state="result"] .try-state-result { display: block; }

/* ---- State 1: Mode ---- */
body.landing-page .try-state-mode .try-q {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--color-ink, #292827);
  margin: 0 0 32px;
}

body.landing-page .try-mode-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.landing-page .try-mode-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 28px 32px;
  background: transparent;
  border: 1px solid var(--color-iris, #714cb6);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--color-ink, #292827);
  transition: background 0.2s ease, transform 0.2s ease;
  min-height: 80px;
}

body.landing-page .try-mode-btn:hover {
  background: color-mix(in srgb, var(--color-iris, #714cb6) 6%, transparent);
}

body.landing-page .try-mode-btn:active {
  transform: scale(0.99);
}

body.landing-page .try-mode-label {
  font-size: 22px;
  line-height: 1.3;
}

body.landing-page .try-mode-sub {
  display: block;
  font-size: 15px;
  color: var(--color-graphite, #666);
  margin-top: 4px;
}

body.landing-page .try-mode-arrow {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 28px;
  color: var(--color-iris, #714cb6);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

body.landing-page .try-mode-btn:hover .try-mode-arrow {
  transform: translateX(4px);
}

/* ---- State 2: Date ---- */
body.landing-page .try-state-date .try-q {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--color-ink, #292827);
  margin: 0 0 24px;
}

body.landing-page .try-recipient-intro {
  display: none;
}
body.landing-page .try-yuni.try-recipient .try-recipient-intro {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-iris, #714cb6);
  margin: 0 0 12px;
}

/* Mode-specific date question copy */
body.landing-page .try-yuni .try-q-tracking { display: none; }
body.landing-page .try-yuni[data-mode="tracking"] .try-q-supporting { display: none; }
body.landing-page .try-yuni[data-mode="tracking"] .try-q-tracking { display: inline; }

body.landing-page .try-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

body.landing-page .try-date-input {
  font-family: inherit;
  font-size: 20px;
  color: var(--color-ink, #292827);
  background: transparent;
  border: 1px solid var(--color-driftwood, #dcd7d3);
  border-radius: 12px;
  padding: 18px 22px;
  width: 100%;
  max-width: 320px;
  accent-color: var(--color-iris, #714cb6);
  transition: border-color 0.2s ease;
}

body.landing-page .try-date-input:focus {
  outline: none;
  border-color: var(--color-iris, #714cb6);
}

body.landing-page .try-date-help {
  font-size: 14px;
  color: var(--color-graphite, #666);
  min-height: 20px;
  margin-top: 8px;
}

body.landing-page .try-date-help.is-error { color: var(--phase-menstruation); }
body.landing-page .try-date-help.is-warn  { color: var(--phase-ovulation); }

/* "Ask her" button — visible only in supporting mode */
body.landing-page .try-ask-her-wrap { display: none; margin-top: 20px; }
body.landing-page .try-yuni[data-mode="supporting"] .try-ask-her-wrap { display: block; }

body.landing-page .try-ask-her {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 20px;
  color: var(--color-iris, #714cb6);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: none;
}

body.landing-page .try-ask-her::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: left;
  animation: tryAskUnderline 600ms cubic-bezier(0.16, 1, 0.3, 1) 200ms backwards;
}

@keyframes tryAskUnderline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

body.landing-page .try-ask-her-arrow {
  font-style: normal;
  display: inline-block;
  transition: transform 0.25s ease;
}

body.landing-page .try-ask-her:hover .try-ask-her-arrow {
  transform: translateX(4px);
}

/* Cycle length fine-tune */
body.landing-page .try-cyclelen {
  margin-top: 28px;
}

body.landing-page .try-cyclelen summary {
  font-size: 14px;
  color: var(--color-graphite, #666);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

body.landing-page .try-cyclelen summary::-webkit-details-marker { display: none; }
body.landing-page .try-cyclelen summary::marker { content: ''; }

body.landing-page .try-cyclelen-pills {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

body.landing-page .try-cyclelen-pill {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--color-fog, #e3e3e2);
  color: var(--color-ink, #292827);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

body.landing-page .try-cyclelen-pill.is-active {
  border-color: var(--color-iris, #714cb6);
  background: color-mix(in srgb, var(--color-iris, #714cb6) 8%, transparent);
}

/* ---- State 3: Result ---- */
body.landing-page .try-result-day {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-graphite, #666);
  margin: 0 0 8px;
}

body.landing-page .try-result-phase {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 88px;
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.022em;
  margin: 0 0 24px;
  color: var(--color-ink, #292827);
  outline: none;
}

/* Phase-color tinted result name */
body.landing-page .try-yuni[data-phase="menstruation"] .try-result-phase { color: color-mix(in srgb, var(--phase-menstruation) 75%, var(--color-ink, #292827)); }
body.landing-page .try-yuni[data-phase="follicular"]   .try-result-phase { color: color-mix(in srgb, var(--phase-follicular)   75%, var(--color-ink, #292827)); }
body.landing-page .try-yuni[data-phase="ovulation"]    .try-result-phase { color: color-mix(in srgb, var(--phase-ovulation)    75%, var(--color-ink, #292827)); }
body.landing-page .try-yuni[data-phase="luteal"]       .try-result-phase { color: color-mix(in srgb, var(--phase-luteal)       75%, var(--color-ink, #292827)); }
body.landing-page .try-yuni[data-phase="pms"]          .try-result-phase { color: color-mix(in srgb, var(--phase-pms)          75%, var(--color-ink, #292827)); }

/* Phase reveal animation */
body.landing-page .try-result-phase {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(8px);
}
body.landing-page .try-result-phase.is-revealed {
  animation: tryPhaseReveal 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tryPhaseReveal {
  from { opacity: 0; filter: blur(6px); transform: translateY(8px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

body.landing-page .try-result-tip {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-ink, #292827) 75%, transparent);
  max-width: 540px;
  margin: 0 0 32px;
}

/* Result two-column: SAY/DO/AVOID + widget */
body.landing-page .try-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 32px;
  align-items: start;
  margin-bottom: 32px;
}

body.landing-page .try-actions {
  background: var(--color-bone, #fff);
  border: 1px solid var(--color-fog, #e3e3e2);
  border-radius: 16px;
  overflow: hidden;
}

body.landing-page .try-action {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 20px 24px;
}

body.landing-page .try-action + .try-action {
  border-top: 1px solid var(--color-driftwood, #dcd7d3);
}

body.landing-page .try-action-label {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-graphite, #666);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

body.landing-page .try-action-ornament {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 18px;
  color: var(--color-iris, #714cb6);
  line-height: 1;
}

body.landing-page .try-action-body {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  color: var(--color-ink, #292827);
}

/* Mock iOS widget */
/* ============================================================
   Widget — faithful CSS port of YuniTodayWidget.smallMediumContentView()
   (yuni-ios/YuniTodayWidget/YuniTodayWidget.swift)
   ============================================================ */

body.landing-page .try-widget {
  --widget-pill-fg: #ffffff;
  width: 280px;
  height: 280px;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--color-iris, #714cb6) 14%, transparent);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-bone, #fff);
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, system-ui, "Segoe UI", sans-serif;
  transition: background-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.landing-page .try-yuni[data-phase="menstruation"] .try-widget { background: color-mix(in srgb, var(--phase-menstruation) 10%, var(--color-bone, #fff)); }
body.landing-page .try-yuni[data-phase="follicular"]   .try-widget { background: color-mix(in srgb, var(--phase-follicular)   10%, var(--color-bone, #fff)); }
body.landing-page .try-yuni[data-phase="ovulation"]    .try-widget { background: color-mix(in srgb, var(--phase-ovulation)    12%, var(--color-bone, #fff)); }
body.landing-page .try-yuni[data-phase="luteal"]       .try-widget { background: color-mix(in srgb, var(--phase-luteal)       10%, var(--color-bone, #fff)); }
body.landing-page .try-yuni[data-phase="pms"]          .try-widget { background: color-mix(in srgb, var(--phase-pms)          10%, var(--color-bone, #fff)); }

/* Top row: pill + progress icon */
body.landing-page .try-widget-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Phase pill — darkened phase color so white text passes WCAG.
   Mirrors iOS CyclePhase.contrastTextColor (white for 4 phases, black for ovulation). */
body.landing-page .try-widget-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--widget-pill-fg);
  transition: background-color 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.landing-page .try-yuni[data-phase="menstruation"] .try-widget-pill { background: color-mix(in srgb, var(--phase-menstruation) 100%, black 22%); }
body.landing-page .try-yuni[data-phase="follicular"]   .try-widget-pill { background: color-mix(in srgb, var(--phase-follicular)   100%, black 22%); }
body.landing-page .try-yuni[data-phase="ovulation"]    .try-widget-pill { background: var(--phase-ovulation); }
body.landing-page .try-yuni[data-phase="ovulation"]    .try-widget { --widget-pill-fg: #1a1a1a; }
body.landing-page .try-yuni[data-phase="luteal"]       .try-widget-pill { background: color-mix(in srgb, var(--phase-luteal)       100%, black 22%); }
body.landing-page .try-yuni[data-phase="pms"]          .try-widget-pill { background: color-mix(in srgb, var(--phase-pms)          100%, black 25%); }

/* Circular progress icon */
body.landing-page .try-widget-progress {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

body.landing-page .try-widget-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.landing-page .try-widget-ring-bg { stroke: currentColor; opacity: 0.2; }
body.landing-page .try-widget-ring-fill {
  stroke: currentColor;
  stroke-dasharray: 122.52;     /* 2 * pi * 19.5 ≈ 122.52 (full circle) */
  stroke-dashoffset: 122.52;
  transition: stroke-dashoffset 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.landing-page .try-yuni[data-phase="menstruation"] .try-widget-progress { color: var(--phase-menstruation); }
body.landing-page .try-yuni[data-phase="follicular"]   .try-widget-progress { color: var(--phase-follicular); }
body.landing-page .try-yuni[data-phase="ovulation"]    .try-widget-progress { color: var(--phase-ovulation); }
body.landing-page .try-yuni[data-phase="luteal"]       .try-widget-progress { color: var(--phase-luteal); }
body.landing-page .try-yuni[data-phase="pms"]          .try-widget-progress { color: var(--phase-pms); }

body.landing-page .try-widget-icon {
  position: absolute;
  width: 22px;
  height: 22px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  fill: currentColor;
}

/* Main tip — visual lead, line-clamped to 3.
   No flex-grow here: it breaks -webkit-line-clamp. Day caption uses margin-top:auto to pin to bottom. */
body.landing-page .try-widget-tip {
  margin: 8px 0 0;
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--color-ink, #292827);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
}

/* Day caption — bottom, secondary */
body.landing-page .try-widget-day {
  margin: auto 0 0;
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-ink, #292827) 55%, transparent);
}

body.landing-page .try-widget-day .try-day-num {
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
}

/* Forecast strip */
body.landing-page .try-forecast {
  margin-bottom: 32px;
}

body.landing-page .try-forecast-label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-graphite, #666);
  margin: 0 0 10px;
}

body.landing-page .try-forecast-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

body.landing-page .try-forecast-chip {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--color-ink, #292827);
  white-space: nowrap;
}

body.landing-page .try-forecast-chip[data-phase="menstruation"] { color: var(--phase-menstruation); background: color-mix(in srgb, var(--phase-menstruation) 8%, transparent); }
body.landing-page .try-forecast-chip[data-phase="follicular"]   { color: var(--phase-follicular);   background: color-mix(in srgb, var(--phase-follicular)   8%, transparent); }
body.landing-page .try-forecast-chip[data-phase="ovulation"]    { color: var(--phase-ovulation);    background: color-mix(in srgb, var(--phase-ovulation)   10%, transparent); }
body.landing-page .try-forecast-chip[data-phase="luteal"]       { color: var(--phase-luteal);       background: color-mix(in srgb, var(--phase-luteal)       8%, transparent); }
body.landing-page .try-forecast-chip[data-phase="pms"]          { color: var(--phase-pms);          background: color-mix(in srgb, var(--phase-pms)          8%, transparent); }

/* CTAs */
body.landing-page .try-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

body.landing-page .try-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-iris, #714cb6);
  color: #ffffff;
  padding: 18px 32px;
  border-radius: 999px;
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  min-width: 280px;
  transition: transform 0.2s ease, background 0.2s ease;
}

body.landing-page .try-cta-primary:hover {
  background: color-mix(in srgb, var(--color-iris, #714cb6) 85%, #000);
  transform: translateY(-1px);
}

body.landing-page .try-cta-secondary,
body.landing-page .try-email-link {
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 16px;
  color: var(--color-iris, #714cb6);
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
}

body.landing-page .try-cta-secondary:hover,
body.landing-page .try-email-link:hover {
  text-decoration: underline;
}

body.landing-page .try-email-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  width: 100%;
  max-width: 420px;
}

body.landing-page .try-email-form[hidden] {
  display: none;
}

body.landing-page .try-email-input {
  flex: 1 1 220px;
  font-family: inherit;
  font-size: 16px;
  padding: 14px 18px;
  border: 1px solid var(--color-driftwood, #dcd7d3);
  border-radius: 12px;
  background: transparent;
  color: var(--color-ink, #292827);
  min-width: 0;
}

body.landing-page .try-email-input:focus {
  outline: none;
  border-color: var(--color-iris, #714cb6);
}

body.landing-page .try-email-submit {
  font-family: inherit;
  font-size: 16px;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  background: var(--color-iris, #714cb6);
  color: #fff;
  cursor: pointer;
  font-weight: 500;
}

body.landing-page .try-email-submit:disabled { opacity: 0.6; cursor: not-allowed; }

body.landing-page .try-email-help {
  font-size: 14px;
  color: var(--color-graphite, #666);
  min-height: 18px;
  width: 100%;
  margin-top: 6px;
}

body.landing-page .try-email-help.is-error { color: var(--phase-menstruation); }

/* Reverse share — tracking mode only */
body.landing-page .try-reverse-share-wrap { display: none; }
body.landing-page .try-yuni[data-mode="tracking"] .try-reverse-share-wrap { display: block; margin-top: 8px; }

body.landing-page .try-reverse-share {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--color-iris, #714cb6);
  background: transparent;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
}

body.landing-page .try-reverse-share:hover { text-decoration: underline; }

/* Toast */
body.landing-page .try-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--color-ink, #292827);
  color: var(--color-bone, #fff);
  padding: 14px 24px;
  border-radius: 999px;
  font-family: "SF Pro Display", -apple-system, sans-serif;
  font-size: 15px;
  z-index: 1000;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  max-width: calc(100vw - 48px);
  text-align: center;
}

body.landing-page .try-toast.is-visible {
  transform: translateX(-50%) translateY(0);
}

/* Card state transitions — opacity crossfade */
body.landing-page .try-state {
  animation: tryStateFadeIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ---- Mobile ---- */
@media (max-width: 720px) {
  body.landing-page .try-yuni {
    padding: 0 16px 80px;
  }
  body.landing-page .try-eyebrow {
    font-size: 16px;
    margin: 32px 0 20px;
  }
  body.landing-page .try-card {
    padding: 28px 24px;
    border-radius: 20px;
  }
  body.landing-page .try-state-mode .try-q,
  body.landing-page .try-state-date .try-q {
    font-size: 26px;
  }
  body.landing-page .try-mode-btn {
    padding: 22px 24px;
    min-height: 72px;
  }
  body.landing-page .try-mode-label { font-size: 19px; }
  body.landing-page .try-result-phase {
    font-size: 56px;
  }
  body.landing-page .try-result-tip {
    font-size: 20px;
  }
  body.landing-page .try-result-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  body.landing-page .try-widget {
    width: 100%;
    max-width: 240px;
    height: 200px;
    justify-self: center;
  }
  body.landing-page .try-action {
    grid-template-columns: 70px 1fr;
    padding: 16px 18px;
    gap: 12px;
  }
  body.landing-page .try-action-body { font-size: 16px; }
  body.landing-page .try-cta-primary {
    width: 100%;
    min-width: 0;
    font-size: 17px;
    padding: 16px 24px;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  body.landing-page .try-ask-her::after { animation: none; }
  body.landing-page .try-result-phase {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }
  body.landing-page .try-result-phase.is-revealed { animation: none; }
  body.landing-page .try-state { animation: none; }
}

/* ============================================================
   Try Yuni — Polish pass (B/C/D/E/F/G + relative chips)
   ============================================================ */

/* Section needs positioning context for aurora */
body.landing-page .try-yuni {
  position: relative;
  overflow: hidden;
}

/* (D) Phase aurora — full-bleed soft gradient that fades in on result */
body.landing-page .try-aurora {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 70%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), background 800ms ease;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, transparent 0%, transparent 100%);
  z-index: 0;
}

body.landing-page .try-yuni[data-phase]:not([data-phase=""]) .try-aurora {
  opacity: 1;
}

body.landing-page .try-yuni[data-phase="menstruation"] .try-aurora { background: radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in srgb, var(--phase-menstruation) 28%, transparent) 0%, transparent 70%); }
body.landing-page .try-yuni[data-phase="follicular"]   .try-aurora { background: radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in srgb, var(--phase-follicular)   28%, transparent) 0%, transparent 70%); }
body.landing-page .try-yuni[data-phase="ovulation"]    .try-aurora { background: radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in srgb, var(--phase-ovulation)    32%, transparent) 0%, transparent 70%); }
body.landing-page .try-yuni[data-phase="luteal"]       .try-aurora { background: radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in srgb, var(--phase-luteal)       28%, transparent) 0%, transparent 70%); }
body.landing-page .try-yuni[data-phase="pms"]          .try-aurora { background: radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in srgb, var(--phase-pms)          28%, transparent) 0%, transparent 70%); }

body.landing-page .try-yuni-inner {
  position: relative;
  z-index: 1;
}

/* (F) Eyebrow underline — hand-drawn SVG */
body.landing-page .try-eyebrow-underline {
  display: block;
  width: 220px;
  height: 12px;
  margin: 0 auto 28px;
  color: var(--color-iris, #714cb6);
  opacity: 0.7;
}

body.landing-page .try-eyebrow-underline path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: tryUnderlineDraw 1100ms cubic-bezier(0.16, 1, 0.3, 1) 400ms forwards;
}

@keyframes tryUnderlineDraw {
  to { stroke-dashoffset: 0; }
}

/* (B) Mode side-by-side on desktop */
@media (min-width: 880px) {
  body.landing-page .try-mode-group {
    flex-direction: row;
    gap: 20px;
  }
  body.landing-page .try-mode-btn {
    flex: 1 1 0;
    min-height: 120px;
    padding: 32px 36px;
    align-items: flex-start;
  }
  body.landing-page .try-mode-btn > span:first-child {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.landing-page .try-mode-label {
    font-size: 26px;
  }
  body.landing-page .try-mode-arrow {
    align-self: center;
  }
}

/* (C) Questions 48-56px on desktop */
@media (min-width: 880px) {
  body.landing-page .try-state-mode .try-q,
  body.landing-page .try-state-date .try-q {
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.018em;
    margin-bottom: 40px;
  }
}

/* (G) Numerals + chip labels in Instrument Serif */
body.landing-page .try-chip-num,
body.landing-page .try-cyclelen-pill,
body.landing-page .try-result-day .try-day-num {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* Widget interior is its own SF-rounded typographic island — no serif italic numerals */
body.landing-page .try-widget-day .try-day-num {
  font-family: ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
}

/* (A) Relative-time chip grid */
body.landing-page .try-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

body.landing-page .try-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  color: var(--color-ink, #292827);
  background: transparent;
  border: 1px solid var(--color-fog, #e3e3e2);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

body.landing-page .try-chip:hover {
  border-color: color-mix(in srgb, var(--color-iris, #714cb6) 50%, var(--color-fog));
  background: color-mix(in srgb, var(--color-iris, #714cb6) 4%, transparent);
}

body.landing-page .try-chip:active { transform: scale(0.97); }

body.landing-page .try-chip.is-active {
  border-color: var(--color-iris, #714cb6);
  background: color-mix(in srgb, var(--color-iris, #714cb6) 10%, transparent);
}

body.landing-page .try-chip-num {
  font-size: 18px;
  line-height: 1;
  color: var(--color-iris, #714cb6);
}

body.landing-page .try-chip-pick {
  font-style: italic;
  color: var(--color-iris, #714cb6);
  border-color: transparent;
  background: transparent;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 17px;
  padding: 10px 14px;
}

body.landing-page .try-chip-pick:hover {
  background: color-mix(in srgb, var(--color-iris, #714cb6) 6%, transparent);
  border-color: transparent;
}

/* (A) Day + Month picker (revealed after "Pick exact day") */
body.landing-page .try-date-picker {
  display: flex;
  gap: 12px;
  margin: -8px 0 20px;
  flex-wrap: wrap;
}

body.landing-page .try-date-picker[hidden] {
  display: none;
}

body.landing-page .try-date-picker select {
  font-family: inherit;
  font-size: 17px;
  color: var(--color-ink, #292827);
  background: transparent;
  border: 1px solid var(--color-driftwood, #dcd7d3);
  border-radius: 12px;
  padding: 14px 18px;
  min-width: 140px;
  cursor: pointer;
  accent-color: var(--color-iris, #714cb6);
}

body.landing-page .try-date-picker select:focus {
  outline: none;
  border-color: var(--color-iris, #714cb6);
}

/* (G) Day eyebrow — numerals in serif */
body.landing-page .try-result-day {
  font-family: "SF Pro Display", -apple-system, sans-serif;
}

body.landing-page .try-result-day .try-day-num,
body.landing-page .try-widget-day .try-day-num {
  font-size: 1.15em;
  letter-spacing: 0;
  text-transform: none;
}

/* (E) Result grid: single column on all viewports, widget hero-size */
body.landing-page .try-result-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  margin-bottom: 32px;
}

body.landing-page .try-widget {
  align-self: center;
}

/* Hide cycle-length-pills as block (override default flex) when collapsed - already handled by <details> */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.landing-page .try-eyebrow-underline path { animation: none; stroke-dashoffset: 0; }
  body.landing-page .try-aurora { transition: none; }
}

/* Mobile tweaks */
@media (max-width: 720px) {
  body.landing-page .try-chip {
    font-size: 14px;
    padding: 9px 14px;
  }
  body.landing-page .try-chip-num { font-size: 16px; }
  body.landing-page .try-chip-pick { font-size: 15px; }
  body.landing-page .try-widget {
    width: 240px;
    height: 240px;
    padding: 18px;
    border-radius: 22px;
  }
  body.landing-page .try-widget-tip {
    font-size: 18px;
    line-height: 1.2;
  }
  body.landing-page .try-widget-progress { width: 38px; height: 38px; }
  body.landing-page .try-widget-icon { width: 18px; height: 18px; }
  body.landing-page .try-eyebrow-underline {
    width: 180px;
    margin-bottom: 20px;
  }
}

/* =====================================================================
   Hero "phone tiles" — Apple-style product showcase
   - No colored surrounds: clean phones float on the page background
   - Each phone is a real iPhone-shape with subtle bezel + soft shadow
   - Marketing copy moved to small captions below each device
   - Tile 2 shows widgets on an iOS Lock Screen, not orange chaos
   - Typography sized in iOS pt via --pt (1 pt = 0.32cqw at desktop)
   ===================================================================== */

body.landing-page .hero-phones--apple {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 3.5vw, 56px);
  flex-wrap: nowrap;
}

body.landing-page .hero-phone-cell {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 1.8vw, 26px);
  width: clamp(210px, 23vw, 290px);
}

body.landing-page .hero-phone.hero-phone--coded {
  width: 100%;
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  container-type: inline-size;
  container-name: phonetile;
  box-shadow: none;
  --phone-offset: 0;
}

body.landing-page .hero-phone.hero-phone--coded picture,
body.landing-page .hero-phone.hero-phone--coded > img { display: none; }

/* ---------- Caption under each device (editorial landing style) ---------- */
.device-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 0 4px;
  max-width: 100%;
}

.device-caption strong {
  font-family: "Instrument Serif", "Times New Roman", Georgia, serif;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 400;
  font-style: italic;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.device-caption span {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.52);
  letter-spacing: -0.005em;
  line-height: 1.42;
  max-width: 22ch;
  text-wrap: balance;
}

/* ---------- The phone shape itself ---------- */
.phone-tile {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.4;
  --pt: 0.42cqw;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, "Nunito", BlinkMacSystemFont, system-ui, sans-serif;
  color: #fff;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@supports not (font-size: 1cqw) {
  .phone-tile { --pt: 0.08vw; }
}

.phone-tile *,
.phone-tile *::before,
.phone-tile *::after { box-sizing: border-box; }

/* Inner black gasket between the orange titanium frame and the app screen.
   Sits on .phone-tile so .tile-iphone::before/::after can stay reserved
   for the side buttons. */
.phone-tile::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 3.02cqw;
  pointer-events: none;
  border-radius: 11.85cqw;
  border: 0.68cqw solid rgba(2, 2, 4, 0.98);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.035),
    0 0 0 0.5px rgba(245, 154, 86, 0.16),
    0 1.2cqw 2.4cqw rgba(0, 0, 0, 0.34);
}

/* iPhone 17 Pro — Cosmic Orange titanium frame.
   Layered gradients build the anodized metal: deep terracotta base,
   conic brushed-metal sweep, chamfer highlights, antenna breaks,
   bottom port holes, and a top-left catch light. */
.tile-iphone {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14.5cqw;
  padding: 3.4cqw;
  background:
    /* Bottom port / speaker holes cut into the orange chamfer */
    radial-gradient(circle, rgba(18, 7, 3, 0.9) 0 36%, transparent 39%) padding-box no-repeat 42% calc(100% - 0.92cqw) / 1.1cqw 1.1cqw,
    radial-gradient(circle, rgba(18, 7, 3, 0.86) 0 36%, transparent 39%) padding-box no-repeat 46% calc(100% - 0.92cqw) / 1.1cqw 1.1cqw,
    radial-gradient(circle, rgba(18, 7, 3, 0.82) 0 36%, transparent 39%) padding-box no-repeat 50% calc(100% - 0.92cqw) / 1.1cqw 1.1cqw,
    radial-gradient(circle, rgba(18, 7, 3, 0.78) 0 36%, transparent 39%) padding-box no-repeat 54% calc(100% - 0.92cqw) / 1.1cqw 1.1cqw,
    radial-gradient(circle, rgba(18, 7, 3, 0.74) 0 36%, transparent 39%) padding-box no-repeat 58% calc(100% - 0.92cqw) / 1.1cqw 1.1cqw,
    /* Fine antenna breaks in the titanium band */
    linear-gradient(
      transparent calc(1.75cqw - 0.5px),
      rgba(255, 198, 145, 0.38) calc(1.75cqw - 0.5px),
      rgba(255, 198, 145, 0.38) calc(1.75cqw + 0.5px),
      transparent calc(1.75cqw + 0.5px)
    ) padding-box no-repeat,
    linear-gradient(
      0deg,
      transparent calc(1.82cqw - 0.5px),
      rgba(123, 43, 18, 0.62) calc(1.82cqw - 0.5px),
      rgba(255, 178, 112, 0.28) calc(1.82cqw + 0.5px),
      transparent calc(1.82cqw + 0.5px)
    ) padding-box no-repeat,
    /* Left + right polished chamfers — bright edge / shadow on the inside curve */
    linear-gradient(
      90deg,
      rgba(74, 23, 9, 0.72) 0%,
      rgba(158, 57, 22, 0.5) 1.6%,
      rgba(255, 184, 117, 0.4) 3.1%,
      transparent 6.8%,
      transparent 92.4%,
      rgba(113, 35, 13, 0.62) 96.2%,
      rgba(246, 143, 72, 0.34) 98.2%,
      rgba(69, 20, 8, 0.78) 100%
    ) padding-box,
    /* Top-left anodized catch light */
    radial-gradient(
      ellipse at 22% 7%,
      rgba(255, 232, 191, 0.72) 0%,
      rgba(255, 176, 105, 0.34) 12%,
      rgba(232, 118, 57, 0.08) 30%,
      transparent 48%
    ) padding-box,
    /* Bottom curve shadow */
    radial-gradient(
      ellipse at 50% 101%,
      rgba(48, 13, 4, 0.74) 0%,
      rgba(92, 26, 9, 0.34) 34%,
      transparent 66%
    ) padding-box,
    /* Brushed titanium sweep */
    conic-gradient(
      from 214deg at 35% 16%,
      #8f3217 0deg,
      #c75529 42deg,
      #f0a16a 74deg,
      #d8632b 114deg,
      #a63d1a 171deg,
      #e8814a 220deg,
      #7c2a12 292deg,
      #c75529 360deg
    ) padding-box,
    /* Base Cosmic Orange titanium */
    linear-gradient(150deg, #c75529 0%, #e57a3c 38%, #9b3517 74%, #4d1709 100%);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 222, 181, 0.34),
    inset 0 1px 0 rgba(255, 239, 205, 0.44),
    inset 0 -1px 0 rgba(66, 17, 5, 0.88),
    inset 1.15cqw 0 1.7cqw -1.3cqw rgba(255, 198, 132, 0.38),
    inset -1.3cqw 0 1.7cqw -1.2cqw rgba(55, 14, 5, 0.72),
    0 1px 0 rgba(255, 181, 111, 0.18),
    0 24px 42px -12px rgba(0, 0, 0, 0.58),
    0 64px 112px -28px rgba(0, 0, 0, 0.5);
}

/* Right side: Power / Sleep button — tinted to match Cosmic Orange titanium */
.tile-iphone::before {
  content: "";
  position: absolute;
  z-index: 4;
  right: max(-3px, -1.4cqw);
  top: 26%;
  width: max(3px, 1.8cqw);
  height: 12%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(
    to right,
    #6c210d 0%,
    #d9652d 34%,
    #f0a06b 58%,
    #9f3718 100%
  );
  box-shadow:
    inset 1px 0 0 rgba(54, 14, 5, 0.78),
    inset -1px 0 0 rgba(255, 220, 176, 0.28),
    0 0.35cqw 0.7cqw rgba(0, 0, 0, 0.32);
}

/* Left side: Action Button + Volume Up + Volume Down — Cosmic Orange tint */
.tile-iphone::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: max(-3px, -1.4cqw);
  top: 16%;
  width: max(3px, 1.8cqw);
  height: 30%;
  border-radius: 2px 0 0 2px;
  background:
    linear-gradient(
      to bottom,
      #e07a3f 0%, #ef9b62 17%,
      rgba(98, 29, 10, 0.96) 17%, rgba(98, 29, 10, 0.96) 22%,
      #c95527 22%, #ee8b50 52%,
      rgba(98, 29, 10, 0.96) 52%, rgba(98, 29, 10, 0.96) 57%,
      #bd4820 57%, #e47b40 100%
    );
  box-shadow:
    inset -1px 0 0 rgba(57, 15, 5, 0.82),
    inset 1px 0 0 rgba(255, 222, 181, 0.26),
    0 0.35cqw 0.75cqw rgba(0, 0, 0, 0.3);
}

.tile-island {
  position: absolute;
  z-index: 5;
  top: calc(13 * var(--pt));
  left: 50%;
  width: calc(80 * var(--pt));
  height: calc(22 * var(--pt));
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.04);
}

/* Earpiece speaker — thin horizontal slit centered in the Dynamic Island */
.tile-island::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(18 * var(--pt));
  width: calc(28 * var(--pt));
  height: max(1px, calc(1.5 * var(--pt)));
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(30,30,40,0.6) 50%, rgba(0,0,0,0.9) 100%);
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.04);
  transform: translateY(-50%);
}

/* Front camera dot near the right edge of the Dynamic Island */
.tile-island::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(6 * var(--pt));
  width: calc(7 * var(--pt));
  height: calc(7 * var(--pt));
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #20406b 0%, #0a1a30 55%, #000 100%);
  box-shadow:
    inset 0 0 0 0.5px rgba(70, 110, 170, 0.4),
    0 0 calc(3 * var(--pt)) rgba(60, 100, 160, 0.18);
  transform: translateY(-50%);
}

.tile-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Match bezel: cqw for circular inner radius */
  border-radius: 11.2cqw;
  background: #0c0c12;
  padding: calc(38 * var(--pt)) calc(18 * var(--pt)) calc(10 * var(--pt));
  text-align: left;
}

/* Glass glare — subtle diagonal highlight suggesting light reflecting off
   the screen surface. Sits above content but doesn't intercept clicks. */
.tile-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  border-radius: inherit;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.0) 22%,
    rgba(255, 255, 255, 0.0) 100%
  );
  mix-blend-mode: screen;
}

.tile-iphone--check .tile-screen { padding-top: calc(36 * var(--pt)); }

/* ---------- App title ("Today", "Check In") ---------- */
.app-title {
  margin: 0 0 calc(14 * var(--pt));
  color: #fff;
  text-align: left;
  font-size: calc(28 * var(--pt));
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- App cards (iOS Spacing.lg = 24pt) ---------- */
.app-card {
  border-radius: calc(20 * var(--pt));
  background: #1a1a23;
  padding: calc(20 * var(--pt)) calc(20 * var(--pt));
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 calc(4 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, 0.32);
}

.app-card + .app-card { margin-top: calc(14 * var(--pt)); }

.card-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(14 * var(--pt));
  margin-bottom: calc(16 * var(--pt));
}

.phase-pill {
  display: inline-flex;
  align-items: center;
  height: calc(24 * var(--pt));
  padding: 0 calc(10 * var(--pt));
  border-radius: 999px;
  font-size: calc(13 * var(--pt));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
}

.phase-pill--yellow { background: #E8B563; color: #000; }
.phase-pill--teal   { background: #2DAABA; color: #fff; }
.phase-pill--lavender { background: #8A7AAD; color: #fff; }

.card-emoji {
  font-size: calc(32 * var(--pt));
  line-height: 0.9;
  margin-top: calc(-2 * var(--pt));
}

.app-card h4 {
  margin: 0;
  color: #fff;
  font-size: calc(24 * var(--pt));
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.022em;
  text-align: left;
}

.app-card p {
  margin: calc(12 * var(--pt)) 0 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: calc(16 * var(--pt));
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
}

.app-card ul {
  list-style: none;
  margin: calc(18 * var(--pt)) 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
}

.app-card li {
  position: relative;
  margin-top: calc(8 * var(--pt));
  padding-left: calc(16 * var(--pt));
  font-size: calc(13 * var(--pt));
  line-height: 1.32;
  text-align: left;
}

.app-card li::before {
  content: "";
  position: absolute;
  left: calc(2 * var(--pt));
  top: calc(8 * var(--pt));
  width: calc(4 * var(--pt));
  height: calc(4 * var(--pt));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.mini-progress {
  height: calc(6 * var(--pt));
  margin-top: calc(22 * var(--pt));
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.mini-progress span {
  display: block;
  width: 54%;
  height: 100%;
  border-radius: inherit;
  background: #E8B563;
}

.app-card small {
  display: block;
  margin-top: calc(14 * var(--pt));
  font-size: calc(12 * var(--pt));
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  text-align: left;
}

/* ---------- Next 7 Days strip ---------- */
.app-card--week h4 {
  font-size: calc(17 * var(--pt));
  margin-bottom: calc(14 * var(--pt));
}

.week-labels,
.week-dots,
.pms-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: calc(3 * var(--pt));
}

.week-labels {
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(11 * var(--pt));
  font-weight: 600;
  margin-bottom: calc(5 * var(--pt));
}

.week-dots span {
  display: grid;
  place-items: center;
  width: calc(28 * var(--pt));
  height: calc(28 * var(--pt));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: calc(13 * var(--pt));
  font-weight: 700;
  line-height: 1;
}

.week-dots--yellow .is-active {
  background: #E8B563;
  color: #1c1306;
  font-weight: 800;
}

.week-note {
  margin-top: calc(16 * var(--pt)) !important;
  font-size: calc(12 * var(--pt)) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  justify-content: flex-start;
}

/* ---------- iOS Lock Screen (tile 2) ---------- */
.tile-screen--lockscreen {
  background:
    radial-gradient(120% 80% at 30% 10%, rgba(140, 80, 200, 0.30) 0%, transparent 60%),
    radial-gradient(100% 70% at 80% 90%, rgba(60, 35, 90, 0.45) 0%, transparent 60%),
    linear-gradient(160deg, #1c1330 0%, #0a0612 60%, #15101f 100%);
  padding: calc(48 * var(--pt)) calc(14 * var(--pt)) calc(16 * var(--pt));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lock-time {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: calc(62 * var(--pt));
  font-weight: 200;
  letter-spacing: calc(-2 * var(--pt));
  color: #fff;
  line-height: 0.9;
  margin-top: calc(2 * var(--pt));
}

.lock-date {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: calc(13 * var(--pt));
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
  margin-top: calc(2 * var(--pt));
}

.lock-widgets {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--pt));
  width: 100%;
  margin-top: calc(20 * var(--pt));
}

/* ---------- PMS Lock Screen widgets ---------- */
.pms-widget {
  position: relative;
  padding: calc(18 * var(--pt)) calc(20 * var(--pt));
  border-radius: calc(22 * var(--pt));
  background: linear-gradient(155deg, rgba(28, 28, 36, 0.95) 0%, rgba(10, 10, 16, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 calc(4 * var(--pt)) calc(14 * var(--pt)) rgba(0, 0, 0, 0.35);
}

.pms-widget h4 {
  margin: 0;
  color: #fff;
  font-size: calc(17 * var(--pt));
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

.pms-widget--week h4 {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--pt));
  margin-bottom: calc(14 * var(--pt));
  font-size: calc(15 * var(--pt));
}

.pms-widget--week .widget-icon {
  display: inline-grid;
  place-items: center;
  width: calc(18 * var(--pt));
  height: calc(18 * var(--pt));
}

.pms-widget--week .widget-icon svg { width: 100%; height: 100%; }

.warn-icon {
  display: inline-grid;
  place-items: center;
  width: calc(30 * var(--pt));
  height: calc(30 * var(--pt));
  border-radius: 50%;
  border: calc(2 * var(--pt)) solid #2DAABA;
  color: #2DAABA;
}

.warn-icon svg { width: 60%; height: 60%; }

.pms-streak {
  margin: calc(12 * var(--pt)) 0 0 !important;
  font-size: calc(13 * var(--pt)) !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  display: flex;
  align-items: center;
  gap: calc(5 * var(--pt));
}

.pms-widget ul {
  list-style: none;
  padding: 0;
  margin: calc(10 * var(--pt)) 0 0;
  color: rgba(255, 255, 255, 0.6);
}

.pms-widget li {
  position: relative;
  margin-top: calc(6 * var(--pt));
  padding-left: calc(14 * var(--pt));
  font-size: calc(12 * var(--pt));
  line-height: 1.32;
  text-align: left;
}

.pms-widget li::before {
  content: "";
  position: absolute;
  left: calc(2 * var(--pt));
  top: calc(7 * var(--pt));
  width: calc(3.5 * var(--pt));
  height: calc(3.5 * var(--pt));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}

.pms-widget small {
  display: block;
  margin-top: calc(14 * var(--pt));
  font-size: calc(11 * var(--pt));
  color: rgba(255, 255, 255, 0.48);
  font-weight: 600;
  text-align: left;
}

.week-labels--pms { font-size: calc(11 * var(--pt)); }
.week-labels--pms .is-teal { color: #2DAABA; }

.pms-days { margin-top: calc(5 * var(--pt)); }

.pms-days span {
  display: grid;
  place-items: center;
  width: calc(26 * var(--pt));
  height: calc(26 * var(--pt));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.pms-days .ring-teal,
.pms-days .ring-yellow {
  background: transparent;
  border: calc(2 * var(--pt)) solid;
}

.pms-days .ring-teal   { border-color: #2DAABA; }
.pms-days .ring-yellow { border-color: #E8B563; }

.pms-days .ring-teal svg,
.pms-days .ring-yellow svg { width: 60%; height: 60%; }

.pms-days .drop {
  background: radial-gradient(circle at 50% 65%, #2a2a32 0%, #1a1a22 100%);
  position: relative;
}

.pms-days .drop::after,
.drop-inline {
  content: "";
  display: inline-block;
  width: calc(8 * var(--pt));
  height: calc(12 * var(--pt));
  background: #ef3a3a;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><path d='M12 1 C 12 1 2 14 2 21 a10 10 0 0 0 20 0 C22 14 12 1 12 1 Z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'><path d='M12 1 C 12 1 2 14 2 21 a10 10 0 0 0 20 0 C22 14 12 1 12 1 Z'/></svg>") center / contain no-repeat;
}

.drop-inline {
  width: calc(9 * var(--pt));
  height: calc(13 * var(--pt));
  vertical-align: -0.2em;
  margin-right: calc(4 * var(--pt));
}

.pms-mens {
  margin: calc(14 * var(--pt)) 0 0;
  font-size: calc(13 * var(--pt));
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  text-align: left;
}

/* ---------- Check In tile ---------- */
.mood-card {
  margin-top: calc(4 * var(--pt));
  padding: calc(18 * var(--pt)) calc(14 * var(--pt)) calc(20 * var(--pt));
  text-align: center;
}

.mood-card p {
  margin: 0 0 calc(14 * var(--pt));
  color: rgba(255, 255, 255, 0.6);
  font-size: calc(17 * var(--pt));
  font-weight: 700;
  line-height: 1.18;
}

.mood-row {
  display: flex;
  justify-content: center;
  gap: calc(8 * var(--pt));
  font-size: calc(28 * var(--pt));
  line-height: 1;
}

.notice-card { margin-top: calc(12 * var(--pt)); }

.notice-card h4 {
  margin: 0 0 calc(12 * var(--pt));
  font-size: calc(17 * var(--pt));
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--pt));
}

.chip-grid span {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  min-height: calc(26 * var(--pt));
  padding: 0 calc(10 * var(--pt));
  border: calc(1.5 * var(--pt)) solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(12 * var(--pt));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.chip-grid i { font-style: normal; font-size: 1.1em; line-height: 1; }

.chip-grid .is-filled {
  border-color: #6b46c1;
  background: #6b46c1;
  color: #fff;
}

/* ---------- Mobile tightening ---------- */
@media (max-width: 700px) {
  body.landing-page .hero-phones--apple {
    gap: clamp(10px, 2vw, 18px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 0 16px;
    scrollbar-width: none;
  }
  body.landing-page .hero-phones--apple::-webkit-scrollbar { display: none; }
  body.landing-page .hero-phone-cell {
    width: clamp(150px, 38vw, 200px);
    scroll-snap-align: center;
    flex-shrink: 0;
  }
}

/* ---------- Twemoji inline images ---------- */
.phone-tile .emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.18em;
  margin: 0;
}

/* Card emoji (😎 in tile 1) sits a touch lower */
.card-emoji .emoji { width: 1em; height: 1em; vertical-align: top; }

/* Mood row emojis are sized via parent font-size */
.mood-row .emoji { width: 1em; height: 1em; vertical-align: middle; }

/* Chip leading emoji */
.chip-grid i .emoji { width: 1.1em; height: 1.1em; vertical-align: -0.22em; }

/* Inline drop emoji (PMS streak fire, week-note moon, menstruation drop) */
.pms-streak .emoji,
.week-note .emoji { width: 1em; height: 1em; vertical-align: -0.2em; }

/* ---------- Reduced-motion / mobile tightening ---------- */
@media (max-width: 560px) {
  body.landing-page .hero-phone.hero-phone--coded { border-radius: 19px; }
}