/* ============================================
   Essentia - Page-Specific Styles
   Accent: var(--accent-essentia) #FF6B4A
   Most styling from product-common.css
   ============================================ */

/* Hero accent orb: shift slightly lower and left for Essentia */
.page-essentia .product-hero::before {
  top: -15%;
  right: -5%;
  width: 650px;
  height: 650px;
}

/* Use cases: 5 cards -- last card spans full width on 2-col grid */
.page-essentia .use-case-grid {
  grid-template-columns: repeat(2, 1fr);
}

.page-essentia .use-case-card:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .page-essentia .use-case-grid {
    grid-template-columns: 1fr;
  }

  .page-essentia .use-case-card:last-child {
    grid-column: auto;
  }
}