/* s10.css — cinematic 10x motion layer (home only). Generated + verified by agent swarm, integrated. */

/* ===== s10_hero_visual ===== */
/* ============================================================
   S10 — FLAGSHIP HERO CENTERPIECE: "the dual-engine of owned growth"
   Light isometric scene for .ex-hero (on --paper). Namespaced s10-*.
   Animate transform/opacity in loops only; SVG draws are decorative.
   ============================================================ */
.s10-hero{position:relative;width:100%;max-width:1000px;margin:44px auto 0;
  height:clamp(300px,40vw,460px);isolation:isolate;
  -webkit-user-select:none;user-select:none}
.s10-hero svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.s10-hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;z-index:1;opacity:.0;transition:opacity .9s var(--ease)}
.s10-hero.s10-lit canvas{opacity:.85}

/* soft ambient floor glow behind the whole scene */
.s10-hero::before{content:"";position:absolute;left:50%;top:54%;width:78%;height:64%;
  transform:translate(-50%,-50%);z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(79,70,229,.10),rgba(79,70,229,0) 72%),
             radial-gradient(closest-side at 78% 50%,rgba(5,150,105,.10),rgba(5,150,105,0) 70%);
  filter:blur(2px)}

/* ---- floating micro-labels (real text, pinned) ---- */
.s10-lab{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.92);
  border:1px solid var(--border);box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:600 12px/1.15 'Inter',sans-serif;color:var(--ink-soft);white-space:nowrap;
  opacity:0;transform:translateY(8px) scale(.96)}
.s10-lab .s10-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.s10-lab b{font:800 12px/1.15 'Inter',sans-serif;color:var(--ink);letter-spacing:-.01em}
.s10-lab.acq{--c:var(--primary)} .s10-lab.acq .s10-dot{background:var(--primary)}
.s10-lab.ret{--c:var(--win-deep)} .s10-lab.ret .s10-dot{background:var(--win-bright)}
.s10-lab.own{--c:var(--ink)} .s10-lab.own .s10-dot{background:var(--ink-soft)}
/* placement — kept inside the safe band, mirrors the flow */
.s10-l1{left:1%;top:13%}                 /* acquisition intake */
.s10-l2{left:50%;top:6%;transform:translateX(-50%) translateY(8px) scale(.96)} /* core / own */
.s10-l3{right:1%;top:16%}                 /* retention */
.s10-l4{right:6%;bottom:9%}               /* retained % */

/* resting (reduced-motion / no-JS): everything composed & visible */
.s10-hero .s10-lab{opacity:1;transform:none}
.s10-l2{transform:translateX(-50%)}
/* keep static scene geometry visible at rest... */
.s10-flow,.s10-curve{opacity:1}
.s10-curve .s10-cline{stroke-dasharray:none}
/* ...but hide the pure-motion particles/orbit nodes at rest (they have no
   offset-path outside the motion query, so they would otherwise pile at 0,0) */
.s10-hero .s10-prospect,.s10-hero .s10-cust,
.s10-hero .s10-orbA,.s10-hero .s10-orbB,
.s10-hero .s10-cmark{opacity:0}

@media(prefers-reduced-motion:no-preference){
  /* labels rise in on reveal, staggered */
  .s10-hero .s10-lab{transition:opacity .7s var(--ease),transform .7s var(--ease-spring)}
  .s10-hero:not(.s10-lit) .s10-lab{opacity:0}
  .s10-hero:not(.s10-lit) .s10-l1{transform:translateY(8px) scale(.96)}
  .s10-hero:not(.s10-lit) .s10-l3{transform:translateY(8px) scale(.96)}
  .s10-hero:not(.s10-lit) .s10-l4{transform:translateY(8px) scale(.96)}
  .s10-hero:not(.s10-lit) .s10-l2{transform:translateX(-50%) translateY(8px) scale(.96)}
  .s10-hero.s10-lit .s10-l1{transition-delay:.15s}
  .s10-hero.s10-lit .s10-l2{transition-delay:.30s}
  .s10-hero.s10-lit .s10-l3{transition-delay:.45s}
  .s10-hero.s10-lit .s10-l4{transition-delay:.60s}

  /* core: slow pulse + the iso top-plane shimmer */
  .s10-core-grp{transform-box:fill-box;transform-origin:center;
    animation:s10pulse 6s var(--ease) infinite}
  .s10-core-halo{transform-box:fill-box;transform-origin:center;
    animation:s10halo 6s var(--ease) infinite}
  .s10-core-ring{transform-box:fill-box;transform-origin:center;
    animation:s10spin 26s linear infinite}
  .s10-core-ring.r2{animation-duration:18s;animation-direction:reverse}

  /* orbiting nodes around the core */
  .s10-orbA{offset-path:path('M 500 232 m -64 0 a 64 38 0 1 0 128 0 a 64 38 0 1 0 -128 0');
    offset-rotate:0deg;animation:s10orbit 9s linear infinite}
  .s10-orbB{offset-path:path('M 500 232 m -64 0 a 64 38 0 1 0 128 0 a 64 38 0 1 0 -128 0');
    offset-rotate:0deg;animation:s10orbit 9s linear infinite;animation-delay:-4.5s}

  /* PROSPECTS — indigo particles funneling in from the left into the core */
  .s10-prospect{offset-rotate:0deg;opacity:0;
    animation:s10intake 3.4s cubic-bezier(.5,0,.7,1) infinite}
  .s10-hp1{offset-path:path('M 30 96  C 150 120, 300 150, 470 222');animation-delay:0s}
  .s10-hp2{offset-path:path('M 18 188 C 150 190, 320 200, 470 226');animation-delay:.55s}
  .s10-hp3{offset-path:path('M 26 300 C 160 280, 320 258, 470 236');animation-delay:1.1s}
  .s10-hp4{offset-path:path('M 38 384 C 170 340, 320 282, 470 244');animation-delay:1.7s}
  .s10-hp5{offset-path:path('M 22 142 C 150 156, 310 176, 470 224');animation-delay:2.2s}
  .s10-hp6{offset-path:path('M 30 246 C 160 234, 320 230, 470 230');animation-delay:2.75s}

  /* WON CUSTOMERS — emerald particles emerge from core into retention loop */
  .s10-cust{offset-rotate:0deg;opacity:0;
    animation:s10emerge 4.2s cubic-bezier(.3,0,.4,1) infinite}
  .s10-c1{offset-path:path('M 530 232 C 600 232, 660 210, 705 232 C 740 248, 740 290, 705 300 C 660 312, 600 300, 575 270');animation-delay:0s}
  .s10-c2{offset-path:path('M 530 232 C 600 232, 660 210, 705 232 C 740 248, 740 290, 705 300 C 660 312, 600 300, 575 270');animation-delay:1.4s}
  .s10-c3{offset-path:path('M 530 232 C 600 232, 660 210, 705 232 C 740 248, 740 290, 705 300 C 660 312, 600 300, 575 270');animation-delay:2.8s}

  /* retention curve draws in, then breathes */
  .s10-cline{stroke-dasharray:360;stroke-dashoffset:360;
    animation:s10draw 2s var(--ease) .5s forwards}
  .s10-cglow{transform-box:fill-box;transform-origin:center;
    animation:s10breathe 5s var(--ease) infinite}
  /* the climbing marker dot on the curve (its opacity is driven by the keyframe) */
  .s10-cmark{offset-path:path('M 770 388 L 800 364 L 830 372 L 858 332 L 888 306 L 916 256');
    offset-rotate:0deg;animation:s10climb 5s var(--ease) infinite}

  /* faint connective flow lines pulse along their length */
  .s10-flowline{stroke-dasharray:5 11;animation:s10dash 2.4s linear infinite}
  .s10-flowline.fr{animation-direction:reverse;animation-duration:3.2s}
}

@keyframes s10pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes s10halo{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.14);opacity:.85}}
@keyframes s10spin{to{transform:rotate(360deg)}}
@keyframes s10breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.06);opacity:1}}
@keyframes s10orbit{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes s10intake{0%{offset-distance:0%;opacity:0;transform:scale(.6)}
  12%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}
  100%{offset-distance:100%;opacity:0;transform:scale(.4)}}
@keyframes s10emerge{0%{offset-distance:0%;opacity:0;transform:scale(.5)}
  10%{opacity:1;transform:scale(1)}88%{opacity:.95;transform:scale(1)}
  100%{offset-distance:100%;opacity:0;transform:scale(.85)}}
@keyframes s10draw{to{stroke-dashoffset:0}}
@keyframes s10climb{0%,8%{offset-distance:0%;opacity:0}14%{opacity:1}
  86%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes s10dash{to{stroke-dashoffset:-32}}

/* ---- mobile: keep the scene, trim non-essential chrome ---- */
@media(max-width:560px){
  .s10-hero{height:clamp(240px,62vw,320px);margin-top:32px}
  .s10-lab{font-size:11px;padding:5px 8px}.s10-lab b{font-size:11px}
  .s10-l2,.s10-l4{display:none}                 /* reduce label crowding */
  .s10-l1{left:0;top:6%}.s10-l3{right:0;top:8%}
  .s10-hero::before{width:92%}
}

/* ===== s10_funnel ===== */
.ux-s10funnel{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:22px;max-width:640px;margin:0 auto;color:var(--ink)}
.ux-s10funnel .s10-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.ux-s10funnel .s10-htitle{display:flex;align-items:center;gap:10px;min-width:0}
.ux-s10funnel .s10-htitle h4{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;margin:0;color:var(--ink)}
.ux-s10funnel .s10-live{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-deep);background:var(--primary-soft);border-radius:999px;padding:3px 9px 3px 7px}
.ux-s10funnel .s10-dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--primary)}
.ux-s10funnel .s10-dot::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--primary);transform:translate(-50%,-50%) scale(1);opacity:0;pointer-events:none}
.ux-s10funnel .s10-tf{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.ux-s10funnel .s10-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
.ux-s10funnel .s10-funnel{display:flex;flex-direction:column;gap:7px}
.ux-s10funnel .s10-row{position:relative}
.ux-s10funnel .s10-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px}
.ux-s10funnel .s10-stage{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid)}
.ux-s10funnel .s10-nums{display:flex;align-items:baseline;gap:8px}
.ux-s10funnel .s10-count{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ux-s10funnel .s10-cvr{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:var(--primary-deep);background:var(--primary-soft);border-radius:5px;padding:2px 6px;font-variant-numeric:tabular-nums}
.ux-s10funnel .s10-track{height:30px;border-radius:8px;background:var(--border-soft);overflow:hidden}
.ux-s10funnel .s10-bar{height:100%;border-radius:8px;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--primary-deep),var(--primary))}
.ux-s10funnel.in .s10-bar{transform:scaleX(1)}
.ux-s10funnel .s10-side{border-left:1px solid var(--border-soft);padding-left:18px}
.ux-s10funnel .s10-slabel{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.ux-s10funnel .s10-feed{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0;min-height:170px}
.ux-s10funnel .s10-evt{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.35;color:var(--ink-soft)}
.ux-s10funnel .s10-evt .s10-ts{flex:none;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-faint);padding-top:1px;width:38px}
.ux-s10funnel .s10-evt .s10-tick{flex:none;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-top:5px}
.ux-s10funnel .s10-evt b{font-weight:600;color:var(--primary-deep)}
@media (max-width:560px){
  .ux-s10funnel{padding:16px}
  .ux-s10funnel .s10-grid{grid-template-columns:1fr;gap:16px}
  .ux-s10funnel .s10-side{border-left:0;border-top:1px solid var(--border-soft);padding-left:0;padding-top:14px}
  .ux-s10funnel .s10-feed{min-height:0}
}
@media (prefers-reduced-motion:no-preference){
  .ux-s10funnel .s10-bar{transition:transform 1.05s var(--ease)}
  .ux-s10funnel .s10-row:nth-child(2) .s10-bar{transition-delay:.08s}
  .ux-s10funnel .s10-row:nth-child(3) .s10-bar{transition-delay:.16s}
  .ux-s10funnel .s10-row:nth-child(4) .s10-bar{transition-delay:.24s}
  .ux-s10funnel .s10-row:nth-child(5) .s10-bar{transition-delay:.32s}
  .ux-s10funnel .s10-dot::after{animation:s10fn-pulse 2.2s var(--ease) infinite}
  .ux-s10funnel .s10-evt.s10-new{animation:s10in .5s var(--ease) both}
}
@keyframes s10fn-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.45}70%{transform:translate(-50%,-50%) scale(3);opacity:0}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}
@keyframes s10in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ux-s10funnel .s10-bar{transform:scaleX(1)!important;transition:none!important}
  .ux-s10funnel .s10-dot::after{animation:none!important;opacity:0!important}
}

/* ===== s10_health ===== */
.ux-s10health{
  --s10-bg:#14151a; --s10-bg2:#101116; --s10-line:#26272f;
  --s10-txt:#e7e7ea; --s10-mut:#9a9ba3; --s10-faint:#6c6e78;
  --s10-emer:#34d399; --s10-emer-deep:#059669;
  --s10-amber:#f5b133; --s10-red:#f06f6f;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr);
  gap:1px; background:var(--s10-line);
  border:1px solid var(--s10-line); border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-xl);
  font-family:'Inter',system-ui,sans-serif;
  color:var(--s10-txt); line-height:1.45;
}.ux-s10health > *{ background:var(--s10-bg); }.ux-s10health .s10-eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--s10-faint); margin:0;
}.ux-s10health .s10-scope{
  position:relative; padding:18px 18px 16px;
  display:flex; flex-direction:column; gap:14px;
  background:
    radial-gradient(120% 90% at 50% 28%, rgba(52,211,153,.07), transparent 60%),
    var(--s10-bg);
}.ux-s10health .s10-scope-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; }.ux-s10health .s10-live{ display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--s10-emer); }.ux-s10health .s10-live .s10-dot{ position:relative; width:6px; height:6px; border-radius:50%;
  background:var(--s10-emer); box-shadow:0 0 6px 0 rgba(52,211,153,.55); }.ux-s10health .s10-live .s10-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(52,211,153,.55); opacity:0;
  transform:scale(1); pointer-events:none;
}.ux-s10health .s10-radar{ position:relative; width:100%; aspect-ratio:1/1; max-width:300px;
  margin:2px auto 0; }.ux-s10health .s10-radar svg{ display:block; width:100%; height:100%; overflow:visible; }.ux-s10health .s10-ring{ fill:none; stroke:var(--s10-line); stroke-width:1; }.ux-s10health .s10-ring.s10-ring-out{ stroke:#2e2f39; }.ux-s10health .s10-spoke{ stroke:var(--s10-line); stroke-width:1; }.ux-s10health .s10-sweep{ transform-box:fill-box; transform-origin:150px 150px;
  transform:translateZ(0); }.ux-s10health .s10-blip{ transform-box:fill-box; transform-origin:center;
  transform:translateZ(0); }.ux-s10health .s10-blip .s10-blip-core{ fill:var(--s10-emer); }.ux-s10health .s10-blip.s10-watch .s10-blip-core{ fill:var(--s10-amber); }.ux-s10health .s10-blip.s10-risk  .s10-blip-core{ fill:var(--s10-red); }.ux-s10health .s10-blip .s10-blip-ring{ fill:none; stroke:var(--s10-emer); stroke-width:1.2; opacity:0; }.ux-s10health .s10-blip.s10-watch .s10-blip-ring{ stroke:var(--s10-amber); }.ux-s10health .s10-blip.s10-risk  .s10-blip-ring{ stroke:var(--s10-red); }.ux-s10health .s10-axislabel{ font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9px; letter-spacing:.1em; fill:var(--s10-faint); }.ux-s10health .s10-scope-ft{ display:flex; gap:14px; flex-wrap:wrap; margin-top:2px; }.ux-s10health .s10-key{ display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--s10-mut); }.ux-s10health .s10-key i{ width:7px; height:7px; border-radius:50%; background:var(--s10-emer); display:inline-block; }.ux-s10health .s10-key.s10-k-watch i{ background:var(--s10-amber); }.ux-s10health .s10-key.s10-k-risk  i{ background:var(--s10-red); }.ux-s10health .s10-panel{ padding:20px 20px 18px; display:flex; flex-direction:column; gap:16px; }.ux-s10health .s10-stat{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }.ux-s10health .s10-stat b{
  font-family:var(--font-display),'Space Grotesk',sans-serif;
  font-size:46px; line-height:1; font-weight:600; letter-spacing:-.02em;
  color:#fff; font-variant-numeric:tabular-nums;
}.ux-s10health .s10-stat .s10-stat-lab{ font-size:14px; color:var(--s10-mut); }.ux-s10health .s10-stat .s10-delta{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px;
  color:var(--s10-emer); padding:2px 7px; border-radius:999px;
  background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.22);
  letter-spacing:.04em;
}.ux-s10health .s10-rows{ display:flex; flex-direction:column; }.ux-s10health .s10-row{
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto;
  gap:7px 12px; align-items:center;
  padding:13px 2px; border-top:1px solid var(--s10-line);
}.ux-s10health .s10-row:first-child{ border-top:0; }.ux-s10health .s10-acct{ display:flex; align-items:center; gap:10px; min-width:0; }.ux-s10health .s10-avatar{
  width:26px; height:26px; border-radius:8px; flex:none;
  display:grid; place-items:center;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:600;
  color:#0c0d10; background:linear-gradient(135deg,#34d399,#059669);
}.ux-s10health .s10-row.s10-watch .s10-avatar{ background:linear-gradient(135deg,#f5b133,#d98a17); }.ux-s10health .s10-row.s10-risk  .s10-avatar{ background:linear-gradient(135deg,#f06f6f,#d44848); color:#fff; }.ux-s10health .s10-acct-name{ font-size:13.5px; font-weight:500; color:var(--s10-txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.ux-s10health .s10-acct-meta{ font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.06em; color:var(--s10-faint); margin-top:1px; }.ux-s10health .s10-health{ grid-column:1; display:flex; align-items:center; gap:9px; }.ux-s10health .s10-bar{ position:relative; flex:1; height:6px; min-width:60px;
  border-radius:999px; background:var(--s10-bg2);
  box-shadow:inset 0 0 0 1px var(--s10-line); overflow:hidden; }.ux-s10health .s10-bar-fill{ position:absolute; inset:0; transform-origin:left center;
  transform:scaleX(0); border-radius:999px;
  background:linear-gradient(90deg,var(--s10-emer-deep),var(--s10-emer));
  transition:transform 1.1s var(--ease); }.ux-s10health .s10-row.s10-watch .s10-bar-fill{ background:linear-gradient(90deg,#d98a17,#f5b133); }.ux-s10health .s10-row.s10-risk  .s10-bar-fill{ background:linear-gradient(90deg,#d44848,#f06f6f); }.ux-s10health.in .s10-bar-fill{ transform:scaleX(var(--s10-w,.5)); }.ux-s10health .s10-score{ font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; font-weight:600; color:var(--s10-txt); width:24px; text-align:right;
  font-variant-numeric:tabular-nums; }.ux-s10health .s10-badge{ grid-column:2; grid-row:2; justify-self:end; align-self:center;
  display:inline-flex; align-items:center; gap:5px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
  color:var(--s10-emer); background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.24); }.ux-s10health .s10-badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }.ux-s10health .s10-row.s10-watch .s10-badge{ color:var(--s10-amber); background:rgba(245,177,51,.1); border-color:rgba(245,177,51,.26); }.ux-s10health .s10-row.s10-risk  .s10-badge{ color:var(--s10-red);  background:rgba(240,111,111,.1); border-color:rgba(240,111,111,.26); }.ux-s10health .s10-row .s10-acct{ grid-column:1; grid-row:1; }


@media (prefers-reduced-motion:no-preference){.ux-s10health .s10-live .s10-dot::after{ animation:s10h-pulse 2.4s var(--ease) infinite; }
  @keyframes s10h-pulse{
    0%{ transform:scale(1); opacity:.55; }
    70%,100%{ transform:scale(3); opacity:0; }
  }.ux-s10health .s10-blip .s10-blip-ring{ transition:opacity .15s linear; }.ux-s10health .s10-blip.s10-hit .s10-blip-ring{ opacity:.8; animation:s10-ping .9s var(--ease) 1; }.ux-s10health .s10-blip.s10-hit .s10-blip-core{ animation:s10h-flash .9s var(--ease) 1; }
  @keyframes s10-ping{ 0%{ transform:scale(.6); opacity:.85; } 100%{ transform:scale(2.6); opacity:0; } }
  @keyframes s10h-flash{ 0%{ transform:scale(1); } 35%{ transform:scale(1.5); } 100%{ transform:scale(1); } }
}


@media (prefers-reduced-motion:reduce){.ux-s10health .s10-bar-fill{ transform:scaleX(var(--s10-w,.5)); transition:none; }.ux-s10health .s10-live .s10-dot::after{ opacity:0; animation:none; }
}


@media (max-width:560px){.ux-s10health{ grid-template-columns:1fr; }.ux-s10health .s10-radar{ max-width:230px; }.ux-s10health .s10-stat b{ font-size:38px; }.ux-s10health .s10-scope-ft{ justify-content:center; }
}

/* ===== s10_sdr ===== */
.ux-s10sdr{
  --s10-pad:22px;
  width:100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-xl);
  overflow:hidden;
}.ux-s10sdr .s10-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  background:linear-gradient(180deg,var(--primary) 0%,var(--primary-deep) 100%);
  color:#fff;
}.ux-s10sdr .s10-orb{
  position:relative;flex:0 0 auto;
  width:30px;height:30px;border-radius:9px;
  background:rgba(255,255,255,.16);
  display:grid;place-items:center;
}.ux-s10sdr .s10-orb svg{width:17px;height:17px;display:block}.ux-s10sdr .s10-orb::after{
  content:"";position:absolute;right:-2px;top:-2px;
  width:9px;height:9px;border-radius:50%;
  background:var(--win-bright);
  border:2px solid var(--primary-deep);
}.ux-s10sdr .s10-htxt{display:flex;flex-direction:column;line-height:1.2;min-width:0}.ux-s10sdr .s10-htitle{font-family:var(--font-display,'Space Grotesk');font-weight:600;font-size:14px}.ux-s10sdr .s10-hsub{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.74);margin-top:2px;
}.ux-s10sdr .s10-live{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
}.ux-s10sdr .s10-live i{
  position:relative;
  width:7px;height:7px;border-radius:50%;background:var(--win-bright);
}.ux-s10sdr .s10-body{display:flex;align-items:stretch}.ux-s10sdr .s10-left{flex:1 1 60%;min-width:0;padding:18px;display:flex;flex-direction:column;gap:0}.ux-s10sdr .s10-right{
  flex:0 0 40%;max-width:300px;
  border-left:1px solid var(--border-soft);
  background:var(--paper);
  padding:18px 18px 20px;
}.ux-s10sdr .s10-thread{display:flex;flex-direction:column;gap:12px}.ux-s10sdr .s10-row{display:flex;gap:9px;max-width:88%}.ux-s10sdr .s10-row.s10-ai{align-self:flex-start}.ux-s10sdr .s10-row.s10-pr{align-self:flex-end;flex-direction:row-reverse;text-align:left}.ux-s10sdr .s10-av{
  flex:0 0 auto;width:24px;height:24px;border-radius:7px;
  display:grid;place-items:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;font-weight:600;letter-spacing:.02em;
}.ux-s10sdr .s10-ai .s10-av{background:var(--primary-soft);color:var(--primary-deep)}.ux-s10sdr .s10-pr .s10-av{background:#eef0f3;color:var(--ink-mid)}.ux-s10sdr .s10-bub{
  position:relative;
  font-size:13px;line-height:1.5;color:var(--ink-soft);
  padding:9px 12px;border-radius:13px;
}.ux-s10sdr .s10-ai .s10-bub{
  background:var(--primary);color:#fff;border-bottom-left-radius:4px;
}.ux-s10sdr .s10-pr .s10-bub{
  background:#fff;color:var(--ink-soft);
  border:1px solid var(--border);border-bottom-right-radius:4px;
}.ux-s10sdr .s10-name{
  display:block;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 4px 4px;
}.ux-s10sdr .s10-ai .s10-name{color:var(--ink-faint)}.ux-s10sdr .s10-msg{opacity:1;transform:none}.ux-s10sdr .s10-typing{display:none}.ux-s10sdr .s10-typing .s10-bub{padding:11px 13px}.ux-s10sdr .s10-dots{display:inline-flex;gap:4px;align-items:center}.ux-s10sdr .s10-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)}.ux-s10sdr .s10-booked{
  align-self:center;margin-top:4px;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:999px;
  background:var(--win-soft);border:1px solid #cdebda;
  color:var(--win-deep);font-weight:600;font-size:12.5px;
}.ux-s10sdr .s10-booked svg{width:14px;height:14px;display:block}.ux-s10sdr .s10-eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);
}.ux-s10sdr .s10-lead{display:flex;align-items:center;gap:10px;margin:12px 0 16px}.ux-s10sdr .s10-leadav{
  width:36px;height:36px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--primary) 0%,var(--win-deep) 130%);
  color:#fff;display:grid;place-items:center;
  font-family:var(--font-display,'Space Grotesk');font-weight:600;font-size:14px;
}.ux-s10sdr .s10-leadinfo{line-height:1.25;min-width:0}.ux-s10sdr .s10-leadname{font-weight:600;font-size:13.5px;color:var(--ink)}.ux-s10sdr .s10-leadco{font-size:11.5px;color:var(--ink-mid)}.ux-s10sdr .s10-scorecard{
  background:var(--card);border:1px solid var(--border-soft);
  border-radius:12px;padding:13px 14px;margin-bottom:16px;
  box-shadow:var(--shadow-lg);
}.ux-s10sdr .s10-scoretop{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}.ux-s10sdr .s10-scorelbl{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
}.ux-s10sdr .s10-scoreval{font-family:var(--font-display,'Space Grotesk');font-weight:600;font-size:22px;color:var(--ink);line-height:1}.ux-s10sdr .s10-scoreval span{font-size:13px;color:var(--ink-faint);font-weight:500}.ux-s10sdr .s10-meter{height:8px;border-radius:999px;background:#eceae4;overflow:hidden}.ux-s10sdr .s10-fill{
  height:100%;width:92%;border-radius:999px;
  background:linear-gradient(90deg,var(--primary) 0%,var(--primary-deep) 38%,var(--win-deep) 100%);
  transform-origin:left center;
}.ux-s10sdr .s10-scorefoot{
  margin-top:8px;font-size:11px;color:var(--win-deep);font-weight:500;
  display:flex;align-items:center;gap:5px;
}.ux-s10sdr .s10-scorefoot b{font-weight:700}.ux-s10sdr .s10-fields{display:flex;flex-direction:column;gap:0}.ux-s10sdr .s10-fieldhd{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:8px;
}.ux-s10sdr .s10-field{
  display:flex;align-items:center;gap:9px;
  padding:8px 0;border-top:1px solid var(--border-soft);
}.ux-s10sdr .s10-field:first-of-type{border-top:none;padding-top:0}.ux-s10sdr .s10-check{
  flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  background:var(--win-soft);display:grid;place-items:center;
}.ux-s10sdr .s10-check svg{width:10px;height:10px;display:block;color:var(--win-deep)}.ux-s10sdr .s10-fk{font-size:12px;color:var(--ink-mid);flex:1 1 auto}.ux-s10sdr .s10-fv{font-size:12.5px;font-weight:600;color:var(--ink)}.ux-s10sdr .s10-fv.s10-em{color:var(--win-deep)}.ux-s10sdr.s10-anim .s10-msg{opacity:0;transform:translateY(8px)}.ux-s10sdr.s10-anim .s10-msg.s10-show{opacity:1;transform:none}.ux-s10sdr.s10-anim .s10-booked{opacity:0;transform:translateY(8px) scale(.96)}.ux-s10sdr.s10-anim .s10-booked.s10-show{opacity:1;transform:none}.ux-s10sdr.s10-anim .s10-typing.s10-show{display:flex}.ux-s10sdr.s10-anim .s10-fill{transform:scaleX(0)}.ux-s10sdr.s10-anim .s10-fill.s10-show{transform:scaleX(1)}.ux-s10sdr.s10-anim .s10-field{opacity:0;transform:translateX(6px)}.ux-s10sdr.s10-anim .s10-field.s10-show{opacity:1;transform:none}.ux-s10sdr.s10-anim .s10-check{transform:scale(0)}.ux-s10sdr.s10-anim .s10-field.s10-show .s10-check{transform:scale(1)}

@media (prefers-reduced-motion:no-preference){.ux-s10sdr .s10-msg{transition:opacity .42s var(--ease),transform .42s var(--ease)}.ux-s10sdr .s10-booked{transition:opacity .42s var(--ease),transform .5s var(--ease-spring)}.ux-s10sdr .s10-fill{transition:transform 1.1s var(--ease)}.ux-s10sdr .s10-field{transition:opacity .4s var(--ease),transform .4s var(--ease)}.ux-s10sdr .s10-check{transition:transform .42s var(--ease-spring)}.ux-s10sdr .s10-live i::after{
    content:"";position:absolute;inset:0;border-radius:50%;
    background:var(--win-bright);
    transform:scale(1);transform-origin:center;
    animation:s10sdr-pulse 2s var(--ease) infinite;
  }.ux-s10sdr.s10-anim .s10-typing.s10-show .s10-dots i{animation:s10-bounce 1.1s var(--ease) infinite}.ux-s10sdr.s10-anim .s10-typing.s10-show .s10-dots i:nth-child(2){animation-delay:.16s}.ux-s10sdr.s10-anim .s10-typing.s10-show .s10-dots i:nth-child(3){animation-delay:.32s}
}
@keyframes s10-bounce{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4px);opacity:1}}
@keyframes s10sdr-pulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}

@media (max-width:560px){.ux-s10sdr .s10-body{flex-direction:column}.ux-s10sdr .s10-right{flex-basis:auto;max-width:none;border-left:none;border-top:1px solid var(--border-soft)}.ux-s10sdr .s10-row{max-width:96%}
}

/* ===== s10_scroll_choreography ===== */
/* ============================================================
   s10 — global scroll choreography & connective motion
   (a) section divider  (b) journey thread rail  (c) hue wash
   Appended to /assets/explainer.css. Only s10-* selectors.
   ============================================================ */

/* ---------- (a) ANIMATED SECTION DIVIDER ---------- */
.s10-divider{position:relative;width:100%;height:104px;margin:0;overflow:hidden;
  pointer-events:none;line-height:0}
.s10-div-svg{display:block;width:100%;height:104px}
.s10-div-wave{stroke-dasharray:14 10;stroke-dashoffset:0}
.s10-div-base{opacity:1}
.s10-div-pulse{opacity:0}
/* end-anchored mono tags — real, legible at rest */
.s10-div-tag{position:absolute;top:50%;transform:translateY(-50%);
  font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);padding:4px 10px;border:1px solid var(--border);border-radius:999px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.s10-div-tag.s10-a{left:18px;color:var(--primary);border-color:rgba(79,70,229,.28)}
.s10-div-tag.s10-b{right:18px;color:var(--win-deep);border-color:rgba(5,150,105,.28)}

@media(prefers-reduced-motion:no-preference){
  /* flowing dashes drift along the wave (decorative draw) */
  .s10-div-wave{animation:s10flow 2.2s linear infinite}
  @keyframes s10flow{to{stroke-dashoffset:-48}}
  /* pulse dots ride the wave path */
  .s10-div-pulse{offset-path:path('M0,60 C160,18 300,18 460,60 C620,102 760,102 920,60 C1080,18 1220,18 1380,60 C1460,82 1500,82 1540,60');
    offset-rotate:0deg}
  .s10-div-pulse.s10-p1{animation:s10ride 5.4s var(--ease) infinite,s10twinkle 5.4s linear infinite}
  .s10-div-pulse.s10-p2{animation:s10ride 5.4s var(--ease) -2.7s infinite,s10twinkle 5.4s linear -2.7s infinite}
  @keyframes s10ride{from{offset-distance:0%}to{offset-distance:100%}}
  @keyframes s10twinkle{0%,100%{opacity:0}8%,92%{opacity:.95}}
  /* gentle base shimmer — opacity only (transform/opacity rule) */
  .s10-div-base{animation:s10shim 4.5s ease-in-out infinite}
  @keyframes s10shim{0%,100%{opacity:.55}50%{opacity:1}}
}

/* ---------- (b) JOURNEY THREAD (fixed left rail) ---------- */
.s10-jrail{position:fixed;left:26px;top:18vh;bottom:18vh;width:3px;z-index:40;
  pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.s10-jrail.s10-on{opacity:1}
.s10-jrail-track{position:absolute;inset:0;border-radius:999px;
  background:var(--border)}
.s10-jrail-fill{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:999px;
  transform:scaleY(0);transform-origin:top center;
  background:linear-gradient(180deg,var(--primary) 0%,var(--primary-deep) 46%,var(--win) 58%,var(--win-deep) 100%);
  box-shadow:0 0 10px -1px rgba(79,70,229,.45)}
.s10-jrail-dot{position:absolute;left:50%;top:0;width:11px;height:11px;border-radius:50%;
  margin-left:-5.5px;margin-top:-5.5px;background:#fff;border:2.5px solid var(--primary);
  box-shadow:0 0 0 4px rgba(79,70,229,.16);transform:translateY(0)}
.s10-jrail-dot.s10-ret{border-color:var(--win-deep);box-shadow:0 0 0 4px rgba(5,150,105,.16)}
/* tick labels */
.s10-jrail-tick{position:absolute;left:16px;white-space:nowrap;
  font:600 9.5px/1.3 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);opacity:.5;transition:opacity .35s var(--ease),color .35s var(--ease)}
.s10-jrail-tick b{display:block;font-weight:700;font-size:10.5px;color:var(--ink-soft);letter-spacing:.02em}
.s10-jrail-tick.s10-t1{top:30%}.s10-jrail-tick.s10-t2{top:62%}
.s10-jrail-tick::before{content:"";position:absolute;left:-16px;top:5px;width:7px;height:7px;
  border-radius:50%;background:var(--border);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.s10-jrail-tick.s10-active{opacity:1}
.s10-jrail-tick.s10-t1.s10-active{color:var(--primary)}
.s10-jrail-tick.s10-t1.s10-active::before{background:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,.18)}
.s10-jrail-tick.s10-t2.s10-active{color:var(--win-deep)}
.s10-jrail-tick.s10-t2.s10-active::before{background:var(--win-deep);box-shadow:0 0 0 3px rgba(5,150,105,.18)}
.s10-jrail-tick.s10-active b{color:var(--ink)}

/* ---------- (c) SCROLL-LINKED HUE WASH ---------- */
.s10-hue{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 50% 0%,rgba(79,70,229,.05),transparent 60%);
  will-change:opacity}
.s10-hue.s10-ret-wash{background:radial-gradient(120% 80% at 50% 100%,rgba(5,150,105,.06),transparent 60%)}

/* hide the rail on narrow viewports (desktop-only chrome) */
@media(max-width:900px){.s10-jrail{display:none}}
@media(max-width:560px){
  .s10-divider{height:78px}.s10-div-svg{height:78px}
  .s10-div-tag{font-size:9px;padding:3px 7px;letter-spacing:.10em}
  .s10-div-tag.s10-a{left:10px}.s10-div-tag.s10-b{right:10px}
}

/* ---------- reduced motion: composed static states ---------- */
@media(prefers-reduced-motion:reduce){
  .s10-div-wave{stroke-dasharray:none;animation:none}
  .s10-div-base{opacity:1;animation:none}
  .s10-div-pulse{display:none}
  .s10-jrail-fill{transform:scaleY(1);opacity:.85}
  .s10-jrail-dot{display:none}
  .s10-jrail-tick{opacity:.9}
  .s10-hue{display:none}
}

/* ===== s10_pillar_anim_and_widget_cinematics ===== */
/* ============================================================
   s10 — PILLAR ACCENT ANIMATIONS + WIDGET REVEAL CINEMATICS
   Namespaced s10-*. Never restyles bare globals.
   Loops = transform/opacity only. Decorative SVG draws gated.
   ============================================================ */

/* ---- (a) shared pillar accent shell -------------------------- */
.s10-pillarfx{
  position:relative;
  margin-top:14px;
  height:120px;
  width:100%;
  border-radius:11px;
  border:1px solid var(--border-soft);
  background:
    linear-gradient(180deg,#fff 0%,var(--paper) 100%);
  overflow:hidden;
}
.s10-pillarfx svg{display:block;width:100%;height:100%}
.s10-pillarfx .s10-fxlabel{
  position:absolute;left:11px;top:9px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);
  pointer-events:none;
}
.s10-pillarfx.s10-acc-acq{box-shadow:inset 0 0 0 1px rgba(79,70,229,.05)}
.s10-pillarfx.s10-acc-ret{box-shadow:inset 0 0 0 1px rgba(4,120,87,.05)}

/* resting composed state: everything visible, just not moving */
.s10-acqDot{transform-box:fill-box;transform-origin:center}
.s10-acqLevel{transform-box:fill-box;transform-origin:bottom center;transform:scaleY(.62)}
.s10-retNode{transform-box:fill-box;transform-origin:center}
.s10-retCurve{
  stroke-dasharray:260;
  stroke-dashoffset:0; /* resting = fully drawn */
}
.s10-retArea{opacity:.9}

@media (prefers-reduced-motion:no-preference){
  /* ACQUISITION — three dots stream down the funnel, on stagger */
  .s10-pillarfx[data-s10fx="acq"].s10-on .s10-acqDot{
    animation:s10acqFall 2.4s var(--ease,cubic-bezier(.22,1,.36,1)) infinite;
  }
  .s10-pillarfx[data-s10fx="acq"].s10-on .s10-acqDot.d2{animation-delay:.8s}
  .s10-pillarfx[data-s10fx="acq"].s10-on .s10-acqDot.d3{animation-delay:1.6s}
  .s10-pillarfx[data-s10fx="acq"].s10-on .s10-acqDot.d4{animation-delay:.4s}
  .s10-pillarfx[data-s10fx="acq"].s10-on .s10-acqDot.d5{animation-delay:1.2s}

  .s10-pillarfx[data-s10fx="acq"].s10-on .s10-acqLevel{
    animation:s10acqFill 4.8s ease-in-out infinite;
  }

  /* RETENTION — curve draws once on reveal, nodes breathe in a loop */
  .s10-pillarfx[data-s10fx="ret"].s10-on .s10-retCurve{
    stroke-dashoffset:260;
    animation:s10retDraw 1.5s var(--ease,cubic-bezier(.22,1,.36,1)) forwards;
  }
  .s10-pillarfx[data-s10fx="ret"].s10-on .s10-retArea{
    opacity:0;
    animation:s10retArea 1.2s ease-out .5s forwards;
  }
  .s10-pillarfx[data-s10fx="ret"].s10-on .s10-retNode{
    animation:s10retPulse 2.8s ease-in-out infinite;
  }
  .s10-pillarfx[data-s10fx="ret"].s10-on .s10-retNode.n2{animation-delay:.5s}
  .s10-pillarfx[data-s10fx="ret"].s10-on .s10-retNode.n3{animation-delay:1s}
  .s10-pillarfx[data-s10fx="ret"].s10-on .s10-retNode.n4{animation-delay:1.5s}
}

@keyframes s10acqFall{
  0%{opacity:0;transform:translateY(-26px) scale(.7)}
  14%{opacity:1;transform:translateY(-10px) scale(1)}
  60%{opacity:1;transform:translateY(34px) scale(.82)}
  78%{opacity:0;transform:translateY(52px) scale(.4)}
  100%{opacity:0;transform:translateY(52px) scale(.4)}
}
@keyframes s10acqFill{
  0%,100%{transform:scaleY(.5)}
  50%{transform:scaleY(.78)}
}
@keyframes s10retDraw{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@keyframes s10retArea{from{opacity:0}to{opacity:.9}}
@keyframes s10retPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.55);opacity:.7}
}

/* ---- (b) WIDGET REVEAL CINEMATICS ---------------------------- */
/* Additive: applied to a class we toggle, NOT base .ux / .ux.in.
   The element gets perspective via its own transform; we animate
   transform/opacity only. */
.s10-cine{will-change:transform}

@media (prefers-reduced-motion:no-preference){
  /* Pre-reveal cinematic pose: subtle 3D tilt-in + lift.
     Only active until .s10-cine-in is added (one-shot). */
  .s10-cine{
    transform:perspective(1400px) rotateX(7deg) translateY(30px) scale(.985);
    transform-origin:50% 0%;
    transition:
      transform .9s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)),
      opacity .7s var(--ease,cubic-bezier(.22,1,.36,1));
  }
  .s10-cine.s10-cine-in{
    transform:perspective(1400px) rotateX(0deg) translateY(0) scale(1);
  }
  /* soft staggered child entrance for direct dashboard panels */
  .s10-cine > * {
    transition:transform .7s var(--ease,cubic-bezier(.22,1,.36,1)),
               opacity .6s var(--ease,cubic-bezier(.22,1,.36,1));
  }
  .s10-cine:not(.s10-cine-in) > *{
    opacity:0;transform:translateY(10px);
  }
  .s10-cine.s10-cine-in > *{opacity:1;transform:none}
  .s10-cine.s10-cine-in > *:nth-child(2){transition-delay:.06s}
  .s10-cine.s10-cine-in > *:nth-child(3){transition-delay:.12s}
  .s10-cine.s10-cine-in > *:nth-child(4){transition-delay:.18s}
  .s10-cine.s10-cine-in > *:nth-child(n+5){transition-delay:.24s}
}

/* Mobile: flatten the 3D tilt (perspective math gets harsh on
   narrow viewports) and shrink the accent height. */
@media (max-width:560px){
  .s10-pillarfx{height:96px;margin-top:12px}
  @media (prefers-reduced-motion:no-preference){
    .s10-cine{transform:translateY(22px) scale(.99)}
    .s10-cine.s10-cine-in{transform:none}
    /* Drop the staggered delays on mobile. No !important: these match
       the desktop nth-child specificity (0,3,1) and win by source
       order, since this block appears later in the stylesheet. */
    .s10-cine.s10-cine-in > *:nth-child(2){transition-delay:0s}
    .s10-cine.s10-cine-in > *:nth-child(3){transition-delay:0s}
    .s10-cine.s10-cine-in > *:nth-child(4){transition-delay:0s}
    .s10-cine.s10-cine-in > *:nth-child(n+5){transition-delay:0s}
  }
}

/* ===== s10_living_data ===== */
/* ============================================================
   s10 — Living Data layer (tiny CSS; JS owns all the logic)
   Only animates transform / opacity / color. All looping &
   decorative motion is wrapped in prefers-reduced-motion:no-preference.
   Resting state is fully composed and identical to the untouched widget.
   ============================================================ */

/* Tilt: consumed ONLY once the framework reveal has finished (.ux.in).
   The vars default to 0, so a resting revealed widget renders exactly
   like transform:none — this never fights explainer.js's reveal tween. */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  .ux.in.s10-tilt {
    transform:
      perspective(1200px)
      rotateX(var(--s10-rx, 0deg))
      rotateY(var(--s10-ry, 0deg))
      translate3d(var(--s10-tx, 0px), var(--s10-ty, 0px), 0);
    transition: transform .5s var(--ease, cubic-bezier(.22,1,.36,1));
    transform-style: preserve-3d;
    will-change: transform;
  }
  /* Snappier follow while the pointer is actively moving over it */
  .ux.in.s10-tilt.s10-tilting {
    transition: transform .12s linear;
  }
}

/* Brief highlight flash applied to a [data-count] when its value drifts.
   Pure transform + color, ~600ms, then the class is removed by JS. */
@media (prefers-reduced-motion: no-preference) {
  .s10-flash {
    animation: s10-flash 620ms var(--ease, cubic-bezier(.22,1,.36,1)) both;
    will-change: transform;
  }
  @keyframes s10-flash {
    0%   { transform: translateY(0)     scale(1);    color: var(--s10-flash-col, var(--primary, #4f46e5)); }
    18%  { transform: translateY(-1.5px) scale(1.06); color: var(--s10-flash-col, var(--primary, #4f46e5)); }
    100% { transform: translateY(0)     scale(1); }
  }

  /* "working" shimmer for agent rows — opacity pulse only, never layout. */
  .ux-agent.s10-working,
  .ux-agent .s10-working {
    animation: s10-working 1.6s ease-in-out infinite;
  }
  @keyframes s10-working {
    0%, 100% { opacity: 1; }
    50%      { opacity: .62; }
  }
}

/* Honor the emerald=RETENTION / indigo=ACQUISITION mapping for the flash:
   JS sets --s10-flash-col per element from the nearest brand context. */
.ux-cc .s10-flash, .ux-dl .s10-flash, .ux-eng .s10-flash { will-change: transform; }

/* Mobile (<=560px): drop the cursor tilt entirely (touch = coarse pointer
   anyway) and shorten the flash so motion stays minimal on small screens. */
@media (prefers-reduced-motion: no-preference) and (max-width: 560px) {
  .ux.in.s10-tilt {
    transform: none;
    transition: none;
  }
  .s10-flash {
    animation-duration: 420ms;
  }
}