/* Bytemerica · /en — the machine home's own pieces, 2026-09-26.
 *
 * Source of truth for public/home-v3/machine-home.<sha8>.css: edit HERE,
 * then run `npx tsx scripts/home-css/build.ts`. tests/unit/machine-home-css.test.ts
 * fails if the served file is not the build of this one, if a rule escapes
 * .bm-machine, or if a colour appears that is not a token.
 *
 * The page wears the live home's stylesheet (en-zh-home.css, `.bm-ordem-home`
 * on the same element) and its components; Feng, 2026-09-26: keep the live
 * design language. This file adds only what that sheet has no component
 * for — the command field in the hero, the mission board, the clocks, the
 * outcome rows — and builds each one out of the live vocabulary:
 *   · ruled lists, a hairline between rows, an ink rule over a ledger;
 *   · cal as the second surface (the board is a cal panel on the white page);
 *   · Figtree for everything structural, the voice only for the visitor's
 *     own sentence, mono only for the repeated key of a ruled list;
 *   · anil for the action and the links, ipê only as the "no ar" dot, ipê
 *     rosa only as the waiting dot (the step that waits on the visitor);
 *   · no shadow, no gradient, radius 16 / 8 / pill;
 *   · motion only in answer to the visitor: the board prints its lines when a
 *     sentence is sent (tokens.css --d-slow "a line printing", --stagger-print)
 *     and arrives in the HTML already assembled. Nothing moves on its own.
 * Every value is a token; no hex literal appears below.
 */

.bm-machine {
  /* tokens.css motion values the live home sheet does not declare */
  --d-base: 300ms;
  --d-slow: 500ms;
  --stagger-print: 65ms;
}
.bm-machine .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ============================================================ § 01 ====== */
/* The command sits where the live hero's action row sits, in the live
   form's own field (.field .voice-field). */
.bm-machine .cmd-hero { margin-top: clamp(28px, 4vw, 40px); max-width: 620px; }
.bm-machine .cmd-hero .actions { margin-top: 20px; }
.bm-machine .cmd-hint { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
/* ipê on white is 1.9:1; the message is set in ink, the field keeps the ipê edge. */
.bm-machine .cmd-hero .field-error { color: var(--ink); }
.bm-machine .on-night .cmd-hint { color: var(--dim); }

/* The four sentences, ruled like the live "How to start". */
.bm-machine .try-list { margin-top: 20px; border-top: 1px solid var(--rule); }
.bm-machine .try-list button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px;
  align-items: baseline; width: 100%; min-height: 44px; padding: 16px 0; border: 0;
  border-bottom: 1px solid var(--rule); background: none; color: var(--ink); text-align: left;
  font: 400 16.5px/1.45 var(--f-sys); cursor: pointer; }
.bm-machine .try-list i { font-style: normal; color: var(--signal); }
.bm-machine .try-list button:hover span { color: var(--signal); }
/* "No ar": the one thing on the page that is live is the clock. */
.bm-machine .now-line { display: flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.bm-machine .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); }

/* /zh asks the question over the field, since its h1 is its ruled title. */
.bm-machine .cmd-hero .field label.ask { font: 500 var(--t-title)/1.35 var(--f-sys); color: var(--ink); }
.bm-machine.cjk .cmd-hero .field label.ask { letter-spacing: 0; }
.bm-machine .hero-sub { margin-top: 22px; }
/* /pt: the live blanks, drawn inline in the question's voice. Each blank is
   a native select — the phone opens its own picker, a screen reader names it
   by the live label ("O que você quer?"). The action colour marks what can
   be changed. */
.bm-machine .blanks { font-family: var(--f-voice); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1.7; color: var(--ink); max-width: 30ch; }
.bm-machine .blank { position: relative; display: inline-block; vertical-align: baseline; }
/* The hidden mirror holds the chosen words and sizes the blank; the select
   lies over it, out of flow, so its longest option never widens the gap. */
.bm-machine .blank .mirror { display: inline-block; visibility: hidden; white-space: nowrap; min-height: 44px;
  padding: 0 1.05em 0 0.08em; border-bottom: 2px solid transparent; }
.bm-machine .blank select { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0 1.05em 0 0.08em; border: 0; border-bottom: 2px solid var(--signal); border-radius: 0;
  background: transparent; color: var(--signal); font: inherit; cursor: pointer; }
.bm-machine .blank::after { content: "▾"; position: absolute; right: 0.15em; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 0.6em; color: var(--signal); pointer-events: none; }
.bm-machine .blank select:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.bm-machine .blanks-field .cmd-hint { margin-top: 6px; }
.bm-machine .toggle { padding: 0; min-height: 24px; border: 0; background: none; color: var(--signal);
  font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bm-machine .on-night .toggle { color: var(--aqua); }
.bm-machine .on-night .blanks { color: var(--page); }
.bm-machine .on-night .blank select { color: var(--aqua); border-bottom-color: var(--aqua); }
.bm-machine .on-night .blank select option { color: var(--ink); }
.bm-machine .on-night .blank::after { color: var(--aqua); }

/* ============================================================ § 02 ====== */
.bm-machine .h.turn span { display: block; color: var(--ink-3); }

/* The board: a cal panel on the white page, ruled inside like the ledger. */
.bm-machine .board { background: var(--paper); border-radius: var(--r-card);
  padding: clamp(24px, 3.6vw, 56px); }
.bm-machine .board-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
  padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
/* Focus lands here after a sentence is sent, for screen readers; the page
   scrolling to the board is the visible cue. Specific enough to outrank the
   shell's own ring (0,3,0), whichever sheet loads last. */
.bm-machine .board .board-id:is(:focus, :focus-visible) { outline: none; }
.bm-machine .board-id span { margin-left: 6px; font-family: var(--f-data); font-weight: 500;
  font-size: 13px; letter-spacing: 0.08em; color: var(--ink-2); }
.bm-machine .badge { padding: 4px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-pill);
  font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); }
.bm-machine .board[data-mode="yours"] .badge { border-color: var(--signal-3); background: var(--signal-3); color: var(--ink); }
.bm-machine .board-clock { margin-left: auto; font-size: var(--t-small); color: var(--ink-2);
  font-variant-numeric: tabular-nums; }

/* The eight steps, one rule each; the one waiting on the visitor carries
   the waiting dot. */
.bm-machine .pipe { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 16px; margin-top: 24px; }
.bm-machine .pipe li { padding-top: 12px; border-top: 2px solid var(--rule);
  transition: border-color var(--d-base) var(--ease); }
.bm-machine .pipe b { display: block; font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--ink-3); }
.bm-machine .pipe small { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.bm-machine .pipe :is([data-state="done"], [data-state="here"]) { border-top-color: var(--ink); }
.bm-machine .pipe :is([data-state="done"], [data-state="here"]) b { color: var(--ink); }
.bm-machine .pipe [data-state="done"] small { color: var(--ink-2); }
.bm-machine .pipe [data-state="here"] small { color: var(--ink); }
.bm-machine .pipe [data-state="here"] b::before { content: ""; display: inline-block; width: 7px; height: 7px;
  margin-right: 8px; border-radius: 50%; background: var(--indigo); vertical-align: 0.12em; }
.bm-machine .pipe-note { margin-top: 14px; }

/* The visitor's sentence in the voice; what the rules understood sits on a
   quiet anil plate, named above the word. */
.bm-machine .said { margin: clamp(32px, 4vw, 48px) 0 clamp(28px, 3.5vw, 40px); max-width: 34ch;
  font-family: var(--f-voice); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1.62; letter-spacing: -0.01em; color: var(--ink);
  text-wrap: pretty; }
.bm-machine .said mark { position: relative; padding: 0 0.1em; background: var(--signal-3); color: inherit;
  transition: background-color var(--d-base) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger-print)); }
.bm-machine .said mark::before { content: attr(data-k); position: absolute; left: 0.1em; bottom: 100%;
  font: 400 12px/1.3 var(--f-sys); font-style: normal; letter-spacing: 0; color: var(--ink-2);
  white-space: nowrap; transition: opacity var(--d-base) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger-print)); }

.bm-machine .board-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 64px); align-items: start; }

/* What we read, as the ledger is set: an ink rule, the key in mono. */
.bm-machine .req dl { margin-top: 16px; border-top: 1px solid var(--ink); }
.bm-machine .req dl > div { display: grid; grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: 16px;
  align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.bm-machine .req dt { font-family: var(--f-data); font-weight: 500; font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-2); }
.bm-machine .req dd { font-size: 16px; line-height: 1.45; color: var(--ink); }
.bm-machine .req .none dd { color: var(--ink-3); }
.bm-machine .req .fine { margin-top: 14px; }

/* The channels, one per rule — the live catalogue's row, with its share on
   the right and a status light: ipê for "no ar", a hollow ring for held. */
.bm-machine .chan { margin-top: 16px; border-top: 1px solid var(--ink); }
.bm-machine .chan li { position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 160px);
  grid-template-areas: "name alloc" "role alloc" "cap state";
  gap: 4px 24px; padding: 18px 0 24px; border-bottom: 1px solid var(--rule); }
.bm-machine .c-name { grid-area: name; display: grid; gap: 2px; }
.bm-machine .c-name small { font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); }
.bm-machine .c-name b { font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--ink); }
.bm-machine .c-role { grid-area: role; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.bm-machine .c-cap { grid-area: cap; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.bm-machine .c-cap b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.bm-machine .c-cap small { font-size: 14px; }
.bm-machine .c-alloc { grid-area: alloc; justify-self: end; text-align: right; }
.bm-machine .c-alloc b { display: block; font-weight: 500; font-size: 26px; line-height: 1.1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bm-machine .c-alloc small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bm-machine .c-state { grid-area: state; justify-self: end; align-self: end;
  font-size: var(--t-small); line-height: 1.4; color: var(--ink); }
.bm-machine .c-state i { font-style: normal; }
.bm-machine .c-state .fin::before { content: ""; display: inline-block; width: 7px; height: 7px;
  margin-right: 8px; border-radius: 50%; background: var(--aqua); vertical-align: 0.08em; }
.bm-machine .c-state .ev { color: var(--ink-2); }
.bm-machine .c-bar { position: absolute; left: 0; right: 0; bottom: 9px; height: 3px;
  border-radius: 2px; background: var(--paper-2); overflow: hidden; }
.bm-machine .c-bar span { display: block; height: 100%; background: var(--signal);
  transform-origin: left center; transform: scaleX(var(--pct, 0));
  transition: transform var(--d-slow) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger-print)); }
.bm-machine .chan :is([data-state="held"], [data-state="on-request"]) :is(.c-name b, .c-state) { color: var(--ink-2); }
.bm-machine .chan :is([data-state="held"], [data-state="on-request"]) .c-alloc small { max-width: 18ch; margin-left: auto; }
.bm-machine .chan :is([data-state="held"], [data-state="on-request"]) .fin::before {
  background: transparent; box-sizing: border-box; border: 1.5px solid var(--ink-3); }
.bm-machine .rack > .fine { margin-top: 14px; }

.bm-machine .board-lower { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
  margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); }
.bm-machine .where .map { max-width: 240px; margin: 0 0 24px; }
.bm-machine .papers { margin-top: 16px; border-top: 1px solid var(--rule); }
.bm-machine .papers > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.bm-machine .papers dt { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.bm-machine .papers dd { font-size: 16px; line-height: 1.45; color: var(--ink); }

.bm-machine .next { display: grid; gap: clamp(28px, 3vw, 40px); }
.bm-machine .budget-v { margin: 8px 0 6px; font-weight: 500; font-size: clamp(30px, 3vw, 40px); line-height: 1.1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bm-machine .budget-v span { font-weight: 400; font-size: 16px; letter-spacing: 0; color: var(--ink-2); }
.bm-machine .budget input { display: block; width: 100%; height: 44px; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
.bm-machine .budget input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--paper-3); }
.bm-machine .budget input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--paper-3); }
.bm-machine .budget input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px;
  margin-top: -10px; border: 0; border-radius: 50%; background: var(--signal); }
.bm-machine .budget input::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--signal); }
.bm-machine .budget input:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.bm-machine .budget .fine { margin-top: 6px; }
.bm-machine .timeline ol { margin-top: 16px; border-top: 1px solid var(--ink); }
.bm-machine .timeline li { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 16px;
  align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.bm-machine .timeline b { font-weight: 500; font-size: 15px; line-height: 1.45; color: var(--ink); }
.bm-machine .timeline span { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.bm-machine .moment { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--ink); }

.bm-machine .board-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  margin-top: clamp(32px, 4vw, 48px); }
.bm-machine .board-cta .fine { max-width: 52ch; }
.bm-machine .honesty { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }

/* ---- printing. Phase 5 is the resting state and what the server renders:
   without JavaScript, or with reduced motion, the board is simply there. --- */
.bm-machine .board :is(.at0, .at2, .at3, .at4, .at5) {
  transition: opacity var(--d-slow) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger-print)); }
.bm-machine .board[data-phase="0"] :is(.at2, .at3, .at4, .at5),
.bm-machine .board[data-phase="1"] :is(.at2, .at3, .at4, .at5),
.bm-machine .board[data-phase="2"] :is(.at3, .at4, .at5),
.bm-machine .board[data-phase="3"] :is(.at4, .at5),
.bm-machine .board[data-phase="4"] .at5 { opacity: 0; transition-delay: 0ms; }
.bm-machine .board[data-phase="0"] .said mark { background-color: transparent; transition-delay: 0ms; }
.bm-machine .board[data-phase="0"] .said mark::before { opacity: 0; transition-delay: 0ms; }
.bm-machine .board[data-phase="0"] .c-bar span,
.bm-machine .board[data-phase="1"] .c-bar span,
.bm-machine .board[data-phase="2"] .c-bar span,
.bm-machine .board[data-phase="3"] .c-bar span { transform: scaleX(0); transition-delay: 0ms; }
.bm-machine .board[data-phase="0"] .c-state .fin,
.bm-machine .board[data-phase="1"] .c-state .fin,
.bm-machine .board[data-phase="2"] .c-state .fin,
.bm-machine .board[data-phase="3"] .c-state .fin { display: none; }
.bm-machine .board[data-phase="4"] .c-state .ev,
.bm-machine .board[data-phase="5"] .c-state .ev { display: none; }
.bm-machine .board[data-phase="3"] .c-alloc b { opacity: 0.25; }

/* Chinese: the voice is Songti, upright, and a Han label is not tracked. */
.bm-machine.cjk .said { max-width: 20em; font-family: var(--f-han); font-style: normal; letter-spacing: 0; line-height: 1.9; }
.bm-machine.cjk .said mark::before { letter-spacing: 0; }
/* A Chinese term is a few characters; split across lines it stops reading as one word. */
.bm-machine.cjk .said mark { white-space: nowrap; }
.bm-machine.cjk :is(.req dt, .board-id span) { letter-spacing: 0.04em; }
.bm-machine.cjk :is(.pipe b, .c-name b, .outcomes summary b, .clocks b, .budget-v) { letter-spacing: 0; }

/* ============================================================ § 03 ====== */
.bm-machine .now-t { margin-bottom: 16px; }
.bm-machine .now-board { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px); align-items: start; }
.bm-machine .clocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.bm-machine .clocks li { display: grid; gap: 4px; align-content: start; padding: 16px 24px 16px 0;
  border-bottom: 1px solid var(--rule); }
.bm-machine .clocks span { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.bm-machine .clocks b { font-weight: 500; font-size: clamp(30px, 3vw, 40px); line-height: 1.05;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.bm-machine .clocks small { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.bm-machine .dates { border-top: 1px solid var(--rule); }
.bm-machine .dates li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px;
  align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.bm-machine .dates span { font-size: 16.5px; line-height: 1.45; color: var(--ink); }
.bm-machine .dates b { font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
.bm-machine .dates small { grid-column: 1 / -1; font-size: var(--t-small); color: var(--ink-2); }
.bm-machine .now-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: var(--block-y); }
.bm-machine .now-all { margin-top: 16px; font-size: 16px; line-height: 2; }
.bm-machine .now-next { margin-top: var(--block-y); }
.bm-machine .now-next b { font-weight: 500; color: var(--ink); }

/* ============================================================ § 04 ====== */
.bm-machine .pieces { margin-top: 24px; }
.bm-machine .cap-t { margin-top: clamp(56px, 7vw, 96px); margin-bottom: 20px; }
.bm-machine .outcomes { border-top: 1px solid var(--rule); }
.bm-machine .outcomes li { border-bottom: 1px solid var(--rule); }
.bm-machine .outcomes summary { display: grid; grid-template-columns: minmax(0, 3em) minmax(0, 1fr) auto 24px;
  gap: 8px 24px; align-items: baseline; min-height: 44px; padding: 22px 0; cursor: pointer; list-style: none; }
.bm-machine .outcomes summary::-webkit-details-marker { display: none; }
.bm-machine .outcomes summary::after { content: "+"; font: 400 22px/1 var(--f-sys); color: var(--signal); text-align: right; }
.bm-machine .outcomes details[open] summary::after { content: "−"; }
.bm-machine .outcomes summary b { font-weight: 500; font-size: 19px; line-height: 1.35; color: var(--ink); }
.bm-machine .outcomes summary:hover b { color: var(--signal); }
.bm-machine .o-runs { font-size: 15px; line-height: 1.45; color: var(--ink-2); text-align: right; }
.bm-machine .o-body { padding: 0 0 24px calc(3em + 24px); max-width: calc(68ch + 3em); }
.bm-machine .o-body p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.bm-machine .o-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; line-height: 2.2; }
.bm-machine .entry { margin-top: 24px; }

/* ============================================================ § 05 ====== */
.bm-machine .telemetry + .ledger { margin-top: var(--block-y); }

/* ============================================================ § 07 ====== */
.bm-machine .steps.line { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bm-machine .partner-cta { margin-top: 32px; font-size: 16px; line-height: 2; }

/* ============================================================ narrow ==== */
@media (max-width: 1080px) {
  .bm-machine .board-grid, .bm-machine .board-lower, .bm-machine .now-board,
  .bm-machine .now-grid { grid-template-columns: minmax(0, 1fr); }
  .bm-machine .pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
  .bm-machine .steps.line { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .bm-machine .board { padding: 20px; }
  .bm-machine .board-clock { margin-left: 0; width: 100%; }
  .bm-machine .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-machine .chan li { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name name" "role role" "cap cap" "alloc state"; }
  .bm-machine .c-alloc { justify-self: start; text-align: left; margin-top: 8px; }
  .bm-machine .chan :is([data-state="held"], [data-state="on-request"]) .c-alloc small { margin-left: 0; }
  .bm-machine .clocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-machine .timeline li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bm-machine .outcomes summary { grid-template-columns: minmax(0, 2em) minmax(0, 1fr) 20px; gap: 8px 12px; }
  .bm-machine .o-runs { display: none; }
  .bm-machine .o-body { padding-left: 0; }
  .bm-machine .steps.line { grid-template-columns: minmax(0, 1fr); }
  .bm-machine .cmd-hero { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-machine *, .bm-machine *::before, .bm-machine *::after { transition: none !important; }
}