/* === Font rendering: match live site exactly === */
:root, html, body {
  font-synthesis: none !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
/* Force display optical size on headings.
   DM Sans opsz=40 produces display-optimized glyphs (thinner strokes,
   refined proportions, the "bent" elegant look at large sizes). */
h1 {
  font-variation-settings: 'opsz' 40, 'wght' 350 !important;
  letter-spacing: -0.03em !important;
}
h2 {
  font-variation-settings: 'opsz' 40, 'wght' 350 !important;
  letter-spacing: -0.03em !important;
}
h3 {
  font-variation-settings: 'opsz' 32, 'wght' 430 !important;
  letter-spacing: -0.015em !important;
}

/* === Color system: Zinc palette, no warm tones === */
:root {
  --ink: #18181B;
  --paper: #FAFAFA;
  --warm: #F4F4F5;
  --muted: #71717A;
}

.slide--dark { background: #09090B !important; }
.slide--light { background: #FAFAFA !important; color: #18181B !important; }
.slide--warm { background: #F4F4F5 !important; color: #18181B !important; }

/* Light slide */
.slide--light h2 { color: #18181B !important; }
.slide--light .eyebrow { color: #71717A !important; opacity: 1 !important; }
.slide--light .lead { color: #52525B !important; opacity: 1 !important; }
.slide--light .microcopy { color: #A1A1AA !important; opacity: 1 !important; }
.slide--light .proof-video { background: #F4F4F5 !important; border-color: #E4E4E7 !important; }
.slide--light .control-video { background: #F4F4F5 !important; border-color: #E4E4E7 !important; }

/* Warm slide */
.slide--warm .eyebrow { color: #71717A !important; opacity: 1 !important; }
.slide--warm h2 { color: #18181B !important; }
.slide--warm h3 { color: #18181B !important; }
.slide--warm .process-card p:not(.eyebrow) { color: #71717A !important; }

/* === Process cards: NO card styling on desktop. Content only. === */
.process-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* === Remove ALL drop shadows site-wide === */
.proof-video,
.before-after,
.control-video,
.pricing-card,
.pricing-addon,
.process-card,
.insight-card,
.bullet-stack {
  box-shadow: none !important;
}

/* === Pricing cards: subtle glass, no shadow === */
.pricing-card {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  border-radius: 0.3125rem !important;
}

/* === Topbar: DO NOT add padding. Original uses fixed insets. === */
/* The original CSS positions .topbar with top/left/right: 1rem. 
   We only need to ensure align-items: center for vertical centering. */
.topbar {
  align-items: center !important;
}

/* Home link in topbar */
.topbar__right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.topbar .home-link {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: inherit;
  text-decoration: none;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 0.22rem;
  padding: 0.5rem 0.64rem;
  transition: background 0.2s;
}
.topbar .home-link:hover { background: rgba(255,255,255,0.25); }
.topbar .home-link svg {
  display: inline;
  width: 0.55em;
  height: 0.55em;
  margin-left: 0.3em;
  vertical-align: middle;
}

/* === CTA button: glassmorphic, matching original with font: inherit === */
.primary-link {
  color: #fff !important;
  font: inherit !important;
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  border-radius: 0.28rem !important;
  padding: 0.76rem 1.05rem !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.primary-link:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.55) !important;
}

/* === Nav/control buttons === */
.control-group button,
.deck-nav button {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  border-radius: 0.22rem !important;
}
.control-group button.is-active,
.deck-nav button:not(:disabled):hover {
  background: rgba(255,255,255,0.35) !important;
}

/* Eyebrow: preserve original 0.16em from live site (do NOT override) */

/* === Theme-aware UI: dark buttons on light slides === */
.deck[data-theme="light"] .topbar,
.deck[data-theme="light"] .deck-nav {
  mix-blend-mode: normal !important;
  color: #18181B !important;
}
.deck[data-theme="light"] .topbar .home-link {
  color: #18181B !important;
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.15) !important;
}
.deck[data-theme="light"] .topbar .home-link:hover {
  background: rgba(0,0,0,0.1) !important;
}
.deck[data-theme="light"] .control-group button,
.deck[data-theme="light"] .deck-nav button {
  color: #18181B !important;
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.15) !important;
}
.deck[data-theme="light"] .control-group button.is-active,
.deck[data-theme="light"] .deck-nav button:not(:disabled):hover {
  background: rgba(0,0,0,0.12) !important;
}
.deck[data-theme="light"] .dots button {
  background: rgba(0,0,0,0.2) !important;
}
.deck[data-theme="light"] .dots button.is-active {
  background: #18181B !important;
}

/* === Mobile process cards: dark card (original mobile treatment) === */
@media (max-width: 640px) {
  .process-card {
    color: #fff !important;
    background: #111 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 0.34rem !important;
    padding: 0.7rem !important;
  }
  .process-card h3 { color: #fff !important; }
  .process-card p:not(.eyebrow) { color: rgba(255,255,255,0.78) !important; }
}