/* ShirtMath B2B — hero Fit API explainer
   =========================================================================
   SCOPE FIREWALL: every selector below is scoped under `.sm-b2b`.
   The consumer site shares this stylesheet's cascade — an unscoped rule here
   would restyle ~60 consumer pages. There are no bare element selectors,
   no bare utility classes and no unscoped component classes in this file.
   (The supplied shirtmath-theme.css leaks `.sm-input`, `.sm-select` and
   `.sm-feature-grid`; those are its bugs, not a pattern to copy.)

   Requires shirtmath-theme.css for the design tokens.

   MOTION MODEL
   The default state of this component is its FINAL state: with JavaScript
   disabled, every step renders at once and still reads as an explanation.
   sm-b2b-hero.js adds `.sm-fitflow--js`, which re-hides the steps, then walks
   cumulative `.is-s1` … `.is-s7` classes. prefers-reduced-motion never gets
   `--js`, and is force-reset below as a belt-and-braces second line.
   Only `transform` and `opacity` are ever animated.
   ========================================================================= */

.sm-b2b .sm-fitflow {
  --ff-hair: rgba(255, 255, 255, .10);
  --ff-glass: rgba(255, 255, 255, .045);
  --ff-dim: rgba(255, 255, 255, .66);
  --ff-quiet: rgba(255, 255, 255, .46);
  --ff-ease: cubic-bezier(.22, .72, .28, 1);
  --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--ff-hair);
  border-radius: var(--sm-radius-lg);
  background: var(--ff-glass);
  box-shadow: var(--sm-shadow-lg);
  color: var(--sm-white);
}

/* ---- decorative depth layers (aria-hidden in markup) ------------------- */

.sm-b2b .sm-fitflow__aura {
  position: absolute;
  inset: -24% -12% auto -12%;
  z-index: 0;
  height: 78%;
  pointer-events: none;
  background: radial-gradient(58% 62% at 50% 38%, rgba(47, 128, 255, .30), rgba(47, 128, 255, 0) 72%);
}

.sm-b2b .sm-fitflow__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .55;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 50% 34%, #000, transparent 74%);
  mask-image: radial-gradient(circle at 50% 34%, #000, transparent 74%);
}

/* ---- panel header / footer -------------------------------------------- */

.sm-b2b .sm-fitflow__head,
.sm-b2b .sm-fitflow__flow,
.sm-b2b .sm-fitflow__foot {
  position: relative;
  z-index: 1;
}

.sm-b2b .sm-fitflow__eyebrow {
  margin: 0;
  color: var(--sm-cyan-400);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sm-b2b .sm-fitflow__title {
  margin: 8px 0 20px;
  max-width: 30ch;
  color: var(--sm-white);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.sm-b2b .sm-fitflow__foot {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--ff-hair);
  color: var(--ff-quiet);
  font-size: 11.5px;
  line-height: 1.6;
}

.sm-b2b .sm-fitflow__foot code,
.sm-b2b .sm-fitflow__cap code {
  color: var(--sm-cyan-400);
  font-family: var(--ff-mono);
  font-size: .94em;
  letter-spacing: -.01em;
}

/* ---- layout ------------------------------------------------------------ */

/* Z-pattern: garment (1) → request/API (2,3) → response (4) → matches (5).
   Reading order and DOM order agree, and each column stays short enough that
   the whole sequence still fits a hero viewport. */
.sm-b2b .sm-fitflow__flow {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: 16px;
  align-items: stretch;
}

.sm-b2b .sm-fitflow__stage--ref   { grid-column: 1; grid-row: 1; }
.sm-b2b .sm-fitflow__pipe         { grid-column: 2; grid-row: 1; }
.sm-b2b .sm-fitflow__stage--res   { grid-column: 1; grid-row: 2; }
.sm-b2b .sm-fitflow__stage--match { grid-column: 2; grid-row: 2; }

.sm-b2b .sm-fitflow__stage--ref,
.sm-b2b .sm-fitflow__stage--res,
.sm-b2b .sm-fitflow__stage--match,
.sm-b2b .sm-fitflow__pipe {
  display: flex;
  flex-direction: column;
}

.sm-b2b .sm-fitflow__stage--res .sm-fitflow__card,
.sm-b2b .sm-fitflow__stage--match .sm-fitflow__card { flex: 1; }

.sm-b2b .sm-fitflow__stage--ref .sm-fitflow__card { flex: 1; }

.sm-b2b .sm-fitflow__step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--ff-dim);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
}

.sm-b2b .sm-fitflow__step-n {
  flex: none;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(66, 199, 255, .40);
  border-radius: 50%;
  color: var(--sm-cyan-400);
  background: rgba(47, 128, 255, .16);
  font-size: 10px;
  font-weight: 900;
}

/* ---- surfaces ---------------------------------------------------------- */

.sm-b2b .sm-fitflow__card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(220, 229, 240, .55);
  border-radius: var(--sm-radius-md);
  background: var(--sm-surface);
  box-shadow: 0 22px 60px rgba(2, 8, 23, .34);
  color: var(--sm-ink);
}

.sm-b2b .sm-fitflow__card--ref {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 11px 12px;
}

.sm-b2b .sm-fitflow__cap {
  margin: 0;
  color: var(--sm-muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.sm-b2b .sm-fitflow__cap strong { color: var(--sm-ink); font-weight: 800; }

/* ---- 1 · garment diagram ---------------------------------------------- */

/* `margin: auto` (not justify-content) so the flex free space in a stretched
   reference card lands around the diagram and the caption stays on the floor
   of the card, level with the response card's own last line. */
.sm-b2b .sm-fitflow__garment {
  position: relative;
  width: min(100%, 300px);
  margin: auto;
  aspect-ratio: 320 / 250;
}

.sm-b2b .sm-fitflow__tee {
  width: 100%;
  height: 100%;
}

.sm-b2b .sm-fitflow__tee-body {
  fill: var(--sm-surface-3);
  stroke: #adc0d4;
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.sm-b2b .sm-fitflow__tee-seam {
  fill: none;
  stroke: #c2d1e1;
  stroke-width: 2;
  stroke-linecap: round;
}

.sm-b2b .sm-fitflow__rule-bar,
.sm-b2b .sm-fitflow__rule-tick {
  stroke: var(--sm-blue-500);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.sm-b2b .sm-fitflow__rule-tick { stroke-width: 2.6; }

/* Each rule is authored as a horizontal segment starting at local x=0; the
   parent <g> carries the translate/rotate as an SVG attribute so the CSS
   transform below never fights it. Origin 0 0 lands on the segment's left
   end under both `fill-box` and legacy `view-box` resolution. */
.sm-b2b .sm-fitflow__rule-grow {
  transform-box: fill-box;
  transform-origin: 0 0;
  transform: scaleX(1);
}

/* ---- 1 · measurement value chips -------------------------------------- */
/* Anchors position; chips animate. Positioning never uses transform, so the
   reduced-motion `transform: none` reset can never knock a chip out of place. */

.sm-b2b .sm-fitflow__anchor {
  position: absolute;
  display: flex;
  pointer-events: none;
}

.sm-b2b .sm-fitflow__anchor--shoulder { left: 0; right: 0; top: 1%; justify-content: center; }
.sm-b2b .sm-fitflow__anchor--sleeve   { left: 73%; right: 0; top: 27%; justify-content: flex-start; }
.sm-b2b .sm-fitflow__anchor--chest    { left: 0; width: 34%; top: 43%; justify-content: flex-end; }
.sm-b2b .sm-fitflow__anchor--length   { left: 66%; right: 0; top: 55%; justify-content: flex-start; }

.sm-b2b .sm-fitflow__val {
  display: grid;
  gap: 1px;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid #cfe1f8;
  border-radius: 8px;
  background: var(--sm-white);
  box-shadow: 0 6px 16px rgba(8, 31, 60, .12);
  text-align: center;
  white-space: nowrap;
  opacity: 1;
}

.sm-b2b .sm-fitflow__val-k {
  color: var(--sm-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sm-b2b .sm-fitflow__val-v {
  color: var(--sm-blue-700);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: -.02em;
}

/* ---- 2 · request card -------------------------------------------------- */

.sm-b2b .sm-fitflow__card--code { padding: 12px 13px 11px; }

.sm-b2b .sm-fitflow__method {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  color: var(--sm-ink);
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.sm-b2b .sm-fitflow__verb {
  flex: none;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--sm-white);
  background: var(--sm-blue-600);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .06em;
}

.sm-b2b .sm-fitflow__pay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sm-b2b .sm-fitflow__pay-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--sm-surface-3);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  opacity: 1;
}

.sm-b2b .sm-fitflow__pay-item--wide { grid-column: 1 / -1; }
.sm-b2b .sm-fitflow__pay-item span { color: var(--sm-muted); }
.sm-b2b .sm-fitflow__pay-item b { color: var(--sm-ink); font-weight: 800; }

.sm-b2b .sm-fitflow__hdrs {
  margin: 8px 0 0;
  color: var(--sm-muted);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

/* ---- rails between stacked steps (decorative) -------------------------- */

.sm-b2b .sm-fitflow__rail {
  position: relative;
  width: 2px;
  height: 18px;
  margin: 7px 0 7px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}

.sm-b2b .sm-fitflow__rail > span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sm-accent-gradient);
  transform-origin: top center;
  transform: scaleY(1);
}

/* ---- 3 · API node ------------------------------------------------------ */

.sm-b2b .sm-fitflow__card--api {
  padding: 12px 13px;
  border-color: rgba(66, 199, 255, .30);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(47, 128, 255, .30), rgba(47, 128, 255, 0) 62%),
    linear-gradient(135deg, var(--sm-navy-900), var(--sm-navy-800));
  color: var(--sm-white);
}

.sm-b2b .sm-fitflow__api-name {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.sm-b2b .sm-fitflow__api-state {
  display: grid;
  margin: 5px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
}

.sm-b2b .sm-fitflow__api-state-working,
.sm-b2b .sm-fitflow__api-state-done {
  grid-area: 1 / 1;
}

.sm-b2b .sm-fitflow__api-state-working {
  color: rgba(255, 255, 255, .70);
  opacity: 0;
}

.sm-b2b .sm-fitflow__api-state-done {
  color: #6fe4b4;
  font-family: var(--ff-mono);
  font-weight: 700;
  opacity: 1;
}

.sm-b2b .sm-fitflow__scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.sm-b2b .sm-fitflow__scan > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(90deg, rgba(66, 199, 255, 0), rgba(66, 199, 255, .30), rgba(66, 199, 255, 0));
  transform: translateX(-110%);
}

/* ---- 4 · response card ------------------------------------------------- */

.sm-b2b .sm-fitflow__card--res { padding: 13px; }

.sm-b2b .sm-fitflow__res-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "k    prod"
    "size prod";
  align-items: center;
  gap: 0 12px;
}

.sm-b2b .sm-fitflow__res-k {
  grid-area: k;
  margin: 0;
  color: var(--sm-muted);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 700;
}

.sm-b2b .sm-fitflow__res-size {
  grid-area: size;
  margin: 0;
  color: var(--sm-ink);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  opacity: 1;
}

.sm-b2b .sm-fitflow__res-prod {
  grid-area: prod;
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 12px;
  border-left: 1px solid var(--sm-border);
}

.sm-b2b .sm-fitflow__res-prod-n {
  color: var(--sm-ink);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.sm-b2b .sm-fitflow__res-prod-m {
  color: var(--sm-muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.sm-b2b .sm-fitflow__res-why {
  margin: 11px 0 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--sm-surface-2);
  color: var(--sm-text);
  font-size: 11.5px;
  line-height: 1.6;
  opacity: 1;
}

.sm-b2b .sm-fitflow__res-why-k {
  display: block;
  margin-bottom: 3px;
  color: var(--sm-muted);
  font-family: var(--ff-mono);
  font-size: 9.5px;
  font-weight: 700;
}

/* ---- 5 · matching catalog items --------------------------------------- */

.sm-b2b .sm-fitflow__card--match {
  display: flex;
  flex-direction: column;
  padding: 13px;
}

.sm-b2b .sm-fitflow__card--match .sm-fitflow__tiles { margin-block: auto 10px; }

.sm-b2b .sm-fitflow__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.sm-b2b .sm-fitflow__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px 9px;
  border: 1px solid var(--sm-border);
  border-radius: 11px;
  background: var(--sm-surface-2);
  text-align: center;
  opacity: 1;
}

.sm-b2b .sm-fitflow__tile-art {
  width: 34px;
  height: 34px;
  color: var(--sm-blue-600);
}

.sm-b2b .sm-fitflow__tile-art svg { width: 100%; height: 100%; fill: currentColor; }

.sm-b2b .sm-fitflow__tile-n {
  color: var(--sm-ink);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.3;
}

/* pushed to the floor of the tile so the size line stays on one baseline
   however many lines the product name takes */
.sm-b2b .sm-fitflow__tile-s {
  margin-top: auto;
  padding-top: 3px;
  color: var(--sm-muted);
  font-size: 9.5px;
  font-weight: 700;
}

.sm-b2b .sm-fitflow__cap--match { font-size: 11px; }

/* =========================================================================
   JS-DRIVEN SEQUENCE
   `.sm-fitflow--js` is added only when motion is allowed. Everything above
   is the final/static state; everything below hides it and steps it back in.
   ========================================================================= */

.sm-b2b .sm-fitflow--js .sm-fitflow__stage {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .46s var(--ff-ease), transform .46s var(--ff-ease);
  transition-delay: 0s;
}

.sm-b2b .sm-fitflow--js .sm-fitflow__rule-grow {
  transform: scaleX(0);
  transition: transform .62s var(--ff-ease);
  transition-delay: 0s;
}

.sm-b2b .sm-fitflow--js .sm-fitflow__val {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .34s ease, transform .34s var(--ff-ease);
  transition-delay: 0s;
}

.sm-b2b .sm-fitflow--js .sm-fitflow__pay-item {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .34s ease, transform .34s var(--ff-ease);
  transition-delay: 0s;
}

.sm-b2b .sm-fitflow--js .sm-fitflow__rail > span {
  transform: scaleY(0);
  transition: transform .42s var(--ff-ease);
}

.sm-b2b .sm-fitflow--js .sm-fitflow__api-state-working,
.sm-b2b .sm-fitflow--js .sm-fitflow__api-state-done,
.sm-b2b .sm-fitflow--js .sm-fitflow__scan {
  opacity: 0;
  transition: opacity .34s ease;
}

.sm-b2b .sm-fitflow--js .sm-fitflow__res-size {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .38s ease, transform .38s var(--ff-ease);
}

.sm-b2b .sm-fitflow--js .sm-fitflow__res-why {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .38s ease, transform .38s var(--ff-ease);
}

.sm-b2b .sm-fitflow--js .sm-fitflow__tile {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .38s ease, transform .38s var(--ff-ease);
  transition-delay: 0s;
}

/* step 1 — the reference garment arrives */
.sm-b2b .sm-fitflow--js.is-s1 .sm-fitflow__stage--ref { opacity: 1; transform: none; }

/* step 2 — guides draw, each value landing beside its own line */
.sm-b2b .sm-fitflow--js.is-s2 .sm-fitflow__rule--chest .sm-fitflow__rule-grow    { transform: scaleX(1); transition-delay: 40ms; }
.sm-b2b .sm-fitflow--js.is-s2 .sm-fitflow__val--chest                            { opacity: 1; transform: none; transition-delay: 380ms; }
.sm-b2b .sm-fitflow--js.is-s2 .sm-fitflow__rule--shoulder .sm-fitflow__rule-grow { transform: scaleX(1); transition-delay: 460ms; }
.sm-b2b .sm-fitflow--js.is-s2 .sm-fitflow__val--shoulder                         { opacity: 1; transform: none; transition-delay: 800ms; }
.sm-b2b .sm-fitflow--js.is-s2 .sm-fitflow__rule--length .sm-fitflow__rule-grow   { transform: scaleX(1); transition-delay: 880ms; }
.sm-b2b .sm-fitflow--js.is-s2 .sm-fitflow__val--length                           { opacity: 1; transform: none; transition-delay: 1300ms; }
.sm-b2b .sm-fitflow--js.is-s2 .sm-fitflow__rule--sleeve .sm-fitflow__rule-grow   { transform: scaleX(1); transition-delay: 1380ms; }
.sm-b2b .sm-fitflow--js.is-s2 .sm-fitflow__val--sleeve                           { opacity: 1; transform: none; transition-delay: 1700ms; }

/* step 3 — the measurements flow out as the request payload */
.sm-b2b .sm-fitflow--js.is-s3 .sm-fitflow__stage--req { opacity: 1; transform: none; }
.sm-b2b .sm-fitflow--js.is-s3 .sm-fitflow__pay-item { opacity: 1; transform: none; }
.sm-b2b .sm-fitflow--js.is-s3 .sm-fitflow__pay-item:nth-child(1) { transition-delay: 260ms; }
.sm-b2b .sm-fitflow--js.is-s3 .sm-fitflow__pay-item:nth-child(2) { transition-delay: 340ms; }
.sm-b2b .sm-fitflow--js.is-s3 .sm-fitflow__pay-item:nth-child(3) { transition-delay: 420ms; }
.sm-b2b .sm-fitflow--js.is-s3 .sm-fitflow__pay-item:nth-child(4) { transition-delay: 500ms; }
.sm-b2b .sm-fitflow--js.is-s3 .sm-fitflow__pay-item:nth-child(5) { transition-delay: 600ms; }

/* step 4 — the engine works */
.sm-b2b .sm-fitflow--js.is-s4 .sm-fitflow__stage--api { opacity: 1; transform: none; }
.sm-b2b .sm-fitflow--js.is-s4 .sm-fitflow__rail--1 > span { transform: scaleY(1); }
.sm-b2b .sm-fitflow--js.is-s4 .sm-fitflow__api-state-working { opacity: 1; }
.sm-b2b .sm-fitflow--js.is-s4 .sm-fitflow__scan { opacity: 1; }
.sm-b2b .sm-fitflow--js.is-s4 .sm-fitflow__scan > span {
  animation: sm-b2b-ff-scan 1.15s var(--ff-ease) infinite;
}

/* step 5 — the recommendation lands (rules after step 4 so the working line
   loses the cascade tie-break once both classes are present) */
.sm-b2b .sm-fitflow--js.is-s5 .sm-fitflow__stage--res { opacity: 1; transform: none; }
.sm-b2b .sm-fitflow--js.is-s5 .sm-fitflow__res-size { opacity: 1; transform: none; transition-delay: 140ms; }
.sm-b2b .sm-fitflow--js.is-s5 .sm-fitflow__api-state-working { opacity: 0; }
.sm-b2b .sm-fitflow--js.is-s5 .sm-fitflow__api-state-done { opacity: 1; }
.sm-b2b .sm-fitflow--js.is-s5 .sm-fitflow__scan { opacity: 0; }
.sm-b2b .sm-fitflow--js.is-s5 .sm-fitflow__scan > span { animation: none; }

/* step 6 — the honest part: why that size */
.sm-b2b .sm-fitflow--js.is-s6 .sm-fitflow__res-why { opacity: 1; transform: none; }

/* step 7 — matching catalog items, last */
.sm-b2b .sm-fitflow--js.is-s7 .sm-fitflow__stage--match { opacity: 1; transform: none; }
.sm-b2b .sm-fitflow--js.is-s7 .sm-fitflow__tile { opacity: 1; transform: none; }
.sm-b2b .sm-fitflow--js.is-s7 .sm-fitflow__tile:nth-child(1) { transition-delay: 140ms; }
.sm-b2b .sm-fitflow--js.is-s7 .sm-fitflow__tile:nth-child(2) { transition-delay: 240ms; }
.sm-b2b .sm-fitflow--js.is-s7 .sm-fitflow__tile:nth-child(3) { transition-delay: 340ms; }

@keyframes sm-b2b-ff-scan {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(240%); }
}

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 700px) {
  .sm-b2b .sm-fitflow { padding: 16px; }
  .sm-b2b .sm-fitflow__flow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sm-b2b .sm-fitflow__stage--ref,
  .sm-b2b .sm-fitflow__pipe,
  .sm-b2b .sm-fitflow__stage--res,
  .sm-b2b .sm-fitflow__stage--match { grid-column: 1; grid-row: auto; }
  .sm-b2b .sm-fitflow__title { font-size: 16px; margin-bottom: 18px; }
}

@media (max-width: 430px) {
  .sm-b2b .sm-fitflow { padding: 14px; }
  .sm-b2b .sm-fitflow__pay { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 6px; }
  .sm-b2b .sm-fitflow__res-size { font-size: 34px; }
  .sm-b2b .sm-fitflow__tiles { gap: 7px; }
  .sm-b2b .sm-fitflow__tile { padding: 9px 4px 8px; }
  .sm-b2b .sm-fitflow__tile-art { width: 28px; height: 28px; }
  .sm-b2b .sm-fitflow__tile-n { font-size: 9.5px; }
  .sm-b2b .sm-fitflow__val { padding: 3px 5px; border-radius: 7px; }
  .sm-b2b .sm-fitflow__val-k { font-size: 8px; }
  .sm-b2b .sm-fitflow__val-v { font-size: 11px; }
}

/* ---- reduced motion ----------------------------------------------------
   sm-b2b-hero.js never adds `--js` under this preference, so normally none of
   this is reached. It stays as a hard guarantee for the case where the user
   flips the preference after the class is already on the element. ------- */

@media (prefers-reduced-motion: reduce) {
  .sm-b2b .sm-fitflow,
  .sm-b2b .sm-fitflow *,
  .sm-b2b .sm-fitflow *::before,
  .sm-b2b .sm-fitflow *::after {
    transition: none !important;
    animation: none !important;
  }

  .sm-b2b .sm-fitflow--js .sm-fitflow__stage,
  .sm-b2b .sm-fitflow--js .sm-fitflow__rule-grow,
  .sm-b2b .sm-fitflow--js .sm-fitflow__val,
  .sm-b2b .sm-fitflow--js .sm-fitflow__pay-item,
  .sm-b2b .sm-fitflow--js .sm-fitflow__rail > span,
  .sm-b2b .sm-fitflow--js .sm-fitflow__res-size,
  .sm-b2b .sm-fitflow--js .sm-fitflow__res-why,
  .sm-b2b .sm-fitflow--js .sm-fitflow__tile {
    opacity: 1 !important;
    transform: none !important;
  }

  .sm-b2b .sm-fitflow--js .sm-fitflow__api-state-done { opacity: 1 !important; }
  .sm-b2b .sm-fitflow--js .sm-fitflow__api-state-working,
  .sm-b2b .sm-fitflow--js .sm-fitflow__scan { opacity: 0 !important; }
}