/* Variant: Diagonal — the hero cut diagonally into coral and deep navy. Light. */
:root {
  --bg: #fbf7f5; --surface: #ffffff; --muted: #f4ece8; --ink: #1c1730; --ink-2: #5f5a72; --line: #ece2dc;
  --accent: #1c1a4a; --accent-ink: #ffffff; --accent-soft: #e4e3ff; --green-soft: #ffe2da; --amber-soft: #fff0cf;
  --night: #1c1a4a; --night-2: #2a2766; --coral: #ff7a5c;
  color-scheme: light;
}
.dg-hero { position: relative; isolation: isolate; }
.dg-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, var(--coral) 0 52%, #1c1a4a 52% 100%); }
@media (max-width: 63.99em) { .dg-bg { background: linear-gradient(160deg, var(--coral) 0 62%, #1c1a4a 62% 100%); } }
.dg-inner { padding-block: clamp(3rem, 7vw, 5.5rem); }
.dg-title { color: #1c0f12; }
.dg-hero .hero__lead { color: #3a1d18; }
.dg-hero .pill--ghost { background: rgba(255, 255, 255, 0.55); border-color: transparent; }
.dg-vis { position: relative; display: grid; gap: 16px; }
.dg-vis .ui { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55); }
.dg-vis .ui:first-child { width: 86%; rotate: -3deg; }
.dg-vis .ui:last-child { width: 70%; margin-top: -22%; justify-self: end; rotate: 4deg; }
.tile--dark .focus strong { color: #ffab96; }
.steps li::before { background: var(--coral); color: #1c0f12; }
.product__visual--water { background: #e4e3ff; } .product__visual--jobs { background: #ffe2da; } .product__visual--food { background: #fff0cf; }