/* ==========================================================================
   Labelflow - feature micro-UIs (the right-panel animation on accordion open)
   Loaded only on /features. Tokens come from redesign.css.
   ========================================================================== */
.acc__cols{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(16px,3vw,40px);align-items:start}
@media (max-width:760px){.acc__cols{grid-template-columns:1fr}.acc__viz{order:-1}}
.acc__text>p:first-child{margin-top:0}
.acc__viz{position:sticky;top:88px}
@media (max-width:760px){.acc__viz{position:static;margin-bottom:14px}}
.fviz{border-radius:12px;background:linear-gradient(160deg,var(--card-2),#17101f);border:1px solid var(--line);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:34px 16px 16px;min-height:150px;max-width:340px}
@media (max-width:760px){.fviz{max-width:none}}
.fviz__k{position:absolute;top:12px;left:14px;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}

/* grid (back-catalog, design) */
.fz-grid{display:flex;flex-direction:column;gap:12px;width:100%}
.fz-count{font-family:var(--font-display);font-style:italic;font-size:clamp(26px,3vw,34px);color:var(--acid);line-height:1}
.fz-count span{display:block;font-family:var(--font-mono);font-size:9px;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-top:4px}
.fz-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.fz-cells i{aspect-ratio:1;border-radius:5px;background:linear-gradient(135deg,var(--plum),var(--app-violet));opacity:0;transform:scale(.5)}
.is-on .fz-cells i{animation:fz-pop .5s var(--ease) forwards}

/* list (workflow, deliverables, playbook, contacts, finance, press) */
.fz-list{display:flex;flex-direction:column;gap:7px;width:100%}
.fz-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--cream);opacity:0;transform:translateX(-8px)}
.is-on .fz-row{animation:fz-in .45s var(--ease) forwards}
.fz-dot{width:8px;height:8px;border-radius:50%;background:var(--plum);flex-shrink:0;transition:background .4s ease}
.is-on .fz-row.done .fz-dot{background:var(--acid)}
.is-on .fz-row.doneV .fz-dot{background:var(--violet-light)}
.fz-tag{margin-left:auto;font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--gray)}
.is-on .fz-row.done .fz-tag{color:var(--acid)}

/* compose (communications, promotion, mcp) */
.fz-compose{width:100%;font-size:12.5px}
.fz-pills{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.fz-pill{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;border:1px solid var(--plum);border-radius:999px;padding:3px 8px;color:var(--cream-mute)}
.fz-pill.on{border-color:var(--violet-light);color:var(--cream);background:rgba(176,127,229,.12)}
.fz-lines{display:flex;flex-direction:column;gap:6px}
.fz-line{color:var(--cream-mute);line-height:1.4;opacity:0}
.fz-line.h{font-family:var(--font-display);font-style:italic;color:var(--cream);font-size:15px}
.is-on .fz-line{animation:fz-fade .4s var(--ease) forwards}
.fz-caret{display:inline-block;width:2px;height:13px;background:var(--violet-light);vertical-align:-2px;margin-left:1px;animation:fz-blink 1s steps(1) infinite}

/* bars (analytics, audience) */
.fz-bars{width:100%;display:flex;flex-direction:column;gap:12px}
.fz-num{font-family:var(--font-mark);font-weight:600;font-size:clamp(24px,2.8vw,32px);color:var(--acid);letter-spacing:-.02em;line-height:1}
.fz-num span{display:block;font-family:var(--font-mono);font-size:9px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-top:4px}
.fz-barwrap{display:flex;align-items:flex-end;gap:7px;height:64px}
.fz-barwrap i{flex:1;background:linear-gradient(180deg,var(--violet-light),var(--violet));border-radius:3px 3px 0 0;height:4%;transform-origin:bottom}
.fz-barwrap i.acc{background:linear-gradient(180deg,var(--acid),#92ad24)}
.is-on .fz-barwrap i{animation:fz-rise .6s var(--ease) forwards}

/* chips (distribution, marquee, demo-intake, event-planner) */
.fz-chips-wrap{width:100%}
.fz-src{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--cream);margin-bottom:12px}
.fz-chips{display:flex;flex-wrap:wrap;gap:7px}
.fz-chip{font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;color:var(--cream-mute);opacity:0;transform:translateY(8px)}
.is-on .fz-chip{animation:fz-in 0.45s var(--ease) forwards}
.fz-chip.y{border-color:var(--acid);color:var(--acid)}.fz-chip.n{border-color:var(--plum);color:var(--gray)}.fz-chip.m{border-color:var(--violet-light);color:var(--violet-light)}

@keyframes fz-pop{to{opacity:1;transform:scale(1)}}
@keyframes fz-in{to{opacity:1;transform:none}}
@keyframes fz-fade{to{opacity:1}}
@keyframes fz-rise{to{height:var(--h)}}
@keyframes fz-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.fviz *{animation:none!important;opacity:1!important;transform:none!important}.is-on .fz-row.done .fz-dot{background:var(--acid)}}