/* Variant: Elements — a periodic table of the services and products. Light. */
:root {
  --bg: #f6f6f9; --surface: #ffffff; --muted: #ececf2; --ink: #16172a; --ink-2: #575a70; --line: #e0e1ea;
  --accent: #4b3fd8; --accent-ink: #ffffff; --accent-soft: #e7e4ff; --green-soft: #ffe2e6; --amber-soft: #fff0c9;
  --night: #16172a; --night-2: #232540;
  --ca: #4b7bff; --ca-t: #e3ebff; --cb: #ff6b6b; --cb-t: #ffe2e2; --cc: #f5a524; --cc-t: #fff0d0;
  color-scheme: light;
}
.el-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 40em) { .el-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.el-t { position: relative; display: flex; flex-direction: column; justify-content: center; aspect-ratio: 1; padding: 10px; border: 2px solid; border-radius: 10px; }
.el-t--a { border-color: var(--ca); background: var(--ca-t); } .el-t--b { border-color: var(--cb); background: var(--cb-t); } .el-t--c { border-color: var(--cc); background: var(--cc-t); }
.el-t b { font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.el-t small { margin-top: 0.3rem; font-size: clamp(0.625rem, 0.9vw, 0.8125rem); color: var(--ink-2); line-height: 1.2; }
.el-n { position: absolute; left: 8px; top: 6px; font-size: 0.75rem; font-weight: 700; color: var(--ink-2); }
.el-t--core { grid-column: span 2; aspect-ratio: auto; border-color: var(--ink); background: var(--ink); color: #ffffff; }
.el-t--core small, .el-t--core .el-n { color: rgba(255, 255, 255, 0.75); }
.el-t--core .el-n { left: auto; right: 10px; font-size: 1.125rem; color: #ffd36b; }
@media (min-width: 40em) { .el-t--core { grid-column: 4 / span 2; grid-row: 2; } }
.el-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1rem; font-size: 0.8125rem; color: var(--ink-2); }
.el-l::before { content: ""; display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.4rem; border-radius: 3px; vertical-align: -0.1em; }
.el-l--a::before { background: var(--ca); } .el-l--b::before { background: var(--cb); } .el-l--c::before { background: var(--cc); }
.el-t { transition: transform 0.2s; } .el-t:hover { transform: translateY(-3px); }
.tile--dark .focus strong { color: #ffd36b; }
.steps li:nth-child(1)::before { background: var(--ca); } .steps li:nth-child(2)::before { background: var(--cb); } .steps li:nth-child(3)::before { background: var(--cc); color: var(--ink); } .steps li:nth-child(4)::before { background: var(--ink); }
.product__visual--water { background: var(--ca-t); } .product__visual--jobs { background: var(--cb-t); } .product__visual--food { background: var(--cc-t); }