/* Variant: Keys — chunky mechanical keycaps; the space bar is the call to action. Light. */
:root {
  --bg: #eef0f3; --surface: #ffffff; --muted: #e4e7ec; --ink: #1a1d23; --ink-2: #5a606b; --line: #d9dde3;
  --accent: #ff6a1a; --accent-ink: #ffffff; --accent-soft: #ffe3d1; --green-soft: #e1e8f5; --amber-soft: #fff0cf;
  --night: #1a1d23; --night-2: #262a32;
  color-scheme: light;
}
.ky { display: grid; gap: clamp(8px, 1.2vw, 14px); padding: clamp(14px, 2vw, 22px); border-radius: 26px; background: linear-gradient(#d4d8de, #c3c8d0); box-shadow: 0 40px 70px -40px rgba(26, 29, 35, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.ky-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); }
.ky-k { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1; padding: clamp(10px, 1.4vw, 16px); border-radius: 16px; background: linear-gradient(#ffffff, #eef0f3); box-shadow: 0 6px 0 #a9afb8, 0 10px 16px -6px rgba(26, 29, 35, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.05); transition: translate 0.1s, box-shadow 0.1s; }
.ky-k:hover { translate: 0 4px; box-shadow: 0 2px 0 #a9afb8, 0 4px 8px -4px rgba(26, 29, 35, 0.4); }
.ky-k b { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; line-height: 1; }
.ky-k small { font-size: clamp(0.6875rem, 1vw, 0.875rem); font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.ky-k--6 { background: linear-gradient(#ff8a47, #ff6a1a); box-shadow: 0 6px 0 #c24a0a, 0 10px 16px -6px rgba(26, 29, 35, 0.4); color: #ffffff; }
.ky-k--6 small { color: rgba(255, 255, 255, 0.85); }
.ky-k--4, .ky-k--5 { background: linear-gradient(#3a3f4a, #2a2e36); box-shadow: 0 6px 0 #14161a, 0 10px 16px -6px rgba(26, 29, 35, 0.4); color: #ffffff; }
.ky-k--4 small, .ky-k--5 small { color: #b9bec8; }
.ky-space { aspect-ratio: auto; align-items: center; justify-content: center; padding-block: 1.1rem; font-weight: 650; color: var(--ink-2); }
.tile--dark .focus strong { color: #ffa36b; }
.product__visual--water { background: #e1e8f5; } .product__visual--jobs { background: #ffe3d1; } .product__visual--food { background: #fff0cf; }