/* Andon page CSS, copied verbatim from the two inline <style> blocks in
 * pages/andon-system.php. Do not edit here — this is a copy, and editing it just
 * means the next sync silently reverts you. Edit the US page, copy the blocks over
 * whole, and bump ASSET_VER in intl/boot.php.
 *
 * Nothing enforces that this stays in step, so it can drift the way the shared
 * stylesheets did before .design/asset_parity.php started checking them.
 *
 * The US page keeps these rules inline. They are pulled out into a file for
 * the Spanish sites because both locales share them, so one copy in one
 * place is what keeps them from drifting apart.
 */
	/* ---- Andon page-local visuals (px-) + reused andon/bed-exit components ---- */
	/* Hero: the interactive floor demo (self-sizes from inside the iframe) */
	.px-hero-demo{ max-width:1120px; margin:var(--sp-6) auto 0; }
	.px-hero-embed{ display:block; width:100%; min-height:520px; border:0; border-radius:var(--radius); background:#f4f6f9; box-shadow:0 24px 60px rgba(8,15,30,.45); }
	.px-hero-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; margin-top:var(--sp-6); }

	/* Storyboard: main pain point */
	.storyboard-minimal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
	.storyboard-panels { display:grid; grid-template-columns:repeat(4, 1fr); }
	.storyboard-panel { padding:2rem 1.5rem; border-right:1px solid var(--border); text-align:center; position:relative; }
	.storyboard-panel:last-child { border-right:none; }
	.panel-num { position:absolute; top:.75rem; left:.75rem; width:24px; height:24px; background:var(--accent); color:var(--accent-ink); font-size:.75rem; font-weight:700; border-radius:50%; display:flex; align-items:center; justify-content:center; }
	.storyboard-panel:first-child .panel-num { background:var(--ink); color:var(--accent-ink); }
	.panel-time { font-size:1.5rem; font-weight:800; color:var(--accent); margin-bottom:1rem; font-family:var(--font-mono); }
	.storyboard-panel:first-child .panel-time { color:var(--ink); }
	.panel-icon { font-size:2rem; margin-bottom:.75rem; }
	.panel-text { font-size:1rem; color:var(--ink-soft); line-height:1.5; margin-bottom:0; }
	.panel-bubble { background:var(--bg-subtle); border-radius:var(--radius); padding:.75rem 1rem; position:relative; margin-top:.75rem; font-style:italic; font-size:1rem; color:var(--ink); }
	.panel-bubble::before { content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid var(--bg-subtle); }
	.storyboard-conclusion { border-top:3px solid var(--accent); padding:2rem; text-align:center; }
	.storyboard-conclusion :is(h3, h4) { color:var(--ink-soft); font-size:1rem; font-weight:500; margin-bottom:.5rem; }
	.storyboard-cost { display:flex; flex-direction:column; gap:.25rem; }
	.storyboard-cost .cost-time { font-size:1.5rem; font-weight:600; color:var(--ink); }
	.storyboard-cost .cost-money { font-size:2rem; font-weight:800; color:var(--accent); }

	/* How it works: a still of the Floor Board with numbered markers, a legend under
	   it, then the same board on three screens. Markers rather than hover tooltips,
	   because a phone has no hover. The pins are percentages of the capture, so a
	   new andon-floor-board.png moves them. */
	.px-hw-board{ position:relative; max-width:1040px; margin:0 auto; }
	.px-hw-board__shot{ display:block; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:0 14px 34px rgba(16,21,28,.10); cursor:zoom-in; }
	.px-hw-board__shot img{ display:block; width:100%; height:auto; }
	/* One marker on the board, in the legend and in the callout: a white disc ringed
	   in its tile's colour (sampled from the capture). White, and on the tile's
	   corner rather than inside it, so it reads as a note on the screen and not as
	   part of it, on every tile colour. */
	.px-hw-pin, .px-hw-num{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:26px; height:26px; border-radius:50%; background:#fff; color:var(--ink); border:3px solid var(--ink); font:800 13px/1 var(--font-body); }
	.px-hw-c1{ border-color:#23a35a; }
	.px-hw-c2{ border-color:#c8332b; }
	.px-hw-c3{ border-color:#a31724; }
	.px-hw-c4{ border-color:#b97a09; }
	.px-hw-pin{ position:absolute; width:32px; height:32px; font-size:15px; transform:translate(-50%,-50%); box-shadow:0 3px 10px rgba(16,21,28,.35); pointer-events:none; }
	/* The page's words about the LATE tile, not the software's: the tile prints the
	   escalation plan, this says what happened. It sits in the tile's empty band,
	   pointing up at the "then Dave Collins at 5m" it explains. Off below 960px,
	   where the band is too short for it; legend 3 says it there. */
	.px-hw-callout{ position:absolute; width:21%; background:#fff; color:var(--ink); font:600 13px/1.3 var(--font-body); padding:7px 10px; border-radius:7px; box-shadow:0 4px 14px rgba(16,21,28,.30); pointer-events:none; }
	.px-hw-callout::before{ content:""; position:absolute; left:18px; top:-5px; width:10px; height:10px; background:#fff; transform:rotate(45deg); }
	@media (max-width: 960px){ .px-hw-callout{ display:none; } }
	.px-hw-legend{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--sp-5); max-width:1040px; margin:var(--sp-5) auto 0; }
	.px-hw-legend__i{ display:flex; gap:12px; align-items:flex-start; font-size:1rem; line-height:1.45; color:var(--ink); }
	.px-hw-legend__i .px-hw-num{ flex:0 0 auto; margin-top:1px; }
	.px-hw-legend__i b{ display:block; margin-bottom:2px; }
	.px-screens__lead{ max-width:680px; margin:var(--sp-7) auto 0; text-align:center; color:var(--ink-soft); }
	.px-hw-devs{ display:grid; grid-template-columns:1.3fr 1.15fr .38fr; gap:var(--sp-6); align-items:end; max-width:860px; margin:var(--sp-5) auto 0; }
	.px-hw-dev{ text-align:center; }
	.px-hw-dev img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
	.px-hw-tv{ border:8px solid #0a0e18; border-radius:6px; overflow:hidden; box-shadow:var(--shadow-lg); }
	/* The ratio sits on the image, not the frame: on the frame the border eats into
	   it and the board gets cropped. */
	.px-hw-tv img, .px-hw-lap img{ height:auto; aspect-ratio:16/9; }
	.px-hw-tv__mount{ width:40px; height:14px; background:#2a303c; border-radius:0 0 4px 4px; margin:0 auto; }
	.px-hw-lap{ border:7px solid #141a2b; border-bottom:none; border-radius:10px 10px 0 0; overflow:hidden; box-shadow:var(--shadow-lg); }
	.px-hw-lap__base{ height:11px; margin:0 -6%; background:linear-gradient(#3a4150,#1d222c); border-radius:0 0 6px 6px; }
	.px-hw-ph{ border:6px solid #10151c; border-radius:18px; aspect-ratio:9/19; overflow:hidden; box-shadow:var(--shadow-lg); background:#fff; }
	.px-hw-dev__label{ font-size:var(--fs-small); font-weight:700; color:var(--ink); margin-top:var(--sp-3); line-height:1.25; }
	.px-hw-dev__label span{ display:block; font-weight:600; color:var(--ink-soft); }
	@media (max-width: 820px){
		.px-hw-legend{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
		.px-hw-pin{ width:22px; height:22px; font-size:11px; border-width:2px; transform:translate(-78%,-78%); }
		.px-hw-devs{ gap:var(--sp-3); }
		.px-hw-dev__label{ font-size:.72rem; }
	}
	@media (max-width: 480px){ .px-hw-legend{ grid-template-columns:minmax(0,1fr); } }
	/* On a phone three screens side by side shrink past reading; the laptop repeats
	   the TV, so it goes and the other two get its room. */
	@media (max-width: 560px){
		.px-hw-devs{ grid-template-columns:1fr .36fr; gap:var(--sp-4); }
		.px-hw-dev--lap{ display:none; }
		.px-hw-dev__label{ font-size:var(--fs-small); }
	}

	/* Beyond the board: the phone, Take, the sign-in from any computer, messages and the
	   integrations, each a real software screen beside its text. Every software screen on
	   the page opens in the one lightbox set (andon-screens). */
	.px-zoom{ display:block; cursor:zoom-in; color:inherit; text-decoration:none; }
	.px-sw-head{ margin:var(--sp-8) 0 var(--sp-4); padding-top:var(--sp-8); border-top:1px solid var(--border); }
	.px-sw-rows{ display:flex; flex-direction:column; gap:var(--sp-9); margin-top:var(--sp-8); }
	.px-sw-rows .dx-feature .ds-eyebrow{ margin-bottom:6px; }
	.px-sw-rows .dx-feature h3{ margin:0 0 var(--sp-3); font-size:1.45rem; }
	.px-sw-rows .dx-feature p{ color:var(--ink-soft); margin:0 0 var(--sp-4); }
	.px-sw-browser{ border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface); box-shadow:0 14px 34px rgba(16,21,28,.10); }
	.px-sw-browser__bar{ height:30px; background:var(--bg-subtle); display:flex; align-items:center; padding-left:12px; border-bottom:1px solid var(--border); }
	.px-sw-browser__bar span{ margin-right:auto; font:500 11px var(--font-body); color:var(--ink-soft); }
	.px-sw-browser__bar i{ position:relative; width:40px; height:100%; margin-left:auto; }
	.px-sw-browser__bar span + i, .px-sw-browser__bar i + i{ margin-left:0; }
	.px-sw-browser__bar i::before, .px-sw-browser__bar i::after{ content:""; position:absolute; left:50%; top:50%; box-sizing:border-box; transform:translate(-50%,-50%); }
	.px-sw-browser__bar i:nth-of-type(1)::before{ width:10px; height:1px; background:var(--ink-faint); }
	.px-sw-browser__bar i:nth-of-type(2)::before{ width:9px; height:9px; border:1px solid var(--ink-faint); }
	.px-sw-browser__bar i:nth-of-type(3)::before, .px-sw-browser__bar i:nth-of-type(3)::after{ width:12px; height:1px; background:var(--ink-faint); transform:translate(-50%,-50%) rotate(45deg); }
	.px-sw-browser__bar i:nth-of-type(3)::after{ transform:translate(-50%,-50%) rotate(-45deg); }
	.px-sw-browser img{ display:block; width:100%; height:auto; }
	.px-sw-plain img{ display:block; width:100%; height:auto; mix-blend-mode:multiply; }
	.px-sw-phones{ display:flex; gap:var(--sp-5); justify-content:center; align-items:flex-start; }
	.px-sw-phone{ width:230px; height:470px; border:9px solid #10151c; border-radius:34px; overflow:hidden; background:#fff; box-shadow:0 14px 34px rgba(16,21,28,.16); }
	.px-sw-phone img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
	.px-sw-rows .dx-feature p.px-sw-cap{ font-size:var(--fs-small); color:var(--ink-faint); text-align:center; margin:var(--sp-3) 0 0; }
	/* Stacked, every row reads text then screen, whichever side the screen sits on wide. */
	@media (max-width: 820px){
		.px-sw-phone{ width:46%; height:auto; aspect-ratio:1/2; }
		.px-sw-rows .px-sw-text{ order:-1; }
	}

	/* The one fold on the page that carries a picture: the repeater under the call
	   button. Half-size thumb, so the row it sits inside still reads as the button's. */
	.dx-fold__aside{ display:flex; gap:var(--sp-3); align-items:flex-start; margin-top:var(--sp-3); }
	.dx-fold__aside .dx-kit__thumb{ width:72px; height:72px; }
	.dx-fold__aside p{ margin:0; font-size:13px; line-height:1.6; color:var(--ink-soft); }
	/* The CTA moved inside the padded ROI box, and its label does not fit a
	   phone-width column while nowrap holds. Let it wrap there. */
	@media (max-width:720px){
		.dx-price-roi{ padding-left:var(--sp-5); padding-right:var(--sp-5); }
		.dx-price-roi .ds-btn{ white-space:normal; }
	}

	/* A quiet aside: a note about how to read the thing above it, not a claim
	   of its own, so it gets a rule and a tint rather than card furniture. */
	.px-aside{ max-width:860px; margin:var(--sp-7) auto 0; border-left:3px solid var(--border-strong, var(--border)); background:var(--bg-subtle); border-radius:0 var(--radius) var(--radius) 0; padding:var(--sp-4) var(--sp-5); }
	.px-aside p{ margin:0; color:var(--ink-soft); }
	.px-aside strong{ color:var(--ink); }

	/* Price tiers, matching the ones in files/presentation.php off the same
	   catalog. A split bar labeled "backbone" and "floor" used to sit at the
	   bottom of each card, drawing the fixed share shrinking left to right. It
	   was an accurate picture of an argument nobody asked to see in chart form,
	   and it required the reader to learn two invented words before it meant
	   anything. The same point is now simply stated underneath, which is how
	   the document has always done it. */
	/* The flag straddles the top border instead of sitting in the card, so all
	   three tiers start their content at the same height and the row reads as
	   one comparison rather than three unaligned boxes. */
	.px-tier--flag{ position:relative; }
	.px-tier__flag{
		position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
		white-space:nowrap; background:var(--accent); color:var(--accent-ink,#fff);
		font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
		padding:5px 14px; border-radius:var(--radius-pill,999px);
	}
	.px-tier__scale{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:800; }
	/* margin-top:auto pins this to the bottom, so the three cards align on it. */
	/* The rule under the price needs matching air on both sides, and it can't
	   come from this block: margin-top:auto pins the include line to the foot of
	   the card so the three align on it, and auto overrides any top margin set
	   with it. (This rule used to open "margin:var(--sp-5) 0 0", which auto
	   silently discarded, leaving the rule flush against "one-time" with 16px
	   under it and nothing over it.) So the gap is a margin-bottom on the amount
	   above, which auto can't touch. files/presentation.php gets the same result
	   with .oneoff's margin-bottom against .incl's padding-top. */
	.ds-price__amount{ margin-bottom:var(--sp-4); }
	.px-tier__incl{ margin:0; margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--border); font-size:var(--fs-small); color:var(--ink-soft); }

	/* Pareto, drawn in CSS from the real numbers in the customer's own report.
	   Horizontal bars because the station names are long and this has to stay
	   readable on a phone, which the original chart image never was. */
	.px-par{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-6); }
	.px-par__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-2); }
	.px-par__hd :is(h3, h4){ margin:0; }
	.px-par__unit{ font-size:.78rem; color:var(--ink-faint); white-space:nowrap; }
	.px-par__sub{ font-size:.9rem; color:var(--ink-soft); margin:0 0 var(--sp-5); }
	.px-par__rows{ display:flex; flex-direction:column; gap:7px; }
	.px-par__row{ display:grid; grid-template-columns:minmax(96px,124px) 1fr 46px; align-items:center; gap:10px; }
	.px-par__lbl{ font-size:.82rem; color:var(--ink-soft); line-height:1.25; }
	.px-par__track{ background:var(--bg-subtle); border-radius:5px; height:19px; overflow:hidden; }
	.px-par__bar{ display:block; height:100%; border-radius:5px; background:var(--border-strong); }
	.px-par__val{ font-size:.82rem; font-weight:700; text-align:right; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
	.px-par__row.is-top .px-par__lbl,
	.px-par__row.is-top .px-par__val{ color:var(--ink); }
	.px-par__row.is-top .px-par__bar{ background:var(--accent); }
	/* The Pareto break. A CI engineer reads the gap between the bars and the tail
	   before he reads any caption, so the line is where the finding lands. */
	.px-par__cut{ display:flex; align-items:center; gap:10px; margin:8px 0 1px; }
	.px-par__cut b{ font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; font-weight:800; color:var(--accent); white-space:nowrap; }
	.px-par__cut i{ flex:1 1 auto; height:0; border-top:1px dashed var(--accent); opacity:.5; }
	.px-par__row.is-rest{ margin-top:3px; padding-top:7px; border-top:1px dashed var(--border); }
	.px-par__row.is-rest .px-par__lbl{ font-style:italic; color:var(--ink-faint); }
	.px-par__row.is-rest .px-par__val{ color:var(--ink-faint); }
	.px-par__note{ margin:var(--sp-5) 0 0; padding-top:var(--sp-4); border-top:1px solid var(--border); font-size:.88rem; color:var(--ink-soft); }
	.px-par__note strong{ color:var(--ink); }
	/* Sits above both charts because it applies to both, and because what these
	   bars are made of is the whole reason they aren't another downtime report.
	   Surface rather than the .px-aside recipe: this section is already tinted,
	   so bg-subtle on bg-subtle would disappear. */
	.px-par__unitline{ max-width:860px; margin:0 auto var(--sp-5); background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; padding:var(--sp-4) var(--sp-5); }
	.px-par__unitline p{ margin:0; font-size:.95rem; color:var(--ink-soft); }
	.px-par__unitline strong{ color:var(--ink); }
	/* Everything above it is one plant in Ohio, which a reader takes at arm's
	   length. This is the sentence that turns the section to him, so it is plain
	   centred type rather than a second box under the one above the charts. */
	.px-par__turn{ max-width:760px; margin:var(--sp-6) auto 0; text-align:center; font-size:1.05rem; color:var(--ink-soft); }
	.px-par__turn strong{ color:var(--ink); }
	/* Software captures in a plain frame. Opaque, so a frame and not .dx-stage. */
	.px-shot{ margin:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
	.px-shot img{ display:block; width:100%; height:auto; border-bottom:1px solid var(--border); }
	.px-shot figcaption{ padding:var(--sp-5) var(--sp-6); }
	.px-shot figcaption h3{ margin:0 0 var(--sp-2); font-size:1.05rem; }
	.px-shot figcaption p{ margin:0; font-size:.92rem; color:var(--ink-soft); }
	@media (max-width: 520px){ .px-shot figcaption{ padding:var(--sp-4); } }
	@media (max-width: 520px){ .px-par{ padding:var(--sp-4); } .px-par__row{ grid-template-columns:minmax(78px,96px) 1fr 40px; gap:7px; } .px-par__lbl{ font-size:.76rem; } }

	/* Inside a .dx-pain body: the attribution under a quote, and the arithmetic box */
	.px-quote-src { font-size:.875rem; color:var(--ink-faint); margin:.5rem 0 0; padding-left:var(--sp-4); }
	.px-pain-math { background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem; margin-top:var(--sp-4); }
	.px-pain-math p { margin-bottom:.5rem; font-size:.95rem; color:var(--ink-soft); }
	.px-pain-math p:last-child { margin-bottom:0; }

	/* Dark stat band (bed-exit px-statband) */
	.px-statband{ position:relative; overflow:hidden; }
	.px-statband__glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(58% 120% at 50% -12%, rgba(222,29,35,.18), transparent 60%); }
	.px-statband > .ds-container{ position:relative; }
	/* Two, not three. The third stat here was "48 h to your first wait-time
	   report", which is a claim about DATA sitting between two claims about
	   LOSS, so in this position it read as a promise that something improves in
	   two days. It still runs in the trial section, where the words around it
	   say plainly that what arrives is numbers. */
	.px-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); max-width:680px; margin:var(--sp-7) auto 0; }
	.px-stat{ text-align:center; padding:var(--sp-6) var(--sp-4); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius-lg); transition:transform .18s ease, background .18s ease, border-color .18s ease; }
	.px-stat:hover{ transform:translateY(-3px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
	.px-stat__n{ font-family:var(--font-head); font-weight:800; line-height:1; letter-spacing:-0.02em; color:#fff; font-size:clamp(2.4rem, 1.6rem + 3vw, 3.4rem); }
	.px-stat--focal .px-stat__n{ color:#ff4b51; }
	.px-stat__l{ color:var(--band-ink-soft); font-size:0.92rem; margin-top:var(--sp-3); }
	.px-stat__src{ color:var(--band-ink-soft); opacity:.7; font-size:0.72rem; margin-top:var(--sp-2); }
	.px-stats .px-stat:nth-child(2){ transition-delay:.08s; }
	.px-stats .px-stat:nth-child(3){ transition-delay:.16s; }
	.px-reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
	.px-reveal.is-in{ opacity:1; transform:none; }
	@media (prefers-reduced-motion:reduce){ .px-reveal{ opacity:1; transform:none; transition:none; } }

	/* Comparison table (bed-exit px-cmp) */
	.px-cmp-wrap{ overflow-x:auto; }
	.px-cmp{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; min-width:640px; }
	.px-cmp th, .px-cmp td{ padding:var(--sp-3) var(--sp-4); text-align:center; border-bottom:1px solid var(--border); font-size:var(--fs-small); vertical-align:middle; }
	.px-cmp tbody tr:last-child td{ border-bottom:0; }
	.px-cmp thead th{ font-weight:800; color:var(--ink); }
	.px-cmp td:first-child, .px-cmp th:first-child{ text-align:left; font-weight:700; color:var(--ink); }
	.px-cmp .px-us{ background:var(--bg-subtle); }
	.px-cmp thead .px-us{ background:var(--accent); color:#fff; }
	.px-yes{ color:#1c8f4e; font-weight:800; }
	.px-no{ color:var(--ink-faint); font-weight:700; }
	/* The shared phone sizes for the matrix go down to 8.5px; this table holds 11px
	   by dropping the header qualifiers, which the column names carry without. */
	@media (max-width: 640px){
		.px-cmp-wrap .px-cmp--matrix th, .px-cmp-wrap .px-cmp--matrix td, .px-cmp-wrap .px-cmp--matrix thead th{ font-size:11px; }
		.px-cmp-wrap .px-cmp--matrix td small, .px-cmp-wrap .px-cmp--matrix .px-inwords{ font-size:10.5px; }
		.px-cmp-wrap .px-cmp--matrix thead th small{ display:none; }
	}

	/* Phone widths: a kit row's thumb floats so its text wraps under it instead of
	   running as a narrow column beside it; the range note stacks its icon. */
	@media (max-width: 560px){
		.dx-kit__item{ display:block; }
		.dx-kit__item::after{ content:""; display:table; clear:both; }
		.dx-kit__item > .dx-kit__thumb{ float:left; width:76px; height:76px; margin:0 var(--sp-3) var(--sp-2) 0; }
		.dx-kit__item .dx-fold{ clear:left; }
		.dx-kit__setup{ flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
	}
	/* Touch widths, tablets included: the two text links that stand alone as an
	   action get a finger-sized hit area. Vertical padding on an inline link grows
	   the hit area without moving the lines around it. */
	@media (max-width: 1024px){
		.cs-card .cs-cta{ padding:var(--sp-3) 0; }
		.ew__trial a{ padding:10px 0; }
	}

	@media (max-width: 767px) {
		.storyboard-panels { grid-template-columns:repeat(2, 1fr); }
		.storyboard-panel { padding:1.5rem 1rem; }
		.storyboard-panel:nth-child(3), .storyboard-panel:nth-child(4) { border-top:1px solid var(--border); }
		.panel-icon { font-size:1.75rem; margin-bottom:.5rem; }
		.storyboard-conclusion { padding:1.5rem 1rem; }
		.storyboard-cost .cost-time { font-size:1.1rem; }
		.storyboard-cost .cost-money { font-size:1.5rem; }
		/* The cost chip can't wrap, so on a phone it squeezes the title into four lines.
		   Drop it onto its own row under the title instead. */
		.dx-pain summary { padding:var(--sp-4); gap:var(--sp-3); flex-wrap:wrap; }
		.dx-pain__ic { width:32px; height:32px; flex-basis:32px; font-size:1rem; }
		.dx-pain__t { flex:1 1 0; min-width:0; }
		/* flex-basis:100% is what forces the break, so the pill would stretch edge to edge.
		   Drop the pill and let it read as a caption under the title. */
		.dx-pain__cost { order:4; flex-basis:100%; margin-left:calc(32px + var(--sp-3)); padding:0; background:none; font-size:.75rem; }
		.px-stats{ grid-template-columns:1fr; }
	}

	/* Print: a champion needs something to put in front of a plant manager, and there is no
	   PDF to download by design. Ctrl-P should produce it. Drops what cannot print (the
	   interactive demo, carousel clones, buttons that open a scheduler), flattens the dark
	   band so it stays readable on paper, and forces every accordion open. */
	@media print {
		.notification, .dx-footer, footer, .px-hero-demo, .px-hero-actions,
		.dx-syshero__note,
		.ds-cta, .ds-btn, .cs-modal-root, .cs-modal-sources { display: none !important; }
		/* the component sets display:inline !important, so this needs the extra class */
		.cs-card .cs-cta { display: none !important; }

		/* The logos are worth printing, but not frozen mid-scroll with tiles half cut off.
		   The three scrolling rows collapse into one wrapped grid so there are no orphans. */
		.dx-logowall { -webkit-mask-image: none !important; mask-image: none !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; }
		.dx-logowall__row { display: contents !important; animation: none !important; }
		/* Each row is printed twice for the seamless loop; on paper that is just duplicates */
		.dx-logowall__row .dx-logowall__tile:nth-child(n+9) { display: none !important; }

		body { background: #fff !important; }
		.ds-section { padding: var(--sp-6) 0 !important; background: #fff !important; }
		.dx-syshero { padding: var(--sp-6) 0 !important; background: #fff !important; color: #000 !important; }
		.dx-syshero h1, .dx-syshero__lead, .dx-syshero__eyebrow { color: #000 !important; }

		/* The stat band carries an inline dark background, hence the !important */
		.px-statband { background: #fff !important; }
		.px-statband__glow { display: none !important; }
		.px-statband h2, .px-stat__n, .px-stat__l, .px-statband p { color: #000 !important; }
		.px-stat__src { color: #555 !important; }
		.px-stat { border: 1px solid #ccc !important; background: #fff !important; }

		/* The three screens repeat the board printed just above them. */
		.px-hw-devs { display: none !important; }

		.px-reveal { opacity: 1 !important; transform: none !important; }

		/* Closed <details> would print empty */
		details > *:not(summary) { display: block !important; }
		.dx-pain summary::after, .ds-faq summary::after,
		.dx-fold > summary::after { content: "" !important; display: none !important; }
		/* Printed, the spec tables are the reason someone saves this page at all. */
		.dx-fold > summary { color: #000 !important; }

		.ds-card, .dx-topcard, .dx-kit__item, .px-cmp,
		.dx-objection, .dx-logowall__tile, .px-par, .px-par__unitline, .px-hw-legend,
		.cs-card, .dx-phase, details { page-break-inside: avoid; }
		/* Three across is unreadable on paper; two keeps the metric legible. */
		.cs-grid { grid-template-columns: 1fr 1fr !important; }
		.cs-card:hover { transform: none !important; box-shadow: none !important; }
		h2, h3 { page-break-after: avoid; }
		.ew { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; }
		.ew__big { color: #000 !important; }
		a[href^="#"], a[href^="http"] { text-decoration: none; color: inherit; }
	}
			.ew {
				background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
				box-shadow: var(--shadow-sm); padding: var(--sp-6) var(--sp-6) var(--sp-5);
				max-width: 940px; margin: var(--sp-6) auto 0;
			}
			.ew__head { text-align: center; margin-bottom: var(--sp-5); }
			.ew__head h3 { margin: var(--sp-2) 0 0; }
			.ew__controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
			.ew__ctrl label { display: block; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.35; min-height: 2.7em; }
			.ew__val { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1.1; margin: var(--sp-2) 0 var(--sp-1); }
			.ew__val small { font-size: 0.95rem; font-weight: 600; color: var(--ink-faint); margin-left: 3px; }

			.ew input[type=range] {
				-webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0;
				background: var(--border); border-radius: var(--radius-pill); outline: none; cursor: pointer;
			}
			.ew input[type=range]::-webkit-slider-thumb {
				-webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
				background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 1px 5px rgba(0,0,0,.28); cursor: grab;
			}
			.ew input[type=range]::-moz-range-thumb {
				width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
				border: 3px solid var(--surface); box-shadow: 0 1px 5px rgba(0,0,0,.28); cursor: grab;
			}
			.ew input[type=range]:focus-visible { box-shadow: 0 0 0 3px rgba(222,29,35,.25); }
			.ew__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-faint); margin-top: 5px; }

			.ew__out { text-align: center; margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
			.ew__big { font-family: var(--font-mono); font-size: clamp(2.8rem, 1.8rem + 4vw, 4.4rem); font-weight: 800; color: var(--accent); line-height: 1; }
			.ew__big span { font-size: 0.45em; font-weight: 700; margin-left: 6px; }
			.ew__cap { font-weight: 700; color: var(--ink); margin-top: var(--sp-2); font-size: 1.05rem; }
			.ew__half { color: var(--ink-soft); margin-top: var(--sp-3); }
			.ew__note { font-size: var(--fs-small); color: var(--ink-faint); margin: var(--sp-4) auto 0; max-width: 620px; line-height: 1.5; }
			.ew__trial { margin: var(--sp-5) auto 0; padding-top: var(--sp-4); border-top: 1px dashed var(--border); max-width: 640px; color: var(--ink-soft); }
			.ew__trial a { color: var(--accent); font-weight: 700; }

			@media (max-width: 760px) {
				.ew { padding: var(--sp-5) var(--sp-4); }
				.ew__controls { grid-template-columns: 1fr; gap: var(--sp-5); }
				.ew__ctrl label { min-height: 0; }
			}