/* ---------- What you get: four benefits, each explained by a small live diagram ----------
   Each diagram sits on a charcoal instrument panel with a fine grid. At rest it
   holds a single pulse at its origin; hover or focus (.is-hot) fires that pulse
   through the diagram. Motion runs only while the section is on screen (.is-live).
   Reduced motion shows the connected states, still. */
.value__list { --vp: clamp(14px, 1.6vw, 24px); list-style: none; margin: 0 calc(-1 * var(--vp)); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(var(--rule), var(--rule)) var(--vp) 0 / calc(100% - 2 * var(--vp)) 1px no-repeat; /* top rule, aligned to the content edge */ }
/* equal padding on every column keeps the four panels identical; the list's negative margin re-aligns the outer edges */
.value__item { position: relative; padding: 28px var(--vp) 8px; border-left: 1px solid var(--rule); outline: none; }
.value__item:first-child { border-left: 0; }
.value__item::before { /* the bearing lights up along the top rule */
  content: ""; position: absolute; top: -1px; left: var(--vp); right: var(--vp); height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.value__item.is-hot::before { transform: scaleX(1); }
.value__item:focus-visible .viz { outline: 2px solid var(--accent); outline-offset: 4px; }
.value__nm { margin: 0 0 8px; font: 500 clamp(22px, 2.1vw, 30px)/1.05 var(--f-display); font-stretch: 110%; letter-spacing: -.02em; }
.value__ds { margin: 0; color: var(--fog); font-size: 15px; line-height: 1.5; text-wrap: balance; }

/* the surface: a survey grid that only shows where the cursor's light falls. value.js
   moves a fixed-size lamp (.value__lamp) with transforms and counter-moves the grid
   inside it, so the grid stays put on the page while the light travels. Nothing
   repaints on mouse move; the browser only re-composites. At rest there is no light. */
.value__lampbox {
  position: absolute; z-index: -1; pointer-events: none; overflow: hidden;
  inset: 0 calc(50% - 50vw);
  opacity: 0; transition: opacity .6s var(--ease);
}
.value.is-lit .value__lampbox { opacity: 1; }
.value__lamp {
  position: absolute; left: 0; top: 0; width: 720px; height: 720px; overflow: hidden;
  background: radial-gradient(closest-side, var(--spot), transparent 72%);
  -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 72%);
          mask: radial-gradient(closest-side, #000 10%, transparent 72%);
  will-change: transform;
}
.value__grid {
  position: absolute; left: 0; top: 0; width: 752px; height: 752px; /* one tile larger, so it can slide by up to a tile */
  background:
    linear-gradient(var(--spot-grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--spot-grid) 1px, transparent 1px) 0 0 / 32px 32px;
  will-change: transform;
}

/* the rule above the panels is a bearing scale: the four benefits are the compass's
   four quarters unrolled (N E S W), a major tick where each begins, minor ticks every 10° */
@media (min-width: 1101px) {
  .value__list {
    background:
      linear-gradient(var(--rule), var(--rule)) var(--vp) 0 / calc(100% - 2 * var(--vp)) 1px no-repeat,
      repeating-linear-gradient(90deg, var(--line-3) 0 1px, transparent 1px 25%) var(--vp) 0 / calc(100% - 2 * var(--vp)) 9px no-repeat,
      repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 2.5%) var(--vp) 0 / calc(100% - 2 * var(--vp)) 5px no-repeat;
  }
}

/* the instrument panel */
.viz {
  position: relative; aspect-ratio: 3 / 2; margin-bottom: 22px; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 12px;
  background:
    radial-gradient(70% 60% at 50% 58%, var(--light-soft), transparent 70%),
    linear-gradient(180deg, var(--sheen), transparent 35%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) -1px -1px / 16px 16px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) -1px -1px / 16px 16px,
    var(--surface);
  transition: border-color .4s;
}
.is-hot .viz { border-color: rgba(var(--accent-rgb), .3); }
.viz svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.value__pt, .viz__cap { position: absolute; top: 11px; z-index: 1; font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.value__pt { left: 13px; color: var(--fog); transition: color .3s; }
.viz__cap { right: 13px; color: var(--accent); opacity: 0; translate: 0 -3px; transition: opacity .4s, translate .4s var(--ease); }
.is-hot .value__pt { color: var(--accent); }
.is-hot .viz__cap { opacity: 1; translate: 0 0; transition-delay: 1.2s; } /* the caption lands when the chain completes */

/* shared drawing vocabulary */
.viz text, .viz .tx { font: 500 7.5px var(--f-mono); letter-spacing: .08em; fill: var(--fog); text-anchor: middle; }
.viz .ln { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz .ln--dash { stroke-dasharray: 3 4; }
.viz .ln-lit { fill: none; stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .5)); }
.viz .md rect { fill: var(--raised); stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .4s, fill .4s; }
.viz .md--core rect { fill: color-mix(in srgb, var(--accent) 8%, var(--raised)); stroke: var(--accent); }
.viz .md--core text { fill: var(--accent); }
.viz .step circle:first-child { fill: var(--raised); stroke: var(--line-2); vector-effect: non-scaling-stroke; transition: stroke .4s, fill .4s; }
.viz .step path, .viz .step circle + circle { fill: none; stroke: var(--fog); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .4s; }
.viz .step--on circle:first-child { fill: color-mix(in srgb, var(--accent) 8%, var(--raised)); /* opaque, so lines end under the node */ stroke: var(--accent); }
.viz .step--on path, .viz .step--on circle + circle { stroke: var(--accent); }
.value .viz * { animation-play-state: paused; }
.value.is-live .viz * { animation-play-state: running; }

/* ---------- the pulse system ----------
   At rest each diagram holds one heartbeat at its origin (.beat).
   Hover fires it: the beat releases one strong ring, the signal runs down
   each .wire in order (--d), every node it .reach-es lights and throws a
   .ping, and only then does the diagram's own step play. Delays live only
   on the hot state, so leaving the panel settles back at once. */
.viz .beat {
  fill: none; stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center;
  animation: vizBeat 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes vizBeat { 0% { transform: scale(1); opacity: .9; } 65%, 100% { transform: scale(1.75); opacity: 0; } }
.is-hot .viz .beat { animation: vizFire .8s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes vizFire { 0% { transform: scale(1); opacity: 1; stroke-width: 2.4; } 100% { transform: scale(2.6); opacity: 0; stroke-width: .6; } }

.viz .wire { stroke-dasharray: 1 2; stroke-dashoffset: 1; /* gap longer than the path, so no next dash peeks in at the end */
  vector-effect: none; /* non-scaling-stroke breaks pathLength, so the dash stopped short of the end */ transition: stroke-dashoffset .35s var(--ease); }
.is-hot .viz .wire { stroke-dashoffset: 0; transition: stroke-dashoffset .55s cubic-bezier(.5, 0, .2, 1) var(--d, 0s); }

.viz .ping { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-hot .viz .ping { animation: vizPing .9s ease-out var(--d, 0s) forwards; }
.is-hot .viz .ping--big { animation-name: vizPingBig; }
@keyframes vizPing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes vizPingBig { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }

.is-hot .viz .reach rect, .is-hot .viz .reach circle:first-child { stroke: var(--accent); transition-delay: var(--d, 0s); }
.is-hot .viz .reach path, .is-hot .viz .reach circle + circle { stroke: var(--bone); transition-delay: var(--d, 0s); }
.is-hot .viz .reach text { fill: var(--bone); transition: fill .4s var(--d, 0s); }

/* N — built around you: once every module is wired, data starts flowing in and a new module plugs on */
.viz .ln-flow { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 2 9; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .3s; }
.is-hot .viz .ln-flow { animation: vizFlow 1.6s linear infinite; } /* hidden at rest, so it only runs when shown */
@keyframes vizFlow { to { stroke-dashoffset: -11; } }
.is-hot .viz .ln-flow { opacity: .7; transition: opacity .6s 1s; }
.md--new { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s var(--ease); }
.md--new rect { stroke: var(--accent) !important; }
.md--new text { fill: var(--bone); }
.is-hot .md--new { opacity: 1; transform: none; transition: opacity .4s 1.25s, transform .5s var(--ease) 1.25s; }

/* E — time back: the request is passed on step by step, then the switch settles on AUTO and work runs itself */
.auto__pill { fill: var(--raised); stroke: var(--line-2); vector-effect: non-scaling-stroke; transition: fill .4s, stroke .4s; }
.auto__knob { fill: var(--fog); transition: transform .4s var(--ease), fill .3s; }
.viz .auto__lbl--man { text-anchor: end; fill: var(--bone); transition: fill .3s; }
.viz .auto__lbl--auto { text-anchor: start; transition: fill .3s; }
.auto__runner { fill: var(--accent); opacity: 0; filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), .8)); }
.step__busy { stroke-dasharray: 3 3; transform-box: fill-box; transform-origin: center; animation: vizSpin 3s linear infinite; }
@keyframes vizSpin { to { transform: rotate(360deg); } }
.is-hot .auto__pill { fill: rgba(var(--accent-rgb), .14); stroke: var(--accent); transition-delay: 1.35s; }
.is-hot .auto__knob { fill: var(--accent); transform: translateX(30px); transition: transform .5s var(--ease) 1.35s, fill .3s 1.35s; }
.is-hot .viz .auto__lbl--man { fill: var(--fog); transition-delay: 1.35s; }
.is-hot .viz .auto__lbl--auto { fill: var(--accent); transition-delay: 1.35s; }
.is-hot .step--3 circle:first-child { fill: color-mix(in srgb, var(--accent) 10%, var(--raised)); }
.is-hot .viz .step--3 path { stroke: var(--accent); }
.is-hot .auto__runner { animation: vizRun 1.6s cubic-bezier(.5, 0, .3, 1) 1.8s infinite; }
@keyframes vizRun { 0% { opacity: 0; transform: none; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(130px); } }

/* S — more clients: a compass radar. At rest the sweep turns and each lead glows as it passes;
   hover snaps the needle onto one lead and it becomes a client. Blip delays (--t) are timed to the sweep. */
.radar__tick { stroke: var(--line-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.radar__sweep { transform-box: view-box; transform-origin: 120px 82px; opacity: .8; animation: vizSweep 6s linear infinite; transition: opacity .3s; }
.radar__edge { stroke: rgba(var(--accent-rgb), .45); stroke-width: 1; vector-effect: non-scaling-stroke; }
@keyframes vizSweep { to { transform: rotate(360deg); } }
.radar__blip { fill: var(--fog); opacity: .25; animation: vizBlip 6s ease-out var(--t) infinite; transition: opacity .4s; }
@keyframes vizBlip { 0% { opacity: .95; fill: var(--bone); } 45%, 100% { opacity: .25; fill: var(--fog); } }
.radar__client { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .2s, transform .2s; }
.radar__lbl { opacity: 0; transition: opacity .2s; }
.is-hot .radar__sweep { opacity: 0; }
.is-hot .radar__blip { animation: none; opacity: .15; }
.is-hot .radar__client { opacity: 1; transform: none; transition: opacity .3s .7s, transform .5s var(--ease) .7s; }
.is-hot .radar__lbl { opacity: 1; transition: opacity .4s .95s; }
.is-hot .step--win circle:first-child { fill: color-mix(in srgb, var(--accent) 12%, var(--raised)); }
.is-hot .viz .step--win path { stroke: var(--accent); }

/* W — room to scale: the core's pulse ripples outward, filling the open slots nearest-first */
.scale__slots rect { fill: none; stroke: var(--line); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.viz .tile rect { fill: var(--raised); stroke: rgba(var(--accent-rgb), .45); vector-effect: non-scaling-stroke; }
.viz .tile path { stroke: var(--fog); stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tile--more { opacity: 0; transform: scale(.85); transform-box: fill-box; transform-origin: center; transition: opacity .25s, transform .3s var(--ease); }
.is-hot .tile--more { opacity: 1; transform: none; transition: opacity .35s var(--d), transform .45s var(--ease) var(--d); }
.is-hot .tile--more rect { animation: vizFlash .9s ease-out var(--d) both; }
@keyframes vizFlash { 0% { stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .9)); } 100% { stroke: rgba(var(--accent-rgb), .45); filter: none; } }

/* tablet: two by two */
@media (max-width: 1100px) {
  .value__list { grid-template-columns: 1fr 1fr; }
  .value__item { padding-bottom: 32px; }
  .value__item:nth-child(3) { border-left: 0; }
  .value__item:nth-child(n+3)::after { content: ""; position: absolute; top: 0; left: var(--vp); right: var(--vp); height: 1px; background: var(--rule); }
}
/* phone: one column, diagram first, same hierarchy */
@media (max-width: 560px) {
  .value__list { grid-template-columns: 1fr; margin: 0; --vp: 0px; }
  .value__item, .value__item:nth-child(n) { border-left: 0; padding: 24px 0 28px; }
  .value__item + .value__item::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule); }
  .viz { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .viz .ln-flow, .auto__runner, .radar__sweep, .radar__blip, .step__busy, .viz .ping, .tile--more rect { animation: none !important; }
  .viz .beat, .radar__sweep, .viz .ping { display: none; }
}