/* Variant: Crossword — a crossword whose answers are the services. Light. */
:root {
  --bg: #fbf8f1; --surface: #ffffff; --muted: #f2ede2; --ink: #1b1b1f; --ink-2: #5b5a60; --line: #e5dfd2;
  --accent: #2448c9; --accent-ink: #ffffff; --accent-soft: #e2e8ff; --green-soft: #ffe8d6; --amber-soft: #fff1c8;
  --night: #1b1b1f; --night-2: #2a2a30;
  color-scheme: light;
}
.cw { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 40em) { .cw { grid-template-columns: auto minmax(0, 1fr); } }
.cw-grid { display: grid; grid-template-columns: repeat(8, clamp(2.1rem, 3.9vw, 3rem)); grid-auto-rows: clamp(2.1rem, 3.9vw, 3rem); gap: 3px; padding: 3px; background: transparent; justify-self: center; }
.cw-c { position: relative; display: grid; place-items: center; background: #ffffff; outline: 2px solid var(--ink); font-weight: 700; font-size: clamp(0.875rem, 1.6vw, 1.25rem); }
.cw-c i { position: absolute; left: 3px; top: 1px; font-size: 0.5625rem; font-style: normal; font-weight: 600; color: var(--ink-2); }
.cw-c b { color: var(--accent); }
.cw-c--x { background: transparent; outline: none; }
@media (prefers-reduced-motion: no-preference) { .cw-c b { animation: cw-fill 0.4s ease both; } .cw-c:nth-child(3n) b { animation-delay: 0.3s; } .cw-c:nth-child(3n+1) b { animation-delay: 0.6s; } @keyframes cw-fill { from { opacity: 0; transform: scale(0.6); } } }
.cw-clues { display: grid; gap: 0.35rem; font-size: 0.9375rem; color: var(--ink-2); }
.cw-clues b { display: block; margin-top: 0.5rem; color: var(--ink); }
.cw-clues i { font-style: normal; font-weight: 700; color: var(--accent); margin-right: 0.3rem; }
.tile--dark .focus strong { color: #9fb2ff; }
.product__visual--water { background: #e2e8ff; } .product__visual--jobs { background: #ffe8d6; } .product__visual--food { background: #fff1c8; }