/* ══════════════════════════════════════════════════════════════
   THE COMPOUNDING STACK  —  landing hero visual
   Four product layers switch on in adoption order; each one
   re-moves the same three CFO meters. Finale: the shared data
   foundation lights and a pulse runs the stack.
   Layout is CSS grid throughout — nothing hand-positioned.
   ══════════════════════════════════════════════════════════════ */

.cs{
  width:100%;max-width:600px;margin:0 auto;border-radius:16px;overflow:hidden;
  background:linear-gradient(168deg,#0d1518,#080d10 60%);
  border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.02),
             inset 0 1px 0 rgba(255,255,255,.05);
  font-variant-numeric:tabular-nums
}
html[data-theme="light"] .cs{
  background:linear-gradient(168deg,#ffffff,#f4f7f6 60%);
  box-shadow:0 40px 90px -46px rgba(15,45,38,.35),inset 0 1px 0 rgba(255,255,255,.7)
}

/* ── title bar ─────────────────────────────────────────────── */
.cs-bar{
  display:flex;align-items:center;gap:9px;padding:11px 15px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.022)
}
html[data-theme="light"] .cs-bar{background:rgba(10,35,28,.025)}
.cs-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.cs-dot.r{background:#ff5f57}.cs-dot.y{background:#febc2e}.cs-dot.g{background:#28c840}
.cs-title{font-family:'Geist',system-ui,sans-serif;font-size:11.5px;font-weight:600;color:var(--muted);margin-left:6px}
.cs-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:.11em;color:#3df0b3}
.cs-live i{width:6px;height:6px;border-radius:50%;background:#3df0b3;box-shadow:0 0 8px #3df0b3;animation:csPulse 2s infinite}
@keyframes csPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── body: layers | impact ─────────────────────────────────── */
.cs-body{display:grid;grid-template-columns:1.14fr .86fr}
.cs-layers{padding:13px 13px 13px 15px;display:flex;flex-direction:column;gap:9px}
.cs-impact{
  border-left:1px solid var(--line);padding:15px 16px 13px;
  display:flex;flex-direction:column;gap:12px
}

/* ── a product layer card ──────────────────────────────────── */
.cs-layer{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  border-radius:11px;padding:10px 12px;overflow:hidden;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  opacity:.38;filter:saturate(.4);
  transition:opacity .7s ease,filter .7s ease,border-color .7s ease
}
.cs-layer.on{opacity:1;filter:none;border-color:rgba(61,240,179,.32)}
.cs-layer .ic{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;margin-top:1px;
  display:grid;place-items:center;color:var(--muted-2);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  transition:background .7s,border-color .7s,color .7s
}
html[data-theme="light"] .cs-layer .ic{background:rgba(10,35,28,.05)}
.cs-layer.on .ic{background:rgba(61,240,179,.13);border-color:rgba(61,240,179,.4);color:#3df0b3}
.cs-layer .ic svg{width:13px;height:13px}
.cs-layer .mx{min-width:0;flex:1}
.cs-layer .nm{
  display:flex;align-items:center;gap:8px;
  font-family:'Geist',system-ui,sans-serif;font-size:12px;font-weight:600;
  color:var(--text);line-height:1.2;letter-spacing:-.01em
}
.cs-layer .chip{
  margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.03em;
  padding:2.5px 7px;border-radius:999px;white-space:nowrap;
  color:#3df0b3;border:1px solid rgba(61,240,179,.35);background:rgba(61,240,179,.09);
  opacity:0;transform:scale(.7);
  transition:opacity .45s ease,transform .45s cubic-bezier(.32,1.4,.5,1)
}
.cs-layer.hit .chip{opacity:1;transform:scale(1)}
.cs-layer .ds{font-size:8.5px;color:var(--muted-2);margin-top:2px;letter-spacing:.04em}
.cs-layer .gl{
  font-size:9.5px;color:var(--muted);margin-top:6px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-height:0;opacity:0;transition:max-height .5s ease,opacity .5s ease .1s
}
.cs-layer .gl b{color:#3df0b3;font-weight:600}
.cs-layer.on .gl{max-height:16px;opacity:1}
/* finale sweep */
.cs-layer::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(61,240,179,.14) 50%,transparent 70%);
  transform:translateX(-110%)
}
.cs.compound .cs-layer::after{animation:csSweep 1s ease forwards}
.cs.compound .cs-layer:nth-child(1)::after{animation-delay:0s}
.cs.compound .cs-layer:nth-child(2)::after{animation-delay:.18s}
.cs.compound .cs-layer:nth-child(3)::after{animation-delay:.36s}
.cs.compound .cs-layer:nth-child(4)::after{animation-delay:.54s}
@keyframes csSweep{to{transform:translateX(110%)}}

/* ── shared data foundation bar ────────────────────────────── */
.cs-found{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:9px;padding:8px 10px;margin-top:1px;
  font-family:'Geist',system-ui,sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.13em;
  color:var(--muted-2);border:1px dashed var(--line);
  transition:color .8s ease,border-color .8s ease,background .8s ease
}
.cs-found i{
  width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6
}
.cs.compound .cs-found{
  color:#3df0b3;border:1px solid rgba(61,240,179,.4);background:rgba(61,240,179,.06)
}

/* ── impact meters ─────────────────────────────────────────── */
.cs-cap{font-family:'Geist',system-ui,sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.16em;color:var(--muted-2)}
.cs-meter{display:flex;flex-direction:column;gap:6px}
.cs-meter .ml{font-size:9px;color:var(--muted-2);letter-spacing:.06em;text-transform:uppercase}
.cs-meter .mv{
  font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:22px;line-height:1;
  letter-spacing:-.035em;color:var(--text);display:flex;align-items:baseline;gap:7px
}
.cs-meter .mv em{
  font-style:normal;font-size:9.5px;font-weight:700;color:#3df0b3;opacity:0;
  transform:translateY(3px);transition:opacity .4s ease,transform .4s ease
}
.cs-meter.hit .mv em{opacity:1;transform:none}
.cs-meter .tr{height:5px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
html[data-theme="light"] .cs-meter .tr{background:rgba(10,35,28,.09)}
.cs-meter .fl{
  height:100%;border-radius:3px;width:0%;
  background:linear-gradient(90deg,#10b981,#3df0b3);
  transition:width 1.1s cubic-bezier(.32,.72,0,1)
}
/* finale line */
.cs-final{
  margin-top:auto;padding-top:10px;border-top:1px solid var(--line);
  font-family:'Geist',system-ui,sans-serif;font-size:12px;font-weight:400;
  letter-spacing:-.015em;color:var(--muted);line-height:1.4;
  opacity:0;transform:translateY(5px);
  transition:opacity .8s cubic-bezier(.32,.72,0,1),transform .8s cubic-bezier(.32,.72,0,1)
}
.cs-final b{font-weight:600;color:#3df0b3}
.cs.compound .cs-final{opacity:1;transform:none}

/* ── responsive ────────────────────────────────────────────── */
@media(max-width:1080px){.cs{max-width:540px}}
@media(max-width:640px){
  .cs-body{grid-template-columns:1fr}
  .cs-impact{border-left:none;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap;gap:14px}
  .cs-cap{width:100%}
  .cs-meter{flex:1;min-width:110px}
  .cs-final{width:100%;margin-top:2px}
}
@media(prefers-reduced-motion:reduce){
  .cs-layer,.cs-layer .gl,.cs-layer .chip,.cs-meter .fl,.cs-final{transition:none}
  .cs.compound .cs-layer::after{animation:none}
}