/* The annotation voice is IBM Plex Mono and it is reserved: figures, ticks,
   coordinates, catalogue numbers and live values. Never chrome, never prose. */
.sx-num,.sx-micro{font-variant-numeric:tabular-nums}
body{margin:0;background:var(--bg-page)}
.shell{min-height:100vh}
a{color:var(--text-accent);text-decoration:none}
a:hover{color:var(--text-strong);text-decoration:underline;text-underline-offset:4px}
.phone{width:390px;margin:32px auto;border:1px solid var(--border-strong);border-radius:28px;overflow:hidden;box-shadow:var(--shadow-float)}
/* the mobile menu sheet is fixed to the real viewport, so in the phone preview
   pin it to a phone-width column instead of letting it span the desktop window */
.phone [role="dialog"]{left:50%!important;right:auto!important;width:390px!important;transform:translateX(-50%);top:24px!important;bottom:24px!important;border-radius:28px;border:1px solid var(--border-strong)}
@keyframes sx-drift{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(28px)}}
@keyframes sx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
header a[href^="tel:"]{display:none}
/* the sticky header's backdrop-filter makes it a containing block, which traps the
   fixed mobile menu sheet inside a 56px box — drop the blur only while it is open */
header:has([role="dialog"]){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important;transform:none!important}
/* compact footer on phones: two columns of links, tighter rhythm */
.sx-narrow footer .sx-container{padding-block:var(--sp-8)!important}
.sx-narrow footer .sx-container>div:first-child{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-5) var(--sp-4)!important}
.sx-narrow footer a{padding:3px 0!important}
.sx-narrow footer .sx-container>div:last-child{margin-top:var(--sp-6)!important}
@media (max-width:640px){footer .sx-container{padding-block:var(--sp-8)}footer .sx-container>div:first-child{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-4)}footer a{padding:3px 0}footer .sx-container>div:last-child{margin-top:var(--sp-6)}}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:0 0 auto}
/* Mono is reserved. It marks a readout: a tick, a coordinate, a catalogue
   number, a live value. A headline figure is still a headline, so it keeps
   the display voice and only takes tabular figures from .sx-num. */
.sx-caption{letter-spacing:.01em}
.sx-num{font-variant-numeric:tabular-nums;letter-spacing:0}
.sx-caption[data-mono],.sx-micro[data-mono]{font-family:var(--font-mono)}

/* Narrow compression. Restates the token file's 480px step on the wrapper so a
   real phone and the ?preview=phone frame get the same assembled scale — size,
   tracking and optical size moving together, not a font-size nudge on its own. */
.sx-narrow{--t-mega:2.75rem;--t-mega-lh:.96;--t-mega-tr:-.038em;--t-display:2.375rem;--t-display-lh:1.02;--t-display-tr:-.032em;--t-h1:2rem;--t-h1-tr:-.028em;--t-h2:1.625rem;--t-h2-tr:-.022em;--t-quote:1.5rem;--t-lead:1.0625rem;--opsz-mega:56;--opsz-display:44;--opsz-h1:36;--opsz-h2:28;--wdth-hero:100}
.sx-narrow .sx-container{padding-inline:18px}
.sx-narrow .rail{gap:10px}

.sx-narrow .rail>*{flex:0 0 auto}
.sx-narrow .rail{max-width:100%;overflow-x:auto}
.sx-narrow table{table-layout:fixed;width:100%}.sx-narrow th,.sx-narrow td{overflow-wrap:anywhere;padding-inline:8px!important}

/* Client-mark ticker: two identical tracks, the second covering the seam. */
.sx-ticker{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sx-ticker-track{display:flex;width:max-content;gap:14px;animation:sx-ticker 46s linear infinite}
.sx-ticker:hover .sx-ticker-track{animation-play-state:paused}
@keyframes sx-ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.sx-ticker-track{animation:none}.sx-ticker{overflow-x:auto}}
.sx-ticker-tile{display:flex;align-items:center;justify-content:center;height:64px;width:132px;flex:0 0 132px;padding:10px 14px;border-radius:6px;background:#fff;border:1px solid var(--border-default)}
.sx-ticker-tile img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}

/* LEAP 2026 band — gradient hairline in the event's own colours, white mark on dark */
.sx-leap{display:inline-flex;align-items:center;gap:14px;padding:8px 16px 8px 14px;border-radius:999px;text-decoration:none;border:1px solid transparent;background:linear-gradient(var(--surface-raised),var(--surface-raised)) padding-box,linear-gradient(100deg,rgba(235,61,247,.6),rgba(115,250,253,.6)) border-box;box-shadow:0 0 34px -14px rgba(115,250,253,.5);transition:box-shadow var(--d-base) linear,transform var(--d-base) linear}
.sx-leap:hover{text-decoration:none;box-shadow:0 0 40px -10px rgba(235,61,247,.55)}
.sx-leap-mark{display:inline-flex;align-items:center;gap:8px}
.sx-leap-mark img{height:24px;width:auto;display:block}
.sx-leap-mark .sx-micro{color:#73fafd;letter-spacing:.06em}
.sx-leap-rule{width:1px;height:18px;background:var(--border-strong)}
.sx-leap-copy{display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap}
.sx-leap-copy .sx-small{color:var(--text-strong)}
.sx-leap-copy .sx-caption{color:var(--text-quiet);text-transform:none}
.sx-leap-go{color:var(--text-quiet);font-size:var(--t-caption);transition:color var(--d-fast) linear,transform var(--d-fast) linear}
.sx-leap:hover .sx-leap-go{color:var(--text-strong);transform:translateX(2px)}
.sx-narrow .sx-leap{gap:10px;padding:7px 13px 7px 11px}
.sx-narrow .sx-leap-mark img{height:17px}
.sx-narrow .sx-leap-copy{flex-direction:column;gap:1px;align-items:flex-start}

/* Site search: header trigger + overlay */
.sx-search-trigger{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 11px;border:1px solid var(--border-default);border-radius:var(--r-control);background:transparent;color:var(--text-quiet);font-family:var(--font-body);font-size:var(--t-small);cursor:pointer;transition:border-color var(--d-fast) linear,color var(--d-fast) linear}
.sx-search-trigger:hover{border-color:var(--border-strong);color:var(--text-body)}
.sx-search-trigger .k{margin-left:14px;padding:2px 6px;border:1px solid var(--border-default);border-radius:4px;font-size:var(--t-caption);color:var(--text-quiet)}
.sx-search-trigger.icon{width:40px;padding:0;justify-content:center}
.sx-search-scrim{position:fixed;inset:0;z-index:120;background:rgba(4,6,13,.72);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 20px 20px}
.sx-search-panel{width:100%;max-width:640px;background:var(--surface-overlay);border:1px solid var(--border-strong);border-radius:var(--r-card);box-shadow:var(--shadow-overlay);overflow:hidden}
.sx-search-field{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--border-default)}
.sx-search-field input{flex:1;height:54px;background:none;border:0;outline:none;color:var(--text-strong);font-family:var(--font-body);font-size:var(--t-body)}
.sx-search-field input::placeholder{color:var(--text-quiet)}
.sx-search-list{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto}
.sx-search-list a{display:flex;align-items:baseline;gap:12px;padding:10px 12px;border-radius:var(--r-control);text-decoration:none}
.sx-search-list a:hover{text-decoration:none}
.sx-search-list li[data-sel="1"] a{background:var(--surface-raised)}
.sx-search-list .t{color:var(--text-strong);font-size:var(--t-small);display:block}
.sx-search-list .s{color:var(--text-quiet);font-size:var(--t-caption);display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-search-list .k{flex-shrink:0;font-family:var(--font-mono);font-size:var(--t-caption);color:var(--text-quiet)}
.sx-search-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--border-default);font-family:var(--font-body);font-size:var(--t-caption);color:var(--text-quiet)}
.phone .sx-search-scrim{left:50%!important;right:auto!important;width:390px!important;transform:translateX(-50%);padding:80px 14px 14px}

/* Partner logo tiles — a tonal step and a top edge-light, the way a raised panel catches room light */
.sx-partner-tile{position:relative;display:flex;align-items:center;justify-content:center;padding:0 18px;border:1px solid var(--border-default);border-radius:var(--r-card);background:radial-gradient(120% 140% at 50% 120%,rgba(61,139,242,.14),transparent 62%),linear-gradient(180deg,var(--surface-raised),var(--surface-card));box-shadow:inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden;transition:border-color var(--d-base) linear,box-shadow var(--d-base) linear}
.sx-partner-tile::after{content:"";position:absolute;left:16%;right:16%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--sx-accent),transparent);opacity:.5;transition:opacity var(--d-base) linear}
.sx-partner-tile:hover{border-color:var(--sx-accent-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 30px -12px rgba(61,139,242,.6)}
.sx-partner-tile:hover::after{opacity:1}
.sx-partner-tile img{position:relative;transition:filter var(--d-base) linear}
.sx-partner-tile:hover img{filter:drop-shadow(0 0 16px rgba(61,139,242,.55))}

/* "open the run" affordance — mono label with a hairline arrow well that fills on hover */
.sx-open-run{display:inline-flex;align-items:center;gap:9px;color:var(--text-accent)}
.sx-open-run-go{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--sx-accent-line);border-radius:999px;font-size:var(--t-caption);line-height:1;transition:background var(--d-fast) linear,border-color var(--d-fast) linear,transform var(--d-fast) linear}
a:hover .sx-open-run-go{background:color-mix(in oklab,var(--sx-accent) 18%,transparent);border-color:var(--sx-accent);transform:translateX(2px)}
/* section-closing "where to next" pair */
.sx-next{display:grid;gap:1px;background:var(--border-default);border:1px solid var(--border-default);border-radius:var(--r-card);overflow:hidden}
.sx-next-item{display:flex;align-items:center;justify-content:center;gap:20px;padding:20px;background:var(--bg-page);text-decoration:none;transition:background var(--d-fast) linear}
.sx-next-item:hover{background:var(--surface-card);text-decoration:none}
.sx-next-item .sx-micro{color:var(--text-quiet)}
.sx-next-item .sx-small{color:var(--text-body)}
.sx-next-btn{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;height:40px;padding:0 16px;border-radius:var(--r-control);border:1px solid var(--border-strong);color:var(--text-strong);font-family:var(--font-body);font-size:var(--t-small);white-space:nowrap;transition:border-color var(--d-fast) linear,background var(--d-fast) linear,color var(--d-fast) linear}
.sx-next-btn span{font-size:var(--t-caption);transition:transform var(--d-fast) linear}
.sx-next-item:hover .sx-next-btn{border-color:var(--sx-accent);color:var(--text-strong)}
.sx-next-item:hover .sx-next-btn span{transform:translateX(2px)}
.sx-next-btn.accent{background:var(--sx-accent);border-color:var(--sx-accent);color:#fff}
.sx-next-item:hover .sx-next-btn.accent{background:var(--sx-accent-hover);border-color:var(--sx-accent-hover)}
.sx-narrow .sx-next-item{flex-direction:column;align-items:stretch;gap:12px}
.sx-narrow .sx-next-btn{justify-content:center}

/* Six-stage chain — circular nodes on one rail, each with its own hue */
.sx-chain{display:flex;align-items:flex-start;gap:0}
.sx-chain-link{flex:0 1 46px;min-width:16px;margin-top:38px;display:block}
.sx-chain-node{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px}
.sx-chain-disc{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:999px;border:1px solid var(--border-default);background:radial-gradient(120% 120% at 50% 0%,var(--surface-raised),var(--surface-card));color:var(--text-quiet);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);transition:border-color var(--d-base) linear,color var(--d-base) linear,box-shadow var(--d-base) linear}
.sx-chain-node:hover .sx-chain-disc{border-color:var(--hue);color:var(--hue);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 34px -10px var(--hue)}
.sx-chain-n{position:absolute;top:-7px;right:-4px;padding:1px 6px;border-radius:999px;background:var(--bg-page);border:1px solid var(--border-default);color:var(--text-quiet);transition:color var(--d-base) linear,border-color var(--d-base) linear}
.sx-chain-node:hover .sx-chain-n{color:var(--hue);border-color:var(--hue)}
.sx-chain-copy{min-width:0}
.sx-chain-title{margin:14px 0 0;color:var(--text-strong)}
.sx-chain-detail{margin:7px 0 0;color:var(--text-quiet);text-transform:none;letter-spacing:0;font-family:var(--font-body);text-wrap:pretty}
.sx-chain.is-mobile{flex-direction:column;align-items:stretch}
.sx-chain.is-mobile .sx-chain-node{flex-direction:row;align-items:center;text-align:left;gap:14px;padding:0}
.sx-chain.is-mobile .sx-chain-disc{width:56px;height:56px;flex-shrink:0}
.sx-chain.is-mobile .sx-chain-disc svg{width:24px;height:24px}
.sx-chain.is-mobile .sx-chain-title{margin:0}
.sx-chain.is-mobile .sx-chain-detail{margin:3px 0 0}
.sx-chain.is-mobile .sx-chain-link{flex:none;display:block;width:14px;height:26px;margin:6px 0 6px 21px}
.sx-chain.is-mobile .sx-chain-link svg{display:block;width:14px;height:26px;transform:none}

/* Arc chain — nodes lit in their own hue at rest, labels on a common baseline */
.sx-arc-box-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-bottom:1px solid var(--border-default);background:var(--surface-raised)}
.sx-arc-box-head .sx-micro{color:var(--text-quiet)}
.sx-arc-caps{display:flex;gap:14px}
.sx-arc-caps .accent{color:var(--text-accent)}
.sx-arc{position:relative;margin:8px 0 0}
.sx-arc-node{position:absolute;transform:translate(-50%,-50px);display:flex;flex-direction:column;align-items:center}
.sx-arc-label{text-align:center;margin-top:14px}
.sx-arc-label .sx-chain-title{margin:0;color:var(--text-strong);font-family:var(--font-display);font-size:var(--t-h3);letter-spacing:-.01em}
.sx-arc-label .sx-chain-detail{margin:8px 0 0}
.sx-arc-node .sx-chain-disc{width:100px;height:100px;flex-shrink:0}
.sx-chain-disc{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:999px;border:1px solid color-mix(in oklab,var(--hue) 55%,transparent);background:radial-gradient(120% 120% at 50% 15%,color-mix(in oklab,var(--hue) 20%,var(--surface-raised)),var(--surface-card));color:var(--hue);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 26px -14px var(--hue);transition:border-color var(--d-base) linear,box-shadow var(--d-base) linear,background var(--d-base) linear}
.sx-arc-node:hover .sx-chain-disc,.sx-chain-node:hover .sx-chain-disc{border-color:var(--hue);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 40px -8px var(--hue)}
.sx-chain-n{position:absolute;top:-8px;right:-4px;padding:1px 6px;border-radius:999px;background:var(--bg-page);border:1px solid color-mix(in oklab,var(--hue) 45%,transparent);color:var(--hue)}

/* Sector tiles — image with the name set on it, two rows rather than one thin strip */
.sx-sectors{display:grid;gap:14px}
.sx-sector{position:relative;display:block;overflow:hidden;border-radius:var(--r-card);border:1px solid var(--border-default);text-decoration:none;transition:border-color var(--d-base) linear}
.sx-sector:hover{border-color:var(--border-strong);text-decoration:none}
.sx-sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity var(--d-base) linear,transform var(--d-slow,450ms) var(--e-soft)}
.sx-sector:hover img{opacity:.8;transform:scale(1.03)}
.sx-sector-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,9,18,.1),rgba(7,9,18,.88))}
.sx-sector-name{position:absolute;left:16px;bottom:14px;color:var(--sx-ink,#f5f7fa);font-family:var(--font-display);font-size:var(--t-h3);letter-spacing:-.01em}
.sx-narrow .sx-sectors{gap:10px}
.sx-narrow .sx-sector-name{left:12px;bottom:10px;font-size:var(--t-small)}

/* Ambient corner light — once at the top of a page, once at its close */
.sx-corner-glows{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sx-corner-glows::before,.sx-corner-glows::after{content:"";position:absolute;top:-190px;width:600px;height:600px;border-radius:999px;filter:blur(90px);opacity:.5;background:radial-gradient(circle,rgba(61,139,242,.55),transparent 62%)}
.sx-corner-glows::before{left:-190px}
.sx-corner-glows::after{right:-190px}
.sx-narrow .sx-corner-glows::before,.sx-narrow .sx-corner-glows::after{top:-140px;width:400px;height:400px;filter:blur(70px)}
.sx-narrow .sx-corner-glows::before{left:-150px}
.sx-narrow .sx-corner-glows::after{right:-150px}
.sx-lit-band{position:relative;overflow:hidden;isolation:isolate}
.sx-lit-band::before,.sx-lit-band::after{content:"";position:absolute;bottom:-230px;width:560px;height:560px;border-radius:999px;filter:blur(95px);opacity:.32;background:radial-gradient(circle,rgba(61,139,242,.5),transparent 62%);pointer-events:none;z-index:-1}
.sx-lit-band::before{left:-180px}
.sx-lit-band::after{right:-180px}
.sx-narrow .sx-lit-band::before,.sx-narrow .sx-lit-band::after{bottom:-180px;width:380px;height:380px;filter:blur(70px)}

/* Practice figures — every animation is a fixed cycle on CSS keyframes, and every
   one has a complete static state under prefers-reduced-motion. */
@keyframes pf-step{0%,4%{opacity:0;transform:translateX(-6px)}12%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes pf-playhead{0%{transform:translateY(var(--y0));opacity:0}6%{opacity:1}88%{transform:translateY(var(--y1));opacity:1}100%{transform:translateY(var(--y1));opacity:0}}
@keyframes pf-region{0%,6%{opacity:0}14%,60%{opacity:1}72%,100%{opacity:.25}}
@keyframes pf-field{0%,10%{opacity:0;transform:translateY(4px)}20%,94%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes pf-dash{to{stroke-dashoffset:0}}
@keyframes pf-band{0%,42%{opacity:0}56%,92%{opacity:1}100%{opacity:0}}
@keyframes pf-tip{0%,60%{opacity:0}70%,92%{opacity:1}100%{opacity:0}}
@keyframes pf-belt{0%{opacity:.15}50%{opacity:.7}100%{opacity:.15}}
@keyframes pf-item{0%{transform:translateX(-50px)}100%{transform:translateX(420px)}}
@keyframes pf-box{0%,26%{opacity:0}32%,84%{opacity:1}100%{opacity:0}}
@keyframes pf-packet{0%{transform:translateX(0);opacity:0}8%{opacity:1}36%{transform:translateX(88px);opacity:1}40%{opacity:0}100%{opacity:0}}
@keyframes pf-link-down{0%,44%{opacity:0}50%,74%{opacity:1}80%,100%{opacity:0}}
@keyframes pf-buffer{0%,46%{opacity:0}54%,76%{opacity:1}84%,100%{opacity:0}}
@keyframes pf-load{0%{transform:translateY(0);opacity:0}10%{opacity:1}62%{transform:translateY(-48px);opacity:1}70%{opacity:0}100%{opacity:0}}
@keyframes pf-command{0%,64%{opacity:0;transform:translateY(0)}72%{opacity:1}94%{opacity:1;transform:translateY(54px)}100%{opacity:0;transform:translateY(54px)}}
@keyframes pf-valve{0%,8%{opacity:0}16%,44%{opacity:1}56%,100%{opacity:0}}
@keyframes pf-row{0%,4%{opacity:0;transform:translateY(5px)}14%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes pf-flow{0%{transform:translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(var(--span));opacity:0}}
@keyframes pf-stage{0%,6%{stroke:var(--border-strong)}14%,86%{stroke:var(--sx-accent)}100%{stroke:var(--border-strong)}}
@keyframes pf-rollback{0%,58%{opacity:0}66%,90%{opacity:1}100%{opacity:0}}
@keyframes pf-tick{0%{opacity:.12}40%{opacity:.85}100%{opacity:.85}}
.pf-step{animation:pf-step 7s linear infinite}
.pf-playhead{animation:pf-playhead 7s linear infinite}
.pf-region{animation:pf-region 5.5s linear infinite}
.pf-field{animation:pf-field 5.5s linear infinite}
.pf-draw-a{stroke-dasharray:620;stroke-dashoffset:620;animation:pf-dash 3.4s var(--e-quart,cubic-bezier(.16,1,.3,1)) infinite alternate}
.pf-draw-b{stroke-dasharray:240;stroke-dashoffset:240;animation:pf-dash 2.4s linear 1.6s infinite alternate}
.pf-draw-slow{stroke-dasharray:900;stroke-dashoffset:900;animation:pf-dash 7s linear infinite alternate}
.pf-band{animation:pf-band 6s linear infinite}
.pf-tip{animation:pf-tip 6s linear infinite}
.pf-belt{animation:pf-belt 1.4s linear infinite}
.pf-item{animation:pf-item 6.3s linear infinite}
.pf-box{animation:pf-box 6.3s linear infinite}
.pf-packet{animation:pf-packet 3.2s linear infinite}
.pf-link-down{animation:pf-link-down 8s linear infinite}
.pf-buffer{animation:pf-buffer 8s linear infinite}
.pf-load{animation:pf-load 5.5s linear infinite}
.pf-command{animation:pf-command 5.5s linear infinite}
.pf-valve{animation:pf-valve 7.2s linear infinite}
.pf-row{animation:pf-row 6.5s linear infinite}
.pf-flow{animation:pf-flow 2.4s linear infinite;--span:196px}
.pf-stage{animation:pf-stage 5s linear infinite}
.pf-rollback{animation:pf-rollback 5s linear infinite}
.pf-tick{animation:pf-tick 3s linear infinite alternate}
@media (prefers-reduced-motion: reduce){
  .pf-step,.pf-region,.pf-field,.pf-band,.pf-tip,.pf-belt,.pf-box,.pf-row,.pf-stage,.pf-tick,.pf-valve,.pf-buffer,.pf-link-down{animation:none;opacity:1}
  .pf-playhead,.pf-item,.pf-packet,.pf-load,.pf-command,.pf-flow,.pf-rollback{animation:none;opacity:0}
  .pf-draw-a,.pf-draw-b,.pf-draw-slow{animation:none;stroke-dashoffset:0}
}

@keyframes pf-sweep{0%{transform:translateX(0);opacity:.25}45%{opacity:.9}100%{transform:translateX(96px);opacity:.25}}
.pf-sweep{animation:pf-sweep 4.2s var(--e-soft,ease-in-out) infinite alternate}
@media (prefers-reduced-motion: reduce){.pf-sweep{animation:none;opacity:.6}}

/* Practice dome — three bands radiating from the mark */
.sx-dome{position:relative}
.sx-dome-edge{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:pf-dash 1.2s var(--e-quart,cubic-bezier(.16,1,.3,1)) both;animation-delay:inherit}
.sx-dome-band,.sx-dome-arrow{animation:pf-fadein .6s linear both}
@keyframes pf-fadein{from{opacity:0}to{opacity:1}}
.sx-dome-chip{position:absolute;transform:translate(-50%,-50%);width:max-content;display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:999px;border:1px solid color-mix(in oklab,var(--hue) 55%,transparent);background:linear-gradient(180deg,color-mix(in oklab,var(--hue) 12%,var(--surface-raised)),var(--surface-card));color:var(--hue);text-decoration:none;box-shadow:0 0 24px -14px var(--hue);transition:border-color var(--d-fast) linear,box-shadow var(--d-fast) linear,background var(--d-fast) linear}
.sx-dome-chip span{color:var(--text-strong);font-size:var(--t-micro);line-height:1.15;white-space:nowrap}
.sx-dome-chip svg{flex:0 0 auto}
.sx-dome-chip:hover{text-decoration:none;border-color:var(--hue);box-shadow:0 0 30px -8px var(--hue);background:linear-gradient(180deg,color-mix(in oklab,var(--hue) 22%,var(--surface-raised)),var(--surface-card))}
.sx-dome-chip.is-static{position:static;transform:none;width:auto}
.sx-dome-core{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:5px}
.sx-dome-core img{width:40px;height:40px;object-fit:contain;display:block;}
.sx-dome-core span{font-family:var(--font-display);font-size:var(--t-small);color:var(--text-strong);letter-spacing:-.01em}
.sx-dome-key{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:20px;font-family:var(--font-body);font-size:var(--t-caption);color:var(--text-body)}
.sx-dome-key li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sx-dome-key span{width:9px;height:9px;border-radius:2px;display:block}
.sx-dome-stack{display:grid;justify-items:center;gap:0}
.sx-dome-row{width:100%;border:1px solid color-mix(in oklab,var(--hue) 40%,transparent);border-radius:var(--r-card);padding:12px 12px 14px;background:linear-gradient(180deg,color-mix(in oklab,var(--hue) 8%,var(--surface-card)),var(--bg-page))}
.sx-dome-row-name{margin:0 0 10px;font-family:var(--font-body);font-size:var(--t-caption);font-weight:500;color:var(--hue);letter-spacing:0}
.sx-dome-row-chips{display:flex;flex-wrap:wrap;gap:8px}
.sx-dome-stack .sx-dome-chip{padding:7px 10px;gap:7px}
.sx-dome-stack .sx-dome-chip span{font-size:var(--t-caption)}
.sx-dome-flow{display:block;padding:7px 0;font-family:var(--font-body);font-size:var(--t-caption);color:var(--text-quiet)}
.sx-dome-flow::after{content:" \2193";color:var(--text-quiet)}
.sx-dome-stack .sx-dome-core{position:static;transform:none;margin-top:2px}
@media (prefers-reduced-motion: reduce){.sx-dome-edge,.sx-dome-band,.sx-dome-arrow{animation:none;opacity:1;stroke-dashoffset:0}}

/* Long-form practice figures — one 20s cycle in six phases: elements arrive in
   order and stay until the cycle resets. pf-r* reveals, pf-m* sends a packet. */
@keyframes pf-r1{0%,0%{opacity:0}3%,97%{opacity:1}100%{opacity:0}}
@keyframes pf-m1{0%,1%{opacity:0;transform:translate(0,0)}2%{opacity:1;transform:translate(0,0)}7%{opacity:1;transform:translate(var(--dx,60px),var(--dy,0px))}9%,100%{opacity:0;transform:translate(var(--dx,60px),var(--dy,0px))}}
.pf-r1{animation:pf-r1 18s linear infinite}.pf-m1 > *{animation:pf-m1 18s linear infinite}
@keyframes pf-r2{0%,8%{opacity:0}11%,97%{opacity:1}100%{opacity:0}}
@keyframes pf-m2{0%,9%{opacity:0;transform:translate(0,0)}10%{opacity:1;transform:translate(0,0)}15%{opacity:1;transform:translate(var(--dx,60px),var(--dy,0px))}17%,100%{opacity:0;transform:translate(var(--dx,60px),var(--dy,0px))}}
.pf-r2{animation:pf-r2 18s linear infinite}.pf-m2 > *{animation:pf-m2 18s linear infinite}
@keyframes pf-r3{0%,16%{opacity:0}19%,97%{opacity:1}100%{opacity:0}}
@keyframes pf-m3{0%,17%{opacity:0;transform:translate(0,0)}18%{opacity:1;transform:translate(0,0)}23%{opacity:1;transform:translate(var(--dx,60px),var(--dy,0px))}25%,100%{opacity:0;transform:translate(var(--dx,60px),var(--dy,0px))}}
.pf-r3{animation:pf-r3 18s linear infinite}.pf-m3 > *{animation:pf-m3 18s linear infinite}
@keyframes pf-r4{0%,24%{opacity:0}27%,97%{opacity:1}100%{opacity:0}}
@keyframes pf-m4{0%,25%{opacity:0;transform:translate(0,0)}26%{opacity:1;transform:translate(0,0)}31%{opacity:1;transform:translate(var(--dx,60px),var(--dy,0px))}33%,100%{opacity:0;transform:translate(var(--dx,60px),var(--dy,0px))}}
.pf-r4{animation:pf-r4 18s linear infinite}.pf-m4 > *{animation:pf-m4 18s linear infinite}
@keyframes pf-r5{0%,32%{opacity:0}35%,97%{opacity:1}100%{opacity:0}}
@keyframes pf-m5{0%,33%{opacity:0;transform:translate(0,0)}34%{opacity:1;transform:translate(0,0)}39%{opacity:1;transform:translate(var(--dx,60px),var(--dy,0px))}41%,100%{opacity:0;transform:translate(var(--dx,60px),var(--dy,0px))}}
.pf-r5{animation:pf-r5 18s linear infinite}.pf-m5 > *{animation:pf-m5 18s linear infinite}
@keyframes pf-r6{0%,40%{opacity:0}43%,97%{opacity:1}100%{opacity:0}}
@keyframes pf-m6{0%,41%{opacity:0;transform:translate(0,0)}42%{opacity:1;transform:translate(0,0)}47%{opacity:1;transform:translate(var(--dx,60px),var(--dy,0px))}49%,100%{opacity:0;transform:translate(var(--dx,60px),var(--dy,0px))}}
.pf-r6{animation:pf-r6 18s linear infinite}.pf-m6 > *{animation:pf-m6 18s linear infinite}
@media (prefers-reduced-motion: reduce){.pf-r1,.pf-r2,.pf-r3,.pf-r4,.pf-r5,.pf-r6{animation:none;opacity:1}.pf-m1 > *,.pf-m2 > *,.pf-m3 > *,.pf-m4 > *,.pf-m5 > *,.pf-m6 > *{animation:none;opacity:0}}

/* Solutions filter rail — one instrument line, not a chip cloud */
.sx-filter-rail{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border:1px solid var(--border-strong);border-radius:var(--r-card);background:var(--surface-card);padding:10px 14px}
.sx-filter-tabs{display:flex;gap:6px;flex-wrap:wrap}
.sx-ftab{appearance:none;background:transparent;border:1px solid transparent;border-radius:var(--r-control);padding:7px 12px;cursor:pointer;color:var(--text-body);font-family:var(--font-body);font-size:var(--t-small);letter-spacing:-.005em;display:flex;align-items:center;gap:7px;transition:all .16s var(--e-soft)}
.sx-ftab .sx-num{font-family:var(--font-body);font-size:var(--t-caption);opacity:.7;padding:1px 6px;border-radius:999px;background:var(--surface-raised)}
.sx-ftab:hover{color:var(--text-strong);border-color:var(--border-strong)}
.sx-ftab.is-on{color:#0a1020;background:var(--sx-accent);border-color:var(--sx-accent);font-weight:500}
.sx-ftab.is-on .sx-num{background:rgba(10,16,32,.18);color:#0a1020;opacity:1}
.sx-filter-right{display:flex;align-items:center;gap:16px}
.sx-ftog{appearance:none;background:none;border:1px solid var(--border-strong);border-radius:var(--r-control);padding:6px 11px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--text-body);font-family:var(--font-body);font-size:var(--t-small);transition:all .16s var(--e-soft)}
.sx-ftog-dot{width:7px;height:7px;border-radius:999px;border:1px solid var(--text-quiet);transition:all .16s var(--e-soft)}
.sx-ftog:hover{border-color:var(--text-quiet)}
.sx-ftog.is-on{color:var(--text-accent);border-color:var(--sx-accent);background:color-mix(in oklab,var(--sx-accent) 12%,transparent)}
.sx-ftog.is-on .sx-ftog-dot{background:var(--sx-accent);border-color:var(--sx-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--sx-accent) 22%,transparent)}
.sx-fsearch{display:flex;align-items:center;color:var(--text-quiet)}
.sx-fsearch input{appearance:none;background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--r-control);padding:7px 11px;width:190px;color:var(--text-strong);font-family:var(--font-body);font-size:var(--t-small);outline:none;transition:border-color .16s var(--e-soft)}
.sx-fsearch input::placeholder{color:var(--text-quiet)}
.sx-fsearch input:focus{border-color:var(--sx-accent)}
.sx-narrow .sx-filter-rail{align-items:flex-start;flex-direction:column;gap:14px}
.sx-narrow .sx-filter-right{width:100%;justify-content:space-between}
.sx-narrow .sx-fsearch input{width:132px}

@keyframes sx-fade{from{opacity:0}to{opacity:1}}
@keyframes sx-rise{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}

/* continue-to-catalogue affordance */
.sx-jump-row{display:flex;align-items:baseline;gap:26px;flex-wrap:wrap;margin-top:30px}
.sx-jump-main{display:inline-flex;align-items:center;gap:10px;color:var(--text-strong);font-family:var(--font-display);font-size:var(--t-h2-sm);line-height:var(--t-h2-sm-lh);letter-spacing:var(--t-h2-sm-tr);text-decoration:none;padding-bottom:4px;border-bottom:1px solid var(--sx-accent);transition:color .16s var(--e-soft)}
.sx-jump-main>span{color:var(--sx-accent);font-size:var(--t-h3);transition:transform .22s var(--e-soft)}
.sx-jump-main:hover>span{transform:translateY(4px)}
.sx-jump-alt{color:var(--text-quiet);font-size:var(--t-small);text-decoration:none}
.sx-jump-alt:hover{color:var(--text-body)}
.sx-narrow .sx-jump-row{margin-top:22px;gap:14px}
.sx-narrow .sx-jump-main{font-size:var(--t-h3)}
/* hero meta cells that lead somewhere */
.sx-meta-cell.is-link{position:relative;cursor:pointer;transition:background .18s var(--e-soft)}
.sx-meta-cell.is-link a{color:var(--text-strong);text-decoration:none}
.sx-meta-cell.is-link a::after{content:"";position:absolute;inset:0;z-index:1}
.sx-meta-cell.is-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sx-accent);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--e-soft)}
.sx-meta-cell.is-link:hover{background:var(--surface-card)!important}
.sx-meta-cell.is-link:hover::after{transform:scaleX(1)}
.sx-meta-arrow{color:var(--sx-accent);font-size:var(--t-caption);animation:sx-nudge 2.4s var(--e-soft) infinite}
@keyframes sx-nudge{0%,72%,100%{transform:translateY(0);opacity:.75}84%{transform:translateY(3px);opacity:1}}



/* ── solutions register: a datasheet, not a card grid ─────────────────── */
.sx-reg-group{margin-top:38px}
.sx-reg-head{display:flex;align-items:baseline;gap:12px;margin:0 0 2px;padding-bottom:9px;border-bottom:1px solid var(--g);font-family:var(--font-display);font-size:var(--t-h3);font-weight:600;letter-spacing:-.016em;color:var(--text-strong)}
.sx-reg-count{font-family:var(--font-mono);font-size:var(--t-caption);color:var(--text-quiet);letter-spacing:0}
.sx-reg{display:grid}
.sx-reg-row{display:grid;grid-template-columns:34px 22px minmax(0,15rem) minmax(0,1fr) 11rem 5.6rem;align-items:baseline;gap:16px;padding:13px 10px 13px 0;border-bottom:1px solid var(--border-default);cursor:pointer;position:relative;transition:background .12s linear}
.sx-reg-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--g);opacity:0;transition:opacity .12s linear}
.sx-reg-row:hover{background:var(--surface-card)}
.sx-reg-row:hover::before{opacity:1}
.sx-reg-row:focus-visible{outline:1px solid var(--g);outline-offset:-1px}
.sx-reg-n{font-family:var(--font-mono);font-size:var(--t-caption);color:var(--text-quiet);padding-left:10px}
.sx-reg-icon{align-self:center;line-height:0;opacity:.85}
.sx-reg-name{color:var(--text-strong);font-family:var(--font-display);font-size:var(--t-body);letter-spacing:-.01em}
.sx-reg-line{color:var(--text-body);font-size:var(--t-small);line-height:1.45}
.sx-reg-practice{color:var(--text-quiet);font-size:var(--t-micro)}
.sx-reg-live{font-family:var(--font-mono);font-size:var(--t-caption);color:var(--text-quiet);text-align:right;letter-spacing:0}
.sx-reg-live b{color:var(--g);font-weight:400}
.sx-reg-dots{display:inline-flex;gap:2px;margin-right:6px;vertical-align:1px}
.sx-reg-dots i{width:4px;height:4px;background:var(--g)}
.sx-reg-summary{max-width:42rem;margin:22px 0 0;font-size:var(--t-small);color:var(--text-quiet)}
.sx-reg-summary b{color:var(--text-strong);font-weight:400}
.sx-reg-live em{font-style:normal;opacity:.6}
.sx-narrow .sx-reg-row{grid-template-columns:26px 20px 1fr auto;gap:10px;padding:12px 0;align-items:center}
.sx-narrow .sx-reg-name{grid-column:3;font-size:var(--t-small)}
.sx-narrow .sx-reg-line{grid-column:3;grid-row:2;font-size:var(--t-micro)}
.sx-narrow .sx-reg-practice{display:none}
.sx-narrow .sx-reg-live{grid-column:4;grid-row:1}
.sx-narrow .sx-reg-n{padding-left:0}

/* ── detail sheet: enters from the edge, square, unblurred ────────────── */
.sx-sheet-scrim{position:fixed;inset:0;z-index:90;background:rgba(3,6,12,.62);display:flex;justify-content:flex-end;animation:sx-fade .14s linear}
.sx-sheet{display:flex;flex-direction:column;width:min(540px,100%);height:100%;background:var(--bg-page);border-left:1px solid var(--border-strong);animation:sx-slide-in .22s var(--e-soft)}
.sx-sheet-head{position:relative;padding:26px 30px 20px;border-bottom:1px solid var(--border-strong)}
.sx-sheet-eyebrow{display:flex;align-items:center;gap:9px;font-size:var(--t-caption);color:var(--text-quiet)}
.sx-sheet-swatch{width:8px;height:8px;background:var(--g)}
.sx-sheet-sep{opacity:.45}
.sx-sheet-head h2{margin:12px 0 0;font-family:var(--font-display);font-size:var(--t-h2-sm);line-height:var(--t-h2-sm-lh);letter-spacing:var(--t-h2-sm-tr);color:var(--text-strong);max-width:22ch}
.sx-sheet-x{position:absolute;top:24px;right:26px;appearance:none;background:none;border:0;padding:2px 0;cursor:pointer;color:var(--text-quiet);font-family:var(--font-body);font-size:var(--t-micro);border-bottom:1px solid var(--border-strong);transition:color .14s linear,border-color .14s linear}
.sx-sheet-x:hover{color:var(--text-strong);border-color:var(--text-strong)}
.sx-sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 30px 30px}
.sx-sheet-lead{margin:0;color:var(--text-strong);font-size:var(--t-body);line-height:1.5;text-wrap:pretty}
.sx-sheet-detail{margin:14px 0 0;color:var(--text-body);font-size:var(--t-small);line-height:1.6;text-wrap:pretty}
.sx-spec{display:grid;grid-template-columns:8.5rem 1fr;margin:26px 0 0;border-top:1px solid var(--border-default)}
.sx-spec dt{padding:10px 0;border-bottom:1px solid var(--border-default);color:var(--text-quiet);font-size:var(--t-micro)}
.sx-spec dd{margin:0;padding:10px 0;border-bottom:1px solid var(--border-default);color:var(--text-strong);font-size:var(--t-micro)}
.sx-sheet-block{margin-top:28px}
.sx-sheet-block h3{margin:0;font-family:var(--font-body);font-size:var(--t-micro);font-weight:500;letter-spacing:0;color:var(--text-quiet)}
.sx-sheet-proof{list-style:none;margin:12px 0 0;padding:0;display:grid;counter-reset:pf}
.sx-sheet-proof li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border-default)}
.sx-sheet-proof li>span{color:var(--text-quiet);font-size:var(--t-micro);text-align:right}
.sx-sheet-foot{display:flex;align-items:center;gap:22px;padding:18px 30px;border-top:1px solid var(--border-strong)}
.sx-sheet-cta{color:var(--text-strong);font-size:var(--t-small);text-decoration:none;border-bottom:1px solid var(--g);padding-bottom:3px}
.sx-sheet-alt{color:var(--text-quiet);font-size:var(--t-micro);text-decoration:none}
.sx-sheet-alt:hover{color:var(--text-body)}
.sx-narrow .sx-sheet{width:100%;border-left:0}
.sx-narrow .sx-sheet-head,.sx-narrow .sx-sheet-body,.sx-narrow .sx-sheet-foot{padding-left:18px;padding-right:18px}
.sx-narrow .sx-sheet-head h2{font-size:var(--t-h3)}
.sx-narrow .sx-spec{grid-template-columns:7rem 1fr}
@keyframes sx-slide-in{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}

/* Run-kit figures — the diagram builds in drawing order on one shared 20s
   cycle, so you watch the run propagate rather than reading a finished still. */
@keyframes rk-s1{0%,0.00%{opacity:0}2%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s2{0%,2.60%{opacity:0}4.6%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s3{0%,5.20%{opacity:0}7.2%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s4{0%,7.80%{opacity:0}9.8%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s5{0%,10.40%{opacity:0}12.4%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s6{0%,13.00%{opacity:0}15%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s7{0%,15.60%{opacity:0}17.6%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s8{0%,18.20%{opacity:0}20.2%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s9{0%,20.80%{opacity:0}22.8%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s10{0%,23.40%{opacity:0}25.4%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s11{0%,26.00%{opacity:0}28%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s12{0%,28.60%{opacity:0}30.6%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s13{0%,31.20%{opacity:0}33.2%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s14{0%,33.80%{opacity:0}35.8%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s15{0%,36.40%{opacity:0}38.4%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s16{0%,39.00%{opacity:0}41%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s17{0%,41.60%{opacity:0}43.6%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s18{0%,44.20%{opacity:0}46.2%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s19{0%,46.80%{opacity:0}48.8%,97%{opacity:1}100%{opacity:0}}
@keyframes rk-s20{0%,49.40%{opacity:0}51.4%,97%{opacity:1}100%{opacity:0}}
.rk-seq > *{animation:rk-s1 20s linear infinite}
.rk-seq > *:nth-child(2){animation-name:rk-s2}
.rk-seq > *:nth-child(3){animation-name:rk-s3}
.rk-seq > *:nth-child(4){animation-name:rk-s4}
.rk-seq > *:nth-child(5){animation-name:rk-s5}
.rk-seq > *:nth-child(6){animation-name:rk-s6}
.rk-seq > *:nth-child(7){animation-name:rk-s7}
.rk-seq > *:nth-child(8){animation-name:rk-s8}
.rk-seq > *:nth-child(9){animation-name:rk-s9}
.rk-seq > *:nth-child(10){animation-name:rk-s10}
.rk-seq > *:nth-child(11){animation-name:rk-s11}
.rk-seq > *:nth-child(12){animation-name:rk-s12}
.rk-seq > *:nth-child(13){animation-name:rk-s13}
.rk-seq > *:nth-child(14){animation-name:rk-s14}
.rk-seq > *:nth-child(15){animation-name:rk-s15}
.rk-seq > *:nth-child(16){animation-name:rk-s16}
.rk-seq > *:nth-child(17){animation-name:rk-s17}
.rk-seq > *:nth-child(18){animation-name:rk-s18}
.rk-seq > *:nth-child(19){animation-name:rk-s19}
.rk-seq > *:nth-child(20){animation-name:rk-s20}
.rk-seq > *:nth-child(n+21){animation-name:rk-s20}
@media (prefers-reduced-motion:reduce){.rk-seq > *{animation:none;opacity:1}}

/* The 25-run index scrolls in its own column so the figure stays in view */
.sx-run-index{position:sticky;top:88px;max-height:calc(100vh - 132px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;padding-right:6px;mask-image:linear-gradient(to bottom,transparent,black 18px,black calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,black 18px,black calc(100% - 18px),transparent)}
.sx-run-index::-webkit-scrollbar{width:6px}
.sx-run-index::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.sx-run-index::-webkit-scrollbar-track{background:transparent}

/* Tier stack: rectangular bands with data flowing up (telemetry) and down (commands). */
.sx-tier-gap{position:relative;height:34px}
.sx-tier-rail{position:absolute;top:-2px;bottom:-2px;width:1px;background:color-mix(in oklab,var(--hue) 40%,transparent)}
.sx-tier-rail.up{left:calc(50% - 26px)}
.sx-tier-rail.down{left:calc(50% + 26px)}
.sx-tier-pkt{position:absolute;left:-1.5px;width:4px;height:11px;border-radius:2px;background:var(--hue);box-shadow:0 0 8px color-mix(in oklab,var(--hue) 70%,transparent)}
.sx-tier-rail.up .sx-tier-pkt{animation:sx-pkt-up .78s linear infinite}
.sx-tier-rail.down .sx-tier-pkt{animation:sx-pkt-down .78s linear infinite}
@keyframes sx-pkt-up{from{top:100%;opacity:0}12%{opacity:1}88%{opacity:1}to{top:-11px;opacity:0}}
@keyframes sx-pkt-down{from{top:-11px;opacity:0}12%{opacity:1}88%{opacity:1}to{top:100%;opacity:0}}
.sx-tier-head{position:absolute;width:0;height:0;left:calc(50% - 30px);border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid color-mix(in oklab,var(--hue) 70%,transparent);top:-1px}
.sx-tier-head.d{left:calc(50% + 22px);border-bottom:none;border-top:5px solid color-mix(in oklab,var(--hue) 70%,transparent);top:auto;bottom:-1px}
.sx-tier-box{position:relative;overflow:hidden}
.sx-tier-scan{position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--hue) 22%,transparent),transparent);width:32%;animation:sx-scan 2.6s linear infinite;pointer-events:none}
@keyframes sx-scan{from{transform:translateX(-120%)}to{transform:translateX(420%)}}
@media (prefers-reduced-motion:reduce){.sx-tier-pkt,.sx-tier-scan{animation:none}.sx-tier-scan{display:none}.sx-tier-pkt{top:40%}}

/* Engagement track: one rail, six nodes, a pulse running its length. */
/* The rail is a 6px clip box with the 2px line drawn inside it, so the
   travelling pulse keeps its full height and still cannot leave the rail.
   Unclipped it reached a couple of hundred pixels past the viewport
   mid-sweep and flashed a horizontal scrollbar across the page. */
.sx-proc-rail{position:relative;height:6px;border-radius:6px;overflow:hidden;opacity:.55;
  background-image:linear-gradient(90deg,var(--sx-accent),var(--sx-field));
  background-size:100% 2px;background-position:0 50%;background-repeat:no-repeat}
.sx-proc-pulse{position:absolute;top:0;left:0;width:64px;height:6px;border-radius:6px;background:linear-gradient(90deg,transparent,#F5F7FA,transparent);opacity:.85;animation:sx-proc-run 3.4s cubic-bezier(.4,0,.6,1) infinite}
@keyframes sx-proc-run{from{transform:translateX(-64px)}to{transform:translateX(calc(100% + 90vw))}}
.sx-proc-node{width:13px;height:13px;border-radius:999px;background:var(--hue);box-shadow:0 0 0 4px color-mix(in oklab,var(--hue) 22%,transparent),0 0 12px color-mix(in oklab,var(--hue) 60%,transparent);display:block}
.sx-proc-drop{position:absolute;top:6px;left:6px;width:1px;height:18px;background:linear-gradient(180deg,color-mix(in oklab,var(--hue) 70%,transparent),transparent)}
.sx-proc-m .sx-proc-mrail{position:relative;display:block}
.sx-proc-m .sx-proc-mrail::before{content:"";position:absolute;left:6px;top:14px;bottom:-20px;width:1px;background:linear-gradient(180deg,color-mix(in oklab,var(--hue) 60%,transparent),transparent)}
.sx-proc-m li:last-child .sx-proc-mrail::before{display:none}
@media (prefers-reduced-motion:reduce){.sx-proc-pulse{animation:none;opacity:0}}

/* engagement ladder as selectable plans */
.sx-eng-a{appearance:none;display:block;height:100%;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--r-card);transition:border-color 150ms linear,background 150ms linear}
.sx-eng-a:hover{border-color:var(--border-strong)}
.sx-eng-a.is-picked{border-color:var(--sx-accent);background:color-mix(in oklab,var(--sx-accent) 5%,var(--surface-card))}
.sx-eng-a:focus-visible{outline:1px solid var(--sx-accent);outline-offset:2px}
.sx-eng-ctawrap{margin-top:auto;padding-top:18px;display:block}
.sx-eng-cta{padding:11px 14px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-strong);border-radius:var(--r-control);font-size:var(--t-micro);letter-spacing:.01em;color:var(--text-body);transition:background 150ms linear,border-color 150ms linear,color 150ms linear}
.sx-eng-a:hover .sx-eng-cta{border-color:var(--sx-accent);color:var(--text-accent)}
.sx-eng-a.is-picked .sx-eng-cta{background:var(--sx-accent);border-color:var(--sx-accent);color:#fff}

/* contact page */
.sx-ct-opt{appearance:none;cursor:pointer;text-align:left;display:grid;gap:5px;padding:14px 15px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--r-control);transition:border-color 150ms linear,background 150ms linear}
.sx-ct-opt:hover{border-color:var(--border-strong)}
.sx-ct-opt.is-on{border-color:var(--sx-accent);background:color-mix(in oklab,var(--sx-accent) 6%,var(--surface-card))}
.sx-ct-opt:focus-visible,.sx-ct-pill:focus-visible{outline:1px solid var(--sx-accent);outline-offset:2px}
.sx-ct-bar{width:5px;transition:background 150ms linear}
.sx-ct-pill{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:0;padding:9px 15px;font:inherit;font-size:var(--t-micro);color:var(--text-body);background:var(--surface-card);border:1px solid var(--border-default);border-radius:999px;transition:border-color 150ms linear,background 150ms linear,color 150ms linear}
.sx-ct-pill:hover{border-color:var(--border-strong);color:var(--text-strong)}
.sx-ct-pill.is-on{border-color:var(--sx-accent);background:var(--sx-accent-soft);color:var(--text-accent)}
.sx-ct-tick{width:0;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) scale(.6);opacity:0;margin-right:0;transition:width 150ms linear,margin-right 150ms linear,opacity 150ms linear,transform 250ms cubic-bezier(.2,.9,.2,1)}
.sx-ct-pill.is-on .sx-ct-tick{width:4px;opacity:1;margin-right:11px;transform:rotate(45deg) scale(1)}
/* the brief panel doubles as a progress instrument */
.sx-ct-track{display:block;height:2px;margin-top:10px;background:var(--border-default);border-radius:2px;overflow:hidden}
.sx-ct-fill{display:block;height:100%;background:var(--sx-accent);transition:width 450ms cubic-bezier(.16,1,.3,1)}
.sx-ct-mark{width:7px;height:7px;border-radius:50%;border:1px solid var(--border-strong);background:transparent;transform:translateY(-1px);transition:border-color 150ms linear,background 150ms linear,box-shadow 250ms linear}
.sx-ct-row.is-on .sx-ct-mark{border-color:var(--sx-accent);background:var(--sx-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--sx-accent) 22%,transparent)}
.sx-ct-row dd{transition:color 150ms linear}
/* next-steps rail: the dots light in sequence, once */
.sx-ct-step{display:grid;grid-template-columns:18px 1fr;gap:10px;position:relative}
.sx-ct-step:not(:last-child)::before{content:"";position:absolute;left:5px;top:14px;bottom:-16px;width:1px;background:var(--border-default)}
.sx-ct-dot{width:11px;height:11px;margin-top:4px;border-radius:50%;border:1px solid var(--sx-accent);background:color-mix(in oklab,var(--sx-accent) 30%,transparent);position:relative;z-index:1;animation:sx-ct-pulse 3.2s var(--d,0ms) ease-out infinite}
@keyframes sx-ct-pulse{0%,70%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--sx-accent) 0%,transparent)}12%{box-shadow:0 0 0 5px color-mix(in oklab,var(--sx-accent) 20%,transparent)}}
.sx-ct-in{animation:sx-ct-rise 450ms var(--d,0ms) cubic-bezier(.16,1,.3,1) both}
@keyframes sx-ct-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (min-width:900px){.sx-ct-rail{position:sticky;top:96px}}
.sx-narrow .sx-ct-rail{position:static}
@media (prefers-reduced-motion:reduce){.sx-ct-in{animation:none}.sx-ct-dot{animation:none}.sx-ct-fill{transition:none}}