/* Landing page: a sender-to-endpoint pipeline as the hero, then short sections. */
body.landing {
  --la-width: 1120px;
  --la-gutter: clamp(16px, 4vw, 40px);
  --la-ok: #2e9b73;
  --la-night: #0b0f17;
  --la-night-ink: #e9edf3;
  --la-night-muted: rgba(233, 237, 243, .62);
  --la-night-line: rgba(255, 255, 255, .11);
  --la-night-card: rgba(255, 255, 255, .045);
  --la-strong: #fff;
  --la-wire: var(--la-wire);
  --la-tick-mark: #fff;
  --la-fade-tint: 14%;
  margin: 0;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
[data-mode="charcoal"] body.landing, [data-mode="dark"] body.landing { --la-ok: #4cc195; }
[data-mode="charcoal"] .la-hero, [data-mode="dark"] .la-hero { --la-ok: #4cc195; }
/* In light mode the hero takes the page's own surfaces; charcoal and dark keep the night. */
/* The forehead matches the hero, except in light mode where white status-bar text needs a dark band. */
body.landing { --forehead: var(--la-night); }
[data-mode="light"] body.landing { --forehead: color-mix(in srgb, var(--accent) 72%, #000); }
[data-mode="light"] body.landing { --la-night: var(--canvas); --la-night-ink: var(--ink); --la-night-muted: var(--muted); --la-night-line: var(--border); --la-night-card: var(--card);
  --la-strong: var(--ink); --la-wire: color-mix(in srgb, var(--ink) 18%, transparent); --la-tick-mark: var(--ink); --la-fade-tint: 0%; }
[data-mode="light"] .la-packet { fill: var(--comet, var(--accent)); }
[data-mode="light"] .la-hero::before { background: radial-gradient(ellipse 50% 32% at 50% 62%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); }
[data-mode="light"] .la-story { --fade: 200px; }
.landing h1, .landing h2, .landing h3 { margin: 0; font-weight: 650; }
.landing p { margin: 0; line-height: 1.6; }
.landing code, .landing pre { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.la-top, .la-intro, .la-diagram, .la-footer {
  max-width: var(--la-width); margin: 0 auto;
  padding-left: calc(var(--la-gutter) + env(safe-area-inset-left)); padding-right: calc(var(--la-gutter) + env(safe-area-inset-right));
}

/* Hero: the pipeline sits on the night surface, which follows the reader's appearance. */
.la-hero { position: relative; isolation: isolate; padding-bottom: 104px; background: var(--la-night); color: var(--la-night-ink); }
.la-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 40% at 50% 80%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.la-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding-top: calc(18px + env(safe-area-inset-top)); padding-bottom: 18px; }
.la-top .brand { padding: 0; color: var(--la-strong); font-size: 21px; text-decoration: none; }
.la-top .brand-mark { width: 15px; height: 25px; }
.la-links { justify-self: end; display: flex; align-items: center; gap: 26px; font-size: 14px; }
.la-links a { color: var(--la-night-muted); text-decoration: none; }
.la-links a:hover { color: var(--la-strong); }
.la-links .la-signin { padding: 7px 14px; border: 1px solid var(--la-night-line); border-radius: 999px; color: var(--la-strong); }

.la-intro { padding-top: 88px; text-align: center; }
.la-intro h1 { display: grid; justify-items: center; gap: 18px; max-width: 900px; margin: 0 auto; color: var(--la-strong); }
/* The wordmark leads the page; the tagline sits under it as the headline. */
.la-wordmark { display: inline-flex; align-items: center; gap: .16em; font-size: clamp(64px, 11vw, 132px); font-weight: 650; line-height: .95; letter-spacing: -.06em; }
.la-wordmark .brand-mark { width: .42em; height: .7em; }
.la-tagline { font-size: clamp(24px, 3.4vw, 40px); font-weight: 600; line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.la-intro p { max-width: 620px; margin: 24px auto 34px; color: var(--la-night-muted); font-size: clamp(17px, 2vw, 19px); }
.la-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.la-button { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 600; text-decoration: none; }
.la-button:hover { filter: brightness(1.08); }
.la-button.ghost { border-color: var(--la-night-line); background: transparent; color: var(--la-strong); }

/* Diagram: senders, Litehook and endpoints, joined by wires measured from the layout. Wires stay
   neutral; only a comet, an event's packet and tail, carries colour. */
.la-diagram { position: relative; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 270px) minmax(0, 240px); justify-content: space-between; align-items: center; margin: 88px auto 0; }
.la-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.la-wire { fill: none; stroke: var(--la-wire); stroke-width: 1.25; stroke-linecap: round; }
.la-comets g { filter: drop-shadow(0 0 3px var(--comet, var(--accent))); }
.la-comets path { fill: none; stroke: var(--comet, var(--accent)); stroke-linecap: butt; }
.la-packet { fill: color-mix(in srgb, var(--comet, var(--accent)) 35%, #fff); }
.la-col { position: relative; display: grid; gap: 12px; }
.la-tile { position: relative; display: grid; flex: none; place-items: center; width: 42px; height: 42px; border: 1px solid var(--la-night-line); border-radius: 12px; background: var(--la-night); box-shadow: inset 0 0 0 100vmax var(--la-night-card); color: var(--la-night-muted); }
.la-tile.ping { animation: la-ping 1100ms ease-out; }
@keyframes la-ping {
  0%, 15% { border-color: var(--comet, var(--accent)); color: var(--la-strong); box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--comet, var(--accent)) 30%, transparent), 0 0 0 0 color-mix(in srgb, var(--comet, var(--accent)) 50%, transparent); }
  60% { box-shadow: inset 0 0 0 100vmax var(--la-night-card), 0 0 0 10px color-mix(in srgb, var(--comet, var(--accent)) 0%, transparent); }
}
/* Senders and endpoints are matching cards, so the two sides balance. */
.la-src { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--la-night-line); border-radius: 12px; background: var(--la-night); box-shadow: inset 0 0 0 100vmax var(--la-night-card); }
.la-src strong { overflow: hidden; color: var(--la-strong); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.la-src > div { display: grid; gap: 1px; min-width: 0; }
.la-src code { color: var(--la-night-muted); font-size: 11.5px; }
/* The last event each sender sent; the line keeps its height before the first one. */
.la-src .la-status { min-height: 1.5em; color: var(--la-night-ink); }
.la-src .la-tile { width: 38px; height: 38px; border-radius: 10px; }
.la-out { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--la-night-line); border-radius: 14px; background: var(--la-night); box-shadow: inset 0 0 0 100vmax var(--la-night-card); }
.la-out > div { display: grid; gap: 1px; min-width: 0; }
.la-out strong { color: var(--la-strong); font-size: 14px; font-weight: 600; }
.la-out code { overflow: hidden; color: var(--la-night-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.la-status { overflow: hidden; margin-top: 3px; color: var(--la-ok); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.la-out[data-node="phone"] .la-status { color: var(--la-night-ink); }
/* A sender or endpoint shows its details only once an event has passed through it; the lines keep their height. */
.la-out .la-status { min-height: 1.5em; }
.la-out:not(.seen) code, .la-src:not(.seen) code { visibility: hidden; }
.la-out .la-tile { width: 38px; height: 38px; border-radius: 10px; }
/* Counts since the page opened. */
.la-count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px; background: var(--la-night); box-shadow: 0 0 0 1px var(--la-night-line); color: var(--la-night-ink); font-family: "Geist Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }

.la-hub { position: relative; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 18px; background: var(--la-night); box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--accent) 7%, transparent), 0 0 60px -14px color-mix(in srgb, var(--accent) 40%, transparent); }
.la-hub-head { display: flex; align-items: center; gap: 9px; color: var(--la-strong); font-size: 19px; font-weight: 600; letter-spacing: -.04em; }
.la-hub-head .brand-mark { width: 12px; height: 20px; }
/* Empty until the first event arrives; the line keeps its height so nothing shifts. */
.la-now { display: flex; align-items: baseline; gap: 8px; min-width: 0; min-height: 1.6em; margin: 8px 0 14px !important; font-size: 12.5px; }
.la-now b { overflow: hidden; color: var(--la-night-ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.la-now code { overflow: hidden; color: var(--la-night-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }

/* Stages: every event is checked, routed and delivered; each row ticks as the event reaches it. */
.la-stages { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.la-stages li { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; background: var(--la-night-card); font-size: 13px; }
.la-stages b { color: var(--la-night-muted); font-weight: 500; transition: color 400ms ease; }
.la-stages li [data-field] { overflow: hidden; color: var(--la-night-muted); font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.la-tick { position: relative; width: 16px; height: 16px; border: 1.5px solid var(--la-night-line); border-radius: 50%; transition: background 400ms ease, border-color 400ms ease; }
/* Rotated, the mark's strokes sit below its box centre, so it is lifted to look centred in the circle. */
.la-tick::after { content: ""; position: absolute; top: 50%; left: 50%; box-sizing: border-box; width: 5px; height: 8.5px; border: solid var(--la-tick-mark); border-width: 0 1.5px 1.5px 0; transform: translate(-50%, -70%) rotate(45deg); opacity: 0; transition: opacity 300ms ease; }
.la-stages li.done b { color: var(--la-strong); }
/* A ticked row rests in the colour of the event that ticked it. */
.la-stages li.done .la-tick { border-color: color-mix(in srgb, var(--comet, var(--accent)) 75%, transparent); background: color-mix(in srgb, var(--comet, var(--accent)) 35%, transparent); }
.la-stages li.done .la-tick::after { opacity: 1; }
.la-stages li.lit .la-tick { border-color: var(--comet, var(--accent)); background: var(--comet, var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--comet, var(--accent)) 60%, transparent); transition-duration: 120ms; }


/* Content follows the reader's appearance. The story opens on the hero's night and fades into the page. */
.landing h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.045em; }
.landing h3 { margin-bottom: 8px; font-size: 16px; letter-spacing: -.01em; }
.landing main p { color: var(--muted); font-size: 15px; }
.landing main p code { padding: 1px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--card); font-size: .88em; }
.landing .ok { color: var(--la-ok); }
.landing .warn { color: #c98a1b; }
.landing .bad { color: #d4493f; }
.la-textlink { color: var(--accent-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.la-textlink:hover { text-decoration: underline; }

.la-story { --fade: 340px; position: relative; padding: calc(var(--fade) - 60px) 0 0;
  background: linear-gradient(in oklab 180deg, var(--la-night) 0, color-mix(in oklab, var(--accent) var(--la-fade-tint), color-mix(in oklab, var(--la-night) 55%, var(--canvas))) 130px, var(--canvas) var(--fade)); }
/* The spine runs down the page centre; its fill and packet follow the reader's scroll position. */
.la-spine { position: absolute; top: 0; bottom: var(--spine-end, 0px); left: 50%; width: 1.5px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--la-wire), var(--border) 280px); }
.la-spine-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(var(--progress, 1)); }
.la-spine-packet { position: absolute; top: 0; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 35%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 14px var(--accent); transform: translateY(var(--packet, 0px)); }
[data-motion="still"] .la-spine-packet { display: none; }

.la-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 128px; align-items: center; padding-bottom: 160px; }
.la-stage:nth-of-type(even) .la-stage-text { order: 2; }
.la-stage-text { max-width: 440px; }
.la-stage:nth-of-type(odd) .la-stage-text { justify-self: end; }
.la-stage:nth-of-type(odd) .la-visual { justify-self: start; }
.la-stage:nth-of-type(even) .la-visual { justify-self: end; }
.la-stage-text p:not(.la-step) { margin: 16px 0 18px; }
.la-step { position: relative; margin-bottom: 14px !important; color: var(--accent-ink) !important; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* Each stage's node sits on the spine, level with its step label. */
.la-node { position: absolute; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border: 2px solid var(--accent); border-radius: 50%; background: var(--canvas); transition: background 300ms ease, box-shadow 300ms ease; }
.la-stage:nth-of-type(odd) .la-node { right: -71px; }
.la-stage:nth-of-type(even) .la-node { left: -71px; }
.la-node.lit, [data-motion="still"] .seen .la-node { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
/* As the packet passes a node on the way down, the node sends out two radar rings. */
.la-node::before, .la-node::after { content: ""; position: absolute; inset: -2px; border: 1.5px solid var(--accent); border-radius: 50%; opacity: 0; pointer-events: none; }
.la-node.blip::before { animation: la-blip 1100ms cubic-bezier(.2, .6, .3, 1); }
.la-node.blip::after { animation: la-blip 1100ms 180ms cubic-bezier(.2, .6, .3, 1); }
@keyframes la-blip { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }

/* Illustrations: the markup holds each one's final state; the script steps through it once. */
.la-visual { position: relative; display: grid; gap: 12px; max-width: 460px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); font-size: 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -18px rgba(15, 23, 42, .18); }
.la-visual.arriving, .la-stage-text.arriving > :not(.la-step) { opacity: 0; transform: translateY(12px); }
.la-visual.arrived, .la-stage-text.arrived > * { transition: opacity 360ms ease, transform 360ms ease; }
.la-visual [data-in] { transition: opacity 280ms ease, transform 280ms ease; }
.la-visual .is-pending { opacity: 0; transform: translateY(6px); }
.la-visual [data-out]:not(.is-here) { opacity: 0; }
.la-swap { display: inline-grid; justify-items: end; }
.la-swap > * { grid-area: 1 / 1; transition: opacity 280ms ease; }
.la-replay { justify-self: end; margin: -2px -6px -8px 0; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; opacity: 0; transition: opacity 200ms ease; }
.la-visual.done .la-replay { opacity: 1; }
.la-replay:hover { color: var(--ink); border-color: var(--muted); }
.la-visual code, .la-visual pre { font-size: 12px; }
.ping { animation: la-chip 900ms ease-out; }
@keyframes la-chip { 0%, 30% { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent-ink); } }

.la-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; }
.la-chips li { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12px; }
.la-feed, .la-log { display: grid; gap: 6px; }
.la-feed-row, .la-log-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 9px; background: var(--canvas); }
.la-feed-row span, .la-log-row > span:not(.la-swap) { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.la-feed-row code, .la-log-row code { color: var(--muted); }
.la-visual b { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; }
.la-log-row u { color: var(--accent-ink); text-decoration: none; border-radius: 4px; }

.la-req { display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--canvas); }
.la-req code { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.la-req i { color: var(--muted); font-style: normal; }
.la-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.la-checks li { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.la-checks li.muted { color: var(--muted); }
.la-checks b { margin-left: auto; }
.la-check { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--la-ok); }
.la-check::after { content: ""; position: absolute; top: 3px; left: 5.5px; width: 3.5px; height: 6.5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.la-check.dup { background: var(--muted); }
.la-check.dup::after { top: 7px; left: 4px; width: 8px; height: 0; border-width: 1.5px 0 0; transform: none; }

.la-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.la-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12.5px; transition: color 240ms ease, border-color 240ms ease; }
.la-pill.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--ink); }
.la-switch { position: relative; width: 24px; height: 14px; border-radius: 999px; background: var(--border); transition: background 240ms ease; }
.la-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left 240ms ease; }
.la-pill.on .la-switch { background: var(--accent); }
.la-pill.on .la-switch::after { left: 12px; }
.la-json { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--canvas); color: var(--ink); line-height: 1.7; }
.la-json .add { display: block; margin: 0 -16px; padding: 0 16px; background: color-mix(in srgb, var(--la-ok) 12%, transparent); color: var(--ink); }

.la-dest { display: grid; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--canvas); }
.la-dest:first-child { }
.la-dest-head { display: flex; justify-content: space-between; gap: 12px; }
.la-dest-head code { color: var(--ink); }
.la-attempts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.la-attempts li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }
.la-attempts i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.la-attempts small { grid-column: 2; color: var(--muted); font-size: 11px; }

.la-phone { display: grid; gap: 8px; width: min(100%, 300px); justify-self: center; padding: 18px 12px; border: 1px solid var(--border); border-radius: 28px; background: var(--canvas); }
.la-note { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.la-note b { color: var(--ink); font-family: inherit; font-size: 13px; }
.la-note span { color: var(--muted); font-size: 12px; }
.la-note.warn { border-color: color-mix(in srgb, #c98a1b 45%, var(--border)); }
.la-note:nth-child(2) { box-shadow: 0 4px 0 -1px var(--card), 0 4px 0 0 var(--border), 0 8px 0 -2px var(--card), 0 8px 0 -1px var(--border); margin-bottom: 8px; }

/* The spine ends at the closing call. */
.landing .la-end { position: relative; padding: 40px 0 160px; text-align: center; }
.la-end .la-node-end { position: absolute; top: 0; left: 50%; right: auto; margin: -6.5px 0 0 -6.5px; }
.la-end h2 { max-width: 620px; margin: 0 auto 28px; }
.la-end .la-button.ghost { border-color: var(--border); color: var(--ink); }

.la-story { max-width: none; }
.la-story > section { max-width: var(--la-width); margin: 0 auto; padding-left: calc(var(--la-gutter) + env(safe-area-inset-left)); padding-right: calc(var(--la-gutter) + env(safe-area-inset-right)); }

.la-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; padding-top: 48px; padding-bottom: calc(48px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.la-footer-brand { display: grid; gap: 18px; justify-items: start; }
.la-footer-brand .brand { padding: 0; font-size: 20px; }
.la-footer-brand .brand-mark { width: 15px; height: 25px; }
.la-footer-brand small { color: var(--muted); font-size: 12px; }
.la-theme .theme-choice { width: 24px; height: 24px; border-radius: 50%; }
.la-top .brand { justify-self: start; }
.la-footer nav { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 40px; width: min(100%, 460px); }
.la-footer nav div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.la-footer h2 { margin: 0 0 4px; font-size: 13px; letter-spacing: 0; }
.la-footer a { color: var(--muted); font-size: 13.5px; text-decoration: none; }
.la-footer a:hover { color: var(--ink); }

@media (max-width: 960px) {
  .la-diagram { grid-template-columns: minmax(0, 200px) minmax(0, 240px) minmax(0, 200px); }
  .la-stage { column-gap: 96px; }
  .la-stage:nth-of-type(odd) .la-node { right: -55px; }
  .la-stage:nth-of-type(even) .la-node { left: -55px; }
}
/* Phones: sources in a row above the hub, outputs in a row below, joined vertically. */
@media (max-width: 760px) {
  .la-links a:not(.la-signin) { display: none; }
  .la-top { gap: 10px; }
  .la-theme .theme-control { gap: 6px; flex-wrap: nowrap; }
  .la-theme .theme-choice { width: 20px; height: 20px; }
  .la-intro { padding-top: 56px; }
  .la-diagram { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 64px; }
  /* Phones: senders and endpoints are the same compact cards, three across. */
  .la-sources, .la-outs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .la-src, .la-out { flex-direction: column; gap: 8px; padding: 12px 6px 10px; text-align: center; }
  .la-src > div, .la-out > div { justify-items: center; max-width: 100%; }
  .la-src strong, .la-out strong { font-size: 12.5px; }
  .la-src code, .la-out code { display: none; }
  .la-status { max-width: 100%; font-size: 11px; }
  .la-hub { width: min(100%, 300px); justify-self: center; }
  /* Phones: the spine moves to the left edge and each stage stacks text over its illustration. */
  .la-story { --fade: 260px; }
  [data-mode="light"] .la-story { --fade: 170px; }
  .la-spine { left: calc(var(--la-gutter) + 6px); }
  .la-story > .la-stage { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-bottom: 96px; padding-left: calc(var(--la-gutter) + 32px); }
  .la-stage:nth-of-type(even) .la-stage-text { order: 0; }
  .la-stage:nth-of-type(n) .la-stage-text, .la-stage:nth-of-type(n) .la-visual { justify-self: stretch; }
  .la-visual { max-width: none; }
  .la-stage:nth-of-type(odd) .la-node, .la-stage:nth-of-type(even) .la-node { right: auto; left: -32px; }
  .la-visual { padding: 16px; }
  .landing .la-end { padding: 32px 0 104px; }
  .la-end .la-node-end { left: calc(var(--la-gutter) + 6px); }
  .la-footer { flex-direction: column; gap: 36px; }
  .la-footer nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}