/* ==========================================================================
   MERTS DESIGN SYSTEM: PURE & MINIMAL LIGHT MODE (#FAFAFA)
   Ultra-clean, high-contrast, premium light aesthetic (Linear / Stripe style)
   ========================================================================== */

:root,
.page,
.page[data-landing-theme],
.adsV4,
.v4Subpage,
body {
  --shell-bg: #fafafa;
  --page-bg: #fafafa;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --accent-primary: #0f172a;
  --accent-blue: #0284c7;
  --accent-deep: #0369a1;
  --font-geist-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shell-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Legacy & Panel Variable Overrides to eliminate white-on-white text */
  --merts-ink: #fafafa !important;
  --merts-surface: #ffffff !important;
  --merts-line: #e2e8f0 !important;
  --merts-text: #0f172a !important;
  --merts-muted: #475569 !important;
  --merts-accent: #0284c7 !important;

  --night: #fafafa !important;
  --night-deep: #f1f5f9 !important;
  --night-mid: #ffffff !important;
  --paper: #fafafa !important;
  --paper-soft: #f8fafc !important;
  --white: #ffffff !important;
  --ink: #0f172a !important;
  --dark-line: #cbd5e1 !important;
  --light-line: #e2e8f0 !important;

  --ui-bg: #ffffff !important;
  --ui-inset: #f8fafc !important;
  --ui-raised: #ffffff !important;
  --ui-line: #e2e8f0 !important;
  --ui-text: #0f172a !important;
  --ui-muted: #475569 !important;
  --ui-accent: #0284c7 !important;

  --v4-bg: #fafafa !important;
  --v4-panel: #ffffff !important;
  --v4-panel-2: #f8fafc !important;
  --v4-paper: #ffffff !important;
  --v4-line: #e2e8f0 !important;
  --v4-text: #0f172a !important;
  --v4-muted: #475569 !important;
  --v4-purple: #0369a1 !important;
  --v4-copper: #b45309 !important;

  --a4-bg: #fafafa !important;
  --a4-panel: #ffffff !important;
  --a4-paper: #ffffff !important;
  --a4-line: #e2e8f0 !important;
  --a4-text: #0f172a !important;
  --a4-muted: #475569 !important;
}

html, body {
  background: #fafafa !important;
  color: #0f172a !important;
  margin: 0;
  overflow-x: clip !important;
  font-family: var(--shell-font) !important;
  -webkit-font-smoothing: antialiased;
}

.page, .v4Subpage, main, [data-v4-walkthrough], .hero, .v4SubHero, .v4Next, .v5Faq, .footer, .v5Footer {
  background: #fafafa !important;
  color: #0f172a !important;
  overflow: visible !important;
}

/* Headings: Deep Midnight Slate */
h1, h2, h3, h4, h5, .v4SubHeroCopy h1, .v4WalkthroughHeading h2, .v4StageCopy h3, .heroTitle, .sectionHeading h2 {
  color: #0f172a !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
}

/* Paragraphs: Refined Slate 700 with high contrast */
p, .v4SubHeroCopy p, .v4WalkthroughHeading p, .v4StageCopy p, .heroLead, .sectionHeading p {
  color: #334155 !important;
  line-height: 1.62 !important;
}

/* Eyebrows & Micro-Headers: Vivid Deep Cerulean (>5.2:1 contrast against #fafafa) */
.v4Eyebrow, .kicker, .v5Eyebrow, .a4Eyebrow, .v4Micro, .a4Micro, .homeModuleEyebrow, .p7Label, .v4SampleLabel, .a4StepNumber {
  color: #0369a1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   FLOATING ISLAND NAVIGATION BAR
   ========================================================================== */

.islandNav {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 100 !important;
  width: min(100% - 32px, 860px) !important;
}

.islandSurface {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  padding: 6px 10px !important;
}

.islandNavBar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.islandBrand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  margin-left: 6px !important;
}

.islandBrand > span, .v5BrandMark, .footerBrand > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  position: relative !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex: none !important;
}

.islandBrand img, .v5BrandMark img, .footerBrand img {
  position: static !important;
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12)) !important;
}

.islandBrand > strong, .footerBrand > strong {
  color: #0f172a !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}
.islandBrand > i {
  display: none !important;
}

/* Links Segmented Pill */
.islandLinks {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  padding: 3px !important;
}

.islandLink {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}
.islandLink:hover {
  color: #0f172a !important;
}
.islandLinkActive {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 750 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* CTA: Başla button only (Giriş removed) */
.islandActions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.islandLogin {
  display: none !important;
}

.islandCta {
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18) !important;
  transition: all 0.2s ease !important;
  border: none !important;
}
.islandCta:hover {
  background: #1e293b !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   CARDS, PANELS, CONSOLES (Pure White on #FAFAFA, Crisp & Elevated)
   ========================================================================== */

.v4ProductFrame, .p7Panel, .v4HeroFrame, .moduleCard, .intelligenceCard,
.thesisCard, .a4HeroProduct, .a4Workspace, .heroAppWindow {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  color: #0f172a !important;
}

.v4WindowBar, .p7Panel .v4WindowBar, .a4WindowBar, .heroAppWindowBar {
  background: #f8fafc !important;
  border-bottom: 1px solid #edf2f7 !important;
  padding: 10px 18px !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #0f172a !important;
}

.v4WindowBar strong, .a4WindowBar strong {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.v4WindowBar .v4SampleLabel, .a4Example, .v4Tag, .p7Badge, .a4DraftTag {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid #bae6fd !important;
}

.v4UIBody.p7Body, .v4HeroConsole.p7Body {
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 18px 22px !important;
}

.p7Record {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.p7Record strong {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.p7Record p {
  color: #64748b !important;
  font-size: 12px !important;
  margin: 2px 0 0 0 !important;
}

.p7Record .p7Label {
  color: #0284c7 !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
}

.v4ColumnLabels {
  display: flex !important;
  justify-content: space-between !important;
  color: #0284c7 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 12px 0 6px 0 !important;
}

.v4SignalRows {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.v4SignalRows li {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  min-height: 36px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.v4SignalRows li strong {
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.v4SignalRows li span {
  color: #64748b !important;
  font-size: 11px !important;
}

.v4SignalRows li > span:last-child {
  color: #0284c7 !important;
  font-weight: 750 !important;
}

.v4WindowFooter {
  background: #f8fafc !important;
  border-top: 1px solid #edf2f7 !important;
  padding: 8px 18px !important;
  font-size: 11px !important;
  color: #64748b !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* ==========================================================================
   STICKY PINNING: BİLGİDEN İNCELEMEYE (Clean Light Mode Viewport)
   ========================================================================== */

[data-v4-walkthrough] {
  position: relative !important;
  overflow: visible !important;
  background: #fafafa !important;
}

[data-v4-walkthrough].v4MotionReady {
  height: 300vh !important;
  min-height: 300vh !important;
  position: relative !important;
  display: block !important;
  overflow: visible !important;
}

.v4SubWalkthrough.v4MotionReady > .v4WalkthroughSticky,
.v4SubWalkthrough.v4MotionReady .v4WalkthroughSticky,
.a4Walkthrough.v4MotionReady > .v4WalkthroughSticky,
.a4Walkthrough.v4MotionReady .v4WalkthroughSticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100svh !important;
  max-height: 100vh !important;
  padding: 85px clamp(28px, 6vw, 80px) 25px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 10 !important;
  background: #fafafa !important;
}

.v4SubWalkthrough.v4MotionReady .v4WalkthroughHeading,
.a4Walkthrough.v4MotionReady .a4WalkthroughHeading {
  flex: none !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto 10px auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
}

.v4SubWalkthrough.v4MotionReady .v4WalkthroughHeading h2,
.a4Walkthrough.v4MotionReady .a4WalkthroughHeading h2 {
  font-size: clamp(24px, 2.4vw, 32px) !important;
  color: #0f172a !important;
  margin: 2px 0 0 0 !important;
  font-weight: 850 !important;
}

.v4SubWalkthrough.v4MotionReady .v4WalkthroughHeading p,
.a4Walkthrough.v4MotionReady .a4WalkthroughHeading p {
  color: #64748b !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* Walkthrough Pills (Compact Segmented Navigation) */
.v4StageNav, .a4StageNav,
.v4SubWalkthrough.v4MotionReady .v4StageNav,
.a4Walkthrough.v4MotionReady .a4StageNav {
  flex: none !important;
  width: fit-content !important;
  max-width: fit-content !important;
  margin: 0 0 16px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  padding: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.v4StageNav button, .a4StageNav button {
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: auto !important;
  transition: all 0.18s ease !important;
}

.v4StageNav button > span, .a4StageNav button > span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  background: #f1f5f9 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin: 0 !important;
}

.v4StageNav button:hover, .a4StageNav button:hover {
  color: #0f172a !important;
  background: #f8fafc !important;
}

.v4StageNav button.is-active, .a4StageNav button.is-active,
.v4StageNav button[aria-current='step'], .a4StageNav button[aria-current='step'] {
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22) !important;
}

.v4StageNav button.is-active > span, .a4StageNav button.is-active > span,
.v4StageNav button[aria-current='step'] > span, .a4StageNav button[aria-current='step'] > span {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.v4StageNav button::after, .a4StageNav button::after {
  display: none !important;
}

/* Walkthrough Panels & Stage Layout */
.v4SubWalkthrough.v4MotionReady .v4WalkthroughPanels,
.a4Walkthrough.v4MotionReady .v4WalkthroughPanels {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.v4SubWalkthrough.v4MotionReady [data-v4-stage],
.a4Walkthrough.v4MotionReady [data-v4-stage] {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
  gap: clamp(30px, 4vw, 56px) !important;
  align-items: start !important;
  align-content: start !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  transform: translate3d(0, 16px, 0) scale(0.99) !important;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.v4SubWalkthrough.v4MotionReady [data-v4-stage].is-active,
.a4Walkthrough.v4MotionReady [data-v4-stage].is-active {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 2 !important;
}

/* Left Stage Copy */
.v4StageCopy {
  padding-top: 10px !important;
}

.v4StageCopy h3 {
  font-size: clamp(24px, 2.5vw, 34px) !important;
  color: #0f172a !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  margin: 0 0 10px 0 !important;
}

.v4StageCopy p {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  max-width: 400px !important;
}

/* Static Octopus Mascot */
.v4Subpage .v5SceneOctopus,
.v4Subpage .v4SubWalkthrough.v4MotionReady .v4StageCopy > .v5SceneOctopus,
.v4Subpage .v4SubWalkthrough .v4StageCopy > .v5SceneOctopus,
.v4Subpage .v4StageCopy > .v5SceneOctopus,
.a4EvidenceCompanion img, .a4PlanCompanion img, .h4HeroMascot, .heroArt img {
  display: block !important;
  width: clamp(130px, 14vw, 160px) !important;
  height: auto !important;
  margin-top: 18px !important;
  animation: none !important;
  transform: none !important;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.12)) !important;
}

/* Right Stage Visual */
.v4StageVisual {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

.v4StageVisual .v4ProductFrame {
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 !important;
}

.v4ScrollHint, .v4SubWalkthrough.v4MotionReady .v4ScrollHint, .a4Walkthrough.v4MotionReady .v4ScrollHint {
  color: #0284c7 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  flex: none !important;
  margin-top: 10px !important;
}

/* ==========================================================================
   BUTTONS & CTAs
   ========================================================================== */

.v4Link--primary, .heroPrimary, .ctaPrimary, .a4ButtonPrimary,
.heroActions .primary, .ctaCopy .primary {
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}
.v4Link--primary:hover, .heroPrimary:hover, .heroActions .primary:hover {
  background: #1e293b !important;
  transform: translateY(-1px) !important;
}

.v4Link--secondary, .v4Link--text, .heroSecondary, .heroActions .secondary {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}
.v4Link--secondary:hover, .heroSecondary:hover, .heroActions .secondary:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   HERO APP WINDOW (Integrations) & CONSOLE ELEMENTS (Commerce / Ads)
   ========================================================================== */

.heroAppWindow {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.heroTrafficLights {
  display: flex !important;
  gap: 7px !important;
}
.trafficDot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
}
.trafficDot--red { background: #ff5f56 !important; }
.trafficDot--yellow { background: #ffbd2e !important; }
.trafficDot--green { background: #27c93f !important; }

.heroWindowPill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  color: #475569 !important;
}

.heroLiveSyncBadge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  color: #10b981 !important;
  font-weight: 700 !important;
}
.liveSyncBeacon {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
}

/* Hide cheesy float badges permanently */
.heroFloatBadge {
  display: none !important;
}

/* Journey pills in Commerce Console */
.v4UITabs {
  display: flex !important;
  gap: 6px !important;
  margin: 12px 0 !important;
}
.v4UITabs > span {
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  font-weight: 600 !important;
}
.v4UITabs > span.is-current {
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.v4JourneyLine {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}
.v4JourneyLine > div {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px !important;
  text-align: left !important;
}
.v4JourneyLine i {
  display: inline-block !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  color: #0284c7 !important;
  background: #e0f2fe !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin-bottom: 4px !important;
}
.v4JourneyLine strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 13px !important;
}
.v4JourneyLine span {
  font-size: 11px !important;
  color: #64748b !important;
}

.p7Notice {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.p7Notice strong {
  color: #15803d !important;
  font-size: 13px !important;
  display: block !important;
}
.p7Notice p {
  color: #166534 !important;
  font-size: 12px !important;
  margin: 2px 0 0 0 !important;
}

/* Footer in clean light mode */
.footer, .v5Footer {
  background: #f1f5f9 !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  padding: 60px clamp(28px, 6vw, 80px) 40px !important;
}
.v5FooterLinks a {
  color: #0f172a !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}
.v5FooterLinks a:hover {
  color: #0284c7 !important;
}
.v5FooterBottom {
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  padding-top: 24px !important;
  margin-top: 36px !important;
}
.v5FooterBottom a {
  color: #475569 !important;
  text-decoration: none !important;
}
.v5FooterBottom a:hover {
  color: #0f172a !important;
}

/* FAQ in light mode */
.v5FaqList details {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  padding: 16px 20px !important;
  color: #0f172a !important;
}
.v5FaqList summary {
  color: #0f172a !important;
  font-weight: 750 !important;
  cursor: pointer !important;
}
.v5FaqList p {
  color: #475569 !important;
  margin-top: 10px !important;
}

/* ==========================================================================
   GLOBAL #FAFAFA ENFORCEMENT & TEXT CONTRAST OVERRIDES
   Ensures zero dark-mode leakage across index, ads, commerce, and integrations
   ========================================================================== */

.adsV4, .page, .page[data-landing-theme],
.page .hero, .page .a4Hero, .page .v4SubHero,
.page .moduleSection, .page .moduleSticky, .page .intelligenceSection,
.page .intelligenceSticky, .page .thesisSection, .page .ctaSection,
.page .ctaSticky, .page .a4Walkthrough, .page .a4Intelligence,
.page .a4Control, .page .a4Cta, .page .v4SubWalkthrough,
.page .v4Next, .page .v5Faq, .page .v5Footer,
.h4Hero, .a4Hero, .v4SubHero, .v4Next, .v5Faq, .v5Footer,
.moduleSection, .intelligenceSection, .thesisSection, .ctaSection,
.integrationControl, .integrationIntelligence, .channelEcosystemStrip {
  background: #fafafa !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

/* All headings: deep midnight slate */
.heroTitle, .heroTitle > span, .heroTitle > span > i,
.a4HeroCopy h1, .v4SubHeroCopy h1, h1, h2, h3, h4,
.a4HeroBoard h2, .a4BoardTitle h2, .a4StepCopy h3,
.v4WalkthroughHeading h2, .v4StageCopy h3, .sectionHeading h2,
.v5FaqIntro h2, .v5FooterIntro h2, .v4NextInner h2,
.a4IntelligenceCopy h2, .a4ControlIntro h2, .a4Cta h2 {
  color: #0f172a !important;
}

/* Home Dashboard Frame & Authentic Visuals in #fafafa */
.page .dashboardFrame, .dashboardFrame, .a4HeroProduct, .v4HeroFrame,
.moduleCard, .intelligenceCard, .ctaPanel, .a4IntelligenceCard, .a4Workspace,
.heroAppWindow, .matrixCard, .controlMatrixCard, .channelPill {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  color: #0f172a !important;
}

.dashboardFrame img, .v6DashboardOpen img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.dashboardChrome {
  background: #f8fafc !important;
  border-bottom: 1px solid #edf2f7 !important;
  color: #64748b !important;
}

/* Ads Page Specific Light Mode Refinement */
.a4HeroBoard {
  background: #ffffff !important;
  color: #0f172a !important;
}
.a4HeroDecision {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  color: #0f172a !important;
}
.a4HeroDecision strong, .a4HeroDecision p, .p7HeroProductInfo strong {
  color: #0f172a !important;
}
.p7HeroProductInfo p {
  color: #64748b !important;
}
.p7Metrics {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
}
.p7Metrics div strong {
  color: #0f172a !important;
}
.p7Metrics div span {
  color: #0284c7 !important;
}
.p7Metrics div small {
  color: #64748b !important;
}
.a4BoardFooter {
  background: #f8fafc !important;
  border-top: 1px solid #edf2f7 !important;
  color: #64748b !important;
}
.a4ProductDisclaimer {
  color: #94a3b8 !important;
}
.a4ProductBreadcrumb {
  background: #f8fafc !important;
  color: #64748b !important;
  border-bottom: 1px solid #edf2f7 !important;
}
.a4ProductBreadcrumb strong {
  color: #0f172a !important;
}
.a4HeroRail {
  color: #64748b !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* Home Modules & Signals in Light Mode */
.heroSignals span {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.channelPill {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

/* High contrast companion and typography fixes */
.h4HeroGuide strong,
.v4HeroCompanion strong,
.h4ContextCompanion strong,
.a4HeroCompanion figcaption strong {
  color: #0f172a !important;
  font-weight: 750 !important;
}
.h4HeroGuide p,
.v4HeroCompanion p,
.h4ContextCompanion span,
.a4HeroCompanion figcaption span {
  color: #64748b !important;
}
.h4HeroGuide .v4Eyebrow,
.v4HeroCompanion .v4Eyebrow,
.h4ContextCompanion .kicker {
  color: #0284c7 !important;
  font-weight: 750 !important;
}
.h4StoryKey, .h4MiniTabs, .a4TextLink > span, .v4ReviewBar, .h4StepFooter > strong, .h4StepFooter > a {
  color: #475569 !important;
}


/* ==========================================================================
   INTEGRATIONS OVERHAUL: HERO APP WINDOW, CHANNELS STRIP & MATRIX
   ========================================================================== */

.heroDashboardShowcase {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.heroAppWindow {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.heroAppWindowBar {
  background: #f8fafc !important;
  border-bottom: 1px solid #edf2f7 !important;
  padding: 10px 16px !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.heroTrafficLights {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
.trafficDot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
.trafficDot--red { background: #ef4444 !important; }
.trafficDot--yellow { background: #f59e0b !important; }
.trafficDot--green { background: #10b981 !important; }

.heroWindowPill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  color: #64748b !important;
  font-family: var(--shell-mono, monospace) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.heroLiveSyncBadge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  color: #059669 !important;
  font-weight: 650 !important;
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
}
.liveSyncBeacon {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5) !important;
}

.heroAppWindowBody {
  padding: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
  line-height: 0 !important;
  display: block !important;
}

.heroAppWindowBody img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 0 0 15px 15px !important;
}

/* Supported Channels Ecosystem Strip */
.channelEcosystemStrip {
  max-width: 1180px !important;
  margin: 32px auto 60px auto !important;
  padding: 20px 24px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  clear: both !important;
}

.channelEcosystemLabel {
  display: block !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  margin-bottom: 14px !important;
}

.channelBadges {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px 10px !important;
}

.channelBadgeItem {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 15px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: default !important;
  white-space: nowrap !important;
}

.channelBadgeItem:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.channelBadgeItem i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Individual channel brand dot accents */
.channelBadgeItem:nth-child(1) i { background: #f27a1a !important; box-shadow: 0 0 6px rgba(242, 122, 26, 0.5) !important; } /* Trendyol */
.channelBadgeItem:nth-child(2) i { background: #ff6000 !important; box-shadow: 0 0 6px rgba(255, 96, 0, 0.5) !important; } /* Hepsiburada */
.channelBadgeItem:nth-child(3) i { background: #f59e0b !important; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5) !important; } /* Amazon TR & Global */
.channelBadgeItem:nth-child(4) i { background: #00a0dc !important; box-shadow: 0 0 6px rgba(0, 160, 220, 0.5) !important; } /* Çiçeksepeti */
.channelBadgeItem:nth-child(5) i { background: #10b981 !important; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5) !important; } /* Shopify */
.channelBadgeItem:nth-child(6) i { background: #8b5cf6 !important; box-shadow: 0 0 6px rgba(139, 92, 246, 0.5) !important; } /* WooCommerce */
.channelBadgeItem:nth-child(7) i { background: #0284c7 !important; box-shadow: 0 0 6px rgba(2, 132, 199, 0.5) !important; } /* Pazarama */

/* Integration Control & Matrix */
.integrationControl {
  padding: 60px clamp(20px, 4vw, 40px) !important;
  background: #fafafa !important;
}

.integrationControlInner,
.integrationIntelligenceInner {
  max-width: 1220px !important;
  margin: 0 auto !important;
}

.integrationMatrix {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  margin-top: 40px !important;
  overflow: hidden !important;
}

.integrationMatrixHead {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  font-weight: 750 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  padding: 16px 24px !important;
}

.integrationMatrixRow {
  background: #ffffff !important;
  border-top: 1px solid #f1f5f9 !important;
  color: #0f172a !important;
  padding: 20px 24px !important;
  transition: background 0.15s ease !important;
}

.integrationMatrixRow:hover {
  background: #f8fafc !important;
}

.integrationMatrixRow strong {
  color: #0f172a !important;
  font-size: 17px !important;
  font-weight: 750 !important;
}

.integrationMatrixRow > span {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.integrationMatrixRow > span:last-child {
  color: #059669 !important;
  font-weight: 700 !important;
}

.channelDecisionBoard {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  margin-top: 40px !important;
  padding: 32px !important;
}

.channelSignals span,
.channelActions span {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.channelSignals svg {
  color: #0284c7 !important;
}

.channelActions svg {
  color: #10b981 !important;
}

.channelCore {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  color: #0f172a !important;
  padding: 24px !important;
}

.channelCore svg {
  color: #0284c7 !important;
}

.channelCore strong {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 750 !important;
}

.channelCore small {
  color: #64748b !important;
  font-size: 12px !important;
}

.v4NextInner {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

.v4Next p {
  color: #475569 !important;
}

.v4Subpage .v4Next .v5EmptyMapping {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
}

.v4Subpage .v4Next .v5EmptyMapping strong {
  color: #0f172a !important;
  font-weight: 750 !important;
}

.v4Subpage .v4Next .v5EmptyMapping span {
  color: #64748b !important;
}


/* ==========================================================================
   HOMEPAGE STREAMLINED OVERHAUL (Clean, airy, modern SaaS)
   ========================================================================== */

.homeModuleSection,
.homePipelineSection {
  padding: 70px clamp(20px, 4.5vw, 60px) !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  background: #fafafa !important;
  box-sizing: border-box !important;
}

.homeSectionHeader {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 45px auto !important;
}

.homeSectionHeader .kicker,
.homeSectionHeader .homeModuleEyebrow {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #0284c7 !important;
  margin-bottom: 12px !important;
}

.homeSectionHeader h2 {
  font-size: clamp(30px, 3.8vw, 46px) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.04em !important;
  color: #0f172a !important;
  margin: 0 0 14px 0 !important;
}

.homeSectionHeader p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 !important;
}

/* 3-Card Module Bento Grid */
.homeModuleGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

@media (max-width: 980px) {
  .homeModuleGrid {
    grid-template-columns: 1fr !important;
  }
}

.homeModuleCard {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.homeModuleCard:hover {
  transform: translateY(-4px) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.homeModuleTop {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.homeModuleMascot {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.08)) !important;
}

.homeModuleEyebrow {
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  color: #0284c7 !important;
  background: #e0f2fe !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid #bae6fd !important;
}

.homeModuleCard h3 {
  font-size: 22px !important;
  font-weight: 750 !important;
  letter-spacing: -0.03em !important;
  color: #0f172a !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.25 !important;
}

.homeModuleCard p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 0 22px 0 !important;
  flex-grow: 1 !important;
}

.homeModulePills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-bottom: 26px !important;
}

.homeModulePills span {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

.homeModuleLink {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.homeModuleLink:hover {
  background: #1e293b !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

.homeModuleLink svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  transition: transform 0.2s ease !important;
}

.homeModuleLink:hover svg {
  transform: translateX(3px) !important;
}

/* 3-Step Pipeline Grid */
.homePipelineGrid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

@media (max-width: 980px) {
  .homePipelineGrid {
    grid-template-columns: 1fr !important;
  }
}

.homePipelineCard {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.homePipelineStepNum {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 850 !important;
  font-size: 14px !important;
  margin-bottom: 20px !important;
}

.homePipelineCard h3 {
  font-size: 20px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 12px 0 !important;
}

.homePipelineCard p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin: 0 !important;
}


/* ==========================================================================
   WALKTHROUGH STAGE ISOLATION (ELIMINATE OVERLAPPING TITLES & CARDS)
   ========================================================================== */

.v4SubWalkthrough.v4MotionReady [data-v4-stage]:not(.is-active),
.a4Walkthrough.v4MotionReady [data-v4-stage]:not(.is-active),
.v4WalkthroughPanels > [data-v4-stage]:not(.is-active) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.v4SubWalkthrough.v4MotionReady [data-v4-stage]:not(.is-active) *,
.a4Walkthrough.v4MotionReady [data-v4-stage]:not(.is-active) * {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.v4SubWalkthrough.v4MotionReady [data-v4-stage].is-active,
.a4Walkthrough.v4MotionReady [data-v4-stage].is-active,
.v4WalkthroughPanels > [data-v4-stage].is-active {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ==========================================================================
   COMPREHENSIVE HIGH-CONTRAST LIGHT MODE RULES (ADS, COMMERCE, ALL)
   ========================================================================== */

/* 1. All Paragraphs & Labels */
p, .heroLead, .a4StepCopy > p, .v4StageCopy > p,
.a4IntelligenceCopy > p, .a4ControlIntro > p, .sectionHeading p {
  color: #475569 !important;
}

/* 2. Micro labels, Eyebrows & Tags */
.a4Micro, .v4Micro, .p7Label, .a4StepNumber, .v4Eyebrow, .homeModuleEyebrow, .kicker {
  color: #0284c7 !important;
  font-weight: 750 !important;
}

.a4Example, .a4DraftTag, .p7Badge, .v4Tag {
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
  font-weight: 750 !important;
  border-radius: 6px !important;
}

.a4ReadOnly {
  color: #0284c7 !important;
  font-weight: 750 !important;
  font-size: 11px !important;
}

/* 3. Panel Chrome & Headers */
.a4WorkspaceHeader, .v4WindowBar, .p7ProductChrome, .a4IntelligenceCardHead {
  background: #f8fafc !important;
  border-bottom: 1px solid #edf2f7 !important;
  color: #0f172a !important;
}

.a4WorkspaceHeader span, .v4WindowBar strong, .a4IntelligenceCardHead strong {
  color: #0f172a !important;
  font-weight: 750 !important;
}

.a4WorkspaceHeader small, .v4SampleLabel, .a4IntelligenceCardHead small {
  color: #64748b !important;
  font-weight: 600 !important;
}

.a4WorkspaceFoot, .v4WindowFooter {
  background: #f8fafc !important;
  border-top: 1px solid #edf2f7 !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

/* 4. Stage 1: Records & Sources */
.p7Record {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}

.p7Record strong {
  color: #0f172a !important;
  font-weight: 750 !important;
}

.p7Record p {
  color: #64748b !important;
}

.p7SourceCards > div {
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 14px 0 !important;
}

.p7SourceCards i {
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
}

.p7SourceCards strong {
  color: #0f172a !important;
  font-weight: 750 !important;
  font-size: 14px !important;
}

.p7SourceCards small {
  color: #64748b !important;
  font-size: 11px !important;
}

.p7SourceCards b {
  color: #0f172a !important;
  font-weight: 750 !important;
  font-size: 13px !important;
}

/* 5. Stage 2: Direction, Creative & Dayanak */
.a4ReviewDirection > p,
.a4ReviewDirection > p strong {
  color: #0f172a !important;
  font-weight: 750 !important;
}

.a4DirectionEvidence > span {
  color: #64748b !important;
  font-weight: 750 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

.a4DirectionEvidence > div {
  border-top: 1px solid #e2e8f0 !important;
  padding: 8px 0 !important;
}

.a4DirectionEvidence strong {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.a4DirectionEvidence small {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.a4DirectionEvidence i {
  background: #0284c7 !important;
}

.a4AudienceHypothesis .a4Micro {
  color: #64748b !important;
  font-weight: 750 !important;
}

.a4AudienceHypothesis > div > span {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 650 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
}

.a4CreativePreview {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
}

.a4CreativePreview > span {
  color: #64748b !important;
  font-weight: 750 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

.a4CreativePreview > strong {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 26px !important;
}

.a4CreativePreview > div {
  color: #475569 !important;
  border-top: 1px solid #e2e8f0 !important;
  font-weight: 600 !important;
}

.a4MessageAngle {
  border-top: 1px solid #e2e8f0 !important;
  padding: 12px 0 !important;
}

.a4MessageAngle > span {
  color: #64748b !important;
  font-weight: 750 !important;
  font-size: 11px !important;
}

.a4MessageAngle > strong {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.a4NextStep {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  border-radius: 8px !important;
  font-weight: 650 !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
}

.a4NextStep:hover {
  background: #1e293b !important;
}

/* 6. Stage 3: Brief & Checklist */
.a4Brief {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
}

.a4Brief > div {
  border-bottom: 1px solid #edf2f7 !important;
  padding: 8px 0 !important;
}

.a4Brief > div:last-child {
  border-bottom: none !important;
}

.a4Brief > div > span {
  color: #0284c7 !important;
  font-weight: 750 !important;
  font-size: 11px !important;
}

.a4Brief strong {
  color: #0f172a !important;
  font-weight: 750 !important;
  font-size: 14px !important;
}

.a4Brief p {
  color: #334155 !important;
  font-size: 13px !important;
}

.a4CopperTag {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
  font-weight: 750 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
}

/* 7. Dynamic Demo Controls (Selects, Range Sliders, Buttons) */
.demoControls {
  margin: 18px 0 !important;
}

.demoControls label {
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.demoControls select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  padding: 9px 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.demoControls select:focus {
  border-color: #0284c7 !important;
  outline: 2px solid rgba(2, 132, 199, 0.2) !important;
}

.demoControls output, #demo-budget-value {
  color: #0f172a !important;
  font-weight: 850 !important;
  font-size: 16px !important;
  display: inline-block !important;
  margin-left: 6px !important;
}

.demoControls input[type=range] {
  accent-color: #0284c7 !important;
}

.demoControls button, #demo-build-brief {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  border-radius: 8px !important;
  font-weight: 650 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.demoControls button:hover, #demo-build-brief:hover {
  background: #1e293b !important;
}

.demoResult {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.demoTab {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  color: #475569 !important;
  font-weight: 650 !important;
  padding: 7px 12px !important;
}

.demoTab[aria-selected=true], .demoTab.is-active {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

.demoHint {
  color: #64748b !important;
  font-size: 12px !important;
}

/* 8. Notice Boxes */
.p7Notice {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 10px !important;
  color: #166534 !important;
}

.p7Notice strong {
  color: #166534 !important;
  font-weight: 750 !important;
}

.p7Notice p {
  color: #15803d !important;
}

.p7NoticeIcon {
  color: #16a34a !important;
  font-weight: 800 !important;
}

/* 9. Hero Rail & Disclaimer */
.a4HeroRail {
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  padding: 18px 0 !important;
}

.a4HeroRail span {
  color: #475569 !important;
  font-weight: 650 !important;
}

.a4HeroRail a {
  color: #0f172a !important;
  font-weight: 750 !important;
}

.a4ProductDisclaimer {
  color: #64748b !important;
  font-size: 12px !important;
}

.a4WalkthroughDisclaimer {
  color: #64748b !important;
  font-size: 12px !important;
  text-align: center !important;
}

/* 10. Bottom Sections (Control, Intelligence, CTA) */
.a4Intelligence {
  background: #fafafa !important;
  padding: 80px 0 !important;
}

.a4IntelligenceCopy h2 {
  color: #0f172a !important;
  font-weight: 850 !important;
}

.a4IntelligenceCopy p {
  color: #475569 !important;
  font-size: 16px !important;
}

.a4TextLink {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.a4Control {
  background: #fafafa !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 48px 0 !important;
}

.a4ControlIntro h2 {
  color: #0f172a !important;
  font-weight: 850 !important;
}

.a4ControlIntro p {
  color: #475569 !important;
  font-size: 15px !important;
}

.a4Cta {
  background: #fafafa !important;
  padding: 60px 0 80px 0 !important;
}

.a4Cta h2 {
  color: #0f172a !important;
  font-weight: 850 !important;
}

.a4ButtonPrimary {
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.a4ButtonPrimary:hover {
  background: #1e293b !important;
  color: #ffffff !important;
}

/* 11. FAQ & Footer Contrast Fixes */
.v5Faq {
  background: #fafafa !important;
}

.v5Faq summary {
  color: #0f172a !important;
  font-weight: 750 !important;
  font-size: 16px !important;
}

.v5Faq summary span, .v5Faq summary::after {
  color: #0284c7 !important;
  font-weight: 850 !important;
  font-size: 20px !important;
}

.v5Faq details > p {
  color: #475569 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.v5Footer {
  background: #fafafa !important;
  border-top: 1px solid #e2e8f0 !important;
}

.v5FooterBrand strong {
  color: #0f172a !important;
  font-weight: 850 !important;
}

.v5FooterLinks a {
  color: #1e293b !important;
  font-weight: 650 !important;
}

.v5FooterBottom {
  color: #64748b !important;
  border-top: 1px solid #e2e8f0 !important;
}

.v5FooterBottom a {
  color: #334155 !important;
  font-weight: 650 !important;
}

/* ==========================================================================
   12. ABSOLUTE CONTRAST OVERHAUL: ELIMINATE ALL UNREADABLE TEXT
   ========================================================================== */

/* Universal summary / accordion titles */
summary,
.demoEvidence summary,
.p7Panel summary,
details summary {
  color: #0f172a !important;
  font-weight: 750 !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

summary:hover,
.demoEvidence summary:hover {
  color: #0369a1 !important;
}

/* Buttons: Secondary & Primary high-contrast definitions */
a.secondary,
button.secondary,
.v4Link--secondary,
.a4ButtonSecondary {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

a.secondary:hover,
button.secondary:hover,
.v4Link--secondary:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

a.primary,
button.primary,
.v4Link--primary {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

a.primary:hover,
button.primary:hover,
.v4Link--primary:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.v4Link--text {
  color: #0369a1 !important;
  font-weight: 750 !important;
}

.v4Link--text:hover {
  color: #0284c7 !important;
}

/* Walkthrough Pill Numbers & Navigation */
.v4StageNav button,
.v4WalkthroughPills button,
button[data-v4-go] {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  transition: all 0.2s ease !important;
}

.v4StageNav button span,
.v4WalkthroughPills button span,
button[data-v4-go] span {
  color: #0369a1 !important;
  font-weight: 850 !important;
}

.v4StageNav button.is-active,
.v4StageNav button[aria-current="step"],
.v4WalkthroughPills button.is-active,
button[data-v4-go].is-active {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
}

.v4StageNav button.is-active span,
.v4StageNav button[aria-current="step"] span,
.v4WalkthroughPills button.is-active span,
button[data-v4-go].is-active span {
  color: #ffffff !important;
}

/* Review Lists & Health Rows (Commerce & Integrations) */
.v4ReviewList > div,
.v4HealthRows > div {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
}

.v4ReviewList strong,
.v4HealthRows strong {
  color: #0f172a !important;
  font-weight: 750 !important;
  font-size: 14px !important;
}

.v4ReviewList p,
.v4HealthRows p {
  color: #475569 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

.v4ReviewList span,
.v4HealthRows span {
  color: #334155 !important;
  font-weight: 650 !important;
  font-size: 12px !important;
}

.v4Check svg path {
  stroke: #0369a1 !important;
}

.v4HealthMarker {
  background: #10b981 !important;
}

.v4HealthMarker--warn {
  background: #f59e0b !important;
}

/* Review Prompt: High-Contrast Question Box */
.v4ReviewPrompt {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-top: 18px !important;
}

.v4ReviewPrompt > .v4Micro {
  color: #0369a1 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

.v4ReviewPrompt > p {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 8px 0 14px 0 !important;
}

.v4ReviewPrompt > div {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.v4ReviewPrompt > div > span {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
}

/* UI Handoff Footer */
.v4UIHandoff {
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 14px !important;
  margin-top: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.v4UIHandoff > span {
  color: #475569 !important;
  font-weight: 650 !important;
  font-size: 13px !important;
}

.v4UIHandoff a {
  color: #0369a1 !important;
  font-weight: 750 !important;
}

/* Signal Rows (Commerce) */
.v4SignalRows li {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 12px 0 !important;
}

.v4SignalRows strong {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.v4SignalRows span {
  color: #475569 !important;
  font-size: 12px !important;
}

.v4SignalRows li > span:last-child {
  color: #0369a1 !important;
  font-weight: 750 !important;
}

/* Path Selector (Commerce Customer Journey) */
.v4PathSelector {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}

.v4PathSelector span {
  color: #475569 !important;
  font-weight: 600 !important;
}

.v4PathSelector strong {
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 750 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}

/* Key Values & Evidence Details */
.v4KeyValues dt {
  color: #64748b !important;
  font-weight: 650 !important;
  font-size: 12px !important;
}

.v4KeyValues dd {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* Marketplace Mapping Table (Integrations) */
.v4MappingTable {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.v4MappingHead {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.v4MappingHead span {
  color: #64748b !important;
  font-weight: 750 !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
}

.v4MappingTable [role="row"] {
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 10px 14px !important;
}

.v4MappingTable [role="row"] strong {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

.v4MappingTable [role="row"] span {
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.v4StatusText {
  color: #15803d !important;
  font-weight: 750 !important;
}

.v4StatusText--warn {
  color: #b45309 !important;
  font-weight: 750 !important;
}

/* Validation Callout (Integrations) */
.v4ValidationCallout {
  background: #eff6ff !important;
  border: 1.5px solid #bfdbfe !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin: 14px 0 !important;
}

.v4ValidationCallout > span {
  background: #3b82f6 !important;
  color: #ffffff !important;
  font-weight: 850 !important;
  border-radius: 999px !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 12px !important;
}

.v4ValidationCallout strong {
  color: #1e3a8a !important;
  font-weight: 750 !important;
  font-size: 13px !important;
}

.v4ValidationCallout p {
  color: #1d4ed8 !important;
  font-size: 12px !important;
}

/* Reconcile Grid (Integrations 2-source comparison) */
.v4ReconcileGrid > div {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px !important;
}

.v4ReconcileGrid h5 {
  color: #0f172a !important;
  font-weight: 850 !important;
  font-size: 17px !important;
}

.p7InventoryCount strong {
  color: #0f172a !important;
  font-weight: 850 !important;
  font-size: 32px !important;
}

.p7InventoryCount span {
  color: #64748b !important;
  font-weight: 650 !important;
  font-size: 12px !important;
}

.v4ReconcileGrid dt {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.v4ReconcileGrid dd {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* Panel Window Headers & Footers */
.v4WindowBar, .a4WindowBar, .a4WorkspaceHeader {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  padding: 12px 18px !important;
}

.v4WindowBar strong, .a4WorkspaceHeader strong {
  color: #0f172a !important;
  font-weight: 750 !important;
  font-size: 13px !important;
}

.v4WindowFooter, .a4WorkspaceFoot {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  padding: 10px 18px !important;
}

.v4WindowFooter span, .a4WorkspaceFoot span {
  color: #475569 !important;
  font-weight: 600 !important;
}

.a4WorkspaceFoot span:last-child {
  color: #0369a1 !important;
  font-weight: 750 !important;
}

/* General Badges & Tags */
.p7Badge,
.v4Tag,
.a4DraftTag,
.a4NeutralTag {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
  font-weight: 750 !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
}

.v4Tag--purple, .a4PurpleTag {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border: 1px solid #ddd6fe !important;
  font-weight: 750 !important;
}

/* Prevent Reveal Transitions from Leaving Sections Half-Faded */
.v4RevealReady,
[data-v4-reveal]:not(.v4RevealPending) {
  opacity: 1 !important;
}

.heroSignals span {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  font-weight: 650 !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
}