:root{
  --primary:#0007cd !important;
  --primary-active:#0005a3 !important;
  --primary-glow:#1a26ff !important;
  --ink:#0a0a0a !important;
  --body:#525252 !important;
  --body-strong:#171717 !important;
  --muted:#737373 !important;
  --muted-soft:#a3a3a3 !important;
  --hairline:#e5e5e5 !important;
  --hairline-soft:#f5f5f5 !important;
  --hairline-strong:#d4d4d4 !important;
  --canvas:#ffffff !important;
  --canvas-deep:#fafafa !important;
  --surface-card:#ffffff !important;
  --surface-card-elevated:#fafafa !important;
  --surface-strong:#f5f5f5 !important;
  --on-primary:#ffffff !important;
  --accent-cyan:#0891b2 !important;
  --accent-violet:#6d28d9 !important;
  --semantic-error:#ef4444 !important;
  --semantic-success:#22c55e !important;
  --display: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  --text: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
  --radius-xs:4px !important;
  --radius-sm:6px !important;
  --radius-md:8px !important;
  --radius-lg:12px !important;
  --radius-xl:16px !important;
  --radius-pill:9999px !important;
}

html,body{
  background: var(--canvas) !important;
  color: var(--body) !important;
  font-family: var(--text) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

body{
  background: var(--canvas) !important;
  color: var(--body) !important;
}

/* ============ NAV (Composio top-nav-light) ============ */
#lp-navbar{
  background: var(--canvas) !important;
  border-bottom: 1px solid var(--hairline) !important;
  min-height: 64px !important;
  height: auto !important;
  max-width: none !important;
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  overflow: visible !important;
}

#lp-navbar .miro-container{
  height: 64px !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
  width: 100% !important;
}
#lp-navbar .lp-mobile-menu .miro-container{
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 48px !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}

/* ============ Outer landing wrapper: remove container constraints so sections go full-width (CSS-only, no blade change) ============ */
#lp-navbar + .miro-container{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lp-nav-pill{
  padding: 8px 14px !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--body-strong) !important;
  background: transparent !important;
  transition: background 200ms ease !important;
  font-family: var(--text) !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

.lp-nav-pill:hover{
  background: var(--hairline-soft) !important;
}

.lp-nav-pill-active{
  color: var(--body-strong) !important;
  background: var(--surface-card-elevated) !important;
}

.miro-container{
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
}

/* ============ Buttons — Composio Standard ============ */
.btn-primary{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border: none !important;
  padding: 10px 18px !important;
  height: 40px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  font-family: var(--text) !important;
  border-radius: var(--radius-md) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 200ms ease !important;
}
.btn-primary:hover{ background: var(--primary-active) !important; color: var(--on-primary) !important; }
.btn-primary:active{ background: var(--primary-active) !important; }

.btn-secondary{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--surface-card-elevated) !important;
  color: var(--body-strong) !important;
  border: 1px solid var(--hairline) !important;
  padding: 9px 17px !important;
  height: 40px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  font-family: var(--text) !important;
  border-radius: var(--radius-md) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 200ms ease, border-color 200ms ease !important;
}
.btn-secondary:hover{ background: var(--surface-strong) !important; color: var(--body-strong) !important; border-color: var(--hairline-strong) !important; }

.btn-on-dark{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border: none !important;
  padding: 10px 18px !important;
  height: 40px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  font-family: var(--text) !important;
  border-radius: var(--radius-md) !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.btn-on-dark:hover{ background: var(--primary-active) !important; }

.btn-ghost-dark{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  color: var(--body-strong) !important;
  border: 1px solid var(--hairline-strong) !important;
  padding: 9px 17px !important;
  height: 40px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  font-family: var(--text) !important;
  border-radius: var(--radius-md) !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.btn-ghost-dark:hover{ border-color: var(--muted-soft) !important; }

/* ============ Mobile menu ============ */
.lp-mobile-menu{
  background: var(--canvas) !important;
  border-top: 1px solid var(--hairline-soft) !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 300ms ease !important;
  width: 100% !important;
}
.lp-menu-open .lp-mobile-menu{
  max-height: 1600px !important;
  overflow: visible !important;
}
#lp-menu-btn{
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--body-strong) !important;
  border-radius: 12px !important;
}
.lp-icon-close{ display:none !important; }
.lp-open .lp-icon-menu{ display:none !important; }
.lp-open .lp-icon-close{ display:inline-flex !important; }

/* ============ Badge Pills (caption-uppercase, 88px letter, pill radius) ============ */
.badge{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--surface-card-elevated) !important;
  color: var(--body-strong) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.88px !important;
  font-family: var(--text) !important;
  line-height: 1.4 !important;
  border: 1px solid var(--hairline) !important;
}

/* Variantes de badge: mono-elevated bg com texto colorido (sem tint pastel) */
.badge-yellow{ color: var(--body-strong) !important; background: var(--surface-card-elevated) !important; }
.badge-yellow span{ background: var(--semantic-success) !important; }
.badge-coral{ color: var(--body-strong) !important; background: var(--surface-card-elevated) !important; }
.badge-teal{ color: var(--body-strong) !important; background: var(--surface-card-elevated) !important; }
.badge-rose{ color: var(--body-strong) !important; background: var(--surface-card-elevated) !important; }
.badge-orange{ color: var(--body-strong) !important; background: var(--surface-card-elevated) !important; }
.badge-success{ color: var(--semantic-success) !important; background: var(--surface-card-elevated) !important; }
.badge-promo{ color: var(--primary) !important; background: var(--surface-card-elevated) !important; }

/* ============ Section Labels / Heads (caption-uppercase label + display-lg heading) ============ */
.section-heading{
  font-family: var(--display) !important;
  font-size: 44px !important;
  font-weight: 500 !important;
  color: var(--body-strong) !important;
  margin: 0 0 16px !important;
  line-height: 1.1 !important;
  letter-spacing: -1.32px !important;
}

.section-sub{
  font-size: 16px !important;
  color: var(--body) !important;
  max-width: 720px !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

/* ============ HERO — Liquid Design System ============ */
.dental-hero{
    padding: 96px 48px !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background-color: #05093d !important;
    background-image: linear-gradient(130deg, rgb(10 10 10) 0%, rgb(10 15 80 / 0%) 100%), url(../img/landing/dentist-examining-female-patient-with-tools.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    isolation: isolate !important;
}
.dental-hero::after{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('../img/landing/dentist-examining-female-patient-with-tools.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: saturate(0.85) contrast(1.05) brightness(0.88) !important;
  mix-blend-mode: luminosity !important;
  opacity: 0.65 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.liquid-blobs{
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.liquid-blobs .blob{
  position: absolute !important;
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50% !important;
  filter: blur(90px) !important;
  opacity: 0.85 !important;
  mix-blend-mode: screen !important;
  will-change: transform, border-radius !important;
  animation: liquid-morph 18s ease-in-out infinite !important;
}
.liquid-blobs .blob-1{
  width: 680px !important;
  height: 680px !important;
  top: -220px !important;
  left: -160px !important;
  background: radial-gradient(circle at 30% 30%,
    rgba(0, 7, 205, 0.85) 0%,
    rgba(43, 56, 255, 0.55) 40%,
    transparent 70%) !important;
  animation-delay: 0s !important;
  animation-duration: 20s !important;
}
.liquid-blobs .blob-2{
  width: 560px !important;
  height: 560px !important;
  bottom: -200px !important;
  right: -140px !important;
  background: radial-gradient(circle at 65% 40%,
    rgba(130, 60, 255, 0.75) 0%,
    rgba(72, 0, 255, 0.45) 45%,
    transparent 72%) !important;
  animation-delay: -5s !important;
  animation-duration: 22s !important;
}
.liquid-blobs .blob-3{
  width: 520px !important;
  height: 520px !important;
  top: 30% !important;
  right: 10% !important;
  background: radial-gradient(circle at 45% 55%,
    rgba(0, 195, 255, 0.55) 0%,
    rgba(0, 110, 255, 0.35) 45%,
    transparent 70%) !important;
  animation-delay: -9s !important;
  animation-duration: 24s !important;
  mix-blend-mode: screen !important;
  opacity: 0.75 !important;
}
.liquid-blobs .blob-4{
  width: 480px !important;
  height: 480px !important;
  bottom: 5% !important;
  left: 20% !important;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 215, 0, 0.22) 0%,
    rgba(0, 7, 205, 0.12) 50%,
    transparent 72%) !important;
  animation-delay: -13s !important;
  animation-duration: 26s !important;
  mix-blend-mode: overlay !important;
  opacity: 0.9 !important;
}
@keyframes liquid-morph{
  0%,100%{
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  }
  25%{
    transform: translate3d(40px, -30px, 0) scale(1.08) rotate(4deg);
    border-radius: 45% 55% 40% 60% / 58% 42% 58% 42%;
  }
  50%{
    transform: translate3d(-30px, 25px, 0) scale(0.95) rotate(-3deg);
    border-radius: 55% 45% 62% 38% / 45% 55% 45% 55%;
  }
  75%{
    transform: translate3d(25px, 35px, 0) scale(1.04) rotate(2deg);
    border-radius: 40% 60% 48% 52% / 55% 48% 52% 45%;
  }
}
.dental-hero::before{
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 900px !important;
  height: 900px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  mix-blend-mode: soft-light !important;
}
.dental-hero-inner{
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
  position: relative !important;
  z-index: 5 !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}
.dental-hero-text{
  max-width: 800px !important;
  position: relative !important;
  z-index: 6 !important;
}
.dental-hero-title{
  font-family: var(--display) !important;
  font-size: 72px !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  margin: 0 0 24px !important;
  letter-spacing: -2.16px !important;
  text-align: left !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45) !important;
}
.dental-hero-mark{
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.dental-hero-sub{
  color: rgba(255,255,255,0.85) !important;
  font-size: 18px !important;
  max-width: 720px !important;
  margin: 0 0 32px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35) !important;
}

.dental-hero-trust{
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 24px !important;
}
.dental-hero-avatars{
  display: flex !important;
}
.dental-hero-avatar{
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--on-primary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 2px solid var(--canvas) !important;
  margin-left: -8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
img.dental-hero-avatar{ display: block !important; }
.dental-hero-avatar:first-child{ margin-left: 0 !important; }
.da-yellow{ background: var(--primary) !important; }
.da-coral{ background: var(--accent-violet) !important; }
.da-teal{ background: var(--accent-cyan) !important; color: #fff !important; }
.da-rose{ background: #666666 !important; }

/* Hero Visual: terminal-mockup-grid 2x2 style */
.dental-hero-visual{
  position: relative !important;
  z-index: 1 !important;
}
.dental-hero-card{
  background: var(--canvas-deep) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--radius-xl) !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  font-family: var(--text) !important;
  color: var(--body) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04) !important;
}
.dental-hero-card > div:first-child{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}
.dental-hero-card > div:first-child > div:first-child > div:first-child{
  font-size: 12px !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.88px !important;
}
.dental-hero-card > div:first-child > div:first-child > div:last-child{
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--body-strong) !important;
  font-family: var(--mono) !important;
}
.dental-hero-card .dental-note-wrap{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
.dental-note{
  background: var(--surface-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px !important;
  font-size: 12px !important;
  color: var(--body) !important;
  line-height: 1.5 !important;
  font-family: var(--mono) !important;
  border: 1px solid var(--hairline) !important;
}
.dental-note > div:first-child{
  font-weight: 600 !important;
  color: var(--body-strong) !important;
  margin-bottom: 4px !important;
  font-family: var(--text) !important;
}
.dn-yellow{ border-left: 3px solid var(--primary) !important; }
.dn-coral{ border-left: 3px solid var(--accent-violet) !important; }
.dn-teal{ border-left: 3px solid var(--accent-cyan) !important; }
.dn-rose{ border-left: 3px solid var(--semantic-success) !important; }

/* ============ ABOUT (Section card borders) ============ */
.about-section{
  padding: 80px 48px !important;
  border-top: 1px solid var(--hairline) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.about-cols{
  display: grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  gap: 48px !important;
  align-items: center !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}
.about-card-visual{
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-xl) !important;
  padding: 28px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.03) !important;
}
.about-card-visual::before{
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(26,38,255,0.08) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

.stat-row{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  position: relative !important;
  z-index: 1 !important;
}
.stat-cell{
  background: var(--surface-card-elevated) !important;
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
  text-align: center !important;
  border: 1px solid var(--hairline) !important;
}
.stat-num{
  display: block !important;
  font-family: var(--display) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: var(--body-strong) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.96px !important;
  margin-bottom: 6px !important;
}
.stat-label{
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  font-weight: 600 !important;
}

.about-col-text h3{ margin: 0 !important; }
.about-col-text h3 + p{
  font-size: 16px !important;
  color: var(--body) !important;
  margin: 0 0 28px !important;
  line-height: 1.55 !important;
}
.about-col-img{
  position: relative !important;
}
.about-image-wrap{
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 4 / 3.2 !important;
  box-shadow: none !important;
  filter: none !important;
}
.about-image-wrap img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
}
.about-feature-list{
  display: grid !important;
  gap: 18px !important;
}
.about-feature{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.about-feature-check{
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: #181818 !important;
  border: 1px solid #222 !important;
  color: var(--primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.about-feature-text{
  font-family: var(--display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--body-strong) !important;
  letter-spacing: -0.4px !important;
  line-height: 1.2 !important;
}

/* ============ SERVICES / DEPARTMENTS (MiCare Exceptional Dental Treatments — pixel-perfect) ============ */
.services-micare-wrap{
  padding: 80px 48px !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.services-micare-heading{
  max-width: 780px !important;
  margin: 0 auto 56px !important;
  text-align: center !important;
}
.services-micare-title{
  font-size: clamp(36px, 4vw, 52px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  letter-spacing: -1.6px !important;
  color: var(--ink) !important;
}
.services-micare-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}
.sc-micare{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  padding: 40px 50px !important;
  display: block !important;
  min-height: 420px !important;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms cubic-bezier(.2,.8,.2,1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06) !important;
  border: 1px solid var(--hairline) !important;
}
.sc-micare:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.10) !important;
}
.sc-bg-black,
.sc-bg-beige,
.sc-bg-violet,
.sc-bg-blue,
.sc-bg-purple{
  background: #fff !important;
}
.sc-bg-img{
  background-size: cover !important;
  background-position: center !important;
  padding: 0 !important;
  position: relative !important;
}
.sc-bg-img::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.sc-item-content{
  position: relative !important;
  z-index: 2 !important;
  padding: 40px 50px !important;
}
.sc-icon-wrap{
  display: block !important;
  height: 55px !important;
  line-height: 55px !important;
  margin-bottom: 16px !important;
  position: relative !important;
}
.sc-fa{
  display: inline-block !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
  font-weight: 900 !important;
  -webkit-font-smoothing: antialiased !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 55px !important;
  height: 55px !important;
  font-size: 44px !important;
  color: #0007cd !important;
}
.sc-color-yellow{
  color: #0007cd !important;
}
.sc-bg-black .sc-fa, .sc-bg-beige .sc-fa, .sc-bg-blue .sc-fa, .sc-bg-purple .sc-fa, .sc-bg-violet .sc-fa, .sc-bg-img .sc-fa{ color: #0007cd !important; }
.sc-bg-black .sc-fa.sc-color-yellow{ color: #0007cd !important; }
.sc-fa-stack{
  position: relative !important;
  display: inline-block !important;
  height: 55px !important;
  width: 55px !important;
  line-height: 55px !important;
  color: #0007cd !important;
}
.sc-fa-stack .fa-tooth{
  vertical-align: baseline !important;
  line-height: 55px !important;
  height: 55px !important;
  color: inherit !important;
}
.sc-fa-stack .sc-fa-accent{
  position: absolute !important;
  right: -10px !important;
  top: -6px !important;
  color: inherit !important;
  opacity: 0.95 !important;
}
.sc-fa-stack .sc-fa-accent-b{
  position: absolute !important;
  right: -12px !important;
  bottom: 4px !important;
  color: #0007cd !important;
  opacity: 0.92 !important;
}
.sc-pos-relative{
  position: relative !important;
}
.sc-icon-glyph{
  display: inline-block !important;
  font-size: 50px !important;
  line-height: 55px !important;
  color: #0007cd !important;
}
.sc-icon-glyph.sc-col-yellow{
  color: #0007cd !important;
}
.sc-card-title{
  font-family: var(--text) !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.4px !important;
  font-weight: 700 !important;
  margin: 0 0 70px !important;
  color: var(--ink) !important;
}
.sc-bg-black .sc-card-title,
.sc-bg-beige .sc-card-title,
.sc-bg-blue .sc-card-title,
.sc-bg-purple .sc-card-title,
.sc-bg-violet .sc-card-title,
.sc-bg-img .sc-card-title{ color: var(--ink) !important; }
.sc-title-link{
  color: inherit !important;
  text-decoration: none !important;
}
.sc-desc{
  font-family: var(--text) !important;
  font-size: 16px !important;
  line-height: 26px !important;
  color: var(--body) !important;
  margin: 0 0 30px !important;
  max-width: 42ch !important;
}
.sc-bg-black .sc-desc,
.sc-bg-beige .sc-desc,
.sc-bg-blue .sc-desc,
.sc-bg-purple .sc-desc,
.sc-bg-violet .sc-desc,
.sc-bg-img .sc-desc{ color: var(--body) !important; }
.sc-bottom-btn{
  display: block !important;
  margin-top: 0 !important;
}
section#services a.sc-tf-btn.sc-tf-btn,
section#services .sc-bg-black a.sc-tf-btn.sc-tf-btn,
section#services .sc-bg-beige a.sc-tf-btn.sc-tf-btn,
section#services .sc-bg-blue a.sc-tf-btn.sc-tf-btn,
section#services .sc-bg-purple a.sc-tf-btn.sc-tf-btn,
section#services .sc-bg-violet a.sc-tf-btn.sc-tf-btn,
section#services .sc-bg-img a.sc-tf-btn.sc-tf-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 30px !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  transition: filter 200ms ease, transform 200ms ease !important;
  color: #ffffff !important;
  background-color: #0007cd !important;
  background-image: none !important;
  background: #0007cd !important;
  box-shadow: 0 2px 8px rgba(0,7,205,0.25) !important;
}
section#services a.sc-tf-btn.sc-tf-btn span,
section#services a.sc-tf-btn.sc-tf-btn i,
section#services a.sc-tf-btn.sc-tf-btn svg,
section#services a.sc-tf-btn.sc-tf-btn *,
section#services .sc-bg-black a.sc-tf-btn.sc-tf-btn span,
section#services .sc-bg-beige a.sc-tf-btn.sc-tf-btn span,
section#services .sc-bg-blue a.sc-tf-btn.sc-tf-btn span,
section#services .sc-bg-purple a.sc-tf-btn.sc-tf-btn span,
section#services .sc-bg-violet a.sc-tf-btn.sc-tf-btn span,
section#services .sc-bg-img a.sc-tf-btn.sc-tf-btn span{
  color: #ffffff !important;
  fill: #ffffff !important;
  background: transparent !important;
}
section#services a.sc-tf-btn.sc-tf-btn:hover,
section#services .sc-bg-black a.sc-tf-btn.sc-tf-btn:hover,
section#services .sc-bg-beige a.sc-tf-btn.sc-tf-btn:hover,
section#services .sc-bg-blue a.sc-tf-btn.sc-tf-btn:hover,
section#services .sc-bg-purple a.sc-tf-btn.sc-tf-btn:hover,
section#services .sc-bg-violet a.sc-tf-btn.sc-tf-btn:hover,
section#services .sc-bg-img a.sc-tf-btn.sc-tf-btn:hover{
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  background-color: #0007cd !important;
  background: #0007cd !important;
  border-bottom-color: transparent !important;
}
.sc-icon-arrow{ font-size: 14px !important; display: inline-block !important; line-height: 1 !important; }
.sc-tf-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 30px !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 0 !important;
  transition: filter 200ms ease, transform 200ms ease !important;
  color: #0007cd !important;
  background: #ffffff !important;
}
.sc-tf-btn:hover{
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}
.sc-icon-arrow{
  display: inline-block !important;
  color: inherit !important;
  vertical-align: -0.125em !important;
  width: 1em !important;
  height: 1em !important;
  line-height: 1em !important;
  font-size: 14px !important;
}
@media (max-width: 980px){
  .services-micare-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .sc-micare,
  .sc-item-content{
    padding: 32px 36px !important;
  }
  .sc-micare{ min-height: 400px !important; }
  .services-micare-wrap{
    padding: 60px 24px !important;
  }
  .sc-card-title{ margin-bottom: 48px !important; }
}
@media (max-width: 640px){
  .services-micare-grid{
    grid-template-columns: 1fr !important;
  }
  .sc-micare,
  .sc-item-content{
    padding: 28px 24px !important;
  }
  .sc-micare{ min-height: auto !important; }
  .sc-card-title{ margin-bottom: 32px !important; }
}

/* ============ APPOINTMENT (spotlight glow + light card) ============ */
.appointment-wrap{
  padding: 80px 48px !important;
  border-top: 1px solid var(--hairline) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.appointment-card{
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 48px !important;
  padding: 48px !important;
  background: var(--surface-card) !important;
  background-image: none !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-xl) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}
.appointment-card::before{
  content: '' !important;
  position: absolute !important;
  left: 20% !important;
  top: 0 !important;
  transform: translateY(-50%) !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(26,38,255,0.10) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.appointment-text{
  position: relative !important;
  z-index: 1 !important;
}
.appointment-text h3{
  font-family: var(--display) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: var(--body-strong) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.96px !important;
  margin: 0 0 16px !important;
}
.appointment-text p{
  font-size: 16px !important;
  color: var(--body) !important;
  line-height: 1.55 !important;
  margin: 0 0 20px !important;
}
.appt-check{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: var(--surface-card-elevated) !important;
  border-radius: var(--radius-md) !important;
  color: var(--body-strong) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 1px solid var(--hairline) !important;
}
.appt-check span{
  width: 24px !important;
  height: 24px !important;
  border-radius: var(--radius-xs) !important;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.appointment-form{
  background: var(--canvas-deep) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--radius-lg) !important;
  padding: 28px !important;
  position: relative !important;
  z-index: 1 !important;
}
.appointment-form > div:first-child{
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--body-strong) !important;
  margin-bottom: 8px !important;
  font-family: var(--display) !important;
  letter-spacing: -0.2px !important;
}
.appointment-form > div:nth-child(2){
  font-size: 14px !important;
  color: var(--muted) !important;
  margin-bottom: 20px !important;
}
.appointment-form label span{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--body-strong) !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.appointment-form input,
.appointment-form textarea,
.appointment-form select{
  width: 100% !important;
  background: var(--surface-card) !important;
  color: var(--body-strong) !important;
  border: 1px solid var(--hairline-strong) !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  font-family: var(--text) !important;
  border-radius: var(--radius-md) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
.appointment-form input::placeholder,
.appointment-form textarea::placeholder{
  color: var(--muted-soft) !important;
}
.appointment-form input:focus,
.appointment-form textarea:focus,
.appointment-form select:focus{
  border: 1px solid var(--primary) !important;
  background: var(--surface-card) !important;
  box-shadow: 0 0 0 3px rgba(0,7,205,0.08) !important;
  outline: none !important;
}
.appointment-form textarea{
  min-height: 96px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}
.appointment-form button[type=submit]{
  width: 100% !important;
  margin-top: 4px !important;
}

/* ============ BEFORE / AFTER (card borders) ============ */
section#results{
  padding: 80px 48px !important;
  border-top: 1px solid var(--hairline) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
section#results > div:first-child{
  margin: 0 auto 48px !important;
  max-width: 1440px !important;
}
.ba-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 20px !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}
.ba-card{
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
.ba-card:hover{ border-color: var(--hairline-strong) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.04) !important; }
.ba-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px !important;
  background: var(--hairline) !important;
}
.ba-img{
  aspect-ratio: 4/3 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 12px !important;
  position: relative !important;
  overflow: hidden !important;
}
.ba-img::after{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%) !important;
  pointer-events: none !important;
}
.bi-yellow{ background: linear-gradient(135deg, #eef2ff, var(--primary-active)) !important; }
.bi-teal{ background: linear-gradient(135deg, #ecfeff, #155e75) !important; }
.bi-coral{ background: linear-gradient(135deg, #faf5ff, #581c87) !important; }
.bi-rose{ background: linear-gradient(135deg, #fff1f2, #881337) !important; }
.bi-orange{ background: linear-gradient(135deg, #fff7ed, #7c2d12) !important; }
.ba-img > span{
  position: relative !important;
  z-index: 1 !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-xs) !important;
  background: rgba(0,0,0,0.4) !important;
  color: var(--on-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.88px !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(4px) !important;
}
.ba-meta{
  padding: 16px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.ba-meta strong{
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--body-strong) !important;
  font-family: var(--text) !important;
}
.ba-meta span{
  font-size: 13px !important;
  color: var(--body) !important;
  line-height: 1.4 !important;
}

/* ============ HOW + STEPS ============ */
section#how{
  padding: 80px 48px !important;
  border-top: 1px solid var(--hairline) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
section#how > div:first-child{
  margin: 0 auto 48px !important;
  max-width: 1440px !important;
}
section#how .stat-row{
  margin-bottom: 64px !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.step-card{
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-xl) !important;
  padding: 28px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  position: relative !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
.step-card:hover{ border-color: var(--hairline-strong) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important; }
.step-num{
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-card-elevated) !important;
  color: var(--body-strong) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  font-family: var(--mono) !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  border: 1px solid var(--hairline-strong) !important;
}
.sn1{ background: var(--primary) !important; color: var(--on-primary) !important; border-color: var(--primary-active) !important; }
.sn2{ background: var(--accent-violet) !important; color: var(--on-primary) !important; border-color: #5a1cc5 !important; }
.sn3{ background: var(--accent-cyan) !important; color: #fff !important; border-color: #0e7490 !important; }
.icon-square{
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-card-elevated) !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary) !important;
  font-size: 20px !important;
  border: 1px solid var(--hairline) !important;
}
.step-card h3{
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--body-strong) !important;
  margin: 0 !important;
  letter-spacing: -0.3px !important;
  font-family: var(--text) !important;
  line-height: 1.25 !important;
}
.step-card p{
  font-size: 14px !important;
  color: var(--body) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.step-card .badge{ align-self: flex-start !important; }

/* ============ TEAM ============ */
section#team{
  padding: 80px 48px !important;
  border-top: 1px solid var(--hairline) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
section#team > div:first-child{
  margin: 0 auto 48px !important;
  max-width: 1440px !important;
}
.team-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}
.team-card{
  background: #ffffff !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 20px !important;
  padding: 40px 44px !important;
  transition: border-color 200ms ease !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
}
.team-card:hover{
  border-color: var(--hairline-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}
.team-avatar{
  width: 84px !important;
  height: 84px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--on-primary) !important;
  border: none !important;
  margin-bottom: 8px !important;
}
.team-avatar-icon{
  font-size: 36px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ta-yellow{ background: var(--primary) !important; }
.ta-coral{ background: var(--accent-violet) !important; }
.ta-teal{ background: var(--primary) !important; color: var(--on-primary) !important; }
.ta-rose{ background: var(--accent-cyan) !important; color: #fff !important; }
.team-card > div:nth-child(2){ margin-top: 24px !important; }
.team-card h4{
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.3px !important;
  font-family: var(--text) !important;
  line-height: 1.25 !important;
}
.team-card span{
  display: block !important;
  color: var(--primary) !important;
  font-size: 15px !important;
  margin: 8px 0 16px !important;
  font-weight: 500 !important;
}
.team-card p{
  font-size: 16px !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  margin: 0 0 32px !important;
  flex: 1 !important;
}
.team-socials{
  display: flex !important;
  padding-top: 0 !important;
  border-top: none !important;
  margin-top: auto !important;
}
.team-cta{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  font-family: var(--text) !important;
  line-height: 1.4 !important;
  transition: color 200ms ease !important;
}
.team-cta:hover{ color: var(--body-strong) !important; }
.team-cta i{ font-size: 15px !important; line-height: 1 !important; }
.social-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-card-elevated) !important;
  color: var(--body) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  border: 1px solid var(--hairline) !important;
  transition: color 200ms ease, border-color 200ms ease !important;
}
.social-btn:hover{
  color: var(--primary) !important;
  border-color: var(--hairline-strong) !important;
}

/* ============ TESTIMONIALS ============ */
section#testimonials{
  padding: 80px 48px !important;
  border-top: 1px solid var(--hairline) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
section#testimonials > div:first-child{
  margin: 0 auto 48px !important;
  max-width: 1440px !important;
}
.testimonials-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 20px !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}
.card-base{
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
.card-base:hover{ border-color: var(--hairline-strong) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important; }
.card-base p{
  font-size: 15px !important;
  color: var(--body) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.card-base > div:nth-child(2){
  font-size: 15px !important;
  color: var(--body) !important;
  line-height: 1.6 !important;
}
.card-base > div:last-child{
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--hairline-soft) !important;
}
.card-base > div:last-child > div:last-child > div:first-child{
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--body-strong) !important;
}
.card-base > div:last-child > div:last-child > div:last-child{
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* ============ BLOG ============ */
section#blog{
  padding: 80px 48px !important;
  border-top: 1px solid var(--hairline) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
section#blog > div:first-child{
  margin: 0 auto 48px !important;
  max-width: 1440px !important;
}
.blog-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 20px !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}
.blog-card{
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.blog-card:hover{ border-color: var(--hairline-strong) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important; }
.blog-thumb{
  aspect-ratio: 16/9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-bottom: 1px solid var(--hairline) !important;
}
.bt-yellow{ background: linear-gradient(135deg, var(--primary-active) 0%, var(--surface-card) 100%) !important; }
.bt-coral{ background: linear-gradient(135deg, var(--accent-violet) 0%, var(--surface-card) 100%) !important; }
.bt-teal{ background: linear-gradient(135deg, #0e7490 0%, var(--surface-card) 100%) !important; }
.blog-body{
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
}
.blog-body h3{
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--body-strong) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.2px !important;
}
.blog-body p{
  font-size: 14px !important;
  color: var(--body) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.blog-body > div:last-child{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
  padding-top: 6px !important;
}
.blog-body > div:last-child > span:first-child{
  font-size: 12px !important;
  color: var(--muted) !important;
  font-family: var(--mono) !important;
}
.blog-body > div:last-child > a{
  font-size: 13px !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
.blog-body > div:last-child > a:hover{ color: var(--body-strong) !important; }

/* ============ FAQ ============ */
section#faq{
  padding: 80px 48px !important;
  border-top: 1px solid var(--hairline) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
section#faq > div:first-child{
  margin: 0 auto 48px !important;
  max-width: 600px !important;
  width: 100% !important;
  text-align: center !important;
}
section#faq > div:nth-child(2){
  max-width: 600px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.faq-item{
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-lg) !important;
  padding: 0 !important;
  transition: border-color 200ms ease !important;
  margin-bottom: 0 !important;
}
.faq-item + .faq-item{ margin-top: 8px !important; }
.faq-item:hover{ border-color: var(--hairline-strong) !important; }
.faq-q{
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  cursor: pointer !important;
  user-select: none !important;
}
.faq-q-text{
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--body-strong) !important;
  line-height: 1.4 !important;
}
.faq-chev{
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-md) !important;
  background: var(--surface-card-elevated) !important;
  color: var(--body) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 200ms ease, background 200ms ease !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  border: 1px solid var(--hairline) !important;
  line-height: 1 !important;
}
.faq-chev i{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  font-size: 12px !important;
}
.faq-item.open .faq-chev{
  transform: rotate(180deg) !important;
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: var(--primary-active) !important;
}
.faq-a{
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 250ms ease !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  color: var(--body) !important;
  line-height: 1.6 !important;
}
.faq-item.open .faq-a{
  max-height: 400px !important;
  padding: 0 20px 20px 20px !important;
}

/* ============ CTA BANNER (Spotlight Glow Card Light) ============ */
section:has(.cta-banner-dark){
  padding: 32px 48px 80px !important;
  border-top: 1px solid var(--hairline) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.cta-banner-dark{
  background: var(--surface-card) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-xl) !important;
  padding: 48px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04) !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
}
.cta-banner-dark::before{
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(26,38,255,0.12) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.cta-banner-dark > *{
  position: relative !important;
  z-index: 1 !important;
}
.cta-banner-dark h4{
  font-family: var(--display) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  color: var(--body-strong) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.96px !important;
  margin: 8px 0 12px !important;
}
.cta-banner-dark p{
  font-size: 16px !important;
  color: var(--body) !important;
  max-width: 720px !important;
  margin: 0 auto 28px !important;
  line-height: 1.55 !important;
}
.cta-banner-dark .actions{
  display: inline-flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* ============ FOOTER ============ */
.miro-footer{
  background: var(--canvas) !important;
  color: var(--body) !important;
  padding: 64px 48px 32px !important;
  font-size: 13px !important;
  border-top: 1px solid var(--hairline) !important;
  max-width: none !important;
  width: 100% !important;
}
.footer-grid{
  max-width: 1440px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 32px !important;
}
.footer-brand{
  grid-column: span 1 !important;
}
.lp-logo{
  height: 42px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
}
.lp-logo-footer{
  height: 48px !important;
}
.wordmark{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--display) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--body-strong) !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 14px !important;
}
.footer-brand p{
  font-size: 14px !important;
  color: var(--body) !important;
  line-height: 1.55 !important;
  margin: 0 0 12px !important;
}
.footer-social{
  display: flex !important;
  gap: 8px !important;
  margin-top: 20px !important;
}
.footer-col h6{
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--body-strong) !important;
  margin: 0 0 14px !important;
  font-family: var(--text) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}
.footer-col a{
  display: block !important;
  margin: 0 0 10px !important;
  color: var(--body) !important;
  opacity: 0.9 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  transition: color 200ms ease, opacity 200ms ease !important;
}
.footer-col a:hover{
  color: var(--body-strong) !important;
  opacity: 1 !important;
}
.footer-credit{
  max-width: 1440px !important;
  margin: 48px auto 0 !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--hairline) !important;
  color: var(--muted) !important;
  opacity: 0.9 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
.footer-credit i{
  color: var(--primary) !important;
}

/* ============ HOW IT WORKS — ZIG ZAG LAYOUT (MiCare reference style) ============ */
section#how .how-zigzag{
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 96px !important;
  padding-top: 16px !important;
  width: 100% !important;
}
section#how .zz-row{
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 64px !important;
  align-items: center !important;
  width: 100% !important;
}
section#how .zz-row.zz-reverse{
  direction: rtl !important;
}
section#how .zz-row.zz-reverse > *{
  direction: ltr !important;
}
section#how .zz-col-text{
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 520px !important;
}
section#how .zz-title{
  font-family: var(--display) !important;
  font-size: 48px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  letter-spacing: -1.44px !important;
}
section#how .zz-desc{
  font-size: 18px !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  max-width: 48ch !important;
}
section#how .zz-checklist{
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
section#how .zz-checklist li{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 18px !important;
  color: var(--body-strong) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
section#how .zz-checklist li::before{
  content: '✓' !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  font-family: serif !important;
}
section#how .zz-cta{
  margin-top: 8px !important;
}
section#how .zz-col-img{
  position: relative !important;
  width: 100% !important;
}
section#how .zz-imgs{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  align-items: start !important;
}
section#how .zz-img{
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.08) !important;
  background: var(--surface-card) !important;
}
section#how .zz-img.zz-img-a{
  aspect-ratio: 3 / 4 !important;
  margin-top: 0 !important;
}
section#how .zz-img.zz-img-b{
  aspect-ratio: 3 / 4 !important;
  margin-top: 40px !important;
}
section#how .zz-row.zz-reverse .zz-img.zz-img-b{
  margin-top: 0 !important;
}
section#how .zz-row.zz-reverse .zz-img.zz-img-a{
  margin-top: 40px !important;
}
section#how .zz-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: saturate(1.05) contrast(1.02) !important;
  border-radius: 0 !important;
  border: none !important;
  max-width: none !important;
  min-width: 100% !important;
}

@media (max-width: 1024px){
  section#how .how-zigzag{ gap: 64px !important; }
  section#how .zz-row{ grid-template-columns: 1fr !important; gap: 32px !important; }
  section#how .zz-row.zz-reverse{ direction: ltr !important; }
  section#how .zz-title{ font-size: 36px !important; letter-spacing: -1px !important; }
  section#how .zz-desc{ font-size: 16px !important; }
  section#how .zz-checklist li{ font-size: 16px !important; }
  section#how .zz-col-text{ max-width: none !important; }
  section#how .zz-img.zz-img-a{ aspect-ratio: 4 / 5 !important; }
  section#how .zz-img.zz-img-b{ aspect-ratio: 4 / 5 !important; margin-top: 24px !important; }
  section#how .zz-row.zz-reverse .zz-img.zz-img-a{ margin-top: 0 !important; }
  section#how .zz-row.zz-reverse .zz-img.zz-img-b{ margin-top: 24px !important; }
}
@media (max-width: 720px){
  section#how .how-zigzag{ gap: 48px !important; }
  section#how .zz-title{ font-size: 28px !important; letter-spacing: -0.6px !important; }
  section#how .zz-desc{ font-size: 15px !important; }
  section#how .zz-checklist{ gap: 10px !important; }
  section#how .zz-checklist li{ font-size: 14px !important; gap: 10px !important; }
  section#how .zz-checklist li::before{ font-size: 18px !important; }
  section#how .zz-imgs{ gap: 12px !important; }
  section#how .zz-img{ border-radius: 12px !important; }
  section#how .zz-img.zz-img-a,
  section#how .zz-img.zz-img-b{ aspect-ratio: 3 / 4 !important; margin-top: 0 !important; }
}

/* ============ Inline styles on body/navbar overrides ============ */
body [style*="--canvas"],
body [style*="border-bottom"],
body [style*="background: var(--canvas)"]{
  background: var(--canvas) !important;
}

/* ============ Responsive (Composio breakpoints 1024 / 720) ============ */
@media (max-width: 1024px){
  #lp-navbar .miro-container{ padding: 0 32px !important; }
  #lp-navbar .lp-mobile-menu .miro-container{ height: auto !important; padding: 16px 32px !important; }
  .miro-container{ padding: 0 32px !important; }
  .dental-hero{ padding: 64px 32px !important; }
  .dental-hero-inner{ grid-template-columns: 1fr !important; gap: 32px !important; }
  .dental-hero-title{ font-size: 48px !important; letter-spacing: -1.5px !important; }
  .dental-hero-visual{ display: block !important; }
  .about-section{ padding: 64px 32px !important; }
  .about-cols{ grid-template-columns: 1fr !important; gap: 32px !important; }
  section#services, section#results, section#how, section#team, section#testimonials, section#blog, section#faq{ padding: 64px 32px !important; }
  .section-heading{ font-size: 32px !important; letter-spacing: -0.96px !important; }
  .stat-row{ grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .appointment-wrap{ padding: 64px 32px !important; }
  .appointment-card{ grid-template-columns: 1fr !important; padding: 32px !important; gap: 32px !important; }
  .team-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  section:has(.cta-banner-dark){ padding: 32px 32px 64px !important; }
  .cta-banner-dark{ padding: 32px !important; }
  .cta-banner-dark h4{ font-size: 24px !important; letter-spacing: -0.5px !important; }
  .miro-footer{ padding: 48px 32px 24px !important; }
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 720px){
  #lp-navbar{ height: auto !important; min-height: 56px !important; }
  #lp-navbar .miro-container{ padding: 0 20px !important; height: 56px !important; }
  #lp-navbar .lp-mobile-menu .miro-container{ height: auto !important; padding: 16px 20px !important; }
  .miro-container{ padding: 0 20px !important; }
  .dental-hero{ padding: 48px 20px !important; }
  .dental-hero::before{ width: 500px !important; height: 500px !important; }
  .dental-hero-title{ font-size: 32px !important; letter-spacing: -1px !important; margin-bottom: 16px !important; }
  .dental-hero-sub{ font-size: 16px !important; }
  .about-section{ padding: 48px 20px !important; }
  section#services, section#results, section#how, section#team, section#testimonials, section#blog, section#faq{ padding: 48px 20px !important; }
  .section-heading{ font-size: 32px !important; letter-spacing: -0.5px !important; }
  .section-sub{ font-size: 14px !important; }
  .appointment-wrap{ padding: 48px 20px !important; }
  .appointment-card{ padding: 24px !important; gap: 24px !important; }
  .appointment-text h3{ font-size: 24px !important; letter-spacing: -0.5px !important; }
  .services-grid, .ba-grid, .blog-grid, .testimonials-grid, .team-grid{ grid-template-columns: 1fr !important; gap: 16px !important; }
  .stat-row{ grid-template-columns: 1fr !important; }
  .stat-num{ font-size: 28px !important; }
  section:has(.cta-banner-dark){ padding: 20px 20px 48px !important; }
  .cta-banner-dark{ padding: 24px !important; }
  .cta-banner-dark h4{ font-size: 22px !important; }
  .cta-banner-dark .actions{ width: 100% !important; flex-direction: column !important; }
  .cta-banner-dark .actions > a{ width: 100% !important; }
  .miro-footer{ padding: 40px 20px 24px !important; }
  .footer-grid{ grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-credit{ margin-top: 32px !important; padding-top: 20px !important; font-size: 12px !important; }
}

/* ============================================================
   MOBILE DESIGN IMPROVEMENTS — Breakpoint 720px
   ============================================================ */
@media (max-width: 720px){
  /* --- Header & Logo --- */
  .lp-logo{ height: 34px !important; }
  .lp-logo-footer{ height: 40px !important; }
  #lp-menu-btn{ height: 44px !important; width: 44px !important; }
  .lp-icon-menu, .lp-icon-close{ font-size: 20px !important; }

  /* --- Buttons: touch targets ≥48px (Apple HIG) --- */
  .btn-primary,
  .btn-secondary,
  .btn-on-dark,
  .btn-ghost-dark{
    height: 48px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }
  .btn-primary i,
  .btn-secondary i,
  .btn-on-dark i,
  .btn-ghost-dark i{ font-size: 16px !important; }

  /* --- Badges: compact but legible --- */
  .badge{
    font-size: 10.5px !important;
    padding: 4px 10px !important;
    letter-spacing: 0.7px !important;
  }

  /* --- HERO --- */
  .dental-hero{ padding: 40px 20px !important; }
  .dental-hero-title{
    font-size: 30px !important;
    letter-spacing: -0.9px !important;
    text-align: left !important;
  }
  .dental-hero-sub{
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .dental-hero > div > div > div:first-child > div:nth-child(4){
    flex-direction: column !important;
    gap: 10px !important;
    margin: 20px 0 24px !important;
  }
  .dental-hero .btn-primary,
  .dental-hero .btn-secondary{
    width: 100% !important;
    justify-content: center !important;
  }
  .dental-hero-trust{
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 20px !important;
    justify-content: flex-start !important;
  }
  .dental-hero-avatar{
    width: 40px !important;
    height: 40px !important;
    border-width: 2px !important;
    margin-left: -10px !important;
  }
  .dental-hero-avatar:first-child{ margin-left: 0 !important; }
  .dental-hero-trust > div:last-child > div:first-child{
    font-size: 18px !important;
  }
  .dental-hero-trust > div:last-child > div:last-child{
    font-size: 12.5px !important;
  }

  /* --- ABOUT --- */
  .about-section{ padding: 40px 20px !important; }
  .about-feature-list{ gap: 14px !important; }
  .about-feature{ gap: 10px !important; }
  .about-feature-text{
    font-size: 17px !important;
    letter-spacing: -0.2px !important;
  }
  .about-col-text > div:last-child{
    flex-direction: column !important;
    gap: 10px !important;
  }
  .about-col-text > div:last-child > a{
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- SERVICES --- */
  section#services{ padding: 48px 20px !important; }
  .services-micare-wrap{ padding: 0 !important; }
  .services-micare-heading{
    margin-bottom: 36px !important;
  }
  .services-micare-title{
    font-size: 26px !important;
    letter-spacing: -0.8px !important;
    margin-bottom: 12px !important;
  }
  .services-micare-heading .section-sub{
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .services-micare-grid{ gap: 14px !important; }
  .sc-micare,
  .sc-item-content{
    padding: 24px 20px !important;
  }
  .sc-icon-wrap{ height: 46px !important; line-height: 46px !important; margin-bottom: 12px !important; }
  .sc-icon-glyph{ font-size: 42px !important; line-height: 46px !important; }
  .sc-card-title{
    font-size: 20px !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 20px !important;
  }
  .sc-desc{ font-size: 14px !important; line-height: 1.55 !important; }
  .sc-tf-btn{
    height: 42px !important;
    font-size: 14px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
  }
  .sc-bottom-btn{ margin-top: 20px !important; }

  /* --- TEAM --- */
  section#team{ padding: 48px 20px !important; }
  section#team > div:first-child{ margin-bottom: 32px !important; }
  .team-grid{ gap: 14px !important; }
  .team-card{
    padding: 28px 22px !important;
    border-radius: 18px !important;
  }
  .team-avatar{
    width: 72px !important;
    height: 72px !important;
    border-radius: 18px !important;
    margin-bottom: 4px !important;
  }
  .team-avatar-icon{ font-size: 30px !important; }
  .team-card > div:nth-child(2){ margin-top: 20px !important; }
  .team-card h4{
    font-size: 20px !important;
    letter-spacing: -0.2px !important;
  }
  .team-card span{
    font-size: 14px !important;
    margin: 6px 0 12px !important;
  }
  .team-card p{
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
  }
  .team-cta{
    width: 100% !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--hairline-soft) !important;
    padding-top: 14px !important;
    font-size: 15px !important;
  }
  .team-cta i{ font-size: 16px !important; }

  /* --- HOW (ZIGZAG) --- */
  section#how{ padding: 48px 20px !important; }
  section#how > div:first-child{ margin-bottom: 32px !important; }
  .how-zigzag{ gap: 40px !important; }
  .zz-row{ gap: 24px !important; }
  .zz-title{
    font-size: 24px !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 10px !important;
  }
  .zz-desc{
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }
  .zz-checklist{ gap: 8px !important; margin-bottom: 20px !important; }
  .zz-checklist li{
    font-size: 13.5px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .zz-checklist li::before{ font-size: 16px !important; }
  .zz-cta a.btn-primary{
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }
  .zz-imgs{ gap: 10px !important; }
  .zz-img{ border-radius: 12px !important; }

  /* --- FAQ --- */
  section#faq{ padding: 48px 20px !important; }
  section#faq > div:first-child{ margin-bottom: 28px !important; }
  .faq-item{ border-radius: 10px !important; }
  .faq-item + .faq-item{ margin-top: 6px !important; }
  .faq-q{
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  .faq-q-text{
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .faq-chev{
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
  .faq-chev i{ font-size: 11px !important; }
  .faq-a{
    padding: 0 16px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  .faq-item.open .faq-a{
    padding: 0 16px 16px 16px !important;
  }

  /* --- APPOINTMENT --- */
  .appointment-wrap{ padding: 40px 20px !important; }
  .appointment-card{
    padding: 20px !important;
    gap: 20px !important;
    border-radius: 14px !important;
  }
  .appointment-text h3{
    font-size: 22px !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 10px !important;
  }
  .appointment-text p{
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }
  .appt-check{
    font-size: 13.5px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }
  .appt-check span{
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }
  .appointment-form{
    padding: 20px !important;
    border-radius: 12px !important;
  }
  .appointment-form > div:first-child{
    font-size: 17px !important;
  }
  .appointment-form > div:nth-child(2){
    font-size: 13.5px !important;
    margin-bottom: 16px !important;
  }
  .appointment-form label span{
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
  }
  .appointment-form input,
  .appointment-form textarea,
  .appointment-form select{
    padding: 11px 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
  .appointment-form button[type=submit]{
    height: 48px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    margin-top: 2px !important;
  }

  /* --- CTA BANNER DARK --- */
  section:has(.cta-banner-dark){ padding: 20px 20px 40px !important; }
  .cta-banner-dark{
    padding: 24px !important;
    border-radius: 14px !important;
  }
  .cta-banner-dark h4{
    font-size: 20px !important;
    letter-spacing: -0.4px !important;
    margin: 6px 0 10px !important;
  }
  .cta-banner-dark p{
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
  }
  .cta-banner-dark .actions{ gap: 10px !important; }
  .cta-banner-dark .actions > a{
    height: 48px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  /* --- FOOTER --- */
  .miro-footer{ padding: 36px 20px 20px !important; }
  .wordmark{
    font-size: 17px !important;
    margin-bottom: 10px !important;
  }
  .footer-brand p{
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin-bottom: 8px !important;
  }
  .footer-social{
    gap: 6px !important;
    margin-top: 14px !important;
  }
  .social-btn{
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  .footer-grid{ gap: 20px !important; }
  .footer-col h6{
    font-size: 13.5px !important;
    margin-bottom: 10px !important;
  }
  .footer-col a{
    font-size: 13.5px !important;
    margin: 0 0 8px !important;
    line-height: 1.4 !important;
  }
  .footer-credit{
    margin-top: 24px !important;
    padding-top: 16px !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
   VERY SMALL DEVICES (≤ 420px) — Pixel-perfect tuning
   ============================================================ */
@media (max-width: 420px){
  .lp-logo{ height: 30px !important; }
  .lp-logo-footer{ height: 36px !important; }

  .dental-hero-title{
    font-size: 27px !important;
    letter-spacing: -0.8px !important;
  }
  .dental-hero-sub{ font-size: 14.5px !important; }
  .dental-hero{ padding: 36px 16px !important; }

  .section-heading{
    font-size: 22px !important;
    letter-spacing: -0.4px !important;
  }
  .section-sub{ font-size: 13.5px !important; }

  .services-micare-title{ font-size: 23px !important; }
  .sc-card-title{ font-size: 18.5px !important; }
  .sc-micare, .sc-item-content{ padding: 22px 18px !important; }

  .team-avatar{
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
  }
  .team-avatar-icon{ font-size: 26px !important; }
  .team-card{ padding: 24px 18px !important; }
  .team-card h4{ font-size: 18.5px !important; }
  .team-card p{ font-size: 14.5px !important; }

  .about-section,
  section#services,
  section#team,
  section#how,
  section#faq,
  .appointment-wrap{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .zz-title{ font-size: 22px !important; }
  .zz-desc{ font-size: 14px !important; }
  .zz-checklist li{ font-size: 13px !important; }

  .cta-banner-dark{ padding: 22px 18px !important; }
  .cta-banner-dark h4{ font-size: 19px !important; }
  .cta-banner-dark p{ font-size: 13.5px !important; }

  .miro-footer{ padding: 32px 16px 16px !important; }
  #lp-navbar .miro-container{ padding: 0 16px !important; }
  #lp-navbar .lp-mobile-menu .miro-container{ height: auto !important; padding: 16px !important; }
  .miro-container{ padding: 0 16px !important; }
}