/* ZionStar multi-page site — calm motion tuning + shared helpers.
   Load AFTER colors_and_type.css and site.css. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  background:var(--white);
  font-family:var(--font-body);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{text-decoration:none;color:inherit}
::selection{background:rgba(31,97,240,.18)}

/* ============================================================
   SIGNATURE MOTION SYSTEM — "Engineering in motion"
   Purposeful, enterprise-grade: data flows along connections,
   grids breathe, accent words shimmer. No neon / particles.
   ============================================================ */

/* Aurora drifts slowly (ambient depth on dark bands) */
.zs-aurora::before{ animation: zs-aurora-drift 26s var(--ease-out) infinite; }

/* Animated accent text — the highlighted blue words flow gently */
.zs-accent, .zs-grad-text, .zs-shine{
  background-size: 220% auto;
  animation: zs-text-flow 8s linear infinite;
}
@keyframes zs-text-flow { to { background-position: 220% center; } }

/* Reveal system — fade + rise, with directional + scale variants */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.07s; }
.reveal[data-d="2"]{ transition-delay:.14s; }
.reveal[data-d="3"]{ transition-delay:.21s; }
.reveal[data-d="4"]{ transition-delay:.28s; }
.reveal[data-d="5"]{ transition-delay:.35s; }
.reveal[data-d="6"]{ transition-delay:.42s; }
.reveal-l{ transform:translateX(-30px); }
.reveal-r{ transform:translateX(30px); }
.reveal-s{ transform:scale(.96); }
.reveal-l.in, .reveal-r.in, .reveal-s.in{ transform:none; }

/* Architectural blueprint grid that slowly drifts (engineering motif) */
.zs-flowgrid{ position:relative; isolation:isolate; }
.zs-flowgrid::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 78%);
  animation: zs-grid-pan 36s linear infinite;
}
.zs-flowgrid.on-dark::before{ background-image:
  linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
  linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px); }
@keyframes zs-grid-pan { to { background-position: 48px 48px; } }

/* Data-flow connector lines (SVG) — pulses travel along the path */
.zs-flow-line{ stroke-dasharray: 5 9; animation: zs-flow-dash 1.1s linear infinite; }
.zs-flow-line.slow{ animation-duration: 1.9s; }
@keyframes zs-flow-dash { to { stroke-dashoffset: -14; } }

/* Node pulse ring (enterprise — gentle, single ring) */
.zs-node-pulse{ transform-origin:center; animation: zs-node-pulse 3s var(--ease-out) infinite; }
@keyframes zs-node-pulse {
  0%   { opacity:.55; transform:scale(.6); }
  70%  { opacity:0;   transform:scale(1.5); }
  100% { opacity:0;   transform:scale(1.5); }
}

/* Traveling pulse dot along a connector */
.zs-travel{ animation: zs-travel 3.2s var(--ease-out) infinite; }
@keyframes zs-travel { 0%{ opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ opacity:0; } }

/* Soft float for layered hero cards (purposeful depth, not bouncy) */
.zs-drift   { animation: zs-float 7s ease-in-out infinite; }
.zs-drift-2 { animation: zs-float-sm 6s ease-in-out infinite; animation-delay:1s; }

/* Micro-interaction: icon nudge inside hovered cards/links */
.zs-mi{ transition: transform .25s var(--ease-out); }
.zs-mi-trigger:hover .zs-mi{ transform: translateX(4px); }

/* Animated counter wrapper just guarantees a fade target */
.zs-count{ font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .zs-aurora::before, .zs-flowgrid::before, .zs-flow-line, .zs-node-pulse,
  .zs-travel, .zs-drift, .zs-drift-2, .zs-accent, .zs-grad-text, .zs-shine{
    animation:none !important;
  }
}

/* Anchor-scroll offset so sticky header doesn't cover section tops */
section[id], div[id]{ scroll-margin-top:96px; }

/* Focus ring for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:none; box-shadow:var(--ring-brand);
  border-radius:var(--r-sm);
}

/* Footer link hover */
.zs-foot-link{ transition:opacity .16s, color .16s; }
.zs-foot-link:hover{ opacity:1 !important; color:var(--glow-cyan) !important; }

/* Generic hover-lift card used in plain contexts */
.zs-card-lift{ transition:transform .26s var(--ease-out), box-shadow .26s var(--ease-out), border-color .26s; }

/* Marquee-free logo strip just dims a touch */
.zs-trust-logo{ transition:color .2s, opacity .2s; }
.zs-trust-cell{ transition:background .2s; }
.zs-trust-cell:hover{ background:var(--white); }
.zs-trust-cell:hover .zs-trust-logo{ color:var(--ink-800); }
@media (max-width: 900px){
  .zs-trust-strip{ grid-template-columns:repeat(3,1fr) !important; }
  .zs-trust-strip .zs-trust-cell:nth-child(3n+1){ border-left:none !important; }
}
@media (max-width: 540px){
  .zs-trust-strip{ grid-template-columns:repeat(2,1fr) !important; }
  .zs-trust-strip .zs-trust-cell:nth-child(odd){ border-left:none !important; }
}

/* Logo marquee (dark trust cloud) */
.zs-marquee-mask{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  overflow:hidden;
}
.zs-marquee{ display:flex; width:max-content; animation:zs-marquee 34s linear infinite; }
.zs-cloud-logo{ transition:opacity .2s; }
.zs-cloud-logo:hover span{ color:#fff !important; }
.zs-cloud-logo:hover svg{ opacity:1 !important; }
@keyframes zs-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.zs-marquee-mask:hover .zs-marquee{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .zs-marquee{ animation:none; }
}
@media (max-width: 720px){
  .zs-stat-div{ display:none; }
}

/* ---------------- Team — org-spine roster ---------------- */
.zs-tm-lead-card{ display:flex; gap:20px; align-items:center; padding:26px 28px; border-radius:var(--r-2xl); background:linear-gradient(150deg, rgba(87,199,255,.1), rgba(31,97,240,.05)); border:1px solid rgba(87,199,255,.26); box-shadow:0 20px 50px -28px rgba(31,97,240,.55); }
.zs-tm-lead-card > svg{ flex-shrink:0; }

.zs-tm-spine{ position:relative; margin-top:40px; padding-left:4px; }
.zs-tm-spine::before{ content:""; position:absolute; left:26px; top:18px; bottom:30px; width:2px; background:linear-gradient(180deg, var(--azure-400), rgba(120,170,255,.12)); }
.zs-tm-lane{ position:relative; padding:0 0 40px 0; }
.zs-tm-lane:last-child{ padding-bottom:0; }
.zs-tm-lane-head{ display:flex; align-items:flex-start; gap:18px; margin-bottom:20px; }
.zs-tm-node{ width:54px; height:54px; flex-shrink:0; border-radius:15px; display:flex; align-items:center; justify-content:center; background:var(--grad-sunrise); box-shadow:var(--shadow-brand); position:relative; z-index:1; }
.zs-tm-people{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-left:72px; }
.zs-tm-person{ display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:var(--r-lg); background:rgba(255,255,255,.035); border:1px solid rgba(120,170,255,.12); transition:background .18s var(--ease-out), border-color .18s, transform .18s; }
.zs-tm-person:hover{ background:rgba(255,255,255,.07); border-color:rgba(120,170,255,.28); transform:translateY(-2px); }
.zs-tm-person > svg{ flex-shrink:0; }
.zs-tm-name{ font-size:14.5px; font-weight:700; color:#fff; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zs-tm-role{ font-size:12px; color:var(--fg-2-on-dark); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width: 1040px){
  .zs-tm-people{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 860px){
  .zs-tm-lead{ grid-template-columns:1fr !important; }
  .zs-tm-people{ grid-template-columns:repeat(2, 1fr); margin-left:0; }
  .zs-tm-spine::before{ display:none; }
}
@media (max-width: 460px){
  .zs-tm-people{ grid-template-columns:1fr; }
  .zs-tm-lead-card{ flex-direction:column; text-align:center; align-items:center; }
}
/* Recognition compact strip */
@media (max-width: 760px){
  .zs-recog-logos{ flex-wrap:wrap; }
}
/* Footer SEO resource hub (grouped inline-flow, Great Learning style) */
.zs-seo-groups{ display:flex; flex-direction:column; gap:28px; }
.zs-seo-group{ }
.zs-seo-grp-h{ display:flex; align-items:center; gap:9px; font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--fg-on-dark); margin:0 0 12px; }
.zs-seo-grp-links{ margin:0; line-height:2; font-size:13.5px; }
.zs-seo-flink{ color:var(--fg-2-on-dark); cursor:pointer; transition:color .16s; }
.zs-seo-flink:hover{ color:var(--glow-cyan); }
.zs-seo-mid{ color:var(--ink-500); margin:0 10px; user-select:none; }
/* Recognition flagship frame */
@media (max-width: 680px){
  .zs-recog-frame{ flex-direction:column; }
  .zs-recog-vline{ width:auto !important; height:1px !important; margin:18px 10px !important; background:linear-gradient(90deg, transparent, var(--border), transparent) !important; }
}

/* ---------------- Connected ecosystem diagram ---------------- */
.zs-eco-node:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg) !important; border-color:var(--azure-300) !important; }
.zs-eco-flow{ animation:zs-eco-dash 1.1s linear infinite; }
@keyframes zs-eco-dash{ to{ stroke-dashoffset:-24; } }
.zs-eco-core{ position:relative; }
.zs-eco-ring{ position:absolute; inset:-7px; border-radius:50%; border:1.5px solid rgba(87,199,255,.4); animation:zs-eco-pulse 3s ease-out infinite; }
@keyframes zs-eco-pulse{ 0%{ transform:scale(.96); opacity:.7; } 70%{ transform:scale(1.18); opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .zs-eco-flow{ animation:none; }
  .zs-eco-ring{ animation:none; opacity:.5; }
}
@media (max-width: 940px){
  .zs-eco-layout{ grid-template-columns:1fr !important; }
}
@media (max-width: 600px){
  .zs-eco-stage{ padding:24px 18px !important; }
  .zs-eco-stage > svg{ display:none; }
  .zs-eco-grid{ grid-template-columns:1fr !important; row-gap:16px !important; }
  /* stack: LMS, Portal, CORE, CRM, AI — core sits in the middle */
  .zs-eco-grid > div{ grid-column:1 !important; grid-row:auto !important; }
  .zs-eco-grid > div:nth-child(3){ order:3; }  /* core */
  .zs-eco-grid > div:nth-child(1){ order:1; }
  .zs-eco-grid > div:nth-child(2){ order:2; }
  .zs-eco-grid > div:nth-child(4){ order:4; }
  .zs-eco-grid > div:nth-child(5){ order:5; }
}

/* ---------------- Header / nav ---------------- */
.zs-navwrap{ position:sticky; top:0; z-index:50; transition:padding .3s var(--ease-out); }
.zs-navbar{
  position:relative; display:flex; align-items:center; height:64px; padding:0 14px 0 24px;
  border-radius:var(--r-full); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
  transition:background .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out), height .3s var(--ease-out);
}
/* subtle top sheen on the glass */
.zs-navbar::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%);
  opacity:.7;
}
.zs-navbar > *{ position:relative; }
.zs-navbar-scrolled{ height:56px; }
.zs-nav-desktop{ display:flex; align-items:center; gap:4px; margin-left:30px; }
.zs-nav-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.zs-burger{ display:none; margin-left:auto; background:none; border:0; cursor:pointer; color:var(--ink-800); padding:8px; border-radius:var(--r-md); transition:background .16s; }
.zs-burger:hover{ background:var(--ink-50); }
.zs-mobile-panel{ display:none; }

/* nav link: pill hover + animated underline */
.zs-navlink{ position:relative; display:flex; align-items:center; gap:5px; cursor:pointer; font-family:var(--font-body); font-size:14.5px; font-weight:600; padding:9px 14px; border-radius:var(--r-full); color:var(--ink-600); transition:color .16s, background .16s; }
.zs-navlink:hover, .zs-navlink.on{ color:var(--ink-950); background:var(--ink-50); }
.zs-navlink .zs-navlink-ul{ position:absolute; left:14px; right:14px; bottom:5px; height:2px; border-radius:2px; background:var(--grad-sunrise); transform:scaleX(0); transform-origin:center; transition:transform .25s var(--ease-out); }
.zs-navlink:hover .zs-navlink-ul, .zs-navlink.on .zs-navlink-ul{ transform:scaleX(1); }

/* sign-in ghost */
.zs-signin{ padding:9px 14px; border-radius:var(--r-full); transition:background .16s, color .16s; }
.zs-signin:hover{ background:var(--ink-50); color:var(--ink-950) !important; }

/* mega dropdown entrance + arrow */
.zs-mega{ animation:zs-mega-in .22s var(--ease-out); transform-origin:top center; }
@keyframes zs-mega-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.zs-mega-item .zs-mega-arrow{ opacity:0; transform:translateX(-4px); transition:opacity .16s, transform .16s; color:var(--azure-500); }
.zs-mega-item:hover .zs-mega-arrow{ opacity:1; transform:none; }

.zs-mobile-panel{ }

@media (max-width: 940px){
  .zs-nav-desktop{ display:none; }
  .zs-nav-actions .zs-signin{ display:none; }
  .zs-burger{ display:flex; }
  .zs-mobile-panel{
    display:block; margin:10px 14px 0; background:rgba(255,255,255,.97);
    backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:var(--r-xl);
    box-shadow:var(--shadow-xl); overflow:hidden; animation:zs-mega-in .22s var(--ease-out);
  }
  .zs-mobile-panel a{
    display:flex; align-items:center; justify-content:space-between; padding:15px 20px;
    font-size:16px; font-weight:600; color:var(--ink-800); border-bottom:1px solid var(--ink-100);
    transition:background .16s;
  }
  .zs-mobile-panel a:hover{ background:var(--ink-50); }
  .zs-mobile-panel a:last-child{ border-bottom:0; }
}

/* ---------------- Footer responsive ---------------- */
@media (max-width: 860px){
  .zs-footer-grid{ grid-template-columns:1fr 1fr !important; gap:32px !important; }
}
@media (max-width: 560px){
  .zs-footer-grid{ grid-template-columns:1fr !important; }
  .zs-footer-offices{ grid-template-columns:1fr !important; }
  .zs-footer-bottom{ flex-direction:column; gap:14px; align-items:flex-start !important; }
}

/* Generic two-col → one-col helper for narrow screens */
@media (max-width: 880px){
  .zs-stack-md{ grid-template-columns:1fr !important; }
}
/* Download lead-capture modal */
@media (max-width: 720px){
  .zs-dl-grid{ grid-template-columns:1fr !important; }
  .zs-dl-aside{ display:none !important; }
}

/* Job detail two-column → stack on mobile */
@media (max-width: 920px){
  .zs-job-grid{ grid-template-columns:1fr !important; gap:0 !important; }
  .zs-apply-sticky{ position:static !important; margin-top:40px; }
  .zs-job-mobile-apply{ display:block !important; }
}
@media (max-width: 560px){
  .zs-job-meta{ grid-template-columns:1fr !important; }
}
@media (max-width: 760px){
  .zs-stack-sm{ grid-template-columns:1fr !important; }
  .zs-grid-3{ grid-template-columns:1fr !important; }
  .zs-grid-4{ grid-template-columns:1fr 1fr !important; }
}

/* ============================================================
   HERO VISUALIZATION SYSTEM — one shared visual language,
   thirteen content-unique animated scenes. Cohesive "ecosystem"
   chrome: dark glass panels, mono labels, azure/cyan accents.
   ============================================================ */
.zs-hv-panel{
  background: linear-gradient(180deg, rgba(18,30,64,.86), rgba(10,18,42,.92));
  border:1px solid rgba(120,170,255,.18);
  border-radius:18px;
  box-shadow:0 40px 90px -34px rgba(4,10,28,.8), inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  overflow:hidden;
}
.zs-hv-bar{ display:flex; align-items:center; gap:9px; padding:11px 15px; border-bottom:1px solid rgba(120,170,255,.12); }
.zs-hv-dot{ width:8px; height:8px; border-radius:50%; }
.zs-hv-card{ background:rgba(255,255,255,.045); border:1px solid rgba(120,170,255,.14); border-radius:12px; }
.zs-hv-floed{ position:absolute; z-index:3; }

/* live status blink */
.zs-hv-blink{ animation:zs-hv-blink 1.8s var(--ease-out) infinite; }
@keyframes zs-hv-blink{ 0%,100%{opacity:1} 50%{opacity:.3} }

/* live pulse ring */
.zs-hv-pulse{ animation:zs-hv-pulse 2.8s var(--ease-out) infinite; transform-origin:center; }
@keyframes zs-hv-pulse{ 0%{transform:scale(.6);opacity:.55} 70%{transform:scale(1.7);opacity:0} 100%{opacity:0} }

/* one-shot reveals (play once, hold final state) */
.zs-hv-rise{ opacity:0; animation:zs-hv-rise .7s var(--ease-out) forwards; }
@keyframes zs-hv-rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.zs-hv-expand{ opacity:0; animation:zs-hv-expand .6s var(--ease-out) forwards; }
@keyframes zs-hv-expand{ from{opacity:0; transform:scale(.86)} to{opacity:1; transform:none} }
.zs-hv-unfold{ opacity:0; animation:zs-hv-unfold .55s var(--ease-out) forwards; transform-origin:top; }
@keyframes zs-hv-unfold{ from{opacity:0; transform:scaleY(.4) translateY(-6px)} to{opacity:1; transform:none} }

/* progress / meter fills (origin left) */
.zs-hv-fill{ transform:scaleX(0); transform-origin:left; animation:zs-hv-fill 1.4s var(--ease-out) forwards; }
@keyframes zs-hv-fill{ to{ transform:scaleX(1); } }

/* bars grow (origin bottom) */
.zs-hv-grow{ transform:scaleY(0); transform-origin:bottom; animation:zs-hv-grow .9s var(--ease-out) forwards; }
@keyframes zs-hv-grow{ to{ transform:scaleY(1); } }

/* ring (stroke-dashoffset) fill */
.zs-hv-ring{ animation:zs-hv-ring 1.6s var(--ease-out) forwards; }
@keyframes zs-hv-ring{ from{ stroke-dashoffset:var(--c,200); } to{ stroke-dashoffset:var(--o,60); } }

/* sparkline draw (ambient loop) */
.zs-hv-spark{ stroke-dasharray:260; animation:zs-hv-spark 5s var(--ease-out) infinite; }
@keyframes zs-hv-spark{ 0%{stroke-dashoffset:260} 45%{stroke-dashoffset:0} 80%{stroke-dashoffset:0} 100%{stroke-dashoffset:-260} }

/* loading shimmer sweep (ambient loop) */
.zs-hv-load{ position:relative; overflow:hidden; }
.zs-hv-load::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 20%,rgba(120,180,255,.16) 50%,transparent 80%); transform:translateX(-100%); animation:zs-hv-load 2.4s var(--ease-out) infinite; }
@keyframes zs-hv-load{ to{ transform:translateX(100%); } }

/* kanban card travel across 3 columns (ambient loop, exact via left) */
.zs-hv-kanban{ animation:zs-hv-kanban 6.5s var(--ease-out) infinite; }
@keyframes zs-hv-kanban{
  0%,12%{ left:3%; } 32%,46%{ left:36%; } 66%,100%{ left:69%; }
}

/* funnel packet drop (ambient loop) */
.zs-hv-drop{ animation:zs-hv-drop 3.4s var(--ease-out) infinite; }
@keyframes zs-hv-drop{ 0%{ transform:translateY(0); opacity:0 } 10%{opacity:1} 90%{opacity:1} 100%{ transform:translateY(var(--drop,150px)); opacity:0 } }

/* gauge needle settle (ambient slow) */
.zs-hv-needle{ transform-origin:bottom center; animation:zs-hv-needle 5s var(--ease-out) infinite; }
@keyframes zs-hv-needle{ 0%,100%{ transform:rotate(-46deg) } 50%{ transform:rotate(40deg) } }

/* gentle scene float */
.zs-hv-bob{ animation:zs-float 7s ease-in-out infinite; }
.zs-hv-bob2{ animation:zs-float-sm 6s ease-in-out infinite; animation-delay:1.2s; }

@media (prefers-reduced-motion: reduce){
  .zs-hv-blink,.zs-hv-pulse,.zs-hv-spark,.zs-hv-load::after,.zs-hv-kanban,
  .zs-hv-drop,.zs-hv-needle,.zs-hv-bob,.zs-hv-bob2{ animation:none !important; }
  .zs-hv-rise,.zs-hv-expand,.zs-hv-unfold{ opacity:1 !important; transform:none !important; animation:none !important; }
  .zs-hv-fill{ transform:scaleX(1) !important; animation:none !important; }
  .zs-hv-grow{ transform:scaleY(1) !important; animation:none !important; }
  .zs-hv-ring{ animation:none !important; stroke-dashoffset:var(--o,60) !important; }
}

/* ============ Landing-page archetype layouts ============ */
/* Ken Burns hero photo drift */
.zs-kenburns img{ animation:zs-kenburns 22s ease-out forwards; transform-origin:center; }
@keyframes zs-kenburns{ from{ transform:scale(1.12); } to{ transform:scale(1); } }

/* Bento grid (compare/solution capability cells) */
.zs-bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.zs-bento-cell{ background:rgba(255,255,255,.04); border:1px solid rgba(120,170,255,.16); border-radius:var(--r-xl); padding:26px; }
.zs-bento-cell.big{ grid-column:span 2; }
.zs-bento.zs-bento-light .zs-bento-cell{ background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
@media (max-width:820px){ .zs-bento{ grid-template-columns:repeat(2,1fr); } .zs-bento-cell.big{ grid-column:span 2; } }
@media (max-width:540px){ .zs-bento{ grid-template-columns:1fr; } .zs-bento-cell.big{ grid-column:span 1; } }

/* Outcome stacked rows */
.zs-out-row{ transition:transform .2s var(--ease-out), box-shadow .2s; }
.zs-out-row:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md) !important; }
@media (max-width:680px){ .zs-out-row{ grid-column:span 1; } }

/* Outcome process timeline (horizontal connected) */
.zs-timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.zs-timeline::before{ content:""; position:absolute; top:16px; left:8%; right:8%; height:2px; background:linear-gradient(90deg,var(--azure-200),var(--azure-400)); }
.zs-tl-item{ position:relative; text-align:center; padding:0 8px; }
.zs-tl-dot{ width:34px; height:34px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:var(--grad-sunrise); color:#fff; font-weight:700; font-size:14px; box-shadow:var(--shadow-brand); position:relative; z-index:1; }
@media (max-width:760px){ .zs-timeline{ grid-template-columns:1fr 1fr; row-gap:32px; } .zs-timeline::before{ display:none; } }
@media (max-width:440px){ .zs-timeline{ grid-template-columns:1fr; } }

/* Workflow stage ribbon (hero) */
.zs-flow-ribbon{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.zs-flow-stage{ display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.05); border:1px solid rgba(120,170,255,.2); border-radius:var(--r-full); padding:11px 18px; }
.zs-flow-num{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--glow-cyan); }
.zs-flow-arrow{ color:var(--azure-400); display:flex; }
@media (max-width:600px){ .zs-flow-arrow{ transform:rotate(90deg); } .zs-flow-ribbon{ flex-direction:column; align-items:stretch; } .zs-flow-stage{ justify-content:flex-start; } }

/* Workflow vertical pipeline */
.zs-pipeline{ position:relative; max-width:760px; }
.zs-pipe-row{ display:grid; grid-template-columns:auto 1fr; gap:20px; }
.zs-pipe-rail{ position:relative; display:flex; justify-content:center; }
.zs-pipe-rail::before{ content:""; position:absolute; top:0; bottom:-22px; width:2px; background:var(--azure-200); }
.zs-pipe-row:last-child .zs-pipe-rail::before{ display:none; }
.zs-pipe-dot{ width:42px; height:42px; border-radius:12px; background:var(--grad-sunrise); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-brand); position:relative; z-index:1; }
.zs-pipe-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 22px; box-shadow:var(--shadow-sm); margin-bottom:22px; flex:1; }

@media (prefers-reduced-motion: reduce){
  .zs-kenburns img{ animation:none; transform:none; }
}