/* Solution Configurator demo. Builds on style.css tokens (Lisbon Signal), light theme.
   Fluid by design: every layout reflows with the viewport or the viewer frame it sits in. */

.cfg-page {
  --cfg-surface: #F7F5F1;
  --cfg-line: var(--stone-line);
  --cfg-pad: clamp(16px, 4vw, 56px);
  font-size: 16px; line-height: 1.5;
  background: var(--limestone); color: var(--ink);
  min-height: 100vh; min-height: 100svh;
}
.cfg-page button:disabled { cursor: default; opacity: 0.45; }

/* ---------- Top bar ---------- */
.cfg-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  padding: 14px var(--cfg-pad); background: color-mix(in srgb, var(--limestone) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--cfg-line);
}
.cfg-bar__id, .cfg-bar__aside { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.cfg-bar__home { font-weight: 500; text-decoration: none; font-size: 15px; }
.cfg-bar__home::before { content: "← "; color: var(--muted); }
.cfg-embedded .cfg-bar__home, .cfg-embedded .cfg-bar__rule { display: none; }
.cfg-bar__rule { width: 1px; height: 20px; background: var(--cfg-line); }
.cfg-bar__title { font-weight: 500; font-size: 15px; }
.cfg-tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--cfg-line); padding: 3px 8px; }
.cfg-bar__link { font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--cfg-line); padding-bottom: 2px; }
.cfg-bar__link:hover { border-color: var(--ink); }
.cfg-note { font-size: 13px; border: 1px solid var(--cobalt); padding: 6px 12px; background: var(--cfg-surface); }
.cfg-note strong { font-weight: 500; }

/* ---------- Shared ---------- */
.cfg { padding: clamp(32px, 6vw, 80px) var(--cfg-pad) clamp(56px, 8vw, 112px); max-width: 1280px; margin-inline: auto; }
.cfg :focus { outline: none; }
.cfg :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.cfg [tabindex="-1"]:focus-visible { outline: none; } /* headings receive focus on screen change for screen readers only */
.cfg-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; padding: 0; }
.cfg-h1 { font-weight: 500; font-size: clamp(36px, 5.2vw, 64px); line-height: 1; letter-spacing: -0.035em; margin-bottom: 20px; }
.cfg-h2 { font-weight: 500; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 8px; }
.cfg-lead { font-size: clamp(17px, 1.6vw, 19px); max-width: 60ch; margin-bottom: 12px; }
.cfg-sub { color: var(--muted); max-width: 62ch; margin-bottom: clamp(24px, 3.5vw, 36px); }
.cfg-small { font-size: 13px; color: var(--muted); line-height: 1.45; }
.cfg-list { border: 1px solid var(--cfg-line); background: var(--cfg-surface); }
.cfg-list > li + li { border-top: 1px solid var(--cfg-line); }
.cfg-card { display: flex; flex-direction: column; text-align: left; background: var(--cfg-surface); border: 1px solid var(--cfg-line); padding: clamp(18px, 2.2vw, 24px); transition: border-color var(--t-micro) var(--ease-out), box-shadow var(--t-micro) var(--ease-out); }
button.cfg-card:hover { border-color: var(--ink); }
.cfg-card.is-on { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
.cfg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(28px, 4vw, 44px); }
.cfg-textbtn { font-size: 15px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.cfg-textbtn--signal { color: var(--cobalt); }
.cfg-flash { margin-top: 16px; font-size: 14px; border-left: 2px solid var(--cobalt); padding: 8px 14px; background: var(--cfg-surface); }
.cfg-noscript { padding: 40px var(--cfg-pad); }

/* ---------- Start ---------- */
.cfg-start { max-width: 760px; }
.cfg-start .cfg-small { margin-bottom: 28px; }
.cfg-recents { margin-top: clamp(48px, 7vw, 72px); }
.cfg-recent { width: 100%; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px 20px; padding: 16px 20px; text-align: left; }
.cfg-recent:hover { background: var(--limestone-2); }
.cfg-recent__name { font-weight: 500; }
.cfg-recent__date, .cfg-recent__status { font-size: 14px; color: var(--muted); }
.cfg-recent__status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); min-width: 9.5em; }
.cfg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cfg-dot--ok { background: var(--cobalt); }
.cfg-dot--sent { background: var(--ink); }
.cfg-dot--draft { border: 1.5px solid var(--muted); }

/* ---------- Wizard ---------- */
.cfg-wizard { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 56px); align-items: start; }
.cfg-wizard__main { min-width: 0; }
.cfg-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cfg-product__key { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid currentColor; color: var(--cobalt); font-size: 16px; margin-bottom: 16px; }
.cfg-product__name { font-weight: 500; font-size: 19px; margin-bottom: 4px; }
.cfg-product__desc { font-size: 14px; color: var(--muted); }

.cfg-groups { display: grid; gap: 32px; }
.cfg-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-row { width: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 15px 18px; text-align: left; }
.cfg-row:hover { background: var(--limestone-2); }
.cfg-row__main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cfg-row__name { font-weight: 500; }
.cfg-row__q { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.cfg-common { font-size: 11px; background: var(--limestone-2); padding: 2px 8px; white-space: nowrap; }
.cfg-check { flex: none; width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--muted); position: relative; }
.cfg-check.is-on { background: var(--cobalt); border-color: var(--cobalt); }
.cfg-check.is-on::after { content: ""; position: absolute; left: 5px; top: 2px; width: 6px; height: 10px; border: solid #F4F2EE; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cfg-fees { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; max-width: 50%; }
.cfg-fee { font-size: 11px; color: var(--muted); border: 1px solid var(--cfg-line); padding: 3px 7px; background: var(--limestone); white-space: nowrap; }

.cfg-context { display: grid; gap: 28px; max-width: 720px; }
.cfg-branch { border: 1.5px solid var(--ink); background: var(--cfg-surface); padding: 22px; margin: 0; min-width: 0; }
.cfg-branch__head { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 18px; padding: 0; float: left; width: 100%; margin-bottom: 4px; }
.cfg-branch__head + * { clear: both; }
.cfg-branch__tag { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: var(--limestone); padding: 3px 8px; }
.cfg-branch .cfg-small { margin-bottom: 16px; }
.cfg-branch__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cfg-comm { background: var(--limestone); }
.cfg-comm__name { font-weight: 500; margin-bottom: 4px; }
.cfg-comm__desc { font-size: 13px; color: var(--muted); }
.cfg-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-field__label { font-weight: 500; font-size: 15px; padding: 0; margin-bottom: 10px; }
.cfg-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-seg__opt { min-height: 42px; padding: 0 16px; border: 1px solid var(--cfg-line); background: var(--cfg-surface); font-size: 14px; }
.cfg-seg__opt:hover { border-color: var(--ink); }
.cfg-seg__opt.is-on { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); color: var(--cobalt); font-weight: 500; }
.cfg-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cfg-stepper__btn { width: 44px; height: 44px; border: 1px solid var(--cfg-line); background: var(--cfg-surface); font-size: 20px; }
.cfg-stepper__btn:hover { border-color: var(--ink); }
.cfg-stepper__val { min-width: 56px; text-align: center; font-size: 22px; color: var(--cobalt); }

.cfg-rail { position: sticky; top: 88px; background: var(--cfg-surface); border: 1px solid var(--cfg-line); padding: 22px; }
.cfg-rail__steps { display: grid; gap: 12px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--cfg-line); }
.cfg-rail__step { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); text-align: left; }
.cfg-rail__step.is-cur { color: var(--ink); font-weight: 500; }
.cfg-rail__n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 1px solid var(--cfg-line); background: var(--limestone); }
.cfg-rail__step.is-cur .cfg-rail__n { background: var(--cobalt); border-color: var(--cobalt); color: #F4F2EE; }
.cfg-rail__step.is-done .cfg-rail__n { background: var(--ink); border-color: var(--ink); color: var(--limestone); }
.cfg-rail__lines { display: grid; gap: 14px; }
.cfg-rail__lines dt { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.cfg-rail__lines dd { font-size: 14px; font-weight: 500; margin-top: 2px; }
.cfg-edit { font-size: 12px; font-weight: 500; color: var(--cobalt); }

/* ---------- Results ---------- */
.cfg-results { display: grid; gap: clamp(36px, 5vw, 52px); }
.cfg-summary { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cfg-summary__name { font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; }
.cfg-block > .cfg-small { margin-top: 10px; }
.cfg-tl__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.cfg-tl__range { font-weight: 500; font-size: clamp(32px, 4.4vw, 48px); line-height: 1; letter-spacing: -0.03em; color: var(--cobalt); }
.cfg-phases { display: flex; gap: 2px; min-height: 64px; }
.cfg-phase { width: calc(var(--w) - 2px); min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 12px; background: var(--limestone-2); overflow: hidden; }
.cfg-phase.is-hot { background: var(--cobalt); color: #F4F2EE; }
.cfg-phase__name { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-phase__range { font-size: 12px; opacity: 0.8; white-space: nowrap; }
.cfg-phase--spread { background: repeating-linear-gradient(45deg, var(--cfg-line) 0 5px, transparent 5px 10px); border: 1px solid var(--cfg-line); padding: 0; }
.cfg-driver { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; padding: 14px 18px; border-left: 3px solid var(--cobalt); background: var(--cfg-surface); }
.cfg-driver .cfg-label { margin: 0; }
.cfg-driver strong { font-weight: 500; }

.cfg-costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cfg-cost.is-none { border-color: var(--ink); }
.cfg-cost__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cfg-cost__head h3 { font-weight: 500; font-size: 18px; }
.cfg-cost__body { margin-top: 18px; flex: 1; }
.cfg-cost__fig { font-weight: 500; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; color: var(--cobalt); letter-spacing: -0.02em; margin-bottom: 4px; }
.cfg-cost__none { font-weight: 500; font-size: 22px; line-height: 1.15; }
.cfg-cost__gap { font-size: 14px; margin: 10px 0 6px; }
.cfg-cost__body .cfg-textbtn { margin-top: 12px; font-size: 14px; }
.cfg-cost__mover { font-size: 13px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cfg-line); }
.cfg-bands { display: grid; gap: 10px; margin-bottom: 10px; }
.cfg-bands div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cfg-bands dt { font-size: 13px; color: var(--muted); }
.cfg-bands dd { font-size: 14px; color: var(--cobalt); white-space: nowrap; }
.cfg-spread { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.cfg-spread__bar { flex: 1; height: 4px; background: var(--limestone-2); position: relative; }
.cfg-spread__bar span { position: absolute; inset: 0 auto 0 0; background: var(--cobalt); }
.cfg-tier { flex: none; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; padding: 3px 9px; white-space: nowrap; border: 1px solid var(--cfg-line); }
.cfg-tier--ok { border-color: var(--cobalt); color: var(--cobalt); }
.cfg-tier--ind { border-style: dashed; border-color: var(--ink); }
.cfg-tier--none { background: var(--ink); border-color: var(--ink); color: var(--limestone); }

.cfg-lever { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding: 16px 20px; }
.cfg-lever strong { font-weight: 500; font-size: 14px; color: var(--cobalt); white-space: nowrap; }

/* ---------- Register ---------- */
.cfg-register__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; padding-bottom: 20px; border-bottom: 1.5px solid var(--ink); }
.cfg-register__head .cfg-sub { margin-bottom: 0; }
.cfg-register__meta { display: grid; gap: 10px; text-align: right; }
.cfg-register__meta dd { font-weight: 500; }
.cfg-register__count { font-size: 30px; color: var(--cobalt); line-height: 1.1; }
.cfg-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; }
.cfg-table th, .cfg-table td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--cfg-line); font-weight: 400; }
.cfg-table thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); padding-top: 14px; padding-bottom: 10px; }
.cfg-table tbody th { font-weight: 500; }
.cfg-table__why { color: var(--muted); }
.cfg-table__hits { color: var(--cobalt); white-space: nowrap; text-align: right; }
.cfg-table thead th:nth-child(4) { text-align: right; }

/* ---------- Narrow layouts (phones, the 9:16 viewer frame, small windows) ---------- */
@media (max-width: 960px) {
  .cfg-wizard { grid-template-columns: minmax(0, 1fr); }
  .cfg-rail { position: static; order: -1; padding: 16px; }
  .cfg-rail__steps { grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: 14px; margin-bottom: 14px; }
  .cfg-rail__step { flex-direction: column; gap: 6px; font-size: 12px; text-align: center; }
  .cfg-rail__lines, .cfg-rail > .cfg-label { display: none; }
}
@media (max-width: 640px) {
  .cfg-note { font-size: 12px; padding: 4px 10px; }
  .cfg-bar__link { font-size: 13px; }
  .cfg-recent { grid-template-columns: 1fr auto; }
  .cfg-recent__date { grid-row: 2; }
  .cfg-row { flex-wrap: wrap; }
  .cfg-fees { max-width: none; flex-basis: 100%; justify-content: flex-start; padding-left: 34px; }
  .cfg-rail__step { font-size: 0; }
  .cfg-rail__n { font-size: 12px; }
  .cfg-phases { flex-direction: column; }
  .cfg-phase { width: 100%; flex-direction: row; justify-content: space-between; min-height: 44px; }
  .cfg-phase--spread { min-height: 12px; }
  .cfg-lever { flex-direction: column; }
  .cfg-register__meta { text-align: left; grid-auto-flow: column; gap: 24px; }
  .cfg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cfg-table, .cfg-table tbody, .cfg-table tr, .cfg-table th, .cfg-table td { display: block; }
  .cfg-table tr { padding: 16px 0; border-bottom: 1px solid var(--cfg-line); }
  .cfg-table th, .cfg-table td { border: 0; padding: 2px 0; text-align: left; }
  .cfg-table td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); }
  .cfg-table td.cfg-table__why::before { content: none; }
  .cfg-table__hits { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .cfg-card, .cfg-seg__opt { transition: none; }
}

/* ---------- Motion and buttons (2026-10-21) ----------
   Screen changes slide 24px and fade, forward to the left and back to the right. The header and the
   step rail hold still so only the content moves. Selections confirm with a short press. */
.cfg-bar { view-transition-name: cfg-bar; }
.cfg-rail { view-transition-name: cfg-rail; }
.cfg-progress { view-transition-name: cfg-progress; }
::view-transition-group(*) { animation-duration: 300ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(root) { animation: 160ms cubic-bezier(0.4, 0, 1, 1) both cfg-out; }
::view-transition-new(root) { animation: 300ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both cfg-in; }
:root[data-cfg-dir="back"]::view-transition-old(root) { animation-name: cfg-out-back; }
:root[data-cfg-dir="back"]::view-transition-new(root) { animation-name: cfg-in-back; }
@keyframes cfg-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes cfg-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes cfg-out-back { to { opacity: 0; transform: translateX(24px); } }
@keyframes cfg-in-back { from { opacity: 0; transform: translateX(-24px); } }
/* Browsers without View Transitions get the entrance half */
.cfg.is-entering > * { animation: cfg-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
:root[data-cfg-dir="back"] .cfg.is-entering > * { animation-name: cfg-in-back; }

/* Progress bar under the step label */
.cfg-progress { height: 3px; background: var(--limestone-2); margin: -4px 0 20px; max-width: 320px; overflow: hidden; }
.cfg-progress span { display: block; height: 100%; background: var(--cobalt); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* Results build in: blocks rise in turn, the timeline phases draw left to right */
.cfg-results > * { animation: cfg-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.cfg-results > :nth-child(2) { animation-delay: 70ms; }
.cfg-results > :nth-child(3) { animation-delay: 140ms; }
.cfg-results > :nth-child(4) { animation-delay: 210ms; }
.cfg-results > :nth-child(n+5) { animation-delay: 280ms; }
.cfg-phase { animation: cfg-wipe 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.cfg-phase:nth-child(2) { animation-delay: 120ms; } .cfg-phase:nth-child(3) { animation-delay: 200ms; }
.cfg-phase:nth-child(4) { animation-delay: 280ms; } .cfg-phase:nth-child(5) { animation-delay: 360ms; }
.cfg-spread__bar span { transform-origin: 0 50%; animation: cfg-draw 600ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
@keyframes cfg-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes cfg-draw { from { transform: scaleX(0); } }
@keyframes cfg-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cfg-flash { animation: cfg-rise 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Buttons: an arrow that leads, a solid press, a clear disabled state */
.cfg-actions { gap: 12px; }
.cfg-actions .btn { min-width: 132px; }
.cfg-arrow { display: inline-block; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.cfg-go:not(:disabled):hover .cfg-arrow { transform: translateX(4px); }
.cfg-back:hover .cfg-arrow { transform: translateX(-4px); }
.cfg-page .btn:not(:disabled):active { transform: translateY(1px) scale(0.98); }
.cfg-page .btn--primary:disabled { background: var(--limestone-2); color: var(--muted); opacity: 1; }
.cfg-hint { font-size: 13px; color: var(--muted); }

/* Cards and rows: a small lift on hover, a check badge when chosen, a press when tapped */
.cfg-card { position: relative; transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out), background-color 200ms var(--ease-out); }
button.cfg-card:hover { transform: translateY(-2px); }
button.cfg-card:active { transform: translateY(0) scale(0.99); }
button.cfg-card.is-on::after { content: ""; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23F4F2EE' stroke-width='2'/%3E%3C/svg%3E") center / 20px no-repeat; }
.cfg-card.is-changed.is-on { animation: cfg-press 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.cfg-card.is-changed.is-on::after { animation: cfg-pop 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.cfg-row, .cfg-recent { transition: background-color 160ms var(--ease-out); }
.cfg-check { transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.is-changed .cfg-check.is-on { animation: cfg-pop 240ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.cfg-seg__opt { transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.cfg-seg__opt.is-changed { animation: cfg-press 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.cfg-stepper__btn:active { transform: scale(0.94); }
.cfg-stepper__val.is-changed { animation: cfg-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cfg-pop { from { transform: scale(0.6); } }
@keyframes cfg-press { 40% { transform: scale(0.985); } }

@media (prefers-reduced-motion: reduce) {
  .cfg-results > *, .cfg-phase, .cfg-spread__bar span, .cfg-flash, .cfg.is-entering > *,
  .cfg-card.is-changed.is-on, .cfg-card.is-changed.is-on::after, .is-changed .cfg-check.is-on,
  .cfg-seg__opt.is-changed, .cfg-stepper__val.is-changed { animation: none; }
  button.cfg-card:hover, .cfg-go:hover .cfg-arrow, .cfg-back:hover .cfg-arrow { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}