/* BATech View: the platform sections (#how, #rules, #modules, #flow), the clip player and its code-drawn
   fallbacks. Same tokens and patterns as view.css (Trace's system); nothing here scales with scroll. */

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.vi-sprite{position:absolute;width:0;height:0;overflow:hidden}
.vi{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;--ic-duo:.16}

/* outcome: four measures; accuracy: four lines */
.outs{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1060px){ .outs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .outs{grid-template-columns:1fr} }
.acc-lines{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){ .acc-lines{grid-template-columns:1fr} }

/* heads: Trace's .talk split, copy left (5fr), clip right (7fr) */
.pf-head,.rl-head,.fw-head{align-items:center}
.talk-copy .lede{margin-top:clamp(16px,2.4vh,22px)}
/* phones: the clip sits right under the lede, before the talk-points */
@media(max-width:900px){
  .pf-head,.rl-head,.fw-head{row-gap:0}
  .pf-head .talk-copy,.rl-head .talk-copy,.fw-head .talk-copy{display:contents}
  .pf-head .clip,.rl-head .clip,.fw-head .clip{order:2;margin-top:28px}
  .pf-head .talk-points,.fw-head .talk-points{order:3}
}

/* ---------- the clip player (one for all five slots) ---------- */
.clip{margin:0;min-width:0}
.clip-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r-lg);overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%,#000 60%,transparent 100%);
          mask-image:radial-gradient(120% 120% at 50% 50%,#000 60%,transparent 100%)}
@media(max-width:820px){ .clip-frame{aspect-ratio:1/1} }
.clip-frame>.fb,.clip-frame>picture,.clip-frame>picture img,.clip-frame>video{position:absolute;inset:0;width:100%;height:100%;display:block}
.clip-frame>picture img,.clip-frame>video{object-fit:cover}
.clip-frame>video{opacity:0;transition:opacity .8s}
.clip-frame>video.playing{opacity:1}
.clip.has-clip .fb{display:none}
.clip figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font-size:12.5px;color:var(--alum);min-height:20px}
.clip-replay{min-height:44px;padding:0 2px;white-space:nowrap}
html.js .clip{opacity:0;transition:opacity .9s var(--ease)}
html.js .clip.seen,html.no-io .clip{opacity:1}

/* ---------- code-drawn fallbacks: run only while on screen; still under reduced motion ---------- */
.fb{--fbe:cubic-bezier(.45,.05,.25,1)}
html.js .clip:not(.on) .fb *{animation-play-state:paused!important}

/* route: a page is read, then its parts travel their own lanes */
.rt-bar{animation:rt-bar 6s linear infinite}
@keyframes rt-bar{0%{transform:translateY(0);opacity:0}2%{opacity:1}14%{transform:translateY(400px);opacity:1}16%,100%{transform:translateY(400px);opacity:0}}
.rt-rg{animation:6s var(--fbe) infinite}
.rt-rg-a{animation-name:rt-rg-a}.rt-rg-b{animation-name:rt-rg-b}.rt-rg-c{animation-name:rt-rg-c}
@keyframes rt-rg-a{0%{opacity:.7}2%{opacity:1}6%,16%{opacity:.85}20%,80%{opacity:.28}92%,100%{opacity:.7}}
@keyframes rt-rg-b{0%{opacity:.7}7%{opacity:1}11%,18%{opacity:.85}22%,82%{opacity:.28}94%,100%{opacity:.7}}
@keyframes rt-rg-c{0%{opacity:.7}10%{opacity:1}14%,20%{opacity:.85}24%,84%{opacity:.28}96%,100%{opacity:.7}}
.rt-t{opacity:0;animation:6s var(--fbe) infinite}
.rt-t-a{animation-name:rt-t-a}.rt-t-b{animation-name:rt-t-b}.rt-t-c{animation-name:rt-t-c}
@keyframes rt-t-a{0%,15%{opacity:0;transform:translateX(0)}18%{opacity:1;transform:translateX(0)}56%{opacity:1;transform:translateX(462px)}62%,100%{opacity:0;transform:translateX(462px)}}
@keyframes rt-t-b{0%,17%{opacity:0;transform:translateX(0)}20%{opacity:1;transform:translateX(0)}60%{opacity:1;transform:translateX(608px)}66%,100%{opacity:0;transform:translateX(608px)}}
@keyframes rt-t-c{0%,19%{opacity:0;transform:translateX(0)}22%{opacity:1;transform:translateX(0)}62%{opacity:1;transform:translateX(462px)}68%,100%{opacity:0;transform:translateX(462px)}}
.rt-ln{opacity:.3;animation:6s var(--fbe) infinite}
.rt-ln-a{animation-name:rt-ln-a}.rt-ln-b{animation-name:rt-ln-b}.rt-ln-c{animation-name:rt-ln-c}
@keyframes rt-ln-a{0%,16%{opacity:.3}28%,56%{opacity:1}70%,100%{opacity:.3}}
@keyframes rt-ln-b{0%,18%{opacity:.3}30%,60%{opacity:1}72%,100%{opacity:.3}}
@keyframes rt-ln-c{0%,20%{opacity:.3}32%,62%{opacity:1}74%,100%{opacity:.3}}
.rt-pt{opacity:.35;animation:6s ease-out infinite}
.rt-pt-a{animation-name:rt-pt-a}.rt-pt-b{animation-name:rt-pt-b}.rt-pt-c{animation-name:rt-pt-c}
@keyframes rt-pt-a{0%,52%{opacity:.35}58%{opacity:1}68%{opacity:.75}88%,100%{opacity:.35}}
@keyframes rt-pt-b{0%,56%{opacity:.35}62%{opacity:1}72%{opacity:.75}90%,100%{opacity:.35}}
@keyframes rt-pt-c{0%,58%{opacity:.35}64%{opacity:1}74%{opacity:.75}92%,100%{opacity:.35}}

/* rules: every stream passes through the one pane */
.rl-pu{animation:rl-pu linear infinite}
@keyframes rl-pu{from{stroke-dashoffset:5}to{stroke-dashoffset:-100}}
.rl-x{opacity:.35;animation:rl-x linear infinite}
@keyframes rl-x{0%,43%{opacity:.35}50%{opacity:1}58%,100%{opacity:.35}}
.rl-pu-0,.rl-x-0{animation-duration:3.5s;animation-delay:-.4s}
.rl-pu-1,.rl-x-1{animation-duration:7s;animation-delay:-2.1s}
.rl-pu-2,.rl-x-2{animation-duration:2.8s;animation-delay:-1.3s}
.rl-pu-3,.rl-x-3{animation-duration:3.5s;animation-delay:-2.6s}
.rl-pu-4,.rl-x-4{animation-duration:4.2s;animation-delay:-3.4s}

/* agree: a tile lights only where both lines pass; the middle one never does */
.ag-pu{animation:ag-pu 4s linear infinite}
@keyframes ag-pu{from{stroke-dashoffset:4}to{stroke-dashoffset:-100}}
.ag-halo{animation:4s ease-in-out infinite}
.ag-on-0 .ag-halo{animation-name:ag-h0}.ag-on-2 .ag-halo{animation-name:ag-h2}
@keyframes ag-h0{0%,30%{opacity:.35}39%{opacity:.85}52%,100%{opacity:.35}}
@keyframes ag-h2{0%,53%{opacity:.35}62%{opacity:.85}75%,100%{opacity:.35}}

/* flag: the marker lights and signals up; the tile passes unchanged */
.fl-tile,.fl-fill,.fl-up{animation-duration:4.5s;animation-iteration-count:infinite;animation-delay:-1.69s}
.fl-tile{animation-name:fl-tile;animation-timing-function:linear}
@keyframes fl-tile{from{transform:translateX(-100px)}to{transform:translateX(1700px)}}
.fl-fill{transform:translateY(162px);animation-name:fl-fill;animation-timing-function:ease-out}
@keyframes fl-fill{0%,46%{transform:translateY(162px);opacity:1}54%,62%{transform:translateY(0);opacity:1}74%{transform:translateY(0);opacity:0}75%,100%{transform:translateY(162px);opacity:0}}
.fl-up{animation-name:fl-up;animation-timing-function:ease-in}
@keyframes fl-up{0%,53%{stroke-dashoffset:10;opacity:1}73%{stroke-dashoffset:-100;opacity:1}74%,100%{stroke-dashoffset:10;opacity:0}}

/* modules: a new piece seats into a working chain; plays once, holds, "Play again" */
html.js .clip-once:not(.go) .md-new{transform:translateY(-560px)}
.clip-once.go .md-new{animation:md-new 4.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes md-new{0%{transform:translateY(-560px)}62%,100%{transform:translateY(0)}}
.clip-once.go .md-seat{animation:md-seat 4.2s ease-out both}
@keyframes md-seat{0%,60%{opacity:0}66%{opacity:.6}76%{opacity:.22}82%{opacity:.22}84%{opacity:.7}90%,100%{opacity:.22}}
html.js .md-seat{opacity:0}
.md-bead{opacity:0}
.clip-once.go .md-bead{animation:md-bead 4.2s linear both}
@keyframes md-bead{0%,68%{opacity:0;transform:translateX(-40px)}70%{opacity:1}94%{opacity:1;transform:translateX(1640px)}96%,100%{opacity:0;transform:translateX(1640px)}}
.clip-once.go .md-m .md-glow{animation:4.2s ease-out both}
.clip-once.go .md-m-0 .md-glow{animation-name:md-g0}
.clip-once.go .md-m-1 .md-glow{animation-name:md-g1}
.clip-once.go .md-m-2 .md-glow{animation-name:md-g2}
.clip-once.go .md-m-4 .md-glow{animation-name:md-g4}
.clip-once.go .md-m-5 .md-glow{animation-name:md-g5}
@keyframes md-g0{0%,75%{opacity:.22}78%{opacity:.7}83%,100%{opacity:.22}}
@keyframes md-g1{0%,77%{opacity:.22}80%{opacity:.7}85%,100%{opacity:.22}}
@keyframes md-g2{0%,79%{opacity:.22}82%{opacity:.7}87%,100%{opacity:.22}}
@keyframes md-g4{0%,83%{opacity:.22}86%{opacity:.7}91%,100%{opacity:.22}}
@keyframes md-g5{0%,85%{opacity:.22}88%{opacity:.7}93%,100%{opacity:.22}}
.md-gap{transition:opacity .6s}

/* flow: dragged in (0-30%), tried in the sandbox (34-60%), goes solid (60-66%), the line runs through all seven (68-90%) */
.fw-new,.fw-hand,.fw-try,.fw-box,.fw-sb,.fw-solid,.fw-bead{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:var(--fbe)}
.fw-new{animation-name:fw-new}
@keyframes fw-new{0%{transform:translateY(-230px);opacity:0}6%{transform:translateY(-230px);opacity:1}30%,92%{transform:translateY(0);opacity:1}98%,100%{transform:translateY(0);opacity:0}}
.fw-hand{animation-name:fw-hand}
@keyframes fw-hand{0%,30%{opacity:.9}36%,100%{opacity:0}}
.fw-try{opacity:.2;animation-name:fw-try}
@keyframes fw-try{0%,31%{opacity:.2}36%,60%{opacity:1}66%,100%{opacity:.2}}
.fw-box{opacity:.45;animation-name:fw-box}
@keyframes fw-box{0%,32%{opacity:.45}38%,60%{opacity:1}66%,100%{opacity:.45}}
.fw-sb{opacity:0;animation-timing-function:linear}
.fw-sb-0{animation-name:fw-sb0}.fw-sb-1{animation-name:fw-sb1}.fw-sb-2{animation-name:fw-sb2}
@keyframes fw-sb0{0%,36%{opacity:0;transform:translateX(0)}37%{opacity:1}51%{opacity:1;transform:translateX(440px)}52%,100%{opacity:0;transform:translateX(440px)}}
@keyframes fw-sb1{0%,40%{opacity:0;transform:translateX(0)}41%{opacity:1}55%{opacity:1;transform:translateX(440px)}56%,100%{opacity:0;transform:translateX(440px)}}
@keyframes fw-sb2{0%,44%{opacity:0;transform:translateX(0)}45%{opacity:1}59%{opacity:1;transform:translateX(440px)}60%,100%{opacity:0;transform:translateX(440px)}}
.fw-solid{opacity:0;animation-name:fw-solid}
@keyframes fw-solid{0%,60%{opacity:0}66%,92%{opacity:1}98%,100%{opacity:0}}
.fw-bead{opacity:0;animation-name:fw-bead;animation-timing-function:linear}
@keyframes fw-bead{0%,67%{opacity:0;transform:translateX(0)}68%{opacity:1}89%{opacity:1;transform:translateX(840px)}90%,100%{opacity:0;transform:translateX(840px)}}
@media (prefers-reduced-motion:reduce){
  .fb *{animation:none!important}
  .fw-new{transform:none;opacity:1}.fw-solid{opacity:1}.fw-hand{opacity:0}.fw-box{opacity:.6}.fw-try{opacity:.4}.fw-sb{opacity:0}.fw-bead{opacity:1;transform:translateX(420px)}
  html.js .clip{opacity:1}
  .rt-bar{opacity:0}.rt-rg{opacity:.28}.rt-t{opacity:1}.rt-ln{opacity:.9}.rt-pt{opacity:.7}
  .rt-t-a{transform:translateX(300px)}.rt-t-b{transform:translateX(400px)}.rt-t-c{transform:translateX(300px)}
  .rl-pu{stroke-dashoffset:-30}.rl-x{opacity:1}
  .ag-halo{opacity:.6}
  .fl-tile{transform:translateX(1010px)}.fl-fill{transform:none;opacity:1}.fl-up{stroke-dashoffset:-40}
  html.js .clip-once:not(.go) .md-new{transform:none}.md-seat{opacity:.22}.md-bead{opacity:0}
}

/* ---------- the platform diagram ---------- */
.pf{margin:clamp(48px,7vh,84px) 0 0;position:relative}
.pf-svg{display:block;width:100%;height:auto;overflow:visible}
.pf-svg text{font-family:var(--body)}
.pf-t15{font-size:15px;font-weight:600;fill:var(--porcelain)}
.pf-t13{font-size:14.5px;fill:var(--alum)}
.pf-t12{font-size:14.5px;fill:var(--alum)}
.pf-qbox{fill:none;stroke:var(--ice);stroke-opacity:.55;stroke-width:1;stroke-dasharray:4 4}
.pf-node rect{fill:var(--surface-2);stroke:var(--line2);stroke-width:1;transition:stroke .25s,fill .25s}
.pf-node.pf-rm rect{stroke-dasharray:4 4;stroke-opacity:.75}
.pf-node.pf-rm text{fill:var(--alum)}
.pf-dotf{fill:var(--cobalt-head)}
.pf-ring{fill:none;stroke:var(--cobalt-head);stroke-width:1.2;stroke-dasharray:2 2}
.pf-dash{fill:none;stroke:var(--cobalt-head);stroke-opacity:.5;stroke-width:1.5;stroke-dasharray:4 6}
.pf-rm .pf-t12{fill:#7d8794}
.pf-dash1{stroke-dasharray:3 4}
.pf-tab{fill:var(--ice)}
.pf-lock{fill:none;stroke:var(--cobalt-head);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pf-bead{fill:var(--ice-hi)}
@media (hover:hover){ .pf-node:hover rect,.pf-node.hot rect{stroke:var(--cobalt-head);fill:#0d1424} .pf-lane{cursor:default} }
.pf-line{min-height:1.5em;font-size:14.5px;color:var(--alum);margin:12px 0 0;max-width:86ch;transition:opacity .25s}
.pf-cap{font-size:12.5px;color:var(--alum);margin-top:12px;max-width:86ch}
@media(min-width:1280px){
  .pf-list,.pf-under{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:1279px){ .pf-svg,.pf-line{display:none} }
@media(max-width:820px){ .pf{margin-top:44px} }
@media(min-width:821px) and (max-width:1279px){ .pf-list{max-width:720px} .pf-under{max-width:676px;margin-left:44px} }
/* the diagram below 1280 px (and the screen-reader twin at every width): Trace's phone .steps spine */
.pf-list{list-style:none;margin:0;padding:0 0 0 44px;position:relative}
.pf-list::before{content:"";position:absolute;left:11px;top:10px;bottom:26px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#1F4FE0,#4C79FF 55%,#BFD3FF)}
.pf-st{position:relative;padding:0 0 28px}
.pf-dot{position:absolute;left:-44px;top:0;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#dfe8ff 0,#4C79FF 38%,#1238B8 100%);box-shadow:0 0 14px rgba(76,121,255,.45)}
.pf-st.is-rm .pf-dot{background:#000;border:1.5px dashed var(--ice);box-shadow:none}
.pf-st h3{font-size:19px;line-height:1.25}
.pf-st>p{color:var(--alum);font-size:15.5px;margin-top:6px}
.pf-today{margin-top:12px!important;padding-top:10px;border-top:1px solid var(--line);font-size:14.5px!important;color:var(--porcelain)!important}
.pf-today b{display:block;font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--alum);margin-bottom:4px}
.pf-chips{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-chip{min-height:36px;display:flex;align-items:center;padding:7px 10px;border:1px solid var(--line2);border-radius:10px;
  font-size:13.5px;line-height:1.25;color:var(--porcelain);background:var(--surface-2)}
.pf-chip.is-rm{border-style:dashed;color:var(--alum);background:transparent}
.pf-under{margin-top:4px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);padding:16px 18px 12px}
.pf-under-h{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.pf-under ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.pf-under a{display:flex;align-items:center;gap:9px;min-height:44px;color:var(--alum);font-size:14px;text-decoration:none;line-height:1.25}
.pf-under a:hover{color:var(--porcelain)}
.pf-under .vi{width:14px;height:14px;color:var(--cobalt-head)}

/* ---------- the rules ---------- */
.rl-pair{margin-top:clamp(40px,6vh,64px)}
.rl{display:flex;flex-direction:column;scroll-margin-top:80px}
.rl .clip{position:relative}
.rl .clip figcaption{position:absolute;left:14px;right:14px;top:10px;bottom:auto;margin:0;padding:0;min-height:0;z-index:2;
  justify-content:flex-end;text-align:right;color:rgba(207,224,255,.62);pointer-events:none;text-shadow:0 1px 6px #000}
.rl .clip-frame{border-radius:0}
.rl .vs-body{padding-top:10px}
.rl h3{font-size:clamp(19px,1.6vw,22px)}
.rl-body{color:var(--alum);font-size:15.5px;margin-top:10px}
.rl-proof{margin:16px 0 0;display:grid;gap:12px}
.rl-proof>div{padding-top:12px;border-top:1px solid var(--line)}
.rl-proof dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--alum);margin-bottom:5px}
.rl-proof dd{margin:0;font-size:14.5px;color:var(--porcelain);line-height:1.5}
.rl-proof>div:nth-child(2) dt{color:var(--cobalt-head)}
.rl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
@media(max-width:1060px){ .rl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .rl-grid{grid-template-columns:1fr} }
.rl-card,.mc-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);transition:border-color .3s,transform .35s var(--ease),background .3s,opacity .8s var(--ease)}
.rl-card{padding:24px 22px 22px;scroll-margin-top:80px}
.rl-card::before,.mc-card::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:0 0 2px 2px;
  background:var(--thread);opacity:.45;transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--ease),opacity .3s}
.rl-card:hover,.mc-card:hover{border-color:#2b4a9a;transform:translateY(-3px);background:#0d1218}
.rl-card:hover::before,.mc-card:hover::before{transform:scaleX(1);opacity:1}
.rl-ic{width:30px;height:30px;color:var(--cobalt-head);margin-bottom:16px;stroke-width:1.4}
.rl-card h3{font-size:clamp(19px,1.55vw,21px);line-height:1.22}
.rl-card>p{color:var(--alum);font-size:15px;margin-top:10px}
@supports (grid-template-rows:subgrid){
  @media(min-width:601px){
    .rl-grid{grid-auto-rows:auto}
    .rl-card{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}
    .rl-card .rl-proof{align-self:start}
  }
}

/* ---------- the module showcase: twelve glass tiles, each opening onto its capabilities ----------
   Tiles and panels share one dense grid (each .mk-kind is display:contents), so an open panel spans the row
   under its tile and the tiles after it keep their places. Motion: the icon lights and settles a few px when
   its tile comes into view, tiles lift 3px on hover. Nothing scales; reduced motion stills it all.
   Order: heading and a short lede, the tiles, then the counts and legend beside the clip. */
.mk{margin-top:clamp(28px,4.4vh,44px)}
/* the section's close: counts and legend left, the "a new module joins" clip right (one column below 900 px) */
.mk-coda{margin-top:clamp(56px,8vh,96px)}
/* the counts, as a spec strip (solid numerals: available now; outlined: on the roadmap), then the status legend */
.mk-top{display:grid;gap:22px;align-content:center}
.mk-top .mc-foot{margin-top:4px}
@media(min-width:901px){ .mk-coda .mk-stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-coda .mk-stat:nth-child(odd){padding-left:0;border-left:0} .mk-coda .mk-stat:nth-child(n+3){border-top:1px solid var(--line)} }
@media(max-width:900px){ .mk-coda .clip{margin-top:8px} }
.mk-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mk-stat{display:flex;flex-direction:column;gap:8px;padding:20px 20px 18px 0}
.mk-stat+.mk-stat{padding-left:22px;border-left:1px solid var(--line)}
.mk-stat b{font-family:var(--display);font-weight:800;font-size:clamp(36px,3.8vw,52px);line-height:.95;letter-spacing:-.035em;color:var(--porcelain);font-variant-numeric:tabular-nums}
.mk-stat span{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--alum)}
.mk-stat.is-now b{background:linear-gradient(100deg,#E8F0FF 0%,#7AA3FF 70%,#4C79FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-stat.is-roadmap b{color:transparent;-webkit-text-stroke:1.2px rgba(207,224,255,.62)}
.mc-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.mc-legend li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--alum)}
.mc-legend .mc-chip{margin:0}
@media(max-width:600px){
  .mk-stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-stat{padding:16px 12px 14px 0}
  .mk-stat:nth-child(odd){padding-left:0;border-left:0}
  .mk-stat:nth-child(even){padding-left:16px}
  .mk-stat:nth-child(n+3){border-top:1px solid var(--line)}
  .mk-stat span{font-size:13.5px}
  .mc-legend{flex-direction:column;gap:8px}
  .mc-legend li{display:block;font-size:13.5px;line-height:1.45}
  .mc-legend .mc-chip{margin-right:8px;vertical-align:-1px}
}

.mk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:16px;--col:0}
.mk-kind{display:contents}
.mk-kind:nth-child(3n+2){--col:1}
.mk-kind:nth-child(3n){--col:2}
@media(max-width:1059px){
  .mk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-kind:nth-child(n){--col:0}
  .mk-kind:nth-child(2n){--col:1}
}
/* phones: two compact tiles a row, so all twelve kinds fit in about a screen and a half */
@media(max-width:600px){ .mk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .mk-kind:nth-child(n){--col:0} .mk-kind:nth-child(2n){--col:1} }

/* the tile */
.mk-face{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:20px;
  grid-template-rows:auto 1fr auto auto auto;grid-template-areas:"ic name" "th th" "n n" "lk lk" "tog tog";
  padding:24px 24px 0;border:1px solid var(--line);border-radius:var(--r-lg);color:var(--porcelain);
  background:radial-gradient(120% 90% at 0% 0%,rgba(46,98,255,.11),rgba(46,98,255,0) 55%),var(--surface-2);
  box-shadow:inset 0 1px 0 rgba(232,240,255,.05);scroll-margin-top:80px;
  transition:border-color .3s,background-color .3s,box-shadow .35s,transform .45s var(--ease),opacity .8s var(--ease)}
.mk-face::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:0 0 2px 2px;
  background:var(--thread);opacity:.5;transform:scaleX(.16);transform-origin:left;transition:transform .55s var(--ease),opacity .3s}
.mk-face h3{grid-area:name;align-self:center;font-size:clamp(20px,1.7vw,23px);line-height:1.15;letter-spacing:-.014em}
.mk-th{grid-area:th;margin-top:18px;font-size:15px;line-height:1.5;color:var(--alum);text-wrap:pretty}
.mk-counts{grid-area:n;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.mc-chip.mk-n{margin:0;padding:5px 11px 5px 9px;border:1px solid var(--line2);border-radius:var(--r-full);background:rgba(8,10,14,.55);font-size:12.5px;line-height:1.2}
.mc-chip.mk-n.is-roadmap{border-style:dashed}
.mk-nl{grid-area:n;display:none;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;font-size:12.5px;line-height:1.3;color:var(--porcelain)}
.mk-nl>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.mk-nl .mc-g{width:10px;height:10px}
.mk-nl .is-roadmap{color:var(--alum)}
.mk-pth{display:none}
.mk-link{grid-area:lk;justify-self:start;position:relative;z-index:2;display:inline-flex;align-items:center;min-height:44px;margin-top:8px;
  font-size:14.5px;font-weight:500;color:var(--cobalt-head);text-decoration:none}
.mk-link:hover .tl::after,.mk-link:focus-visible .tl::after{transform:scaleX(1)}

/* the glass icon: a cobalt light behind it comes up when the tile is in view */
.mk-ic{grid-area:ic;position:relative;width:72px;height:72px;transition:transform .5s var(--ease)}
.mk-ic::before,.mk-ic::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.mk-ic::before{inset:-20px;background:radial-gradient(closest-side,rgba(76,121,255,.40),rgba(46,98,255,.13) 58%,rgba(46,98,255,0));opacity:.25}
.mk-ic::after{inset:-12px;background:radial-gradient(closest-side,rgba(191,211,255,.22),rgba(191,211,255,0));opacity:0;transition:opacity .45s var(--ease)}
.mk-ic picture,.mk-ic img{position:relative;display:block;width:72px;height:72px}
.mk-face.in .mk-ic::before{animation:mk-light 1.6s var(--ease) both;animation-delay:calc(.25s + var(--col) * .12s)}
.mk-face.in .mk-ic img{animation:mk-settle 1.3s var(--ease) both;animation-delay:calc(.2s + var(--col) * .12s)}
@keyframes mk-light{from{opacity:.25}to{opacity:1}}
@keyframes mk-settle{from{transform:translateY(7px);opacity:.5}to{transform:none;opacity:1}}

/* roadmap kinds (nothing in them is available yet): dashed tile, quieter icon, an empty dashed slot instead of the light */
.mk-kind.is-roadmap .mk-face{background:transparent;border-style:dashed;border-color:var(--line2);box-shadow:none}
.mk-kind.is-roadmap .mk-face::before{opacity:.3}
.mk-kind.is-roadmap .mk-ic picture{opacity:.78;filter:saturate(.7)}
.mk-kind.is-roadmap .mk-ic::before{inset:-7px;border-radius:18px;background:none;border:1px dashed rgba(207,224,255,.3)}
.mk-kind.is-roadmap .mk-face h3{color:#d5dae2}

/* the toggle: the tile's footer, and its whole face is the hit area */
.mk-tog{grid-area:tog;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:20px -24px 0;padding:0 18px 0 24px;min-height:54px;border:0;border-top:1px solid var(--line);
  background:transparent;color:var(--porcelain);font:500 14px/1.2 var(--body);text-align:left;cursor:pointer;
  border-radius:0 0 var(--r-lg) var(--r-lg)}
.mk-tog::after{content:"";position:absolute;inset:-1px;border-radius:var(--r-lg)}
.mk-tog:focus-visible{outline:none}
.mk-tog:focus-visible::after{outline:2px solid var(--cobalt-head);outline-offset:3px}
.mk-kind.is-roadmap .mk-tog{border-top-style:dashed;border-top-color:var(--line2)}
.mk-chev{width:30px;height:30px;flex:0 0 auto;padding:6px;border:1px solid var(--line2);border-radius:50%;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--ease),background-color .3s,border-color .3s}
html:not(.js) .mk-tog{display:none}
html:not(.js) .mk-face{padding-bottom:24px}

@media (hover:hover){
  .mk .mk-face:hover{transform:translateY(-3px);border-color:#2b4a9a}
  .mk .mk-face:hover::before{transform:scaleX(1);opacity:1}
  .mk-face:hover .mk-ic{transform:translateY(-3px)}
  .mk-face:hover .mk-ic::after{opacity:1}
  .mk-face:hover .mk-chev{border-color:var(--cobalt-head)}
}
.mk-kind.open .mk-face{border-color:#2f53b5;background-color:#0d1220;
  box-shadow:inset 0 1px 0 rgba(232,240,255,.07),0 18px 50px -28px rgba(46,98,255,.75)}
.mk-kind.open .mk-face::before{transform:scaleX(1);opacity:1}
.mk-kind.open .mk-ic::after{opacity:1}
.mk-kind.open .mk-chev{transform:rotate(180deg);background:var(--cobalt);border-color:var(--cobalt);color:#fff}

/* the panel: spans the row under its tile; a notch points back at the tile */
.mk-panel{grid-column:1/-1;position:relative;padding:22px 24px 26px;border:1px solid rgba(76,121,255,.3);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(31,79,224,.1),rgba(31,79,224,0) 160px),#090c11;
  box-shadow:inset 0 1px 0 rgba(232,240,255,.05),0 28px 70px -36px rgba(31,79,224,.5)}
html.js .mk-kind:not(.open) .mk-panel{display:none}
html.js .mk-panel::before{content:"";position:absolute;top:-7px;left:var(--nx,50%);width:12px;height:12px;margin-left:-6px;
  transform:rotate(45deg);background:#0b1121;border-left:1px solid rgba(76,121,255,.3);border-top:1px solid rgba(76,121,255,.3)}
html:not(.js) .mk-panel{margin-bottom:10px}
.mk-ph{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 18px;font-size:13px;color:var(--alum)}
.mk-ph b{font-family:var(--display);font-weight:700;font-size:16px;color:var(--porcelain);letter-spacing:-.005em}
.mk-ph span{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.mk-g{width:20px;height:20px;flex:0 0 auto;color:var(--cobalt-head)}
.mk-panel .mc-grid{margin:0}
.mk-kind.open .mc-card{animation:mk-card .55s var(--ease) backwards;animation-delay:calc(var(--i,0) * 45ms + 60ms)}
@keyframes mk-card{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* phones: a compact tile (icon and chevron, then the name, then one count line); the theory opens with the panel */
@media(max-width:600px){
  .mk-face{grid-template-columns:40px minmax(0,1fr);column-gap:8px;grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"ic tog" "name name" "n n" "lk lk";padding:14px 10px 14px 14px}
  .mk-face::before{left:14px;right:14px}
  .mk-ic,.mk-ic picture,.mk-ic img{width:40px;height:40px}
  .mk-ic::before{inset:-12px}
  .mk-ic::after{inset:-7px}
  .mk-kind.is-roadmap .mk-ic::before{inset:-4px;border-radius:12px}
  .mk-face h3{align-self:start;margin-top:12px;font-size:16.5px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
  .mk-th,.mk-counts{display:none}
  .mk-nl{display:flex;align-self:end}
  .mk-link{margin-top:6px;font-size:13.5px;line-height:1.25}
  .mk-tog{align-self:start;justify-self:end;margin:0;padding:0;min-height:0;border:0;border-radius:50%}
  .mk-tog-t{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .mk-chev{width:32px;height:32px;padding:7px}
  .mk-panel{padding:14px 12px 14px;margin-bottom:6px}
  .mk-ph{display:none}
  .mk-pth{display:block;margin:0 2px 12px;font-size:14.5px;line-height:1.5;color:var(--alum);text-wrap:pretty}
}

/* the capability cards inside a panel */
.mc-grid{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:1060px){ .mc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:600px){ .mc-grid{grid-template-columns:1fr;gap:10px} }
.mc-card{padding:20px 20px 18px;scroll-margin-top:96px}
.mc-ic{color:var(--cobalt-head)}
.mc-card h4{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25;letter-spacing:-.008em;margin:14px 0 0;
  display:flex;align-items:flex-start;gap:6px}
.mc-rule{position:relative;display:inline-flex;color:var(--alum);padding:5px;margin:-3px 0 -5px;border-radius:6px}
.mc-rule::after{content:"";position:absolute;inset:-11px}
.mc-rule:hover{color:var(--cobalt-head)}
.mc-rule .vi{width:13px;height:13px}
.mc-card p{font-size:15px;color:var(--alum);margin:8px 0 0;flex:1}
.mc-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:500;font-size:12.5px;color:var(--porcelain);margin-top:14px;white-space:nowrap}
.mc-g{width:12px;height:12px;flex:0 0 auto;overflow:visible}
.mc-g .g-fill{fill:var(--cobalt-head);filter:drop-shadow(0 0 3px rgba(122,163,255,.7))}
.mc-g .g-ring{fill:none;stroke:var(--cobalt-head);stroke-width:1.5}
.mc-g .g-half{fill:var(--cobalt-head)}
.mc-g .g-dash{fill:none;stroke:rgba(207,224,255,.7);stroke-width:1.5;stroke-dasharray:2.2 1.9}
.mc-chip.is-roadmap{color:var(--alum)}
.mc-card.is-roadmap{background:transparent;border-style:dashed;border-color:var(--line2)}
.mc-card.is-roadmap .mc-ic{color:var(--alum)}
.mc-foot{font-size:12.5px;color:var(--alum);margin-top:26px}

/* a capability's illustration (the /view glass grade of the kit's UI art): it follows the card's words and is framed
   as a design by its caption ("Design on the roadmap:" in bold). A roadmap card's art is small, dimmed like a roadmap
   tile's icon and framed dashed, and the card stays one column wide, so a roadmap capability never outweighs what is
   available now. Only an available-now card with art may span two columns, words left, art right.
   A pair (running, then the result) reads left to right. The art settles a few px when its panel opens. Nothing scales. */
.mi{margin:0;display:flex;flex-direction:column;gap:10px}
.mi-row{display:flex;align-items:flex-start;justify-content:center;gap:6px}
.mi-pic{position:relative;flex:0 1 260px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.mi-pic::before{content:"";position:absolute;left:12%;right:12%;top:8%;height:72%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(46,98,255,.12),rgba(46,98,255,0))}
.mi picture,.mi img{position:relative;display:block;width:100%;height:auto}
.mi-step{position:relative;font-size:12px;line-height:1.3;color:var(--alum);text-align:center}
.mi-arrow{flex:0 0 18px;width:18px;height:18px;align-self:center;margin-bottom:30px;fill:none;stroke:var(--cobalt-head);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mi figcaption{font-size:12.5px;line-height:1.45;color:var(--alum)}
.mi figcaption b{color:var(--porcelain);font-weight:500}
.mc-card>.mi{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line2)}
.mc-card.is-roadmap .mi-pic{flex-basis:180px;outline:1px dashed var(--line2);outline-offset:6px;border-radius:14px}
.mc-card.is-roadmap .mi img{opacity:.78;filter:saturate(.7)}
.mc-card.is-roadmap .mi-row{padding:6px 0}
.mk-kind.open .mi img{animation:mi-settle 1s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms + 160ms)}
@keyframes mi-settle{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.mk-kind.open .mc-card.is-roadmap .mi img{animation-name:mi-settle-dim}
@keyframes mi-settle-dim{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:.78}}
@media(min-width:601px){
  .mc-card.is-now[data-art]{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
    grid-template-rows:auto auto 1fr auto;column-gap:26px;align-content:start}
  .mc-card.is-now[data-art]>*{grid-column:1}
  .mc-card.is-now[data-art]>.mi{grid-column:2;grid-row:1/-1;align-self:center;padding:0;margin:0;border:0}
  .mc-card.is-now[data-art] .mc-chip{justify-self:start;align-self:end}
}
@media(max-width:600px){
  .mc-card>.mi{grid-column:2;margin-top:12px;padding-top:12px}
  .mc-card.is-roadmap .mi-pic{flex-basis:200px}
  .mi-pic{flex-basis:220px}
  .mi-pair .mi-row{gap:2px}
  .mi-arrow{flex-basis:14px;width:14px}
}

/* #flow: the flow builder's status, from the same data */
.fw-status{margin-top:clamp(36px,5.5vh,60px);padding:20px 22px 22px;border:1px dashed var(--line2);border-radius:var(--r-lg);
  background:radial-gradient(90% 140% at 0% 0%,rgba(46,98,255,.07),rgba(46,98,255,0) 60%)}
.fw-status.is-now{border-style:solid}
.fw-st-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:14px;color:var(--alum)}
.fw-st-kind{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--porcelain)}
.fw-st-kind .mk-g{width:22px;height:22px}
.fw-st-top .mc-chip{margin:0;padding:5px 11px 5px 9px;border:1px dashed var(--line2);border-radius:var(--r-full)}
.fw-st-caps{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fw-cap a{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border:1px dashed var(--line2);border-radius:12px;
  font-size:14px;color:var(--alum);text-decoration:none;transition:border-color .25s,color .25s,background-color .25s}
.fw-cap.is-now a{border-style:solid;color:var(--porcelain);background:var(--surface-2)}
.fw-cap a:hover{border-color:var(--cobalt-head);color:var(--porcelain);background:rgba(46,98,255,.08)}
.fw-st-body.has-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:20px 40px;align-items:center}
.fw-art{margin:16px 0 0}
@media(max-width:900px){ .fw-st-body.has-art{grid-template-columns:minmax(0,1fr)} .fw-art{max-width:520px} }
@media(max-width:600px){
  .fw-status{padding:16px}
  .fw-st-top{flex-direction:column;align-items:flex-start;gap:10px}
  .fw-st-caps{display:grid;grid-template-columns:minmax(0,1fr)}
}

/* phones: the rules' proof rows and the catalog cards take less height */
@media(max-width:600px){
  .rl-proof>div{display:grid;grid-template-columns:6.2em 1fr;gap:10px;align-items:baseline}
  .rl-ic{margin-bottom:10px}
  .rl-card{padding:18px 18px 16px}
  .mc-card{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;padding:16px}
  .mc-card>.vi{grid-row:span 2}
  .mc-card h4{margin:0}
  .mc-card .mc-chip{grid-column:2;margin-top:10px;justify-self:start}
}

@media (prefers-reduced-motion:reduce){
  .rl-card,.mc-card,.mk-face,.mk-ic,.mk-ic::after,.mk-chev,.mk-face::before{transition:none}
  .mk-face .mk-ic::before,.mk-face .mk-ic img,.mk-kind.open .mc-card,.mk-kind.open .mi img{animation:none!important}
  .mk-ic::before{opacity:1}
  .mk .mk-face:hover,.mk-face:hover .mk-ic{transform:none}
}