/* ============================================================
   ECS monochrome (2026-10-28), after the Google Store laptops page: one near-black ground (#151618) for the whole page,
   light gray type, dark cards for media, and no accent color in the page chrome. The product screens (phone, inbox,
   desktop, desks) keep their own light UI, the way the store shows real screens inside dark cards.
   Linked last on projects/ecs.html only; everything is scoped to body.mono.
   Pre-change: _archive/ecs-pre-grid-2026-10-26/ecs-pre-mono.html + rx-pre-mono.css
   ============================================================ */
body.mono {
  --m-bg: #151618; --m-card: #1f2022; --m-card-2: #2a2b2e; --m-line: #3c3e41;
  --m-ink: #e1e3e4; --m-ink-2: #c4c7c8; --m-ink-3: #9aa0a6;
  background: var(--m-bg); color: var(--m-ink);
}
html:has(body.mono) { background: #151618; color-scheme: dark; }

/* the shared tokens, flipped for everything below the top bar */
body.mono main, body.mono .ac-cta, body.mono .ac-foot, body.mono dialog {
  --bg: var(--m-bg); --bg-raised: var(--m-card); --bg-sunken: var(--m-card); --paper: var(--m-bg); --paper-2: var(--m-card);
  --g-card: var(--m-card); --g-card-2: var(--m-card-2);
  --ink: var(--m-ink); --ink-2: var(--m-ink-2); --muted: var(--m-ink-3);
  --line: var(--m-line); --line-soft: #2a2b2e; --accent: #e1e3e4; --accent-hover: #fff;
  color: var(--m-ink);
}
/* product screens are islands of light UI: give them the light tokens back */
body.mono :is(.pf-phone, .ib-panel, .hl-desk, .cw-view, .rx-ui, .md, .scr, .ss-scene, .ioc, .dk-box, .cam-rq, .ok-ph) {
  --bg: #fff; --bg-raised: #fff; --bg-sunken: #f1f3f4; --g-card: #f1f3f4; --g-card-2: #e8eaed;
  --ink: #202124; --ink-2: #3c4043; --muted: #5f6368; --line: #dadce0; --line-soft: #e8eaed; --accent: #0b57d0; --accent-hover: #0842a0;
  color-scheme: light;
}

/* page type outside the product screens */
body.mono main :is(h1, h2, h3, h4, h5, blockquote):not(:is(.pf-phone, .ib-panel, .hl-desk, .cw-view, .rx-ui, .md, .scr, .ss-scene, .ioc, .dk-box, .sx-thread, .cw-chat, .cam-world, .ok-ph) *) { color: var(--m-ink); }
body.mono main :is(p, figcaption, cite, li):not(:is(.pf-phone, .ib-panel, .hl-desk, .cw-view, .rx-ui, .md, .scr, .ss-scene, .ioc, .dk-box, .sx-thread, .cw-chat, .cam-world, .ok-ph) *) { color: var(--m-ink-2); }
body.mono main :is(.rx-k, .sx-eye, .cgroup-no, .k, .np-lab) { color: var(--m-ink-3); }
body.mono main .sx-eye svg { stroke: currentColor; }

/* section bands: one ground, no tints */
body.mono main.wrap > section.cgroup[data-tint], body.mono main.wrap > section { background: none; --gx-band: none; }

/* ---------- Hero ---------- */
body.mono main.wrap > .gx-hero { padding-top: 0; }
.mx-band { padding: 24px 0 0; }
.mx-band > .gx-bar { margin: 0 0 0; padding: 0 22px; }
body.mono .gx-tabs a { background: var(--m-card); color: var(--m-ink); }
body.mono .gx-tabs a:hover { background: var(--m-card-2); }
body.mono .gx-tabs a[aria-current] { background: var(--m-ink); color: #151618; }
body.mono .gx-who b { color: var(--m-ink); }
body.mono .gx-who span { color: var(--m-ink-3); }

.mx-hd { text-align: center; padding: clamp(64px, 11vh, 128px) 16px 0; }
body.mono .mx-t { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.5rem, 5.6vw, 4.75rem); line-height: 1.08; letter-spacing: -1px; color: #e1e3e4; text-wrap: balance; }
body.mono .mx-s { margin: clamp(18px, 2.4vw, 28px) auto 0; max-width: 40rem; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.5; color: #e1e3e4; text-wrap: balance; }

/* the live scene sits in a large dark card, like the store's hero video */
.mx-card { margin: clamp(40px, 6vh, 64px) auto 0; width: var(--g-w12); max-width: 100%; box-sizing: border-box; border-radius: 28px; overflow: hidden;
  padding: clamp(28px, 5vw, 72px) clamp(20px, 6vw, 96px) clamp(24px, 4vw, 56px);
  background: radial-gradient(120% 90% at 50% 110%, #2a2d33 0, #1a1b1e 55%, #111214 100%); }
body.mono .mx-card .gx-composite.hl { width: 100%; margin: 0; }
body.mono .mx-card .hl-desk { border-color: #000; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
body.mono .mx-card .hl-pf .pf-phone { box-shadow: 0 40px 70px -24px rgba(0,0,0,.85); }
/* the request travelling between the two is white, not blue */
body.mono .hl-pkt { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.5); }

/* the outcome (calls a month, response time, bases) and the call-volume chart, in one dark card under the scene */
.mx-chart { margin: clamp(48px, 7vh, 72px) auto 0; width: var(--g-w8); max-width: 100%; box-sizing: border-box; padding: 36px 40px 28px; border-radius: 28px; background: var(--m-card); }
.mx-copy { margin-bottom: 28px; }
body.mono .mx-copy .gx-price { margin-top: 0; }
body.mono .mx-copy .gx-price b { font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--m-ink); }
body.mono .mx-copy .gx-price s { font-size: 1.125rem; color: var(--m-ink-3); }
body.mono .mx-copy .gx-save { background: #3c3e41; color: #f1f3f4; }
body.mono .mx-copy .gx-note { margin-top: 12px; font-size: 1rem; line-height: 1.5; color: var(--m-ink-2); }
body.mono .mx-copy .gx-note + .gx-note { margin-top: 2px; }
body.mono .mx-chart svg text.ecs-flap { fill: #e1e3e4; }
body.mono .mx-chart svg text { fill: #9aa0a6; }
body.mono .mx-chart svg line { stroke: #3c3e41; }
body.mono .mx-chart svg line[stroke-dasharray] { stroke: #80868b; }
body.mono .mx-chart svg polyline:not(.ecs-chart-line-after) { stroke: #80868b; }
body.mono .mx-chart svg polyline.ecs-chart-line-after { stroke: #f1f3f4; }
body.mono .mx-chart svg circle[cx="318"] { fill: #80868b; }
body.mono .mx-chart svg circle[cx="392"], body.mono .mx-chart svg circle[cx="455"] { fill: #f1f3f4; stroke: #1f2022; }
body.mono .mx-chart svg line[x1="220"] { stroke: #e1e3e4; }
body.mono .mx-chart svg rect { fill: #3c3e41; }
body.mono .mx-chart svg rect + text { fill: #e1e3e4; }
body.mono .mx-chart #gcBefore stop { stop-color: #9aa0a6; }
body.mono .mx-chart #gcAfter stop { stop-color: #ffffff; }

/* load-in, as before */
@keyframes mxIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.mx-band.is-loading .gx-bar { animation: mxIn .7s cubic-bezier(.2,.7,.2,1) both; }
.mx-band.is-loading .mx-t { animation: mxIn .9s cubic-bezier(.2,.7,.2,1) .1s both; }
.mx-band.is-loading .mx-s { animation: mxIn .9s cubic-bezier(.2,.7,.2,1) .25s both; }
.mx-band.is-loading .mx-card { animation: mxIn 1.2s cubic-bezier(.2,.7,.2,1) .4s both; }
.mx-band.is-loading .mx-chart { animation: mxIn 1s cubic-bezier(.2,.7,.2,1) .7s both; }
@media (prefers-reduced-motion: reduce) { .mx-band.is-loading * { animation: none !important; } }

/* about panel: type straight on the ground, the three integration cards dark */
body.mono .gx-about { background: none; padding-top: clamp(64px, 10vh, 112px); }
body.mono .gx-about-t { color: var(--m-ink); }
body.mono .gx-about-s { color: var(--m-ink-2); }
body.mono .gx-int li { background: var(--m-card); }
body.mono .gx-int b { color: var(--m-ink); }
body.mono .gx-int span:last-child { color: var(--m-ink-3); }
body.mono .gx-about .gx-promo { border-top-color: var(--m-line); }
body.mono .gx-promo-t b, body.mono .gx-promo-t span { color: var(--m-ink); }
body.mono .gx-promo-t span { color: var(--m-ink-2); }
body.mono .gx-promo-go { color: var(--m-ink); }

/* ---------- Media wells and cards ---------- */
body.mono :is(.gm-media, .gm-media.blue, .gm-media.soft, .gm-media.shot, .rx-vis, .rx-vis.blue, .rx-vis.ink, .rm-media, .rm-tile, .sx-c, .sx-c.sx-chat, .gm-hero.cw) { background: var(--m-card); }
body.mono :is(.gm-media, .rx-vis, .rm-media, .sx-c) img { mix-blend-mode: normal; }
body.mono .rm-collage { background: var(--m-card); }
body.mono .rm-tile figcaption { background: rgba(21,22,24,.82); color: var(--m-ink); }
body.mono .px-card, body.mono .rx-card { background: none; }
body.mono .px-track { background: rgba(255,255,255,.16); }
body.mono .ds-tabs { background: var(--m-card-2); }
body.mono .ds-tabs button { color: var(--m-ink-2); background: none; }
body.mono .ds-tabs button[aria-pressed="true"] { background: var(--m-ink); color: #151618; }
body.mono :is(.hx-more, .cw-replay) { color: var(--m-ink); }
body.mono .hx-more { text-decoration-color: currentColor; }
body.mono .cw-replay { background: rgba(255,255,255,.14); }
body.mono .cw-replay svg { fill: currentColor; }
/* the pilot's chat: monochrome bubbles */
body.mono .sx-b.me { background: #3c3e41; color: #f1f3f4; }
body.mono .sx-b.ecs { background: #f1f3f4; color: #202124; }
body.mono .sx-av { background: #f1f3f4; }
body.mono .sx-av svg { stroke: #202124; }
body.mono .sx-dots i { background: #9aa0a6; }

/* ---------- Quotes, next project, say hi, footer ---------- */
body.mono .qm-card { background: var(--m-card); border-color: transparent; border-radius: 28px; }
body.mono .qm-card blockquote { color: var(--m-ink); }
body.mono .qm-card cite { color: var(--m-ink-3); }
body.mono main.wrap > .nextproj a { color: var(--m-ink); }
body.mono .ac-cta { background: var(--m-card); }
body.mono .ac-cta .hi, body.mono .ac-cta .hi:hover { color: var(--m-ink); }
body.mono .ac-btn { background: #e1e3e4; color: #151618; border-color: #e1e3e4; }
body.mono .ac-btn:hover { background: #fff; }
body.mono .ac-btn.ghost { background: none; color: var(--m-ink); border: 1px solid #8e918f; }
body.mono .ac-btn.ghost:hover { background: rgba(255,255,255,.08); }
body.mono .ac-foot { background: none; border-top: 1px solid var(--m-line); }
body.mono .ac-foot, body.mono .ac-foot :is(p, span, b, h2, h3, h4) { color: var(--m-ink-2); }
body.mono .ac-foot a { color: var(--m-ink); }

/* ---------- Learn more dialog ---------- */
body.mono dialog.mdl, body.mono dialog { background: var(--m-card); color: var(--m-ink); }
body.mono dialog::backdrop { background: rgba(0,0,0,.6); }
body.mono dialog .mdl-x { background: var(--m-card-2); color: var(--m-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1023.98px) {
  .mx-band > .gx-bar { padding: 0; }
  .mx-card { border-radius: 20px; }
  .mx-chart { padding: 22px 18px 18px; border-radius: 20px; }
}
@media (max-width: 599.98px) {
  body.mono .mx-t { letter-spacing: -.5px; }
  .mx-card { padding: 18px 12px 14px; }
}
/* the chart rule sizes every svg in the figure; keep the "45% fewer" arrow at its own size */
body.mono .mx-chart .gx-save svg { display: inline; width: 12px; height: 12px; overflow: hidden; }
/* rules that outrank the generic ones above */
body.mono .px-left.rm-head .rm-title { color: var(--m-ink); }
body.mono main section.cgroup .rx-vis, body.mono main section.cgroup .rx-vis.blue, body.mono main section.cgroup .rx-vis.ink { background: var(--m-card); }
body.mono .rx-vis.ink .rx-big b, body.mono .rx-vis.ink .rx-big span { color: var(--m-ink); }
body.mono .sx-eye svg { fill: #e1e3e4; stroke: #e1e3e4; }
body.mono .sx-eye svg path + path { stroke: #151618; }
body.mono main.wrap > .nextproj .np-lab { color: var(--m-ink-3); }
/* light phone screens get a thin black bezel so they hold their edge on the dark cards */
body.mono .pf-phone { box-shadow: 0 0 0 5px #000, 0 0 0 6px #3c3e41, 0 30px 60px -28px rgba(0,0,0,.8); }
/* the dialog's channel chips (Phone tree / Radio / Email) sit on the dark card, outside any screen */
body.mono .ss-scene .chan { background: #3c3e41; color: #f1f3f4; }
/* the CME lookup shot: no light-blue well; the screen sits straight on the dark card */
body.mono .gm-media.shot { background: var(--m-card); }
/* the calls chart now sits in the overview panel, under the intro paragraph and lined up with it */
body.mono .gx-about .mx-chart { margin: 40px 0 0; }

/* ---------- Three benefits (2026-10-28), after the laptops page's three-card row ---------- */
.bn { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bn li { display: flex; flex-direction: column; }
.bn-vis { position: relative; aspect-ratio: 5 / 4; border-radius: 28px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 120%, #3a3c40 0, #1c1d20 60%, #0e0f11 100%); }
body.mono .bn p { margin: 28px 12px 0; text-align: center; text-wrap: balance; font-family: var(--display); font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.36; color: var(--m-ink); }
.bn-hub { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 20px; display: grid; place-items: center;
  background: #e1e3e4; box-shadow: 0 0 0 10px rgba(225,227,228,.06), 0 0 60px rgba(225,227,228,.18); z-index: 1; }
.bn-hub svg { width: 30px; height: 30px; fill: none; stroke: #151618; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.bn-tools .bn-hub svg path:first-child { fill: #151618; } .bn-tools .bn-hub svg path + path { stroke: #e1e3e4; }

/* 1 · tools: six services settle into a ring around ECS */
.bn-vis { container-type: inline-size; }
.bn-tools span, .bn-ratio span { --a: calc(var(--i) * 60deg - 90deg); position: absolute; white-space: nowrap; transform: translate(-50%, -50%);
  left: calc(50% + cos(var(--a)) * var(--r)); top: calc(50% + sin(var(--a)) * var(--r) * .72); }
.bn-tools span { padding: 7px 12px; border-radius: 999px; background: #2a2b2e; color: #c4c7c8; font-size: .8125rem; box-shadow: inset 0 0 0 1px #3c3e41;
  opacity: 0; --r: 46cqw; transition: opacity .5s ease calc(var(--i) * .12s), --r 1s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .12s); }
.bn.on .bn-tools span { --r: 31cqw; opacity: 1; }
@property --r { syntax: "<length>"; inherits: false; initial-value: 31cqw; }

/* 2 · ratio: one tracker, two lit bases become six */
.bn-ratio span { --r: 30cqw; width: 46px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-size: .75rem; font-weight: 500; letter-spacing: .02em;
  background: #2a2b2e; color: #6f7377; box-shadow: inset 0 0 0 1px #3c3e41; transition: background .4s ease, color .4s ease; }
.bn-ratio span.was, .bn-ratio.six span { background: #e1e3e4; color: #151618; box-shadow: none; }

.bn-ratio em { position: absolute; left: 0; right: 0; bottom: 4.5%; text-align: center; font-style: normal; font-family: var(--display); font-size: .9375rem; color: #e1e3e4; }
.bn-ratio em s { margin-right: 6px; color: #80868b; }

/* 3 · recovery: the number counts up */
.bn-rec { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.bn-rec strong { font-family: var(--display); font-weight: 500; font-size: clamp(4rem, 8vw, 7rem); line-height: 1; letter-spacing: -2px; color: #e1e3e4; }
.bn-rec span { font-size: .9375rem; color: #9aa0a6; }

.bn.still * { transition: none !important; }
@media (max-width: 1023.98px) {
  .bn { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  .bn-vis { aspect-ratio: 16 / 10; border-radius: 20px; }
  .bn p { margin-top: 18px; }
}
/* 2 · ratio as a tree (2026-10-28): the tracker on top, one stem down, a rail, and a drop to each of the six bases.
   The two middle bases (the old 2:1) are lit from the start; the rail then grows outward and the other four light up */
.bn-ratio { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 8%; }
.bn-ratio .bn-hub { position: relative; left: auto; top: auto; margin: 0; }
.bn-stem { width: 1.5px; height: 26px; margin-top: 10px; background: #e1e3e4; }
.bn-base { --gap: 10px; position: relative; display: flex; gap: var(--gap); padding-top: 24px; }
.bn-base::before { content: ""; position: absolute; top: 0; left: 23px; right: 23px; height: 1.5px; background: #3c3e41; }
.bn-base::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 1.5px; width: calc(46px + var(--gap));
  background: #e1e3e4; transition: width .9s cubic-bezier(.4,0,.2,1) .5s; }
.bn-ratio.six .bn-base::after { width: calc(100% - 46px); transition-delay: .2s; }
.bn-ratio .bn-base span { position: relative; left: auto; top: auto; transform: none; width: 46px; }
.bn-ratio .bn-base span::before { content: ""; position: absolute; left: 50%; top: -24px; width: 1.5px; height: 24px; margin-left: -.75px; background: #3c3e41; transition: background .4s ease; }
.bn-ratio .bn-base span.was::before, .bn-ratio.six .bn-base span::before { background: #e1e3e4; }
.bn-ratio.six .bn-base span:not(.was)::before { transition-delay: calc(.5s + var(--d) * .3s); }
.bn-ratio.six .bn-base span:not(.was) { transition-delay: calc(.6s + var(--d) * .3s); }
.bn-ratio em { position: static; margin-top: 22px; }
@container (max-width: 340px) { .bn-base { --gap: 6px; } .bn-ratio .bn-base span { width: 40px; font-size: .6875rem; } .bn-base::before { left: 20px; right: 20px; } .bn-ratio.six .bn-base::after { width: calc(100% - 40px); } }
/* 1 · tools, absorbed (2026-10-28): ten channels and services (names from Pepperoni-san) drift in from the edges, get pulled
   into ECS and vanish into it; the hub pulses as each one lands. A steady stream while on screen; a still ring under reduced motion */
@property --r { syntax: "<length>"; inherits: false; initial-value: 31cqw; }
.bn-tools span { --a: calc(var(--i) * 36deg - 90deg); opacity: 0; --r: 46cqw; transition: none; font-size: .75rem; padding: 6px 11px;
  transform: translate(-50%, -50%) scale(var(--k, 1)); }
.bn.on .bn-tools span { animation: bnAbsorb 6s cubic-bezier(.5,0,.75,0) calc(var(--i) * .6s) infinite both; }
@keyframes bnAbsorb {
  0%   { --r: 42cqw; opacity: 0; --k: 1; }
  12%  { opacity: 1; }
  55%  { --r: 30cqw; opacity: 1; --k: 1; animation-timing-function: cubic-bezier(.55,0,.9,.4); }
  92%  { --r: 3cqw; opacity: .6; --k: .35; }
  100% { --r: 0cqw; opacity: 0; --k: .2; }
}
@property --k { syntax: "<number>"; inherits: false; initial-value: 1; }
.bn.on .bn-tools .bn-hub { animation: bnGulp .6s ease-out 5.5s infinite; }
@keyframes bnGulp { 0% { transform: scale(1); box-shadow: 0 0 0 10px rgba(225,227,228,.06), 0 0 60px rgba(225,227,228,.18); }
  35% { transform: scale(1.07); box-shadow: 0 0 0 16px rgba(225,227,228,.1), 0 0 80px rgba(225,227,228,.3); } 100% { transform: scale(1); } }
.bn-vis:not(.bn-ratio) .bn-hub { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
  .bn-tools span, .bn.on .bn-tools span { animation: none; opacity: 1; --r: 31cqw; --k: 1; }
  .bn.on .bn-tools .bn-hub { animation: none; }
}
.bn.still .bn-tools span { animation: none; opacity: 1; --r: 31cqw; }
/* ratio loop (2026-10-28): "Before ECS" holds on the two bases one tracker could cover, then the rail grows to six ("With ECS") */
.bn-ratio .bn-base::after { transition: width .9s cubic-bezier(.4,0,.2,1); }
.bn-ratio .bn-base span:not(.was) { opacity: .45; }
.bn-ratio.six .bn-base span:not(.was) { opacity: 1; transition: background .4s ease, color .4s ease, opacity .4s ease; }
.bn-ratio em { position: relative; display: grid; margin-top: 22px; height: 1.4em; font-style: normal; }
.bn-ratio em b { grid-area: 1 / 1; font-weight: 400; transition: opacity .4s ease; }
.bn-ratio em b + b, .bn-ratio.six em b:first-child { opacity: 0; }
.bn-ratio.six em b + b { opacity: 1; transition-delay: .4s; }
.bn-ratio em b:first-child { color: #9aa0a6; }
/* 96% card particles (2026-10-28): a canvas behind the number */
.bn-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bn-rec strong, .bn-rec span { position: relative; }
/* the tools hub reads "ECS" instead of the plane mark */
.bn-tools .bn-hub { font-family: var(--display); font-size: 1.125rem; font-weight: 500; letter-spacing: .02em; color: #151618; }

/* Tools card as blobs (2026-10-28): a goo layer (blurred, then alpha-thresholded by #bnGoo) holds the hub and one blob per
   tool, so a blob stretches and fuses into ECS as it snaps in; the labels ride on top in a crisp layer and fade just before
   contact. Motion: drift in, a short pull back (anticipation), then a fast snap into the hub, which swells as it swallows. */
.bn-defs { position: absolute; width: 0; height: 0; }
.bn-goo, .bn-lab { position: absolute; inset: 0; }
.bn-goo { filter: url(#bnGoo); }
.bn-goo .g-hub { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: #e1e3e4; }
.bn-tools .bn-lab .bn-hub { background: none; box-shadow: none; }
.bn-tools .bn-goo span { background: #e1e3e4; color: transparent; box-shadow: none; }
.bn-tools .bn-lab span { background: none; box-shadow: none; color: #151618; font-weight: 500; }
.bn.on .bn-tools .bn-goo span, .bn.on .bn-tools .bn-lab span { animation: bnSnap 6s calc(var(--i) * .6s) infinite both; }
.bn.on .bn-tools .bn-lab span { animation-name: bnSnapLab; }
@keyframes bnSnap {
  0%   { --r: 42cqw; --k: .4; opacity: 0; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  14%  { --r: 36cqw; --k: 1; opacity: 1; animation-timing-function: ease-in-out; }
  64%  { --r: 29cqw; --k: 1; animation-timing-function: ease-out; }
  74%  { --r: 32cqw; --k: 1.06; animation-timing-function: cubic-bezier(.8,0,1,.6); }
  84%  { --r: 0cqw; --k: .55; opacity: 1; }
  100% { --r: 0cqw; --k: .3; opacity: 0; }
}
@keyframes bnSnapLab {
  0%   { --r: 42cqw; --k: .4; opacity: 0; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  14%  { --r: 36cqw; --k: 1; opacity: 1; animation-timing-function: ease-in-out; }
  64%  { --r: 29cqw; --k: 1; animation-timing-function: ease-out; }
  74%  { --r: 32cqw; --k: 1.06; opacity: 1; animation-timing-function: cubic-bezier(.8,0,1,.6); }
  79%  { opacity: 0; }
  84%  { --r: 0cqw; --k: .55; opacity: 0; }
  100% { --r: 0cqw; opacity: 0; }
}
.bn.on .bn-tools .bn-hub { animation: none; }
.bn.on .bn-goo .g-hub { animation: bnSwallow .6s cubic-bezier(.3,1.6,.5,1) 5.04s infinite; }
@keyframes bnSwallow { 0% { transform: scale(1); } 30% { transform: scale(1.16); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .bn.on .bn-tools .bn-goo span, .bn.on .bn-tools .bn-lab span, .bn-tools .bn-goo span, .bn-tools .bn-lab span { animation: none; opacity: 1; --r: 31cqw; --k: 1; }
  .bn.on .bn-goo .g-hub { animation: none; }
}
.bn.still .bn-tools .bn-goo span, .bn.still .bn-tools .bn-lab span { animation: none; opacity: 1; --r: 31cqw; --k: 1; }
/* Microsoft story link back in its own card (2026-10-28) */
body.mono .gx-about .gx-promo { margin-top: 56px; padding: 24px 32px; border-top: 0; border-radius: 28px; background: var(--m-card); min-height: 101px; }
body.mono .gx-about .gx-promo:hover { background: var(--m-card-2); }
@media (max-width: 1023.98px) { body.mono .gx-about .gx-promo { padding: 18px 20px; border-radius: 20px; } }
/* staggered so only ~3 blobs are out at once: each waits, surfaces at the edge, drifts in, pulls back, then snaps */
.bn.on .bn-tools .bn-goo span, .bn.on .bn-tools .bn-lab span { animation: bnSnap2 7s calc(var(--i) * .7s) infinite both; }
.bn.on .bn-tools .bn-lab span { animation-name: bnSnapLab2; }
@keyframes bnSnap2 {
  0%, 50% { --r: 40cqw; --k: .3; opacity: 0; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  60%  { --r: 33cqw; --k: 1; opacity: 1; animation-timing-function: ease-in-out; }
  80%  { --r: 28cqw; --k: 1; animation-timing-function: ease-out; }
  85%  { --r: 31cqw; --k: 1.08; animation-timing-function: cubic-bezier(.85,0,1,.55); }
  91%  { --r: 0cqw; --k: .5; opacity: 1; }
  100% { --r: 0cqw; --k: .3; opacity: 0; }
}
@keyframes bnSnapLab2 {
  0%, 50% { --r: 40cqw; --k: .3; opacity: 0; animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  60%  { --r: 33cqw; --k: 1; opacity: 1; animation-timing-function: ease-in-out; }
  80%  { --r: 28cqw; --k: 1; animation-timing-function: ease-out; }
  85%  { --r: 31cqw; --k: 1.08; opacity: 1; animation-timing-function: cubic-bezier(.85,0,1,.55); }
  88%  { opacity: 0; }
  91%  { --r: 0cqw; --k: .5; opacity: 0; }
  100% { --r: 0cqw; opacity: 0; }
}
.bn.on .bn-goo .g-hub { animation: bnSwallow .7s cubic-bezier(.3,1.6,.5,1) 6.37s infinite; }
/* chart card spans the overview panel's full width, centered; its contents stay a readable 880px column in the middle */
body.mono .gx-about .mx-chart { width: 100%; margin: 40px auto 0; }
body.mono .gx-about .mx-chart > * { max-width: 880px; margin-left: auto; margin-right: auto; }
body.mono .gx-about .mx-chart .mx-copy { margin-bottom: 28px; }
/* duty-state picker (2026-10-28), after the Google Store size picker ("✓ Pro 6.3\"" / "Pro XL 6.8\""): touching pills, the
   chosen one solid with a check, the others plain; light-on-dark here */
body.mono .ds-tabs { gap: 0; padding: 0; background: none; box-shadow: none; bottom: 5%; }
body.mono .ds-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 999px;
  background: #2a2b2e; color: #e1e3e4; font: 500 15px/1 "Google Sans", Roboto, Arial, sans-serif; transition: background .25s ease, color .25s ease; }
body.mono .ds-tabs button[aria-pressed="true"] { background: #e1e3e4; color: #151618; padding-left: 14px; }
body.mono .ds-tabs button[aria-pressed="true"]::before { content: ""; width: 14px; height: 9px; margin-top: -4px; border: solid currentColor; border-width: 0 0 2.2px 2.2px; transform: rotate(-45deg); box-sizing: border-box; }
body.mono .ds-tabs button:not([aria-pressed="true"]):hover { background: #3c3e41; }
body.mono .ds-tabs button:focus-visible { outline: 2px solid #e1e3e4; outline-offset: 2px; }
/* the duty-state picker sits under the caption, not on the image (2026-10-28) */
body.mono figcaption .ds-tabs { position: static; transform: none; margin-top: 20px; align-self: flex-start; display: inline-flex; }
/* duty-state screenshots inside a phone (2026-10-28): black bezel, rounded screen, centered now that the picker sits below */
body.mono .gm-media.ds .ds-ph { top: 50%; height: 86%; transform: translate(-50%, -50%); border: 9px solid #000; border-radius: 14% / 6.5%;
  box-shadow: 0 0 0 1.5px #3c3e41, 0 30px 60px -28px rgba(0,0,0,.8); background: #000; }
body.mono .gm-media.ds .ds-ph::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 1.4%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 999px; background: #000; }
body.mono .gm-media.ds .ds-ph { box-sizing: content-box; height: calc(86% - 18px); }
body.mono .gm-media.ds .ds-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* rising arrow ahead of the 96% (2026-10-28); it climbs in as the number counts up */
.bn-num { display: flex; align-items: center; gap: clamp(4px, 1cqw, 12px); }
.bn-up { flex: none; width: clamp(2.5rem, 5.5vw, 4.75rem); height: auto; fill: none; stroke: #e1e3e4; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bn:not(.still) .bn-up { opacity: 0; transform: translateY(30%); transition: opacity .5s ease .1s, transform 1.2s cubic-bezier(.2,.8,.2,1) .1s; }
.bn.on .bn-up { opacity: 1; transform: none; }
/* collage labels wrap instead of running past a narrow tile ("Importance/Difficulty Mapping") */
body.mono .rm-tile figcaption { max-width: calc(100% - 20px); box-sizing: border-box; white-space: normal; }

/* Hold card animation (2026-10-28): the pilot's line on hold, then the next flights flip from On time to Delayed */
.dl-q { position: absolute; z-index: 2; left: 8%; right: 14%; top: 7%; margin: 0; padding: 14px 16px; border-radius: 18px 18px 18px 4px; background: #fff;
  color: #1f1f1f !important; font-size: .9375rem; line-height: 1.38; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: 0 100%; transition: opacity .35s ease, transform .5s cubic-bezier(.3,1.4,.5,1); }
.dl-q b { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 500; color: #5f6368; }
.rx-vis.dl-say .dl-q { opacity: 1; transform: none; }
.dl-b { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: 6px; }
.dl-b li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #f3f3f1; font-size: .8125rem; color: #1f1f1f; }
.dl-b li b { font-weight: 600; } .dl-b li > span { color: #5f6368; }
.dl-b em { position: relative; display: grid; font-style: normal; font-weight: 600; font-size: .75rem; }
.dl-b em s { grid-area: 1 / 1; text-decoration: none; padding: 2px 8px; border-radius: 6px; text-align: center; transition: opacity .25s ease, transform .35s cubic-bezier(.3,1.4,.5,1); }
.dl-b em s:first-child { background: #e6f4ea; color: #137333; }
.dl-b em s + s { background: #fce8e6; color: #c5221f; opacity: 0; transform: translateY(-6px); }
.dl-b li.late em s:first-child { opacity: 0; transform: translateY(6px); }
.dl-b li.late em s + s { opacity: 1; transform: none; }
.dl-b li.late { animation: dlShake .4s ease; }
@keyframes dlShake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .dl-q, .dl-b * { transition: none; } .dl-b li.late { animation: none; } }
/* the bubble keeps clear of the pilot's face on the terminal photo */
.dl-q { right: 36%; }
@container (max-width: 380px) { .dl-q { right: 22%; } }
.dl-q { left: 6%; right: 42%; font-size: .875rem; padding: 12px 14px; }
@container (max-width: 380px) { .dl-q { right: 30%; } }

/* "No status after the call." (2026-10-28): a one-sided thread. Typing dots appear and vanish with no reply, the pilot
   asks "Hello?" and "Hello…?", and the thread ends on "No reply". Classes k1-k5 show each beat, x1/x3 drop the dots */
.hl-conf { background: radial-gradient(90% 70% at 50% 120%, #3a3c40 0, #1c1d20 60%, #0e0f11 100%) !important; }
.hc-thread { position: absolute; inset: 9% 9% 9%; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.hc-who { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: .8125rem; color: #9aa0a6; }
.hc-thread > p { margin: 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px) scale(.9);
  transition: max-height .35s ease, opacity .3s ease, transform .45s cubic-bezier(.3,1.4,.5,1), margin .35s ease; }
.hc-dots { align-self: flex-start; display: flex; gap: 5px; padding: 0 16px; border-radius: 18px 18px 18px 4px; background: #3c3e41; transform-origin: 0 100%; }
.hc-dots i { width: 7px; height: 7px; margin: 14px 0; border-radius: 50%; background: #c4c7c8; animation: hcDot 1.2s ease-in-out infinite; }
.hc-dots i:nth-child(2) { animation-delay: .15s; } .hc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hcDot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.hc-me { align-self: flex-end; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: #e1e3e4; color: #151618 !important; font-size: 1rem; line-height: 1.3; transform-origin: 100% 100%; }
.hl-conf.k1 .k1, .hl-conf.k2 .k2, .hl-conf.k3 .k3, .hl-conf.k4 .k4 { max-height: 60px; opacity: 1; transform: none; }
.hl-conf.x1 .k1, .hl-conf.x3 .k3 { max-height: 0; opacity: 0; transform: scale(.8); margin-top: -10px; }
.hc-st { align-self: center; margin-top: 6px; font-size: .75rem; letter-spacing: .02em; color: #80868b; opacity: 0; transition: opacity .5s ease; }
.hl-conf.k5 .hc-st { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hc-thread * { transition: none !important; animation: none !important; } }
/* bigger bubbles so the thread reads at card size */
.hc-thread { inset: 10% 10% 12%; gap: 12px; } .hc-who { font-size: .9375rem; }
.hc-me { padding: 12px 20px; font-size: 1.375rem; border-radius: 22px 22px 6px 22px; }
.hc-dots { padding: 0 20px; gap: 7px; border-radius: 22px 22px 22px 6px; } .hc-dots i { width: 10px; height: 10px; margin: 19px 0; }
.hl-conf.k1 .k1, .hl-conf.k2 .k2, .hl-conf.k3 .k3, .hl-conf.k4 .k4 { max-height: 80px; }
.hc-st { font-size: .875rem; }

/* "No clear process" workflow (2026-10-28): five layers between the pilot and a booked hotel. The standard path (gray, lit
   white as it goes) crawls down layer by layer; the red dashed line breaks out, goes around the stack and lands first */
.wf-box { background: radial-gradient(90% 70% at 50% 120%, #3a3c40 0, #1c1d20 60%, #0e0f11 100%) !important; }
.wf { position: absolute; inset: 6% 6% 5%; width: 88%; height: 89%; overflow: visible; font-family: "Google Sans", Roboto, Arial, sans-serif; }
.wf-l rect { fill: #2a2b2e; stroke: #3c3e41; stroke-width: 1.5; transition: fill .4s ease, stroke .4s ease; }
.wf-l text { font-size: 17px; fill: #9aa0a6; transition: fill .4s ease; }
.wf-n { fill: #151618; stroke: #5f6368; stroke-width: 2; transition: fill .4s ease, stroke .4s ease; }
.wf-s { fill: #e1e3e4; } .wf-st { font-size: 15px; fill: #e1e3e4; }
.wf-norm { fill: none; stroke: #5f6368; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wf-box.run .wf-norm { stroke: #e1e3e4; stroke-dashoffset: .55; transition: stroke-dashoffset 3s linear .2s; }
.wf-box.g1 .l1 rect, .wf-box.g2 .l2 rect, .wf-box.g3 .l3 rect { fill: #3c3e41; stroke: #80868b; }
.wf-box.g1 .l1 text, .wf-box.g2 .l2 text, .wf-box.g3 .l3 text { fill: #f1f3f4; }
.wf-box.g1 .l1 .wf-n, .wf-box.g2 .l2 .wf-n, .wf-box.g3 .l3 .wf-n { fill: #e1e3e4; stroke: #e1e3e4; }
.wf-box.g3 .l3 rect { animation: wfWait 1.2s ease-in-out .3s infinite; }
@keyframes wfWait { 50% { stroke: #e1e3e4; } }
.wf-goal rect { fill: #2a2b2e; stroke: #5f6368; stroke-width: 1.5; transition: fill .3s ease, stroke .3s ease; }
.wf-goal text { font-size: 17px; font-weight: 500; fill: #c4c7c8; transition: fill .3s ease; }
.wf-reb { fill: none; stroke: #ee675c; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wf-box.reb .wf-reb { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.6,0,.3,1); }
.wf-rl { font-size: 14px; font-weight: 500; fill: #ee675c; opacity: 0; transition: opacity .4s ease .5s; }
.wf-box.reb .wf-rl { opacity: 1; }
.wf-box.hit .wf-goal rect { fill: #ee675c; stroke: #ee675c; animation: wfHit .6s ease; transform-box: fill-box; transform-origin: center; }
.wf-box.hit .wf-goal text { fill: #151618; }
@keyframes wfHit { 40% { transform: scale(1.08); } }
.wf-box.still * { transition: none !important; animation: none !important; }
.wf-box.still .wf-norm { stroke-dashoffset: .55; }

/* Solution opener (2026-10-28): request chat left, IOC photo middle, the granted hotel on the pilot's phone right.
   The phone rises out of the card's foot (cropped like the store's device shots); a push banner drops in, then the
   message opens with the hotel details. Hotel data is sample data */
.sx-ok { background: radial-gradient(90% 70% at 50% 120%, #3a3c40 0, #1c1d20 60%, #0e0f11 100%) !important; container-type: inline-size; }
.ok-ph { position: absolute; left: 50%; top: 9%; width: 66%; aspect-ratio: 393 / 852; transform: translateX(-50%); border: 2.6cqw solid #000; border-radius: 13cqw;
  box-shadow: 0 0 0 1.5px #3c3e41, 0 40px 80px -30px rgba(0,0,0,.8); background: #000; overflow: hidden; }
.ok-scr { position: absolute; inset: 0; border-radius: 10.4cqw; overflow: hidden; background: #f2f2f7; color: #1f1f1f; font: 3.6cqw/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, sans-serif; }
.ok-bar { display: flex; justify-content: space-between; align-items: center; padding: 3.6cqw 7cqw 0; font-weight: 600; }
.ok-bar i { width: 6cqw; height: 2.6cqw; border-radius: 1cqw; background: #1f1f1f; }
.ok-scr::before { content: ""; position: absolute; left: 50%; top: 2cqw; width: 18cqw; height: 5cqw; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 3; }
/* push banner */
.ok-push { position: absolute; z-index: 2; left: 3cqw; right: 3cqw; top: 9cqw; display: flex; gap: 2.6cqw; align-items: flex-start; padding: 3cqw 3.4cqw; border-radius: 5cqw;
  background: rgba(255,255,255,.92); box-shadow: 0 2cqw 6cqw rgba(0,0,0,.18); transform: translateY(-140%); transition: transform .55s cubic-bezier(.3,1.3,.5,1); }
.ok-push .ok-ic { flex: none; width: 8cqw; height: 8cqw; border-radius: 2.2cqw; background: #0b57d0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5 21 3l-6.5 18-3.2-7.3Z' fill='white'/%3E%3C/svg%3E") center / 60% no-repeat; }
.ok-push span { display: block; font-size: 2.8cqw; color: #5f6368; } .ok-push b:not(.ok-ic) { display: block; font-size: 3.6cqw; } .ok-push em { display: block; font-style: normal; font-size: 3.2cqw; color: #3c4043; }
.sx-ok.push .ok-push { transform: none; }
/* message */
.ok-msg { position: absolute; inset: 9cqw 0 0; padding: 2cqw 5cqw; background: #fff; transform: translateY(102%); transition: transform .6s cubic-bezier(.3,.8,.2,1); }
.sx-ok.open .ok-msg { transform: none; }
.ok-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 9cqw; margin-bottom: 3cqw; } .ok-nav span { color: #0b5cc0; font-size: 3.2cqw; } .ok-nav b { font-weight: 600; }
.ok-pill { display: inline-block; padding: .8cqw 2.6cqw; border-radius: 999px; background: #e6f4ea; color: #137333; font-size: 3cqw; font-weight: 600; }
.ok-msg h5 { margin: 2.4cqw 0 0; font-size: 5.6cqw; font-weight: 600; line-height: 1.2; color: #1f1f1f; }
.ok-sub { margin: 1cqw 0 0; font-size: 3.2cqw; color: #5f6368 !important; }
.ok-hotel { margin-top: 3.6cqw; padding: 3.4cqw; border-radius: 3.6cqw; background: #f2f2f7; } .ok-hotel b { display: block; font-size: 3.8cqw; } .ok-hotel span { display: block; margin-top: .6cqw; font-size: 3cqw; color: #5f6368; }
.ok-msg dl { margin: 3.4cqw 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw 3cqw; } .ok-msg dt { font-size: 2.8cqw; color: #5f6368; } .ok-msg dd { margin: .4cqw 0 0; font-size: 3.4cqw; font-weight: 600; }
.ok-btn { display: grid; place-items: center; margin-top: 4.4cqw; height: 9cqw; border-radius: 3cqw; background: #0b5cc0; color: #fff; font-weight: 600; font-size: 3.6cqw; }
@media (prefers-reduced-motion: reduce) { .ok-push, .ok-msg { transition: none; } }
/* hero (2026-10-28): the project name is now an eyebrow with the ECS mark; the line under it is the headline */
body.mono .mx-eye { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-family: var(--display); font-size: clamp(1.125rem, 1.7vw, 1.5rem); line-height: 1.3; color: #9aa0a6; }
.mx-eye svg { width: 1.15em; height: 1.15em; fill: #9aa0a6; stroke: #9aa0a6; stroke-width: 1.4; stroke-linejoin: round; }
.mx-eye svg path + path { fill: none; stroke: #151618; stroke-width: 1.6; stroke-linecap: round; }
body.mono .mx-hd .mx-t { margin: clamp(14px, 1.6vw, 22px) auto 0; max-width: 16ch; font-size: clamp(2.5rem, 5.4vw, 4.75rem); }
.mx-band.is-loading .mx-eye { animation: mxIn .8s cubic-bezier(.2,.7,.2,1) both; }
/* Tools card, reaching (2026-10-29): script-driven. ECS sends a gooey arm out to one tool, latches, and reels it in fast;
   the hub swells on a spring as it swallows. Tools surface in free slots and float while they wait. Labels follow their blobs.
   Without the script (or under reduced motion) the still ring above stays. */
.bn.on .bn-tools.js .bn-goo span, .bn.on .bn-tools.js .bn-lab span, .bn-tools.js .bn-goo .g-hub { animation: none; }
.bn-tools.js .bn-goo span, .bn-tools.js .bn-lab span { opacity: 0; will-change: left, top, transform, opacity; }
.bn-tools.js .g-hub, .bn-tools.js .bn-lab .bn-hub { will-change: transform; }
.bn-goo .g-arm, .bn-goo .g-bead { position: absolute; left: 0; top: 0; width: 0; height: 0; background: #e1e3e4; border-radius: 999px; transform-origin: 0 0; }
/* Microsoft story sits above the overview text (2026-10-29) */
body.mono .gx-about > .gx-promo:first-of-type { margin: 0 0 56px; }
@media (max-width: 1023.98px) { body.mono .gx-about > .gx-promo:first-of-type { margin-bottom: 36px; } }
/* Microsoft story spacing after the Google Store trade-in strip under the Pixel hero (2026-10-29): sits ~24px under the hero card
   (no top padding on the about block), 116px tall, 56px side padding, 32px between thumbnail and text, the link 56px in from the right */
body.mono main.wrap > .gx-hero .gx-about, body.mono .gx-about { padding-top: 0; }
body.mono .gx-about > .gx-promo:first-of-type { min-height: 116px; padding: 24px 56px; gap: 32px; }
@media (max-width: 1023.98px) { body.mono .gx-about > .gx-promo:first-of-type { min-height: 0; padding: 20px 24px; gap: 16px; } }
/* Microsoft story as wide as the hero card above it (12 columns: it cancels the about block's 1-column side padding), and a real
   thumbnail: a 4:3 crop of the phone + Crew Member Lookup (images/thumbs/ecs-ms-thumb.jpg) filling a 96x72 rounded tile (2026-10-29) */
body.mono .gx-about > .gx-promo:first-of-type { margin-left: calc((var(--g-w10) - var(--g-w12)) / 2); margin-right: calc((var(--g-w10) - var(--g-w12)) / 2); }
body.mono .gx-about > .gx-promo:first-of-type img { width: 96px; height: 72px; object-fit: cover; border-radius: 14px; }
@media (max-width: 1023.98px) { body.mono .gx-about > .gx-promo:first-of-type { margin-left: -24px; margin-right: -24px; }
  body.mono .gx-about > .gx-promo:first-of-type img { width: 72px; height: 54px; border-radius: 12px; } }