/* --- CUSTOM CONSTANTS & COHERENT COLOR PALETTE --- */
:root {
  /* Brand-specific premium colors for Diaclose */
  --dc-bg: #F9FBFB;          /* Light, fresh mint-tinted background */
  --dc-surface: #FFFFFF;     /* Pure white for containers/cards */
  --dc-brand: #0D9488;       /* Teal - representing health, balance and nature */
  --dc-brand-soft: #F0FDFA;  /* Soft, luminous light teal tint */
  --dc-brand-hover: #0F766E; /* Deep rich teal */
  --dc-ink: #0F172A;         /* Slate dark charcoal for sharp typography readability */
  --dc-ink-muted: #475569;   /* Soft slate for narrative text */
  --dc-accent: #EA580C;      /* Intense orange for CTA & tags to draw conversion */
  
  /* Layout constraints */
  --dc-container-max: 1140px;

  /* Fonts */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Custom elevation style shadows: Raised type setting */
  --dc-shadow-raised: 0 10px 25px -5px rgba(13, 148, 136, 0.08), 0 8px 10px -6px rgba(13, 148, 136, 0.04);
  
  /* Border radius style: Soft setting (12px–20px) */
  --dc-radius: 16px;
}

/* --- OVERWRITING CORE DEFAULTS --- */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, th {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* --- STRICT LAYOUT SHELL REPLACEMENT FOR CONTAINER --- */
.dc-lay-shell {
  width: 100%;
  max-width: var(--dc-container-max);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin-left: auto;
  margin-right: auto;
}

/* --- LEAD HEADING COMPLIANCE --- */
.dc-lead-heading {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: normal; /* "Normal" case random configuration check */
}
@media (min-width: 768px) {
  .dc-lead-heading {
    font-size: 3.25rem;
  }
}

/* --- METRIC CAPSULE SUBTITLE --- */
.dc-sub-h2 {
  font-size: 1.125rem;
  line-height: 1.6;
}

/* --- COMPACT BENIFIT PILLS --- */
.dc-badge-capsule {
  border-radius: var(--dc-radius);
}

/* --- CONVERT ARTIFACT ELEMENTS SHAPE INTEGRITIES --- */
.dc-visual-wrap {
  border-radius: var(--dc-radius);
  transition: all 0.3s ease-in-out;
}

.dc-seal-row, 
.dc-pricing-anchor,
.dc-feat-unit,
.dc-tmonial-unit {
  border-radius: var(--dc-radius);
}

/* --- BUTTON CTA HOVER ANCHORS --- */
.dc-action-trigger {
  border-radius: var(--dc-radius);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dc-action-trigger:hover {
  background-color: #D94E06 !important; /* Slightly darker orange */
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(234, 88, 12, 0.45) !important;
}
.dc-action-trigger:active {
  transform: translateY(1px);
}

/* Avoid flashing images during webp asset swaps */
img {
  content-visibility: auto;
}