:root {
  --ring-color: #10b981;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ─── Scrollbar ─── */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Touch ─── */
.touch-manipulation { touch-action: manipulation; }

/* ─── Background orbs ─── */
.bg-orb {
  will-change: auto;
  contain: layout paint;
}

/* ─── Theme-loading toast ─── */
#theme-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(24, 24, 27, 0.95);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#theme-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.theme-toast-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #10b981;
  border-radius: 50%;
  animation: theme-toast-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes theme-toast-spin {
  to { transform: rotate(360deg); }
}

/* ─── Clean-plan callout mobile-safe ───
   The original inline-flex stretched past the viewport with its one-line text.
   Below 640px we switch it to a block-ish layout with centered wrapped text. */
.clean-callout .clean-callout-text strong { margin: 0 0.15em; }

@media (max-width: 640px) {
  .clean-callout {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
    line-height: 1.5;
    padding: 0.875rem 1rem;
  }
  .clean-callout .clean-callout-icon {
    margin-top: 0.125rem;
  }
  .clean-callout .clean-callout-text {
    flex: 1;
    min-width: 0;
  }
}

/* content-visibility: auto was removed — it interfered with both the
   IntersectionObserver scroll-reveal and the JS that mutates inline styles
   on off-screen mockup elements when the user switches themes. */

/* ─── Focus orb orbit ─── */
@keyframes spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.orbit-spin {
  animation: spin-cw 28s linear infinite;
  transform-origin: center;
}

/* ─── Scroll reveal ─── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }
noscript .scroll-reveal { opacity: 1; transform: translateY(0); }

/* ─── Navbar scroll state ─── */
.navbar-scrolled {
  background-color: var(--lp-bg, rgba(9, 9, 11, 0.92)) !important;
  opacity: 0.95;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lp-border, rgba(255,255,255,0.05));
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

/* ─── Feature icon wrappers ─── */
.feature-icon-wrap {
  width: 3rem; height: 3rem;
  border-radius: 1rem;
  display: flex; align-items: center; justify-content: center;
  border-width: 1px; border-style: solid;
  flex-shrink: 0;
}
.feature-icon-wrap.indigo { background: rgba(99,102,241,0.1);  border-color: rgba(99,102,241,0.25);  color: #818cf8; box-shadow: 0 0 20px rgba(99,102,241,0.15); }
.feature-icon-wrap.emerald{ background: rgba(16,185,129,0.1);  border-color: rgba(16,185,129,0.25);  color: #34d399; box-shadow: 0 0 20px rgba(16,185,129,0.15); }
.feature-icon-wrap.orange { background: rgba(249,115,22,0.1);  border-color: rgba(249,115,22,0.25);  color: #fb923c; box-shadow: 0 0 20px rgba(249,115,22,0.15); }
.feature-icon-wrap.blue   { background: rgba(59,130,246,0.1);  border-color: rgba(59,130,246,0.25);  color: #60a5fa; box-shadow: 0 0 20px rgba(59,130,246,0.15); }
.feature-icon-wrap.amber  { background: rgba(245,158,11,0.1);  border-color: rgba(245,158,11,0.25);  color: #fbbf24; box-shadow: 0 0 20px rgba(245,158,11,0.15); }
.feature-icon-wrap.cyan   { background: rgba(6,182,212,0.1);   border-color: rgba(6,182,212,0.25);   color: #22d3ee; box-shadow: 0 0 20px rgba(6,182,212,0.15);  }
.feature-icon-wrap.purple { background: rgba(168,85,247,0.1);  border-color: rgba(168,85,247,0.25);  color: #c084fc; box-shadow: 0 0 20px rgba(168,85,247,0.15); }

/* ─── Hero feature pills ─── */
.feature-pill {
  display: inline-flex; align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.7rem; font-weight: 700;
  border: 1px solid;
  letter-spacing: 0.03em;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
}
.feature-pill:hover { transform: translateY(-2px); }
.feature-pill.indigo { background: rgba(99,102,241,0.08);  border-color: rgba(99,102,241,0.2);  color: #a5b4fc; }
.feature-pill.emerald{ background: rgba(16,185,129,0.08);  border-color: rgba(16,185,129,0.2);  color: #6ee7b7; }
.feature-pill.orange { background: rgba(249,115,22,0.08);  border-color: rgba(249,115,22,0.2);  color: #fdba74; }
.feature-pill.blue   { background: rgba(59,130,246,0.08);  border-color: rgba(59,130,246,0.2);  color: #93c5fd; }
.feature-pill.amber  { background: rgba(245,158,11,0.08);  border-color: rgba(245,158,11,0.2);  color: #fcd34d; }
.feature-pill.cyan   { background: rgba(6,182,212,0.08);   border-color: rgba(6,182,212,0.2);   color: #67e8f9; }
.feature-pill.purple { background: rgba(168,85,247,0.08);  border-color: rgba(168,85,247,0.2);  color: #d8b4fe; }
.feature-pill.teal   { background: rgba(20,184,166,0.08);  border-color: rgba(20,184,166,0.2);  color: #5eead4; }

/* ─── Calendar day cells ─── */
.cal-day {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.25rem; padding: 0.25rem;
  border-radius: 0.5rem; cursor: pointer;
  transition: background-color 0.15s;
}
.cal-day:hover { background-color: rgba(255,255,255,0.05); }
.cal-num {
  width: 1.6rem; height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  font-size: 0.7rem; font-weight: 500;
  color: #a1a1aa;
}
.cal-num.today {
  background-color: #10b981;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(16,185,129,0.4);
}

/* ─── Theme chips ─── */
#theme-chip-row {
  padding-top: 6px; /* room for the upward translateY so overflow-x doesn't clip it */
}
.theme-chip {
  flex-shrink: 0;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  border: 1.5px solid var(--chip-border, rgba(255,255,255,0.15));
  background: var(--chip-bg, #18181b);
  color: var(--chip-color, #a1a1aa);
  font-size: 0.72rem; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
  letter-spacing: 0.02em;
  opacity: 0.65;
}
.theme-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  opacity: 1;
}
.theme-chip.active {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--chip-color, #10b981), 0 4px 20px rgba(0,0,0,0.4);
}

/* ─── Smooth theme transitions — only on the elements that need it ─── */
body { transition: background-color 0.4s ease, color 0.3s ease; }

/* Mockup panels pick up inline-style transitions set by JS */
#mockup-dashboard, #mockup-habits, #mockup-calendar, #mockup-tasks, #mockup-trips, #mockup-clean {
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.3s ease;
}

/* ─── FAQ ─── */
.faq-item {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1rem;
  overflow: hidden;
  transition: border-color 0.2s;
  background: rgba(24,24,27,0.4);
}
.faq-item:hover { border-color: rgba(255,255,255,0.12); }
.faq-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem;
  font-size: 0.9rem; font-weight: 600; color: #fff;
  text-align: left; cursor: pointer;
  gap: 1rem;
  background: transparent; border: none;
  transition: color 0.2s;
}
.faq-trigger:hover { color: #d4d4d8; }
.faq-body {
  padding: 0 1.25rem 1.1rem;
  font-size: 0.875rem; color: #71717a; line-height: 1.7;
}
.faq-body.open { display: block; }
.faq-icon.rotated { transform: rotate(180deg); }

/* ─── Habit particle burst ─── */
.habit-complete-burst {
  animation: habit-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes habit-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.habit-ring {
  position: fixed;
  border: 2px solid var(--ring-color);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  animation: ring-expand 0.5s ease-out forwards;
}
@keyframes ring-expand {
  0%   { transform: scale(0.5); opacity: 1; border-width: 4px; }
  100% { transform: scale(1.9); opacity: 0; border-width: 1px; }
}

.habit-particle {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  animation: particle-fly var(--dur) ease-out forwards;
  animation-delay: var(--delay);
  opacity: 0;
}
@keyframes particle-fly {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); opacity: 0; }
}

/* ─── Staggered scroll-reveal delays ─── */
.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.2s; }

/* ════════════════════════════════════════════════════
   THEME CSS VARIABLES (mirrors the actual app)
   Applied to html[data-lp-theme="..."]
   ════════════════════════════════════════════════════ */

/* Default */
html, html[data-lp-theme="default"] {
  --lp-bg:       #09090b;
  --lp-panel:    #18181b;
  --lp-panel2:   #27272a;
  --lp-border:   rgba(255,255,255,0.07);
  --lp-text:     #ffffff;
  --lp-muted:    #71717a;
  --lp-accent:   #10b981;
  --lp-accent2:  #34d399;
  --lp-font:     'Inter', system-ui, sans-serif;
  --lp-body-bg:  #09090b;
}

html[data-lp-theme="retrowave"] {
  --lp-bg:      #0b001a;
  --lp-panel:   #20023a;
  --lp-panel2:  #3b0764;
  --lp-border:  rgba(255,0,127,0.2);
  --lp-text:    #ffffff;
  --lp-muted:   #a855f7;
  --lp-accent:  #ff007f;
  --lp-accent2: #ff71a4;
  --lp-font:    'Space Grotesk', sans-serif;
  --lp-body-bg: #0b001a;
}

html[data-lp-theme="comic"] {
  --lp-bg:      #ffffff;
  --lp-panel:   #f8fafc;
  --lp-panel2:  #f1f5f9;
  --lp-border:  rgba(0,0,0,0.1);
  --lp-text:    #000000;
  --lp-muted:   #64748b;
  --lp-accent:  #ef4444;
  --lp-accent2: #fca5a5;
  --lp-font:    'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', 'Comic Neue', cursive, sans-serif;
  --lp-body-bg: #ffffff;
}

html[data-lp-theme="notion"] {
  --lp-bg:      #ffffff;
  --lp-panel:   #f7f7f5;
  --lp-panel2:  #efefed;
  --lp-border:  rgba(0,0,0,0.08);
  --lp-text:    #0f0f0f;
  --lp-muted:   #71717a;
  --lp-accent:  #337ea9;
  --lp-accent2: #5b9dc9;
  --lp-font:    'Inter', sans-serif;
  --lp-body-bg: #ffffff;
}

html[data-lp-theme="paper"] {
  --lp-bg:      #fbf8f1;
  --lp-panel:   #f0eadd;
  --lp-panel2:  #e3d9c6;
  --lp-border:  rgba(41,31,18,0.12);
  --lp-text:    #291f12;
  --lp-muted:   #918063;
  --lp-accent:  #4b6584;
  --lp-accent2: #6a84a0;
  --lp-font:    'Lora', Georgia, serif;
  --lp-body-bg: #fbf8f1;
}

html[data-lp-theme="cartoon"] {
  --lp-bg:      #0f172a;
  --lp-panel:   #172554;
  --lp-panel2:  #1e3a8a;
  --lp-border:  rgba(59,130,246,0.2);
  --lp-text:    #ffffff;
  --lp-muted:   #3b82f6;
  --lp-accent:  #eab308;
  --lp-accent2: #fde047;
  --lp-font:    'Nunito', sans-serif;
  --lp-body-bg: #0f172a;
}

html[data-lp-theme="post-it"] {
  --lp-bg:      #fef3c7;
  --lp-panel:   #fde68a;
  --lp-panel2:  #fcd34d;
  --lp-border:  rgba(180,83,9,0.15);
  --lp-text:    #432c0a;
  --lp-muted:   #d97706;
  --lp-accent:  #f97316;
  --lp-accent2: #fdba74;
  --lp-font:    'Caveat', 'Bradley Hand', 'Comic Sans MS', cursive, sans-serif;
  --lp-body-bg: #fef3c7;
}

html[data-lp-theme="cute"] {
  --lp-bg:      #fdf2f8;
  --lp-panel:   #fce7f3;
  --lp-panel2:  #fbcfe8;
  --lp-border:  rgba(236,72,153,0.15);
  --lp-text:    #4c1d95;
  --lp-muted:   #f472b6;
  --lp-accent:  #ec4899;
  --lp-accent2: #f9a8d4;
  --lp-font:    'Nunito', sans-serif;
  --lp-body-bg: #fdf2f8;
}

html[data-lp-theme="cafe"] {
  --lp-bg:      #fff8f0;
  --lp-panel:   #ffecd6;
  --lp-panel2:  #ffe0b2;
  --lp-border:  rgba(62,39,35,0.1);
  --lp-text:    #3e2723;
  --lp-muted:   #ffa726;
  --lp-accent:  #8d6e63;
  --lp-accent2: #bcaaa4;
  --lp-font:    'Fredoka', sans-serif;
  --lp-body-bg: #fff8f0;
}

html[data-lp-theme="starwars"] {
  --lp-bg:      #020208;
  --lp-panel:   #0a0e18;
  --lp-panel2:  #131a2a;
  --lp-border:  rgba(59,130,246,0.15);
  --lp-text:    #c8e6ff;
  --lp-muted:   #5a7aa8;
  --lp-accent:  #3b82f6;
  --lp-accent2: #60a5fa;
  --lp-font:    'Exo 2', sans-serif;
  --lp-body-bg: #020208;
}

html[data-lp-theme="abyss"] {
  --lp-bg:      #020b14;
  --lp-panel:   #051828;
  --lp-panel2:  #082540;
  --lp-border:  rgba(14,116,144,0.2);
  --lp-text:    #cff4fc;
  --lp-muted:   #237db4;
  --lp-accent:  #14b8a6;
  --lp-accent2: #2dd4bf;
  --lp-font:    'Space Grotesk', sans-serif;
  --lp-body-bg: #020b14;
}

html[data-lp-theme="arizona"] {
  --lp-bg:      #eef7f0;
  --lp-panel:   #ddf0e3;
  --lp-panel2:  #c3e6cc;
  --lp-border:  rgba(26,58,42,0.1);
  --lp-text:    #1a3a2a;
  --lp-muted:   #52976d;
  --lp-accent:  #f472b6;
  --lp-accent2: #f9a8c9;
  --lp-font:    'Quicksand', sans-serif;
  --lp-body-bg: #eef7f0;
}

html[data-lp-theme="minecraft"] {
  --lp-bg:      #1d1c22;
  --lp-panel:   #232226;
  --lp-panel2:  #2d2b33;
  --lp-border:  rgba(58,56,67,0.8);
  --lp-text:    #f2f2f2;
  --lp-muted:   #8b6240;
  --lp-accent:  #9147f5;
  --lp-accent2: #b07ef8;
  --lp-font:    'Silkscreen', monospace;
  --lp-body-bg: #1d1c22;
}

html[data-lp-theme="frutiger"] {
  --lp-bg:      #f0f8ff;
  --lp-panel:   rgba(255,255,255,0.6);
  --lp-panel2:  rgba(255,255,255,0.4);
  --lp-border:  rgba(255,255,255,0.7);
  --lp-text:    #0a2a4a;
  --lp-muted:   #3d92d0;
  --lp-accent:  #5ab83a;
  --lp-accent2: #7dd35c;
  --lp-font:    'Quicksand', sans-serif;
  --lp-body-bg: linear-gradient(160deg, #c8e8f8 0%, #e8f4fd 40%, #d4eecc 100%);
}

html[data-lp-theme="frutiger-retro"] {
  --lp-bg:      #0a1628;
  --lp-panel:   rgba(15,31,56,0.7);
  --lp-panel2:  rgba(22,45,74,0.7);
  --lp-border:  rgba(90,148,196,0.2);
  --lp-text:    #e8f4fd;
  --lp-muted:   #5a94c4;
  --lp-accent:  #5ab83a;
  --lp-accent2: #7dd35c;
  --lp-font:    'Quicksand', sans-serif;
  --lp-body-bg: #0a1628;
}

html[data-lp-theme="terminal"] {
  --lp-bg:      #000000;
  --lp-panel:   #020802;
  --lp-panel2:  #041204;
  --lp-border:  rgba(51,255,51,0.12);
  --lp-text:    #33ff33;
  --lp-muted:   #1a5c1a;
  --lp-accent:  #33ff33;
  --lp-accent2: #55ff55;
  --lp-font:    'Share Tech Mono', monospace;
  --lp-body-bg: #000000;
}

html[data-lp-theme="code"] {
  --lp-bg:      #1e1e1e;
  --lp-panel:   #252526;
  --lp-panel2:  #2d2d2d;
  --lp-border:  rgba(0,122,204,0.15);
  --lp-text:    #d4d4d4;
  --lp-muted:   #6a6a6a;
  --lp-accent:  #007acc;
  --lp-accent2: #4fc1ff;
  --lp-font:    'JetBrains Mono', monospace;
  --lp-body-bg: #1e1e1e;
}

/* Apply theme vars to page — only when a theme attribute is set by JS */
html[data-lp-theme] body { background-color: var(--lp-bg); color: var(--lp-text); font-family: var(--lp-font); }

/* Special body backgrounds
   iOS Safari has long-standing bugs with `background-attachment: fixed` on the
   body (background doesn't stay fixed during scroll, renders at wrong size, etc.).
   The fix is a `position: fixed` pseudo-element that paints the gradient behind
   everything — works identically on iOS, Android, and desktop. */
html[data-lp-theme="frutiger"] body,
html[data-lp-theme="frutiger-retro"] body {
  background: transparent;
}
html[data-lp-theme="frutiger"] body::before,
html[data-lp-theme="frutiger-retro"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}
html[data-lp-theme="frutiger"] body::before {
  background: linear-gradient(160deg, #c8e8f8 0%, #e8f4fd 40%, #d4eecc 100%);
}
html[data-lp-theme="frutiger-retro"] body::before {
  background: linear-gradient(160deg, #0a1628 0%, #0f2844 50%, #0a1e30 100%);
}

/* Frosted-glass panels for Frutiger — the signature Aero look.
   Matches what the main app does at src/index.css for [data-theme="frutiger"]. */
html[data-lp-theme="frutiger"] #mockup-dashboard,
html[data-lp-theme="frutiger"] #mockup-habits,
html[data-lp-theme="frutiger"] #mockup-calendar,
html[data-lp-theme="frutiger"] #mockup-tasks,
html[data-lp-theme="frutiger"] #mockup-trips,
html[data-lp-theme="frutiger"] #mockup-clean,
html[data-lp-theme="frutiger-retro"] #mockup-dashboard,
html[data-lp-theme="frutiger-retro"] #mockup-habits,
html[data-lp-theme="frutiger-retro"] #mockup-calendar,
html[data-lp-theme="frutiger-retro"] #mockup-tasks,
html[data-lp-theme="frutiger-retro"] #mockup-trips,
html[data-lp-theme="frutiger-retro"] #mockup-clean {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 4px 24px rgba(30, 114, 184, 0.1), inset 0 1px 0 rgba(255,255,255,0.6);
}
html[data-lp-theme="starwars"] body { background-color: #020208; }
html[data-lp-theme="starwars"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-color: #020208;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(200,230,255,0.8), transparent),
    radial-gradient(1px 1px at 45% 8%, rgba(200,230,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 80% 22%, rgba(200,230,255,0.9), transparent),
    radial-gradient(1px 1px at 25% 42%, rgba(200,230,255,0.6), transparent),
    radial-gradient(1px 1px at 92% 55%, rgba(200,230,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 60% 70%, rgba(200,230,255,0.8), transparent),
    radial-gradient(1px 1px at 35% 85%, rgba(200,230,255,0.6), transparent);
}

/* Terminal scanlines */
html[data-lp-theme="terminal"] body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 3px);
}

/* Hero fixed background glows — hide on light themes */
html[data-lp-theme="notion"] .fixed.bg-teal-600\/10,
html[data-lp-theme="notion"] .fixed.bg-emerald-600\/10,
html[data-lp-theme="comic"] .fixed.bg-teal-600\/10,
html[data-lp-theme="comic"] .fixed.bg-emerald-600\/10,
html[data-lp-theme="paper"] .fixed.bg-teal-600\/10,
html[data-lp-theme="paper"] .fixed.bg-emerald-600\/10,
html[data-lp-theme="arizona"] .fixed.bg-teal-600\/10,
html[data-lp-theme="arizona"] .fixed.bg-emerald-600\/10,
html[data-lp-theme="cute"] .fixed.bg-teal-600\/10,
html[data-lp-theme="cute"] .fixed.bg-emerald-600\/10,
html[data-lp-theme="cafe"] .fixed.bg-teal-600\/10,
html[data-lp-theme="cafe"] .fixed.bg-emerald-600\/10,
html[data-lp-theme="post-it"] .fixed.bg-teal-600\/10,
html[data-lp-theme="post-it"] .fixed.bg-emerald-600\/10,
html[data-lp-theme="frutiger"] .fixed.bg-teal-600\/10,
html[data-lp-theme="frutiger"] .fixed.bg-emerald-600\/10 { display: none; }

/* ════════════════════════════════════════════════════
   LIGHT-THEME VISIBILITY OVERRIDES
   The page is built with hard-coded Tailwind dark classes
   (text-white, text-zinc-400, bg-zinc-900/50…). On light
   themes those render white-on-white. Remap them here.
   ════════════════════════════════════════════════════ */

html[data-lp-theme="notion"],
html[data-lp-theme="comic"],
html[data-lp-theme="paper"],
html[data-lp-theme="arizona"],
html[data-lp-theme="cute"],
html[data-lp-theme="cafe"],
html[data-lp-theme="post-it"],
html[data-lp-theme="frutiger"] {
  --lp-text-strong: var(--lp-text);
  --lp-text-dim:    color-mix(in srgb, var(--lp-text) 75%, transparent);
  --lp-text-dimmer: color-mix(in srgb, var(--lp-text) 55%, transparent);
  --lp-text-faint:  color-mix(in srgb, var(--lp-text) 35%, transparent);
  --lp-surface-1:   color-mix(in srgb, var(--lp-text) 5%,  transparent);
  --lp-surface-2:   color-mix(in srgb, var(--lp-text) 9%,  transparent);
  --lp-surface-3:   color-mix(in srgb, var(--lp-text) 14%, transparent);
  --lp-border-1:    color-mix(in srgb, var(--lp-text) 10%, transparent);
  --lp-border-2:    color-mix(in srgb, var(--lp-text) 18%, transparent);
}

/* Text color remaps (only on light themes) */
html[data-lp-theme="notion"] .text-white,
html[data-lp-theme="comic"] .text-white,
html[data-lp-theme="paper"] .text-white,
html[data-lp-theme="arizona"] .text-white,
html[data-lp-theme="cute"] .text-white,
html[data-lp-theme="cafe"] .text-white,
html[data-lp-theme="post-it"] .text-white,
html[data-lp-theme="frutiger"] .text-white { color: var(--lp-text); }

html[data-lp-theme="notion"] .text-zinc-100,
html[data-lp-theme="comic"] .text-zinc-100,
html[data-lp-theme="paper"] .text-zinc-100,
html[data-lp-theme="arizona"] .text-zinc-100,
html[data-lp-theme="cute"] .text-zinc-100,
html[data-lp-theme="cafe"] .text-zinc-100,
html[data-lp-theme="post-it"] .text-zinc-100,
html[data-lp-theme="frutiger"] .text-zinc-100,
html[data-lp-theme="notion"] .text-zinc-200,
html[data-lp-theme="comic"] .text-zinc-200,
html[data-lp-theme="paper"] .text-zinc-200,
html[data-lp-theme="arizona"] .text-zinc-200,
html[data-lp-theme="cute"] .text-zinc-200,
html[data-lp-theme="cafe"] .text-zinc-200,
html[data-lp-theme="post-it"] .text-zinc-200,
html[data-lp-theme="frutiger"] .text-zinc-200,
html[data-lp-theme="notion"] .text-zinc-300,
html[data-lp-theme="comic"] .text-zinc-300,
html[data-lp-theme="paper"] .text-zinc-300,
html[data-lp-theme="arizona"] .text-zinc-300,
html[data-lp-theme="cute"] .text-zinc-300,
html[data-lp-theme="cafe"] .text-zinc-300,
html[data-lp-theme="post-it"] .text-zinc-300,
html[data-lp-theme="frutiger"] .text-zinc-300 { color: var(--lp-text-dim); }

html[data-lp-theme="notion"] .text-zinc-400,
html[data-lp-theme="comic"] .text-zinc-400,
html[data-lp-theme="paper"] .text-zinc-400,
html[data-lp-theme="arizona"] .text-zinc-400,
html[data-lp-theme="cute"] .text-zinc-400,
html[data-lp-theme="cafe"] .text-zinc-400,
html[data-lp-theme="post-it"] .text-zinc-400,
html[data-lp-theme="frutiger"] .text-zinc-400,
html[data-lp-theme="notion"] .text-zinc-500,
html[data-lp-theme="comic"] .text-zinc-500,
html[data-lp-theme="paper"] .text-zinc-500,
html[data-lp-theme="arizona"] .text-zinc-500,
html[data-lp-theme="cute"] .text-zinc-500,
html[data-lp-theme="cafe"] .text-zinc-500,
html[data-lp-theme="post-it"] .text-zinc-500,
html[data-lp-theme="frutiger"] .text-zinc-500 { color: var(--lp-text-dimmer); }

html[data-lp-theme="notion"] .text-zinc-600,
html[data-lp-theme="comic"] .text-zinc-600,
html[data-lp-theme="paper"] .text-zinc-600,
html[data-lp-theme="arizona"] .text-zinc-600,
html[data-lp-theme="cute"] .text-zinc-600,
html[data-lp-theme="cafe"] .text-zinc-600,
html[data-lp-theme="post-it"] .text-zinc-600,
html[data-lp-theme="frutiger"] .text-zinc-600,
html[data-lp-theme="notion"] .text-zinc-700,
html[data-lp-theme="comic"] .text-zinc-700,
html[data-lp-theme="paper"] .text-zinc-700,
html[data-lp-theme="arizona"] .text-zinc-700,
html[data-lp-theme="cute"] .text-zinc-700,
html[data-lp-theme="cafe"] .text-zinc-700,
html[data-lp-theme="post-it"] .text-zinc-700,
html[data-lp-theme="frutiger"] .text-zinc-700 { color: var(--lp-text-faint); }

/* Panel / surface remaps — anything dark-zinc → themed light panel */
html[data-lp-theme="notion"] .bg-zinc-950,
html[data-lp-theme="comic"] .bg-zinc-950,
html[data-lp-theme="paper"] .bg-zinc-950,
html[data-lp-theme="arizona"] .bg-zinc-950,
html[data-lp-theme="cute"] .bg-zinc-950,
html[data-lp-theme="cafe"] .bg-zinc-950,
html[data-lp-theme="post-it"] .bg-zinc-950,
html[data-lp-theme="frutiger"] .bg-zinc-950 { background-color: var(--lp-bg); }

html[data-lp-theme="notion"] .bg-zinc-900,
html[data-lp-theme="comic"] .bg-zinc-900,
html[data-lp-theme="paper"] .bg-zinc-900,
html[data-lp-theme="arizona"] .bg-zinc-900,
html[data-lp-theme="cute"] .bg-zinc-900,
html[data-lp-theme="cafe"] .bg-zinc-900,
html[data-lp-theme="post-it"] .bg-zinc-900,
html[data-lp-theme="frutiger"] .bg-zinc-900,
html[data-lp-theme="notion"] .bg-zinc-900\/50,
html[data-lp-theme="comic"] .bg-zinc-900\/50,
html[data-lp-theme="paper"] .bg-zinc-900\/50,
html[data-lp-theme="arizona"] .bg-zinc-900\/50,
html[data-lp-theme="cute"] .bg-zinc-900\/50,
html[data-lp-theme="cafe"] .bg-zinc-900\/50,
html[data-lp-theme="post-it"] .bg-zinc-900\/50,
html[data-lp-theme="frutiger"] .bg-zinc-900\/50,
html[data-lp-theme="notion"] .bg-zinc-900\/80,
html[data-lp-theme="comic"] .bg-zinc-900\/80,
html[data-lp-theme="paper"] .bg-zinc-900\/80,
html[data-lp-theme="arizona"] .bg-zinc-900\/80,
html[data-lp-theme="cute"] .bg-zinc-900\/80,
html[data-lp-theme="cafe"] .bg-zinc-900\/80,
html[data-lp-theme="post-it"] .bg-zinc-900\/80,
html[data-lp-theme="frutiger"] .bg-zinc-900\/80,
html[data-lp-theme="notion"] .bg-zinc-900\/40,
html[data-lp-theme="comic"] .bg-zinc-900\/40,
html[data-lp-theme="paper"] .bg-zinc-900\/40,
html[data-lp-theme="arizona"] .bg-zinc-900\/40,
html[data-lp-theme="cute"] .bg-zinc-900\/40,
html[data-lp-theme="cafe"] .bg-zinc-900\/40,
html[data-lp-theme="post-it"] .bg-zinc-900\/40,
html[data-lp-theme="frutiger"] .bg-zinc-900\/40 { background-color: var(--lp-panel); }

html[data-lp-theme="notion"] .bg-zinc-800,
html[data-lp-theme="comic"] .bg-zinc-800,
html[data-lp-theme="paper"] .bg-zinc-800,
html[data-lp-theme="arizona"] .bg-zinc-800,
html[data-lp-theme="cute"] .bg-zinc-800,
html[data-lp-theme="cafe"] .bg-zinc-800,
html[data-lp-theme="post-it"] .bg-zinc-800,
html[data-lp-theme="frutiger"] .bg-zinc-800 { background-color: var(--lp-panel2); }

/* Translucent surfaces tinted from white (invisible on light) → tint from text */
html[data-lp-theme="notion"] .bg-white\/5,
html[data-lp-theme="comic"] .bg-white\/5,
html[data-lp-theme="paper"] .bg-white\/5,
html[data-lp-theme="arizona"] .bg-white\/5,
html[data-lp-theme="cute"] .bg-white\/5,
html[data-lp-theme="cafe"] .bg-white\/5,
html[data-lp-theme="post-it"] .bg-white\/5,
html[data-lp-theme="frutiger"] .bg-white\/5 { background-color: var(--lp-surface-1); }

html[data-lp-theme="notion"] .bg-white\/10,
html[data-lp-theme="comic"] .bg-white\/10,
html[data-lp-theme="paper"] .bg-white\/10,
html[data-lp-theme="arizona"] .bg-white\/10,
html[data-lp-theme="cute"] .bg-white\/10,
html[data-lp-theme="cafe"] .bg-white\/10,
html[data-lp-theme="post-it"] .bg-white\/10,
html[data-lp-theme="frutiger"] .bg-white\/10 { background-color: var(--lp-surface-2); }

/* Border remaps — white-alpha borders vanish on white bg */
html[data-lp-theme="notion"] .border-white\/5,
html[data-lp-theme="comic"] .border-white\/5,
html[data-lp-theme="paper"] .border-white\/5,
html[data-lp-theme="arizona"] .border-white\/5,
html[data-lp-theme="cute"] .border-white\/5,
html[data-lp-theme="cafe"] .border-white\/5,
html[data-lp-theme="post-it"] .border-white\/5,
html[data-lp-theme="frutiger"] .border-white\/5,
html[data-lp-theme="notion"] .border-white\/8,
html[data-lp-theme="comic"] .border-white\/8,
html[data-lp-theme="paper"] .border-white\/8,
html[data-lp-theme="arizona"] .border-white\/8,
html[data-lp-theme="cute"] .border-white\/8,
html[data-lp-theme="cafe"] .border-white\/8,
html[data-lp-theme="post-it"] .border-white\/8,
html[data-lp-theme="frutiger"] .border-white\/8 { border-color: var(--lp-border-1); }

html[data-lp-theme="notion"] .border-white\/10,
html[data-lp-theme="comic"] .border-white\/10,
html[data-lp-theme="paper"] .border-white\/10,
html[data-lp-theme="arizona"] .border-white\/10,
html[data-lp-theme="cute"] .border-white\/10,
html[data-lp-theme="cafe"] .border-white\/10,
html[data-lp-theme="post-it"] .border-white\/10,
html[data-lp-theme="frutiger"] .border-white\/10,
html[data-lp-theme="notion"] .border-white\/15,
html[data-lp-theme="comic"] .border-white\/15,
html[data-lp-theme="paper"] .border-white\/15,
html[data-lp-theme="arizona"] .border-white\/15,
html[data-lp-theme="cute"] .border-white\/15,
html[data-lp-theme="cafe"] .border-white\/15,
html[data-lp-theme="post-it"] .border-white\/15,
html[data-lp-theme="frutiger"] .border-white\/15,
html[data-lp-theme="notion"] .border-white\/20,
html[data-lp-theme="comic"] .border-white\/20,
html[data-lp-theme="paper"] .border-white\/20,
html[data-lp-theme="arizona"] .border-white\/20,
html[data-lp-theme="cute"] .border-white\/20,
html[data-lp-theme="cafe"] .border-white\/20,
html[data-lp-theme="post-it"] .border-white\/20,
html[data-lp-theme="frutiger"] .border-white\/20 { border-color: var(--lp-border-2); }

/* Hero-CTA button that's literally "bg-white text-zinc-950" needs inversion,
   otherwise it becomes white-on-white-ish */
html[data-lp-theme="notion"] .bg-white,
html[data-lp-theme="comic"] .bg-white,
html[data-lp-theme="paper"] .bg-white,
html[data-lp-theme="arizona"] .bg-white,
html[data-lp-theme="cute"] .bg-white,
html[data-lp-theme="cafe"] .bg-white,
html[data-lp-theme="post-it"] .bg-white,
html[data-lp-theme="frutiger"] .bg-white { background-color: var(--lp-text); color: var(--lp-bg); }

html[data-lp-theme="notion"] .text-zinc-950,
html[data-lp-theme="comic"] .text-zinc-950,
html[data-lp-theme="paper"] .text-zinc-950,
html[data-lp-theme="arizona"] .text-zinc-950,
html[data-lp-theme="cute"] .text-zinc-950,
html[data-lp-theme="cafe"] .text-zinc-950,
html[data-lp-theme="post-it"] .text-zinc-950,
html[data-lp-theme="frutiger"] .text-zinc-950 { color: var(--lp-bg); }

/* Navbar scrolled — base rule uses a dark rgba fallback; force --lp-bg */
html[data-lp-theme="notion"] .navbar-scrolled,
html[data-lp-theme="comic"] .navbar-scrolled,
html[data-lp-theme="paper"] .navbar-scrolled,
html[data-lp-theme="arizona"] .navbar-scrolled,
html[data-lp-theme="cute"] .navbar-scrolled,
html[data-lp-theme="cafe"] .navbar-scrolled,
html[data-lp-theme="post-it"] .navbar-scrolled,
html[data-lp-theme="frutiger"] .navbar-scrolled {
  background-color: color-mix(in srgb, var(--lp-bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--lp-border-2);
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}

/* Calendar mockup sticky header has hard-coded bg-[#09090b] — override */
html[data-lp-theme="notion"] #mockup-cal-header,
html[data-lp-theme="comic"] #mockup-cal-header,
html[data-lp-theme="paper"] #mockup-cal-header,
html[data-lp-theme="arizona"] #mockup-cal-header,
html[data-lp-theme="cute"] #mockup-cal-header,
html[data-lp-theme="cafe"] #mockup-cal-header,
html[data-lp-theme="post-it"] #mockup-cal-header,
html[data-lp-theme="frutiger"] #mockup-cal-header { background-color: var(--lp-bg) !important; }

/* Footer — literal bg-zinc-950 on light themes becomes dark band on cream. Use panel. */
html[data-lp-theme="notion"] footer.bg-zinc-950,
html[data-lp-theme="comic"] footer.bg-zinc-950,
html[data-lp-theme="paper"] footer.bg-zinc-950,
html[data-lp-theme="arizona"] footer.bg-zinc-950,
html[data-lp-theme="cute"] footer.bg-zinc-950,
html[data-lp-theme="cafe"] footer.bg-zinc-950,
html[data-lp-theme="post-it"] footer.bg-zinc-950,
html[data-lp-theme="frutiger"] footer.bg-zinc-950 { background-color: var(--lp-panel); }

/* Heading color on light themes — default is "text-white" on <h1/h2> implicitly.
   We already remapped .text-white above. Plain headings inherit body color. */