/* Myelin site styles ("Myelinated"). Design notes and principles: DESIGN.md */

/* ---------- Fonts (self-hosted; licenses in /fonts/OFL*.txt) ---------- */
@font-face{font-family:Archivo;font-style:normal;font-weight:400 600;font-stretch:85% 100%;font-display:swap;src:url(/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:400 600;font-stretch:85% 100%;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Archivo's only ampersand is an Et-style glyph that reads as "Ɛ" at text sizes. This one-glyph face (Inter, OFL) covers U+0026 wherever Archivo is set; size-adjust matches Inter's cap height to Archivo's. */
@font-face{font-family:Amp;font-style:normal;font-weight:100 900;font-display:swap;size-adjust:94%;src:url(/fonts/amp-inter.woff2) format('woff2');unicode-range:U+0026}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400.woff2) format('woff2')}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500.woff2) format('woff2')}
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Liberation Sans'),local('Helvetica Neue'),local('Helvetica');size-adjust:98.8%;ascent-override:88.9%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:'Plex Fallback';src:local('Courier New'),local('Menlo');size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  --bg:#FAFBFC;--surface:#FFFFFF;--surface-2:#F0F3F7;--plate:#E6EBF2;
  --line:#D9DEE6;--line-strong:#B9C1CC;--control:#7C8795;
  --ink:#0B0F14;--text-2:#3B4350;--muted:#5E6775;
  --accent:#2563EA;--accent-deep:#1D4FD8;--wash:#E8EEFB;--edge-ink:#1F2630;
  --sans:Amp,Archivo,'Archivo Fallback',Arial,Helvetica,sans-serif;
  --mono:'Plex Mono','Plex Fallback','Courier New',monospace;
  --gap:clamp(16px,1.6vw,28px);--header-h:64px;
  /* The gutter rule sits 20px left of the hanging H2s; --hang is capped so the rule never comes within 48px of the viewport edge. */
  --ml:clamp(120px,11vw,200px);--mr:clamp(40px,4vw,72px);--hang:min(72px,calc(var(--ml) - 68px));
  /* How far a block must reach to touch the viewport's right edge (the frame stops growing at 1600px). */
  --bleed:calc(var(--mr) + max(0px,(100vw - 1600px) / 2));
  /* The logo's blues: sheath, then the three dots. Myelin segments use them; nothing else does. */
  --sheath:#DBE6FA;--sheath-line:#8EAAF4;--blue-2:#5B86EF;
  /* One myelin segment per tile: a pill (the sheath) with a gap at each end (the node), vertical and horizontal, unlit and lit. */
  --seg-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='76'%3E%3Crect x='1.5' y='6.5' width='9' height='63' rx='4.5' fill='%23fff' stroke='%23C9D2DE'/%3E%3C/svg%3E");
  --seg-v-lit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='76'%3E%3Crect x='1.5' y='6.5' width='9' height='63' rx='4.5' fill='%23DBE6FA' stroke='%238EAAF4'/%3E%3C/svg%3E");
  --seg-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='12'%3E%3Crect x='6.5' y='1.5' width='63' height='9' rx='4.5' fill='%23fff' stroke='%23C9D2DE'/%3E%3C/svg%3E");
  --seg-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='12'%3E%3Crect x='6.5' y='1.5' width='63' height='9' rx='4.5' fill='%23F6F8FE' stroke='%23B4C9F5'/%3E%3C/svg%3E");
  --seg-h-lit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='12'%3E%3Crect x='6.5' y='1.5' width='63' height='9' rx='4.5' fill='%23DBE6FA' stroke='%238EAAF4'/%3E%3C/svg%3E");
  --sec-pad:clamp(64px,8vw,128px);--sec-pad-s:clamp(48px,5vw,80px);
  --ease-out:cubic-bezier(.2,.7,.1,1);--ease-ui:cubic-bezier(.3,0,.2,1);
  /* Paper: sheets lie on the page instead of being outlined boxes. */
  --paper:0 0 0 1px rgba(11,15,20,.07),0 1px 2px rgba(11,15,20,.06),0 28px 56px -30px rgba(11,15,20,.26);
}
@media (max-width:1279px){:root{--ml:104px;--mr:40px;--hang:40px}}
@media (max-width:1023px){:root{--ml:48px;--mr:24px;--hang:0px}}
@media (max-width:767px){:root{--ml:20px;--mr:20px}}
@media (max-width:359px){:root{--ml:16px;--mr:16px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:88px}
[tabindex="-1"]:focus{outline:none}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.55;font-weight:400;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-wrap:break-word}
@media (min-width:1280px){body{font-size:17px}}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block}
svg.ico{display:inline-block;width:12px;height:12px;flex:none;vertical-align:-1px}
svg.ico--ret{width:10px;height:10px;vertical-align:0}
b,strong{font-weight:500}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--control);text-underline-offset:3px;transition:color 160ms var(--ease-ui),text-decoration-color 160ms var(--ease-ui)}
button{font:inherit;color:inherit}
::selection{background:var(--wash);color:var(--ink)}
:focus{outline:2px solid var(--accent-deep);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;font-size:14px;text-decoration:none}
.skip:focus{top:12px}
[hidden]{display:none!important}

/* ---------- Type ---------- */
.h1{font-weight:500;font-stretch:94%;font-size:clamp(34px,4.6vw + 6px,80px);line-height:.98;letter-spacing:-.03em}
.h1 span{display:block;text-wrap:balance}
.h2{font-weight:500;font-stretch:94%;font-size:clamp(30px,1.9vw + 14px,50px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.h3{font-weight:500;font-size:clamp(20px,.5vw + 15px,24px);line-height:1.25;letter-spacing:-.01em}
.hang{margin-left:calc(-1 * var(--hang))}
.lead{font-size:clamp(17px,.35vw + 14px,20px);line-height:1.45;text-wrap:pretty}
.small{font-size:14px;line-height:1.5}
.caption{font-size:13px;line-height:1.5;color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-weight:500;font-size:12px;line-height:1.3;letter-spacing:.02em}

/* ---------- Frame (asymmetric margins) ---------- */
.frame{max-width:1600px;margin-inline:auto;padding-left:var(--ml);padding-right:var(--mr);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);position:relative}
.frame>*{grid-column:1/-1;min-width:0}
.sec{position:relative;padding-top:var(--sec-pad)}
.sec--rule{border-top:0}
/* Right column: every right-hand block starts on column 7 (6 from 1024 to 1279, where the hero stack needs the width). */
.sec__cap,.sec__intro{grid-column:7/13;align-self:end}
.graph .h2,.agents-sec .h2,.how .h2{grid-column:1/7}
.sec__intro{display:flex;flex-direction:column;gap:10px}
.sec__intro .lead{color:var(--ink);max-width:40ch}
.sec__intro .small{max-width:46ch}
.sec__cap{max-width:50ch}
/* Heading nodes (≥1024): each section heading hangs off the axon (see .axon) by a short branch; the node fills once the signal has passed it. */
@media (min-width:1024px){
  .sec--ruled .h2.hang,.join .h2.hang{position:relative}
  .sec--ruled .h2.hang::before,.join .h2.hang::before{content:"";position:absolute;z-index:5;left:-27px;top:calc(.52em - 7px);width:14px;height:14px;border-radius:50%;background:var(--bg);border:1.5px solid var(--sheath-line);transition:background-color 240ms var(--ease-ui),border-color 240ms var(--ease-ui),transform 240ms var(--ease-out)}
  .sec--ruled .h2.hang::after,.join .h2.hang::after{content:"";position:absolute;left:-13px;top:calc(.52em - .5px);width:9px;height:1px;background:var(--sheath-line)}
  .is-lit .h2.hang::before{background:var(--accent);border-color:var(--accent)}
  .join .h2.hang::before{background:var(--surface-2)}
  .join.is-lit .h2.hang::before{background:var(--accent);transform:scale(1.3)}
}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:100;height:var(--header-h);background:var(--bg);border-bottom:1px solid transparent;transition:border-color 160ms var(--ease-ui)}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{height:100%;max-width:1600px;margin-inline:auto;padding-left:var(--ml);padding-right:var(--mr);display:flex;align-items:center;gap:24px}
.hdr__logo{display:block;color:var(--ink);flex:none;padding:6px 0}
.logo{height:30px;width:auto;aspect-ratio:1280/523;overflow:visible}
.logo--live .lp{transform-box:fill-box;transform-origin:center}
.motion .logo--live.fire .lp{animation:lg-fire 520ms var(--ease-out) both;animation-delay:calc(var(--k) * 75ms)}
.motion .logo--live.fire .lp--dot{animation-name:lg-dot}
@keyframes lg-fire{0%{opacity:.18}100%{opacity:1}}
@keyframes lg-dot{0%{opacity:.18;transform:scale(.55)}60%{transform:scale(1.12)}100%{opacity:1;transform:none}}
.hdr__nav{display:flex;gap:clamp(16px,2vw,32px);font-size:14px;margin-left:auto}
.hdr__nav a{text-decoration:none;color:var(--text-2);padding:6px 0 5px;border-bottom:1px solid transparent;transition:color 160ms var(--ease-ui),border-color 160ms var(--ease-ui)}
.hdr__nav a[aria-current=true]{color:var(--ink);border-bottom-color:var(--ink)}
.hdr__btn{margin-left:auto}
.hdr__nav+.hdr__btn{margin-left:8px}
.hdr__short{display:none}
@media (max-width:899px){.hdr__nav{display:none}.hdr__nav+.hdr__btn{margin-left:auto}}
@media (max-width:767px){:root{--header-h:56px}.logo{height:26px}}
@media (max-width:479px){.hdr__long{display:none}.hdr__short{display:inline}}

/* ---------- Buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--sans);font-weight:500;font-size:15px;font-stretch:100%;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color 160ms var(--ease-ui),border-color 160ms var(--ease-ui),color 160ms var(--ease-ui)}
.btn--sm{height:36px;padding:0 14px;font-size:14px}
.btn--ghost{background:transparent;border-color:var(--control);color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;text-decoration:none;color:var(--ink);padding:10px 0}
.tlink .ico{transition:transform 160ms var(--ease-ui)}
/* Hover styles only where a hover exists; on touch screens they would stick after a tap. */
@media (hover:hover){
  a:hover{color:var(--accent);text-decoration-color:var(--accent)}
  .hdr__nav a:hover{color:var(--ink)}
  .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn--ghost:hover{background:var(--surface-2);border-color:var(--ink);color:var(--ink)}
  .tlink:hover{color:var(--accent)}
  .tlink:hover .ico{transform:translateX(3px)}
  .ftr__links a:hover{text-decoration:underline}
}
@media (max-width:1023px){.hdr .btn--sm{height:40px}.founder a,.ftr__links a{padding-block:10px;margin-block:-10px}}

/* ---------- Sheets ---------- */
.sheet{background:var(--surface);border-radius:6px;box-shadow:var(--paper)}
.sheet__head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 16px;min-height:40px;padding:8px 24px;border-bottom:1px solid var(--line);color:var(--muted)}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:clamp(28px,5vh,72px);overflow:clip}
@supports not (overflow:clip){.hero{overflow:hidden}}
.hero__frame{row-gap:0;align-items:start}
.hero__copy{grid-column:1/7;position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(4px,2vh,28px)}
.hero__lead{margin-top:clamp(20px,2.4vw,32px);max-width:46ch;color:var(--text-2)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:clamp(20px,2.4vw,32px)}
.status{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2);margin-top:18px}
.status__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
/* The field: the graph the digest was built from. It bleeds to the viewport's right edge; the digest sits in flow below a band that holds the upper nodes, so the hero's height follows the digest. Layers (back to front): far graph, graph, wires, digest. main.js builds the SVG layers and moves them at different rates with scroll and pointer. */
.field{grid-column:7/13;position:relative;--band:clamp(210px,32vh,330px);padding-top:var(--band);padding-bottom:64px;margin-right:calc(-1 * var(--bleed))}
.fl-layer{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fl-far{z-index:0}.fl-near{z-index:1}.fl-wires{z-index:4}
.digest.sheet{border:1px solid var(--line-strong);border-radius:0;box-shadow:0 1px 0 var(--line-strong),0 28px 56px -32px rgba(11,15,20,.28)}
.digest{position:relative;z-index:3;width:min(440px,74%)}
.digest__link{color:var(--ink);text-decoration-color:var(--line-strong)}
.digest__lead{font-weight:500;font-size:clamp(17px,.45vw + 14px,20px);line-height:1.35;letter-spacing:-.01em;padding:20px 24px 6px;text-wrap:balance}
.digest__items{padding:6px 24px 20px}
.digest__items li{position:relative;padding:13px 0 12px;border-top:1px solid var(--line);transition:color 200ms var(--ease-ui)}
.digest__items li:first-child{border-top:0}
.digest__items p{font-size:15px;line-height:1.5;text-wrap:pretty}
.src{margin-top:6px;font-size:13px;line-height:1.4;color:var(--muted);display:flex;align-items:flex-start;gap:6px;transition:color 240ms var(--ease-ui)}
.src .ico{align-self:flex-start;margin-top:calc((1.4em - 10px) / 2);color:var(--control);transition:color 240ms var(--ease-ui)}
/* A claim lights when a signal from its node reaches it, or while its wire is hovered. */
.digest__items li.hit .src,.digest__items li.hit .src .ico{color:var(--accent-deep)}
/* The claim's node on the sheet's left edge, shown while its signal lands or its wire is hovered. */
.digest__items li::before{content:"";position:absolute;left:-28.5px;top:20px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2.5px var(--surface);opacity:0;transform:scale(.4);transition:opacity 200ms var(--ease-ui),transform 260ms var(--ease-out)}
.digest__items li.hit::before{opacity:1;transform:none}
@media (max-width:767px){.digest__items li::before{left:-22.5px}}
/* Graph marks: Company ■, Asset ●, Target ◆, Disease ◎, Trial (a myelin sheath). */
.fe{fill:none;stroke:#C3CBD6;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke 200ms var(--ease-ui)}
.fe--combo{stroke:var(--accent);stroke-width:1.25}
.ff circle{fill:#C9D1DC}.ff path{fill:none;stroke:#E1E6ED;stroke-width:1}
.fn{cursor:default}
.fn__in{transform-box:fill-box;transform-origin:center}
.fn .m{fill:var(--surface);stroke:var(--edge-ink);stroke-width:1.25;transition:fill 200ms var(--ease-ui),stroke 200ms var(--ease-ui)}
.fn--as .m{fill:var(--edge-ink);stroke:none}
.fn--as.is-focal .m{fill:var(--accent)}
.fn--tr .m{fill:var(--sheath);stroke:var(--sheath-line);stroke-width:1}
.fn--di .m2{fill:var(--edge-ink)}
.fn .hit{fill:transparent;stroke:none;pointer-events:all}
.fl{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.02em;fill:var(--muted);transition:fill 200ms var(--ease-ui)}
.fl--as{font-family:var(--sans);font-size:13px;letter-spacing:0;fill:var(--ink)}
.fr{opacity:0;transition:opacity 160ms var(--ease-ui)}
.fr rect{fill:var(--bg)}.fr text{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.02em;fill:var(--accent-deep)}
.fw{fill:none;stroke:var(--sheath-line);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke 200ms var(--ease-ui)}
.fw-a{fill:var(--surface);stroke:var(--sheath-line);stroke-width:1.25}
.sig{fill:var(--accent)}
.ring{fill:none;stroke:var(--accent);stroke-width:1.25;transform-box:fill-box;transform-origin:center;animation:ring 700ms var(--ease-out) forwards}
@keyframes ring{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(2.4)}}
/* Hover: a node isolates its links and names them; a wire lights its claim. */
.fl-near.is-hl .fe:not(.on),.fl-near.is-hl .fn:not(.on){opacity:.28}
.fl-near.is-hl .fe.on{stroke:var(--edge-ink)}
.fl-near.is-hl .fe--combo.on{stroke:var(--accent)}
.fl-near.is-hl .fr.on{opacity:1}
.fw.on{stroke:var(--accent);stroke-width:1.5}
.fw-a.on{fill:var(--accent);stroke:var(--accent)}
.fl-key{position:absolute;z-index:3;left:0;bottom:22px;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.02em;color:var(--muted)}
.fl-key li{display:flex;align-items:center;gap:6px}
.fl-key svg{width:14px;height:10px;overflow:visible}
@media (min-width:1024px){
  .h1{font-size:min(clamp(34px,4.6vw + 6px,80px),9.5vh)}
}
@media (min-width:1024px) and (max-width:1279px){
  .hero__copy{grid-column:1/6}
  .field{grid-column:6/13}
  .digest{width:min(400px,76%)}
}
@media (min-width:1024px) and (max-height:800px){.hero{padding-top:24px}.hero__lead,.hero__cta{margin-top:20px}.field{--band:clamp(140px,21vh,190px);padding-bottom:48px}.digest__lead{padding-top:16px}.digest__items li{padding:10px 0 9px}}
@media (max-width:1023px){
  .hero__copy,.field{grid-column:1/-1}
  .hero__copy{max-width:640px}
  .field{margin-top:clamp(28px,5vw,48px);--band:232px}
  .digest{width:min(520px,78%)}
}
@media (max-width:767px){
  .field{--band:196px;padding-bottom:56px}
  .digest{width:calc(100% - var(--bleed))}
  .sheet__head,.digest__lead,.digest__items{padding-inline:18px}
  .fl-key{gap:4px 12px;bottom:18px}
}
@media (max-width:359px){.h1{font-size:min(34px,10.2vw)}}

/* Hero load sequence (start states only while motion is allowed and JS runs): the graph grows out from its two assets, the digest lands, then the wires reach it. */
.motion .field:not(.in) .digest{opacity:0;translate:0 18px}
.motion .field:not(.in) .fn__in{opacity:0;transform:scale(.3)}
.motion .field:not(.in) .fe,.motion .field:not(.in) .fw{stroke-dashoffset:1}
.motion .field:not(.in) .ff,.motion .field:not(.in) .fw-a,.motion .field:not(.in) .fl-key{opacity:0}
.motion .field.in .digest{transition:opacity 520ms var(--ease-out) 380ms,translate 640ms var(--ease-out) 380ms}
.motion .field.in .fn__in{transition:opacity 320ms var(--ease-out) calc(var(--i) * 60ms + 100ms),transform 560ms cubic-bezier(.3,1.45,.5,1) calc(var(--i) * 60ms + 100ms)}
.motion .field.in .fe{transition:stroke-dashoffset 640ms var(--ease-out) calc(var(--i) * 60ms + 160ms),stroke 200ms var(--ease-ui)}
.motion .field.in .ff{transition:opacity 900ms var(--ease-ui) 500ms}
.motion .field.in .fw{transition:stroke-dashoffset 560ms var(--ease-out) calc(var(--i) * 140ms + 1000ms),stroke 200ms var(--ease-ui)}
.motion .field.in .fw-a{transition:opacity 200ms var(--ease-ui) calc(var(--i) * 140ms + 1450ms),fill 200ms var(--ease-ui),stroke 200ms var(--ease-ui)}
.motion .field.in .fl-key{transition:opacity 600ms var(--ease-ui) 1200ms}

/* ---------- Fibres (≥1024) ---------- */
/* Diagonal myelinated fibres in the blank patches (between the principles and their sentences, under the graph legend, under the agent sheet, beside the waitlist form), as on the live site. Click one to fire its signal again. Each patch fades out on every side so a fibre never runs under text. When a patch first comes into view (main.js adds .on), a signal jumps along each fibre a segment at a time, three times, then stops. */
.fibres{display:none}
@media (min-width:1024px){
  .fibres{display:block;position:absolute;z-index:0;overflow:hidden;pointer-events:none}
  .fibres i{position:absolute;left:-20%;width:140%;height:var(--th);transform:rotate(-12deg);overflow:hidden;background:var(--seg-f) 0 0/var(--tw) var(--th) repeat-x,linear-gradient(#C3D5FB,#C3D5FB) 0 50%/100% 2px no-repeat}
  .fibres i:nth-child(1){top:22%;--tw:114px;--th:18px;opacity:1;--d:0s}
  .fibres i:nth-child(2){top:48%;--tw:95px;--th:15px;opacity:.8;--d:.7s}
  .fibres i:nth-child(3){top:74%;--tw:133px;--th:21px;opacity:.65;--d:1.4s}
  .fibres i::after{content:"";position:absolute;left:0;top:0;width:calc(var(--tw) * 3);height:100%;background:var(--seg-h-lit) 0 0/var(--tw) var(--th) repeat-x,linear-gradient(var(--accent),var(--accent)) 0 50%/100% 2px no-repeat;transform:translateX(calc(var(--tw) * -3))}
  .motion .fibres.on i::after{animation:fibre 3.6s steps(24,end) var(--d) 3 both}
  .motion .fibres.zap i::after{animation:fibre 1.5s steps(24,end) calc(var(--d) * .25) 1 both}
  .fibres i{pointer-events:auto;transition:opacity 200ms var(--ease-ui)}
  .fib-hot{cursor:pointer}
  .fib-hot .fibres i{opacity:1}
  .fibres--graph{left:0;bottom:0;width:44%;height:72%;-webkit-mask-image:radial-gradient(ellipse 95% 90% at 0% 100%,#000 40%,transparent 88%);mask-image:radial-gradient(ellipse 95% 90% at 0% 100%,#000 40%,transparent 88%)}
  .fibres--agents{right:0;bottom:0;width:52%;height:60%;-webkit-mask-image:radial-gradient(ellipse 90% 90% at 100% 100%,#000 40%,transparent 88%);mask-image:radial-gradient(ellipse 90% 90% at 100% 100%,#000 40%,transparent 88%)}
  .fibres--props{left:18%;width:34%;top:0;height:100%;-webkit-mask-image:radial-gradient(ellipse 58% 64% at 50% 50%,#000 55%,transparent 95%);mask-image:radial-gradient(ellipse 58% 64% at 50% 50%,#000 55%,transparent 95%)}
  .fibres--join{left:0;bottom:0;width:52%;height:66%;-webkit-mask-image:radial-gradient(ellipse 90% 95% at 20% 100%,#000 40%,transparent 88%);mask-image:radial-gradient(ellipse 90% 95% at 20% 100%,#000 40%,transparent 88%)}
  .hero__frame,.agents-sec>.frame,.join>.frame{position:relative;z-index:1}
}
@keyframes fibre{from{transform:translateX(calc(var(--tw) * -3))}to{transform:translateX(calc(var(--tw) * 21))}}

/* ---------- Principles: rows hanging off the axon ---------- */
.props{padding-top:clamp(56px,7vw,112px)}
.props__list{grid-column:1/-1;display:flex;flex-direction:column;gap:clamp(28px,3.4vw,52px)}
.prop{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline}
.prop__t{grid-column:1/7;position:relative;font-weight:400;font-stretch:94%;font-size:clamp(32px,2.6vw + 6px,52px);line-height:1;letter-spacing:-.03em}
.prop__p{grid-column:7/13;color:var(--text-2);max-width:44ch;text-wrap:pretty}
@media (min-width:1024px){
  .prop__t::before{content:"";position:absolute;z-index:5;left:-25px;top:calc(.5em - 5px);width:10px;height:10px;border-radius:50%;background:var(--bg);border:1.5px solid var(--sheath-line);transition:background-color 240ms var(--ease-ui),border-color 240ms var(--ease-ui)}
  .prop__t::after{content:"";position:absolute;left:-15px;top:calc(.5em - .5px);width:11px;height:1px;background:var(--sheath-line)}
  .prop.is-lit .prop__t::before{background:var(--accent);border-color:var(--accent)}
  .prop__t{color:var(--muted);transition:color 300ms var(--ease-ui)}
  .prop.is-lit .prop__t,.no-motion .prop__t,.no-js .prop__t{color:var(--ink)}
}
@media (min-width:1024px) and (max-width:1279px){.prop__t{grid-column:1/6}.prop__p{grid-column:6/13}}
@media (max-width:1023px){.prop{grid-template-columns:1fr;row-gap:10px}.prop__t,.prop__p{grid-column:1/-1}}
.props__list{position:relative;z-index:1}

/* ---------- § 2 One graph ---------- */
.gplate{grid-column:1/-1;position:relative;margin-top:clamp(28px,3vw,48px);margin-left:calc(-1 * var(--ml));margin-right:calc(-1 * var(--bleed));height:clamp(380px,58vh,600px);background:var(--surface)}
.gcanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y pinch-zoom}
.gplate:not(.is-on) .gcanvas{display:none}
.legend.sheet{background:transparent;box-shadow:none;border-radius:0}
.legend{position:absolute;z-index:2;top:24px;left:var(--ml);width:264px;padding:0;display:flex;flex-direction:column;gap:14px;will-change:transform}
.legend__rows{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--text-2)}
.legend__rows li{display:flex;align-items:center;gap:10px}
.lg{display:inline-block;width:22px;height:0;border-top:1.5px solid var(--edge-ink);flex:none}
.lg--combo{height:7px;border:0;background:var(--seg-h-lit) 0 50%/19px 7px repeat-x,linear-gradient(var(--accent),var(--accent)) 0 50%/100% 1.5px no-repeat}
.lg--same{border-top-style:dashed}
.legend__hint{color:var(--muted);font-weight:400}
.hint--coarse{display:none}
@media (pointer:coarse){.hint--fine{display:none}.hint--coarse{display:inline}}
.legend .btn{align-self:flex-start}
.graph__list{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Without a canvas (no JS, or no 2D context) the text list is the graph; the legend and its controls would only describe a canvas that isn't there. */
.gplate:not(.is-on) .graph__list{position:static!important;width:auto;height:auto;margin:0;padding:24px var(--mr) 24px var(--ml);overflow:visible;clip:auto;white-space:normal;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.5;color:var(--text-2)}
.gplate:not(.is-on){height:auto}
.gplate:not(.is-on) .legend{display:none}
@media (max-width:1023px){
  .gplate{height:auto;margin-left:0;margin-right:0;display:flex;flex-direction:column;background:transparent}
  .gcanvas{order:1;position:relative;height:420px;margin-left:calc(-1 * var(--ml));margin-right:calc(-1 * var(--mr));width:auto;background:var(--surface)}
  .legend{order:2;position:static;width:auto;border:0;box-shadow:none;background:transparent;padding:16px 0 0;gap:10px;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;will-change:auto;transform:none}
  .legend__rows{flex-direction:row;flex-wrap:wrap;gap:8px 20px;align-content:flex-start}
  .legend__hint{flex:1 1 100%}
  .legend .btn{position:absolute;top:12px;right:0;z-index:3;height:32px;padding:0 14px;font-size:13px;background:var(--bg)}
  .gplate:not(.is-on) .graph__list{padding:0}
}
@media (max-width:767px){.gcanvas{height:340px}}

/* ---------- § 3 Agents ---------- */
.agents-sec{padding-bottom:var(--sec-pad-s)}
.agents{grid-column:1/-1;position:relative;margin-top:clamp(28px,3vw,48px)}
.agent{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:22px 0 24px}
.agent__team{grid-column:1/5;font-weight:500;font-size:clamp(18px,.5vw + 14px,23px);line-height:1.2;letter-spacing:-.01em;padding-top:4px}
.agent__sheet{grid-column:5/13;display:flex;flex-direction:column;gap:8px}
.agent__name{font-weight:500;font-stretch:94%;font-size:clamp(24px,.8vw + 16px,34px);line-height:1.1;letter-spacing:-.02em}
.agent__desc{color:var(--text-2);max-width:46ch;text-wrap:pretty}
.agent__also{font-size:14px;line-height:1.5;color:var(--text-2);margin-top:6px;max-width:46ch}
.agents__byo{grid-column:1/-1;margin-top:20px;color:var(--text-2);max-width:60ch}
@media (max-width:767px){
  .agent{grid-template-columns:1fr;row-gap:10px;padding:20px 0}
  .agent__team,.agent__sheet{grid-column:1/-1}
  .agent__team{font-size:14px;font-weight:500;color:var(--muted);padding-top:0}
}
/* Tabs (JS, ≥1024 only): each row names the team and its workflow, so all six read without a click; the sheet carries the description. */
@media (min-width:1024px){
  .agents.is-tabs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);border-top:0;align-items:start}
  .tablist{grid-column:1/6;grid-row:1;display:flex;flex-direction:column}
  .tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:72px;padding:10px 20px 11px 0;border:0;background:transparent;text-align:left;font-family:var(--sans);color:var(--text-2);cursor:pointer;transition:background-color 160ms var(--ease-ui),color 160ms var(--ease-ui)}
  .tab__team{font-size:14px;line-height:1.35;color:var(--muted);transition:color 160ms var(--ease-ui)}
  .tab__name{font-weight:500;font-size:clamp(18px,.5vw + 14px,23px);line-height:1.2;letter-spacing:-.01em}
  .tab{color:var(--muted)}
  .tab[aria-selected=true]{color:var(--ink)}
  .tab[aria-selected=true] .tab__team{color:var(--text-2)}
  .tab::after{content:"";position:absolute;right:-6px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line-strong);transition:background-color 200ms var(--ease-ui),border-color 200ms var(--ease-ui)}
  .tab[aria-selected=true]::after{background:var(--accent);border-color:var(--accent)}
  .ag-wire{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .ag-wire path{fill:none;stroke:var(--accent);stroke-width:1.25;stroke-dasharray:1;stroke-dashoffset:0}
  .ag-wire circle{fill:var(--surface);stroke:var(--accent);stroke-width:1.25}
  .tab:focus{outline-offset:-3px}
  .agents.is-tabs .agent{display:contents}
  .agents.is-tabs .agent__team{display:none}
  .agents.is-tabs .agent__sheet{grid-column:7/13;grid-row:1;align-self:start;display:none;gap:0;background:var(--surface);border-radius:6px;box-shadow:var(--paper)}
  .agents.is-tabs .agent.is-active .agent__sheet{display:flex}
  .agents.is-tabs .agent__name{padding:28px 28px 0}
  .agents.is-tabs .agent__desc{padding:14px 28px 0}
  .agents.is-tabs .agent__also{margin:24px 28px 26px;max-width:none}
  .motion .agents.is-tabs .agent__sheet.is-enter{opacity:0;transform:translateY(8px)}
  .motion .agents.is-tabs .agent__sheet.is-on{opacity:1;transform:none;transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
  .motion .agents.is-tabs .agent__sheet.is-leave{display:flex;opacity:0;transition:opacity 120ms var(--ease-ui)}
}
@media (hover:hover) and (min-width:1024px){
  .tab:hover{color:var(--ink)}
  .tab:hover .tab__team{color:var(--text-2)}
}
@media (min-width:1024px) and (max-width:1279px){
  .sec__cap,.sec__intro{grid-column:6/13}
  .tablist{grid-column:1/5}
  .agents.is-tabs .agent__sheet{grid-column:6/13}
  .agents.is-tabs .agent__name{padding-inline:24px}
  .agents.is-tabs .agent__desc{padding-inline:24px}
  .agents.is-tabs .agent__also{margin-inline:24px}
}

/* ---------- The axon (≥1024) ---------- */
/* The page's spine: myelin segments down the left margin from § 2 to the waitlist. main.js places it on the heading nodes and sets --p, the lit length, in whole segments, so the signal jumps node to node (saltatory conduction) instead of sliding. */
.axon{display:none}
@media (min-width:1024px){
  #main{position:relative}
  .axon{display:block;position:absolute;z-index:4;left:0;top:0;width:12px;height:0;pointer-events:none;--p:0px}
  .axon__b,.axon__l{position:absolute;inset:0}
  .axon__b{background:var(--seg-v) 0 0/12px 76px repeat-y,linear-gradient(#C9D2DE,#C9D2DE) 5.25px 0/1.5px 100% no-repeat}
  .axon__l{background:var(--seg-v-lit) 0 0/12px 76px repeat-y,linear-gradient(var(--accent),var(--accent)) 5px 0/2px 100% no-repeat;clip-path:inset(0 0 calc(100% - var(--p)) 0);transition:clip-path 150ms var(--ease-out)}
  .axon__s{position:absolute;left:1px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--bg);transform:translateY(var(--p));transition:transform 150ms var(--ease-out)}
}

/* ---------- § 4 How it works: the thread ---------- */
.cond{display:none}
.steps{grid-column:1/-1;position:relative;margin-top:clamp(28px,3vw,48px)}
.steps::before{content:"";position:absolute;left:-20px;top:26px;bottom:34px;width:1px;background:var(--line);transform-origin:top}
.step{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:22px 0}
.step::before{content:"";position:absolute;left:-25px;top:32px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:1.5px solid var(--edge-ink);transition:background-color 160ms var(--ease-ui),border-color 160ms var(--ease-ui)}
.step.on::before,.step:last-child.is-done::before,.no-motion .step:last-child::before,.no-js .step:last-child::before{background:var(--accent);border-color:var(--accent)}
.step__n{grid-column:1/2;color:var(--muted);padding-top:5px}
.step__t{grid-column:2/7;font-weight:500;font-size:clamp(18px,.5vw + 14px,22px);line-height:1.25;letter-spacing:-.01em}
.step__p{grid-column:7/13;color:var(--text-2);max-width:56ch;text-wrap:pretty}
.motion .how.pre .steps::before{transform:scaleY(0)}
.motion .how.play .steps::before{transform:none;transition:transform 600ms var(--ease-out)}
@media (min-width:1024px) and (max-width:1279px){.step__t{grid-column:2/6}.step__p{grid-column:6/13}}
/* From 1280 the four steps hang from one horizontal axon that runs off the right edge. When the steps come into view the signal crosses it in whole segments (steps(--n)) and each step's node lights as it arrives. */
@media (min-width:1280px){
  .cond{display:block;grid-column:1/-1;position:relative;height:12px;margin-top:clamp(40px,4vw,64px);margin-right:calc(-1 * var(--bleed))}
  .cond__b,.cond__l{position:absolute;inset:0}
  .cond__b{background:var(--seg-h) 0 0/76px 12px repeat-x,linear-gradient(#C9D2DE,#C9D2DE) 0 5.25px/100% 1.5px no-repeat}
  .cond__l{background:var(--seg-h-lit) 0 0/76px 12px repeat-x,linear-gradient(var(--accent),var(--accent)) 0 5px/100% 2px no-repeat;clip-path:inset(0 100% 0 0)}
  .no-motion .cond__l,.no-js .cond__l,.how.play .cond__l{clip-path:inset(0 0 0 0)}
  .how.play .cond__l{transition:clip-path var(--dur,1.6s) steps(var(--n,18),end)}
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);margin-top:0;padding-top:36px;border-top:0}
  .steps::before{display:none}
  .step{display:flex;flex-direction:column;gap:10px;padding:0 12px 0 0;border:0}
  .step::before{left:-1px;top:-49px;width:14px;height:14px;border-color:var(--sheath-line);background:var(--bg);z-index:1}
  .step.on::before,.no-motion .step::before,.no-js .step::before{background:var(--accent);border-color:var(--accent)}
  .step__n{padding-top:0;transition:color 200ms var(--ease-ui)}
  .step.on .step__n,.no-motion .step__n,.no-js .step__n{color:var(--accent-deep)}
  .step__t{font-size:clamp(20px,.6vw + 13px,24px)}
  .step__p{max-width:34ch}
  .motion .how.pre .steps::before{transform:none}
}
@media (max-width:1023px){.step{grid-template-columns:repeat(8,minmax(0,1fr))}.step__n{grid-column:1/2}.step__t{grid-column:2/4}.step__p{grid-column:4/9}}
@media (max-width:767px){
  .steps{padding-left:28px}
  .steps::before{left:8px}
  .step{grid-template-columns:1fr;row-gap:6px;padding:20px 0}
  .step::before{left:-25px;top:26px}
  .step__n,.step__t,.step__p{grid-column:1/-1}
  .step__n{padding-top:0}
}

/* ---------- § 5 Team ---------- */
.team{padding-bottom:var(--sec-pad-s)}
.team .h2{grid-column:1/9}
.founders{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(28px,3vw,48px)}
.founder{display:flex;flex-direction:column;gap:6px;padding:0 24px 0 0}
.founder+.founder{padding-left:0;padding-right:0}
.founder__name{font-weight:500;font-size:clamp(18px,.5vw + 14px,22px);line-height:1.25;letter-spacing:-.01em}
.founder__role{font-size:14px;color:var(--muted);margin-bottom:6px}
.founder__bio{color:var(--text-2);max-width:40ch;text-wrap:pretty}
.founder__edu{font-size:14px;color:var(--muted)}
.founder a{font-size:15px;margin-top:8px;align-self:flex-start}
@media (max-width:767px){
  .founders{grid-template-columns:1fr}
  .founder{padding-right:0}
  .founder+.founder{margin-top:32px}
}

/* ---------- § 6 Waitlist ---------- */
.join{position:relative;background:var(--surface-2);padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.join__copy{grid-column:1/6;display:flex;flex-direction:column;gap:14px;align-self:start;margin-top:-8px}
.join__copy .lead{color:var(--text-2);max-width:34ch}
.join__copy a{text-decoration-color:var(--control)}
.join__panel.sheet{background:transparent;box-shadow:none;border-radius:0}
.join__panel{grid-column:7/13;padding:0}
.form{display:flex;flex-direction:column;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font-weight:500;font-size:14px;line-height:1.35}
.fld input,.fld select{height:46px;width:100%;padding:0 14px;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--control);border-radius:6px;transition:border-color 160ms var(--ease-ui)}
.fld input:focus,.fld select:focus{border-color:var(--accent-deep);outline:2px solid var(--accent-deep);outline-offset:2px}
.fld select{-webkit-appearance:none;appearance:none;padding-right:36px;background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237C8795' stroke-width='1.5'/></svg>") no-repeat right 12px center}
.fld [aria-invalid=true]{border:2px solid var(--ink);padding-left:13px}
.help{font-size:13px;line-height:1.45;color:var(--muted)}
.ferr-f,.ferr{font-size:14px;line-height:1.45;color:var(--ink);padding-left:10px;border-left:2px solid var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{font-size:14px;line-height:1.5;color:var(--text-2)}
.submit{align-self:stretch}
.submit[aria-disabled=true]{opacity:.7;cursor:progress}
.done{display:flex;flex-direction:column;gap:12px}
.done p{color:var(--text-2)}
@media (min-width:1024px) and (max-width:1279px){.join__panel{grid-column:6/13}}
/* Work email and Company pair only where the sheet is wide enough for an email address (≥1280). */
@media (max-width:1279px){.f2--wide{grid-template-columns:1fr}}
@media (max-width:1023px){
  .join__copy,.join__panel{grid-column:1/-1}
  .join__copy{margin-top:0}
  .join__panel{margin-top:28px;padding:0}
}
@media (max-width:519px){.f2{grid-template-columns:1fr}}


/* ---------- Footer ---------- */
.ftr{padding:44px 0 36px}
.ftr__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.ftr__logo{color:var(--ink)}
.ftr__links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--text-2)}
.ftr__links a{text-decoration:none}
.ftr__note{margin-top:20px}
.ftr__colo{margin-top:10px;color:var(--muted);font-weight:400}

/* ---------- Responsive grid ---------- */
@media (max-width:1023px){
  .frame{grid-template-columns:repeat(8,minmax(0,1fr))}
  .frame>*{grid-column:1/-1}
  .sec__cap,.sec__intro{grid-column:1/-1;margin-top:16px;max-width:60ch}
  .graph .h2,.agents-sec .h2,.how .h2,.team .h2,.founders{grid-column:1/-1}
  .agent{grid-template-columns:repeat(8,minmax(0,1fr))}
  .agent__team{grid-column:1/4}
  .agent__sheet{grid-column:4/9}
}
@media (max-width:767px){
  .frame{grid-template-columns:repeat(4,minmax(0,1fr))}
  .agent{grid-template-columns:1fr}
  .agent__team,.agent__sheet{grid-column:1/-1}
}

/* ---------- Document pages (FAQ, legal, 404) ---------- */
.doc-page{display:flex;flex-direction:column;min-height:100vh}
.doc-page>main{flex:1 0 auto}
.doc{padding:clamp(48px,6vw,96px) 0 clamp(72px,8vw,128px)}
.doc .frame>*{grid-column:1/9}
.doc h1{font-weight:500;font-stretch:94%;font-size:clamp(32px,2vw + 16px,52px);line-height:1.04;letter-spacing:-.025em;margin-bottom:16px;text-wrap:balance}
.doc .updated,.doc .intro{color:var(--muted);font-size:15px;margin-bottom:clamp(32px,4vw,48px);max-width:60ch}
.doc .intro{font-size:clamp(17px,.35vw + 14px,19px);line-height:1.45;color:var(--text-2)}
.doc h2{font-weight:500;font-size:clamp(19px,.5vw + 15px,23px);line-height:1.25;letter-spacing:-.01em;margin:40px 0 10px;text-wrap:balance}
.doc p,.doc li{color:var(--text-2);max-width:68ch;text-wrap:pretty}
.doc p+p{margin-top:14px}
.doc ul{list-style:disc;padding-left:22px;margin:12px 0}
.doc li{margin:6px 0}
.doc strong{color:var(--ink)}
.doc .cta{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:1023px){.doc .frame>*{grid-column:1/-1}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---------- Forced colours (Windows high contrast) ---------- */
@media (forced-colors:active){
  .status__dot,.lg,.tab[aria-selected=true]::before{forced-color-adjust:none}
  .lg{border-top-color:CanvasText}
  .tab[aria-selected=true]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .tab[aria-selected=true] .tab__team{color:HighlightText}
  .tab[aria-selected=true]:focus-visible{outline:2px solid HighlightText;outline-offset:-5px}
  .fld select{-webkit-appearance:auto;appearance:auto;background-image:none}
  :focus,.fld input:focus,.fld select:focus{outline:2px solid Highlight}
  .btn{border-color:ButtonText}
}