/* ColorConnect system map (v3): pictogram nodes, in-diagram step markers, caption with previous / next.
   One color per step, set once on each step card (--c, --tint). The script copies the active pair onto .sysmap,
   so the cards, markers, caption, notches, nodes and wires all read the same two variables.
   The diagram exists in two versions: landscape (.sm-land) and portrait for phones (.sm-port, under 760px).
   Pictograms: Phosphor Icons (MIT), phosphoricons.com; presses and scanner drawn in the same style (assets/icons/). */

/* --sm-bleed: the side padding of the section around the map, so the cards row on phones runs edge to edge */
.sysmap{--c:#19AAE3;--tint:var(--t-blue,#e1f3fb);--sm-bleed:var(--pg-gut,20px);display:grid;gap:18px}
.fit-map .sysmap{--sm-bleed:var(--gutter,24px)}   /* home page: that section is padded with --gutter */

/* ---------- step cards ---------- */
.sm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sm-steps li{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px;border-radius:18px;background:#fff;border:1px solid var(--pg-line,#e3e5e1);cursor:pointer;transition:background-color .35s,border-color .25s,box-shadow .25s,opacity .25s}
.sm-steps button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0 48px 0 0;background:none;border:0;text-align:left;font:inherit;color:#141416;cursor:pointer}
.sm-steps button:focus-visible{outline:none}
.sm-steps li:has(button:focus-visible){outline:3px solid #141416;outline-offset:2px}
.sm-steps .mono{font-size:11.5px;color:var(--pg-muted,#6a6f74)}
.sm-steps strong{font-size:17px;line-height:1.2;letter-spacing:-.02em}
.sm-steps p{margin:0;font-size:13.5px;line-height:1.5;color:var(--pg-muted,#6a6f74)}
.sm-steps .sm-bar{position:absolute;left:16px;right:16px;top:0;height:3px;border-radius:0 0 3px 3px;background:#eceee9;overflow:hidden}
.sm-steps .sm-bar::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:0 50%}
.sm-steps li.on{background:var(--tint);border-color:transparent}
.sm-steps li.on .sm-bar{background:rgba(20,20,22,.08)}
.sm-steps li.on .sm-bar::after{transform:scaleX(1)}
.sm-steps .sm-ag{position:absolute;top:12px;right:12px;display:none}
.sm-steps .sm-ag::after{display:none}
.sm-steps li.on .sm-ag{display:block}
.sm-steps li.on .sm-ag .b{opacity:0}.sm-steps li.on .sm-ag .j{opacity:1}
/* v3: inactive step cards stay at full opacity, their text AA on white (#3d4245 title, #5b6064 text) */
.sysmap.js .sm-steps li:not(.on){opacity:1}
.sysmap.js .sm-steps li:not(.on) strong{color:#3d4245}
.sysmap.js .sm-steps li:not(.on) p,.sysmap.js .sm-steps li:not(.on) .mono{color:#5b6064}
.sysmap.js .sm-steps li:not(.on):hover{opacity:1}
.sysmap.js .sm-steps li.on{box-shadow:0 18px 34px -24px rgba(20,22,24,.5)}
.sysmap.js.auto .sm-steps li.on .sm-bar::after{animation:sm-progress var(--sm-t,6.5s) linear both}
/* the tour waits while the pointer or keyboard focus rests on the map: the progress stops where it is */
.sysmap.js.hold .sm-steps li.on .sm-bar::after,.sysmap.js.hold .sm-notch[aria-current] i::after{animation-play-state:paused}
@keyframes sm-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- the frame: diagram strip + caption bar ---------- */
.sm-frame{position:relative;border:1px solid var(--pg-line,#e3e5e1);border-radius:28px;background:#fff;overflow:hidden}
.sm-frame .ill.sm-stage{border:0;border-radius:0;background:none}
.sm-stage{padding:clamp(10px,1.6vw,22px) clamp(12px,2vw,28px) clamp(8px,1vw,14px)}
.sm-canvas{position:relative;max-width:1160px;margin:0 auto}
.sm-canvas>svg{display:block;width:100%;height:auto;overflow:visible}
.sm-port{display:none;max-width:500px}
.sm-stage text{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}

/* nodes: pictogram in a rounded tile, bold label, muted sub-label */
.sm-node{color:#141416}
.sm-tile{fill:#fff;stroke:#dcdfdb;stroke-width:1.5;transition:fill .45s,stroke .45s}
.sm-tile.hub{stroke-width:2.2}
.sm-art,.sm-lab{transition:opacity .45s ease}
.sm-node .cl-tint{transition:fill .45s,opacity .45s}
.sm-cover{fill:#fff;transition:fill .45s}
.sm-node.on .sm-tile{fill:var(--tint);stroke:color-mix(in srgb,var(--c) 60%,#fff)}
.sm-node.on .sm-cover{fill:var(--tint)}
.sm-node.on .cl-tint{fill:var(--c);opacity:.32}
.sysmap.js .sm-node:not(.on) .sm-art{opacity:.38}
.sysmap.js .sm-node:not(.on) .sm-lab{opacity:.84}
.sm-node.hover .sm-tile{stroke:#141416}
.sm-l{font-size:18px;font-weight:600;letter-spacing:-.02em;fill:#141416}
.sm-l.hub{font-size:20px;letter-spacing:-.03em}
.sm-s{font-size:16.5px;font-weight:400;fill:#4b5056}

/* wires: dotted at rest, solid in the step color with packets when the step uses them */
.sm-wl{fill:none;stroke:#bfc3be;stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round;transition:stroke .4s}
.sm-w.fw .sm-wl,.sm-w.rv .sm-wl{stroke:var(--c);stroke-width:3;stroke-dasharray:none}
.sm-ah{fill:#c9ccc8;transition:fill .4s}
.sm-w.fw .sm-ah,.sm-w.rv .sm-ah{fill:var(--c)}
.sm-wt{font-size:15.5px;font-weight:500;fill:#6a6f74;transition:fill .4s}
.sm-w.fw .sm-wt,.sm-w.rv .sm-wt{fill:#141416}
.sm-w .pk{fill:var(--c);stroke:#fff;stroke-width:2;opacity:0;transition:opacity .35s}
.sm-w.fw .pk.fw,.sm-w.rv .pk.rv{opacity:1}

/* step markers ("crans") on the diagram: white with a ring in a darker shade of the step color, filled when active */
.sm-mk-b{transform-box:fill-box;transform-origin:center}
.sm-mk-disc{fill:#fff;stroke:color-mix(in srgb,var(--c) 75%,#000);stroke-width:3;transition:fill .35s,stroke-width .2s}
.sm-mk-n{font-size:15px;font-weight:600;fill:#141416}
.sm-mk-halo{fill:var(--c);opacity:0;transform-box:fill-box;transform-origin:center}
.sm-mk.on .sm-mk-disc{fill:var(--c)}
.sm-mk.hover .sm-mk-disc{stroke-width:4.5}
.sm-mk.on .sm-mk-halo{opacity:.22;transform:scale(1.45)}
.sysmap.js .sm-mk.on .sm-mk-halo{animation:sm-halo 2.4s ease-out infinite}
@keyframes sm-halo{0%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}

/* buttons over the diagram: markers and nodes select a step (only with JavaScript) */
.sm-hits{position:absolute;inset:0;display:none}
.sysmap.js .sm-hits{display:block}
.sm-hit{position:absolute;margin:0;padding:0;border:0;border-radius:22px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sm-hit.mk{width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%)}
.sm-hit:focus-visible{outline:3px solid #141416;outline-offset:2px}

/* caption bar, always visible under the diagram */
.sm-cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 18px;padding:12px clamp(16px,2.4vw,28px);border-top:1px solid rgba(20,20,22,.07);background:var(--tint);transition:background-color .4s}
.sm-cap-n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--c);color:#141416;font-size:16px;font-weight:600;transition:background-color .4s}
.sm-cap-t{display:flex;align-items:center;margin:0;font-size:15.5px;line-height:1.45;color:#3c4146;text-wrap:pretty}
.sm-cap-in{display:block;min-width:0}
.sm-cap-t strong{color:#141416;font-weight:600;margin-right:.25em}
/* --sm-reserve keeps previous / next clear of the help button fixed in the corner of the screen (set by sysmap.js) */
.sm-cap-nav{display:flex;align-items:center;gap:8px;margin-right:var(--sm-reserve,0px)}
.sm-play,.sm-prev,.sm-next{display:grid;place-items:center;flex:none;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:#1d1d1f;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s ease}
.sm-play:hover,.sm-prev:hover,.sm-next:hover{transform:scale(1.06)}
.sm-play .i-play,.sm-play.is-stopped .i-pause{display:none}
.sm-play.is-stopped .i-play{display:inline}
.sm-play:focus-visible,.sm-prev:focus-visible,.sm-next:focus-visible,.sm-notch:focus-visible{outline:3px solid #141416;outline-offset:2px}
.sm-notches{display:flex;align-items:center}
.sm-notch{position:relative;flex:none;width:22px;height:36px;margin:0;padding:0;border:0;border-radius:8px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:width .3s ease}
.sm-notch i{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:5px;transform:translate(-50%,-50%);background:color-mix(in srgb,var(--c) 75%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 70%,#000);overflow:hidden;transition:width .3s ease}
.sm-notch i::after{content:"";position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:0 50%}
.sm-notch[aria-current]{width:38px}
.sm-notch[aria-current] i{width:26px;background:color-mix(in srgb,var(--c) 35%,#fff)}
.sm-notch[aria-current] i::after{transform:scaleX(1)}
.sysmap.js.auto .sm-notch[aria-current] i::after{animation:sm-progress var(--sm-t,6.5s) linear both}
.sysmap:not(.js) .sm-cap-nav{display:none}
/* no tour without motion: the pause button is not needed */
@media (prefers-reduced-motion:reduce){.sm-play{display:none}}
html[data-motion="paused"] .sm-play{display:none}
.sm-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.sm-note{margin:0;font-size:12.5px;color:#6a6f74}

/* ---------- pictogram motion: subtle, only on lit nodes, never under reduced motion or "Pause animations" ---------- */
.pic .cl-cyl,.pic .cl-roll,.pic .cl-head,.pic .cl-bar,.pic .sm-key{transform-box:fill-box}
.pic .cl-cyl,.pic .cl-roll{transform-origin:center}
.pic .cl-bar,.pic .sm-key{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .sm-node.on .pic-offset-press .cl-plate,.sm-node.on .pic-offset-press .cl-blanket{animation:sm-rot 7s linear infinite}
  /* inline flexo: the web runs left to right, so the reels and the cylinders under it turn clockwise, those over it the other way */
  .sm-node.on .pic-flexo-press-inline .cl-roll{animation:sm-rot 9s linear infinite}
  .sm-node.on .pic-flexo-press-inline .cl-anilox{animation:sm-rot 3s linear infinite}
  .sm-node.on .pic-flexo-press-inline .cl-plate,.sm-node.on .pic-flexo-press-inline .cl-diecyl{animation:sm-rotr 4s linear infinite}
  .sm-node.on .pic-flexo-press-inline .cl-lens{animation:sm-blink 1.8s ease-in-out infinite}
  .sm-node.on .pic-flexo-press-inline .cl-beam{animation:sm-beam 1.2s linear infinite}
  .sm-node.on .pic-spectro-scan .cl-head{animation:sm-sweep 2.8s ease-in-out infinite alternate}
  .sm-node.on .pic-screen-monitor .sm-key{animation:sm-keys 2.2s ease-in-out calc(var(--k) * -.55s) infinite alternate}
  .sm-node.on .pic-flexo-press-inline .cl-web{stroke-dasharray:54 12;animation:sm-web 1.8s linear infinite}
  .sm-node.on .pic-shop-floor-screen .cl-bar{animation:sm-bars 2.6s ease-in-out infinite alternate}
  .sm-node.on .pic-shop-floor-screen .cl-bar-2{animation-delay:-.9s}
  .sm-node.on .pic-shop-floor-screen .cl-bar-3{animation-delay:-1.7s}
  .sm-node.on .sm-drop{animation:sm-drop 3.4s cubic-bezier(.55,0,.75,.2) infinite}
  /* (v3, 9 Oct 2026: the looping technology drawings of the old ColorConnect cards are gone; K.tech() draws them still) */
}
.sm-tech .cl-cyl,.sm-tech .cl-roll,.sm-tech .cl-head,.sm-tech .sm-k{transform-box:fill-box}
.sm-tech .cl-cyl,.sm-tech .cl-roll{transform-origin:center}
.sm-tech .sm-k{transform-origin:50% 100%}
.sm-tech .cl-arrow{display:none}
.sm-tech .sm-arc-n,.sm-tech .ot-lab-n{display:none}   /* ot-lab: the v3 offset drawing (K.tech styles it on the new pages) */
@keyframes sm-rot{to{transform:rotate(360deg)}}
@keyframes sm-rotr{to{transform:rotate(-360deg)}}
@keyframes sm-blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes sm-beam{to{stroke-dashoffset:-21}}
@keyframes sm-sweep{from{transform:translateX(-46px)}to{transform:translateX(46px)}}
@keyframes sm-keys{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
@keyframes sm-web{to{stroke-dashoffset:-132}}
@keyframes sm-bars{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@keyframes sm-drop{0%{transform:translateY(-10px);opacity:0}16%,38%{transform:translateY(0);opacity:1}78%{transform:translateY(46px);opacity:1;animation-timing-function:ease-out}90%,100%{transform:translateY(50px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .sysmap *,.sm-tech *{animation:none!important}
  .sysmap:not(.js) .pk{display:none}
}
html[data-motion="paused"] .sysmap *,html[data-motion="paused"] .sm-tech *,.sysmap.still *{animation:none!important}

/* technology cards: in narrow cards the numbered callouts grow around their centers (the drawings leave room for it)
   and the arc label gives way to the legend under the drawing */
.ill:has(>.sm-tech-svg){container-type:inline-size}
.sm-tech .mk{transform-box:fill-box;transform-origin:center}
@container (max-width:540px){.sm-tech .mk{transform:scale(1.2)}.sm-tech .lead{stroke-width:2}}
@container (max-width:460px){.sm-tech .mk{transform:scale(1.5)}.sm-tech .sm-arc-t,.sm-tech .ot-lab-t,.sm-tech .ot-flow-measure .ot-lab,.sm-tech .ot-flow-correct .ot-lab{display:none}.sm-tech .sm-arc-n,.sm-tech .ot-lab-n{display:inline}.sm-tech .lead{stroke-width:2.6}}
@container (max-width:360px){.sm-tech .mk{transform:scale(1.85)}.sm-tech .lead{stroke-width:3}}
@media (max-width:700px){.ill>.sm-tech-svg{width:calc(100% + 24px);margin:0 -12px}}

/* ---------- smaller screens: the landscape strip scrolls sideways, the caption stays under it ---------- */
/* labels stay at 12px or more at the diagram's scale */
@media (max-width:1100px){
  .sm-land .sm-l{font-size:19px}.sm-land .sm-l.hub{font-size:21px}.sm-land .sm-s{font-size:17px}.sm-land .sm-wt{font-size:16.5px}
  .sm-land .sm-mk-b{transform:scale(1.2)}
}
@media (max-width:1000px){
  .sm-steps{grid-template-columns:1fr 1fr}
  .sm-steps li:last-child{grid-column:1/-1}
  .sm-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .sm-scroll::-webkit-scrollbar{display:none}
  .sm-scroll .sm-stage{min-width:900px}
  /* a soft edge shows there is more to the side */
  .sm-scroll.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .sm-scroll.more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);mask-image:linear-gradient(90deg,transparent,#000 24px)}
  .sm-scroll.more-l.more-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
}
/* phones: the portrait version fits the width, nothing to scroll */
@media (max-width:759px){
  .sm-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 calc(var(--sm-bleed) * -1);padding:0 var(--sm-bleed) 4px;scroll-padding:0 var(--sm-bleed);scrollbar-width:none}
  .sm-steps::-webkit-scrollbar{display:none}
  .sm-steps li{flex:0 0 78%;scroll-snap-align:start}
  .sm-steps li:last-child{grid-column:auto}
  .sm-frame{border-radius:22px}
  .sm-scroll .sm-stage{min-width:0;padding:16px 10px 10px}
  .sm-land{display:none}
  .sm-port{display:block}
  .sm-port .sm-l{font-size:21px}.sm-port .sm-l.hub{font-size:23px}.sm-port .sm-s{font-size:19px}
  .sm-port .sm-mk-b{transform:scale(1.2)}
  .sm-port .sm-wt{font-size:18.6px}
  .sm-port .pk{r:7px}
}
@media (max-width:700px){
  .sm-cap{grid-template-columns:auto minmax(0,1fr);padding:12px 16px 10px}
  .sm-cap-t{font-size:14.5px}
  /* previous, notches and next on the left: the right corner belongs to the help button */
  .sm-cap-nav{grid-column:1/-1;justify-content:flex-start;gap:6px;margin-right:max(var(--sm-reserve,0px),44px)}
  .sm-notch{width:16px}.sm-notch[aria-current]{width:32px}.sm-notch[aria-current] i{width:22px}
}

/* ---------- phone pass (5 Oct 2026, v5) ---------- */
/* 44px buttons; step numbers at 12px */
.sm-play,.sm-prev,.sm-next{width:44px;height:44px}
.sm-steps .mono{font-size:12px}
/* phones: the caption under the map gives each step's text, so the cards keep only the number and the title */
@media (max-width:759px){.sm-steps p{display:none}}
@media (max-width:700px){
  .sm-cap-nav{gap:2px}
  .sm-notch{width:22px;height:44px}.sm-notch[aria-current]{width:36px}
}
/* landscape phones: the wide map fits the screen width instead of scrolling sideways */
@media (orientation:landscape) and (max-height:500px) and (max-width:1000px){.sm-scroll .sm-stage{min-width:0}.sm-land .sm-l{font-size:20px}.sm-land .sm-l.hub{font-size:22px}.sm-land .sm-s{font-size:18px}.sm-land .sm-wt{font-size:18px}}
/* 375px and less: narrower notches, so previous / next stay clear of the help button */
@media (max-width:380px){.sm-notch{width:18px}.sm-notch[aria-current]{width:30px}.sm-notch[aria-current] i{width:20px}}

/* ---------- home: the map pinned under the header, the scroll position picks the step (7 Oct 2026) ----------
   .sm-track holds the home map (system_block(scroll=True) in tools/illustrations.py); sysmap.js adds .js to it, reads
   --sm-hold and --sm-slice (svh): a short hold, five equal slices (one per step), a short hold. Pinned only with JavaScript,
   motion allowed, Pause animations off, not ?static, and room for it: 561 px tall from 760 px wide (landscape diagram),
   640 px tall under 760 px (portrait diagram), container queries. Otherwise the map stays in the page, clickable, no tour.
   While pinned: the step cards only when there is room for them (the caption carries the step text), the diagram scales
   to the height that is left (container units), and nothing goes into the bottom 96 px (88 px on phones), where the
   comment button (left) and the help agent (right) sit. */
.sm-track+.sm-note{margin-top:18px}
.sysmap[data-scrollmap] .sm-play{display:none}   /* no tour on the home: the scroll position, or a click, picks the step */
@supports (container-type:size){   /* container units scale the diagram; without them the map stays in the page */
@media (prefers-reduced-motion:no-preference) and (min-height:561px) and (min-width:760px),(prefers-reduced-motion:no-preference) and (min-height:760px) and (max-width:759px){
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track{--sm-hold:12;--sm-slice:60;height:calc(100svh - 64px + (2 * var(--sm-hold) + 5 * var(--sm-slice)) * 1svh)}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track>.sysmap{position:sticky;top:64px;height:calc(100svh - 64px);padding:12px 0 96px;display:flex;flex-direction:column;justify-content:center;gap:14px;container-type:inline-size}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-steps{display:none;flex:none}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-frame{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-scroll{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
  /* the stage asks for the diagram's natural height and gives way when the screen is short; the diagram fits what it gets */
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-stage{flex:0 1 calc(min(1160px,100cqw - 50px) * .4 + 24px);min-height:0;padding:14px 24px 10px;container-type:size}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-land{width:min(100%,100cqh * 2.5)}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-cap{flex:none}
  /* the active notch and card bar fill across the step's slice (--sm-p, written by sysmap.js) */
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-notch[aria-current] i::after,
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-steps li.on .sm-bar::after{transform:scaleX(var(--sm-p,0))}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track :is(.sm-prev,.sm-next)[aria-disabled]{opacity:.28;cursor:default;transform:none}
}
/* the cards come back where they fit above a diagram at nearly full size */
@media (prefers-reduced-motion:no-preference) and (min-height:840px) and (min-width:1001px){
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-steps{display:grid}
}
/* 760 to 1000 px: the diagram strip keeps its 900 px and scrolls sideways to each step */
@media (prefers-reduced-motion:no-preference) and (min-height:561px) and (min-width:760px) and (max-width:1000px){
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-stage{flex-basis:calc((max(100cqw - 2px,900px) - 48px) * .4 + 24px)}
}
/* phones: the portrait diagram and a compact caption (the markers number the steps), above the 88 px of the corners */
@media (prefers-reduced-motion:no-preference) and (min-height:760px) and (max-width:759px){
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track>.sysmap{padding:8px 0 88px}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-stage{flex-basis:calc(min(500px,100cqw - 18px) * 1.7522 + 14px);padding:8px 8px 6px}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-port{width:min(100%,100cqh * .5707)}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-cap{grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 14px 4px}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-cap-n{display:none}
  html.sm-js:not([data-motion=paused]):not(.hs-static) .sm-track .sm-cap-t{font-size:14px;line-height:1.4}
}
}