/* Variant: Spreadsheet — the services in a spreadsheet with a formula. Light. */
:root {
  --bg: #f4f6fb; --surface: #ffffff; --muted: #eaeef6; --ink: #141b2d; --ink-2: #566079; --line: #dfe4ee;
  --accent: #1f5fd6; --accent-ink: #ffffff; --accent-soft: #e0e9ff; --green-soft: #fde6dc; --amber-soft: #fff1cc;
  --night: #141b2d; --night-2: #1f2944;
  color-scheme: light;
}
.sh { min-width: 0; overflow: hidden; border: 1px solid #cfd6e3; border-radius: 12px; background: #ffffff; box-shadow: 0 40px 70px -40px rgba(20, 27, 45, 0.4); font-size: clamp(0.75rem, 1.05vw, 0.9375rem); }
.sh-fx { display: flex; gap: 0.75rem; align-items: center; padding: 0.55rem 0.8rem; border-bottom: 1px solid #cfd6e3; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.sh-fx b { font-style: italic; color: var(--ink-2); }
.sh-fx span { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-grid { display: grid; grid-template-columns: 2.2rem minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.9fr); overflow-x: auto; }
.sh-col, .sh-rn { display: grid; place-items: center; padding: 0.3rem; background: #f1f4f9; border-right: 1px solid #dfe4ee; border-bottom: 1px solid #dfe4ee; font-size: 0.75rem; color: var(--ink-2); }
.sh-c { padding: 0.55rem 0.7rem; border-right: 1px solid #e6eaf2; border-bottom: 1px solid #e6eaf2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-c--h { font-weight: 700; background: #f8fafd; }
.sh-c--s { color: var(--accent); font-weight: 600; }
.sh-c.is-last { position: relative; outline: 2px solid var(--accent); outline-offset: -2px; background: #eef3ff; }
.sh-c.is-last::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; background: var(--accent); }
.tile--dark .focus strong { color: #9cbcff; }
.product__visual--water { background: #e0e9ff; } .product__visual--jobs { background: #fde6dc; } .product__visual--food { background: #fff1cc; }