/* ==========================================================================
   Sleep Hours Calculator - Luxury Editorial Design System
   Features:
   - Truly Instant 0ms Zero-Delay Theme Switching (No transition latency on root variables)
   - Night Mode: True Matte Finish (#090B0E / #0E1217) with Realistic Night Sky
       * Natural multi-magnitude shining starfield covering full screen
       * Animated shooting stars across the deep cosmos
       * Zero square / rectangular rotating artifacts
   - Day Mode: Realistic Overcast / Floating Cloudscape filling the sky
       * Multi-layered real-looking puffy cloud clusters moving across screen
   - Clean Header: Blog link removed from top header (retained in footer)
   - Clean Home Page: Blog article cards removed from home page
   - Cute "Coming Soon" Sleep Science Journal placeholder on /blog/ pages
   - High contrast, never-patchy buttons in both themes
   ========================================================================== */

:root {
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* TRUE MATTE OBSIDIAN NIGHT PALETTE (Deep, matte, non-glossy, zero purple) */
  --bg-color: #080A0D;
  --bg-surface: #0E1217;
  --card-bg: rgba(14, 18, 24, 0.82);
  --card-bg-subtle: #141A23;
  --card-border: rgba(255, 255, 255, 0.08);
  --card-border-hover: rgba(245, 158, 11, 0.5);
  --text-main: #F1F4F9;
  --text-muted: #94A3B8;

  /* Primary Button: Solar Amber Gold */
  --btn-primary: #F59E0B;
  --btn-primary-hover: #D97706;
  --btn-primary-glow: rgba(245, 158, 11, 0.35);
  --btn-text: #080A0D;
  --highlight: #FCD34D;
  --accent-gold: #F59E0B;
  --accent-italic: #FCD34D;
  --header-bg: rgba(8, 10, 13, 0.88);
  --header-border: rgba(255, 255, 255, 0.07);

  --faq-curtain-solid: rgba(8, 10, 13, 0.96);
  --faq-curtain-fade: rgba(8, 10, 13, 0);

  --dashed-border: rgba(255, 255, 255, 0.12);

  /* Result Cards */
  --color-ideal: #2DD4BF;
  --color-ideal-bg: rgba(45, 212, 191, 0.12);
  --color-optimal: #F59E0B;
  --color-optimal-bg: rgba(245, 158, 11, 0.12);
  --color-minimum: #FB923C;
  --color-minimum-bg: rgba(251, 146, 60, 0.12);
  --color-light: #A78BFA;
  --color-light-bg: rgba(167, 139, 250, 0.12);

  --shadow-card: 0 16px 40px -10px rgba(0, 0, 0, 0.7), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
}

[data-theme="light"] {
  /* WARM SILK LINEN & OBSIDIAN INK (Heek Editorial Luxury Palette) */
  --bg-color: #FAF8F5; /* Warm Italian silk linen canvas */
  --bg-surface: #FAF8F5;
  --card-bg: #FFFFFF; /* Crisp pure porcelain white */
  --card-bg-subtle: #F3EFEA; /* Soft warm parchment tone */
  --card-border: rgba(15, 23, 42, 0.08); /* Delicate hairline border */
  --card-border-hover: rgba(217, 119, 6, 0.45);
  --text-main: #0F172A; /* Velvet obsidian ink */
  --text-muted: #64748B; /* Refined warm slate */

  /* Primary Button: Solar Honey / Sunlit Amber Gold */
  --btn-primary: #D97706;
  --btn-primary-hover: #B45309;
  --btn-primary-glow: rgba(217, 119, 6, 0.25);
  --btn-text: #FFFFFF;
  --highlight: #D97706;
  --accent-gold: #D97706;
  --accent-italic: #B45309;
  --header-bg: rgba(250, 248, 245, 0.94);
  --header-border: rgba(15, 23, 42, 0.06);

  --faq-curtain-solid: rgba(250, 248, 245, 0.96);
  --faq-curtain-fade: rgba(250, 248, 245, 0);

  --dashed-border: rgba(15, 23, 42, 0.12);

  --color-ideal-bg: rgba(45, 212, 191, 0.15);
  --color-optimal: #D97706;
  --color-optimal-bg: rgba(217, 119, 6, 0.1);
  --color-minimum-bg: rgba(245, 158, 11, 0.12);
  --color-light-bg: rgba(167, 139, 250, 0.12);
  --shadow-card: 0 16px 40px -10px rgba(15, 23, 42, 0.06), 0 0 1px 1px rgba(15, 23, 42, 0.04);
}

/* RTL Support */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-color);
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 64px;
  overflow-x: clip;
  max-width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

/* ==========================================================================
   Atmospheric Background Canvas:
   - Full Night Sky: Multi-magnitude stars, soft cosmic dust & shooting stars
   - Full Day Sky: Realistic drifting layered cumulus & cirrus clouds
   ========================================================================== */

#sky-background {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  max-width: 100%;
}

/* 1. SEAMLESS NIGHT SKY (Pure Matte Obsidian with Full Stars & Meteors) */
.night-galaxy {
  position: absolute;
  inset: 0;
  background-color: #07090E;
  overflow: hidden;
}

#night-sky-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* 2. REALISTIC DAY SKY FULL OF FLOATING CLOUDS (Rich Cloudy Weather Experience) */
.day-clouds {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #5CA4E8 0%, #83BFF5 22%, #B5DCFA 55%, #EAF4FD 85%, #F8FAFC 100%);
  overflow: hidden;
}

[data-theme="light"] .night-galaxy { display: none !important; }
:root:not([data-theme="light"]) .day-clouds { display: none !important; }

/* Real Realistic Cumulus Cloud Drift Layers */
.real-cloud {
  position: absolute;
  filter: blur(14px);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* Cloud Layer 1: High massive billowy overcast cloud bank */
.cloud-drift-1 {
  width: 1400px;
  height: 380px;
  top: -60px;
  left: -1300px;
  background: radial-gradient(ellipse at 40% 60%, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 255, 0.85) 45%, rgba(220, 238, 252, 0.6) 65%, transparent 80%);
  animation: glideClouds 52s linear infinite;
}

/* Cloud Layer 2: Mid-altitude puffy cumulus clouds drifting reverse */
.cloud-drift-2 {
  width: 1200px;
  height: 360px;
  top: 15%;
  right: -1100px;
  background: radial-gradient(ellipse at 60% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(235, 246, 255, 0.8) 50%, rgba(210, 233, 250, 0.5) 70%, transparent 82%);
  animation: glideCloudsReverse 68s linear infinite;
}

/* Cloud Layer 3: Central dense rolling cloud formation */
.cloud-drift-3 {
  width: 1350px;
  height: 420px;
  top: 36%;
  left: -1250px;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.96) 0%, rgba(245, 250, 255, 0.85) 50%, rgba(218, 236, 252, 0.55) 72%, transparent 84%);
  animation: glideClouds 62s linear infinite 12s;
}

/* Cloud Layer 4: Lower atmospheric rolling cumulus */
.cloud-drift-4 {
  width: 1100px;
  height: 340px;
  top: 58%;
  right: -1000px;
  background: radial-gradient(ellipse at 45% 55%, rgba(255, 255, 255, 0.94) 0%, rgba(238, 247, 255, 0.75) 48%, rgba(205, 230, 250, 0.45) 70%, transparent 80%);
  animation: glideCloudsReverse 58s linear infinite 6s;
}

/* Cloud Layer 5: Base atmospheric cloud drift near horizon */
.cloud-drift-5 {
  width: 1500px;
  height: 380px;
  top: 75%;
  left: -1400px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.92) 0%, rgba(242, 248, 255, 0.7) 50%, rgba(220, 238, 252, 0.4) 75%, transparent 85%);
  animation: glideClouds 75s linear infinite 18s;
}

/* Cloud Layer 6: Fast-moving wispy cirrocumulus accent */
.cloud-drift-6 {
  width: 900px;
  height: 240px;
  top: 25%;
  left: -850px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.65) 55%, transparent 78%);
  animation: glideClouds 44s linear infinite 8s;
}

@keyframes glideClouds {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 1500px)); }
}

@keyframes glideCloudsReverse {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100vw - 1500px)); }
}

/* Cute Coming Soon Placeholder Card */
.coming-soon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 1rem 5rem;
}

.coming-soon-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 3.5rem 2.2rem;
  max-width: 680px;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--accent-gold);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

[data-theme="light"] .coming-soon-badge {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.2);
  color: var(--btn-primary);
}

.coming-soon-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.5rem;
  background: var(--card-bg-subtle);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  color: var(--accent-gold);
}

[data-theme="light"] .coming-soon-icon {
  color: var(--btn-primary);
}

.coming-soon-title {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  margin-bottom: 1rem;
}

.coming-soon-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 2rem;
}

.coming-soon-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.coming-soon-pill {
  padding: 0.5rem 1rem;
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  color: var(--text-main);
  font-weight: 500;
}

/* Page content elements */
.site-header, main, .site-footer, .breadcrumb-container {
  position: relative;
  z-index: 2;
}

/* Accessible Skip Link */
.skip-link {
  position: absolute;
  top: -60px;
  left: 1rem;
  background: var(--btn-primary);
  color: var(--btn-text) !important;
  padding: 0.75rem 1.25rem;
  z-index: 10000;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 1rem;
}

/* Typography - Silicon Valley Editorial Luxury */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
  letter-spacing: -0.018em;
}

h1 { font-size: clamp(2.35rem, 4.8vw, 3.8rem); line-height: 1.12; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.65rem); line-height: 1.18; margin-bottom: 1rem; }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.24; margin-bottom: 0.5rem; }

h1 em, h2 em, h3 em, .editorial-italic {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-gold);
}

[data-theme="light"] h1 em,
[data-theme="light"] h2 em,
[data-theme="light"] h3 em,
[data-theme="light"] .editorial-italic {
  color: var(--accent-italic);
}

p {
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.68;
}

a {
  color: var(--accent-gold);
  text-decoration: none;
}
[data-theme="light"] a {
  color: var(--btn-primary);
}
a:hover {
  color: var(--highlight);
}

/* Vector SVG Icons */
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Header Styles (Fixed at top of viewport permanently) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: 64px;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--header-border);
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.header-container {
  position: relative;
  width: 100%;
  max-width: 1240px;
  height: 64px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  box-sizing: border-box;
}

.header-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-main);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .brand-name {
    display: none !important;
  }
  .site-brand {
    gap: 0;
  }
}

.brand-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-logo-img {
  width: 28px;
  height: auto;
  display: block;
  object-fit: contain;
}

[data-theme="light"] .brand-icon-wrap {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.35);
}

.site-nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-nav {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
  }
}

.nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 1.85rem;
}

.nav-item {
  position: relative;
}

.nav-link, .nav-dropdown-btn {
  color: var(--text-muted) !important;
  font-size: 0.95rem;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  transition: color 0.15s ease;
}

.nav-link:hover, .nav-dropdown-btn:hover {
  color: var(--text-main) !important;
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--card-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 0.65rem;
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  z-index: 1010;
  max-height: 480px;
  overflow-y: auto;
}

[dir="rtl"] .dropdown-menu {
  left: auto;
  right: 0;
}

.nav-item:hover .dropdown-menu,
.nav-item.is-open .dropdown-menu,
.nav-item:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.dropdown-menu a:hover {
  background: var(--card-bg-subtle);
  color: var(--text-main);
}

/* Header Right Actions */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.lang-dropdown {
  position: relative;
  flex-shrink: 0;
}

.lang-toggle-btn {
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  color: var(--text-main);
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  flex-shrink: 0;
}

.lang-text-mobile {
  display: none;
  font-weight: 700;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .lang-text-desktop {
    display: none !important;
  }
  .lang-text-mobile {
    display: inline !important;
  }
  .lang-toggle-btn {
    padding: 0.4rem 0.55rem;
    gap: 0.3rem;
  }
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 0.4rem;
  min-width: 145px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  z-index: 1020;
}

[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}

.lang-dropdown:hover .lang-menu,
.lang-dropdown.is-open .lang-menu,
.lang-dropdown:focus-within .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-menu a {
  display: block;
  padding: 0.5rem 0.8rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
}

.lang-menu a.active-lang,
.lang-menu a:hover {
  background: var(--card-bg-subtle);
  color: var(--accent-gold);
  font-weight: 600;
}
[data-theme="light"] .lang-menu a.active-lang,
[data-theme="light"] .lang-menu a:hover {
  color: var(--btn-primary);
}

/* Mode Switch Button (Instant 0ms Switch) */
.theme-toggle {
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  color: var(--text-main);
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}

.theme-toggle:hover {
  border-color: var(--card-border-hover);
}

[data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; color: var(--btn-primary); }
:root:not([data-theme="light"]) .theme-icon-sun { display: block; color: var(--accent-gold); }
:root:not([data-theme="light"]) .theme-icon-moon { display: none; }

/* Header Calculate Button (Strictly Desktop >= 1024px only with Soft Ambient Aura Glow) */
.header-calc-btn {
  display: none !important;
}

@media (min-width: 1024px) {
  .header-calc-btn {
    display: inline-flex !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    padding: 0.55rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    position: relative;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.42), 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.25s ease;
  }
  .header-calc-btn:hover {
    box-shadow: 0 0 28px rgba(245, 158, 11, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
  }
}

[data-theme="light"] .header-calc-btn {
  background: var(--btn-primary);
  border: 1px solid rgba(217, 119, 6, 0.28);
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.32), 0 1px 3px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .header-calc-btn:hover {
  background: var(--btn-primary-hover);
  box-shadow: 0 6px 26px rgba(217, 119, 6, 0.5), 0 2px 6px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

:root:not([data-theme="light"]) .header-calc-btn {
  color: #080A0D !important;
}

/* 44px Guaranteed Mobile Menu Button (Never cut off) */
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 11px;
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0 !important;
  margin: 0 !important;
  position: relative;
  z-index: 1010;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .mobile-menu-btn {
    display: none !important;
  }
  .site-nav {
    display: block !important;
  }
}

@media (max-width: 1023px) {
  .site-nav {
    display: none !important;
  }
  .mobile-menu-btn {
    display: flex !important;
  }
}

.mobile-menu-btn .bar {
  width: 100%;
  height: 2px;
  background-color: var(--text-main);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

.mobile-menu-btn.is-active .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu-btn.is-active .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-btn.is-active .bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Drawer (Full-Width, Fixed, Scrollable) */
.mobile-nav {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  z-index: 9999;
  display: none;
  overflow: hidden;
  box-sizing: border-box;
}

.mobile-nav.is-open {
  display: block !important;
}

.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mobile-nav-panel {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-color);
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  padding: 1.25rem 1.25rem 3rem;
  box-sizing: border-box;
}

.mobile-nav-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 480px;
  margin: 0 auto;
}

.mobile-accordion-group {
  border-top: 1px solid var(--card-border);
  padding: 0.25rem 0;
}

.mobile-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.25rem;
  background: none;
  border: none;
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.mobile-accordion-toggle .svg-icon {
  transition: transform 0.2s ease;
}

.mobile-accordion-toggle[aria-expanded="true"] .svg-icon {
  transform: rotate(180deg);
}

.mobile-accordion-panel {
  display: none;
  padding-bottom: 0.6rem;
}

.mobile-accordion-toggle[aria-expanded="true"] + .mobile-accordion-panel {
  display: block;
}

.mobile-links-grid {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-left: 0.5rem;
}

.mobile-links-grid a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.95rem;
}

.mobile-links-grid a:hover {
  color: var(--text-main);
  background: var(--card-bg-subtle);
}

.mobile-nav-direct-links {
  border-top: 1px solid var(--card-border);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mobile-nav-direct-links a {
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.25rem 0.25rem;
}

.mobile-nav-inner a.calc-highlight {
  background: var(--btn-primary);
  color: var(--btn-text) !important;
  padding: 0.85rem 1rem;
  text-align: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-weight: 700;
  box-shadow: 0 4px 14px var(--btn-primary-glow);
}

/* Base Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-md);
  font-size: 0.98rem;
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.12s ease;
}

.btn-primary {
  background-color: var(--btn-primary);
  color: var(--btn-text) !important;
  box-shadow: 0 4px 18px var(--btn-primary-glow);
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
  color: var(--btn-text) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--card-bg-subtle);
  color: var(--text-main) !important;
  border: 1px solid var(--card-border);
}

.btn-secondary:hover {
  border-color: var(--card-border-hover);
  color: var(--text-main) !important;
  transform: translateY(-1px);
}

/* ==============================================================================
   Chromatic / Prismatic Specular Metallic Reflection Ring (button animated.mp4 style)
   Applied to all main tool calculator action buttons across the site
   ============================================================================== */
.calculator-container .btn-primary,
.btn-specular-ring {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: none !important;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 18px var(--btn-primary-glow), 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 0.15s ease, box-shadow 0.25s ease;
  isolation: isolate;
}

/* 1. Rotating Conic Chromatic Specular Beam (Rainbow / Metallic Prismatic Ring) */
.calculator-container .btn-primary::before,
.btn-specular-ring::before {
  content: '';
  position: absolute;
  top: -150%;
  left: -50%;
  width: 200%;
  height: 400%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 255deg,
    rgba(129, 140, 248, 0.8) 288deg,  /* Prismatic violet dispersion */
    rgba(56, 189, 248, 0.95) 318deg,   /* Electric cyan refraction */
    #ffffff 344deg,                     /* White-hot specular core */
    rgba(245, 158, 11, 0.95) 355deg,   /* Solar amber flare */
    transparent 360deg
  );
  animation: specularMetallicSpin 4.5s linear infinite;
  pointer-events: none;
  z-index: -2;
}

/* 2. Inner Button Surface Face (leaves 2px metallic chamfered rim for the reflection) */
.calculator-container .btn-primary::after,
.btn-specular-ring::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: inherit;
  border-radius: calc(var(--radius-md) - 2px);
  z-index: -1;
  pointer-events: none;
  transition: filter 0.2s ease;
}

/* Hover Acceleration & Specular Flare */
.calculator-container .btn-primary:hover,
.btn-specular-ring:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 26px var(--btn-primary-glow), 0 0 14px rgba(245, 158, 11, 0.4);
}

.calculator-container .btn-primary:hover::before,
.btn-specular-ring:hover::before {
  animation-duration: 2.2s; /* Accelerates on hover */
}

.calculator-container .btn-primary:hover::after,
.btn-specular-ring:hover::after {
  filter: brightness(1.07);
}

/* Light Theme Calibration: Warm Bronze, Liquid Honey & Crisp Specular Core */
[data-theme="light"] .calculator-container .btn-primary,
[data-theme="light"] .btn-specular-ring {
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .calculator-container .btn-primary::before,
[data-theme="light"] .btn-specular-ring::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 255deg,
    rgba(217, 119, 6, 0.75) 288deg,    /* Warm bronze */
    rgba(245, 158, 11, 0.95) 318deg,   /* Rich amber */
    #ffffff 344deg,                     /* Crisp specular gleam */
    rgba(251, 191, 36, 0.95) 355deg,   /* Champagne gold */
    transparent 360deg
  );
}

[data-theme="light"] .calculator-container .btn-primary:hover,
[data-theme="light"] .btn-specular-ring:hover {
  box-shadow: 0 6px 26px rgba(217, 119, 6, 0.45), 0 0 14px rgba(217, 119, 6, 0.3);
}

@keyframes specularMetallicSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .calculator-container .btn-primary::before,
  .btn-specular-ring::before {
    animation: none;
  }
}

/* Breadcrumbs */
.breadcrumb-container {
  max-width: 1240px;
  margin: 1.25rem auto 0;
  padding: 0 1.5rem;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.crumb-separator {
  margin: 0 0.35rem;
  opacity: 0.4;
}

.breadcrumb-list a {
  color: var(--text-muted);
}

.breadcrumb-list a:hover {
  color: var(--text-main);
}

/* Hero Section - Silicon Valley Luxury Editorial */
.hero-section {
  position: relative;
  padding: clamp(4rem, 6.5vw, 6rem) 1.5rem 3rem;
  text-align: center;
}

.hero-content {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-gold);
  margin-bottom: 1.5rem;
  font-weight: 500;
}

[data-theme="light"] .hero-badge {
  color: var(--btn-primary);
  border-color: rgba(15, 23, 42, 0.12);
}

.hero-title {
  font-size: clamp(2.45rem, 5.2vw, 4.1rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-bottom: 1.15rem;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.2vw, 1.32rem);
  font-weight: 400;
  line-height: 1.68;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 auto 1.85rem;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.95rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Translucent Glassmorphic Calculator Container */
.calculator-container {
  max-width: 820px;
  margin: 0 auto 3rem;
  background: var(--card-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2.4rem;
  position: relative;
  z-index: 5;
}

@media (max-width: 640px) {
  .calculator-container {
    padding: 1.5rem 1.15rem;
    border-radius: var(--radius-md);
  }
}

/* Mode Tabs */
.calc-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--card-bg-subtle);
  padding: 0.4rem;
  border-radius: var(--radius-md);
  gap: 0.4rem;
  margin-bottom: 2rem;
  border: 1px solid var(--card-border);
}

@media (max-width: 640px) {
  .calc-tabs {
    grid-template-columns: 1fr;
  }
}

.tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.85rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.tab-btn.active {
  background: var(--btn-primary);
  color: var(--btn-text) !important;
  box-shadow: 0 4px 14px var(--btn-primary-glow);
}

/* Input Row */
.input-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
  text-align: left;
}

.input-label {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.time-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.time-input-field {
  flex: 1;
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 1.95rem;
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 0.9rem 1.3rem;
  outline: none;
  text-align: center;
}

.time-input-field:focus {
  border-color: var(--card-border-hover);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}
[data-theme="light"] .time-input-field:focus {
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.15);
}

/* Advanced Settings Accordion */
.advanced-settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  margin: 1.35rem auto;
  font-weight: 600;
}

.advanced-settings-toggle:hover {
  color: var(--text-main);
}

.advanced-panel {
  display: none;
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  margin-bottom: 1.85rem;
  text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.35rem;
}

.advanced-panel.open {
  display: grid;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.settings-field label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

.settings-field input, .settings-field select {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-main);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}

/* Results Display */
.results-box {
  margin-top: 2.35rem;
  padding-top: 2.15rem;
  border-top: 1px solid var(--card-border);
}

.results-heading {
  font-size: 1.3rem;
  margin-bottom: 1.6rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.result-card {
  border-radius: var(--radius-md);
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.result-card:hover {
  transform: translateY(-2px);
}

.result-card.ideal {
  background: var(--color-ideal-bg);
  border-color: var(--color-ideal);
}
.result-card.ideal .card-time { color: var(--color-ideal); }

.result-card.optimal {
  background: var(--color-optimal-bg);
  border-color: var(--color-optimal);
}
.result-card.optimal .card-time { color: var(--color-optimal); }

.result-card.minimum {
  background: var(--color-minimum-bg);
  border-color: var(--color-minimum);
}
.result-card.minimum .card-time { color: var(--color-minimum); }

.result-card.light {
  background: var(--color-light-bg);
  border-color: var(--color-light);
}
.result-card.light .card-time { color: var(--color-light); }

.card-tag {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.55rem;
  display: block;
}

.card-time {
  font-size: 2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.55rem;
  letter-spacing: -0.02em;
}

.card-meta {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Sleep Timeline Bar */
.sleep-timeline-container {
  background: var(--card-bg-subtle);
  border-radius: var(--radius-md);
  padding: 1.45rem;
  margin-bottom: 1.85rem;
  border: 1px solid var(--card-border);
}

.timeline-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.9rem;
  text-align: left;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.timeline-track {
  display: flex;
  height: 28px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  margin-bottom: 0.9rem;
}

.timeline-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.seg-fall { background: #64748B; }
.seg-c1 { background: #0284C7; }
.seg-c2 { background: #0D9488; }
.seg-c3 { background: #6366F1; }
.seg-c4 { background: #8B5CF6; }
.seg-c5 { background: #F59E0B; }
.seg-c6 { background: #10B981; }

.timeline-labels {
  display: grid;
  grid-template-columns: 18% 22% 24% 20% 16%;
  align-items: start;
  width: 100%;
  margin-top: 0.65rem;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--text-muted);
}

.timeline-labels span:first-child {
  text-align: left;
}

.timeline-labels span:nth-child(2),
.timeline-labels span:nth-child(3),
.timeline-labels span:nth-child(4) {
  text-align: center;
}

.timeline-labels span:last-child {
  text-align: right;
}

@media (max-width: 600px) {
  .timeline-labels {
    font-size: 0.68rem;
    line-height: 1.2;
    grid-template-columns: 17% 23% 24% 21% 15%;
  }
}

/* Result Action Buttons (Guaranteed 1 single row on all mobile screens & desktop) */
.action-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  width: 100%;
  max-width: 600px;
  margin: 1.6rem auto 0;
  box-sizing: border-box;
}

.action-buttons .btn {
  width: 100%;
  padding: 0.68rem 0.5rem;
  font-size: 0.88rem;
  white-space: nowrap;
  letter-spacing: -0.01em;
  gap: 0.4rem;
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
}

.action-buttons .btn svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

@media (max-width: 480px) {
  .action-buttons {
    gap: 0.45rem;
  }
  .action-buttons .btn {
    font-size: 0.82rem;
    padding: 0.62rem 0.35rem;
    gap: 0.3rem;
    border-radius: var(--radius-sm);
  }
  .action-buttons .btn svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 350px) {
  .action-buttons {
    gap: 0.35rem;
  }
  .action-buttons .btn {
    font-size: 0.76rem;
    padding: 0.55rem 0.25rem;
    gap: 0.25rem;
  }
}

/* Why This Time Callout */
.why-this-time-box {
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  margin: 2rem 0;
  text-align: left;
}

.why-this-time-box h4 {
  font-size: 1.1rem;
  color: var(--text-main);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Quick Answer Section */
.quick-answer-card {
  max-width: 900px;
  margin: 0 auto 3rem;
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--btn-primary);
  border-radius: var(--radius-md);
  padding: 1.85rem;
  text-align: left;
  box-shadow: var(--shadow-card);
}

/* Content Sections - Silicon Valley Uncluttered Architecture */
.section-divider {
  border: none;
  border-top: 1px dashed var(--dashed-border);
  margin: 0 auto;
  width: 100%;
  max-width: 1180px;
  opacity: 0.75;
}

.content-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(4.5rem, 7vw, 7.5rem) 1.5rem;
  position: relative;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent-gold);
  margin-bottom: 0.85rem;
}

[data-theme="light"] .section-kicker {
  color: var(--accent-italic);
}

.section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(2.5rem, 4.5vw, 4rem);
}

.section-header h2 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Three Steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.85rem;
}

.step-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 2.15rem;
  text-align: left;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.step-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
}

.step-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  margin-bottom: 1.35rem;
}
[data-theme="light"] .step-icon-wrap {
  background: rgba(15, 23, 42, 0.08);
  color: var(--btn-primary);
}

/* Calculators Grid */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.45rem;
}

.tool-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.tool-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
}

.tool-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(245, 158, 11, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  margin-bottom: 1.1rem;
}
[data-theme="light"] .tool-icon-wrap {
  background: rgba(15, 23, 42, 0.08);
  color: var(--btn-primary);
}

.tool-card-title {
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
  color: var(--text-main);
}

.tool-card-desc {
  font-size: 0.9rem;
  margin-bottom: 1.1rem;
  color: var(--text-muted);
}

/* Age Grid */
.age-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.age-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.6rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.age-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
}

.age-hours {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin: 0.55rem 0 0.3rem;
}
[data-theme="light"] .age-hours {
  color: var(--btn-primary);
}

/* Popular Wake Up Time Chips */
.chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  justify-content: center;
}

.chip-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-full);
  padding: 0.8rem 1.75rem;
  color: var(--text-main);
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.chip-item:hover {
  border-color: var(--card-border-hover);
  background: var(--card-bg-subtle);
  transform: translateY(-2px);
}

/* SVG Sleep Diagram */
.sleep-stages-box {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.svg-diagram {
  width: 100%;
  max-width: 840px;
  height: auto;
  margin: 1.85rem auto 0;
}

/* ==============================================================================
   Standard FAQ Accordion (For All Tool & Guide Pages - Restored Boxed Card Style)
   ============================================================================== */
.faq-block,
.tool-guide-block.faq-block {
  margin-bottom: 4.5rem;
}

.faq-accordion:not(.home-faq-accordion) {
  max-width: 840px;
  margin: 0 auto 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tool page cards: restored to previous classic boxed card style */
.tool-guide-block .faq-item,
.faq-accordion:not(.home-faq-accordion) .faq-item {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.tool-guide-block .faq-item:hover,
.faq-accordion:not(.home-faq-accordion) .faq-item:hover {
  border-color: var(--card-border-hover);
  background: var(--card-bg);
  transform: translateY(-2px);
}

.tool-guide-block .faq-item.open,
.faq-accordion:not(.home-faq-accordion) .faq-item.open {
  background: var(--card-bg);
  border-color: var(--card-border-hover);
}

.tool-guide-block .faq-question-btn,
.faq-accordion:not(.home-faq-accordion) .faq-question-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 1.45rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  color: var(--text-main);
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: normal !important;
}

[dir="rtl"] .tool-guide-block .faq-question-btn,
[dir="rtl"] .faq-accordion:not(.home-faq-accordion) .faq-question-btn {
  text-align: right;
}

.tool-guide-block .faq-question-btn span,
.faq-accordion:not(.home-faq-accordion) .faq-question-btn span {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 600;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--text-main);
  transition: color 0.15s ease;
}

.tool-guide-block .faq-item:hover .faq-question-btn span,
.tool-guide-block .faq-item.open .faq-question-btn span,
.faq-accordion:not(.home-faq-accordion) .faq-item:hover .faq-question-btn span,
.faq-accordion:not(.home-faq-accordion) .faq-item.open .faq-question-btn span {
  color: var(--accent-gold);
}

[data-theme="light"] .tool-guide-block .faq-item:hover .faq-question-btn span,
[data-theme="light"] .tool-guide-block .faq-item.open .faq-question-btn span,
[data-theme="light"] .faq-accordion:not(.home-faq-accordion) .faq-item:hover .faq-question-btn span,
[data-theme="light"] .faq-accordion:not(.home-faq-accordion) .faq-item.open .faq-question-btn span {
  color: var(--btn-primary);
}

.tool-guide-block .faq-answer,
.faq-accordion:not(.home-faq-accordion) .faq-answer {
  display: none;
  padding: 0 1.75rem 1.5rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.tool-guide-block .faq-item.open .faq-answer,
.faq-accordion:not(.home-faq-accordion) .faq-item.open .faq-answer {
  display: block;
}

/* ==============================================================================
   Home Page Exclusive: 2-Column Editorial FAQ Presentation (Website Design 4 Style)
   ============================================================================== */
.home-faq-block .faq-two-col {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: clamp(2.5rem, 5.5vw, 5.5rem);
  align-items: start;
}

/* Desktop: Left Column Stays Sticky Alongside Right Accordion */
@media (min-width: 960px) {
  .home-faq-block .faq-col-left {
    position: sticky;
    top: 96px;
    text-align: left;
  }
}

[dir="rtl"] .home-faq-block .faq-col-left {
  text-align: right;
}

.home-faq-block .faq-col-left .section-kicker {
  margin-bottom: 0.75rem;
}

.home-faq-block .faq-headline {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-bottom: 1.15rem;
  color: var(--text-main);
}

.home-faq-block .faq-headline em {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-gold);
}

[data-theme="light"] .home-faq-block .faq-headline em {
  color: var(--accent-italic);
}

.home-faq-block .faq-lead-text {
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--text-muted);
  margin-bottom: 2rem;
  max-width: 440px;
}

.home-faq-block .faq-cta-wrap {
  display: flex;
}

.home-faq-block .faq-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-main) !important;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.08);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-faq-block .faq-cta-pill:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-2px);
  color: var(--accent-gold) !important;
}

.home-faq-block .faq-cta-pill:hover .faq-cta-arrow {
  transform: translateX(3px);
}

[dir="rtl"] .home-faq-block .faq-cta-pill:hover .faq-cta-arrow {
  transform: translateX(-3px);
}

/* ==============================================================================
   Mobile: Sticky Editorial Curtain with Soft Atmospheric Dissolve (< 960px)
   ============================================================================== */
@media (max-width: 959px) {
  .home-faq-block .faq-two-col {
    display: block;
    position: relative;
  }

  .home-faq-block .faq-col-left {
    position: -webkit-sticky;
    position: sticky;
    top: 63px; /* Sits flush beneath the 64px fixed header */
    z-index: 20;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 1.15rem 1.5rem 2.25rem 1.5rem;
    background: linear-gradient(
      180deg,
      var(--faq-curtain-solid) 0%,
      var(--faq-curtain-solid) 78%,
      var(--faq-curtain-fade) 100%
    );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    text-align: left;
    pointer-events: auto;
  }

  [dir="rtl"] .home-faq-block .faq-col-left {
    text-align: right;
  }

  .home-faq-block .faq-col-left .section-kicker {
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
  }

  .home-faq-block .faq-headline {
    font-size: clamp(1.75rem, 5.2vw, 2.15rem);
    line-height: 1.18;
    margin-bottom: 0.65rem;
  }

  .home-faq-block .faq-lead-text {
    font-size: 0.94rem;
    line-height: 1.52;
    margin-bottom: 1.15rem;
    max-width: 100%;
  }

  .home-faq-block .faq-cta-pill {
    padding: 0.6rem 1.25rem;
    font-size: 0.88rem;
  }

  .home-faq-block .faq-col-right {
    position: relative;
    z-index: 1;
    margin-top: 1.25rem;
  }
}

/* Home Page Right Column: Hairline Rows with Subtle Translucent Pill Highlight */
.home-faq-block .faq-col-right {
  width: 100%;
}

.home-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.home-faq-accordion .faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dashed-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: none;
  transform: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.home-faq-accordion .faq-item:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--dashed-border);
  transform: none !important;
}

[data-theme="light"] .home-faq-accordion .faq-item:hover {
  background: rgba(15, 23, 42, 0.025);
}

.home-faq-accordion .faq-item.open {
  background: var(--card-bg-subtle);
  border-bottom-color: rgba(245, 158, 11, 0.3);
  transform: none !important;
}

[data-theme="light"] .home-faq-accordion .faq-item.open {
  background: #FFFFFF;
  border-bottom-color: rgba(217, 119, 6, 0.3);
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.04);
}

.home-faq-accordion .faq-question-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 1.35rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
  outline: none;
}

[dir="rtl"] .home-faq-accordion .faq-question-btn {
  text-align: right;
}

/* Refined Uppercase Question Text ONLY on Home Page */
.home-faq-accordion .faq-question-text {
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--text-main);
  transition: color 0.18s ease;
}

.home-faq-accordion .faq-item:hover .faq-question-text,
.home-faq-accordion .faq-item.open .faq-question-text {
  color: var(--accent-gold);
}

[data-theme="light"] .home-faq-accordion .faq-item:hover .faq-question-text,
[data-theme="light"] .home-faq-accordion .faq-item.open .faq-question-text {
  color: var(--btn-primary);
}

.home-faq-accordion .faq-answer {
  display: none;
  padding: 0 1.15rem 1.45rem;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  animation: faqAnswerFadeIn 0.25s ease-out;
}

.home-faq-accordion .faq-item.open .faq-answer {
  display: block;
}

/* Shared Rotating Geometric + Icon */
.faq-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

[data-theme="light"] .faq-icon-wrap {
  color: var(--btn-primary);
}

.faq-item.open .faq-icon-wrap {
  transform: rotate(45deg);
  background: var(--btn-primary);
  border-color: var(--btn-primary);
  color: var(--btn-text) !important;
}

.faq-answer {
  display: none;
  padding: 0 1.15rem 1.45rem;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  animation: faqAnswerFadeIn 0.25s ease-out;
}

.faq-item.open .faq-answer {
  display: block;
}

@keyframes faqAnswerFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Call to Action Banner */
.cta-banner {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 3.8rem 2rem;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 5rem;
  box-shadow: var(--shadow-card);
}

/* Tables */
.data-table-wrapper {
  overflow-x: auto;
  margin: 1.85rem 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.96rem;
}

[dir="rtl"] .data-table {
  text-align: right;
}

.data-table th, .data-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--card-border);
}

.data-table th {
  background: var(--card-bg-subtle);
  font-weight: 700;
  color: var(--text-main);
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* Footer */
.site-footer {
  margin-top: auto;
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--card-border);
  padding: 4.8rem 1.5rem 2.6rem;
}

.footer-grid {
  max-width: 1240px;
  margin: 0 auto 3.2rem;
  display: grid;
  grid-template-columns: 1.35fr 1.15fr 1fr 1fr;
  gap: 2.85rem;
}

.col-brand .footer-logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-main);
  margin-bottom: 0.95rem;
}

.footer-tagline {
  font-size: 0.94rem;
  margin-bottom: 1.45rem;
}

.footer-heading {
  font-size: 0.96rem;
  margin-bottom: 1.2rem;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.footer-subheading {
  font-size: 0.82rem;
  text-transform: uppercase;
  margin: 1.6rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--card-border);
  color: var(--accent-gold);
  font-weight: 700;
  letter-spacing: 0.05em;
  display: block;
}

[data-theme="light"] .footer-subheading {
  color: var(--btn-primary);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.94rem;
}

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

/* Tablet (768 to 1023px): 3 columns (Calculators, By Age, Company & Trust) under full-width logo block */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .col-brand {
    grid-column: 1 / -1;
    margin-bottom: 0.5rem;
  }
  .col-calc {
    grid-column: 1 / 2;
  }
  .col-age {
    grid-column: 2 / 3;
  }
  .col-company {
    grid-column: 3 / 4;
  }
}

/* Phone (< 768px): Logo full width, 2 columns (Calculators left, By Age right) with 24px gap, 14px text, wrapping allowed, Company below */
@media (max-width: 767px) {
  .site-footer {
    padding: 3rem 1.1rem 2rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 2.5rem;
  }
  .col-brand {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .col-calc {
    grid-column: 1 / 2;
  }
  .col-age {
    grid-column: 2 / 3;
  }
  .col-company {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
    text-align: left;
  }
  [dir="rtl"] .col-company {
    text-align: right;
  }
  .footer-links {
    font-size: 14px;
    gap: 0.65rem;
  }
  .footer-links a {
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .footer-heading {
    font-size: 0.9rem;
    margin-bottom: 0.85rem;
  }
  .footer-subheading {
    font-size: 0.78rem;
    text-transform: uppercase;
    margin: 1.35rem 0 0.65rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--card-border);
    color: var(--accent-gold);
    font-weight: 700;
    letter-spacing: 0.05em;
    display: block;
  }
  [data-theme="light"] .footer-subheading {
    color: var(--btn-primary);
  }
}

.footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 1.85rem;
  border-top: 1px solid var(--card-border);
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin: 0.95rem 0;
}

.legal-links a {
  color: var(--text-muted);
}
.legal-links a:hover {
  color: var(--text-main);
}
.sep {
  opacity: 0.4;
}

/* Toast Notification */
.toast-msg {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--btn-primary);
  color: var(--btn-text) !important;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  font-weight: 700;
  font-size: 0.94rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 9999;
  pointer-events: none;
}

.toast-msg.show {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Morgen.so Inspired Layouts & Rich Editorial Guide Presentation
   ========================================================================== */

/* 1. Morgen 3-Column Visual Feature Grid */
.morgen-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.75rem;
  margin-top: 2.2rem;
}

.morgen-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.morgen-card:hover {
  border-color: var(--card-border-hover);
  transform: translateY(-3px);
}

.morgen-card-preview {
  background: var(--card-bg-subtle);
  border-bottom: 1px solid var(--card-border);
  padding: 1.85rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  position: relative;
}

.mock-tab-row {
  display: flex;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-full);
  padding: 0.25rem;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

[data-theme="light"] .mock-tab-row {
  background: rgba(0, 0, 0, 0.06);
}

.mock-tab {
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.mock-tab.active {
  background: var(--btn-primary);
  color: var(--btn-text) !important;
}

.mock-time-box {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.mock-time-value {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.03em;
}

.mock-time-ampm {
  font-size: 0.95rem;
  color: var(--accent-gold);
  font-weight: 600;
}

.mock-cycle-track {
  width: 100%;
  max-width: 250px;
  height: 28px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-full);
  display: flex;
  overflow: hidden;
  margin-bottom: 0.75rem;
  border: 1px solid var(--card-border);
}

.mock-cycle-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #080A0D;
}

.mock-cycle-bar.seg-5 {
  width: 70%;
  background: var(--color-optimal);
}

.mock-cycle-bar.seg-6 {
  width: 30%;
  background: var(--color-ideal);
}

.mock-pill-row {
  display: flex;
  gap: 0.45rem;
}

.mock-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
}

.mock-badge.ideal {
  background: var(--color-ideal-bg);
  color: var(--color-ideal);
  border: 1px solid var(--color-ideal);
}

.mock-badge.optimal {
  background: var(--color-optimal-bg);
  color: var(--color-optimal);
  border: 1px solid var(--color-optimal);
}

.mock-badge.min {
  background: var(--color-minimum-bg);
  color: var(--color-minimum);
  border: 1px solid var(--color-minimum);
}

.mock-export-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 230px;
}

.mock-action-btn {
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.mock-action-btn.cal {
  background: var(--btn-primary);
  color: var(--btn-text) !important;
  border-color: var(--btn-primary);
}

.morgen-card-body {
  padding: 1.85rem 1.6rem 2.2rem;
}

.morgen-card-body h3 {
  font-size: 1.25rem;
  margin-bottom: 0.65rem;
}

.morgen-card-body p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* 2. Morgen 2-Column Section (Checklist + Schedule Mockup) */
.morgen-two-col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 900px) {
  .morgen-two-col {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.morgen-lead-text {
  font-size: 1.12rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.morgen-check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.morgen-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-main);
}

.check-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(45, 212, 191, 0.16);
  border: 1px solid rgba(45, 212, 191, 0.4);
  color: var(--color-ideal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

[data-theme="light"] .check-badge {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.35);
  color: #059669;
}

.morgen-schedule-mock {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.85rem;
  box-shadow: var(--shadow-card);
}

.mock-schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--card-border);
  margin-bottom: 1.35rem;
}

.mock-header-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.mock-header-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-main);
}

.mock-header-tag {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-gold);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mock-schedule-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.mock-slot-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.2rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
  background: var(--card-bg-subtle);
}

.mock-slot-card.ideal {
  border-left: 4px solid var(--color-ideal);
}

.mock-slot-card.optimal {
  border-left: 4px solid var(--color-optimal);
}

.mock-slot-card.minimum {
  border-left: 4px solid var(--color-minimum);
}

.slot-badge {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 0.2rem;
}

.mock-slot-card.ideal .slot-badge { color: var(--color-ideal); }
.mock-slot-card.optimal .slot-badge { color: var(--color-optimal); }
.mock-slot-card.minimum .slot-badge { color: var(--color-minimum); }

.slot-time {
  font-family: var(--font-heading);
  font-size: 1.28rem;
  font-weight: 700;
  color: var(--text-main);
}

.slot-right {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.mock-calendar-sync {
  padding-top: 1.15rem;
  border-top: 1px solid var(--card-border);
}

.sync-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  font-weight: 500;
}

.sync-icons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sync-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  color: var(--text-main);
}

[data-theme="light"] .sync-pill {
  background: rgba(0, 0, 0, 0.04);
}

/* 3. Morgen 2x2 Use Cases Grid */
.morgen-use-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
  margin-top: 2.2rem;
}

.morgen-use-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.65rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  box-shadow: var(--shadow-card);
}

.use-icon-badge {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[data-theme="light"] .use-icon-badge {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.15);
  color: var(--btn-primary);
}

.morgen-use-card h4 {
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}

.morgen-use-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.morgen-center-quote {
  text-align: center;
  font-size: 1.08rem;
  font-style: italic;
  color: var(--text-muted);
  max-width: 680px;
  margin: 2.5rem auto 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--btn-primary);
  background: var(--card-bg-subtle);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* 4. Rich Editorial Guide Presentation (~500 Words) */
.sleep-guide-box {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 3rem 2.2rem;
  box-shadow: var(--shadow-card);
}

.guide-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 2.5rem 0 2rem;
}

.guide-article-card {
  position: relative;
  padding-left: 0.5rem;
}

.guide-num {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: rgba(245, 158, 11, 0.35);
  line-height: 1;
  margin-bottom: 0.5rem;
}

[data-theme="light"] .guide-num {
  color: rgba(15, 23, 42, 0.2);
}

.guide-article-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.85rem;
}

.guide-article-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.guide-protip-box {
  margin-top: 2.5rem;
  padding: 1.4rem 1.8rem;
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

@media (max-width: 600px) {
  .guide-protip-box {
    flex-direction: column;
    align-items: flex-start;
  }
}

.protip-badge {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-gold);
  background: rgba(245, 158, 11, 0.16);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.guide-protip-box p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-main);
  margin: 0;
}

/* 5. Floating Quick Feedback Widget (Morgen Style, Compact) */
.feedback-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  max-width: 260px;
  width: calc(100vw - 40px);
  animation: slideFeedbackIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideFeedbackIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.feedback-card {
  background: var(--card-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.55), 0 0 1px 1px rgba(255, 255, 255, 0.08);
  padding: 0.95rem 1.05rem;
}

[data-theme="light"] .feedback-card {
  box-shadow: 0 12px 28px -6px rgba(184, 115, 85, 0.15), 0 0 1px 1px rgba(184, 115, 85, 0.1);
}

.feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.feedback-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.feedback-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.25rem;
  border-radius: var(--radius-sm);
  transition: color 0.12s ease;
}

.feedback-close-btn:hover {
  color: var(--text-main);
}

.feedback-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 0.65rem;
}

.feedback-email-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 0.32rem 0.55rem;
  margin-bottom: 0.65rem;
}

.feedback-email {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent-gold);
  user-select: all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="light"] .feedback-email {
  color: var(--btn-primary);
}

.copy-email-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.2rem;
  transition: color 0.12s ease;
}

.copy-email-btn:hover {
  color: var(--text-main);
}

.feedback-author {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--card-border);
}

.author-avatar-badge {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.author-avatar-img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

[data-theme="light"] .author-avatar-badge {
  background: transparent;
  border: none;
}

.author-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.author-role {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Tool Micro-Animations & Result Card Polish
   ========================================================================== */
@keyframes toolCardPop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.result-card {
  animation: toolCardPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
}

.result-card:nth-child(1) { animation-delay: 0.04s; }
.result-card:nth-child(2) { animation-delay: 0.08s; }
.result-card:nth-child(3) { animation-delay: 0.12s; }
.result-card:nth-child(4) { animation-delay: 0.16s; }

.result-card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.4);
}

/* Pulsing Optimal Badge */
@keyframes optimalBeacon {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
}

.result-card.optimal {
  border-width: 1.5px;
  position: relative;
}

.result-card.optimal::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--accent-gold);
  opacity: 0.6;
  pointer-events: none;
  animation: optimalBeacon 2.5s infinite ease-in-out;
}

/* ==========================================================================
   Advanced Circadian Rule Banner (Executive Knowledge Widget)
   ========================================================================== */
.circadian-rule-banner {
  background: var(--card-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2.2rem 2.6rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1040px;
}

.circadian-rule-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-ideal) 30%, var(--accent-gold) 70%, transparent);
}

.rule-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--card-border);
}

.rule-banner-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
}

.pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-ideal);
  box-shadow: 0 0 10px var(--color-ideal);
  animation: pulseBeacon 2s infinite ease-in-out;
}

@keyframes pulseBeacon {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.rule-banner-tag {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.12);
  color: var(--accent-gold);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .rule-banner-tag {
  background: rgba(15, 23, 42, 0.06);
  color: var(--btn-primary);
  border-color: rgba(15, 23, 42, 0.15);
}

.rule-banner-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.35fr 0.9fr;
  gap: 1.5rem;
  align-items: center;
}

@media (max-width: 860px) {
  .circadian-rule-banner {
    padding: 1.5rem 1.15rem;
    text-align: center;
  }
  .rule-banner-header {
    justify-content: center;
    text-align: center;
    gap: 0.65rem;
  }
  .rule-banner-title {
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  .rule-banner-tag {
    margin: 0 auto;
  }
  .rule-banner-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: center;
  }
  .rule-metric-box {
    text-align: center;
  }
  .rule-metric-label,
  .rule-metric-value,
  .rule-metric-sub {
    text-align: center;
  }
  .rule-explanation-box {
    text-align: center;
  }
  .rule-cycles-preview {
    text-align: center;
  }
  .rule-cycle-title {
    text-align: center;
  }
}

.rule-metric-box {
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.rule-metric-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.rule-metric-value {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-ideal);
  line-height: 1.2;
}

.rule-metric-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
}

.rule-explanation-box {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text-main);
}

.rule-explanation-box p {
  margin: 0;
}

.rule-highlight {
  color: var(--accent-gold);
  font-weight: 600;
}

[data-theme="light"] .rule-highlight {
  color: #B45309;
}

.rule-cycles-preview {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.15rem;
}

.rule-cycle-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.rule-cycle-chips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.35rem;
}

.cycle-bead {
  height: 9px;
  border-radius: 4px;
  background: var(--card-border);
  transition: background 0.2s ease;
}

.cycle-bead.active {
  background: var(--color-ideal);
}

.cycle-bead.active-optimal {
  background: var(--accent-gold);
}

[data-theme="light"] .cycle-bead.active-optimal {
  background: var(--btn-primary);
}

.rule-cycle-legend {
  font-size: 0.74rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
   Short Answer Box for SEO & Immediate Clarity
   ========================================================================== */
.short-answer-box {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--accent-gold);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.75rem;
  margin: 1.85rem 0 2.5rem;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,0.25);
}

[data-theme="light"] .short-answer-box {
  border-left-color: var(--btn-primary);
  background: var(--card-bg);
}

.short-answer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

[data-theme="light"] .short-answer-badge {
  color: var(--btn-primary);
}

.short-answer-box p {
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--text-main);
  margin: 0;
}

/* ==========================================================================
   Morgen-Inspired High-End Tool Deep Dive Guides (700-800+ Words Presentation)
   ========================================================================== */

.tool-deep-dive-section,
.tool-guide-section {
  max-width: 1160px;
  margin: 2.5rem auto 4.5rem;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
  box-sizing: border-box;
}

.content-section .tool-deep-dive-section,
.content-section .tool-guide-section {
  margin: 2rem 0 3.5rem;
  padding: 0;
}

/* 1. Takeaways Ribbon */
.tool-takeaways-ribbon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.takeaway-pill {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.takeaway-pill:hover {
  transform: translateY(-2px);
  border-color: var(--accent-gold);
}

[data-theme="light"] .takeaway-pill:hover {
  border-color: var(--btn-primary);
}

.takeaway-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-gold);
}

[data-theme="light"] .takeaway-badge {
  color: var(--btn-primary);
}

.takeaway-text {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.35;
}

/* 2. Editorial Narrative Card */
.tool-editorial-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2.5rem;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.3);
}

[data-theme="light"] .tool-editorial-card {
  background: var(--card-bg);
  box-shadow: 0 10px 30px -10px rgba(184, 115, 85, 0.1);
}

.editorial-header {
  margin-bottom: 1.5rem;
}

.editorial-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ideal);
  margin-bottom: 0.5rem;
}

.tool-editorial-card h2 {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
  margin: 0;
}

.editorial-prose {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--text-muted);
}

.editorial-prose p {
  margin: 0;
}

/* 3. Guide Block Headings */
.tool-guide-block {
  margin-top: 0.5rem;
}

.guide-block-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.guide-block-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

/* 4. Steps Grid */
.tool-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.tool-step-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.tool-step-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-gold);
}

[data-theme="light"] .tool-step-card:hover {
  border-color: var(--btn-primary);
}

.step-card-num {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--accent-gold);
  line-height: 1;
  opacity: 0.85;
}

[data-theme="light"] .step-card-num {
  color: var(--btn-primary);
}

.step-card-heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
  line-height: 1.3;
}

.step-card-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* 5. Scenarios Grid */
.tool-scenarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.tool-scenario-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.2s ease;
}

.tool-scenario-card:hover {
  transform: translateY(-2px);
}

.scenario-icon-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--card-bg-subtle);
  color: var(--color-ideal);
  border: 1px solid var(--card-border);
}

.scenario-title {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0.25rem 0 0;
}

.scenario-desc {
  font-size: 0.91rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* 6. Habits Dual Column (Recommended vs Avoid) */
.habits-dual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.habit-col {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.habit-col.recommended {
  border-left: 4px solid #10B981;
}

.habit-col.avoid {
  border-left: 4px solid #EF4444;
}

.habit-col-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.habit-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.habit-tag.tag-good {
  color: #10B981;
}

.habit-tag.tag-bad {
  color: #EF4444;
}

.habit-col-header h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.habit-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.habit-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.habit-bullet-check {
  color: #10B981;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
}

.habit-bullet-cross {
  color: #EF4444;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tool-editorial-card {
    padding: 1.5rem 1.25rem;
  }
  .tool-editorial-card h2 {
    font-size: 1.45rem;
  }
  .guide-block-title {
    font-size: 1.3rem;
  }
}

/* ==============================================================================
   Precision Measurement Ruler Scrollbar Sidebar (getartcraft-style)
   ============================================================================== */
.ruler-scrollbar {
  position: fixed;
  right: 0;
  top: 92px;
  bottom: 38px;
  width: 38px;
  z-index: 950;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ruler-scrollbar:hover {
  width: 82px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="light"] .ruler-scrollbar,
[data-theme="light"] .ruler-scrollbar:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ruler-track {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: none;
}

/* Circular Magnifying Lens Halo */
.ruler-lens-circle {
  position: absolute;
  right: 2px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transition: opacity 0.22s ease, transform 0.04s linear;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, rgba(56, 189, 248, 0.04) 62%, transparent 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35), inset 0 0 12px rgba(56, 189, 248, 0.18);
}

[data-theme="light"] .ruler-lens-circle {
  background: radial-gradient(circle, rgba(2, 132, 199, 0.14) 0%, rgba(2, 132, 199, 0.03) 62%, transparent 100%);
  border-color: rgba(2, 132, 199, 0.55);
  box-shadow: 0 0 14px rgba(2, 132, 199, 0.2), inset 0 0 10px rgba(2, 132, 199, 0.12);
}

.ruler-scrollbar.is-hovering .ruler-lens-circle {
  opacity: 1;
}

.ruler-ticks-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.ruler-tick {
  position: absolute;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  transition: width 0.12s ease, opacity 0.12s ease;
  will-change: width, opacity;
}

/* Guard 0 and 100 from being cut off at edges */
.ruler-tick[data-pct="0"],
.ruler-tick-num[data-pct="0"] {
  transform: translateY(0%) !important;
}

.ruler-tick[data-pct="100"],
.ruler-tick-num[data-pct="100"] {
  transform: translateY(-100%) !important;
}

/* DARK THEME TICKS */
.ruler-tick.major {
  width: 14px;
  background: rgba(255, 255, 255, 0.45);
}

.ruler-tick.minor {
  width: 6px;
  background: rgba(255, 255, 255, 0.18);
  opacity: 0.3;
}

/* LIGHT THEME TICKS */
[data-theme="light"] .ruler-tick.major {
  background: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .ruler-tick.minor {
  background: rgba(0, 0, 0, 0.18);
  opacity: 0.3;
}

/* RULER NUMBERS */
.ruler-tick-num {
  position: absolute;
  right: 24px;
  transform: translateY(-50%);
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
  pointer-events: none;
  will-change: transform, opacity;
  color: rgba(255, 255, 255, 0.5);
}

.ruler-tick-num.milestone {
  opacity: 0.45;
}

[data-theme="light"] .ruler-tick-num {
  color: rgba(0, 0, 0, 0.45);
}

[data-theme="light"] .ruler-tick-num.milestone {
  opacity: 0.5;
}

/* Half Moon Scroll Indicator - Instant responsiveness */
.ruler-indicator {
  position: absolute;
  right: 0;
  top: 0%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 10;
  transition: none; /* No artificial transition lag during scroll & scrub */
  will-change: top;
}

.ruler-indicator-line {
  position: absolute;
  right: 0;
  width: 28px;
  height: 2px;
  background: #38BDF8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.9), 0 0 4px #38BDF8;
  border-radius: 1px;
  transition: width 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.ruler-scrollbar:hover .ruler-indicator-line {
  width: 72px;
}

.ruler-moon-icon {
  position: absolute;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F59E0B;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.95));
  transition: right 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.ruler-scrollbar:hover .ruler-moon-icon {
  right: 74px;
}

.ruler-moon-icon svg {
  display: block;
}

.ruler-percent-tag {
  position: absolute;
  right: 56px;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  color: #38BDF8;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  transition: right 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.ruler-scrollbar:hover .ruler-percent-tag {
  right: 102px;
}

[data-theme="light"] .ruler-indicator-line {
  background: #0284C7;
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.7);
}

[data-theme="light"] .ruler-percent-tag {
  color: #0369A1;
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(2, 132, 199, 0.4);
  text-shadow: none;
}

@media (max-width: 959px) {
  .ruler-scrollbar {
    display: none !important;
  }
}

/* ==========================================================================
   Kinetic Section Scroll & Atmospheric Horizon Engine (Linear / Awwwards Style)
   ========================================================================== */

/* 1. Global Smooth Inertial Scroll Setting */
html {
  scroll-behavior: smooth;
}

/* 2. Hero Stage & Luminous Celestial Horizon Arc */
.kinetic-hero {
  position: relative;
  overflow: visible;
  padding-bottom: 2rem;
}

.hero-header-block {
  animation: heroHeaderGlide 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes heroHeaderGlide {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.hero-tool-stage {
  position: relative;
  z-index: 5;
  margin-top: 1.25rem;
  animation: heroToolStageGlide 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes heroToolStageGlide {
  0% {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Luminous 3D Celestial Eclipse Orbit & Arc (matching Animated site.mp4 hero circle) */
.celestial-orbit-wrap {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 720px;
  pointer-events: none;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.celestial-orbit-circle {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, 0.55);
  background: radial-gradient(circle at 50% 50%, 
    rgba(245, 158, 11, 0.28) 0%, 
    rgba(217, 119, 6, 0.16) 42%, 
    rgba(139, 92, 246, 0.08) 60%, 
    transparent 74%);
  box-shadow: 
    0 0 70px rgba(245, 158, 11, 0.42),
    inset 0 0 50px rgba(245, 158, 11, 0.3),
    0 -20px 50px rgba(254, 240, 138, 0.25);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease;
  will-change: transform, opacity;
  animation: orbitPulse 8s ease-in-out infinite alternate;
}

@keyframes orbitPulse {
  0% {
    box-shadow: 0 0 50px rgba(245, 158, 11, 0.35), inset 0 0 40px rgba(245, 158, 11, 0.22);
  }
  100% {
    box-shadow: 0 0 85px rgba(245, 158, 11, 0.52), inset 0 0 65px rgba(245, 158, 11, 0.38), 0 -25px 60px rgba(254, 240, 138, 0.32);
  }
}

/* In Light Mode: Completely hide the 3D celestial orbit ring and glow across entire site */
[data-theme="light"] .celestial-orbit-wrap,
[data-theme="light"] .celestial-orbit-circle,
[data-theme="light"] .celestial-orbit-glow {
  display: none !important;
}

.celestial-orbit-glow {
  position: absolute;
  width: min(940px, 100vw);
  height: 480px;
  top: 60px;
  background: radial-gradient(ellipse 65% 55% at 50% 45%, 
    rgba(245, 158, 11, 0.32) 0%, 
    rgba(139, 92, 246, 0.18) 35%, 
    transparent 70%);
  filter: blur(52px);
  pointer-events: none;
}

@media (max-width: 768px) {
  .celestial-orbit-wrap {
    top: -90px;
    width: 360px;
    height: 360px;
  }
  .celestial-orbit-circle {
    width: 320px;
    height: 320px;
  }
  .celestial-orbit-glow {
    height: 300px;
    filter: blur(36px);
  }
}

/* 3. Kinetic Sections Scroll Reveal Engine (Fast, Instant & Smooth) */
.kinetic-section {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.kinetic-section.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Fallback: if JS is disabled or fails to load, ensure content is always visible */
html:not(.js-kinetic-active) .kinetic-section,
html:not(.js-kinetic-active) .kinetic-card,
html:not(.js-kinetic-active) .kinetic-col-left,
html:not(.js-kinetic-active) .kinetic-col-right {
  opacity: 1 !important;
  transform: none !important;
}

/* 4. Staggered Cascading Cards (Fast & Instant Stagger) */
.kinetic-card {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.988);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease;
  will-change: opacity, transform;
}

.is-revealed .kinetic-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: calc(var(--card-index, 0) * 35ms);
}

/* 5. Bento Mouse-Tracking Spotlight Glow */
.kinetic-card {
  position: relative;
  overflow: hidden;
}

.kinetic-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(245, 158, 11, 0.09), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

[data-theme="light"] .kinetic-card::after {
  background: radial-gradient(380px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(30, 58, 138, 0.07), transparent 70%);
}

.kinetic-card:hover::after {
  opacity: 1;
}

/* 6. Two-Column Split Horizon Slide (Morgen 2-col) */
.kinetic-col-left {
  opacity: 0;
  transform: translate3d(-30px, 0, 0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.kinetic-col-right {
  opacity: 0;
  transform: translate3d(30px, 0, 0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
  will-change: opacity, transform;
}

.is-revealed .kinetic-col-left,
.is-revealed .kinetic-col-right {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 7. Chromatic Border Shimmer on Primary Calculate Button */
#main-calc-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

#main-calc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px var(--btn-primary-glow);
}

/* Mobile Responsive Adaptations for Kinetic Motion */
@media (max-width: 768px) {
  .celestial-horizon-glow {
    width: 100%;
    max-width: 100vw;
    height: 380px;
    top: -40px;
    filter: blur(36px);
  }

  .kinetic-section {
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .kinetic-card {
    transform: translate3d(0, 18px, 0) scale(0.99);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .kinetic-col-left,
  .kinetic-col-right {
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* 8. Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-header-block,
  .hero-tool-stage,
  .kinetic-section,
  .kinetic-card,
  .kinetic-col-left,
  .kinetic-col-right {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Interactive Split-Stage Feature Showcase (Awwwards / Video Style)
   ========================================================================== */
.feature-showcase-container {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.2rem;
  align-items: stretch;
  margin-top: 2.5rem;
}

.showcase-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.showcase-nav-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 1.45rem;
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.65;
  width: 100%;
}

[dir="rtl"] .showcase-nav-item {
  text-align: right;
}

.showcase-nav-item:hover,
.showcase-nav-item.active {
  opacity: 1;
  background: var(--card-bg-subtle);
  border-color: var(--accent-gold);
  transform: translateX(4px);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.4), 0 0 15px rgba(245, 158, 11, 0.12);
}

[data-theme="light"] .showcase-nav-item:hover,
[data-theme="light"] .showcase-nav-item.active {
  border-color: var(--btn-primary);
  box-shadow: 0 8px 24px -6px rgba(184, 93, 56, 0.15), 0 0 15px rgba(184, 93, 56, 0.1);
}

[dir="rtl"] .showcase-nav-item:hover,
[dir="rtl"] .showcase-nav-item.active {
  transform: translateX(-4px);
}

.showcase-item-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.showcase-num {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.05em;
}

[data-theme="light"] .showcase-num {
  color: var(--btn-primary);
}

.showcase-active-indicator {
  width: 3px;
  height: 0;
  background: var(--accent-gold);
  border-radius: 3px;
  transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .showcase-active-indicator {
  background: var(--btn-primary);
}

.showcase-nav-item.active .showcase-active-indicator {
  height: 26px;
}

.showcase-item-text {
  flex: 1;
}

.showcase-item-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 0.35rem 0;
  line-height: 1.35;
}

.showcase-item-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Right Stage Card */
.showcase-stage-card {
  position: relative;
  min-height: 440px;
  background: var(--card-bg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.55), 0 0 1px 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

[data-theme="light"] .showcase-stage-card {
  box-shadow: 0 16px 40px -10px rgba(184, 115, 85, 0.15), 0 0 1px 1px rgba(184, 115, 85, 0.12);
}

.showcase-scene {
  position: absolute;
  inset: 0;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateY(14px);
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.32s;
  pointer-events: none;
}

.showcase-scene.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Scene UI Micro-Components */
.scene-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.95rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-gold);
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-theme="light"] .scene-badge {
  background: rgba(184, 93, 56, 0.12);
  border-color: rgba(184, 93, 56, 0.3);
  color: var(--btn-primary);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-gold);
  display: inline-block;
  box-shadow: 0 0 8px var(--accent-gold);
  animation: pulseDotGlow 2s infinite ease-in-out;
}

[data-theme="light"] .pulse-dot {
  background: var(--btn-primary);
  box-shadow: 0 0 8px var(--btn-primary);
}

@keyframes pulseDotGlow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.65; }
}

.scene-alarm-target {
  text-align: center;
  margin: 1.25rem 0 0.85rem;
}

.scene-alarm-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

.scene-alarm-time {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: -0.02em;
}

[data-theme="light"] .scene-alarm-time {
  color: var(--btn-primary);
}

.scene-timeline-chain {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chain-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.1rem;
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.chain-step.optimal {
  border-color: var(--accent-gold);
  background: rgba(245, 158, 11, 0.09);
  font-weight: 700;
}

[data-theme="light"] .chain-step.optimal {
  border-color: var(--btn-primary);
  background: rgba(184, 93, 56, 0.09);
}

.chain-cycles {
  color: var(--text-main);
}

.chain-time {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-main);
}

.chain-step.optimal .chain-time {
  color: var(--accent-gold);
}

[data-theme="light"] .chain-step.optimal .chain-time {
  color: var(--btn-primary);
}

.scene-footer-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--card-border);
  line-height: 1.4;
}

.scene-footer-note svg {
  flex-shrink: 0;
  color: var(--accent-gold);
}

[data-theme="light"] .scene-footer-note svg {
  color: var(--btn-primary);
}

/* Scene 1: Circadian Wave SVG */
.scene-wave-wrapper {
  margin: 1.25rem 0;
  display: flex;
  justify-content: center;
}

.scene-wave-svg {
  width: 100%;
  height: 90px;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.35));
}

[data-theme="light"] .scene-wave-svg {
  filter: drop-shadow(0 2px 8px rgba(217, 119, 6, 0.22));
}

.scene-wave-svg path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene-circadian-anchors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.circadian-anchor {
  background: var(--card-bg-subtle);
  padding: 0.75rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.anchor-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.anchor-time {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

/* Scene 2: Nap Grid */
.scene-nap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.95rem;
  margin: 1.25rem 0;
}

.scene-nap-box {
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scene-nap-box.optimal {
  border-color: var(--accent-gold);
  background: rgba(245, 158, 11, 0.07);
}

[data-theme="light"] .scene-nap-box.optimal {
  border-color: var(--btn-primary);
  background: rgba(184, 93, 56, 0.07);
}

.nap-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
}

.nap-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-main);
}

.nap-tag {
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  background: var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.nap-benefit {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.nap-meter {
  height: 5px;
  background: var(--card-border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: auto;
}

.nap-meter-fill {
  height: 100%;
  background: var(--accent-gold);
  border-radius: 3px;
}

[data-theme="light"] .nap-meter-fill {
  background: var(--btn-primary);
}

.nap-stat {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-main);
}

/* Scene 3: Inertia Bars */
.scene-inertia-bars {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  margin: 1.25rem 0;
}

.inertia-row {
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 0.95rem;
}

.inertia-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-main);
}

.inertia-row.bad .inertia-status {
  color: #EF4444;
  font-weight: 700;
}

.inertia-row.good .inertia-status {
  color: #10B981;
  font-weight: 700;
}

.inertia-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--card-border);
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.bar-fill.deep-fill {
  width: 85%;
  height: 100%;
  background: #EF4444;
  border-radius: 3px;
}

.bar-fill.light-fill {
  width: 100%;
  height: 100%;
  background: #10B981;
  border-radius: 3px;
}

.inertia-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: block;
}

.showcase-accordion-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Hide mobile drawers on desktop */
@media (min-width: 901px) {
  .showcase-mobile-drawer {
    display: none !important;
  }
}

/* Mobile Inline Accordion Drawer Rules (<= 900px) */
@media (max-width: 900px) {
  .feature-showcase-container {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1.5rem;
  }

  /* Hide desktop right stage card on mobile */
  .showcase-stage-card {
    display: none !important;
  }

  .showcase-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
  }

  .showcase-accordion-item {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .showcase-nav-item {
    width: 100%;
    transform: none !important;
  }

  .showcase-nav-item.active {
    border-color: var(--accent-gold);
    background: var(--card-bg-subtle);
  }

  [data-theme="light"] .showcase-nav-item.active {
    border-color: var(--btn-primary);
  }

  /* Smooth 0fr to 1fr Grid Accordion Expand/Collapse */
  .showcase-mobile-drawer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
  }

  .showcase-mobile-drawer.is-expanded {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .showcase-drawer-inner {
    min-height: 0;
    overflow: hidden;
  }

  .showcase-mobile-card {
    margin-top: 0.65rem;
    padding: 1.35rem 1.15rem;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.45), 0 0 15px rgba(245, 158, 11, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: relative;
    overflow: hidden;
  }

  [data-theme="light"] .showcase-mobile-card {
    box-shadow: 0 10px 24px -6px rgba(184, 115, 85, 0.12), 0 0 15px rgba(184, 115, 85, 0.06);
  }

  .showcase-mobile-card .scene-alarm-target {
    margin: 0.75rem 0 0.5rem;
  }

  .showcase-mobile-card .scene-alarm-time {
    font-size: 2.2rem;
  }

  .showcase-mobile-card .scene-wave-wrapper {
    margin: 0.85rem 0;
  }

  .showcase-mobile-card .scene-wave-svg {
    height: 75px;
  }

  .scene-nap-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin: 0.85rem 0;
  }

  .scene-inertia-bars {
    gap: 0.75rem;
    margin: 0.85rem 0;
  }

  .scene-circadian-anchors {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .circadian-anchor {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.85rem;
  }
}

/* ==========================================================================
   Continuous 360° Circular 3D Orbit Carousel (The Complete Guide Section)
   ========================================================================== */
.sleep-guide-section {
  position: relative;
  overflow: visible;
}

.sleep-guide-box {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 2.2rem 2.4rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .sleep-guide-box {
    padding: 1.5rem 1rem;
    border-radius: var(--radius-md);
  }
}

.orbit-carousel-container {
  position: relative;
  width: 100%;
  margin: 1.75rem 0 1.5rem;
  overflow: visible;
}

.orbit-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: 0 0.5rem;
}

.orbit-step-counter {
  font-family: var(--font-heading);
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.current-step-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--accent-gold);
  line-height: 1;
}

[data-theme="light"] .current-step-num {
  color: var(--btn-primary);
}

.step-divider {
  font-size: 1.1rem;
  color: var(--text-muted);
  opacity: 0.5;
}

.total-step-num {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-muted);
}

.orbit-nav-arrows {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.orbit-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.orbit-arrow-btn:hover {
  background: var(--card-bg-subtle);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  transform: translateY(-2px) scale(1.05);
}

[data-theme="light"] .orbit-arrow-btn:hover {
  border-color: var(--btn-primary);
  color: var(--btn-primary);
}

/* Shared Card Animation Keyframes */
@keyframes fadeInGraphic {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   DESKTOP STYLING (> 900px): Horizontal Expanding Ribbon Accordion
   Active card expands to ~52% width, non-active cards compact to ~16%
   ========================================================================== */
@media (min-width: 901px) {
  .orbit-top-bar {
    display: none !important;
  }

  .orbit-dots-wrapper {
    display: none !important;
  }

  .orbit-stage-viewport {
    position: relative;
    width: 100%;
    height: 520px;
    min-height: 520px;
    max-height: 520px;
    perspective: none;
    overflow: hidden;
    display: block;
  }

  .orbit-stage-track {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.15rem;
    width: 100%;
    height: 100%;
    min-height: 520px;
    max-height: 520px;
    transform-style: flat;
  }

  .orbit-card {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--card-border);
    transition: flex 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.35s ease,
                padding 0.35s ease,
                transform 0.25s ease;
  }

  /* Compact Collapsed Ribbon Cards (~16% Width) */
  .orbit-card:not(.is-active) {
    flex: 1 1 16%;
    cursor: pointer;
    background: var(--card-bg-subtle);
    border-color: var(--card-border);
    padding: 1.6rem 1.15rem;
    box-shadow: none;
  }

  .orbit-card:not(.is-active):hover {
    background: var(--card-bg);
    border-color: var(--accent-gold);
    transform: translateY(-4px) !important;
  }

  [data-theme="light"] .orbit-card:not(.is-active):hover {
    border-color: var(--btn-primary);
  }

  .orbit-card:not(.is-active) .orbit-card-badge {
    opacity: 0;
    visibility: hidden;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .orbit-card:not(.is-active) .guide-art-graphic {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.3s ease;
  }

  .orbit-card:not(.is-active) .orbit-card-body {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.3s ease;
  }

  .orbit-card:not(.is-active) .orbit-card-title {
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--text-muted);
    margin-top: 1rem;
    transition: color 0.25s ease;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .orbit-card:not(.is-active):hover .orbit-card-title {
    color: var(--text-main);
  }

  .orbit-card:not(.is-active) .compact-expand-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--accent-gold);
    margin-top: auto;
    align-self: flex-start;
    transition: all 0.25s ease;
  }

  .orbit-card:not(.is-active):hover .compact-expand-hint {
    background: var(--accent-gold);
    color: #000;
    transform: scale(1.1);
  }

  [data-theme="light"] .orbit-card:not(.is-active) .compact-expand-hint {
    color: var(--btn-primary);
  }

  [data-theme="light"] .orbit-card:not(.is-active):hover .compact-expand-hint {
    background: var(--btn-primary);
    color: #fff;
  }

  /* Active Expanded Card (~52% Width) */
  .orbit-card.is-active {
    flex: 3.5 1 52%;
    cursor: default;
    background: var(--card-bg);
    border-color: var(--accent-gold);
    padding: 2rem 2.25rem;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.45);
  }

  [data-theme="light"] .orbit-card.is-active {
    border-color: var(--btn-primary);
    box-shadow: 0 16px 36px -10px rgba(184, 115, 85, 0.2);
  }

  .orbit-card.is-active .orbit-card-badge {
    display: inline-block;
    opacity: 1;
    visibility: visible;
  }

  .orbit-card.is-active .guide-art-graphic {
    display: block;
    opacity: 1;
    visibility: visible;
    max-height: 220px;
    overflow: visible;
    transition: opacity 0.3s ease 0.12s, max-height 0.35s ease;
  }

  .orbit-card.is-active .orbit-card-title {
    font-size: 1.4rem;
    color: var(--text-main);
    margin: 0.85rem 0 0.65rem;
  }

  .orbit-card.is-active .orbit-card-body {
    display: block;
    opacity: 1;
    visibility: visible;
    max-height: 500px;
    overflow: visible;
    transition: opacity 0.35s ease 0.12s, max-height 0.35s ease;
  }

  .orbit-card.is-active .compact-expand-hint {
    display: none !important;
  }
}

/* Orbit Card Internal Typography & Graphics */
.orbit-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.orbit-card-num {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-gold);
  line-height: 1;
}

[data-theme="light"] .orbit-card-num {
  color: var(--btn-primary);
}

.orbit-card-badge {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.65rem;
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-full);
  color: var(--text-muted);
}

.orbit-card-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0.85rem 0 0.65rem;
  line-height: 1.3;
}

.orbit-card-body p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 0.65rem 0;
}

.orbit-card-body p:last-child {
  margin-bottom: 0;
}

/* Micro-Graphic Mini Components */
.guide-art-graphic {
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.15rem;
  margin: 0.5rem 0 0.85rem;
}

.wave-graphic .art-svg {
  width: 100%;
  height: 52px;
  overflow: visible;
}

.graphic-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 0.35rem;
}

.stages-graphic .graphic-labels {
  display: flex;
  width: 100%;
}

.stages-graphic .graphic-labels span:nth-child(1) {
  width: 32%;
  text-align: center;
}

.stages-graphic .graphic-labels span:nth-child(2) {
  width: 45%;
  text-align: center;
}

.stages-graphic .graphic-labels span:nth-child(3) {
  width: 23%;
  text-align: center;
}

.graphic-stage-bar {
  display: flex;
  height: 24px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 24px;
}

.stage-seg.deep { background: #6366F1; }
.stage-seg.light { background: #0284C7; }
.stage-seg.rem { background: #8B5CF6; }

.brainwave-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.25rem 0;
}

.wave-name {
  font-size: 0.76rem;
  color: var(--text-muted);
  min-width: 155px;
}

.wave-line-svg {
  flex: 1;
  height: 18px;
}

.wave-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
}

.wave-status.groggy {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.12);
}

.wave-status.fresh {
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
}

.cycle-choice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.cycle-choice-pill {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.45rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cycle-choice-pill.optimal {
  border-color: var(--accent-gold);
  background: rgba(245, 158, 11, 0.08);
}

[data-theme="light"] .cycle-choice-pill.optimal {
  border-color: var(--btn-primary);
  background: rgba(184, 93, 56, 0.08);
}

.pill-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-main);
}

.pill-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Pagination Dots */
.orbit-dots-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.orbit-dot-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.6;
}

.orbit-dot-pill:hover,
.orbit-dot-pill.active {
  opacity: 1;
  background: var(--card-bg-subtle);
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

[data-theme="light"] .orbit-dot-pill:hover,
[data-theme="light"] .orbit-dot-pill.active {
  border-color: var(--btn-primary);
}

.dot-num {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-main);
}

.dot-meter {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--card-border);
  transition: width 0.24s ease, background 0.24s ease;
}

.orbit-dot-pill.active .dot-meter {
  width: 22px;
  background: var(--accent-gold);
}

[data-theme="light"] .orbit-dot-pill.active .dot-meter {
  background: var(--btn-primary);
}

/* ==========================================================================
   MOBILE STYLING (<= 900px): 3D Cylindrical Orbit Curve & Infinite Loop
   ========================================================================== */
@media (max-width: 900px) {
  .orbit-top-bar {
    display: flex !important;
  }

  .orbit-dots-wrapper {
    display: flex !important;
  }

  .orbit-stage-viewport {
    position: relative;
    width: 100%;
    height: 560px;
    perspective: 850px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.35rem;
  }

  .orbit-stage-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .orbit-card {
    position: absolute;
    top: 0;
    width: 88vw;
    max-width: 520px;
    background: var(--card-bg);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.15rem;
    box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.6), 0 0 1px 1px rgba(255, 255, 255, 0.06);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.45s ease,
                border-color 0.35s ease,
                box-shadow 0.4s ease;
    will-change: transform, opacity, filter;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  [data-theme="light"] .orbit-card {
    box-shadow: 0 20px 45px -12px rgba(184, 115, 85, 0.16), 0 0 1px 1px rgba(184, 115, 85, 0.1);
  }

  /* 3D Cylindrical Orbit Curve Positions */
  .orbit-card.is-front {
    transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    opacity: 1;
    filter: blur(0);
    z-index: 10;
    border-color: var(--accent-gold);
    cursor: default;
  }

  [data-theme="light"] .orbit-card.is-front {
    border-color: var(--btn-primary);
  }

  .orbit-card.is-right {
    transform: translateX(48%) translateZ(-70px) rotateY(-22deg) scale(0.88);
    opacity: 0.5;
    filter: blur(0.3px);
    z-index: 5;
  }

  .orbit-card.is-left {
    transform: translateX(-48%) translateZ(-70px) rotateY(22deg) scale(0.88);
    opacity: 0.5;
    filter: blur(0.3px);
    z-index: 5;
  }

  .orbit-card.is-back {
    transform: translateX(0) translateZ(-220px) scale(0.72);
    opacity: 0;
    filter: blur(2px);
    z-index: 1;
    pointer-events: none;
  }

  /* RTL Support for Mobile Orbit Arc */
  [dir="rtl"] .orbit-card.is-right {
    transform: translateX(-48%) translateZ(-70px) rotateY(22deg) scale(0.88);
  }

  [dir="rtl"] .orbit-card.is-left {
    transform: translateX(48%) translateZ(-70px) rotateY(-22deg) scale(0.88);
  }

  .compact-expand-hint {
    display: none !important;
  }

  .orbit-card .orbit-card-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
  }

  .orbit-card .orbit-card-num {
    font-size: 1.35rem;
    font-weight: 800;
  }

  .orbit-card .orbit-card-badge {
    display: inline-block !important;
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
  }

  .orbit-card .guide-art-graphic {
    display: block !important;
    opacity: 1 !important;
    padding: 0.55rem 0.85rem;
    margin: 0.35rem 0 0.65rem;
  }

  .orbit-card .orbit-card-body {
    display: block !important;
    opacity: 1 !important;
  }

  .orbit-card-title {
    font-size: 1.15rem;
    margin: 0.45rem 0 0.45rem;
    line-height: 1.28;
  }

  .orbit-card-body p {
    font-size: 0.84rem;
    line-height: 1.48;
    margin-bottom: 0.45rem;
  }

  .cycle-choice-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
  }

  .cycle-choice-pill {
    padding: 0.45rem 0.25rem !important;
    text-align: center;
  }

  .cycle-choice-pill .pill-title {
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .cycle-choice-pill .pill-meta {
    font-size: 0.6rem;
    line-height: 1.15;
  }

  .wave-name {
    min-width: 120px;
    font-size: 0.72rem;
  }
}

/* ==========================================================================
   Calendar Modal (Universal iOS, Android, Desktop Support)
   ========================================================================== */
.cal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

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

.cal-modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: min(92vw, 420px);
  background: var(--card-bg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  box-sizing: border-box;
}

.cal-modal-dialog.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.cal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.cal-modal-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.cal-modal-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s ease;
}

.cal-modal-close:hover {
  color: var(--accent-gold);
}

.cal-modal-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  line-height: 1.45;
}

.cal-modal-options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cal-option-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: var(--card-bg-subtle);
  border: 1px solid var(--card-border);
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.cal-option-btn:hover {
  background: var(--card-bg);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
  transform: translateY(-2px);
}

[data-theme="light"] .cal-option-btn:hover {
  border-color: var(--btn-primary);
  color: var(--btn-primary);
}

.cal-svg {
  flex-shrink: 0;
  stroke: currentColor;
}