/* Variant: Checklist — a checklist that ticks itself off. Light violet. */
:root {
  --bg: #f7f5ff; --surface: #ffffff; --muted: #eeebfb; --ink: #1b1638; --ink-2: #5d587a; --line: #e4e0f3;
  --accent: #6c3be0; --accent-ink: #ffffff; --accent-soft: #ebe4ff; --green-soft: #e4ecff; --amber-soft: #ffeedd;
  --night: #1b1638; --night-2: #2a2350;
  color-scheme: light;
}
.ck { padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: #ffffff; box-shadow: 0 40px 70px -40px rgba(40, 20, 120, 0.4); }
.ck-head { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; }
.ck ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.ck-i, .ck-i a { display: flex; align-items: center; gap: 0.9rem; padding-block: 0.85rem; font-size: clamp(1rem, 1.5vw, 1.25rem); }
.ck-i { border-bottom: 1px solid var(--line); }
.ck-i a { flex: 1; padding: 0; color: var(--accent); font-weight: 650; text-decoration: none; }
.ck-i a:hover { text-decoration: underline; }
.ck-box { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border: 2px solid #cfc7ee; border-radius: 8px; }
.ck-i:not(.ck-i--last) .ck-box { background: var(--accent); border-color: var(--accent); }
.ck-i:not(.ck-i--last) .ck-box::after { content: ""; position: absolute; left: 30%; top: 14%; width: 30%; height: 50%; border: solid #ffffff; border-width: 0 3px 3px 0; rotate: 45deg; }
.ck-i:not(.ck-i--last) { color: var(--ink-2); text-decoration: line-through; text-decoration-color: #cfc7ee; }
.ck-i--last .ck-box { border-style: dashed; border-color: var(--accent); }
.ck-bar { display: block; height: 8px; margin-top: 1.25rem; border-radius: 999px; background: var(--muted); }
.ck-bar i { display: block; width: 80%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6c3be0, #b45cf5); }
@media (prefers-reduced-motion: no-preference) {
  .ck-i:not(.ck-i--last) .ck-box { animation: ck-tick 0.4s ease both; }
  .ck-i--2 .ck-box { animation-delay: 0.4s !important; } .ck-i--3 .ck-box { animation-delay: 0.8s !important; } .ck-i--4 .ck-box { animation-delay: 1.2s !important; }
  .ck-bar i { animation: ck-fill 1.6s ease both; }
  @keyframes ck-tick { from { background: transparent; border-color: #cfc7ee; transform: scale(0.8); } }
  @keyframes ck-fill { from { width: 0; } }
}
.tile--dark .focus strong { color: #c8b5ff; }
.product__visual--water { background: #e4ecff; } .product__visual--jobs { background: #ebe4ff; } .product__visual--food { background: #ffeedd; }