/* Variant: Folders — a file folder with coloured index tabs. Light, warm. */
:root {
  --bg: #f8f4ee; --surface: #ffffff; --muted: #efe8de; --ink: #241c14; --ink-2: #66594c; --line: #e6dccf;
  --accent: #c2410c; --accent-ink: #ffffff; --accent-soft: #ffe5d4; --green-soft: #e4e8ff; --amber-soft: #fff0cc;
  --night: #241c14; --night-2: #352a1f;
  color-scheme: light;
}
.fo { position: relative; height: clamp(20rem, 32vw, 26rem); filter: drop-shadow(0 30px 30px rgba(36, 28, 20, 0.25)); }
.fo-back { position: absolute; left: 4%; right: 4%; top: 12%; bottom: 0; border-radius: 6px 14px 14px 14px; background: #e3b768; }
.fo-tabs { position: absolute; left: 4%; right: 4%; top: 2%; display: flex; gap: 4px; }
.fo-tab { flex: 1; padding: 0.45rem 0.4rem 1.6rem; border-radius: 10px 10px 0 0; font-size: clamp(0.625rem, 0.95vw, 0.8125rem); font-weight: 650; text-align: center; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-tab--1 { background: #4b6bff; } .fo-tab--2 { background: #e8453c; } .fo-tab--3 { background: #f5a524; color: #2a1800; } .fo-tab--4 { background: #8a5cf6; } .fo-tab--5 { background: #ec4899; }
.fo-paper { position: absolute; left: 10%; right: 10%; top: 16%; bottom: 10%; padding: 18px 20px; border-radius: 4px; background: #ffffff; rotate: -2deg; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.3); }
.fo-paper b { font-size: 1.25rem; letter-spacing: -0.02em; }
.fo-paper ul { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.fo-paper li { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.45rem; border-bottom: 1px solid #eee6da; font-size: 0.875rem; }
.fo-paper li i { width: 0.9rem; height: 0.9rem; border-radius: 3px; background: #4b6bff; }
.fo-paper li:nth-child(2) i { background: #e8453c; } .fo-paper li:nth-child(3) i { background: #f5a524; } .fo-paper li:nth-child(4) i { background: #8a5cf6; }
.fo-clip { position: absolute; right: 18px; top: -10px; width: 14px; height: 44px; border: 3px solid #9aa3b0; border-radius: 8px; }
.fo-front { position: absolute; left: 4%; right: 4%; top: 58%; bottom: 0; border-radius: 6px 6px 14px 14px; background: linear-gradient(#f0c879, #e2b25e); clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); }
.tile--dark .focus strong { color: #f0c879; }
.product__visual--water { background: #e4e8ff; } .product__visual--jobs { background: #ffe5d4; } .product__visual--food { background: #fff0cc; }