/* ==========================================================================
   Growack — rich graphics layer (loaded LAST, after refine.css)
   Purpose: load the site with mature, illustrative product visuals — the way
   airops / unmuted / dapper do with real product screenshots — but built from
   HTML/CSS/SVG (no fabricated client assets). These depict the KIND of systems
   Growack builds (dashboards, pipeline boards, scoring, attribution), clearly
   stylised, never claiming to be a specific client's screen.
   Brand only: DM Sans + Inter, orange #f97316/#c2410c + teal #0f766e + slate.
   ========================================================================== */

/* ==========================================================================
   12px FLOOR — every micro-label in this file (see the sweep note in the site
   CSS) shipped between 8.96px and 11.9px. The declarations below were raised to
   the 0.75rem floor in place, and the change was measured first: applying it to
   all 31 label classes across 10 mockup-heavy pages produced ZERO new
   scrollWidth/scrollHeight overflow in .app-window, .webframe, .uw-panel,
   .kan-col, .gfx-chip, .uw-kpi, .uw-row and .dataflow, so the components absorb
   the larger type rather than clipping it.
   ONE residual is deliberate: .app-window carries
   `transform: perspective(1600px) rotateY(-7deg) rotateX(3deg)`, a 3D tilt that
   scales its contents to ~0.82. Inside that box the DELIVERED size stays under
   12px however the CSS is declared. That is a picture of a screen held at an
   angle, not body copy, and compensating a font size for a perspective
   projection would only distort the illustration.
   ========================================================================== */
/* ---------- 0. Shared UI palette (slate chrome, from the brand family) ---- */
:root {
  --ui-bg: #ffffff;
  --ui-panel: #f8fafc;
  /* PALETTE ALIGNMENT. These five were drift: #E9EDF3 / #EEF2F7 collapse onto the
     house border token #E2E8F0; #0F172A onto the house ink #111827; and #64748B /
     #94A3B8 onto the house AA-safe grey #626977. --ui-faint mattered most: it is
     the text colour of every micro-label in the mockup components (.ph-meta,
     .kc-count, .wf-url, .r-score--lo, .uw-row .r-name span, the SVG .clab chart
     labels) and at #94A3B8 on the white panel it measured 2.56:1 at 9.6-13.8px,
     i.e. the smallest type on the site carried the weakest contrast. #626977
     reaches 4.9:1 on white. */
  --ui-line: #e2e8f0;
  --ui-line-2: #e2e8f0;
  --ui-ink: #111827;
  --ui-mut: #626977;
  --ui-faint: #626977;
  --ui-radius: 16px;
  --ui-shadow: 0 40px 80px -32px rgba(15, 23, 42, 0.28), 0 16px 32px -20px rgba(15, 23, 42, 0.22);
}

/* ---------- 1. App-window chrome (the "product" frame) ------------------- */
.app-frame { position: relative; isolation: isolate; }
/* soft brand glow behind the window for depth */
.app-frame::before {
  content: ""; position: absolute; z-index: -1; inset: -8% -6% -12% -6%;
  background:
    radial-gradient(45% 40% at 78% 12%, rgba(249, 115, 22, 0.20), transparent 70%),
    radial-gradient(42% 42% at 12% 92%, rgba(15, 118, 110, 0.16), transparent 70%);
  filter: blur(6px);
}
.app-window {
  background: var(--ui-bg);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  overflow: hidden;
  color: var(--ui-ink);
  font-family: var(--font-body);
  transform: perspective(1600px) rotateY(-7deg) rotateX(3deg) rotate(0.5deg);
  transform-origin: center;
  transition: transform 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}
.app-frame:hover .app-window { transform: perspective(1600px) rotateY(-3deg) rotateX(1.5deg); }
.app-window--flat { transform: none; }
.app-frame:hover .app-window--flat { transform: none; }
@media (max-width: 860px) { .app-window { transform: none; } .app-frame:hover .app-window { transform: none; } }

.aw-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--ui-line);
  background: linear-gradient(var(--ui-panel), #fff);
}
.aw-dots { display: inline-flex; gap: 6px; }
/* The fake browser chrome carried a literal traffic light: #FCA5A5 / #FCD34D /
   #86EFAC. Those were the only green pixels in the whole UI and none of the
   three is a house colour. Replaced with three steps of the house neutral ramp,
   which reads as window chrome without importing a second colour system. */
.aw-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); display: block; }
.aw-dots i:nth-child(1) { background: #cbd5e1; }
.aw-dots i:nth-child(2) { background: var(--color-border); }
.aw-dots i:nth-child(3) { background: var(--color-border); }
.aw-title { font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; color: var(--ui-ink); }
.aw-tab { font-size: 0.75rem; color: var(--ui-mut); padding: 3px 9px; border-radius: 999px; background: var(--ui-panel); }
.aw-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--color-teal); }
.aw-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-teal); box-shadow: 0 0 0 0 rgba(15,118,110,0.5); animation: aw-pulse 2.4s ease-out infinite; }
@keyframes aw-pulse { 0%{box-shadow:0 0 0 0 rgba(15,118,110,0.45)} 70%{box-shadow:0 0 0 6px rgba(15,118,110,0)} 100%{box-shadow:0 0 0 0 rgba(15,118,110,0)} }
@media (prefers-reduced-motion: reduce) { .aw-live::before { animation: none; } }
.aw-body { padding: 16px; display: grid; gap: 14px; }

/* ---------- 2. Dashboard internals -------------------------------------- */
.uw-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.uw-kpi { border: 1px solid var(--ui-line); border-radius: 11px; padding: 11px 12px; background: #fff; position: relative; overflow: hidden; }
.uw-kpi .k-lab { display: block; font-size: 0.75rem; color: var(--ui-mut); letter-spacing: 0.01em; }
.uw-kpi .k-num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--ui-ink); margin-top: 3px; }
.uw-kpi .k-delta { font-size: 0.75rem; font-weight: 700; color: var(--color-teal); display: inline-flex; align-items: center; gap: 3px; }
.uw-kpi .k-delta::before { content: "▲"; font-size: 0.75rem; }
.uw-kpi--accent .k-num { color: var(--color-primary); }
.uw-kpi .k-spark { position: absolute; right: 8px; bottom: 8px; width: 46px; height: 20px; opacity: 0.9; }

.uw-panel { border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; padding: 13px 14px; }
.uw-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.uw-panel-head .ph-title { font-family: var(--font-heading); font-weight: 600; font-size: 0.78rem; }
.uw-panel-head .ph-meta { font-size: 0.75rem; color: var(--ui-faint); }
.uw-chart { width: 100%; height: auto; display: block; }
.uw-chart .cbar { fill: var(--color-primary-bright); }
.uw-chart .cbar--muted { fill: #cbd5e1; }
.uw-chart .cgrid { stroke: var(--ui-line-2); stroke-width: 1; }
.uw-chart .clab { fill: var(--ui-faint); font: 600 12px var(--font-body); }  /* size owned by --clab below */

/* Pipeline stage strip */
.uw-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.uw-stage { border: 1px solid var(--ui-line); border-radius: 10px; padding: 9px 10px; background: #fff; }
.uw-stage .s-lab { font-size: 0.75rem; color: var(--ui-mut); }
.uw-stage .s-num { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--ui-ink); margin-top: 2px; }
.uw-stage .s-bar { display: block; height: 4px; border-radius: 2px; margin-top: 7px; background: var(--color-primary-bright); }
.uw-stage:nth-child(1) .s-bar { background: #cbd5e1; width: 100%; }
.uw-stage:nth-child(2) .s-bar { background: #7dd3c8; width: 74%; }
.uw-stage:nth-child(3) .s-bar { background: var(--color-teal); width: 52%; }
.uw-stage:nth-child(4) .s-bar { background: var(--color-primary-bright); width: 34%; }

/* ---------- 3. Kanban pipeline board ------------------------------------ */
.uw-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.kan-col { background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 11px; padding: 9px 8px; }
.kan-col .kc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kan-col .kc-name { font-size: 0.75rem; font-weight: 700; color: var(--ui-mut); text-transform: uppercase; letter-spacing: 0.05em; }
.kan-col .kc-count { font-size: 0.75rem; font-weight: 700; color: var(--ui-faint); background: #fff; border: 1px solid var(--ui-line); border-radius: 999px; padding: 1px 7px; }
.kan-card { background: #fff; border: 1px solid var(--ui-line); border-radius: 8px; padding: 8px 9px; margin-bottom: 7px; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.kan-card:last-child { margin-bottom: 0; }
.kan-card .kk-top { display: flex; align-items: center; gap: 6px; }
.kan-card .kk-av { width: 16px; height: 16px; border-radius: 5px; flex: none; background: linear-gradient(135deg, var(--color-primary-soft), var(--color-teal-soft)); }
.kan-card .kk-co { font-size: 0.75rem; font-weight: 600; color: var(--ui-ink); }
.kan-card .kk-val { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; color: var(--ui-ink); margin-top: 5px; }
.kan-col:nth-child(4) .kan-card .kk-val { color: var(--color-teal); }

/* ---------- 4. Lead-scoring / routing list ------------------------------ */
.uw-rows { display: grid; gap: 7px; }
.uw-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; border: 1px solid var(--ui-line); border-radius: 10px; padding: 8px 11px; background: #fff; }
.uw-row .r-av { width: 22px; height: 22px; border-radius: 7px; flex: none; background: linear-gradient(135deg, var(--color-primary-soft), var(--color-teal-soft)); }
.uw-row .r-name { font-size: 0.75rem; font-weight: 600; color: var(--ui-ink); }
.uw-row .r-name span { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ui-faint); }
.uw-row .r-score { font-family: var(--font-heading); font-weight: 800; font-size: 0.86rem; }
.uw-row .r-score--hi { color: var(--color-teal); }
.uw-row .r-score--mid { color: var(--color-primary); }
.uw-row .r-score--lo { color: var(--ui-faint); }
.uw-row .r-tag { font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.uw-row .r-tag--route { background: var(--color-teal-soft); color: var(--color-teal); }
.uw-row .r-tag--nurture { background: var(--color-primary-soft); color: var(--color-primary); }

/* ---------- 5. Attribution / channel bars ------------------------------- */
.uw-attr { display: grid; gap: 9px; }
.attr-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; }
.attr-row .a-ch { font-size: 0.75rem; font-weight: 600; color: var(--ui-ink); }
.attr-row .a-track { height: 9px; border-radius: 5px; background: var(--ui-panel); overflow: hidden; }
.attr-row .a-fill { display: block; height: 100%; border-radius: 5px; background: var(--color-primary-bright); }
.attr-row:nth-child(2) .a-fill { background: var(--color-teal); }
.attr-row:nth-child(4) .a-fill { background: #7dd3c8; }
.attr-row .a-val { font-family: var(--font-heading); font-weight: 700; font-size: 0.75rem; color: var(--ui-ink); }
/* Bar fills are always visible at their width (no is-in gating that can strand them at 0). */
.attr-row .a-fill { width: var(--w, 60%); transition: width 0.9s var(--ease-out, ease); }

/* ---------- 6. Floating accent chips over a mockup ---------------------- */
.gfx-chip {
  position: absolute; z-index: 3;
  background: #fff; border: 1px solid var(--ui-line);
  border-radius: 12px; box-shadow: 0 18px 34px -16px rgba(15,23,42,0.32);
  padding: 9px 13px; display: flex; align-items: center; gap: 9px;
  font-family: var(--font-body);
}
.gfx-chip .gc-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); }
.gfx-chip .gc-ic--teal { background: var(--color-teal-soft); color: var(--color-teal); }
.gfx-chip .gc-ic svg { width: 17px; height: 17px; }
.gfx-chip .gc-num { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1rem; line-height: 1; color: var(--ui-ink); }
.gfx-chip .gc-lab { display: block; font-size: 0.75rem; color: var(--ui-mut); margin-top: 2px; }
.gfx-chip--tr { top: -20px; right: -18px; }
.gfx-chip--bl { bottom: -18px; left: -20px; }
.js .gfx-chip { animation: gfx-float 6s ease-in-out infinite; }
.js .gfx-chip--bl { animation-delay: 1.4s; }
@keyframes gfx-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@media (prefers-reduced-motion: reduce) { .js .gfx-chip { animation: none; } }
@media (max-width: 520px) { .gfx-chip--tr { right: 2px; top: -14px; } .gfx-chip--bl { left: 2px; bottom: -12px; } }

/* ---------- 7. Revenue-engine flow diagram ------------------------------ */
.engine { display: grid; gap: 0; }
.engine-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* ---------- 8. Funnel visual -------------------------------------------- */
.funnel { display: grid; gap: 8px; max-width: 460px; }
.funnel-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 12px; }
.funnel-row .f-lab { font-size: var(--fs-sm); color: var(--color-text-muted); }
.funnel-bar { height: 40px; border-radius: 9px; display: flex; align-items: center; padding-left: 14px; color: #fff; font-family: var(--font-heading); font-weight: 700; }
.funnel-row:nth-child(1) .funnel-bar { background: var(--color-teal); width: 100%; }
.funnel-row:nth-child(2) .funnel-bar { background: #14807a; width: 72%; }
.funnel-row:nth-child(3) .funnel-bar { background: var(--color-primary-hover); width: 46%; }
.funnel-row:nth-child(4) .funnel-bar { background: var(--color-primary-bright); width: 26%; }
.funnel-row .f-conv { font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }

/* ---------- 9. Section texture / depth (mature backdrops) ---------------- */
.mesh { position: relative; isolation: isolate; overflow: clip; }
.mesh::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 55% at 8% 0%, rgba(249,115,22,0.07), transparent 70%),
    radial-gradient(40% 55% at 100% 30%, rgba(15,118,110,0.07), transparent 70%);
}
.grid-tex { position: relative; isolation: isolate; }
.grid-tex::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(15,23,42,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
}
.section--dark .grid-tex::before {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* ---------- 10. Logo/stack row as clean wordmark chips (no fake glyphs) -- */
.stackline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.stack-chip {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem;
  color: var(--ui-mut); background: var(--color-surface); border: 1px solid var(--color-border);   /* was #475569 */
  padding: 7px 14px; border-radius: 999px;
}
.section--dark .stack-chip { color: #cbd5e1; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }

/* ==========================================================================
   VARIED CHART & VISUAL PRIMITIVES — so no two pages share a chart type.
   Line/area · donut · radial gauges · data-flow · web-preview · roadmap · heat.
   ========================================================================== */

/* ---- Line / area trend chart ------------------------------------------- */
.uw-area { width: 100%; height: auto; display: block; }
.uw-area .ar-fill { fill: var(--color-primary-bright); opacity: 0.12; }
.uw-area .ar-fill--teal { fill: var(--color-teal); opacity: 0.12; }
.uw-area .ar-line { fill: none; stroke: var(--color-primary-bright); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.uw-area .ar-line--teal { stroke: var(--color-teal); }
.uw-area .ar-dot { fill: #fff; stroke: var(--color-primary-bright); stroke-width: 2.5; }
.uw-area .ar-dot--teal { stroke: var(--color-teal); }
.uw-area .cgrid { stroke: var(--ui-line-2); stroke-width: 1; }
.uw-area .clab { fill: var(--ui-faint); font: 600 12px var(--font-body); }   /* size owned by --clab below */
/* (area line draw-in handled by the scroll-animation layer at the end of file) */

/* ---- Donut / composition chart ----------------------------------------- */
.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut-vis { position: relative; width: 116px; height: 116px; flex: none; }
.donut { width: 116px; height: 116px; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 15; }
.donut .d-track { stroke: var(--ui-line); }
.donut .d-seg { stroke-linecap: round; }
.donut .d-seg--1 { stroke: var(--color-primary-bright); }
.donut .d-seg--2 { stroke: var(--color-teal); }
.donut .d-seg--3 { stroke: #7dd3c8; }
.donut .d-seg--4 { stroke: #fdba74; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; }
.donut-center .dc-num { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; line-height: 1; color: var(--ui-ink); }
.donut-center .dc-lab { display: block; font-size: 0.75rem; color: var(--ui-mut); margin-top: 2px; }
.donut-legend { display: grid; gap: 7px; flex: 1; }
.donut-legend .dl-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--ui-mut); }
.donut-legend .dl-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.donut-legend .dl-val { margin-left: auto; font-family: var(--font-heading); font-weight: 700; color: var(--ui-ink); }

/* ---- Radial gauge / health rings --------------------------------------- */
.gauge-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gauge { text-align: center; }
.gauge .g-ring { position: relative; width: 78px; height: 78px; margin: 0 auto; }
.gauge .g-ring svg { width: 78px; height: 78px; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 8; }
.gauge .g-track { stroke: var(--ui-line); }
.gauge .g-val { stroke: var(--color-teal); stroke-linecap: round; }
.gauge .g-val--orange { stroke: var(--color-primary-bright); }
.gauge .g-pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.02rem; color: var(--ui-ink); }
.gauge .g-lab { display: block; margin-top: 8px; font-size: 0.75rem; color: var(--ui-mut); line-height: 1.3; }

/* ---- Data-flow / object sync diagram ----------------------------------- */
.dataflow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.df-sys { border: 1px solid var(--ui-line); border-radius: 11px; background: #fff; padding: 12px; text-align: center; }
.df-sys .dfs-name { font-family: var(--font-heading); font-weight: 700; font-size: 0.78rem; }
.df-sys .dfs-tag { display: block; font-size: 0.75rem; color: var(--ui-mut); margin-top: 2px; }
.df-mid { display: grid; gap: 6px; }
.df-obj { font-size: 0.75rem; font-weight: 600; color: var(--ui-mut); background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.df-obj::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-teal); }
.df-rows { display: grid; gap: 8px; margin-top: 12px; }
.df-rowline { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--ui-ink); border-top: 1px solid var(--ui-line-2); padding-top: 8px; }
.df-rowline .dfl-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 700; color: var(--color-teal); }

/* ---- Web-personalisation preview (browser frame) ----------------------- */
.webframe { border: 1px solid var(--ui-line); border-radius: 11px; overflow: hidden; background: #fff; }
.webframe .wf-bar { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--ui-line); background: var(--ui-panel); }
.webframe .wf-url { flex: 1; font-size: 0.75rem; color: var(--ui-faint); background: #fff; border: 1px solid var(--ui-line); border-radius: 999px; padding: 3px 10px; }
.webframe .wf-seg { font-size: 0.75rem; font-weight: 700; color: var(--color-teal); background: var(--color-teal-soft); border-radius: 999px; padding: 3px 9px; }
.webframe .wf-body { padding: 15px; }
.webframe .wf-ey { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.webframe .wf-h { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--ui-ink); margin: 6px 0; }
.webframe .wf-h b { color: var(--color-primary); }
.webframe .wf-p { font-size: 0.75rem;   /* 12px floor — full sentences, was 11.20px */ color: var(--ui-mut); line-height: 1.5; }
.webframe .wf-cta { display: inline-block; margin-top: 10px; font-size: 0.75rem; font-weight: 700; color: #111827; background: var(--color-primary-bright); border-radius: 7px; padding: 6px 12px; }
.webframe .wf-variants { display: flex; gap: 6px; padding: 0 15px 13px; }
.webframe .wf-var { flex: 1; font-size: 0.75rem; text-align: center; color: var(--ui-mut); border: 1px solid var(--ui-line); border-radius: 7px; padding: 5px; }
.webframe .wf-var.is-on { color: var(--color-teal); border-color: var(--color-teal); background: var(--color-teal-soft); font-weight: 700; }

/* ---- Roadmap / phased plan --------------------------------------------- */
.roadmap { display: grid; gap: 9px; }
.rm-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; }
.rm-when { font-size: 0.75rem; font-weight: 700; color: var(--ui-mut); text-align: right; }
.rm-bar { border-radius: 8px; padding: 9px 12px; color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 0.75rem; display: flex; align-items: center; justify-content: space-between; }
.rm-row:nth-child(1) .rm-bar { background: var(--color-teal); width: 46%; }
.rm-row:nth-child(2) .rm-bar { background: #14807a; width: 66%; }
.rm-row:nth-child(3) .rm-bar { background: var(--color-primary-hover); width: 82%; }
.rm-row:nth-child(4) .rm-bar { background: var(--color-primary-bright); width: 100%; color: #111827; }
.rm-bar .rm-tag { font-size: 0.75rem; font-weight: 700; opacity: 0.85; }

/* ---- Activity heatmap / cohort grid ------------------------------------ */
.heat { display: grid; grid-template-columns: 54px repeat(8, 1fr); gap: 4px; align-items: center; }
.heat .h-lab { font-size: 0.75rem; color: var(--ui-mut); }
.heat .h-cell { aspect-ratio: 1; border-radius: 4px; background: var(--ui-line); }
.heat .h-cell[data-v="1"] { background: #ccece8; }
.heat .h-cell[data-v="2"] { background: #7dd3c8; }
.heat .h-cell[data-v="3"] { background: var(--color-teal); }
.heat .h-cell[data-v="4"] { background: var(--color-primary-bright); }

/* Two-up mini panels inside a window body */
.uw-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 420px) { .uw-2col { grid-template-columns: 1fr; } }

/* ---- Maturity ladder (labelled stepped bars) --------------------------- */
.ladder { display: grid; gap: var(--space-3); }
.ladder-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; }
.ladder-row .lr-lab { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted); }
.ladder-row .lr-track { height: 12px; border-radius: 6px; background: var(--color-surface-alt); overflow: hidden; }
.ladder-row .lr-fill { display: block; height: 100%; border-radius: 6px; background: var(--color-teal); }
.ladder-row.is-now .lr-lab { color: var(--color-primary); font-weight: 700; }
.ladder-row.is-now .lr-fill { background: var(--color-primary-bright); }

/* ---- Demarcated step / timeline cards (career, phases, etc.) ----------- */
.steps-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); align-items: stretch; }
@media (max-width: 1040px) { .steps-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .steps-cards { grid-template-columns: 1fr; } }
.steps-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps-cards--4 { grid-template-columns: 1fr; } }
.step-card { position: relative; padding: var(--space-6); display: flex; flex-direction: column; height: 100%; }
.step-card .sc-n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 9px; background: var(--color-primary-soft); color: var(--color-primary);
  font-family: var(--font-heading); font-weight: 800; font-size: 0.9rem; margin-bottom: var(--space-4);
}
.step-card:nth-child(even) .sc-n { background: var(--color-teal-soft); color: var(--color-teal); }
.step-card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.step-card p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; }

/* ==========================================================================
   SCROLL ANIMATION — .gfx-anim sets the "empty" start state INSTANTLY (no
   transition, so it never janks on load and never gets stuck interpolating from
   `transform:none` to a singular matrix). .gfx-in animates to the full state —
   the transition lives HERE, so it only runs on the reveal, on scroll.
   Reduced-motion visitors are never primed (JS adds only .gfx-in) → full state.
   ========================================================================== */

/* Horizontal bars grow from the left */
.gfx-anim .a-fill, .gfx-anim .lr-fill, .gfx-anim .uw-stage .s-bar, .gfx-anim .rm-bar, .gfx-anim .funnel-bar {
  transform: scaleX(0); transform-origin: left;
}
.gfx-in .a-fill, .gfx-in .lr-fill, .gfx-in .uw-stage .s-bar, .gfx-in .rm-bar, .gfx-in .funnel-bar {
  transform: scaleX(1); transition: transform 0.9s var(--ease-out);
}
/* stagger down a stack of bars */
.gfx-in .ladder-row:nth-child(2) .lr-fill, .gfx-in .funnel-row:nth-child(2) .funnel-bar, .gfx-in .rm-row:nth-child(2) .rm-bar { transition-delay: 0.08s; }
.gfx-in .ladder-row:nth-child(3) .lr-fill, .gfx-in .funnel-row:nth-child(3) .funnel-bar, .gfx-in .rm-row:nth-child(3) .rm-bar { transition-delay: 0.16s; }
.gfx-in .ladder-row:nth-child(4) .lr-fill, .gfx-in .funnel-row:nth-child(4) .funnel-bar, .gfx-in .rm-row:nth-child(4) .rm-bar { transition-delay: 0.24s; }
.gfx-in .ladder-row:nth-child(5) .lr-fill { transition-delay: 0.32s; }
.gfx-in .attr-row:nth-child(2) .a-fill { transition-delay: 0.1s; }

/* Dashboard vertical bars grow from the bottom */
.gfx-anim .cbar, .gfx-anim .cbar--muted { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
.gfx-in .cbar, .gfx-in .cbar--muted { transform: scaleY(1); transition: transform 0.9s var(--ease-out); }
.gfx-in .cbar:nth-of-type(2) { transition-delay: 0.06s; }
.gfx-in .cbar:nth-of-type(3) { transition-delay: 0.12s; }
.gfx-in .cbar:nth-of-type(4) { transition-delay: 0.18s; }

/* Line / area chart draws in, fill fades, dot pops */
.gfx-anim .ar-line { stroke-dasharray: 640; stroke-dashoffset: 640; }
.gfx-in .ar-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease-out); }
.gfx-anim .ar-fill { opacity: 0; }
.gfx-in .ar-fill { opacity: 0.12; transition: opacity 0.7s ease 0.4s; }
.gfx-anim .ar-dot { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; }
.gfx-in .ar-dot { opacity: 1; transform: scale(1); transition: opacity 0.3s ease 1.05s, transform 0.35s var(--ease-out) 1.05s; }

/* Sparkline (hero cards) draws in too */
.gfx-anim .rc-spark polyline, .gfx-anim .k-spark polyline { stroke-dasharray: 200; stroke-dashoffset: 200; }
.gfx-in .rc-spark polyline, .gfx-in .k-spark polyline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out); }

/* Donut sweeps into place */
.gfx-anim .donut { opacity: 0; transform: rotate(-135deg); }
.gfx-in .donut { opacity: 1; transform: rotate(-90deg); transition: transform 0.95s var(--ease-out), opacity 0.5s ease; }

/* Radial gauges draw their ring */
.gfx-anim .g-val { stroke-dashoffset: 190; }
.gfx-in .g-val { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out); }

/* Heatmap cells scale in with a diagonal stagger */
.gfx-anim .h-cell { opacity: 0; transform: scale(0.4); }
.gfx-in .h-cell { opacity: 1; transform: scale(1); transition: opacity 0.4s ease, transform 0.4s var(--ease-out); }
.gfx-in .heat:nth-child(2) .h-cell { transition-delay: 0.06s; }
.gfx-in .heat:nth-child(3) .h-cell { transition-delay: 0.12s; }
.gfx-in .heat:nth-child(4) .h-cell { transition-delay: 0.18s; }

/* ==========================================================================
   MOBILE RENDERING — v3 meeting doc, items 1, 2 and 3.
   "Use the same render as used on desktop for this visual."
   "Use the desktop render and fit in for scrolling."
   "Use the desktop version where feasible ensuring proper rendering for
    mobile view."

   WHAT CHANGED (and why the previous rule was the defect he photographed):
   the old block collapsed every mockup grid to ONE column at 860px, so the
   home hero mockup ran ~1,040px tall on a phone and the RevOps health mockup
   stacked three gauges vertically. The desktop column counts are now HELD all
   the way down — 3-up KPIs, 4-up pipeline stages, 3-up gauges, 3-part sync
   diagram, 8-column heatmap, donut beside its legend — and the render is made
   to FIT by shrinking chrome (padding, gaps, ring diameters) and stepping type
   down against a hard floor, not by reflowing.

   LEGIBILITY FLOOR: nothing inside a mockup renders below 10px (0.625rem) at
   any width. Micro-labels that sat at 8.9-9.9px on desktop are stepped UP to
   the floor on phones rather than down.

   TWO DOCUMENTED EXCEPTIONS to "desktop everywhere", both under his own
   "where feasible" hedge:
     - .uw-kanban keeps its 4 desktop columns but scrolls horizontally inside
       the window body below 860px (this is his "fit in for scrolling"); four
       deal cards cannot be read at 68px each.
     - .uw-2col holds two panels down to 560px and stacks below that; each half
       carries a whole sub-diagram (a .dataflow or a .webframe) that is not
       readable at ~140px.
   ========================================================================== */

/* ---- Tier 0: 861px and below — the mockup is now FULL WIDTH (the hero has
   stacked), i.e. WIDER than the half-column it occupies on desktop. Nothing
   needs to shrink here; only the page-overflow guards and the kanban scroller
   apply. ------------------------------------------------------------------ */
@media (max-width: 860px) {
  /* nothing inside a mockup may push the PAGE sideways */
  .app-window, .app-frame { max-width: 100%; }
  .app-frame::before { display: none; }   /* decorative glow caused 395px scrollWidth on a 390px screen */

  /* .aw-body is a grid, so its children keep min-width:auto and refuse to
     shrink below their content. Any panel wrapping a wide exhibit (the 720px
     services x expertise matrix) therefore grew to 720px and was CLIPPED by
     .app-window's overflow:hidden — the inner overflow-x:auto scroller never
     got the chance to scroll. min-width:0 hands the scrolling back to it. */
  .aw-body > *, .uw-panel { min-width: 0; }

  /* "fit in for scrolling": desktop 4-up board, scrolled inside the window */
  .uw-kanban {
    grid-template-columns: repeat(4, minmax(152px, 1fr));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }

  /* the floating chip used to land ON the window title bar and cut the
     "Illustrative view" tab in half (visible on mtg-01 and mtg-03). Once the
     hero stacks there is room to lift both chips fully clear of the frame. */
  .app-frame:has(> .gfx-chip--tr) { margin-top: 58px; }
  .app-frame:has(> .gfx-chip--bl) { margin-bottom: 58px; }
  .gfx-chip { padding: 7px 11px; gap: 8px; }
  .gfx-chip .gc-ic { width: 26px; height: 26px; border-radius: 8px; }
  .gfx-chip .gc-ic svg { width: 15px; height: 15px; }
  .gfx-chip .gc-num { font-size: 0.92rem; }
  .gfx-chip .gc-lab { font-size: 0.75rem; }
  /* bottom:100% / top:100% pins the chip OUTSIDE the frame edge whatever its
     own height is, so it can never land back on the title bar */
  .gfx-chip--tr { top: auto; bottom: 100%; margin-bottom: 10px; right: 0; }
  .gfx-chip--bl { bottom: auto; top: 100%; margin-top: 10px; left: 0; }
}

/* ---- Tier 1: 640px and below — real phones. Desktop layout held, chrome
   compacted so the columns keep their proportions. ------------------------ */
@media (max-width: 640px) {
  .aw-body { padding: 12px; gap: 11px; }
  .uw-panel { padding: 11px 11px; }

  .uw-kpis { gap: 7px; }
  .uw-kpi { padding: 9px 9px; }
  .uw-kpi .k-num { font-size: 1.25rem; }
  .uw-kpi .k-spark { display: none; }     /* 46px spark overlapped the value */

  .uw-stages { gap: 6px; }
  .uw-stage { padding: 7px 8px; }
  .uw-stage .s-num { font-size: 0.95rem; }

  .gauge-row { gap: 7px; }
  .gauge .g-ring, .gauge .g-ring svg { width: 66px; height: 66px; }
  .gauge .g-pct { font-size: 0.9rem; }

  .dataflow { gap: 7px; }
  .df-sys { padding: 10px 7px; }
  .df-mid { gap: 5px; }
  .df-obj { padding: 4px 8px; }

  .uw-row { padding: 8px 9px; gap: 8px; }
  .attr-row { grid-template-columns: 76px 1fr auto; gap: 8px; }
  .ladder-row { grid-template-columns: 80px 1fr; gap: 10px; }

  .donut-wrap { gap: 12px; }
  .donut-vis, .donut { width: 100px; height: 100px; }
  .donut-legend { gap: 6px; }

  .heat { grid-template-columns: 48px repeat(8, 1fr); gap: 3px; }
}

/* ---- SVG chart labels: DECLARED SIZE IS NOT DELIVERED SIZE ---------------
   A label authored inside a viewBox is drawn in USER UNITS, and the browser
   then scales the whole drawing by (rendered width / viewBox width). What the
   reader receives is therefore

       effective_px = declared_px x (rendered_width / viewBox_width)

   and NOT the number written in the stylesheet. Two earlier passes raised the
   declared values without re-checking the delivered ones, so the defect
   survived both times.

   The tiers below are read off a MEASURED table: every text-bearing SVG on the
   site was rendered at 28 viewport widths from 360 to 1600 and its rendered
   width recorded, so `scale` here is observed, not modelled. Each tier holds
   the delivered size inside 12.2-16.5px; the site floor is 12px and no label
   may deliver below it at any width.

   Tier boundaries are the points where a LAYOUT changes (a column splits, a
   container hits its max-width) plus subdivisions wherever the scale would
   otherwise drift more than ~1.35x inside one tier.

   --clab defaults to 12px, not to a small number: a chart whose viewBox is
   edited so that none of the selectors below match must fail toward the floor,
   never through it.
   ------------------------------------------------------------------------ */
.uw-chart, .uw-area { --clab: 12px; }
.uw-chart .clab, .uw-area .clab { font-size: var(--clab); }

/* /approach/ - "Why the order matters"   viewBox 300 x 122
   measured scale: 0.95 (360px) . 1.18 (430) . 1.33 (480) . 1.70 (600)
                   1.83 (640) . 2.18 (768) . 2.35 (820) . 1.06 (860, column
                   splits) . 1.32 (1023) . 1.47 (1120) . 1.59 (1280-1600)   */
.uw-area[viewBox="0 0 300 122"] { --clab: 13px; }
@media (min-width: 480px) and (max-width: 639px) { .uw-area[viewBox="0 0 300 122"] { --clab: 9.25px; } }
@media (min-width: 640px) and (max-width: 859px) { .uw-area[viewBox="0 0 300 122"] { --clab: 6.75px; } }
@media (min-width: 860px) and (max-width: 1119px) { .uw-area[viewBox="0 0 300 122"] { --clab: 11.5px; } }
@media (min-width: 1120px) { .uw-area[viewBox="0 0 300 122"] { --clab: 8.5px; } }

/* /services/growth-marketing/ - "Spend vs sourced pipeline"   viewBox 300 x 128
   THE ONE CHART WHOSE SCALE IS SET BY ITS HEIGHT, NOT ITS WIDTH. Above 860px it
   sits in a grid row that constrains its height, so preserveAspectRatio="meet"
   resolves the scale against the HEIGHT and the drawing is letterboxed inside a
   wider box. Its element is 424.66px across at 1440 but the user-unit scale is
   1.304, not 424.66/300 = 1.4155. Sizing from the element width therefore
   over-reads the scale by 8% and puts the labels back under the floor. Every
   value below is read from getScreenCTM() on the label itself, which is the
   only measurement that survives that case.   */
.uw-chart[viewBox="0 0 300 128"] { --clab: 13px; }      /* scale 0.95-1.18 */
@media (min-width: 480px) and (max-width: 639px) { .uw-chart[viewBox="0 0 300 128"] { --clab: 9.5px; } }
@media (min-width: 640px) and (max-width: 859px) { .uw-chart[viewBox="0 0 300 128"] { --clab: 7px; } }
@media (min-width: 860px) and (max-width: 1119px) { .uw-chart[viewBox="0 0 300 128"] { --clab: 13.5px; } }
@media (min-width: 1120px) { .uw-chart[viewBox="0 0 300 128"] { --clab: 10.25px; } }

/* /services/salesforce-personalisation/ - "Opportunities by segment"
   viewBox 240 x 128. This chart carries four segment names across four bar
   groups, so it is the one figure on the site whose label WIDTH, not only its
   size, decides the tiering: at the floor, "Enterprise" and "Mid-market" need
   about 275px of rendered chart between them. See the .uw-2col note below for
   why the two console panels now stack until 768px.   */
.uw-chart[viewBox="0 0 240 128"] { --clab: 10.25px; }
@media (min-width: 480px) and (max-width: 560px) { .uw-chart[viewBox="0 0 240 128"] { --clab: 7.5px; } }
@media (min-width: 561px) and (max-width: 639px) { .uw-chart[viewBox="0 0 240 128"] { --clab: 6.5px; } }
@media (min-width: 640px) and (max-width: 767px) { .uw-chart[viewBox="0 0 240 128"] { --clab: 5.5px; } }
@media (min-width: 768px) and (max-width: 1022px) { .uw-chart[viewBox="0 0 240 128"] { --clab: 9.75px; } }
@media (min-width: 1023px) { .uw-chart[viewBox="0 0 240 128"] { --clab: 7px; } }

/* /expertise/revops-crm/ - "Forecast against what actually closed"
   viewBox 465 x 149. Its container stops growing at 820px, so one tier covers
   everything above 640.   */
.uw-area[viewBox="0 0 465 149"] { --clab: 20px; }
@media (min-width: 480px) and (max-width: 639px) { .uw-area[viewBox="0 0 465 149"] { --clab: 14.5px; } }
@media (min-width: 640px) { .uw-area[viewBox="0 0 465 149"] { --clab: 10.5px; } }

/* /expertise/ - services x expertise matrix   viewBox 760 x 336
   The matrix declares min-width:760px and scrolls inside its own box, so it
   renders 1:1 at every width up to 820 and the DECLARED value is delivered
   unchanged there. That is why its labels have to start at 13px, not 8px:
   below 860 there is no scale-up to rescue them.   */
.uw-chart[viewBox="0 0 760 336"] { --clab: 13px; }
@media (min-width: 1024px) { .uw-chart[viewBox="0 0 760 336"] { --clab: 10.25px; } }
/* The matrix separates its row labels from its column headers by colour and
   weight, not by size; on desktop only, the row labels carry a little more
   size because the chart is scaled up and there is room for it. */
.uw-chart[viewBox="0 0 760 336"] .clab--row { font-size: var(--clab-row, var(--clab)); }
.uw-chart[viewBox="0 0 760 336"] .clab--num { font-size: calc(var(--clab) * 1.15); }
@media (min-width: 1024px) { .uw-chart[viewBox="0 0 760 336"] { --clab-row: 11.5px; } }

/* /expertise/revops-crm/ - the RevOps Venn   viewBox 460 x 366.
   Same mechanism, its own variable because it is not a .uw-* chart. */
.venn-chart { --vlab: 19.75px; }
.venn-chart .vn-lab  { font-size: var(--vlab); }
.venn-chart .vn-core { font-size: calc(var(--vlab) * 1.25); }
@media (min-width: 480px) and (max-width: 639px) { .venn-chart { --vlab: 14.25px; } }
@media (min-width: 640px) and (max-width: 859px) { .venn-chart { --vlab: 10.25px; } }
@media (min-width: 860px) and (max-width: 1119px) { .venn-chart { --vlab: 17.75px; } }
@media (min-width: 1120px) { .venn-chart { --vlab: 12.75px; } }

/* ---- Tier 2: 430px and below — the narrowest mainstream phone. This is the
   floor tier: every remaining step-down lands ON 0.625rem (10px) and nothing
   goes below it. Sub-10px desktop micro-labels are stepped UP to 10px. ---- */
@media (max-width: 430px) {
  .aw-body { padding: 10px; gap: 9px; }
  .aw-bar { padding: 9px 10px; gap: 7px; }
  .aw-title { font-size: 0.76rem; }
  .uw-panel { padding: 10px 9px; }
  .uw-panel-head { margin-bottom: 8px; }

  .uw-kpis { gap: 5px; }
  .uw-kpi { padding: 8px 7px; }
  .uw-kpi .k-num { font-size: 1.06rem; }

  .uw-stages { gap: 5px; }
  .uw-stage { padding: 6px 6px; }
  .uw-stage .s-num { font-size: 0.86rem; }

  .gauge-row { gap: 5px; }
  .gauge .g-ring, .gauge .g-ring svg { width: 58px; height: 58px; }
  .gauge .g-pct { font-size: 0.8rem; }
  .gauge .g-lab { margin-top: 5px; }

  .df-sys { padding: 8px 6px; }
  .df-sys .dfs-name { font-size: 0.75rem; }
  .df-obj { padding: 3px 7px; }

  .uw-row { padding: 7px 8px; gap: 6px; }
  .uw-row .r-av { width: 18px; height: 18px; }
  .attr-row { grid-template-columns: 68px 1fr auto; gap: 6px; }
  .ladder-row { grid-template-columns: 72px 1fr; gap: 8px; }

  .donut-vis, .donut { width: 92px; height: 92px; }
  .donut circle { stroke-width: 16; }

  .kan-col { padding: 8px 7px; }

  /* 10px legibility floor — these render at 8.9-9.9px on desktop */
  .uw-kpi .k-lab,
  .uw-kpi .k-delta,
  .uw-stage .s-lab,
  .aw-tab,
  .aw-live,
  .uw-row .r-tag,
  .uw-row .r-name span,
  .kan-col .kc-name,
  .kan-col .kc-count,
  .kan-card .kk-co,
  .df-sys .dfs-tag,
  .df-obj,
  .df-rowline .dfl-ok,
  .donut-center .dc-lab,
  .gauge .g-lab,
  .heat .h-lab,
  .rm-bar .rm-tag,
  .rm-when,
  .webframe .wf-url,
  .webframe .wf-seg,
  .webframe .wf-ey,
  .webframe .wf-var,
  .uw-panel-head .ph-meta { font-size: 0.75rem; }
}

/* ---- Exception 2: two full sub-diagrams cannot share a narrow column. ----
   Raised from 560px to 767px on measurement. Between 561 and 767 each half was
   215-307px wide, and the "Opportunities by segment" chart in the right half
   cannot carry its four segment names (Enterprise, Mid-market, Target,
   Returning) at the 12px floor in that space: at the floor those four labels
   need about 275px of chart between them and they had 215. Stacking gives the
   chart the full body width there, which is the same argument the 560px
   breakpoint was already making, one band wider. */
@media (max-width: 767px) {
  .uw-2col { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REDUCED MOTION — the pre-animation state must never be the resting state.
   .gfx-anim declares the "empty" start of every scroll-triggered graphic
   (bars at scaleY(0), the donut at rotate(-135deg) and opacity 0, gauges at
   stroke-dashoffset 190, heat cells at scale(0.4)). Those states are only
   safe because an IntersectionObserver later adds .gfx-in. Nothing guaranteed
   that: under prefers-reduced-motion, or any time the observer does not fire
   for an element, the graphic stays in its empty state permanently. Measured
   in-browser: the donut sits at rotate(-135deg), which bounds a 116px square
   at 164px and reported 24px of overflow on .donut-wrap and 11px on the
   enclosing .uw-panel on three pages.
   Under reduced motion the graphics now simply START finished.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .gfx-anim .a-fill, .gfx-anim .lr-fill, .gfx-anim .uw-stage .s-bar,
  .gfx-anim .rm-bar, .gfx-anim .funnel-bar,
  .gfx-anim .cbar, .gfx-anim .cbar--muted,
  .gfx-anim .ar-dot, .gfx-anim .h-cell,
  .gfx-anim .donut { transform: none; opacity: 1; }
  .gfx-anim .donut { transform: rotate(-90deg); }
  .gfx-anim .ar-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .gfx-anim .ar-fill { opacity: 1; }
  .gfx-anim .rc-spark polyline,
  .gfx-anim .k-spark polyline { stroke-dasharray: none; stroke-dashoffset: 0; }
  .gfx-anim .g-val { stroke-dashoffset: 0; }
}