/* Variant: Origami — a folded paper leaflet with creased panels. Light. */
:root {
  --bg: #f6f3ee; --surface: #ffffff; --muted: #ece7df; --ink: #1f1b24; --ink-2: #5e5866; --line: #e2dbd0;
  --accent: #d6336c; --accent-ink: #ffffff; --accent-soft: #fde1ea; --green-soft: #e3e8ff; --amber-soft: #fff0d0;
  --night: #1f1b24; --night-2: #2d2734;
  color-scheme: light;
}
.og { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); perspective: 1400px; padding-block: 1.5rem; filter: drop-shadow(0 40px 40px rgba(31, 27, 36, 0.25)); }
.og-panel { display: flex; flex-direction: column; gap: 0.6rem; min-height: clamp(18rem, 28vw, 24rem); padding: clamp(14px, 2vw, 22px); transform-style: preserve-3d; }
.og-panel .ui { margin-top: auto; }
.og-panel--1 { background: linear-gradient(90deg, #ffe3ec, #ffd0de); transform: rotateY(28deg); transform-origin: right center; }
.og-panel--2 { background: linear-gradient(90deg, #ffffff, #f1ecff); }
.og-panel--3 { background: linear-gradient(270deg, #fff0d0, #ffe2b0); transform: rotateY(-28deg); transform-origin: left center; }
.og-n { font-size: 0.8125rem; font-weight: 700; color: var(--accent); }
.og-panel b { font-size: clamp(1.125rem, 1.8vw, 1.5rem); line-height: 1.1; letter-spacing: -0.02em; hyphens: auto; }
@media (prefers-reduced-motion: no-preference) {
  .og-panel--1 { animation: og-fold-l 6s ease-in-out infinite; } .og-panel--3 { animation: og-fold-r 6s ease-in-out infinite; }
  @keyframes og-fold-l { 50% { transform: rotateY(14deg); } } @keyframes og-fold-r { 50% { transform: rotateY(-14deg); } }
}
.tile--dark .focus strong { color: #ffb3c8; }
.product__visual--water { background: #e3e8ff; } .product__visual--jobs { background: #fde1ea; } .product__visual--food { background: #fff0d0; }