/* The six capability bodies below the heroes (assets/topic-bodies.js). Every block has a plain layout that reads on
   its own, which is what a reader with reduced motion (or no script) gets; the scroll scenes take over only under
   html.bodies-live, which the script sets when motion is allowed. Loads after systems-topic.css. */

/* shared */
.b { position: relative; }
.b-pass { position: relative; padding: 20vh var(--gutter); text-align: center; }
.b-lede { max-width: 25ch; margin: 0 auto; font: 300 clamp(28px, 2.9vw, 52px)/1.24 var(--sys-display); letter-spacing: -.012em; text-wrap: balance; }
.b-h { font: 200 clamp(46px, 5.6vw, 108px)/1 var(--sys-display); letter-spacing: -.01em; text-wrap: balance; }
.b-h .accent { font-size: .92em; }
.b-p { max-width: 46ch; margin: 32px auto 0; font: 400 clamp(17px, 1.3vw, 21px)/1.55 var(--sys-body); letter-spacing: -.012em; color: #3f4954; text-wrap: pretty; }
.b-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-actions { justify-content: center; margin-top: 10vh; }
:where(.b) :where(h2, h3, p, dl, dt, dd, ul) { margin: 0; }   /* no weight, so every block's own margins win */
:where(.b) ul { padding: 0; list-style: none; }

/* hero placement for the section pages: tools/build-standalone.cjs turns a page's heroAt words into at-* classes.
   Where the words sit: top, right, center, middle, ml and mr (held at mid height), split and splitr (name in one corner,
   promise in the opposite one), poles (name in the sky, promise at the foot), foot (a name as wide as the picture along
   its lower edge). How they are set: inv (a small name over a large promise), cap (a narrow caption), giant (the name
   at full size). high and low nudge a block toward its edge. Each placement shades only the part of the picture it uses */
.t-hero-text.at-right { left: auto; right: var(--gutter); text-align: right; }
.t-hero-text.at-right > * { width: fit-content; margin-left: auto; }
.t-hero-text.at-center { left: 0; right: 0; width: auto; padding: 0 var(--gutter); text-align: center; }
.t-hero-text.at-center > * { margin-left: auto; margin-right: auto; }
.t-hero-text.at-top { top: 17vh; bottom: auto; }
.t-hero-text.at-high { top: 9vh; }
.t-hero-text.at-low { bottom: 5vh; }
.t-hero-text.at-high .t-line { max-width: 52ch; margin-left: auto; margin-right: auto; }
.t-hero-text.at-right.at-high .t-line { margin-right: 0; }
.t-hero-text.at-ml, .t-hero-text.at-mr { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; width: min(640px, 46vw); }
.t-hero-text.at-mr { left: auto; right: var(--gutter); align-items: flex-end; text-align: right; }
.t-hero-text.at-split, .t-hero-text.at-splitr { top: 15vh; bottom: 11vh; left: var(--gutter); right: var(--gutter); width: auto; display: flex; flex-direction: column; }
.t-hero-text.at-split .t-title { align-self: flex-start; max-width: 62%; }
.t-hero-text.at-split :is(.t-statement, .t-line) { align-self: flex-end; text-align: right; }
.t-hero-text.at-split .t-statement, .t-hero-text.at-splitr .t-statement { margin-top: auto; }
.t-hero-text.at-splitr .t-title { align-self: flex-end; max-width: 62%; text-align: right; }
.t-hero-text.at-splitr :is(.t-statement, .t-line) { align-self: flex-start; }
.t-hero-text.at-poles { top: 10vh; bottom: 8vh; left: var(--gutter); right: var(--gutter); width: auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.t-hero-text.at-poles .t-statement { margin-top: auto; }
.t-hero-text.at-middle { top: 0; bottom: 0; left: 0; right: 0; width: auto; padding: 0 var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.t-hero-text.at-foot { top: 15vh; bottom: 3vh; left: var(--gutter); right: var(--gutter); width: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.t-hero-text.at-foot .t-statement { order: 1; margin-top: 0; max-width: 16ch; }
.t-hero-text.at-foot .t-line { order: 2; max-width: 34ch; }
.t-hero-text.at-foot .t-title { order: 3; margin-top: auto; align-self: stretch; text-align: left; }
.t-hero-text.at-inv .t-title { font-size: clamp(22px, 1.9vw, 34px); font-weight: 300; }
.t-hero-text.at-inv .t-statement { margin-top: .35em; font-size: clamp(44px, 5.4vw, 104px); line-height: 1; }
.t-hero-text.at-cap { width: min(400px, 27vw); }
.t-hero-text.at-center.at-cap { left: 0; right: 0; margin: 0 auto; padding: 0; }
.t-hero-text.at-cap .t-title { font-size: clamp(36px, 3.5vw, 66px); }
.t-hero-text.at-cap .t-statement { font-size: clamp(22px, 2.1vw, 40px); }
.t-hero-text.at-cap .t-line { font-size: 15px; }
.t-hero-text.at-giant { width: calc(100vw - 2 * var(--gutter)); }
.t-hero-text.at-center.at-giant { width: auto; }
.t-hero-text.at-giant .t-title { font-size: clamp(96px, 15vw, 280px); line-height: .84; letter-spacing: -.03em; }
.t-hero-text.at-giant .t-statement { font-size: clamp(24px, 2.4vw, 44px); }
/* the shades */
.t-hero:has(.at-right) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .42) 0%, rgba(8, 10, 10, 0) 24%, rgba(8, 10, 10, 0) 44%, rgba(8, 10, 10, .82) 100%), linear-gradient(270deg, rgba(8, 10, 10, .55) 0%, rgba(8, 10, 10, 0) 58%); }
.t-hero:has(.at-top) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .74) 0%, rgba(8, 10, 10, .3) 36%, rgba(8, 10, 10, 0) 56%, rgba(8, 10, 10, .45) 100%), linear-gradient(90deg, rgba(8, 10, 10, .45) 0%, rgba(8, 10, 10, 0) 56%); }
.t-hero:has(.at-right.at-top) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .74) 0%, rgba(8, 10, 10, .3) 36%, rgba(8, 10, 10, 0) 56%, rgba(8, 10, 10, .45) 100%), linear-gradient(270deg, rgba(8, 10, 10, .45) 0%, rgba(8, 10, 10, 0) 56%); }
.t-hero:has(.at-center) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .42) 0%, rgba(8, 10, 10, 0) 24%, rgba(8, 10, 10, 0) 40%, rgba(8, 10, 10, .9) 100%); }
.t-hero:has(.at-center.at-top) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .78) 0%, rgba(8, 10, 10, .34) 38%, rgba(8, 10, 10, 0) 58%, rgba(8, 10, 10, .5) 100%); }
.t-hero:has(.at-ml) .t-media::after { background: linear-gradient(90deg, rgba(8, 10, 10, .82) 0%, rgba(8, 10, 10, .45) 34%, rgba(8, 10, 10, 0) 58%), linear-gradient(180deg, rgba(8, 10, 10, .4) 0%, rgba(8, 10, 10, 0) 22%, rgba(8, 10, 10, 0) 80%, rgba(8, 10, 10, .5) 100%); }
.t-hero:has(.at-mr) .t-media::after { background: linear-gradient(270deg, rgba(8, 10, 10, .82) 0%, rgba(8, 10, 10, .45) 34%, rgba(8, 10, 10, 0) 58%), linear-gradient(180deg, rgba(8, 10, 10, .4) 0%, rgba(8, 10, 10, 0) 22%, rgba(8, 10, 10, 0) 80%, rgba(8, 10, 10, .5) 100%); }
.t-hero:has(.at-split) .t-media::after { background: linear-gradient(160deg, rgba(8, 10, 10, .7) 0%, rgba(8, 10, 10, 0) 38%), linear-gradient(340deg, rgba(8, 10, 10, .8) 0%, rgba(8, 10, 10, 0) 42%); }
.t-hero:has(.at-splitr) .t-media::after { background: linear-gradient(200deg, rgba(8, 10, 10, .7) 0%, rgba(8, 10, 10, 0) 38%), linear-gradient(20deg, rgba(8, 10, 10, .82) 0%, rgba(8, 10, 10, 0) 42%); }
.t-hero:has(.at-poles) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .62) 0%, rgba(8, 10, 10, .12) 30%, rgba(8, 10, 10, 0) 45%, rgba(8, 10, 10, 0) 62%, rgba(8, 10, 10, .88) 100%); }
.t-hero:has(.at-middle) .t-media::after { background: radial-gradient(ellipse 52% 48% at 50% 50%, rgba(8, 10, 10, .5), rgba(8, 10, 10, 0) 72%), linear-gradient(180deg, rgba(8, 10, 10, .4) 0%, rgba(8, 10, 10, 0) 22%, rgba(8, 10, 10, 0) 76%, rgba(8, 10, 10, .55) 100%); }
.t-hero:has(.at-foot) .t-media::after { background: linear-gradient(0deg, rgba(8, 10, 10, .88) 0%, rgba(8, 10, 10, .5) 22%, rgba(8, 10, 10, 0) 44%), linear-gradient(200deg, rgba(8, 10, 10, .62) 0%, rgba(8, 10, 10, 0) 36%); }
/* more compositions, so no two heroes set their words the same way:
   row: the name on one side and the promise on the other, sharing a band at the top or the foot of the picture;
   words: a long name stacked a phrase to a line; vertical: the name set down the right edge like a spine;
   serif: the name in the italic serif; flush: a column whose right edge faces the picture */
.t-hero-text.at-row { left: var(--gutter); right: var(--gutter); width: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 5vw; align-items: end; }
.t-hero-text.at-row .t-title { grid-column: 1; grid-row: 1 / span 2; align-self: end; }
.t-hero-text.at-row .t-statement { grid-column: 2; grid-row: 1; margin-top: 0; }
.t-hero-text.at-row .t-line { grid-column: 2; grid-row: 2; margin-top: 18px; }
.t-hero-text.at-row.at-top { top: 14vh; bottom: auto; align-items: start; }
.t-hero-text.at-row.at-top .t-title { align-self: start; }
.t-hero-text.at-row.at-low { top: auto; bottom: 8vh; }
.t-hero-text.at-words .t-title { font-size: clamp(44px, 4.9vw, 92px); line-height: 1.02; }
.t-hero-text.at-vertical { top: 13vh; bottom: 9vh; left: auto; right: var(--gutter); width: min(640px, 46vw); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; text-align: right; padding-right: calc(clamp(64px, 7.4vw, 136px) + 3vw); }
.t-hero-text.at-vertical .t-title { position: absolute; right: 0; top: 0; bottom: 0; margin: 0; writing-mode: vertical-rl; font-size: clamp(64px, 7.4vw, 136px); line-height: 1; text-align: end; }
.t-hero-text.at-vertical .t-statement { margin-top: 0; }
.t-hero-text.at-serif .t-title { font-family: var(--sys-accent); font-style: italic; font-weight: 400; letter-spacing: -.012em; }
.t-hero-text.at-flush { text-align: right; align-items: flex-end; }
.t-hero-text.at-flush > * { margin-left: auto; }
.t-hero:has(.at-row.at-top) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .8) 0%, rgba(8, 10, 10, .42) 30%, rgba(8, 10, 10, 0) 50%, rgba(8, 10, 10, .4) 100%); }
.t-hero:has(.at-row.at-low) .t-media::after { background: linear-gradient(0deg, rgba(8, 10, 10, .9) 0%, rgba(8, 10, 10, .5) 26%, rgba(8, 10, 10, 0) 48%), linear-gradient(180deg, rgba(8, 10, 10, .4) 0%, rgba(8, 10, 10, 0) 22%); }
.t-hero:has(.at-vertical) .t-media::after { background: linear-gradient(270deg, rgba(8, 10, 10, .78) 0%, rgba(8, 10, 10, .4) 30%, rgba(8, 10, 10, 0) 52%), linear-gradient(0deg, rgba(8, 10, 10, .6) 0%, rgba(8, 10, 10, 0) 36%); }
.t-hero:has(.at-right.at-low) .t-media::after { background: linear-gradient(270deg, rgba(8, 10, 10, .7) 0%, rgba(8, 10, 10, 0) 50%), linear-gradient(0deg, rgba(8, 10, 10, .85) 0%, rgba(8, 10, 10, .3) 30%, rgba(8, 10, 10, 0) 50%), linear-gradient(180deg, rgba(8, 10, 10, .4) 0%, rgba(8, 10, 10, 0) 22%); }
.t-hero:has(.at-low:not(.at-center):not(.at-right):not(.at-row)) .t-media::after { background: linear-gradient(0deg, rgba(8, 10, 10, .9) 0%, rgba(8, 10, 10, .45) 30%, rgba(8, 10, 10, 0) 52%), linear-gradient(90deg, rgba(8, 10, 10, .55) 0%, rgba(8, 10, 10, 0) 50%); }
.t-hero:has(.at-center.at-low) .t-media::after { background: linear-gradient(0deg, rgba(8, 10, 10, .92) 0%, rgba(8, 10, 10, .6) 24%, rgba(8, 10, 10, 0) 50%), linear-gradient(180deg, rgba(8, 10, 10, .4) 0%, rgba(8, 10, 10, 0) 22%); }
.t-hero .t-hero-text.at-center.at-low { top: auto; bottom: 7vh; }
.t-hero.is-type .t-hero-text.at-low { justify-content: flex-end; }
.t-hero-text.at-low:not(.at-center):not(.at-row) { top: auto; bottom: 8vh; }
/* the marks some mechanics draw: the bar that passes over a word as it is cleared, the caret, the horizon */
.w.rd { position: relative; }
.w.rd::after { content: ""; position: absolute; left: -.05em; right: -.05em; top: .06em; bottom: -.08em; background: var(--rd, #dfe5ea); transform: scaleX(var(--bar, 0)); transform-origin: var(--rdo, 100%) 50%; pointer-events: none; }
.t-statement:has(.t-caret) { position: relative; }
.t-caret { position: absolute; left: 0; top: 0; width: 2px; height: 1em; background: currentColor; pointer-events: none; }
.t-body[data-tone="light"] { --rd: #12161c; }
.c { display: inline-block; }
[data-chars] .wi { white-space: nowrap; }   /* a word split into letters still breaks only between words */
.t-horizon { position: absolute; left: -3%; right: -3%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(156, 195, 224, .9) 18%, rgba(255, 255, 255, .95) 50%, rgba(156, 195, 224, .9) 82%, transparent); box-shadow: 0 0 16px 2px rgba(156, 195, 224, .35); }
.t-horizon { bottom: -1px; }
.t-hero:has(.at-center.at-top) .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .78) 0%, rgba(8, 10, 10, .34) 38%, rgba(8, 10, 10, 0) 58%, rgba(8, 10, 10, .5) 100%); }
.t-hero.is-type { background: radial-gradient(ellipse 58% 70% at 16% 92%, rgba(201, 56, 76, .3), transparent 70%), radial-gradient(ellipse 55% 62% at 88% 10%, rgba(47, 111, 154, .42), transparent 72%), #07090d; }
.t-hero.is-type .t-hero-text { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.t-hero.is-pale { background: var(--sys-ice); color: var(--sys-graphite); }
.t-hero.is-pale .t-statement { color: #2a323c; }
.t-hero.is-pale .t-line { color: #4a5461; }
.t-hero.is-pale .t-shade { background: var(--sys-ice); }

/* the dark pages: their own ground, light type, inverted actions and footer */
[data-topic="infrastructure"] { --b-bg: #0a0f15; }
[data-topic="deployment"] { --b-bg: #06080b; }
[data-topic="operations"] { --b-bg: #0e1218; }
.t-body[data-tone="dark"] { background: var(--b-bg); color: var(--sys-text); }
[data-tone="dark"] .b-p { color: #b4bcc4; }
[data-tone="dark"] .btn { background: var(--sys-text); color: var(--sys-graphite); }
[data-tone="dark"] .btn:hover { background: #ffffff; }
[data-tone="dark"] .mail { color: #c3cad1; background-image: linear-gradient(rgba(239, 238, 233, .35), rgba(239, 238, 233, .35)); }
[data-tone="dark"] .mail:hover { color: var(--sys-text); background-image: linear-gradient(var(--sys-text), var(--sys-text)); }
[data-tone="dark"] .base { border-top-color: rgba(239, 238, 233, .12); color: #9aa3ad; }
[data-tone="dark"] .base a:hover { color: var(--sys-text); }
[data-tone="dark"] :focus-visible { outline-color: #9cc3e0; }
/* over a dark body the header keeps its dark logo side and gets a fade of that ground behind it */
html.is-deep .bar::before { opacity: 1; background: linear-gradient(180deg, var(--b-bg) 0%, var(--b-bg) 52%, transparent 100%); }

/* Private AI. It opens on the claim, with its explanation set off below it to the right, where the claim ends; then
   three sources draw in from the edges and meet just above the verb, which rolls over as the scroll goes on; then the
   four foundations stand on piers on one ground line. Nothing here is a picture: the sources, the piers and the ground
   are drawn. */
.b-ai-open { padding: 18vh var(--gutter) 15vh; text-align: left; }
.b-ai-open .b-h { max-width: 24ch; font-size: clamp(42px, 5vw, 96px); line-height: 1.02; }
.b-ai-open .b-p { max-width: 40ch; margin: 7vh 0 0 auto; }
.b-ai-stage { position: relative; padding: 4vh var(--gutter) 14vh; text-align: center; }
.b-ai-lines { display: none; }
.b-ai-can { font: 200 clamp(30px, 3vw, 56px)/1.1 var(--sys-display); letter-spacing: -.01em; }
.b-ai-verbs { display: grid; gap: 7vh; margin-top: 3vh; }
.b-ai-verb { display: block; font: italic 400 clamp(84px, 11vw, 200px)/1 var(--sys-accent); }
.b-ai-verb > span { display: inline-block; }
.b-ai-what { display: block; max-width: 32ch; margin: 16px auto 0; font: 400 clamp(17px, 1.35vw, 22px)/1.5 var(--sys-body); letter-spacing: -.012em; color: #3f4954; text-wrap: balance; }
.b-ai-under { padding: 18vh var(--gutter) 16vh; }
/* the ground the four stand on: one line under the piers, drawn out from the middle once the piers are down */
.b-ai-found { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3.4vw; max-width: 1300px; margin: 7vh auto 0; }
.b-ai-found::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(13, 17, 23, .34); transform: scaleX(var(--ground, 1)); transform-origin: 50% 50%; }
.b-ai-found > div { position: relative; padding-bottom: 9vh; }
.b-ai-found > div::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 6vh; background: rgba(13, 17, 23, .34); transform: scaleY(var(--draw, 1)); transform-origin: 50% 0; }
.b-ai-found dt { font: 300 clamp(22px, 1.8vw, 32px)/1.15 var(--sys-display); letter-spacing: -.01em; text-wrap: balance; }
.b-ai-found dd { max-width: 30ch; margin: 12px auto 0; font: 400 clamp(15px, 1.1vw, 18px)/1.5 var(--sys-body); color: #46505c; text-wrap: pretty; }
/* live: the stage holds while the verb rolls; the sources meet at the top of the words */
.bodies-live .b-ai-stage { display: block; height: 100vh; padding: 0; }
.bodies-live .b-ai-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.b-ai-lines path { fill: none; stroke: #2f6f9a; stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.b-ai-pulse { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #2f6f9a; opacity: 0; pointer-events: none; }
.bodies-live .b-ai-say { position: absolute; left: var(--gutter); right: var(--gutter); top: 37%; }
.bodies-live .b-ai-verbs { gap: 0; margin-top: .5vh; }
.bodies-live .b-ai-verbs li { grid-area: 1 / 1; }
.bodies-live .b-ai-verb { clip-path: inset(-.08em -.3em -.24em); }

/* Custom software. Rent or own, across one seam: the opening, the question, then the four comparisons one at a time, the
   rented side's words set against the seam from the left and the owned side's from the right, then the answer. The seam
   draws down the middle while the comparisons are in hand. Then what owning it means: the chain from your systems to
   your team steps down across the page, each name linked to the next. */
.b-sw-seam { position: relative; padding: 14vh var(--gutter) 12vh; text-align: center; }
.b-sw-lede { max-width: 30ch; }
.b-sw-head { margin-top: 12vh; }
.b-sw-rule { display: none; }
.b-sw-dims { max-width: 1080px; margin: 10vh auto 0; }
.b-sw-dim { display: grid; grid-template-columns: 1fr 1fr; padding: 5vh 0; border-top: 1px solid rgba(13, 17, 23, .12); }
.b-sw-dim dt { grid-column: 1 / -1; margin-bottom: 3vh; font: 300 clamp(26px, 2.4vw, 40px)/1.15 var(--sys-display); }
.b-sw-dim dd { padding: 0 4vw; font: 400 clamp(17px, 1.3vw, 20px)/1.5 var(--sys-body); color: #3f4954; }
.b-sw-dim dd.is-rent { text-align: right; border-right: 1px solid rgba(13, 17, 23, .22); }   /* (the seam, still) */
.b-sw-dim dd.is-own { text-align: left; }
.b-sw-end { margin-top: 12vh; font: 200 clamp(40px, 4.8vw, 92px)/1.05 var(--sys-display); letter-spacing: -.01em; text-wrap: balance; }
/* after the scene: the claim, the chain stepping down to the right, and the paragraph at the foot of the last step */
.b-sw-own { --step: clamp(44px, 20vw, 360px); --rise: clamp(28px, 5vh, 52px); padding: 16vh var(--gutter); text-align: left; }
.b-sw-own .b-h { font-size: clamp(40px, 4.4vw, 84px); }
.b-sw-chain { margin-top: 7vh; font: 300 clamp(21px, 1.8vw, 31px)/1.2 var(--sys-display); letter-spacing: -.005em; }
.b-sw-chain > span { position: relative; display: block; width: fit-content; max-width: 100%; }
.b-sw-chain > span + span { margin-top: var(--rise); }
.b-sw-chain > span:nth-child(2) { margin-left: var(--step); }
.b-sw-chain > span:nth-child(3) { margin-left: calc(2 * var(--step)); }
.b-sw-chain > span > span { display: inline-block; }
/* the link to a name: down from under the name before it, then across to this one (drawn: --dv, then --dh) */
.b-sw-chain i { position: absolute; left: calc(.42em - var(--step)); top: calc(.22em - var(--rise)); width: calc(var(--step) - .42em - .5em); height: calc(var(--rise) + .38em); border-left: 1px solid rgba(13, 17, 23, .36); border-bottom: 1px solid rgba(13, 17, 23, .36);
  clip-path: inset(0 calc((1 - var(--dh, 1)) * (100% - 1px)) calc((1 - var(--dv, 1)) * 100%) 0); pointer-events: none; }
.b-sw-own .b-p { max-width: 44ch; margin: 7vh 0 0 calc(2 * var(--step)); }
/* live: the stage holds; each comparison is set against the seam, rent on its left, own on its right */
.bodies-live .b-sw-seam { height: 100vh; padding: 0; overflow: hidden; }
.bodies-live :is(.b-sw-lede, .b-sw-head, .b-sw-end) { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; margin: 0 auto; padding: 0 var(--gutter); }
.bodies-live .b-sw-lede { max-width: calc(30ch + 2 * var(--gutter)); }
.bodies-live .b-sw-rule { display: block; position: absolute; left: 50%; top: 46vh; bottom: 10vh; width: 1px; margin-left: -.5px; background: rgba(13, 17, 23, .3); transform: scaleY(0); transform-origin: 50% 0; }
.bodies-live .b-sw-dims { position: absolute; inset: 0; max-width: none; margin: 0; }
.bodies-live .b-sw-dim { display: block; position: absolute; inset: 0; padding: 0; border: 0; pointer-events: none; }
.bodies-live .b-sw-dim dt { position: absolute; left: 0; right: 0; top: 30vh; margin: 0; padding: 0 var(--gutter); font: 200 clamp(32px, 3.2vw, 60px)/1.05 var(--sys-display); letter-spacing: -.01em; }
.bodies-live .b-sw-dim dd { position: absolute; top: 50vh; width: min(34vw, 520px); padding: 0; border: 0; font: 300 clamp(21px, 1.85vw, 34px)/1.3 var(--sys-display); letter-spacing: -.01em; color: var(--sys-graphite); text-wrap: balance; }
.bodies-live .b-sw-dim dd.is-rent { right: calc(50% + 3.4vw); text-align: right; color: #4d5661; }
.bodies-live .b-sw-dim dd.is-own { left: calc(50% + 3.4vw); text-align: left; }

/* AI workflows. The scene plays on the hero itself (topic-bodies.js, c.heroStage): the camera goes from the room to the
   draft on the big screen, out of the window to the valley while a light comes in along the road from the base, and back
   to the console as it arrives. At "Then it waits for a person" everything stops: the picture freezes to steel inside a
   crimson frame and the checks land. The release brings the colour back and sends the light out along the road again.
   Then where automation stops, beside the empty seat at the console. Without motion the steps read beside the hand on
   the approval button. */
.b-wf-stage { max-width: calc(760px + 2 * var(--gutter)); margin: 0 auto; padding: 16vh var(--gutter) 4vh; text-align: left; }
.b-wf-frame, .b-wf-veil { display: none; }
.b-wf-lede { max-width: 26ch; margin: 0 0 5vh; }
.b-wf-step, .b-wf-gate { padding: 3.2vh 0; }
.b-wf-step h3 { font: 300 clamp(28px, 2.6vw, 46px)/1.12 var(--sys-display); letter-spacing: -.01em; }
.b-wf-step p { max-width: 38ch; margin-top: 10px; font: 400 clamp(16px, 1.2vw, 19px)/1.5 var(--sys-body); color: #46505c; }
.b-wf-gate .b-h { font-size: clamp(36px, 3.6vw, 68px); }
.b-wf-checks { margin-top: 3vh; }
.b-wf-checks li { padding: 8px 0; font: 400 clamp(16px, 1.25vw, 20px)/1.45 var(--sys-body); color: #2b333d; }
/* where automation stops: the case that runs on its own runs along a line, the line stops at a crimson mark, and the
   case that waits for a person stands beyond it */
.b-wf-bounds { padding: 18vh var(--gutter) 16vh; text-align: left; }
.b-wf-bounds .b-h { font-size: clamp(40px, 4.4vw, 84px); }
.b-wf-run { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 42px); margin-top: 9vh; }
.b-wf-case { flex: 0 1 auto; max-width: 15ch; font: 300 clamp(24px, 2.15vw, 38px)/1.24 var(--sys-display); letter-spacing: -.01em; text-wrap: balance; }
.b-wf-line + .b-wf-case { max-width: 21ch; }
.b-wf-line { position: relative; flex: 1 1 auto; min-width: 64px; height: 44px; }
.b-wf-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(13, 17, 23, .42); transform: scaleX(var(--run, 1)); transform-origin: 0 50%; }
.b-wf-line::after { content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: 2px; background: #c9384c; transform: scaleY(var(--stop, 1)); }
.b-wf-bounds .b-p { max-width: 44ch; margin: 9vh 0 0 auto; }
/* live: the hero is the stage */
.bodies-live .b-wf-stage.is-staged { display: none; }
/* The stage tours the whole painting, so this page's picture box is the whole painting, at the size and in the place
   that cover puts it in the shared box (inset -7% -4% of the frame, background-position --vt-pos), so the frame at rest is
   the same. It is set from the first paint: a box that changed once the page had arrived would count as a layout shift.
   (.t-media is a size container, so cqw and cqh are the frame's own width and height, not the viewport's) */
[data-topic="workflows"] .t-media { container-type: size; }
[data-topic="workflows"] .t-img {
  --pw: max(108cqw, calc(114cqh * 1.776833)); --ph: max(calc(108cqw * .562799), 114cqh); --px: .64;
  inset: auto; left: calc(-4cqw + (108cqw - var(--pw)) * var(--px)); top: calc(-7cqh + (114cqh - var(--ph)) * .5);
  width: var(--pw); height: var(--ph); background-size: 100% 100%;
}
@media (max-width: 760px) { [data-topic="workflows"] .t-img { --px: .7; } }
[data-topic="workflows"] .t-media::after { transition: opacity .9s var(--sys-ease); }
[data-topic="workflows"] .t-hero.is-staging .t-media::after { opacity: 0; }   /* the stage's own shade takes over */
.b-wf-layer { --stage-shade: linear-gradient(180deg, rgba(8, 10, 10, .5) 0%, rgba(8, 10, 10, 0) 18%, rgba(8, 10, 10, 0) 46%, rgba(8, 10, 10, .5) 66%, rgba(8, 10, 10, .86) 100%); --stage-shade-m: linear-gradient(180deg, rgba(8, 10, 10, .6) 0%, rgba(8, 10, 10, 0) 16%, rgba(8, 10, 10, 0) 40%, rgba(8, 10, 10, .62) 60%, rgba(8, 10, 10, .9) 100%); }
/* (the words leave the body for the hero, so they take the body's resets with them) */
.b-wf-layer :where(h2, h3, p, ul) { margin: 0; }
.b-wf-layer ul { padding: 0; list-style: none; }
.bodies-live .b-wf-layer :is(.b-wf-lede, .b-wf-step, .b-wf-gate) { position: absolute; left: 0; right: 0; bottom: 9vh; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.bodies-live .b-wf-layer .b-wf-lede { max-width: calc(30ch + 2 * var(--gutter)); font-size: clamp(24px, 2.2vw, 38px); }
.bodies-live .b-wf-layer .b-wf-step h3 { font: 200 clamp(40px, 4.4vw, 66px)/1.05 var(--sys-display); letter-spacing: -.01em; }
.bodies-live .b-wf-layer .b-wf-step p { max-width: 40ch; margin: 16px auto 0; font-size: clamp(17px, 1.3vw, 20px); color: #e1e6ea; }
.bodies-live .b-wf-layer .b-wf-gate { bottom: 7vh; }
.bodies-live .b-wf-layer .b-wf-gate .b-h { font-size: clamp(40px, 4.2vw, 76px); }
.bodies-live .b-wf-layer .b-wf-checks { max-width: 640px; margin: 3.6vh auto 0; }
.bodies-live .b-wf-layer .b-wf-checks li { padding: 1.1vh 0; font-size: clamp(17px, 1.4vw, 22px); color: #e9ecef; }
.bodies-live .b-wf-layer .b-wf-veil { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 58% 44% at 50% 74%, rgba(6, 8, 11, .7), rgba(6, 8, 11, 0)); }
.bodies-live .b-wf-layer .b-wf-frame { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.b-wf-frame path { fill: none; stroke: #c9384c; stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
/* in the picture, moving with it: the light on the road (above the freeze), the screen and the base lighting (below
   it), and the steel copy of the painting the freeze fades in */
.b-wf-map { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.b-wf-map.is-over { z-index: 3; }
.b-wf-steel { position: absolute; inset: 0; z-index: 2; background: inherit; filter: grayscale(1) brightness(.58) contrast(1.12); opacity: 0; pointer-events: none; }
.b-wf-road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.b-wf-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.b-wf-road .is-halo { stroke: rgba(156, 195, 224, .22); stroke-width: calc(13px / var(--s, 1)); }
.b-wf-road .is-core { stroke: #e7eff7; stroke-width: calc(2.2px / var(--s, 1)); }
.b-wf-road .is-pulse { stroke-dasharray: .07 1.4; stroke-dashoffset: -1; }
.b-wf-road .is-pulse.is-halo { stroke: rgba(196, 222, 246, .5); stroke-width: calc(18px / var(--s, 1)); }
.b-wf-road .is-pulse.is-core { stroke: #ffffff; stroke-width: calc(4px / var(--s, 1)); }
.b-wf-glow { position: absolute; translate: -50% -50%; border-radius: 50%; opacity: 0; mix-blend-mode: screen; }
.b-wf-glow.is-screen { left: 46.2%; top: 49.6%; width: 16%; aspect-ratio: 1.35; background: radial-gradient(closest-side, rgba(140, 192, 255, .62), rgba(140, 192, 255, 0)); }
.b-wf-glow.is-base { left: 95.2%; top: 29.4%; width: 10%; aspect-ratio: 1.2; background: radial-gradient(closest-side, rgba(255, 190, 150, .7), rgba(255, 190, 150, 0)); }

/* Architecture. The building's layers are named over the hero itself, the camera going down a floor at a time
   (heroStage; without motion they read as a list). Then where inference runs: the three places on one long line across
   the page, and the legend of what is agreed before anything is bought. */
[data-topic="infrastructure"] .t-body { background-image: linear-gradient(rgba(156, 195, 224, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(156, 195, 224, .045) 1px, transparent 1px); background-size: 64px 64px; background-position: 50% 0; }
.b-arch-section { position: relative; padding: 14vh 0 10vh; }
.b-arch-riser { display: none; }
.b-arch-lede { max-width: 34ch; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.b-arch-floor { max-width: 760px; margin: 7vh auto 0; padding: 0 var(--gutter); text-align: center; }
.b-arch-floor h3 { font: 200 clamp(40px, 4.4vw, 84px)/1 var(--sys-display); letter-spacing: -.01em; }
.b-arch-floor p { max-width: 36ch; margin: 16px auto 0; font: 400 clamp(17px, 1.3vw, 21px)/1.5 var(--sys-body); color: #b4bcc4; }
.b-arch-where { padding: 18vh var(--gutter) 14vh; text-align: left; }
.b-arch-where .b-h { font-size: clamp(40px, 4.4vw, 84px); }
.b-arch-where .b-p { max-width: 44ch; margin: 4.5vh 0 0; }
.b-arch-places { position: relative; display: flex; justify-content: space-between; margin: 13vh 0 0; }
.b-arch-places::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: rgba(156, 195, 224, .38); transform: scaleX(var(--draw, 1)); transform-origin: 0 50%; }
.b-arch-places li { position: relative; flex: 1; padding-top: 30px; font: 300 clamp(19px, 1.7vw, 30px)/1.2 var(--sys-display); letter-spacing: -.005em; }
.b-arch-places li::before { content: ""; position: absolute; left: 50%; top: 0; width: 11px; height: 11px; margin-left: -5.5px; border: 1px solid #9cc3e0; border-radius: 50%; background: var(--b-bg); }
.b-arch-places li { text-align: center; }
.b-arch-places li:first-child { text-align: left; }
.b-arch-places li:first-child::before { left: 0; margin-left: 0; }
.b-arch-places li:last-child { text-align: right; }
.b-arch-places li:last-child::before { left: auto; right: 0; margin-left: 0; }
.b-arch-before { padding-top: 6vh; }
.b-arch-legend { max-width: 980px; margin: 10vh auto 0; text-align: left; }
.b-arch-legend > div { display: flex; align-items: baseline; gap: 22px; padding: 20px 0; }
.b-arch-legend > div::before { content: ""; order: 1; flex: 1 1 auto; min-width: 40px; border-bottom: 1px dotted rgba(156, 195, 224, .4); transform: scaleX(var(--draw, 1)); transform-origin: 0 50%; }
.b-arch-legend dt { order: 0; flex: none; font: 300 clamp(22px, 1.9vw, 32px)/1.2 var(--sys-display); }
.b-arch-legend dd { order: 2; flex: 0 1 46%; font: 400 clamp(16px, 1.2vw, 19px)/1.5 var(--sys-body); color: #b4bcc4; }
/* live: the slot runs the full width of the screen and holds while the camera goes down the building */
.bodies-live .b-arch-section { height: 100vh; padding: 0; overflow: hidden; }
.bodies-live .b-arch-section.is-staged { display: none; }   /* its scene plays on the hero (b-arch-stage) */
.bodies-live .b-arch-riser { display: block; position: absolute; left: var(--gutter); top: 30vh; height: 42vh; width: 1px; background: rgba(156, 195, 224, .22); }
.bodies-live .b-arch-riser b { position: absolute; left: -4px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #e3a35c; box-shadow: 0 0 12px 2px rgba(227, 163, 92, .45); }
.bodies-live :is(.b-arch-lede, .b-arch-floor) { position: absolute; left: 0; right: 0; margin: 0; padding: 0 var(--gutter); max-width: none; text-align: left; }
.bodies-live .b-arch-lede { top: 76vh; max-width: calc(44ch + 2 * var(--gutter)); font-size: clamp(22px, 2vw, 34px); }
.bodies-live .b-arch-floor { top: 0; bottom: 0; }
.bodies-live .b-arch-floor h3 { position: absolute; left: var(--gutter); right: auto; max-width: calc(100% - 2 * var(--gutter)); bottom: 73vh; }
.bodies-live .b-arch-floor p { position: absolute; right: var(--gutter); top: 76vh; width: min(34vw, 520px); margin: 0; text-align: right; font: 300 clamp(21px, 1.8vw, 30px)/1.3 var(--sys-display); letter-spacing: -.01em; color: #d3d9de; text-wrap: balance; }
/* on the hero the floors' words cross lit racks as the camera goes down: each keeps a soft dark of its own behind it
   (round, not a band), so the line holds where the light is brightest. The dark comes and goes with its own words
   (--scrim, set by the Architecture body in topic-bodies.js), so none is ever left on the picture without them */
.bodies-live .b-arch-stage :is(.b-arch-floor h3, .b-arch-floor p, .b-arch-lede)::before { content: ""; position: absolute; inset: -34% -14%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(8, 10, 10, .74), rgba(8, 10, 10, .32) 68%, rgba(8, 10, 10, 0)); opacity: var(--scrim, 0); }

/* Deployment. Four boundaries as rings: the view closes in until each inner ring is the frame, and the words in the
   middle turn to what lies inside that boundary. Then what holds inside the boundary, in one column within a drawn
   edge. */
.b-dep-stage { position: relative; padding: 10vh var(--gutter) 8vh; text-align: center; }
.b-dep-lens { position: relative; width: min(520px, 78vw); aspect-ratio: 1; margin: 0 auto; }
.b-dep-rings { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.b-dep-ring :is(circle, path) { fill: none; stroke: rgba(156, 195, 224, .55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.b-dep-lede { margin-top: 8vh; }
.b-dep-models { max-width: 640px; margin: 9vh auto 0; }
.b-dep-models > div + div { margin-top: 7vh; }
.b-dep-models dt { font: 200 clamp(38px, 3.8vw, 70px)/1.04 var(--sys-display); letter-spacing: -.01em; }
.b-dep-models dd { max-width: 34ch; margin: 16px auto 0; font: 400 clamp(17px, 1.3vw, 21px)/1.5 var(--sys-body); color: #c3cad1; }
.b-dep-inside { max-width: calc(660px + 2 * var(--gutter)); margin: 0 auto; padding: 18vh var(--gutter); text-align: left; }
.b-dep-inside .b-h { font-size: clamp(40px, 4.4vw, 84px); }
.b-dep-holds { position: relative; margin: 8vh 0 0; padding-left: clamp(24px, 3.4vw, 52px); }
.b-dep-holds::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: rgba(156, 195, 224, .42); transform: scaleY(var(--edge, 1)); transform-origin: 50% 0; }
.b-dep-holds p { max-width: 32ch; font: 300 clamp(24px, 2.1vw, 36px)/1.3 var(--sys-display); letter-spacing: -.01em; color: #9aa4ae; text-wrap: balance; }
.b-dep-holds p + p { margin-top: 6vh; }
.b-dep-holds strong { font-weight: 300; color: var(--sys-text); }
/* live: the stage holds while the rings close in round the porthole */
.bodies-live .b-dep-stage { height: 100vh; padding: 0; overflow: hidden; }
.bodies-live .b-dep-lens { position: absolute; left: 50%; top: 50%; width: 94vmin; margin: -47vmin 0 0 -47vmin; }
.bodies-live .b-dep-ring :is(circle, path) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bodies-live :is(.b-dep-lede, .b-dep-models) { position: absolute; left: 50%; top: 50%; width: min(56vmin, 600px); max-width: none; margin: 0; transform: translate(-50%, -50%); }
.bodies-live .b-dep-lede { width: min(66vmin, 700px); font-size: clamp(24px, 2.3vw, 40px); }
.bodies-live .b-dep-models > div { position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%); }

/* Managed operations. It opens on its promise alone, set in from the left; then a ring that turns with time: a light runs
   round it on its own clock, not the scroll's, each name it reaches turns amber, and the work in hand stands inside the
   ring. Then the checks against drift beside the claim, and the five planes on one axis. */
.b-ops-open { padding: 16vh var(--gutter) 4vh; text-align: left; }
.b-ops-open .b-lede { max-width: 23ch; margin: 0 0 0 25%; font-size: clamp(30px, 3.3vw, 62px); line-height: 1.2; }
.b-ops-loop { position: relative; padding: 8vh var(--gutter) 14vh; }
.b-ops-dial { position: relative; max-width: 760px; margin: 0 auto; }
.b-ops-ring { display: none; }
.b-ops-phases > div + div { margin-top: 6vh; }
.b-ops-phases dt { font: 200 clamp(38px, 3.6vw, 64px)/1.05 var(--sys-display); letter-spacing: -.01em; text-align: center; }
.b-ops-phases dd { max-width: 34ch; margin: 14px auto 0; font: 400 clamp(17px, 1.3vw, 21px)/1.5 var(--sys-body); color: #b4bcc4; text-align: center; }
/* Models drift: the claim on the left; the checks read down the right, each name led out by a rule to the column's edge */
.b-ops-drift { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 120px); align-items: start; padding: 18vh var(--gutter) 14vh; text-align: left; }
.b-ops-drift .b-h { font-size: clamp(40px, 4.4vw, 84px); }
.b-ops-drift .b-p { max-width: 32ch; margin: 4vh 0 0; }
.b-ops-checks { margin: 0; padding-top: 1vh; }
.b-ops-checks > div { padding: 2.6vh 0; }
.b-ops-checks > div:first-child { padding-top: 0; }
.b-ops-checks dt { position: relative; font: 300 clamp(22px, 1.9vw, 32px)/1.2 var(--sys-display); }
.b-ops-checks dt::before { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 1px; background: rgba(239, 238, 233, .16); transform: scaleX(var(--draw, 1)); transform-origin: 0 50%; }
.b-ops-checks dt > span { position: relative; padding-right: 22px; background: var(--b-bg); }
.b-ops-checks dd { max-width: 40ch; margin: 10px 0 0; font: 400 clamp(16px, 1.2vw, 19px)/1.5 var(--sys-body); color: #b4bcc4; }
.b-ops-plane { position: relative; max-width: 1040px; margin: 10vh auto 0; }
.b-ops-plane::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(239, 238, 233, .16); transform: scaleY(var(--draw, 1)); transform-origin: 50% 0; }
.b-ops-plane > div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; align-items: baseline; padding: 3vh 0; }
.b-ops-plane dt { text-align: right; font: 200 clamp(42px, 4.2vw, 80px)/1 var(--sys-display); letter-spacing: -.01em; }
.b-ops-plane dd { max-width: 34ch; text-align: left; font: 400 clamp(16px, 1.2vw, 19px)/1.5 var(--sys-body); color: #b4bcc4; }
/* live: the ring, the four names round it, the light on it and the work in hand inside it */
.bodies-live .b-ops-loop { padding: 18vh var(--gutter) 18vh; }
.bodies-live .b-ops-dial { width: min(500px, 38vw, 56vh); aspect-ratio: 1; max-width: none; margin: 0 auto; }
.bodies-live .b-ops-ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.b-ops-ring path { fill: none; stroke-linecap: round; }
.b-ops-ring .is-track { stroke: rgba(239, 238, 233, .22); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.b-ops-ring .is-halo { stroke: rgba(227, 163, 92, .22); stroke-width: 9; stroke-dasharray: .05 .95; stroke-dashoffset: .025; opacity: 0; }
.b-ops-ring .is-core { stroke: #e9ad68; stroke-width: 2.2; stroke-dasharray: .026 .974; stroke-dashoffset: .013; opacity: 0; }
.bodies-live .b-ops-phases { position: absolute; inset: 0; margin: 0; }
.bodies-live .b-ops-phases > div { margin: 0; }
.bodies-live .b-ops-phases dt { position: absolute; font-size: clamp(20px, 1.7vw, 28px); font-weight: 300; color: var(--sys-text); transition: color .7s var(--sys-ease); white-space: nowrap; }
.bodies-live .b-ops-phases .is-on dt { color: #e9ad68; }
.bodies-live .is-n dt { left: 50%; top: 0; transform: translate(-50%, calc(-100% - 24px)); }
.bodies-live .is-e dt { left: 100%; top: 50%; transform: translate(28px, -50%); }
.bodies-live .is-s dt { left: 50%; top: 100%; transform: translate(-50%, 24px); }
.bodies-live .is-w dt { right: 100%; top: 50%; transform: translate(-28px, -50%); }
.bodies-live .b-ops-phases dd { position: absolute; left: 50%; top: 50%; width: 66%; max-width: none; margin: 0; translate: -50% -50%; font: 300 clamp(20px, 1.75vw, 30px)/1.3 var(--sys-display); letter-spacing: -.01em; color: var(--sys-text); text-wrap: balance; }

/* the next capability: its name centred on its picture */
.t-next-text { left: 0; right: 0; padding: 0 24px; text-align: center; }

@media (max-width: 760px) {
  /* each hero keeps its own placement on a phone: right stays right, top stays top, the corners stay apart */
  .t-hero-text.at-right, .t-hero-text.at-mr { left: var(--gutter); right: var(--gutter); width: auto; }
  .t-hero-text.at-ml { left: var(--gutter); right: var(--gutter); width: auto; }
  .t-hero-text.at-center { left: var(--gutter); right: var(--gutter); padding: 0; text-align: center; }
  .t-hero-text.at-top { top: 14vh; }
  .t-hero-text.at-high { top: 12vh; }
  .t-hero-text.at-split, .t-hero-text.at-splitr { top: 13vh; bottom: 9vh; }
  .t-hero-text:is(.at-split, .at-splitr) .t-title { max-width: 100%; }
  .t-hero-text.at-foot { top: 13vh; }
  .t-hero-text.at-giant .t-title { font-size: clamp(64px, 20vw, 120px); }
  .t-hero-text.at-cap { width: auto; right: var(--gutter); }
  .t-hero-text.at-inv .t-statement { font-size: clamp(40px, 11vw, 60px); }
  .t-hero.is-type .t-hero-text { top: 0; bottom: 0; }
  .t-hero-text.at-row { display: block; }
  .t-hero-text.at-row .t-statement { margin-top: .45em; }
  .t-hero-text.at-row.at-top { top: 14vh; }
  .t-hero-text.at-vertical { left: var(--gutter); width: auto; padding-right: 0; top: auto; }
  .t-hero-text.at-vertical .t-title { position: static; writing-mode: horizontal-tb; font-size: clamp(44px, 12vw, 64px); text-align: right; }
  .t-hero-text.at-words .t-title { font-size: clamp(34px, 9vw, 52px); }
  .t-hero-text.at-flush { left: var(--gutter); right: var(--gutter); }
  .b-pass { padding: 15vh var(--gutter); }
  .b-ai-open { padding: 13vh var(--gutter) 11vh; }
  .b-ai-open .b-p { margin: 4.5vh 0 0; }
  .bodies-live .b-ai-say { top: 45%; }
  .b-ai-verb { font-size: clamp(72px, 22vw, 96px); }
  .b-ai-under { padding: 12vh var(--gutter) 12vh; }
  /* on a phone the four stand one on another, each on a pier, and the last on the ground */
  .b-ai-found { grid-template-columns: 1fr; max-width: 32ch; margin-top: 6vh; }
  .b-ai-found > div { padding-bottom: 8vh; }
  .b-ai-found > div::after { bottom: 1.5vh; height: 5vh; }
  .b-ai-found > div:last-child::after { bottom: 0; height: 6.5vh; }
  .b-ai-found dt { font-size: 21px; }
  .b-ai-found dd { margin-top: 8px; font-size: 15px; }
  .b-sw-seam { padding: 10vh var(--gutter) 8vh; }
  .b-sw-dim { display: block; }
  html:not(.bodies-live) .b-sw-dim dd { padding: 0; text-align: center; }
  html:not(.bodies-live) .b-sw-dim dd.is-rent { padding-bottom: 2.6vh; border-right: 0; border-bottom: 1px solid rgba(13, 17, 23, .22); }
  html:not(.bodies-live) .b-sw-dim dd.is-own { margin-top: 2.6vh; }
  .b-sw-own { --step: 9vw; --rise: 3.6vh; padding: 13vh var(--gutter) 11vh; }
  .b-sw-own .b-p { margin: 5vh 0 0 calc(2 * var(--step)); }
  .bodies-live .b-sw-rule { top: 37vh; bottom: 9vh; }
  .bodies-live .b-sw-dim dt { top: 22vh; font-size: clamp(27px, 7.6vw, 34px); }
  .bodies-live .b-sw-dim dd { top: 39vh; width: calc(50% - var(--gutter) - 14px); font-size: clamp(16px, 4.4vw, 19px); line-height: 1.32; }
  .bodies-live .b-sw-dim dd.is-rent { right: calc(50% + 14px); }
  .bodies-live .b-sw-dim dd.is-own { left: calc(50% + 14px); }
  .b-wf-stage { padding: 13vh var(--gutter) 4vh; }
  .b-wf-bounds { padding: 13vh var(--gutter) 11vh; }
  /* on a phone the line runs down from the first case and stops above the second */
  .b-wf-run { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 6vh; }
  .b-wf-case, .b-wf-line + .b-wf-case { max-width: 19ch; }
  .b-wf-line { flex: none; width: 1px; min-width: 0; height: 9vh; margin: 2.6vh 0 2.6vh 14px; }
  .b-wf-line::before { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform: scaleY(var(--run, 1)); transform-origin: 50% 0; }
  .b-wf-line::after { left: -14px; right: auto; top: auto; bottom: -1px; width: 29px; height: 2px; transform: scaleX(var(--stop, 1)); }
  .b-wf-bounds .b-p { margin: 6vh 0 0; }
  .bodies-live .b-wf-layer :is(.b-wf-lede, .b-wf-step) { bottom: 8vh; }
  .bodies-live .b-wf-layer .b-wf-lede { font-size: 21px; }
  .bodies-live .b-wf-layer .b-wf-step h3 { font-size: clamp(32px, 9vw, 38px); }
  .bodies-live .b-wf-layer .b-wf-step p { font-size: 16px; }
  .bodies-live .b-wf-layer .b-wf-gate { bottom: 5vh; }
  .bodies-live .b-wf-layer .b-wf-gate .b-h { font-size: clamp(32px, 8.6vw, 38px); }
  .bodies-live .b-wf-layer .b-wf-checks { margin-top: 2.6vh; }
  .bodies-live .b-wf-layer .b-wf-checks li { padding: .9vh 0; font-size: 15.5px; line-height: 1.4; }
  .b-arch-legend > div { display: block; text-align: center; }
  .b-arch-legend > div::before { display: none; }
  .b-arch-legend dd { margin-top: 8px; }
  .b-arch-places li { font-size: 15.5px; }
  .b-arch-where { padding: 13vh var(--gutter) 11vh; }
  .b-arch-places { margin-top: 8vh; }
  .bodies-live .b-arch-riser { top: 31vh; height: 34vh; left: 10px; }
  .bodies-live .b-arch-floor h3 { bottom: 72vh; font-size: clamp(34px, 9.4vw, 42px); }
  .bodies-live .b-arch-floor p { top: 69vh; left: var(--gutter); width: auto; font-size: 20px; text-align: left; }
  .bodies-live .b-arch-lede { top: 69vh; font-size: 20px; }
  .b-ops-plane::before { display: none; }
  .b-ops-plane > div { display: block; text-align: center; }
  .b-ops-plane dt { text-align: center; }
  .b-ops-plane dd { margin: 10px auto 0; text-align: center; }
  .bodies-live .b-dep-models { width: 66vmin; }
  .bodies-live .b-dep-lede { width: 76vmin; font-size: 19px; }
  .bodies-live .b-dep-models dt { font-size: clamp(30px, 8vw, 40px); }
  .bodies-live .b-dep-models dd { font-size: 15px; }
  .b-dep-inside { padding: 13vh var(--gutter) 11vh; }
  .b-dep-holds { margin-top: 6vh; padding-left: 20px; }
  .b-dep-holds p { font-size: clamp(21px, 5.8vw, 24px); }
  .b-dep-holds p + p { margin-top: 4.5vh; }
  .b-ops-open { padding: 13vh var(--gutter) 2vh; }
  .b-ops-open .b-lede { margin: 0; font-size: clamp(28px, 7.6vw, 34px); }
  .b-ops-drift { grid-template-columns: 1fr; padding: 13vh var(--gutter) 11vh; }
  .b-ops-checks { margin-top: 5vh; }
  .bodies-live .b-ops-loop { padding: 14vh var(--gutter) 14vh; }
  .bodies-live .b-ops-dial { width: min(218px, 56vw); }
  .bodies-live .b-ops-phases dt { font-size: 16px; }
  .bodies-live .is-n dt { transform: translate(-50%, calc(-100% - 16px)); }
  .bodies-live .is-s dt { transform: translate(-50%, 16px); }
  .bodies-live .is-e dt { transform: translate(12px, -50%); }
  .bodies-live .is-w dt { transform: translate(-12px, -50%); }
  .bodies-live .b-ops-phases dd { width: 74%; font-size: 16px; line-height: 1.32; }
}

/* the ending is one screen: the closing line and the way on to the next page share it */
/* the ending is one screen: the close stands in the room that is left, the way on is a band of the next page's picture
   (it still grows into that page's hero), and the footer sits under it. The header never covers the close */
.t-end { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding-top: 84px; }
.t-end.is-bare { min-height: 0; padding-top: 0; }
.t-end > .b-close { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 3vh var(--gutter) 5vh; }
.t-end > .b-close .b-actions { margin-top: 5vh; }
.t-end .t-next { padding: 0 var(--gutter); }
.t-end .t-next-card { height: clamp(140px, 21vh, 230px); min-height: 0; }
.t-end .t-next-text { top: 0; bottom: 0; align-content: center; font-size: clamp(32px, 3.4vw, 64px); }
.t-end .base { margin: 3.5vh var(--gutter) 0; }
@media (max-width: 760px) { .t-end { padding-top: 78px; } .t-end .t-next-card { height: 15vh; } .t-end > .b-close { padding: 1vh var(--gutter) 3vh; } .t-end > .b-close .b-actions { margin-top: 3.5vh; } .t-end .base { margin-top: 2.5vh; } }

/* The six capability pages' endings fit one screen at every size, the close heading clear of the header. Their close
   heading had only the browser's own h2 margins (most of an em above and below, 76px on a small phone), which pushed the
   ending past the screen: the space is set here instead. A third action (the mail address beside the way back) and a
   short phone screen are allowed for */
:is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]) .t-end > .b-close .b-h { margin: 0; }
:is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]) .t-end > .b-close .b-p { margin-top: clamp(18px, 3.4vh, 34px); }
:is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]) .t-end > .b-close .b-actions { margin-top: clamp(26px, 6.4vh, 64px); }
@media (max-width: 760px) {
  :is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]) .t-end > .b-close .b-h { font-size: clamp(38px, 11.4vw, 46px); }
  :is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]) .t-end > .b-close .b-actions { margin-top: 3.4vh; gap: 12px 26px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  :is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]) .t-end .t-next-card { height: 13vh; }
  :is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]) .t-end .base { margin-top: 2vh; }
  :is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]) .t-end > .b-close { padding-bottom: 2vh; }
  :is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]) .t-end > .b-close .b-p { margin-top: 2vh; }
}

/* Arriving on a capability page from the Systems landing's light chapter, the header and the page cross over in a
   quarter second (html.vt-quick, systems-page.css). Chrome holds the page's layer for one frame early in that cross-fade
   while the header's goes on; with the steep ease-out the two then differ by a sixth of the change for a frame, and
   the logo shows neither header. An even pace keeps them a hair apart at worst. (Only arrivals on these six pages) */
:root.vt-quick:has(> body:is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]))::view-transition-old(root),
:root.vt-quick:has(> body:is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]))::view-transition-new(root),
:root.vt-quick:has(> body:is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]))::view-transition-old(site-bar),
:root.vt-quick:has(> body:is([data-topic="applications"], [data-topic="software"], [data-topic="workflows"], [data-topic="infrastructure"], [data-topic="deployment"], [data-topic="operations"]))::view-transition-new(site-bar) { animation-timing-function: linear; }

/* keyboard focus shows on the light pages too */
.t-body[data-tone="light"] :focus-visible { outline-color: #2f6f9a; }

/* a soft dark of its own behind words that sit on a bright part of their picture: CØ's line on the planet's rim, the
   Aviation promise against the evening sky, the Build name over the lit racks */
:is([data-topic="constellation-zero"], [data-topic="aviation"], [data-topic="build"]) .t-hero-text::before { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(6, 8, 11, .62), rgba(6, 8, 11, 0)); }
[data-topic="constellation-zero"] .t-hero-text::before { left: -6%; right: 30%; top: 38%; bottom: -30%; }
[data-topic="aviation"] .t-hero-text::before { right: -8%; width: min(620px, 52vw); top: -14%; height: 46%; }
[data-topic="build"] .t-hero-text::before { right: -6%; width: min(760px, 60vw); top: -18%; height: 40%; }

/* a hero placed at coordinates of its own (heroPos in tools/standalone/*.cjs): x, y from the top (or b from the foot),
   width and alignment chosen against its painting, and its own place on a phone */
.t-hero-text.at-pos { left: var(--x); right: auto; top: var(--y, auto); bottom: var(--b, auto); width: var(--w); text-align: var(--align, left); }
.t-hero-text.at-pos > * { margin-left: var(--ml, 0); margin-right: var(--mr, 0); }
/* a soft dark of its own behind words that sit on a busy or bright part of their picture */
.t-hero-text.at-scrim::before { content: ""; position: absolute; inset: -16% -12%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(6, 8, 11, .6), rgba(6, 8, 11, 0)); }
@media (max-width: 760px) {
  .t-hero-text.at-pos { left: var(--gutter); right: var(--gutter); width: auto; top: var(--ym, auto); bottom: var(--bm, 9vh); text-align: var(--align-m, left); }
  .t-hero-text.at-pos > * { margin-left: var(--ml-m, 0); margin-right: 0; }
  .t-hero-text.at-scrim-m::before { content: ""; position: absolute; inset: -14% -8%; z-index: -1; pointer-events: none; border-radius: 40%; background: radial-gradient(closest-side, rgba(6, 8, 11, .62), rgba(6, 8, 11, 0)); }
}
/* the redaction bar in a hero is a steel stroke, not a light slab, over the dark painting */
.t-hero .w.rd::after { background: rgba(6, 8, 11, .94); }

/* The six capability heroes, each set its own way against its own painting. Private AI: the name and the promise share
   one band along the foot. Custom software: a small caption on the dark of the rig. AI workflows: a title card over the
   night sky above the valley. Architecture: the name up the left edge like a spine, the promise against the red sky.
   Deployment: the name as wide as the floor, the promise above it at the window. Managed operations: the promise leads
   and the name follows it. Every line keeps 4.5:1 against the paint behind it (the shades below make sure of it) */
[data-topic="applications"] .t-hero-text { left: var(--gutter); right: var(--gutter); top: auto; bottom: 9vh; width: auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 6vw; align-items: end; }
[data-topic="applications"] .t-title { grid-column: 1; grid-row: 1 / span 2; font-size: clamp(60px, 8.2vw, 158px); line-height: .9; }
[data-topic="applications"] .t-statement { grid-column: 2; grid-row: 1; margin: 0; }
[data-topic="applications"] .t-line { grid-column: 2; grid-row: 2; margin-top: 16px; }
[data-topic="applications"] .t-media::after { background: linear-gradient(0deg, rgba(8, 10, 10, .88) 0%, rgba(8, 10, 10, .5) 24%, rgba(8, 10, 10, 0) 46%), linear-gradient(180deg, rgba(8, 10, 10, .42) 0%, rgba(8, 10, 10, 0) 22%); }
[data-topic="software"] .t-hero-text { top: 17vh; bottom: auto; left: var(--gutter); right: auto; width: min(430px, 29vw); text-align: left; }
[data-topic="software"] .t-hero-text > * { width: auto; margin-left: 0; }
[data-topic="software"] .t-title { font-size: clamp(38px, 3.7vw, 70px); line-height: 1; }
[data-topic="software"] .t-statement { font-size: clamp(22px, 2.05vw, 39px); }
[data-topic="software"] .t-line { max-width: 30ch; margin-top: 20px; font-size: 16px; }
[data-topic="software"] .t-media::after { background: radial-gradient(ellipse 44% 52% at 14% 30%, rgba(8, 10, 10, .58), rgba(8, 10, 10, 0) 72%), linear-gradient(180deg, rgba(8, 10, 10, .4) 0%, rgba(8, 10, 10, 0) 20%, rgba(8, 10, 10, 0) 70%, rgba(8, 10, 10, .5) 100%); }
[data-topic="workflows"] .t-hero-text { top: 11vh; bottom: auto; left: auto; right: var(--gutter); width: min(640px, 44vw); padding: 0; text-align: center; }
[data-topic="workflows"] .t-hero-text > * { margin-left: auto; margin-right: auto; }
[data-topic="workflows"] .t-title { font-size: clamp(48px, 5.4vw, 104px); }
[data-topic="workflows"] .t-line { max-width: 40ch; margin-top: 16px; }
[data-topic="workflows"] .t-media::after { background: radial-gradient(ellipse 40% 34% at 72% 24%, rgba(8, 10, 10, .62), rgba(8, 10, 10, 0) 100%), linear-gradient(180deg, rgba(8, 10, 10, .5) 0%, rgba(8, 10, 10, 0) 26%, rgba(8, 10, 10, 0) 70%, rgba(8, 10, 10, .45) 100%); }
[data-topic="infrastructure"] .t-hero-text { top: 13vh; bottom: 8vh; left: var(--gutter); right: var(--gutter); width: auto; }
[data-topic="infrastructure"] .t-title { position: absolute; left: -.1em; bottom: 0; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(66px, 7.9vw, 150px); line-height: 1; white-space: nowrap; }
[data-topic="infrastructure"] :is(.t-statement, .t-line) { width: min(400px, 28vw); margin-left: auto; text-align: right; }
[data-topic="infrastructure"] .t-statement { margin-top: 0; font-size: clamp(26px, 2.7vw, 52px); }
[data-topic="infrastructure"] .t-line { font-size: 17px; }
[data-topic="infrastructure"] .t-media::after { background: linear-gradient(90deg, rgba(8, 10, 10, .7) 0%, rgba(8, 10, 10, 0) 20%), linear-gradient(205deg, rgba(8, 10, 10, .64) 0%, rgba(8, 10, 10, 0) 34%), linear-gradient(0deg, rgba(8, 10, 10, .4) 0%, rgba(8, 10, 10, 0) 24%); }
[data-topic="deployment"] .t-hero-text { left: var(--gutter); right: var(--gutter); top: auto; bottom: 5vh; width: auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
[data-topic="deployment"] .t-hero-text > * { width: auto; margin-left: 0; }
[data-topic="deployment"] .t-title { order: 3; align-self: stretch; margin-top: 2.5vh; text-align: left; font-size: clamp(96px, 15vw, 290px); line-height: .82; letter-spacing: -.035em; }
[data-topic="deployment"] .t-statement { order: 1; margin-top: 0; }
[data-topic="deployment"] .t-line { order: 2; max-width: 38ch; margin-top: 14px; }
/* (Deployment: the band under the header is dimmed well down, so the room's ceiling lights never pass bright under the
   logo while a card grows into this hero; the hero's ground at the top, systems/deployment/index.html, is dimmed to
   match) */
[data-topic="deployment"] .t-media::after { background: radial-gradient(ellipse 30% 20% at 79% 48%, rgba(8, 10, 10, .66), rgba(8, 10, 10, 0) 100%), linear-gradient(0deg, rgba(8, 10, 10, .9) 0%, rgba(8, 10, 10, .55) 26%, rgba(8, 10, 10, 0) 50%), linear-gradient(180deg, rgba(8, 10, 10, .86) 0%, rgba(8, 10, 10, .74) 7%, rgba(8, 10, 10, .3) 14%, rgba(8, 10, 10, 0) 24%); }
[data-topic="operations"] .t-hero-text { display: flex; flex-direction: column; bottom: 12vh; }
[data-topic="operations"] .t-statement { order: 1; margin-top: 0; }
[data-topic="operations"] .t-title { order: 2; margin-top: .8em; font-size: clamp(24px, 2.25vw, 42px); }
[data-topic="operations"] .t-line { order: 3; }
@media (max-width: 760px) {
  [data-topic="applications"] .t-hero-text { top: 13vh; bottom: 8vh; display: flex; flex-direction: column; align-items: flex-start; }
  [data-topic="applications"] .t-title { font-size: clamp(52px, 15vw, 64px); }
  [data-topic="applications"] .t-statement { margin-top: auto; }
  [data-topic="software"] .t-hero-text { top: 12.5vh; bottom: auto; left: auto; right: var(--gutter); width: 72vw; text-align: right; }
  [data-topic="software"] .t-hero-text > * { margin-left: auto; }
  [data-topic="software"] .t-title { font-size: 36px; }
  [data-topic="software"] .t-statement { font-size: 23px; }
  [data-topic="software"] .t-line { margin-top: 14px; font-size: 15px; }
  [data-topic="software"] .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .78) 0%, rgba(8, 10, 10, .4) 30%, rgba(8, 10, 10, 0) 46%, rgba(8, 10, 10, 0) 80%, rgba(8, 10, 10, .5) 100%); }
  [data-topic="workflows"] .t-hero-text { top: 24vh; bottom: auto; left: var(--gutter); right: var(--gutter); width: auto; text-align: center; }
  [data-topic="workflows"] .t-hero-text > * { margin-left: auto; margin-right: auto; }
  [data-topic="workflows"] .t-title { font-size: clamp(44px, 12vw, 52px); }
  [data-topic="workflows"] .t-media::after { background: radial-gradient(ellipse 80% 24% at 50% 38%, rgba(8, 10, 10, .62), rgba(8, 10, 10, 0) 100%), linear-gradient(180deg, rgba(8, 10, 10, .55) 0%, rgba(8, 10, 10, .2) 30%, rgba(8, 10, 10, 0) 60%, rgba(8, 10, 10, .45) 100%); }
  [data-topic="infrastructure"] .t-hero-text { top: 12vh; bottom: 7vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; }
  [data-topic="infrastructure"] .t-title { left: auto; right: -.1em; top: 0; bottom: auto; transform: none; font-size: clamp(60px, 17vw, 74px); }
  [data-topic="infrastructure"] :is(.t-statement, .t-line) { width: calc(100% - 92px); margin-left: 0; text-align: left; }
  [data-topic="infrastructure"] .t-statement { font-size: clamp(24px, 7vw, 30px); }
  [data-topic="infrastructure"] .t-line { font-size: 15px; }
  [data-topic="infrastructure"] .t-media::after { background: linear-gradient(0deg, rgba(8, 10, 10, .88) 0%, rgba(8, 10, 10, .5) 26%, rgba(8, 10, 10, 0) 46%), linear-gradient(270deg, rgba(8, 10, 10, .5) 0%, rgba(8, 10, 10, 0) 30%); }
  [data-topic="deployment"] .t-hero-text { bottom: 6vh; }
  [data-topic="deployment"] .t-title { font-size: 17.2vw; margin-top: 2vh; }
  [data-topic="deployment"] .t-statement { font-size: clamp(24px, 7vw, 30px); }
  [data-topic="deployment"] .t-line { font-size: 15px; }
  [data-topic="operations"] .t-hero-text { top: 12.5vh; bottom: 6vh; }
  [data-topic="operations"] .t-statement { font-size: clamp(38px, 11vw, 46px); }
  [data-topic="operations"] .t-title { margin-top: .55em; font-size: 22px; }
  [data-topic="operations"] .t-line { margin-top: auto; }
  [data-topic="operations"] .t-media::after { background: linear-gradient(180deg, rgba(8, 10, 10, .82) 0%, rgba(8, 10, 10, .5) 30%, rgba(8, 10, 10, 0) 46%, rgba(8, 10, 10, 0) 66%, rgba(8, 10, 10, .6) 82%, rgba(8, 10, 10, .92) 100%); }
}

/* the cue to scroll, at the foot of a hero that has one (heroCue in tools/build-standalone.cjs): a word and a thin line
   a light runs down. It goes as soon as the page starts to come up: each page's own script hides it (on the glossary,
   bodies-glossary.js) */
.t-cue { position: absolute; z-index: 3; left: 50%; bottom: max(3.4vh, 20px); display: flex; flex-direction: column; align-items: center; gap: 10px; translate: -50% 0; pointer-events: none;
  font: italic 400 18px/1 var(--sys-accent); color: rgba(239, 238, 233, .82); text-shadow: 0 1px 6px rgba(4, 6, 9, .6); }
.t-cue i { position: relative; width: 1px; height: 38px; overflow: hidden; background: rgba(239, 238, 233, .24); }
.t-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 14px; background: linear-gradient(rgba(239, 238, 233, 0), rgba(239, 238, 233, .95)); transform: translateY(-14px); }
.js:not(.motion-ready) .t-cue { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .t-cue { animation: gl-cue-in 1s var(--sys-ease) 1.4s both; }
  .t-cue i::after { animation: gl-cue-run 2.2s cubic-bezier(.45, 0, .25, 1) 1.8s infinite; }
}
@keyframes gl-cue-in { from { opacity: 0; } }
@keyframes gl-cue-run { 0% { transform: translateY(-14px); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(38px); opacity: 0; } }

/* the way on as a line of type, "Next" in the italic accent and then the next page's name, for a page built with
   nextKind 'line' (tools/build-standalone.cjs). It has to come after .t-end .t-next above: the two weigh the same, so
   the later one sets the padding */
.t-next.is-line { padding: 3vh var(--gutter) 1vh; text-align: center; }
.t-next-line { display: inline-block; max-width: 22ch; font-size: clamp(30px, 3.4vw, 60px); line-height: 1.1; color: var(--sys-graphite); text-wrap: balance; }
.t-next-line .t-next-label { margin-right: .3em; font: italic 400 1em/1.1 var(--sys-accent); }
.t-next-line .t-next-title { font: 200 1em/1.1 var(--sys-display); letter-spacing: -.01em; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--sys-ease), color .25s var(--sys-ease); }
.t-next-line:hover .t-next-title { background-size: 100% 1px; color: #9a2b3c; }
.t-next-line:focus-visible { outline: 2px solid #2f6f9a; outline-offset: 8px; border-radius: 2px; }
@media (max-width: 760px) {
  .t-next-line { font-size: clamp(28px, 8vw, 36px); }
}