/* =====================================================================
 * Quiz 7 Zones — стили
 * Inline styles из showcase вынесены в utility-классы (.qa-mt-*, .qa-rotate-180,
 * .qa-bg-risk, .qa-color-ai, .qa-fw-400, .qa-block, .qa-bar-fill).
 * Источник: docs/intake/2026-05-23-conversion-assets/claude-design-result/
 * Quiz 7 Zones Showcase.html. Merged 2026-05-23.
 * ===================================================================== */

/* --- Utilities for inline-style replacements --- */
.qa-mt-10 { margin-top: 10px; }
.qa-mt-14 { margin-top: 14px; }
.qa-mt-16 { margin-top: 16px; }
.qa-mt-6  { margin-top: 6px; }
.qa-rotate-180 { display: inline-block; transform: rotate(180deg); }
.qa-bg-risk { background: var(--risk); }
.qa-bg-brand-ai { background: linear-gradient(90deg, var(--brand), var(--ai)); }
.qa-bg-hair-dark { background: var(--hair-dark); opacity: 0.4; }
.qa-color-ai { color: var(--ai); }
.qa-fw-400 { font-weight: 400; font-size: 11px; }
.qa-block { display: block; margin-bottom: 2px; }
.qa-q-nav-flat { margin-top: 6px; border-top: 0; padding-top: 0; }
.qa-ml-12 { margin-left: 12px; }

/* --- Quiz container --- */
/* quiz-shell — лёгкий внутренний wrapper, НЕ перебивает width/margin родителя
   (.container даёт 1120px). Только вертикальная компоновка. */
.quiz-shell { padding: 0; }
.quiz-shell > .progress { margin: 0 0 28px; }
.quiz-shell .screen,
.quiz-shell .footnote,
.quiz-shell .result-shell { width: 100%; max-width: none; margin: 0; }
.quiz-shell .intro-card { padding: 44px; }
.quiz-shell .q-card,
.quiz-shell .contacts-card { padding: 40px 44px; }
/* Inner content readable width inside full-width cards */
.intro-card h1, .intro-card .intro-h, .intro-card .lead { max-width: 36ch; }
.intro-card .lead { max-width: 56ch; }
.intro-card .intro-promise { max-width: 880px; }
.contacts-card h2, .contacts-card .lead { max-width: 36ch; }
.contacts-card .lead { max-width: 56ch; }
.q-card .q-text { max-width: 32ch; }
.q-card .q-hint { max-width: 72ch; }
.q-card .q-options { max-width: 880px; }

/* --- Progress header --- */
.quiz-shell .progress {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 28px;
}
.quiz-shell .progress-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--muted); letter-spacing: 0.04em;
}
.quiz-shell .progress-row .now { display: inline-flex; gap: 8px; align-items: baseline; }
.quiz-shell .progress-row .now strong {
  color: var(--ink); font-weight: 600; letter-spacing: 0;
  font-family: var(--f-ui); font-size: 13px;
}
.quiz-shell .progress-row .meta { display: inline-flex; align-items: center; gap: 8px; }

.quiz-shell .progress-zones {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.quiz-shell .progress-zone {
  display: grid; gap: 4px;
  padding: 6px 4px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  text-align: left;
  position: relative;
  transition: background .2s, border-color .2s;
  border: 1px solid var(--hair);
  min-width: 0;
}
.quiz-shell .progress-zone .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hair-dark);
  margin-bottom: 2px;
}
.quiz-shell .progress-zone .pz-num {
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 600;
  color: var(--muted); letter-spacing: 0.04em;
}
.quiz-shell .progress-zone .pz-name {
  font-size: 11px; color: var(--ink-2);
  line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
}
.quiz-shell .progress-zone.is-active {
  background: var(--surface);
  border-color: var(--ink);
}
.quiz-shell .progress-zone.is-active .dot {
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 18%, transparent);
}
.quiz-shell .progress-zone.is-done .dot { background: var(--ok); }
.quiz-shell .progress-zone.is-done {
  background: var(--surface);
  border-color: color-mix(in oklch, var(--ok) 30%, var(--hair));
}

/* --- Screen base --- */
.quiz-shell .screen { display: none; }
.quiz-shell .screen.is-active { display: block; animation: qa-riseIn .28s ease-out; }
@keyframes qa-riseIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-shell .screen.is-active { animation: none; }
}

/* --- Intro screen --- */
.intro-card {
  padding: 36px;
  background:
    radial-gradient(560px 280px at 92% 8%, var(--ai-glow, oklch(0.78 0.13 78 / 0.28)), transparent 60%),
    radial-gradient(560px 280px at 8% 14%, color-mix(in oklch, var(--brand-soft) 50%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  position: relative; overflow: hidden;
}
.intro-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.3;
  mask-image: radial-gradient(700px 600px at 60% 70%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(700px 600px at 60% 70%, black, transparent 80%);
}
.intro-card > * { position: relative; }
.intro-card h1,
.intro-card .intro-h { margin: 14px 0 0; max-width: 22ch; font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.025em; line-height: 1.1; font-weight: 700; color: var(--ink); text-wrap: balance; }
.intro-card h1 em,
.intro-card .intro-h em {
  font-style: normal;
  background: linear-gradient(120deg, var(--brand), oklch(0.55 0.14 200));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.intro-card .lead { margin-top: 16px; max-width: 50ch; }

.intro-promise {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}
.promise-item {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  align-items: start; padding: 10px 0;
  border-top: 1px solid var(--hair);
}
.promise-item .num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  margin-top: 2px;
}
.promise-item.has-ai .num { background: var(--ai); color: var(--ink); }
.promise-item .pt { font-size: 14px; }
.promise-item .pt strong { display: block; font-weight: 600; color: var(--ink); margin-bottom: 1px; }
.promise-item .pt span { color: var(--muted); }

.intro-actions {
  margin-top: 28px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.intro-meta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--faint); letter-spacing: 0.04em;
}
.intro-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }

.intro-resume {
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--ai-soft);
  border: 1px solid color-mix(in oklch, var(--ai) 28%, white);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-size: 13px;
  color: var(--ai-ink);
}
.intro-resume.is-hidden { display: none; }
.intro-resume .resume-actions { display: flex; gap: 8px; }
.intro-resume button {
  font-size: 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--hair-2);
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-family: var(--f-mono); letter-spacing: 0.02em;
  transition: border-color .15s;
}
.intro-resume button:hover { border-color: var(--ink); }
.intro-resume button.primary { background: var(--ink); color: white; border-color: var(--ink); }

.quiz-shell .footnote {
  margin-top: 28px;
  padding: 16px;
  text-align: center;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--faint); letter-spacing: 0.04em;
}

/* --- Question screen --- */
.q-card {
  padding: 32px 32px 28px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.q-eyebrow-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.q-counter {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--muted); letter-spacing: 0.04em;
}
.q-text {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700; line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  max-width: 28ch;
  text-wrap: balance;
}
.q-hint {
  font-size: 13px; color: var(--muted);
  margin: 0 0 18px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 8px;
  border-left: 2px solid var(--hair-dark);
}
.q-options { display: grid; gap: 10px; }
.q-option {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px; align-items: center;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  font-size: 15px;
  transition: border-color .15s, background .15s, transform .08s;
}
.q-option:hover { border-color: var(--ink-2); background: var(--surface-2); }
.q-option:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.q-option .marker {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--hair-dark);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 10px;
  color: var(--muted);
  flex: 0 0 22px;
}
.q-option .text { line-height: 1.4; }
.q-option .v {
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--faint); letter-spacing: 0.04em;
}
.q-option.is-selected {
  border-color: var(--ink);
  background: color-mix(in oklch, var(--surface) 92%, var(--ai-soft));
}
.q-option.is-selected .marker {
  border-color: var(--ink);
  background: var(--ink); color: var(--ai);
}
.q-nav {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.q-nav .small { color: var(--muted); font-size: 13px; }

/* --- Contacts screen --- */
.contacts-card {
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.contacts-card h2 { max-width: 22ch; margin-top: 14px; }
.contacts-card .lead { margin-top: 12px; max-width: 50ch; font-size: 15px; }
.contact-pre {
  margin-top: 22px; padding: 14px 16px;
  background: var(--ai-soft);
  border: 1px solid color-mix(in oklch, var(--ai) 26%, white);
  border-radius: var(--r);
  font-size: 13.5px;
  color: var(--ai-ink);
  display: flex; align-items: center; gap: 12px;
}
.contact-pre svg { flex: 0 0 28px; }
.contact-form {
  margin-top: 24px;
  display: grid; gap: 14px;
}
.contact-form .field-control { display: grid; gap: 6px; }
.contact-form .field-control label {
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: var(--ink-2);
  display: inline-flex; gap: 4px; align-items: center;
  text-transform: none; letter-spacing: 0;
}
/* Inputs in contact-form — exclude checkboxes/radios (they have their own
   sizing in .consent-row / .choice-chip) */
.contact-form input:not([type="checkbox"]):not([type="radio"]),
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--hair-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.contact-form input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ink) 10%, transparent);
}
.contact-form .error-text { min-height: 0; color: var(--risk); font-size: 12px; }
.contact-form .has-error input:not([type="checkbox"]):not([type="radio"]),
.contact-form .has-error textarea { border-color: var(--risk); background: var(--risk-soft); }
.contact-form .has-error .error-text { min-height: 16px; }
/* Consent block inside contact-form — same as elsewhere, checkbox 18×18 */
.contact-form .consent-row { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.contact-form .consent-row input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 18px;
  flex: 0 0 18px; margin-top: 2px; accent-color: var(--ink);
}
.contact-form .consent-row span { flex: 1 1 auto; min-width: 0; }
.contact-form .consent-row a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.form-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* --- Result screen --- */
.result-shell { display: grid; gap: 18px; }
.result-hero {
  padding: 32px;
  background:
    radial-gradient(500px 280px at 96% 6%, var(--ai-glow, oklch(0.78 0.13 78 / 0.28)), transparent 60%),
    radial-gradient(500px 280px at 4% 14%, color-mix(in oklch, var(--brand-soft) 60%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  position: relative; overflow: hidden;
}
.result-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.3;
  mask-image: radial-gradient(700px 500px at 70% 70%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(700px 500px at 70% 70%, black, transparent 80%);
}
.result-hero > * { position: relative; }
.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.result-score {
  display: grid; gap: 4px;
  padding: 22px 18px;
  background: var(--surface);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-md);
  text-align: center;
}
.score-value {
  font-family: var(--f-ui);
  font-size: 64px; font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.score-value sup {
  font-size: 22px; font-weight: 600;
  vertical-align: top;
  margin-left: 4px;
  color: var(--muted);
  letter-spacing: -0.02em;
}
.score-level {
  margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ai-soft);
  border: 1px solid color-mix(in oklch, var(--ai) 30%, white);
  color: var(--ai-ink);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  align-self: center;
  justify-self: center;
}
.score-level.level-0 { background: var(--risk-soft); color: var(--risk); border-color: color-mix(in oklch, var(--risk) 28%, white); }
.score-level.level-1 { background: color-mix(in oklch, var(--risk-soft) 40%, var(--ai-soft)); color: var(--ink-2); border-color: var(--hair-2); }
.score-level.level-4 { background: var(--ink); color: var(--ai); border-color: var(--ink); }

.result-summary h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0; }
.result-summary .lead { margin-top: 10px; max-width: 50ch; font-size: 15px; }
.result-meta {
  margin-top: 14px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.result-meta .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hair-2);
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-2);
}
.result-meta .chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

.result-diagram {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.diagram-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.diagram-head h3 { font-size: 16px; letter-spacing: -0.01em; margin: 0; }
.diagram-head .legend {
  display: inline-flex; gap: 14px;
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--muted); letter-spacing: 0.04em;
}
.diagram-head .legend i {
  width: 12px; height: 3px; border-radius: 2px;
  display: inline-block; margin-right: 5px; vertical-align: middle;
}
.diagram-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
}
.radar-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 280px;
}
.radar-svg { width: 100%; max-width: 380px; height: auto; overflow: visible; }

.bars-list { display: grid; gap: 8px; }
.bar-row {
  display: grid;
  grid-template-columns: 16px minmax(120px, 1fr) minmax(0, 1.5fr) 60px;
  gap: 10px; align-items: center;
  font-size: 13px;
}
.bar-row .b-num {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--faint); letter-spacing: 0.04em;
}
.bar-row .b-name { color: var(--ink-2); font-weight: 500; }
.bar-row .b-track {
  position: relative;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.bar-row .b-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--brand), var(--ai));
  border-radius: inherit;
  transition: width .8s cubic-bezier(.4, 0, .2, 1);
  width: 0;
}
.bar-row .b-fill.is-weak {
  background: linear-gradient(90deg, var(--risk), oklch(0.7 0.16 50));
}
.bar-row .b-meta {
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--ink-2);
  text-align: right;
}
.bar-row .b-meta .max { color: var(--faint); }

.result-scenarios {
  padding: 28px;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
}
.result-scenarios h3 { font-size: 16px; margin: 0 0 4px; }
.result-scenarios .sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.sc-list { display: grid; gap: 10px; }
.sc-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 16px; align-items: start;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hair-2);
  border-radius: var(--r);
}
.sc-item .sc-rank {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--ai-soft); color: var(--ai-ink);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
}
.sc-item:nth-child(2) .sc-rank { background: var(--brand-soft); color: var(--brand-ink); }
.sc-item:nth-child(3) .sc-rank { background: var(--surface-2); color: var(--ink-2); }
.sc-item .sc-name { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.sc-item .sc-reason {
  font-size: 12.5px; color: var(--muted);
  font-family: var(--f-mono); letter-spacing: 0.02em;
}
.sc-item .sc-tag {
  font-family: var(--f-mono); font-size: 10.5px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--hair);
  color: var(--muted); letter-spacing: 0.04em;
  white-space: nowrap;
  align-self: start;
}

.result-cta {
  padding: 28px;
  background:
    radial-gradient(400px 200px at 100% 0%, color-mix(in oklch, var(--ai) 28%, transparent), transparent 60%),
    var(--ink);
  color: white;
  border-radius: var(--r-md);
  position: relative; overflow: hidden;
}
.result-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.result-cta > * { position: relative; }
.result-cta h3 { color: white; font-size: 20px; max-width: 28ch; margin: 0 0 8px; }
.result-cta p { color: rgba(255,255,255,0.75); font-size: 14px; max-width: 50ch; margin: 0; }
.result-cta-actions {
  margin-top: 18px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.result-cta .btn-ai { color: var(--ink); }
.result-cta .btn-ghost-light {
  background: transparent; color: white;
  border: 1px solid rgba(255,255,255,0.28);
}
.result-cta .btn-ghost-light:hover { background: rgba(255,255,255,0.06); border-color: white; }
.result-cta-foot {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-family: var(--f-mono); font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}

/* --- Responsive --- */
@media (max-width: 720px) {
  .quiz-shell { padding: 24px 0 0; }
  .quiz-shell .progress-zones { grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .quiz-shell .progress-zone { padding: 4px 3px 6px; }
  .quiz-shell .progress-zone .pz-name { font-size: 0; } /* hide labels on narrow */
  .quiz-shell .progress-zone .pz-num { font-size: 9px; }
  .intro-card, .q-card, .contacts-card, .result-hero, .result-diagram, .result-scenarios, .result-cta { padding: 22px; }
  .intro-promise { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .score-value { font-size: 52px; }
  .diagram-grid { grid-template-columns: 1fr; gap: 18px; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .q-text { font-size: 19px; }
  .q-option { padding: 13px 14px; font-size: 14px; }
  .sc-item { grid-template-columns: 28px 1fr; }
  .sc-item .sc-tag { grid-column: 2; justify-self: start; margin-top: 4px; }
  .bar-row { grid-template-columns: 14px minmax(0, 1fr) minmax(0, 1fr) 50px; gap: 6px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar-row .b-fill { transition: none; }
}