/* ==========================================================================
   VIGNETTES                        Figma grBposJ4zm2K4F9sj0kN45 · 3:7683
   The comp's "Enterprise-grade controls" block, redrawn for the light site:
   two feature cards across the top, then a row of bare miniatures — a tiny
   piece of the real product, floating on the page with no card around it —
   each under a sentence whose first clause is the label.

   Nothing here is an image. Every miniature is markup, so it inherits the
   type, the hairlines and the chip colours the rest of the page uses, stays
   sharp at any density, and can animate itself in when it is scrolled to.
   ========================================================================== */
.zr-vig{ --vg-hair:#E7ECF3; --vg-soft:#F5F7FA; }

/* ── the feature row: one wide card, two stacked beside it ─────────────── */
.zr-vig__feature{
  display:grid; grid-template-columns:minmax(0,1.58fr) minmax(0,1fr);
  gap:16px; margin-bottom:16px;
}
.zr-vig__col{ display:grid; grid-template-rows:1fr 1fr; gap:16px; min-width:0; }
/* a feature row of two is a pair, not a headline plus a sidekick: equal
   columns, both stacking their miniature over their copy, and the copy
   pinned to the foot so the two titles line up across the gutter. */
.zr-vig__feature--pair{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.zr-vig__feature--pair .zr-vig__panel{ justify-content:space-between; gap:22px; }
.zr-vig__feature--pair .zr-vig__art{ min-height:188px; }
.zr-vig__feature--pair .vg-stat{ align-items:center; text-align:center; gap:10px; }
.zr-vig__feature--pair .vg-stat b{ font-size:40px; }
.zr-vig__feature--pair .vg-stat small{ font-size:12px; }
.zr-vig__panel{
  position:relative; overflow:hidden; min-width:0;
  display:flex; flex-direction:column; gap:18px;
  padding:26px; border-radius:22px;
  background:#fff; border:1px solid var(--vg-hair);
  box-shadow:0 10px 26px -18px rgba(23,33,54,.28);
}
.zr-vig__panel--split{ flex-direction:row; align-items:center; gap:20px; }
.zr-vig__panel--split .zr-vig__body{ flex:1 1 auto; }
.zr-vig__panel--split .zr-vig__art{ flex:0 0 auto; width:min(52%,258px); min-height:0; }
.zr-vig__panel .zr-vig__art{ margin:0; }
.zr-vig__panel h3{
  margin:0 0 8px; font-size:18px; font-weight:500; line-height:1.3;
  letter-spacing:-.018em; color:var(--pp-ink);
}
.zr-vig__panel p{ margin:0; font-size:14.5px; line-height:22px; color:var(--pp-body); text-wrap:pretty; }
.zr-vig__panel--wide .zr-vig__art{ order:-1; min-height:0; }
.zr-vig__panel--wide{ padding:28px 30px 30px; }
.zr-vig__panel .zr-vig__body{ min-width:0; }

/* ── the miniature row ─────────────────────────────────────────────────── */
.zr-vig__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(var(--cols,5), minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px) clamp(18px,2vw,30px);
}
.zr-vig__cell{ min-width:0; display:flex; flex-direction:column; gap:16px; }
/* the captions have to start on one line across the row, or the block reads
   as five unrelated columns. subgrid gives every cell the same two rows —
   art, then caption — so the tallest miniature sets the band and the text
   below it lines up. Flex column is the fallback where subgrid is missing. */
@supports (grid-template-rows:subgrid){
  .zr-vig__grid{ grid-auto-rows:auto; }
  .zr-vig__cell{ display:grid; grid-row:span 2; grid-template-rows:subgrid; }
}
/* min-width:0, or a miniature whose rows have a wide min-content — the
   Support card, the Workspace card — refuses to shrink and pushes its whole
   column past its track, squeezing the last cell in the row against the
   edge of the wrap. The rows already ellipsise; they just need permission. */
.zr-vig__art{
  display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:152px; padding:4px;
}
.zr-vig__cap{
  margin:0; font-size:14.5px; line-height:22px; color:var(--pp-dim); text-wrap:pretty;
}
.zr-vig__cap b{ font-weight:500; color:var(--pp-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   MINIATURE PRIMITIVES
   Every one is built from the same three parts: .vg-card (a hairline white
   box), .vg-row (a line inside it) and a chip or badge on the right.
   ══════════════════════════════════════════════════════════════════════════ */
.vg-card{
  width:100%; min-width:0; border:1px solid var(--vg-hair); border-radius:12px; background:#fff;
  box-shadow:0 8px 20px -14px rgba(23,33,54,.3);
  overflow:hidden;
}
.vg-card--pad{ padding:10px; }
.vg-card__hd{
  display:flex; align-items:center; gap:8px; min-width:0;
  padding:8px 10px; border-bottom:1px solid var(--vg-hair);
  font-size:11px; font-weight:500; line-height:15px; color:var(--pp-ink);
}
/* a header long enough to need two lines gets them — nowrap here clipped the
   title silently, which is worse than a wrap in a miniature this size */
.vg-card__hd{ flex-wrap:wrap; }
.vg-card__hd .zr-chip{ margin-left:auto; }
.vg-row{
  display:flex; align-items:center; gap:8px;
  padding:6.5px 10px; min-width:0;
  font-size:11px; line-height:15px; color:var(--pp-ink);
}
.vg-row + .vg-row{ border-top:1px solid #F1F4F8; }
.vg-row__t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vg-row__t small{ display:block; font-size:10px; color:var(--pp-dim); }
.vg-row > .zr-chip, .vg-row > .vg-badge, .vg-row__end{ margin-left:auto; flex:0 0 auto; }
.vg-row.is-off{ color:#A6AEBB; }
.vg-row.is-off .vg-ico{ opacity:.45; }

/* a 16px glyph slot — the sprite's engine marks, or a flat tile */
.vg-ico{ display:grid; place-items:center; width:16px; height:16px; flex:0 0 auto; color:var(--_c,#8A93A3); }
.vg-ico svg{ width:14px; height:14px; }
.vg-tile{
  display:grid; place-items:center; width:18px; height:18px; flex:0 0 auto;
  border-radius:5px; background:var(--_b,#EEF2F8); color:var(--_c,#5B6B85);
  font-size:9px; font-weight:600; line-height:1;
}
.vg-tile svg{ width:11px; height:11px; }

/* ✓ / ✗ round badges — the comp's green tick and red cross */
.vg-badge{
  display:grid; place-items:center; width:15px; height:15px; border-radius:50%;
  background:#16A34A; color:#fff;
}
.vg-badge svg{ width:9px; height:9px; }
.vg-badge--no{ background:#E5484D; }
.vg-badge--mute{ background:#D6DCE5; }

/* ── the chart miniature ───────────────────────────────────────────────── */
.vg-chart{ position:relative; width:100%; }
.vg-chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.vg-chart__grid line{ stroke:#EDF0F5; stroke-width:1; }
.vg-chart__line{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vg-chart__line--now{ stroke:#1463F5; }
.vg-chart__line--was{ stroke:#C7CEDA; }
.vg-chart__dot{ fill:#fff; stroke-width:2; }
.vg-chart__area{ fill:url(#vg-area); }
.vg-chart__lbl{ font-size:8px; fill:#98A2B3; font-family:var(--zr-font); }
.vg-chart__flag{
  position:absolute; left:36%; top:14%;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 9px; border-radius:8px; background:#fff;
  border:1px solid var(--vg-hair); box-shadow:0 8px 18px -10px rgba(23,33,54,.4);
  font-size:10.5px; font-weight:500; color:var(--pp-ink); white-space:nowrap;
}
.vg-chart__flag i{ width:6px; height:6px; border-radius:50%; background:#1463F5; }
.vg-chart__flag small{ display:block; font-weight:400; font-size:9.5px; color:var(--pp-dim); }
/* the same chart appears at ~215px in a grid cell and at ~600px in the wide
   panel; the flag has to shrink for the first or it lands on the line */
.zr-vig__cell .vg-chart__flag{ left:20%; top:2%; padding:4px 7px; font-size:9.5px; gap:4px; }
.zr-vig__cell .vg-chart__flag i{ width:5px; height:5px; }
.zr-vig__cell .vg-chart__flag small{ font-size:8.5px; }
.zr-vig__panel--split .vg-chart__flag{ left:14%; top:0; padding:4px 7px; font-size:9.5px; }

/* ── bars ──────────────────────────────────────────────────────────────── */
.vg-bars{ display:flex; align-items:flex-end; gap:12px; }
.vg-bars__b{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:7px; }
.vg-bars__v{ font-size:11px; font-weight:500; color:var(--pp-ink); }
.vg-bars__v--dim{ color:#AAB2BF; }
.vg-bars__r{
  width:100%; height:var(--h,30px); border-radius:8px;
  background:#EEF1F6; transform-origin:50% 100%;
}
.vg-bars__r--lit{ background:linear-gradient(180deg,#4C8DFF,#1463F5); }
.vg-bars__k{ font-size:10px; color:var(--pp-dim); }

/* ── medallion: a ringed badge ─────────────────────────────────────────── */
.vg-medal{ position:relative; display:grid; place-items:center; width:96px; height:96px; }
.vg-medal__ring{ position:absolute; inset:0; color:#A9B4C6; }
.vg-medal__ring svg{ width:100%; height:100%; }
.vg-medal__core{
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:#fff; border:1px solid var(--vg-hair);
  box-shadow:0 10px 22px -14px rgba(23,33,54,.5);
  color:var(--pp-ink);
}
.vg-medal__core svg{ width:22px; height:22px; }

/* ── a masked-secret pill ──────────────────────────────────────────────── */
.vg-secret{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 18px; border-radius:10px;
  background:#fff; border:1px solid var(--vg-hair);
  box-shadow:0 8px 20px -14px rgba(23,33,54,.3);
}
.vg-secret i{ width:5px; height:5px; border-radius:50%; background:#B6BECC; display:block; }

/* ── a two-node flow with a dashed frame ───────────────────────────────── */
.vg-flow{ position:relative; width:100%; padding:18px 6px; }
.vg-flow__f{ position:absolute; inset:0; border:1px dashed #D6DEE9; border-radius:10px; }
.vg-flow__f span{
  position:absolute; padding:0 5px; background:var(--zr-paper,#fff);
  font-size:9px; color:var(--pp-dim); white-space:nowrap;
}
.vg-flow__f span:nth-child(1){ left:8px;  top:-6px; }
.vg-flow__f span:nth-child(2){ right:8px; top:-6px; }
.vg-flow__f span:nth-child(3){ left:8px;  bottom:-6px; }
.vg-flow__f span:nth-child(4){ right:8px; bottom:-6px; }
.vg-flow__n{
  position:relative; display:flex; align-items:center; gap:8px;
  margin:0 auto; width:max-content; max-width:100%;
  padding:7px 10px; border-radius:9px; background:#fff;
  border:1px solid var(--vg-hair); box-shadow:0 8px 18px -12px rgba(23,33,54,.34);
  font-size:11px; color:var(--pp-ink); white-space:nowrap;
}
.vg-flow__n em{ font-style:normal; padding-left:9px; margin-left:2px; border-left:1px solid var(--vg-hair); color:var(--pp-dim); }

/* ── an approval card ──────────────────────────────────────────────────── */
.vg-ask{ width:100%; padding:11px; border-radius:12px; background:#fff; border:1px solid var(--vg-hair); box-shadow:0 10px 22px -16px rgba(23,33,54,.4); }
.vg-ask__h{ display:flex; align-items:center; gap:7px; font-size:11px; font-weight:500; color:var(--pp-ink); }
.vg-ask p{ margin:7px 0 10px; font-size:10.5px; line-height:15px; color:var(--pp-dim); }
.vg-ask__a{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.vg-ask__a b{ font-size:10.5px; font-weight:400; color:var(--pp-dim); }
.vg-ask__a span{ padding:5px 11px; border-radius:7px; background:#111418; color:#fff; font-size:10.5px; font-weight:500; }

/* ── a fading feed ─────────────────────────────────────────────────────── */
.vg-feed{ width:100%; }
.vg-feed__h{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--pp-dim); margin-bottom:9px; }
.vg-feed__h svg{ width:12px; height:12px; }
.vg-feed ul{ list-style:none; margin:0; padding:0 0 0 13px; border-left:1px solid var(--vg-hair); display:flex; flex-direction:column; gap:8px; }
.vg-feed li{ position:relative; font-size:11px; line-height:15px; color:var(--pp-ink); }
.vg-feed li::before{ content:""; position:absolute; left:-16px; top:5px; width:5px; height:5px; border-radius:50%; background:#C3CCDA; }
.vg-feed li:nth-child(3){ opacity:.55; }
.vg-feed li:nth-child(4){ opacity:.28; }
.vg-feed li:nth-child(5){ opacity:.12; }

/* ── a stack of avatars ────────────────────────────────────────────────── */
.vg-faces{ display:flex; align-items:center; }
.vg-faces span{
  display:grid; place-items:center; width:19px; height:19px; border-radius:50%;
  border:1.5px solid #fff; background:var(--_b,#DCE4F0); color:#48566E;
  font-size:8.5px; font-weight:600; margin-left:-6px;
}
.vg-faces span:first-child{ margin-left:0; }

/* ── a big number over a sparkline ─────────────────────────────────────── */
.vg-stat{ width:100%; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.vg-stat b{ font-size:26px; font-weight:500; letter-spacing:-.03em; color:var(--pp-ink); line-height:1; }
.vg-stat small{ font-size:10.5px; color:var(--pp-dim); }
.vg-stat svg{ width:100%; height:34px; overflow:visible; }

/* ══════════════════════════════════════════════════════════════════════════
   MOTION — every miniature plays itself in once its cell is on screen.
   The cells carry data-reveal, so the page's one IntersectionObserver adds
   .is-in and these take over. Transform and opacity only.
   ══════════════════════════════════════════════════════════════════════════ */
.zr-vig [data-reveal] .vg-row,
.zr-vig [data-reveal] .vg-feed li,
.zr-vig [data-reveal] .zr-vig__art > .vg-secret i{
  opacity:0; translate:0 6px;
}
.zr-vig [data-reveal].is-in .vg-row,
.zr-vig [data-reveal].is-in .vg-feed li,
.zr-vig [data-reveal].is-in .zr-vig__art > .vg-secret i{
  opacity:1; translate:0 0;
  transition:opacity .44s var(--zr-ease-out-quart) var(--_d,0ms),
             translate .52s var(--zr-ease-out-quart) var(--_d,0ms);
}
.zr-vig [data-reveal].is-in .vg-feed li:nth-child(3){ opacity:.55; }
.zr-vig [data-reveal].is-in .vg-feed li:nth-child(4){ opacity:.28; }
.zr-vig [data-reveal].is-in .vg-feed li:nth-child(5){ opacity:.12; }
.zr-vig .vg-row:nth-child(1),  .zr-vig .vg-feed li:nth-child(1), .zr-vig .vg-secret i:nth-child(1){ --_d: 60ms; }
.zr-vig .vg-row:nth-child(2),  .zr-vig .vg-feed li:nth-child(2), .zr-vig .vg-secret i:nth-child(2){ --_d:130ms; }
.zr-vig .vg-row:nth-child(3),  .zr-vig .vg-feed li:nth-child(3), .zr-vig .vg-secret i:nth-child(3){ --_d:200ms; }
.zr-vig .vg-row:nth-child(4),  .zr-vig .vg-feed li:nth-child(4), .zr-vig .vg-secret i:nth-child(4){ --_d:270ms; }
.zr-vig .vg-row:nth-child(5),  .zr-vig .vg-feed li:nth-child(5), .zr-vig .vg-secret i:nth-child(5){ --_d:340ms; }
.zr-vig .vg-row:nth-child(6),  .zr-vig .vg-secret i:nth-child(6){ --_d:410ms; }
.zr-vig .vg-secret i:nth-child(7){ --_d:480ms; }

/* the ✓ / ✗ badges land a beat after their row */
.zr-vig [data-reveal] .vg-badge{ scale:.2; opacity:0; }
.zr-vig [data-reveal].is-in .vg-badge{
  scale:1; opacity:1;
  transition:scale .42s cubic-bezier(.2,1.5,.4,1) calc(var(--_d,0ms) + 190ms),
             opacity .2s linear calc(var(--_d,0ms) + 190ms);
}

/* The stat's sparkline is stretched with preserveAspectRatio="none" and drawn
   with a non-scaling stroke, which means stroke-dasharray is measured in
   screen pixels — so a hard-coded dash length only ever matches one panel
   width, and anywhere wider the line came out in pieces. A wipe is
   width-independent and reads as the same gesture. */
.zr-vig [data-reveal] .vg-stat svg{ clip-path:inset(0 100% 0 0); }
.zr-vig [data-reveal].is-in .vg-stat svg{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.2s var(--zr-ease-out-quart) .15s;
}
.zr-vig [data-reveal] .vg-stat .vg-chart__line{ stroke-dasharray:none; stroke-dashoffset:0; }

/* the chart draws itself, then the flag drops in */
.zr-vig [data-reveal] .vg-chart__line{ stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600); }
.zr-vig [data-reveal].is-in .vg-chart__line{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s var(--zr-ease-out-quart) .1s;
}
.zr-vig [data-reveal].is-in .vg-chart__line--was{ transition-delay:0s; transition-duration:1.2s; }
.zr-vig [data-reveal] .vg-chart__dot{ opacity:0; }
.zr-vig [data-reveal].is-in .vg-chart__dot{ opacity:1; transition:opacity .3s linear var(--_d,0ms); }
.zr-vig .vg-chart__dot:nth-of-type(1){ --_d:.5s } .zr-vig .vg-chart__dot:nth-of-type(2){ --_d:.72s }
.zr-vig .vg-chart__dot:nth-of-type(3){ --_d:.94s } .zr-vig .vg-chart__dot:nth-of-type(4){ --_d:1.16s }
.zr-vig .vg-chart__dot:nth-of-type(5){ --_d:1.38s }
.zr-vig [data-reveal] .vg-chart__flag{ opacity:0; translate:0 -8px; }
.zr-vig [data-reveal].is-in .vg-chart__flag{
  opacity:1; translate:0 0;
  transition:opacity .5s var(--zr-ease-out-quart) 1s, translate .6s cubic-bezier(.2,1.3,.4,1) 1s;
}

/* bars grow out of the baseline */
.zr-vig [data-reveal] .vg-bars__r{ scale:1 .04; }
.zr-vig [data-reveal].is-in .vg-bars__r{
  scale:1 1; transition:scale .72s cubic-bezier(.2,1.1,.35,1) var(--_d,0ms);
}
.zr-vig .vg-bars__b:nth-child(1) .vg-bars__r{ --_d: 80ms; }
.zr-vig .vg-bars__b:nth-child(2) .vg-bars__r{ --_d:200ms; }
.zr-vig .vg-bars__b:nth-child(3) .vg-bars__r{ --_d:320ms; }

/* the medallion's ring turns, slowly and for ever */
.zr-vig [data-reveal].is-in .vg-medal__ring{ animation:vg-spin 46s linear infinite; }
@keyframes vg-spin{ to{ rotate:360deg; } }
.zr-vig [data-reveal] .vg-medal__core{ scale:.7; opacity:0; }
.zr-vig [data-reveal].is-in .vg-medal__core{ scale:1; opacity:1; transition:scale .6s cubic-bezier(.2,1.4,.4,1) .12s, opacity .4s linear .12s; }

/* the flow's two nodes arrive left then right */
.zr-vig [data-reveal] .vg-flow__n{ opacity:0; translate:0 6px; }
.zr-vig [data-reveal].is-in .vg-flow__n{ opacity:1; translate:0 0; transition:opacity .5s var(--zr-ease-out-quart) var(--_d,0ms), translate .56s var(--zr-ease-out-quart) var(--_d,0ms); }
.zr-vig .vg-flow__n:nth-of-type(1){ --_d:120ms } .zr-vig .vg-flow__n:nth-of-type(2){ --_d:280ms }
.zr-vig [data-reveal] .vg-flow__f{ opacity:0; }
.zr-vig [data-reveal].is-in .vg-flow__f{ opacity:1; transition:opacity .6s linear .05s; }

/* the approval card's buttons settle last */
.zr-vig [data-reveal] .vg-ask__a{ opacity:0; translate:0 5px; }
.zr-vig [data-reveal].is-in .vg-ask__a{ opacity:1; translate:0 0; transition:opacity .5s var(--zr-ease-out-quart) .34s, translate .5s var(--zr-ease-out-quart) .34s; }

/* the whole miniature lifts a hair when you point at its cell */
.zr-vig__cell .zr-vig__art > *{ transition:translate .34s var(--zr-ease-out-quart), box-shadow .34s var(--zr-ease-out-quart); }
.zr-vig__cell:hover .zr-vig__art > *{ translate:0 -3px; }

@media (prefers-reduced-motion:reduce){
  .zr-vig *{ animation:none !important; }
  .zr-vig [data-reveal] .vg-row,
  .zr-vig [data-reveal] .vg-feed li,
  .zr-vig [data-reveal] .vg-badge,
  .zr-vig [data-reveal] .vg-flow__n,
  .zr-vig [data-reveal] .vg-flow__f,
  .zr-vig [data-reveal] .vg-ask__a,
  .zr-vig [data-reveal] .vg-chart__flag,
  .zr-vig [data-reveal] .vg-chart__dot,
  .zr-vig [data-reveal] .vg-medal__core,
  .zr-vig [data-reveal] .vg-secret i{ opacity:1; translate:none; scale:none; }
  .zr-vig [data-reveal] .vg-bars__r{ scale:1 1; }
  .zr-vig [data-reveal] .vg-chart__line{ stroke-dasharray:none; stroke-dashoffset:0; }
  .zr-vig [data-reveal] .vg-stat svg{ clip-path:none; }
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .zr-vig__grid{ --cols:3 !important; }
  .zr-vig__feature{ grid-template-columns:minmax(0,1fr); }
  .zr-vig__feature--pair{ grid-template-columns:minmax(0,1fr); }
  .zr-vig__col{ grid-template-rows:auto auto; }
}
@media (max-width:720px){
  .zr-vig__grid{ --cols:2 !important; gap:26px 18px; }
  .zr-vig__panel{ padding:20px; border-radius:18px; }
  .zr-vig__panel--split{ flex-direction:column; align-items:stretch; }
  .zr-vig__panel--split .zr-vig__art{ width:100%; }
  .zr-vig__art{ min-height:112px; }
}
@media (max-width:460px){
  .zr-vig__grid{ --cols:1 !important; }
}