/* The shared layer of every website section (tools/sections/).
 *
 * Visual language taken from the pitch deck (docs/talks/2026-09-25-dynamic-pitch):
 * a numbered kicker, a heavy Outfit title with ONE serif-italic accent word,
 * pale cards on a quiet paper ground, status pills, icon tiles, the yellow
 * paper plane as the only protagonist. Palette = site.css "Revision 02".
 *
 * Every rule here describes the FINISHED state. Motion lives in sx.js and a
 * section's own timeline; a class starting with .is- is a state a timeline
 * may set for a moment and must remove again.
 */

.sx{
 --sx-ink:#10264d;--sx-muted:#52627b;--sx-cobalt:#2455d6;--sx-sun:#ffb400;--sx-sun-soft:#ffd34e;
 --sx-line:#dce6f4;--sx-card:#fff;--sx-paper:#f5f8fe;--sx-pale:#edf2fc;
 --sx-ok:#1b6b40;--sx-ok-bg:#e3f4ea;--sx-warn:#b3401d;--sx-warn-bg:#fdeae3;--sx-wait:#7a4a00;--sx-wait-bg:#fff4d6;
 position:relative;padding-block:clamp(72px,9vw,128px);color:var(--sx-ink);
}
[data-theme="dark"] .sx{
 --sx-ink:#f6f8fc;--sx-muted:#b9c9e5;--sx-cobalt:#a7c0ff;--sx-line:#2b4164;--sx-card:#142848;--sx-paper:#10213f;--sx-pale:#1b3358;
 --sx-ok:#8fe0b0;--sx-ok-bg:#133d2a;--sx-warn:#ffb59c;--sx-warn-bg:#4a2014;--sx-wait:#ffd98a;--sx-wait-bg:#3d2d0a;
}
.sx+.sx:not(.sx-tint):not(.sx-night):not(.sx-cobalt){border-top:1px solid var(--hairline)}

/* tones: a framed panel, like the hero */
.sx-tint,.sx-night,.sx-cobalt{margin-inline:0;padding-inline:64px;border-radius:22px}
.sx-tint{background:radial-gradient(90% 80% at 80% 20%,#fff 0%,var(--sx-paper) 55%,#eaf0fb 100%);border:1px solid var(--sx-line)}
[data-theme="dark"] .sx-tint{background:radial-gradient(90% 80% at 80% 20%,#16305a 0%,#10244a 55%,#0d1d3b 100%)}
.sx-night{
 --sx-ink:#f6f8fc;--sx-muted:#b9c9e5;--sx-cobalt:#a7c0ff;--sx-line:#2b4164;--sx-card:#132a52;--sx-pale:#1b3358;
 --sx-ok:#8fe0b0;--sx-ok-bg:#133d2a;--sx-warn:#ffb59c;--sx-warn-bg:#4a2014;
 background:radial-gradient(80% 90% at 50% 30%,#1a3a78 0%,#10275a 45%,#0b1a3c 100%);color:var(--sx-ink);
}
.sx-cobalt{--sx-ink:#fff;--sx-muted:#dfe7ff;background:radial-gradient(90% 90% at 60% 20%,#4a78ee 0%,#2a5ae0 45%,#1f47c4 100%);color:#fff}
@media(max-width:1280px){.sx-tint,.sx-night,.sx-cobalt{padding-inline:36px}}
@media(max-width:760px){.sx-tint,.sx-night,.sx-cobalt{padding-inline:18px;border-radius:16px}}

/* ---- the grid ---- */
.sx-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center;max-width:1120px;margin-inline:auto}
.sx-wide .sx-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.sx-flip .sx-copy{order:2}
.sx-flip .sx-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.sx-flip.sx-wide .sx-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.sx-copy{min-width:0}
.sx-visual{position:relative;min-width:0}
.sx-center{text-align:center;max-width:860px;margin-inline:auto}
.sp-relaunch .sx-center .sx-lede{margin-inline:auto}
@media(max-width:900px){
 .sx-grid,.sx-wide .sx-grid{grid-template-columns:1fr;gap:40px}
 .sx-flip .sx-copy{order:0}
}

/* ---- type ---- */
.sp-relaunch .sx-kicker{display:flex;align-items:center;gap:12px;margin:0 0 22px;font:600 13px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sx-cobalt)}
.sx-num{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--sx-pale);font:600 12px/1 var(--sans);letter-spacing:.02em}
.sx-cobalt .sx-kicker,.sx-night .sx-kicker{color:var(--sx-sun-soft)}
.sp-relaunch .sx-title{margin:0;font:600 clamp(36px,4.3vw,62px)/1.04 var(--sans);letter-spacing:-.045em;color:var(--sx-ink)}
.sp-relaunch .sx-title em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.1em;line-height:.9;color:var(--sx-cobalt)}
.sx-night .sx-title em,.sx-cobalt .sx-title em{color:var(--sx-sun-soft)}
.sp-relaunch .sx-lede{margin:22px 0 0;max-width:30em;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--sx-muted)}
.sp-relaunch .sx-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:40px 0 0;padding-bottom:12px;border-bottom:1px solid var(--sx-line);font:600 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sx-muted)}
.sx-label-aside{font-weight:500;letter-spacing:0;text-transform:none;font-size:13px}
.sp-relaunch .sx-note{margin:24px 0 0;font-size:12.5px;line-height:1.5;color:var(--sx-muted)}
.sx-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-weight:600;font-size:15px;color:var(--sx-cobalt);text-decoration:none}
.sx-link span{transition:translate .2s}
.sx-link:hover span{translate:4px 0}
.sx-link:focus-visible{outline:2px solid var(--sx-cobalt);outline-offset:4px;border-radius:4px}

/* ---- pieces ---- */
.sx-card{position:relative;background:var(--sx-card);border:1px solid var(--sx-line);border-radius:20px;
 box-shadow:0 1px 2px #10264d0a,0 22px 44px -26px #10264d40}
[data-theme="dark"] .sx-card,.sx-night .sx-card{box-shadow:0 22px 44px -26px #00000099}
.sx-card.is-lit{border-color:var(--sx-sun);box-shadow:0 0 0 4px #ffd34e55,0 22px 44px -26px #b7700066}
.sx-card.is-ghost{background:transparent;border-style:dashed;box-shadow:none}

.sx-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font:600 14px/1 var(--sans);white-space:nowrap}
.sx-pill svg{width:15px;height:15px}
.sx-pill.is-ok{background:var(--sx-ok-bg);color:var(--sx-ok)}
.sx-pill.is-warn{background:var(--sx-warn-bg);color:var(--sx-warn)}
.sx-pill.is-info{background:var(--sx-pale);color:var(--sx-cobalt)}
.sx-pill.is-wait{background:var(--sx-wait-bg);color:var(--sx-wait)}
.sx-pill.is-mute{background:transparent;color:var(--sx-muted);border:1px dashed var(--sx-line)}

.sx-chip{font:500 .92em/1.3 var(--mono);color:var(--sx-muted);text-decoration:underline dotted;text-underline-offset:4px;text-decoration-color:var(--sx-muted)}

.sx-ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:14px;background:var(--sx-pale);color:var(--sx-cobalt)}
.sx-ico svg{width:24px;height:24px}
.sx-ico.is-solid{background:#2455d6;color:#fff}

.sx-plane{display:block;width:84px;pointer-events:none;filter:drop-shadow(0 10px 14px #b7700040)}
.sx-plane img{display:block;width:100%;height:auto;transform:rotate(36.2deg)}
.sx-plane::before{content:"";position:absolute;inset:-40% -30%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#ffd34e55,#ffd34e00)}

.sx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
.sx-stat b{display:block;font:600 clamp(40px,4.4vw,64px)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sx-stat span{display:block;margin-top:8px;font-size:15px;color:var(--sx-muted)}

/* A picture drawn in design units: the stage keeps its aspect and its
   canvas' font-size is a fraction of its width, so 1em = 10 design px of a
   --sx-w wide drawing. Use it only where a picture must keep its geometry;
   cards and lists reflow with plain CSS. */
.sx-stage{position:relative;aspect-ratio:var(--sx-w,640)/var(--sx-h,480);container-type:inline-size}
.sx-canvas{position:absolute;inset:0;font-size:calc(1000cqi / var(--sx-w,640))}

/* the play control, once per page, when the system asks for less motion */
.sx-play{position:fixed;right:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface-1);color:var(--ink);font:500 13px/1 var(--sans);box-shadow:0 10px 26px #10264d26;cursor:pointer}
.sx-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){.sx-link span{transition:none}}

/* a section whose scene is not built yet (tools/sections/<id>.py STUB) */
.sx-stub{min-height:320px;background:repeating-linear-gradient(135deg,var(--sx-pale) 0 12px,transparent 12px 24px)}
/* the connector catalogue under the systems section keeps its own component styles */
.sx-catalog{max-width:1120px;margin:56px auto 0}

/* text only for screen readers (a live region, a label for a drawn value) */
.sx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:600px){.sx-kicker{letter-spacing:.12em;font-size:12px}}

/* ---- the subpage hero (h.page_hero): framed like the home hero ---- */
.sx-hero{padding-block:24px 8px}
.sx-hero+.sx{border-top:0}
.sx-hero-frame{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center;
 margin-inline:0;padding:clamp(40px,5vw,72px) clamp(24px,4.5vw,64px);border:1px solid var(--sx-line);border-radius:22px;
 background:radial-gradient(90% 80% at 78% 38%,#ffffff 0%,#f4f7fd 45%,#e9f0fb 100%)}
[data-theme="dark"] .sx-hero-frame{background:radial-gradient(90% 80% at 78% 38%,#16305a 0%,#10244a 50%,#0d1d3b 100%)}
.sp-relaunch .sx-hero-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:7px 14px 7px 10px;border-radius:999px;background:#ffffffc2;border:1px solid var(--sx-line);color:var(--sx-ink);font-size:14px;line-height:1.2;font-weight:500}
.sx-hero-kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sx-sun);box-shadow:0 0 0 3px #ffb40033}
[data-theme="dark"] .sp-relaunch .sx-hero-kicker{background:#142848cc}
.sp-relaunch .sx-hero-title{font-size:clamp(36px,4vw,58px)}
.sx-hero-actions{justify-content:flex-start;margin-top:30px}
@media(max-width:900px){.sx-hero-frame{grid-template-columns:1fr}}
@media(max-width:760px){.sx-hero-frame{border-radius:16px}}
@media(max-width:900px){.sx-flip .sx-grid,.sx-flip.sx-wide .sx-grid{grid-template-columns:1fr}}