/* ================================================================
   product pages - one per product, the depth the flagships get.
   Same screens as the home page: each exactly one window, the scroll
   only ever moving to the next one and locking there.
   ================================================================ */
main{position:relative;z-index:1;overflow-x:clip}
html:has(main .screen){scroll-snap-type:y mandatory;scroll-padding-top:0}
:root{--sy:clamp(14px,3.6svh,44px);--sh:calc(100svh - var(--hdr) - 2 * var(--sy))}
.screen{position:relative;min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hdr) + var(--sy)) 0 var(--sy);scroll-snap-align:start;scroll-snap-stop:always}
/* past the first, a screen that fills its window starts a little under the bar, lower on a tall window; one whose
   content runs short holds it in the middle, never hanging from the top over an empty foot */
main .screen ~ .screen{padding-top:calc(var(--hdr) + var(--sy) + clamp(0px,(100svh - 900px) * 0.3,96px))}

.kick{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.kick a{color:inherit;transition:color .2s}
.kick a:hover{color:#fff}
.h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;line-height:1.04;letter-spacing:-0.034em;margin-top:var(--s4)}
.lead{margin-top:var(--s4);font-size:var(--fs-lead);line-height:1.55;color:var(--text);max-width:48ch;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* the hero's line is cut to fit at the build, on a break in the sentence, so it is never clamped mid-word here */
.split > .rv > .lead{display:block;-webkit-line-clamp:none;overflow:visible}
.lx-d{display:none}
@media (max-width:900px),(min-width:901px) and (max-height:820px){ .lx-m{display:none} }
/* a headline set as lines of its own: each kept whole, the size brought down to fit the longest in the column */
.p-h.two{container-type:inline-size}
.p-h.two .p-tl{font-size:min(clamp(30px,min(3.4vw,6.6svh),56px),11.6cqi)}
.p-h.two .hl{display:block;white-space:nowrap}
@media (min-width:901px) and (max-height:820px){ .p-h.two .p-tl{font-size:min(clamp(32px,min(3.8vw,6.6svh),60px),11.6cqi)} }
@media (max-width:900px){ .p-h.two .p-tl{font-size:min(clamp(28px,8.4vw,38px),11.6cqi)} }
/* the product's mark in place of its name over the headline; the name kept for readers and search, out of sight */
.p-mk img{display:block;width:30px;height:30px;filter:drop-shadow(0 0 12px rgba(151,252,228,0.45))}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* coverage: what it reaches, each ticked, in a neat grid two across, with more after it */
.p-cov{margin-top:var(--s4);max-width:560px;border:1px solid rgba(150,175,215,0.16);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,rgba(14,22,44,0.6),rgba(6,10,22,0.6));box-shadow:inset 0 1px 0 rgba(255,255,255,0.04)}
.p-cov-h{padding:9px 14px;border-bottom:1px solid rgba(150,175,215,0.12);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-dim)}
.p-cov ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.p-cov li{position:relative;display:flex;align-items:center;gap:9px;min-width:0;padding:8px 12px;font-size:12.5px;line-height:1.3;color:var(--text);
  border-right:1px solid rgba(150,175,215,0.08);border-bottom:1px solid rgba(150,175,215,0.08)}
.p-cov li:nth-child(2n){border-right:0}
.p-cov li:nth-last-child(-n+2){border-bottom:0}
.p-cov li::before{content:"";flex:none;width:15px;height:15px;border-radius:50%;background:rgba(84,232,175,0.12);box-shadow:inset 0 0 0 1px rgba(84,232,175,0.5)}
.p-cov li::after{content:"";position:absolute;left:18px;top:50%;width:3px;height:6px;margin-top:-4.5px;border:solid var(--live);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.p-cov li.more{color:var(--text-faint)}
.p-cov li.more::before{content:"+";display:grid;place-items:center;font-size:11px;line-height:1;color:var(--text-faint);background:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.p-cov li.more::after{display:none}
@media (max-width:900px){
  .p-cov li{padding:8px 10px;font-size:12px}
  .p-cov li::after{left:16px}
}
.links{margin-top:var(--s5)}
/* a pair of buttons the same width, side by side */
.links.even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:440px}
.links.even > a{justify-content:center;text-align:center}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,72px);align-items:center}

/* ---------- lead ---------- */
/* ---------- a flagship's way to its showcase: a pill over the first screen, its edge lit and turning ---------- */
@property --pfa{syntax:'<angle>';inherits:false;initial-value:0deg}
/* centred on the page, over everything on the first screen */
.p-flag-w{display:flex;justify-content:center;margin-bottom:clamp(14px,2.6svh,30px)}
.p-flag{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 7px 0 7px;border-radius:999px;
  font-family:var(--font-display);font-size:14.5px;font-weight:600;letter-spacing:-0.01em;color:var(--text);
  background:linear-gradient(180deg,rgba(20,32,66,0.92),rgba(8,13,30,0.94));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(150,190,255,0.2),0 18px 44px -18px rgba(93,139,255,0.75),inset 0 1px 0 rgba(255,255,255,0.08);transition:transform .35s var(--spring),box-shadow .35s var(--ease)}
.p-flag::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--pfa),rgba(95,224,255,0) 0deg,rgba(95,224,255,0.95) 50deg,rgba(93,139,255,0.7) 110deg,rgba(95,224,255,0) 190deg,rgba(95,224,255,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:pfTurn 4.5s linear infinite}
@keyframes pfTurn{to{--pfa:360deg}}
.p-flag-k{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:999px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:#bff3ff;background:rgba(95,224,255,0.1);box-shadow:inset 0 0 0 1px rgba(95,224,255,0.36)}
.p-flag-k i{width:6px;height:6px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}
.p-flag b{font-weight:600;white-space:nowrap}
.p-flag-a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-family:var(--font-display);font-size:15px;color:#05070f;
  background:linear-gradient(180deg,#f2f6ff,#c9d8ff);box-shadow:0 4px 14px -4px rgba(150,190,255,0.8);transition:transform .35s var(--spring)}
.p-flag:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(150,190,255,0.32),0 24px 52px -18px rgba(95,224,255,0.85),inset 0 1px 0 rgba(255,255,255,0.1)}
.p-flag:hover .p-flag-a{transform:translateX(3px)}
.p-flag:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px}
@media (max-width:900px){ .p-flag{height:40px;gap:9px;font-size:13px} .p-flag-k{height:26px;padding:0 9px;font-size:11px} .p-flag-a{width:26px;height:26px;font-size:13px} }
@media (prefers-reduced-motion:reduce){ .p-flag::before{animation:none} }
/* a screen with the cue at its foot keeps the room for it */
.screen.cued{padding-bottom:calc(var(--sy) + 54px)}
.p-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s4);font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.04em;color:var(--text-faint);transition:color .2s}
.p-back:hover{color:var(--text)}
.p-h{margin-top:var(--s4)}
.p-nm{display:block;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s3)}
.p-tl{display:block;font-family:var(--font-display);font-size:clamp(30px,min(3.4vw,6.6svh),56px);font-weight:600;line-height:1.02;letter-spacing:-0.04em}
/* the tags and the ways in: one row each, scrolled sideways when it runs past the column; while there is more to
   the right its far end fades out (.ovf, set by product.js), and once scrolled to the end it stops fading */
.p-tags{margin-top:clamp(16px,3svh,26px);display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.split > .rv > .links{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.split > .rv > .links > *{flex:none}
.p-tags.ovf:not(.end),.split > .rv > .links.ovf:not(.end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.p-tags::-webkit-scrollbar,.split > .rv > .links::-webkit-scrollbar{display:none}
.p-tags a{flex:none;white-space:nowrap}
.p-tags a{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--text-dim);padding:5px 10px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(93,139,255,0.05);transition:color .2s,border-color .2s}
.p-tags a:hover{color:#fff;border-color:rgba(160,200,255,0.5)}
.p-stage-chip{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;padding:4px 8px;border-radius:3px;
  color:#04070f;background:linear-gradient(180deg,#cfe7ff,#6aa9ff)}
.p-stage-chip.beta,.p-stage-chip.experiment{color:#ffe7b0;background:rgba(255,190,90,0.12);box-shadow:inset 0 0 0 1px rgba(255,190,90,0.4)}
.p-stage-chip.gen{color:var(--text-dim);background:rgba(150,180,255,0.08);box-shadow:inset 0 0 0 1px var(--line-2)}

/* facts - recessed wells, read as figures, not buttons: a column each, all the same width, the figures on one row and
   their labels on the next whatever either's length, so none sits higher than its neighbour */
.p-facts{margin-top:clamp(18px,3.4svh,30px);display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));grid-template-rows:auto auto;
  gap:10px;max-width:calc(var(--n,3) * 168px)}
.p-facts .p-fact{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:5px;align-content:start}
.p-facts .p-fact b{font-size:clamp(16px,1.45vw,21px);line-height:1.12;overflow-wrap:break-word}
.p-facts .p-fact span{line-height:1.35;align-self:end}
.p-fact{display:flex;flex-direction:column;gap:4px;padding:10px 14px 11px;border-radius:10px;min-width:0;
  background:linear-gradient(180deg,rgba(1,3,10,0.82),rgba(5,9,22,0.62));
  box-shadow:inset 0 2px 7px rgba(0,0,0,0.75),inset 0 0 0 1px rgba(150,180,255,0.08),0 1px 0 rgba(170,200,255,0.07)}
.p-fact b{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.05;letter-spacing:-0.03em;
  background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-fact span{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim)}
/* the hero's figures: one row, each figure and its label a line apiece, never wrapped - a well as wide as its words,
   the row shared out between them - and scrolled sideways, fading, where three will not fit */
.p-facts.row{display:flex;flex-wrap:nowrap;gap:10px;max-width:560px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.p-facts.row::-webkit-scrollbar{display:none}
.p-facts.row .p-fact{display:flex;flex:1 0 auto;grid-row:auto}
.p-facts.row .p-fact b,.p-facts.row .p-fact span{white-space:nowrap}
/* three that will not fit across stand as rows instead (.stack, set by product.js): the figure to the left, its label
   to the right, each still a single line */
.p-facts.row.stack{flex-direction:column;gap:6px;max-width:460px;overflow:visible}
.p-facts.row.stack .p-fact{flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 14px 9px}
.p-facts.row.stack .p-fact b{font-size:18px;flex:none}
.p-facts.row.stack .p-fact span{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right}
/* figures set plain (content "plainfacts"): no wells, the figure over its label, spaced like a row of readings */
.p-facts.row.plain{gap:clamp(22px,2.4vw,34px)}
.p-facts.row.plain .p-fact{flex:none;padding:0;border-radius:0;background:none;box-shadow:none;gap:7px}
.p-facts.row.plain .p-fact b{font-size:clamp(21px,1.75vw,26px);background:none;color:var(--text);-webkit-text-fill-color:currentColor}
.p-facts.row.plain .p-fact span{align-self:start;font-size:10.5px;letter-spacing:0.16em;color:var(--text-faint)}
.p-facts.row.ovf:not(.end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}

/* a lead given as steps (build.mjs): a line over them set as a small heading, numbered in the mono, then the line after
   them; and the fine print under the links */
.p-intro{margin-top:var(--s5);font-family:var(--font-display);font-weight:600;font-size:clamp(21px,1.8vw,26px);line-height:1.2;letter-spacing:-0.02em;color:var(--text);max-width:22ch;text-wrap:balance}
.p-intro + .p-steps{margin-top:var(--s3)}
.p-steps{margin:var(--s4) 0 0;padding:0;list-style:none;counter-reset:st;font-size:var(--fs-lead);line-height:1.55;color:var(--text);max-width:48ch}
.p-steps li{counter-increment:st;display:flex;gap:12px}
.p-steps li + li{margin-top:4px}
.p-steps li::before{content:counter(st) ".";flex:none;min-width:1.3em;font-family:var(--font-mono);font-size:0.82em;line-height:1.9;color:var(--text-dim)}
.p-steps a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(160,200,255,0.45);text-underline-offset:3px}
.p-steps a:hover{text-decoration-color:currentColor}
.p-done{margin-top:var(--s3);font-size:var(--fs-lead);line-height:1.55;color:var(--text)}
.p-done .grad{font-weight:600}
.p-fine{margin-top:var(--s3);font-size:11px;line-height:1.5;color:var(--text-faint);text-align:left}
.p-own{margin-top:var(--s4);display:inline-block;font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:0.04em;color:#cfeeff;
  padding:6px 10px;border-radius:4px;background:rgba(4,10,24,0.86);border:1px solid rgba(95,224,255,0.34)}
.p-built{margin-top:var(--s3);display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.04em;color:var(--text-dim)}
.p-built:before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent-2);box-shadow:0 0 8px rgba(95,224,255,0.7)}
.p-built a{color:#dff4ff;text-decoration:underline;text-decoration-color:rgba(95,224,255,0.5);text-underline-offset:3px}
.p-built a:hover{text-decoration-color:var(--accent-2)}
.p-notes{margin-top:clamp(16px,3svh,26px);display:flex;flex-direction:column;border-top:1px solid var(--line)}
.p-notes div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.p-notes dt{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-faint);padding-top:2px}
.p-notes dd{font-size:13.5px;line-height:1.45;color:var(--text-dim)}
/* a closing line under the notes, where a page has one (content "coda") */
.p-coda{margin-top:var(--s4);font-size:15px;line-height:1.55;color:var(--text-dim)}
.p-coda span{display:block}
/* a page's title over both columns (content "banner"): a small mark, the title centred, an aside under it */
.p-ban{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(18px,3.6svh,40px)}
.p-ban img{display:block;width:28px;height:28px;margin-bottom:12px}
.p-ban-t{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,min(3.4vw,6svh),52px);line-height:1.05;letter-spacing:-0.03em;color:var(--text)}
.p-ban-s{margin-top:6px;font-family:var(--font-mono);font-size:10px;line-height:1;letter-spacing:0.12em;color:var(--text-faint)}
/* with no title of its own, the left column's way back stands on its own line */
.split.banned .p-back{display:flex;width:max-content;margin-bottom:var(--s3)}

/* ---------- a manual (content "manual"): the steps down the left, the way to the full guide under them, and on the
   right a drawing of how it works. The two columns start and end level: the drawing's box takes the steps' height ---------- */
#manual .man-b{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:stretch;margin-top:clamp(18px,3svh,32px)}
#manual .man-b.solo{grid-template-columns:minmax(0,1fr);max-width:640px}
.man-steps{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.man-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:16px 0;border-top:1px solid var(--line)}
.man-n{padding-top:5px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.14em;color:var(--accent-2)}
.man-steps b{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-0.015em;color:var(--text)}
.man-steps p{margin-top:4px;max-width:48ch;font-size:14px;line-height:1.55;color:var(--text-dim)}
.man code{font-family:var(--font-mono);font-size:0.86em;color:#dff4ff;background:rgba(95,224,255,0.07);border:1px solid rgba(95,224,255,0.18);border-radius:4px;padding:1px 5px;white-space:nowrap}
.man p a{color:#dff4ff;text-decoration:underline;text-decoration-color:rgba(95,224,255,0.5);text-underline-offset:3px}
.man p a:hover{text-decoration-color:var(--accent-2)}
.man-more{margin-top:var(--s5)}
.man-foot{margin-top:var(--s3);font-size:13.5px;line-height:1.55;color:var(--text-faint)}
.man-fig{margin:0;display:flex;align-items:center;justify-content:center;padding:clamp(20px,2vw,28px);border-radius:12px;border:1px solid var(--line-2);container-type:inline-size;
  background:radial-gradient(120% 90% at 50% 0%,rgba(93,139,255,0.08),transparent 70%),var(--bg);
  box-shadow:0 24px 50px -32px rgba(0,0,0,0.9),inset 0 1px 0 rgba(255,255,255,0.04)}
.mo #manual :is(.man-steps li,.man-more,.man-foot,.man-fig){opacity:0;translate:0 18px;transition:opacity .8s var(--ease) calc(var(--k) * 90ms + 150ms),translate 1s var(--ease) calc(var(--k) * 90ms + 150ms)}
.mo #manual.on :is(.man-steps li,.man-more,.man-foot,.man-fig){opacity:1;translate:none}
/* the drawing (scripts/products/hlresolver.mjs): the way along the top, hlnames under the gateway that reads it */
.mf{width:100%;font-size:14px;color:var(--text)}
.mf svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--text-faint);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mf-flow{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);grid-template-rows:auto 40px auto;
  grid-template-areas:"br a1 rs a2 gw a3 site" ". . . . up . ." ". . . . rec . .";align-items:stretch}
.fl-n{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 12px 13px;border-radius:10px;
  background:rgba(11,18,40,0.9);border:1px solid var(--line-2)}
.fl-n i{display:flex;margin-bottom:8px}
.fl-n i svg{width:20px;height:20px;stroke:var(--text-dim)}
.fl-n b{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-0.01em;color:var(--text)}
.fl-n code{max-width:100%;overflow:hidden;font-family:var(--font-mono);font-size:11.5px;white-space:nowrap;color:var(--text-dim)}
.fl-br{grid-area:br}.fl-rs{grid-area:rs}.fl-gw{grid-area:gw}.fl-site{grid-area:site}.fl-rec{grid-area:rec}
.fl-a1{grid-area:a1}.fl-a2{grid-area:a2}.fl-a3{grid-area:a3}.fl-up{grid-area:up}
.fl-a{display:flex;align-items:center;justify-content:center}
.fl-a svg{stroke:var(--text-faint)}
.fl-rec code{color:var(--accent-2);letter-spacing:0.06em}
.fl-site{border-color:rgba(84,232,175,0.45);box-shadow:0 0 24px -8px rgba(84,232,175,0.5)}
.fl-site code{color:var(--text)}
.fl-site .mf-tick{position:absolute;top:13px;right:12px}
/* the extension's own check: down from the resolver and across into hlnames, at its middle */
.fl-chk{grid-area:2 / 3 / 4 / 5;position:relative;height:calc(50% + 20px);margin-left:calc((100% - 24px) / 2);pointer-events:none;
  border-left:1.5px dashed rgba(84,232,175,0.5);border-bottom:1.5px dashed rgba(84,232,175,0.5);border-bottom-left-radius:10px}
.fl-chk::after{content:"";position:absolute;right:1px;bottom:-4.5px;width:7px;height:7px;border:solid rgba(84,232,175,0.8);border-width:1.5px 1.5px 0 0;rotate:45deg}
.fl-chk em{position:absolute;left:10px;top:calc(50% - 8px);font-style:normal;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;color:rgba(84,232,175,0.85)}
.mf-tick{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--live)}
.mf-tick svg{width:12px;height:12px;stroke:#05221b;stroke-width:2.2}
/* a narrow box runs the way down instead: each step a row, hlnames between the gateway and the site its record names */
@container (max-width:559px){
  .mf-flow{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:4px;
    grid-template-areas:"br" "a1" "rs" "a2" "gw" "up" "rec" "a3" "site"}
  .fl-n{flex-direction:row;align-items:center;gap:10px;padding:10px 12px}
  .fl-n i{margin:0}
  .fl-n i svg{width:18px;height:18px}
  .fl-n code{margin-left:auto}
  .fl-a{height:16px}
  .fl-a1 svg,.fl-a2 svg,.fl-a3 svg{rotate:90deg}
  .fl-site .mf-tick{position:static;margin-left:-2px}
  .fl-chk{display:none}
}
@media (max-width:900px){
  #manual .man-b{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .man-steps li{padding:12px 0}
  .man-steps b{font-size:17px}
  .man-more{margin-top:var(--s4)}
  .man-fig{padding:14px}
  .fl-n{padding:8px 12px}
  .fl-a{height:12px}
}

/* the screen - every shot an object in space */
.scr{position:relative;border-radius:var(--r);background:#060a16;
  box-shadow:0 0 0 1px rgba(160,195,255,0.15),0 50px 110px -44px rgba(0,0,0,0.95),0 34px 90px -60px var(--glow,rgba(93,139,255,0.75));
  transform:perspective(2200px) rotateY(var(--ry,-9deg)) rotateX(var(--rx,3deg));transition:transform 1s var(--ease)}
.scr > img,.scr > video{width:100%;height:auto;border-radius:inherit;position:relative;z-index:1}
.scr > video{display:block;background:#060a16}
.scr::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10);background:linear-gradient(150deg,rgba(150,210,255,0.09),transparent 40%)}
.scr .amb{position:absolute;inset:8% 5% -7%;z-index:0;border-radius:inherit;background:var(--amb) center/cover no-repeat;
  filter:blur(58px) saturate(1.6);opacity:0;transition:opacity 1.4s var(--ease);pointer-events:none}
.scr.lit .amb{opacity:0.4}
@media (hover:hover){ .scr.hov:hover{--ry:-4deg;--rx:1deg} }
.p-stage{position:relative;padding:0 9% 6% 0;margin-right:calc(-0.6 * var(--gutter))}
.p-stage.solo{padding:0}
.p-stage .scr > img,.p-stage .scr > video,.p-stage .tour img{aspect-ratio:16/10;object-fit:cover;object-position:top center;max-height:calc(var(--sh) - 60px)}
.p-stage .scr > video{object-fit:contain;object-position:center}
.phone{position:absolute;right:0;bottom:0;width:20%;z-index:3;border-radius:28px;padding:5px;
  background:linear-gradient(160deg,#323e5c,#0b1022 40%,#1a2340);
  box-shadow:0 0 0 1px rgba(160,195,255,0.22),inset 0 1px 0 rgba(255,255,255,0.18),0 50px 90px -30px rgba(0,0,0,1),0 0 70px -24px rgba(95,224,255,0.45);
  transform:perspective(1400px) rotateY(-16deg) rotateX(4deg);transition:transform 1s var(--ease)}
.phone img{width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:23px;display:block}
@media (hover:hover){ .p-stage:hover .phone{transform:perspective(1400px) rotateY(-8deg) rotateX(2deg) translateY(-8px)} }
/* a drawn hero (content "art", scripts/products/fyzx.mjs): the still, never cropped, so the drawing over it lines up
   corner to corner; square on a phone. Over it only what moves - a frame up the diagonal by light, its acknowledgement back
   down by sound and slower, each half lighting for a moment as its carrier fires; nothing runs over the mark */
.scr.art{--fx-light:#4d8cff;--fx-sound:#ff5fa4;--fx-hole:17% 27%;max-width:calc((var(--sh) - 60px) * 1.6)}
.scr.art picture{display:block;position:relative;z-index:1;border-radius:inherit}
.scr.art img{display:block;width:100%;height:auto;aspect-ratio:16/10;border-radius:inherit}
.fxl{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;border-radius:inherit;
  -webkit-mask:radial-gradient(var(--fx-hole) at 50% 50%,transparent 74%,#000 100%);mask:radial-gradient(var(--fx-hole) at 50% 50%,transparent 74%,#000 100%)}
.fxl-f{opacity:0}
.fxl-f.l{fill:var(--fx-light)}
.fxl-f.s{fill:var(--fx-sound)}
.fxl-p{fill:none;stroke-width:3.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:0.06 2;stroke-dashoffset:0.06}
.fxl-p.up{stroke:#c3d6ff;filter:drop-shadow(0 0 5px var(--fx-light))}
.fxl-p.dn{stroke:#ffbad8;filter:drop-shadow(0 0 5px var(--fx-sound))}
.screen.on .fxl-p.up,html:not(.mo) .fxl-p.up{animation:fxUp 6.4s ease-in-out 0.8s infinite}
.screen.on .fxl-p.dn,html:not(.mo) .fxl-p.dn{animation:fxDn 6.4s ease-in-out 0.8s infinite}
.screen.on .fxl-f.l,html:not(.mo) .fxl-f.l{animation:fxFl 6.4s ease-out 0.8s infinite}
.screen.on .fxl-f.s,html:not(.mo) .fxl-f.s{animation:fxFs 6.4s ease-out 0.8s infinite}
@keyframes fxUp{0%{stroke-dashoffset:0.06}20%,100%{stroke-dashoffset:-1}}
@keyframes fxDn{0%,30%{stroke-dashoffset:0.06}72%,100%{stroke-dashoffset:-1}}
@keyframes fxFl{0%{opacity:0}3%{opacity:0.08}20%,100%{opacity:0}}
@keyframes fxFs{0%,30%{opacity:0}34%{opacity:0.07}72%,100%{opacity:0}}
@media (max-width:700px){ .scr.art{--fx-hole:26% 26%} .scr.art img{aspect-ratio:1} }
@media (prefers-reduced-motion:reduce){ .fxl{display:none} }
/* a drawn board in place of the pictures (content "board", scripts/products/boards.mjs), in the HIP-4 options board's
   colours: the parts by name on a dark page, a light on what is live, and what flows between the parts travelling its
   wires. Wide beside the words, upright on a phone; its reflection under it as the flagship's screens have */
.scr.brd{--glow:rgba(45,216,156,0.6);max-width:calc((var(--sh) - 60px) * 1.6);-webkit-box-reflect:below 12px linear-gradient(transparent 84%,rgba(255,255,255,0.07))}
.scr.brd .rb{display:block;width:100%;height:auto;border-radius:inherit;position:relative;z-index:1}
.rb{--rb-page:#05090e;--rb-panel:#0b0f12;--rb-bar:#0f1319;--rb-line:#1a2027;--rb-raised:#1b222b;--rb-text:#e6e9ee;--rb-dim:#8b94a1;--rb-faint:#5b6470;
  --rb-g:#2dd89c;--rb-r:#d44a5f;--rb-c:#5fe0ff;--rb-mint:#5fe8c8;font-family:var(--font-body);font-variant-numeric:tabular-nums}
.rb-page{fill:var(--rb-page)}
.rb-grid{fill:rgba(150,185,255,0.12)}
.rb-bar{fill:var(--rb-bar)}
.rb-ln{stroke:var(--rb-line);stroke-width:1}
.rb-brand{font-size:12.5px;font-weight:600;letter-spacing:0.3em;fill:var(--rb-text)}
.rb-net{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.16em;fill:var(--rb-g)}
.rb-live{fill:var(--rb-g)}
.rb-ping{transform-box:fill-box;transform-origin:center;animation:rbPing 1.8s ease-out infinite}
@keyframes rbPing{0%{opacity:0.75;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
.rb-zone{fill:none;stroke-width:1}
.rb-zone.off{stroke:rgba(139,148,161,0.34);stroke-dasharray:4 5}
.rb-zone.on{stroke:rgba(95,224,255,0.24);fill:rgba(95,224,255,0.025)}
.rb-zl{font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;fill:var(--rb-faint)}
.rb-zl.on{fill:rgba(95,224,255,0.62)}
.rb-zone.on.v{stroke:rgba(157,140,255,0.3);fill:rgba(157,140,255,0.03)}
.rb-zl.on.v{fill:rgba(180,166,255,0.7)}
.rb-n{fill:var(--rb-panel);stroke:var(--rb-line)}
.rb-n.g{fill:#0a1411;stroke:rgba(45,216,156,0.6)}
.rb-n.c{fill:#09121a;stroke:rgba(95,224,255,0.5)}
.rb-n.v{fill:#0e0d1c;stroke:rgba(157,140,255,0.6)}
.rb-n.a{fill:#14100a;stroke:rgba(255,194,122,0.5)}
.rb-rim{fill:none;stroke-width:8;opacity:0.14;filter:blur(7px)}
.rb-rim.g{stroke:var(--rb-g)}
.rb-rim.c{stroke:var(--rb-c)}
.rb-rim.v{stroke:#9d8cff}
.rb-rim.a{stroke:#ffc27a}
.rb-dot{fill:var(--rb-dim)}
.rb-dot.g{fill:var(--rb-g);filter:drop-shadow(0 0 4px var(--rb-g))}
.rb-dot.c{fill:var(--rb-c);filter:drop-shadow(0 0 4px var(--rb-c))}
.rb-dot.v{fill:#b4a6ff;filter:drop-shadow(0 0 4px #9d8cff)}
.rb-dot.a{fill:#ffc27a;filter:drop-shadow(0 0 4px #ffc27a)}
.rb-t{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-0.01em;fill:var(--rb-text)}
.rb-w{fill:none;stroke:rgba(139,148,161,0.4);stroke-width:1.2}
.rb-w.b{stroke-dasharray:3 4}
.rb-p.g{fill:var(--rb-g);filter:drop-shadow(0 0 3px var(--rb-g))}
.rb-p.c{fill:var(--rb-c);filter:drop-shadow(0 0 3px var(--rb-c))}
.rb-p.b{fill:#86a8ff;filter:drop-shadow(0 0 3px #86a8ff)}
.rb-p.a{fill:#ffc27a;filter:drop-shadow(0 0 3px #ffc27a)}
.rb-p.v{fill:#c8b0ff;filter:drop-shadow(0 0 3px #c8b0ff)}
.rb-ask,.rb-bid{transform-box:fill-box;transform-origin:right center;animation:rbBar 2.8s ease-in-out var(--d,0s) infinite alternate}
.rb-ask{fill:rgba(212,74,95,0.55)}
.rb-bid{fill:rgba(45,216,156,0.5)}
@keyframes rbBar{0%{transform:scaleX(1)}100%{transform:scaleX(0.7)}}
.rb-mid{stroke:var(--rb-text);stroke-opacity:0.35;stroke-dasharray:2 3}
.rb-seg{transform-box:fill-box;transform-origin:right center;animation:rbBar 2.8s ease-in-out var(--d,0s) infinite alternate}
.rb-seg.ask{opacity:0.5}
.rb-seg.bid{opacity:0.88}
.rb-seg.g{fill:var(--rb-g)}
.rb-seg.a{fill:#ffc27a}
.rb-seg.c{fill:var(--rb-c)}
.scr.brd.flat{transform:none}
.rb-ring{fill:none;stroke:rgba(95,224,255,0.45);stroke-width:1.2}
.rb-ring.in{stroke-dasharray:3 5;transform-box:fill-box;transform-origin:center;animation:rbSpin 16s linear infinite}
.rb-tick{stroke:rgba(95,224,255,0.55);stroke-width:1.4;stroke-linecap:round}
@keyframes rbSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .rb-p{display:none} .rb-ping,.rb-ask,.rb-bid,.rb-seg,.rb-ring.in{animation:none} }
.tour{position:relative;overflow:hidden;border-radius:inherit;z-index:1}
.tour img{display:block;width:100%;height:auto;border-radius:inherit;opacity:0;transform:scale(1.035);transition:opacity 1.1s var(--ease),transform 7s cubic-bezier(0.2,0.6,0.2,1)}
.tour img.on{opacity:1;transform:scale(1)}
.tour img + img{position:absolute;inset:0;height:100%}
.p-meta{display:flex;align-items:center;justify-content:flex-end;gap:var(--s4);margin-top:var(--s5)}
.dots{display:flex;gap:7px;align-items:center;flex:none}
.dots i{width:7px;height:7px;border-radius:99px;background:rgba(150,180,255,0.24);cursor:pointer;transition:width .45s var(--ease),background .3s}
.dots i.on{width:28px;background:var(--accent-2);box-shadow:0 0 10px rgba(95,224,255,0.6)}

/* a picture still on its way waits unseen over its frame, then fades in whole */
img.lz{transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
img.lz:not(.ld){opacity:0 !important}

/* ---------- facets ---------- */
#facets{overflow:clip}
#facets > .wrap{z-index:1}
/* the scene behind them (scripts/products/scenes.mjs), a little taller than the screen so it can drift as the page moves */
.fx{position:absolute;inset:-14svh 0;z-index:0;pointer-events:none;overflow:hidden}
.fx > *{position:absolute;display:block}
/* a scene shades to the ground at its edges and under the header, so it sits behind the screen rather than on it */
.fx::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,4,12,0.55),transparent 24%),radial-gradient(120% 95% at 50% 46%,transparent 52%,rgba(2,4,12,0.62) 100%)}
/* the cue under a scene reads against it */
.screen .hero-cue span{color:var(--text-dim);text-shadow:0 0 12px #02040c,0 0 3px #02040c}

/* --- the scene --- */
/* stage: light falling on the cards from above and the pool it leaves on the floor under them - no lines, only light,
   moving so slowly it reads as still */
.sc-spot{left:10%;right:10%;top:-24%;height:92%;
  background:radial-gradient(50% 60% at 50% 0%,color-mix(in srgb,var(--tint) 46%,transparent),color-mix(in srgb,var(--tint) 13%,transparent) 48%,transparent 72%);
  animation:scDrift 16s ease-in-out infinite alternate}
.sc-pool{left:6%;right:6%;bottom:4%;height:44%;
  background:radial-gradient(48% 44% at 50% 56%,color-mix(in srgb,var(--accent-2) 16%,transparent),color-mix(in srgb,var(--tint) 13%,transparent) 50%,transparent 76%);
  animation:scDrift 22s ease-in-out -8s infinite alternate-reverse}
@keyframes scDrift{from{transform:translateX(-2.5%) scale(1)}to{transform:translateX(2.5%) scale(1.05)}}
@media (prefers-reduced-motion:reduce){ .sc-spot,.sc-pool{animation:none} }

/* --- the cards: frosted glass with a grain to it, lit at the top edge; under the pointer the glass catches the light
   along its rim and only faintly inside --- */
@property --hl{syntax:'<number>';inherits:true;initial-value:0}
.facets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);perspective:1600px}
.facet{--d0:calc(var(--k,0) * 240ms + 180ms);--d:calc(var(--d0) + 220ms);
  position:relative;isolation:isolate;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  border:1px solid rgba(150,180,255,0.13);
  background:
    radial-gradient(620px circle at var(--mx,50%) var(--my,0%),rgba(120,170,255,calc(0.055 * var(--hl))),transparent 46%),
    linear-gradient(180deg,rgba(255,255,255,0.04),transparent 30%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(16,25,54,0.74),rgba(6,10,24,0.92));
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 1px 1px rgba(0,0,0,0.35),0 30px 60px -40px rgba(0,0,0,0.9);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(calc(var(--hl) * -3px));
  transition:--hl .7s var(--ease),transform .7s var(--ease),border-color .6s var(--ease),box-shadow .7s var(--ease)}
/* the rim, lit only near the pointer */
.facet::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;padding:1px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(190,225,255,calc(0.55 * var(--hl))),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* the light along the top edge, drawn across it as the card lands */
.facet::after{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;z-index:4;pointer-events:none;transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,rgba(180,225,255,0.75),transparent)}
@media (hover:hover){
  .facet:hover{--hl:1;border-color:rgba(160,195,255,0.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.09),0 1px 1px rgba(0,0,0,0.35),0 40px 80px -40px rgba(0,0,0,0.95),0 0 80px -50px color-mix(in srgb,var(--tint) 90%,transparent)}
  .facet:hover .facet-img img{transform:translate3d(-1.5%,-1.5%,0)}
}
/* the stage over each card: a lit field of dots, with the product's screen set into it or a drawing of the idea */
.facet-img{position:relative;width:100%;aspect-ratio:16/10;max-height:calc(var(--sh) * 0.46);overflow:hidden;border-bottom:1px solid rgba(150,180,255,0.1);
  background:radial-gradient(90% 80% at 50% 0%,color-mix(in srgb,var(--tint) calc(20% + var(--hl) * 8%),transparent),transparent 70%),
    radial-gradient(rgba(150,185,255,0.15) 1px,transparent 1.3px) 0 0/14px 14px,#050811}
.facet-img img{position:absolute;left:7%;top:10%;width:122%;max-width:none;height:auto;border-radius:9px 0 0 0;
  box-shadow:0 0 0 1px rgba(150,190,255,0.24),0 24px 50px -12px rgba(0,0,0,0.95),0 0 60px -20px color-mix(in srgb,var(--tint) 80%,transparent);transition:transform 1.4s var(--ease)}
.facet-img::after{content:"";position:absolute;inset:auto 0 0;height:34%;z-index:2;background:linear-gradient(180deg,transparent,rgba(5,8,18,0.7));pointer-events:none}
.facet-img.fig::after{height:22%;background:linear-gradient(180deg,transparent,rgba(5,8,18,0.5))}
.facet-n{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.12em;line-height:1;color:#cfe0ff;
  padding:5px 8px;border-radius:999px;background:rgba(4,10,24,0.72);box-shadow:inset 0 0 0 1px rgba(150,185,255,0.2)}
.facet-body{position:relative;z-index:2;padding:var(--s5) var(--s5) var(--s6);display:flex;flex-direction:column;flex:1}
/* cards side by side line up part for part: the picture, the label, the title, the words and the links each sit on a
   row shared across the cards, however long any one of them runs, so no title or paragraph starts higher than its
   neighbour's */
.facets{grid-template-rows:auto auto auto auto 1fr;row-gap:0}
.facet{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;padding-bottom:var(--s6)}
.facet-body{display:contents}
.facet-body > *{position:relative;z-index:2;margin-inline:var(--s5)}
.facet-body > :first-child{margin-top:var(--s5)}
/* a product's facets as one board filling the screen: the first across the top, the other two side by side under it,
   each with its words to the left of its picture; the top takes the room the two under it leave */
@media (min-width:901px){
  #facets .facets{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(min-content,1fr) auto;row-gap:var(--s4);
    min-height:min(calc(100svh - var(--hdr) - 2 * var(--sy) - 54px - clamp(0px,(100svh - 900px) * 0.3,96px)),860px)}
  #facets .facet{grid-row:auto;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,3fr) minmax(0,2fr);padding-bottom:0}
  #facets .facet:first-child{grid-column:1 / -1;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  #facets .facet-img{grid-column:2;grid-row:1;aspect-ratio:auto;max-height:none;height:100%;min-height:200px;border-bottom:0;border-left:1px solid rgba(150,180,255,0.1)}
  #facets .facet-body{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:var(--s5) var(--s6) var(--s6)}
  #facets .facet-body > *{margin-inline:0}
  #facets .facet-body > :first-child{margin-top:0}
  #facets .facet:first-child .facet-t{font-size:clamp(24px,min(2.3vw,4.4svh),36px);line-height:1.1;margin-top:var(--s3)}
  #facets .facet:first-child p{font-size:clamp(15px,1.12vw,17px);margin-top:var(--s3);max-width:46ch}
  #facets .facet:first-child .facet-img img{left:6%;top:9%;width:108%}
}
@media (min-width:901px) and (max-height:820px){
  #facets .facet-body{padding:var(--s4) var(--s5)}
  #facets .facet p{font-size:13.5px;line-height:1.55}
}
@media (min-width:901px){
  .facets > .facet:nth-child(n+4){margin-top:var(--s4)}
  .facets.two > .facet:nth-child(3){margin-top:var(--s4)}
}
.facet-k{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent)}
.facet-t{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:600;letter-spacing:-0.022em;line-height:1.18;margin-top:10px}
.facet p{margin-top:10px;font-size:14.5px;color:var(--text-dim);line-height:1.6}

/* the drawings (scripts/products/figs.mjs): one line weight, the site's blues, live green and rose for up and down */
.fg{position:absolute;inset:5% 4% 3%;width:92%;height:92%;display:block;overflow:visible}
.fg text{font-family:var(--font-mono);font-size:8px;letter-spacing:0.08em}
.fg .ft{fill:#c4cff0;font-size:8.5px}
.fg .ft.sm{font-size:7px;letter-spacing:0.04em}
.fg .ft.hi{fill:#9fdcff}
.fg .ft.up,.fg .ft.ok{fill:#54e8af}
.fg .ft.dn{fill:#ff7a94}
.fg .fm{fill:#66739c;font-size:7.5px}
.fg .fs{fill:#9aa7cf;font-size:7px;letter-spacing:0.12em}
.fg .fs.on{fill:#bff3ff}
.fg .fbig{fill:#e9edff;font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:-0.03em}
.fg .fbig.sm{font-size:16px}
.fg .fl{fill:none;stroke:rgba(150,180,255,0.17);stroke-width:1}
.fg .fl.dash{stroke-dasharray:2 4;animation:fgDash 1.4s linear infinite}
.fg .fp{fill:rgba(12,20,44,0.94);stroke:rgba(150,180,255,0.2);stroke-width:1}
.fg .fp2{fill:rgba(20,32,70,0.97);stroke:rgba(140,190,255,0.45);stroke-width:1}
.fg .fa{fill:none;stroke:#78b8ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fg .fa.thick{stroke:#5d8bff;stroke-width:7}
.fg .ftrack{fill:none;stroke:rgba(150,180,255,0.1);stroke-width:7;stroke-linecap:round}
.fg .farea{fill:rgba(93,139,255,0.13)}
.fg .fc{fill:none;stroke:#bff3ff;stroke-width:2;stroke-linecap:round;stroke-dasharray:0.07 1;stroke-dashoffset:1.07;animation:fgRun 2.8s linear infinite}
.fg .fdot{fill:#5fe0ff}
.fg .fwd{fill:rgba(150,180,255,0.3)}
.fg .fline{fill:rgba(150,180,255,0.15)}
.fg .fline.hi{fill:rgba(120,184,255,0.55)}
.fg .fbar{fill:rgba(93,139,255,0.3)}
.fg .fbar.on{fill:#5d8bff}
.fg .fup{fill:rgba(84,232,175,0.55)}
.fg .fdn{fill:rgba(255,107,138,0.5)}
.fg .fdn.line{fill:none;stroke:rgba(255,107,138,0.75);stroke-dasharray:3 3}
.fg .fwk{fill:none;stroke-width:1}
.fg .fwk.up{stroke:rgba(84,232,175,0.7)}
.fg .fwk.dn{stroke:rgba(255,107,138,0.7)}
.fg .fband{fill:rgba(150,180,255,0.05)}
.fg .fband.on{fill:rgba(93,139,255,0.16);stroke:rgba(110,170,255,0.35)}
.fg .fch{fill:rgba(12,20,44,0.94);stroke:rgba(150,180,255,0.24)}
.fg .fch.on{fill:rgba(40,70,150,0.55);stroke:rgba(95,224,255,0.6)}
.fg .fring{fill:none;stroke:rgba(150,180,255,0.17)}
.fg .fring.dash{stroke-dasharray:2 5;stroke:rgba(95,224,255,0.4)}
.fg .fsweep{fill:rgba(95,224,255,0.11)}
.fg .fcell{fill:rgba(150,180,255,0.06)}
.fg .fok{fill:rgba(84,232,175,0.16);stroke:rgba(84,232,175,0.6)}
.fg .fokt{fill:none;stroke:#54e8af;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fg .fshield{fill:rgba(93,139,255,0.2);stroke:#78b8ff;stroke-width:1.4}
.fg .fkey{fill:#5fe0ff}
.fg .fkeyl{fill:none;stroke:#5fe0ff;stroke-width:1.6}
.fg .fgd{fill:rgba(150,180,255,0.3)}
.fg .fgd.on{fill:rgba(150,210,255,0.75)}
.fg .fyes{fill:rgba(84,232,175,0.18);stroke:rgba(84,232,175,0.6)}
.fg .fno{fill:rgba(255,107,138,0.12);stroke:rgba(255,107,138,0.5)}
.fg .fqr{fill:#c9d8ff}
.fg .fdir{fill:rgba(93,139,255,0.6)}
.fg .ffile{fill:rgba(150,180,255,0.28)}
.fg .fprofit{fill:rgba(84,232,175,0.1)}
.fg .floss{fill:rgba(255,107,138,0.09)}
.fg .fcur{fill:#5fe0ff;animation:fgBlink 1.1s steps(1) infinite}
/* fyzx.app's drawings (scripts/products/fyzx.mjs): blue is light and pink is sound, as in the app */
.fg .fz-q{fill:#5f97ff}
.fg .fz-qf{fill:#c5d7ff}
.fg .fz-q.off,.fg .fz-qf.off{opacity:0.2}
.fg .fz-miss{fill:rgba(255,95,164,0.05);stroke:rgba(255,120,180,0.6);stroke-width:1;stroke-dasharray:3 3}
.fg .fz-lt,.fg .fz-sd,.fg .fz-keyc,.fg .fz-keyl{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fg .fz-lt{stroke:#7ba6ff}
.fg .fz-sd{stroke:#ff6aab}
.fg .fz-lt.dash{stroke:rgba(123,166,255,0.6);stroke-dasharray:2 4}
.fg .fz-sd.dash{stroke:rgba(255,106,171,0.55);stroke-dasharray:2 4}
.fg .fz-ltf{fill:rgba(77,140,255,0.12)}
.fg .fc.fz-b{stroke:#d3e2ff}
.fg .fc.fz-p{stroke:#ffc6de}
.fg .fz-ph{fill:rgba(16,24,52,0.96);stroke:rgba(160,190,255,0.35);stroke-width:1}
.fg .fz-scr{fill:#060a16;stroke:rgba(160,190,255,0.12)}
.fg .fz-bl{fill:rgba(77,140,255,0.6)}
.fg .fz-bp{fill:rgba(190,205,240,0.28)}
.fg .fz-hear{fill:rgba(150,180,255,0.13)}
.fg .fz-band{fill:#ff5fa4;filter:drop-shadow(0 0 6px rgba(255,95,164,0.7))}
.fg .fz-k{fill:#c9d8ff;font-size:8px;letter-spacing:0.12em;white-space:pre}
.fg .fz-k.s{fill:#ffa8ce}
.fg .fz-u{fill:#9aa7cf;font-size:9px}
.fg .fz-cab{fill:rgba(12,20,44,0.6);stroke:rgba(150,180,255,0.2)}
.fg .fz-seat{fill:rgba(150,180,255,0.15)}
.fg .fz-seat.on{fill:#ff5fa4}
.fg .fz-ring{fill:none;stroke:rgba(255,95,164,0.55);stroke-width:1.2;stroke-dasharray:3 4}
.fg .fz-img{image-rendering:pixelated}
.fg .fz-key{fill:rgba(255,95,164,0.1);stroke:rgba(255,95,164,0.5)}
.fg .fz-keyb{fill:rgba(255,95,164,0.07);stroke:rgba(255,95,164,0.45)}
.fg .fz-keyc,.fg .fz-keyl{stroke:#ff6aab;stroke-width:1.8}
.fg .fz-lock{fill:rgba(150,180,255,0.32)}
.fg .fz-lockl{fill:none;stroke:rgba(150,180,255,0.55);stroke-width:1.8}
.fg .fz-done{fill:rgba(150,180,255,0.06);stroke:rgba(150,180,255,0.25)}
.fg .fz-cam{fill:#0b1022;stroke:#7ba6ff;stroke-width:1.4}
.fg .fz-bit{fill:#ff6aab}
.fg .fz-bit.off{fill:none;stroke:#ff6aab;stroke-dasharray:2 1.5}
.fg .fz-hatch{fill:none;stroke:rgba(150,180,255,0.2);stroke-width:1}
.fg .fz-wall{fill:none;stroke:#ff6aab;stroke-width:3;stroke-linecap:round}
.fg .fz-sweep{fill:rgba(255,95,164,0.13)}
.fg .fz-rail{fill:#5f97ff}
.fg .fz-rail.a{fill:#f5b54a}
.fg .fz-film{fill:rgba(12,20,44,0.9);stroke:rgba(150,180,255,0.25)}
.fg .fz-hole{fill:#02040c}
.fg .fz-cellbg{fill:#dfe6f5}
.fg .fz-cell{fill:#060a16}
.fg .fz-dmg{fill:#ff5fa4}
/* laptime.dev's drawings (scripts/products/laptime.mjs): its own colours, green good, grey in between, red poor */
.fg .lt-track{fill:none;stroke:rgba(255,255,255,0.07);stroke-width:9;stroke-linecap:round}
.fg .lt-ring{fill:none;stroke-width:9;stroke-linecap:round}
.fg .lt-ring.g{stroke:#00ff88}
.fg .lt-ring.c{stroke:#2dd4ff}
.fg .lt-ring.a{stroke:#ffaa00}
.fg .lt-ring.v{stroke:#a78bfa}
.fg .lt-ring.sm{stroke-width:5}
.fg .lt-bar.g{fill:#00ff88}
.fg .lt-bar.c{fill:#2dd4ff}
.fg .lt-bar.a{fill:#ffaa00}
.fg .lt-bar.v{fill:#a78bfa}
.fg .lt-bar.poor{fill:#ff3355}
.fg .lt-bar.dim{opacity:0.45}
.fg .lt-grade{fill:#00ff88;font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:0}
.fg .lt-web{fill:none;stroke:rgba(255,255,255,0.1);stroke-width:1}
.fg .lt-shape{fill:rgba(0,255,136,0.16);stroke:#00ff88;stroke-width:1.6;stroke-linejoin:round}
.fg .lt-dot.good{fill:#00ff88}
.fg .lt-dot.ni{fill:#8b8b9a}
.fg .lt-dot.poor{fill:#ff3355}
.fg .lt-win{fill:rgba(10,10,16,0.96);stroke:rgba(255,255,255,0.12)}
.fg .lt-url{fill:rgba(255,255,255,0.05)}
.fg .lt-u{fill:#8b8b9a;font-size:6.5px;letter-spacing:0.02em}
.fg .lt-ext{fill:#00ff88}
.fg .lt-skel{fill:rgba(255,255,255,0.06)}
.fg .lt-skel2{fill:rgba(255,255,255,0.18)}
.fg .lt-pop{fill:#0d0d14;stroke:rgba(0,255,136,0.35)}
.fg .lt-track2{fill:rgba(255,255,255,0.07)}
.fg .lt-arrow{fill:none;stroke:#8b8b9a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fg .lt-stop{fill:rgba(255,51,85,0.14);stroke:#ff3355;stroke-width:1.5}
.fg .lt-stopx{fill:none;stroke:#ff3355;stroke-width:2.4;stroke-linecap:round}
.fg .lt-needle{fill:none;stroke:#f0f0f4;stroke-width:2.4;stroke-linecap:round}
.fg .lt-hub{fill:#f0f0f4}
.fg .lt-tag{font-size:7.5px;letter-spacing:0.14em}
.fg .lt-tag.a{fill:#ffaa00}
.fg .lt-tag.v{fill:#a78bfa}
.fg .lt-tag.c{fill:#2dd4ff}
.fg .lt-tag.g{fill:#00ff88}
.fg .lt-tag.poor{fill:#ff3355}
.fg .lt-pill{fill:rgba(16,16,24,0.92);stroke:rgba(255,255,255,0.1)}
.fg .lt-pk{fill:#55556a;font-size:6.5px;letter-spacing:0.12em}
.fg .lt-pt{fill:#c4c4ce;font-size:7.5px;letter-spacing:0.02em}
.fg .lt-pv{font-size:7.5px;letter-spacing:0.02em}
.fg .lt-pv.good{fill:#00ff88}
.fg .lt-pv.ni{fill:#c4c4ce}
.fg .lt-pv.poor{fill:#ff3355}
.fg .lt-vbar.good{fill:#00ff88}
.fg .lt-vbar.ni{fill:#8b8b9a}
.fg .lt-vbar.poor{fill:#ff3355}
.fg .lt-dock{fill:rgba(16,16,24,0.96);stroke:rgba(255,255,255,0.14)}
.fg .lt-rec{fill:#ff3355}
.fg .lt-dl{fill:none;stroke:#c4c4ce;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fg .lt-hatchf{fill:rgba(45,212,255,0.14);stroke:#2dd4ff;stroke-width:1;stroke-dasharray:2 2}
.fg .lt-num{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-0.02em}
.fg .lt-num.good{fill:#00ff88}
.fg .lt-num.ni{fill:#c4c4ce}
.fg .lt-num.c{fill:#2dd4ff}
.fg .lt-gatebox{fill:rgba(255,51,85,0.05);stroke:rgba(255,51,85,0.4)}
.fg .fsw1{fill:#5fe0ff} .fg .fsw2{fill:#5d8bff} .fg .fsw3{fill:#54e8af} .fg .fsw4{fill:#ff6b8a} .fg .fsw5{fill:#e9edff} .fg .fsw6{fill:#1a2650;stroke:rgba(150,180,255,0.3)}
.fg .pulse,.fg .spin,.fg .grow{transform-box:fill-box;transform-origin:center}
.fg .pulse{animation:fgPulse 2.4s var(--ease) infinite}
.fg .spin{animation:fgSpin 16s linear infinite}
.fg .twinkle{animation:fgTw 3s ease-in-out infinite}
.fg .flift{animation:fgLift 5s ease-in-out infinite}
.fg .sweep{animation:fgSweep 5s var(--ease) infinite}
.fg .slide{animation:fgSlide 7s linear infinite}
.fg .fswipe{animation:fgSwipe 4.5s var(--ease) infinite}
/* drawn in as the card arrives */
.fg .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) calc(var(--d,0ms) + 500ms)}
.fg .grow{transform-origin:left center;transform:scaleX(0.15);transition:transform 1.6s var(--ease) calc(var(--d,0ms) + 600ms)}
.screen.on .fg .draw,html:not(.mo) .fg .draw{stroke-dashoffset:0}
.screen.on .fg .grow,html:not(.mo) .fg .grow{transform:none}
@keyframes fgRun{to{stroke-dashoffset:0}}
@keyframes fgDash{to{stroke-dashoffset:-12}}
@keyframes fgBlink{50%{opacity:0}}
@keyframes fgPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.55;transform:scale(1.55)}}
@keyframes fgSpin{to{transform:rotate(360deg)}}
@keyframes fgTw{0%,100%{opacity:0.25}50%{opacity:1}}
@keyframes fgLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes fgSweep{0%{transform:translateX(0)}70%,100%{transform:translateX(206px)}}
@keyframes fgSlide{to{transform:translateX(-320px)}}
@keyframes fgSwipe{0%,30%,100%{transform:none}55%{transform:translateX(26px) rotate(8deg)}75%{transform:translateX(-8px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){
  .fg *{animation:none!important}
  .fg .fc{display:none}
  .fg .draw{stroke-dashoffset:0;transition:none}
  .fg .grow{transform:none;transition:none}
}

/* ---------- a second client: the terminal rising out of the hero, then both clients side by side ---------- */
#tui,#tui-vs{overflow:clip}
#tui > .wrap{z-index:1;display:flex;flex-direction:column;align-items:center;perspective:1800px}
.tui-glow{left:50%;top:58%;width:min(1500px,120vw);height:70%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,190,210,0.26),rgba(0,120,160,0.08) 55%,transparent)}
/* set like every other screen: the words to the left, from the same line; on a wide window they stand beside it */
.tui-h{max-width:820px}
.tui-h .h3{margin-top:var(--s3)}
.tui-h .lead{margin:var(--s3) 0 0;max-width:76ch;display:block;-webkit-line-clamp:unset;overflow:visible;font-size:clamp(15.5px,1.15vw,18px);color:var(--text-dim)}
.tui-win{position:relative;margin:clamp(18px,3.4svh,34px) 0 0;width:min(100%,1120px,calc((100svh - 400px) * 1.786));border-radius:12px;overflow:hidden;background:#080b12;transform-origin:50% 100%;
  box-shadow:0 0 0 1px rgba(120,220,235,0.2),0 50px 110px -34px rgba(0,0,0,0.95),0 0 140px -40px rgba(0,190,210,0.55)}
.tui-bar{position:relative;display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;background:linear-gradient(180deg,#161b26,#0f131b);border-bottom:1px solid rgba(255,255,255,0.06)}
.tui-bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57;opacity:0.85}
.tui-bar i:nth-child(2){background:#febc2e}
.tui-bar i:nth-child(3){background:#28c840}
.tui-bar span{position:absolute;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:#8b93a7;pointer-events:none}
.tui-scr{position:relative;aspect-ratio:1600/896;background:#0a0d14}
.tui-scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a scanline passing over the glass, the screen's own light */
.tui-scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0,rgba(120,240,255,0.06) 50%,transparent 100%) 0 0/100% 18%;background-repeat:no-repeat;animation:tuiScan 6s linear infinite}
@keyframes tuiScan{from{background-position:0 -20%}to{background-position:0 120%}}
#tui-vs > .wrap{z-index:1}
.vs{position:relative;margin:clamp(18px,3.4svh,32px) 0 0}
.vs-l{display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px}
.vs-l span{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim)}
.vs-l span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.vs-l span + span::before{background:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}
.vs-f{position:relative;border-radius:12px;overflow:hidden;background:#05070d;box-shadow:0 0 0 1px rgba(150,190,255,0.16),0 40px 90px -30px rgba(0,0,0,0.95),0 0 100px -40px rgba(0,190,210,0.45)}
.vs-f video{display:block;width:100%;height:auto;aspect-ratio:1600/446}
.vs-f::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(191,243,255,0.8),transparent);box-shadow:0 0 14px 2px rgba(95,224,255,0.5);opacity:0;pointer-events:none}
.vs-notes{margin-top:clamp(18px,3.6svh,36px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.vs-notes > div{padding-top:var(--s4);border-top:1px solid var(--line-2)}
.vs-notes b{display:block;font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-0.012em}
.vs-notes p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--text-dim)}
@media (min-width:901px){
  #tui > .wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,72px);align-items:start}
  #tui .tui-win{margin:0;width:min(100%,calc((var(--sh) - 30px) * 1.786))}
  #tui .tui-glow{left:64%;top:50%}
}
@media (max-width:900px){
  #tui > .wrap{align-items:stretch}
  .tui-win{width:100%}
  .vs-l span{font-size:11px;letter-spacing:0.08em}
  .vs-notes{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .vs-notes > div{padding-top:var(--s3)}
  .vs-notes p{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){ .tui-scr::after{animation:none;display:none} }

/* ---------- lineage: the generations on the curve they make. Each step stands at its height (--y) along the window
   from left to right, the line running on through the ones that grew out of each other and breaking where one began
   again; each card says what it came from ---------- */
.lined:is(#lineage,#family) > .wrap{display:flex;flex-direction:column;height:var(--sh)}
.lin{position:relative;flex:1;min-height:0;margin-top:clamp(14px,2.6svh,30px);--ch:clamp(270px,39svh,330px)}
.lin-c{position:absolute;left:0;top:0;width:100%;height:calc(100% - var(--ch));overflow:visible}
.lin-run{fill:none;stroke:color-mix(in srgb,var(--accent-2) 70%,var(--tint));stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(95,224,255,0.45))}
.lin-gap{fill:none;stroke:rgba(160,190,255,0.34);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:0.025 0.022}
.lin ol{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.lin-s{position:absolute;left:calc((var(--i) + 0.5) / var(--n) * 100%);top:calc((1 - var(--y)) * (100% - var(--ch)));width:calc(100% / var(--n) - 12px);transform:translateX(-50%)}
.lin-d{position:absolute;left:50%;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#e2f8ff;z-index:1;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 34%,transparent),0 0 16px 2px rgba(95,224,255,0.7)}
.lin-s.new .lin-d{background:#02040c;box-shadow:inset 0 0 0 2px #e2f8ff,0 0 0 4px color-mix(in srgb,var(--tint) 30%,transparent),0 0 16px 2px rgba(95,224,255,0.55)}
.lin-card{margin-top:18px;padding:10px 10px 13px;border-radius:13px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(16,26,56,0.72),rgba(6,10,24,0.92));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 24px 50px -30px rgba(0,0,0,0.9),inset 0 1px 0 rgba(255,255,255,0.06)}
.lin-img{position:relative;aspect-ratio:2/1;border-radius:8px;overflow:hidden;background:#050811;margin-bottom:10px;box-shadow:inset 0 0 0 1px rgba(160,190,255,0.1)}
.lin-img img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.lin-k{display:flex;justify-content:space-between;gap:8px;padding:0 3px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-2)}
.lin-k span{color:var(--text-faint);letter-spacing:0.08em}
.lin-card h3{margin:6px 3px 4px;font-family:var(--font-display);font-weight:600;font-size:16.5px;line-height:1.15;letter-spacing:-0.02em;color:var(--text)}
.lin-card p{margin:0 3px;font-size:12.5px;line-height:1.45;color:var(--text-dim)}
.lin-a{display:flex;flex-wrap:wrap;gap:6px;margin:10px 3px 0}
.lin-a .chip{font-size:11px;padding:5px 8px;gap:5px}
.lin-a sup.doc{margin-left:2px;padding:1px 3px;border-radius:2px;font-size:9px;font-weight:700;letter-spacing:0.08em;color:#02040c;background:var(--accent-2)}
.lin-from{display:inline-block;margin:0 0 8px 3px;padding:3px 7px;border-radius:999px;white-space:nowrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim);box-shadow:inset 0 0 0 1px rgba(160,190,255,0.22)}
.lin-from.new{color:#7ef0c0;box-shadow:inset 0 0 0 1px rgba(61,220,151,0.42)}
@media (max-height:760px) and (min-width:901px){ .lin{--ch:200px} .lin-img{display:none} }
/* a phone reads it down a rail, what passed between two steps over the second */
@media (max-width:900px){
  .lined:is(#lineage,#family) > .wrap{height:auto}
  .lin{--ch:0px}
  .lin-c{display:none}
  .lin ol{position:relative;display:grid;gap:14px;padding-left:22px}
  .lin ol::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:linear-gradient(180deg,rgba(95,224,255,0.7),rgba(95,224,255,0.15))}
  .lin-s{position:relative;left:auto;top:auto;width:auto;transform:none}
  .lin-d{left:-17px;top:16px;margin:0}
  .lin-card{margin-top:0}
  .lin-img{display:none}
}
/* it arrives as the screen does: the cards rise in order and the curve is drawn through them */
.mo .lined:is(#lineage,#family) .lin-run{stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease) calc(var(--j) * 420ms + 260ms)}
.mo .lined:is(#lineage,#family).on .lin-run{stroke-dashoffset:0}
.mo .lined:is(#lineage,#family) .lin-gap{opacity:0;transition:opacity .8s var(--ease) calc(var(--j) * 420ms + 120ms)}
.mo .lined:is(#lineage,#family).on .lin-gap{opacity:1}
.mo .lined:is(#lineage,#family) .lin-s{opacity:0;translate:0 24px;transition:opacity 1s var(--ease) calc(var(--i) * 160ms + 160ms),translate 1.3s var(--ease) calc(var(--i) * 160ms + 160ms)}
.mo .lined:is(#lineage,#family).on .lin-s{opacity:1;translate:none}

/* ---------- generations: one line across the window, the builds that came first on a thin dashed run of it and the
   versions of what they led to on a solid bright one. The stations stand above and below it in turn, two steps wide so
   the rows interlock; each half is as tall as the screen allows, the picture giving way first ---------- */
.gens > .wrap{display:flex;flex-direction:column;height:var(--sh)}
.gen-h{max-width:880px}
.gen-h .lead{margin:var(--s3) 0 0;max-width:64ch;font-size:clamp(14.5px,1.05vw,16.5px);color:var(--text-dim);display:block;-webkit-line-clamp:unset;overflow:visible}
.gen{position:relative;flex:1;min-height:0;margin-top:clamp(20px,4svh,48px);--w:calc(200% / (var(--n) + 1));--pad:30px}
.gen ol{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.gen-ln{position:absolute;top:50%;height:0}
.gen-ln.ev{left:0;width:calc(var(--split) * 100%);border-top:1.5px dashed rgba(160,190,255,0.4);margin-top:-0.75px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%);mask:linear-gradient(90deg,transparent,#000 6%)}
.gen-ln.gl{left:calc(var(--split) * 100%);right:0;height:2px;margin-top:-1px;border-radius:2px;
  background:linear-gradient(90deg,rgba(160,190,255,0.4),color-mix(in srgb,var(--accent-2) 80%,var(--tint)) 12%,#bff3ff 88%,transparent);
  box-shadow:0 0 12px rgba(95,224,255,0.45)}
.gen-tk{position:absolute;top:50%;left:calc(var(--x) * 100%);width:1.5px;height:9px;margin:-4.5px 0 0 -0.75px;border-radius:1px;background:#bff3ff;box-shadow:0 0 6px rgba(95,224,255,0.7)}
.gen-lg{position:absolute;width:calc(100% / (var(--n) + 1));font-family:var(--font-mono);font-size:11px;line-height:1.6;letter-spacing:0.1em;white-space:nowrap;text-transform:uppercase}
.gen-lg.ev{left:0;top:calc(50% + 14px);color:var(--text-faint)}
.gen-lg.gl{right:0;bottom:calc(50% + 14px);text-align:right;color:var(--accent-2)}
.gen-s{position:absolute;left:calc(var(--x) * 100%);width:calc(var(--w) - 44px);height:50%;transform:translateX(-50%);
  display:flex;gap:12px;container-type:inline-size}
.gen-s.up{top:0;flex-direction:column-reverse;padding-bottom:var(--pad)}
.gen-s.dn{top:50%;flex-direction:column;padding-top:var(--pad)}
.gen-s::before{content:"";position:absolute;left:50%;width:1px;height:var(--pad);background:linear-gradient(var(--dir,180deg),rgba(160,190,255,0.5),transparent)}
.gen-s.up::before{bottom:0;--dir:0deg}
.gen-s.dn::before{top:0}
.gen-s.gl::before{background:linear-gradient(var(--dir,180deg),rgba(95,224,255,0.8),transparent)}
.gen-d,.gen-v{position:absolute;left:50%;z-index:1}
.gen-s.up :is(.gen-d,.gen-v){bottom:0;translate:-50% 50%}
.gen-s.dn :is(.gen-d,.gen-v){top:0;translate:-50% -50%}
.gen-d{width:9px;height:9px;border-radius:50%;background:#02040c;box-shadow:inset 0 0 0 1.5px rgba(200,220,255,0.75)}
.gen-v{padding:3px 8px;border-radius:999px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:0.08em;color:#02040c;background:#d4f6ff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 34%,transparent),0 0 16px 2px rgba(95,224,255,0.65)}
.gen-v.now::after{content:"";position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 0 1.5px rgba(95,224,255,0.8);animation:gen-now 2.4s var(--ease) infinite}
@keyframes gen-now{from{opacity:1;scale:1}to{opacity:0;scale:1.6 2.2}}
.gen-shot{flex:0 1 auto;height:calc(100cqw * 0.5625);min-height:0;margin:0;border-radius:8px;overflow:hidden;background:#050811;
  box-shadow:0 0 0 1px rgba(160,190,255,0.16),0 24px 50px -30px rgba(0,0,0,0.9)}
.gen-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.gen-s.ev .gen-shot img{filter:saturate(0.72) brightness(0.86);transition:filter .4s}
.gen-s.ev:hover .gen-shot img{filter:none}
.gen-s.gl .gen-shot{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 30%,transparent),0 24px 50px -30px rgba(0,0,0,0.9),0 0 50px -24px rgba(95,224,255,0.5)}
.gen-t{flex:none;padding:0 2px}
.gen-k{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;white-space:nowrap;text-transform:uppercase;color:var(--text-faint)}
.gen-s.gl .gen-k{color:var(--accent-2)}
.gen-k.gen-off{padding:2px 7px;border-radius:999px;color:#ffc677;box-shadow:inset 0 0 0 1px rgba(255,176,64,0.42)}
.gen-t h3{margin:5px 0 3px;font-family:var(--font-display);font-weight:600;font-size:16.5px;line-height:1.15;letter-spacing:-0.02em}
.gen-t h3 a{color:var(--text);text-decoration:none}
.gen-t h3 a span{font-size:12px;color:var(--text-faint);transition:color .2s}
.gen-t h3 a:hover span{color:var(--accent-2)}
.gen-t p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gen-more{margin-left:8px;font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0;color:var(--accent-2);text-decoration:none;white-space:nowrap}
.gen-more:hover{text-decoration:underline}
.gen-anchor{position:absolute;top:0}
@media (max-height:760px) and (min-width:901px){ .gen-t p{-webkit-line-clamp:2} }
/* a phone reads it down a rail, dashed through the evenings and solid from globe.li on */
@media (max-width:900px){
  .gens > .wrap{height:auto}
  .gen-h{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .gen{margin-top:var(--s5)}
  .gen-ln,.gen-tk,.gen-lg{display:none}
  .gen ol{position:relative;display:grid;gap:0}
  .gen-s{position:relative;left:auto;width:auto;height:auto;transform:none;display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:start;padding:0 0 18px 26px}
  .gen-s.up,.gen-s.dn{top:auto;padding-top:0;padding-bottom:18px}
  .gen-s::before{left:5px;top:0;bottom:0;height:auto;width:0;background:none;border-left:1.5px dashed rgba(160,190,255,0.4)}
  .gen-s.gl::before{border-left:2px solid color-mix(in srgb,var(--accent-2) 70%,var(--tint));box-shadow:0 0 8px rgba(95,224,255,0.4)}
  .gen-s:last-child::before{bottom:auto;height:14px}
  .gen-s.up :is(.gen-d,.gen-v),.gen-s.dn :is(.gen-d,.gen-v){left:6px;top:7px;bottom:auto;translate:-50% -50%}
  .gen-v{padding:2px 6px;font-size:11px}
  .gen-shot{height:auto;aspect-ratio:16/10;border-radius:6px}
  .gen-t h3{margin-top:3px;font-size:16px}
  .gen-t p{font-size:13px;-webkit-line-clamp:4}
}
/* it arrives as the screen does: the line drawn from the left, the stations coming to it in order */
.mo .gens .gen-ln{transform-origin:left;scale:0 1;transition:scale 1.2s var(--ease) .2s}
.mo .gens .gen-ln.gl{transition-delay:1s}
.mo .gens.on .gen-ln{scale:1}
.mo .gens .gen-tk{opacity:0;transition:opacity .6s var(--ease) 1.8s}
.mo .gens.on .gen-tk{opacity:1}
.mo .gens .gen-s{opacity:0;transition:opacity 1s var(--ease) calc(var(--i) * 160ms + 260ms),translate 1.3s var(--ease) calc(var(--i) * 160ms + 260ms)}
.mo .gens .gen-s.up{translate:0 -24px}
.mo .gens .gen-s.dn{translate:0 24px}
.mo .gens.on .gen-s{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){ .gen-v.now::after{animation:none} }

/* ---------- motion: a screen plays its entrance as it takes the window, and again on every return (product.js sets
   .mo when there is motion to show, and .on on the screen holding the window). Where the browser can tie motion to
   the scroll itself, what is leaving drifts away and the scenes move at their own depth ---------- */
.mo .screen:not(.on) .fx *,.mo .screen:not(.on) .fg *{animation-play-state:paused}
/* the name rises from behind the cards, letter by letter */
/* the cards come one after another: each rises into place, its screen settling into the frame a beat later, its edge
   lit once it is there, its words last */
.mo .facet{opacity:0;translate:0 32px;
  transition:opacity 1s var(--ease) var(--d0),translate 1.4s var(--ease) var(--d0),--hl .7s var(--ease),transform .7s var(--ease),border-color .6s var(--ease),box-shadow .7s var(--ease)}
.mo .screen.on .facet{opacity:1;translate:none}
.mo .facet::after{opacity:0;transition:opacity 1.4s var(--ease) calc(var(--d) + 500ms)}
.mo .screen.on .facet::after{opacity:1}
/* a product shown with its phone: the whole desktop in the frame and the phone stood at its corner */
.facet-img.duo > img{left:5%;top:9%;width:80%;border-radius:9px}
.facet-img .fphone{position:absolute;right:5%;bottom:6%;width:17%;z-index:3;border-radius:14px;padding:3px;background:linear-gradient(160deg,#323e5c,#0b1022 40%,#1a2340);
  box-shadow:0 0 0 1px rgba(160,195,255,0.22),inset 0 1px 0 rgba(255,255,255,0.18),0 24px 40px -16px rgba(0,0,0,0.95)}
.facet-img .fphone img{position:static;display:block;width:100%;height:auto;aspect-ratio:600/1299;object-fit:cover;object-position:top;border-radius:11px;box-shadow:none}
.mo .facet-img > .fphone{opacity:0;translate:0 16px;transition:opacity 1s var(--ease) calc(var(--d) + 250ms),translate 1.2s var(--ease) calc(var(--d) + 250ms)}
.mo .screen.on .facet-img > .fphone{opacity:1;translate:none}
.mo .facet-img > img,.mo .facet-img > .fg{opacity:0;scale:1.06;transform-origin:30% 20%;transition:opacity 1.2s var(--ease) var(--d),scale 2s var(--ease) var(--d),transform 1.4s var(--ease)}
.mo .screen.on .facet-img > img,.mo .screen.on .facet-img > .fg{opacity:1;scale:none}
.mo .facet-n{opacity:0;transition:opacity .6s var(--ease) calc(var(--d) + 700ms)}
.mo .screen.on .facet-n{opacity:1}
.mo .facet-body > *{opacity:0;translate:0 14px;transition:opacity .8s var(--ease) calc(var(--d) + 160ms + var(--j,0) * 70ms),translate 1s var(--ease) calc(var(--d) + 160ms + var(--j,0) * 70ms)}
.facet-body > :nth-child(2){--j:1}
.facet-body > :nth-child(3){--j:2}
.mo .screen.on .facet-body > *{opacity:1;translate:none}
/* a drawing arrives in its beats, as it was drawn */
.mo .fg .fgi{opacity:0;translate:0 7px;transition:opacity .6s var(--ease) calc(var(--d) + 260ms + var(--i) * 90ms),translate .9s var(--ease) calc(var(--d) + 260ms + var(--i) * 90ms)}
.mo .screen.on .fg .fgi{opacity:1;translate:none}
/* the scene: its light comes up as the screen arrives */
.mo .sc-spot,.mo .sc-pool,.mo .tui-glow{opacity:0;transition:opacity 1.6s var(--ease) .1s}
.mo .screen.on .sc-spot,.mo .screen.on .sc-pool,.mo .screen.on .tui-glow{opacity:1}
/* the terminal: its words rise, then the glass comes up out of the fold, tipped back, and settles */
.mo .tui-h > *,.mo .screen .sec-h,.mo .vs-l,.mo .vs-notes > div,.mo .screen .end{opacity:0;translate:0 22px;
  transition:opacity .9s var(--ease) calc(var(--j,0) * 90ms + 80ms),translate 1.1s var(--ease) calc(var(--j,0) * 90ms + 80ms)}
.tui-h > :nth-child(2),.vs-l{--j:1}
.tui-h > :nth-child(3){--j:2}
.vs-notes > div:nth-child(1){--j:5}
.vs-notes > div:nth-child(2){--j:6}
.vs-notes > div:nth-child(3){--j:7}
.screen .end{--j:6}
.mo .screen.on .tui-h > *,.mo .screen.on .sec-h,.mo .screen.on .vs-l,.mo .screen.on .vs-notes > div,.mo .screen.on .end{opacity:1;translate:none}
@supports not (animation-timeline: view()){
  .mo .tui-win{opacity:0;translate:0 40px;transition:opacity 1.1s var(--ease) .25s,translate 1.5s var(--ease) .25s}
  .mo .screen.on .tui-win{opacity:1;translate:none}
}
/* side by side: the film opens from the seam between the two */
.mo .vs-f{opacity:0;translate:0 28px;transition:opacity 1.1s var(--ease) .3s,translate 1.4s var(--ease) .3s}
.mo .screen.on .vs-f{opacity:1;translate:none}
/* the family and the related: a card a beat after the one before */
.mo .cards > .card{opacity:0;translate:0 28px;
  transition:opacity 1s var(--ease) calc(var(--c,0) * 120ms + 220ms),translate 1.3s var(--ease) calc(var(--c,0) * 120ms + 220ms),transform .6s var(--ease),border-color .35s var(--ease)}
.cards > .card:nth-child(2){--c:1}
.cards > .card:nth-child(3){--c:2}
.cards > .card:nth-child(4){--c:3}
.cards > .card:nth-child(5){--c:4}
.cards > .card:nth-child(6){--c:5}
.cards > .card:nth-child(n+7){--c:6}
.mo .screen.on .cards > .card{opacity:1;translate:none}
/* tied to the scroll where the browser can: what leaves drifts up and back, the scenes and the glow move at their own depth,
   and the terminal comes up out of the fold as its screen is scrolled to */
@supports (animation-timeline: view()){
  .mo main .screen{view-timeline:--scr block}
  .mo main .screen > .wrap{animation:scrOut linear both;animation-timeline:--scr;animation-range:exit 0% exit 75%}
  .mo main .screen > .fx{animation:fxDrift linear both;animation-timeline:--scr;animation-range:cover 0% cover 100%}
  .mo main .screen:first-child .p-stage{animation:heroOut linear both;animation-timeline:--scr;animation-range:exit 0% exit 80%}
  .mo #tui .tui-win{animation:tuiRise linear both;animation-timeline:--scr;animation-range:entry 0% entry 100%}
}
@keyframes scrOut{to{opacity:0;translate:0 -6vh}}
@keyframes fxDrift{from{translate:0 -12svh}to{translate:0 12svh}}
@keyframes heroOut{to{translate:0 -8vh;opacity:0.2}}
@keyframes tuiRise{from{translate:0 14vh;opacity:0.15}}
/* one globe the whole way down (globe-morph.js, .gj once it is running): drawn in a WebGL layer of its own over the
   page, at one stop at a time, evaporating from one and condensing at the next. The terminal's window is built round it once it is docked - its frame growing out of the
   globe's circle, its bar and title coming in, its first frame painted a row at a time - so the window's own rise gives
   way to that */
.gj-layer{position:fixed;left:0;top:0;width:100%;height:100%;z-index:60;pointer-events:none;overflow:hidden}
.gj-gl{position:absolute;left:0;top:0;width:100%;height:100%}
.gj-wire{position:absolute;left:0;top:0;box-sizing:border-box;opacity:0;will-change:transform;
  border:1px solid rgba(150,240,255,0.8);box-shadow:0 0 34px 3px rgba(0,200,230,0.32),inset 0 0 26px rgba(0,200,230,0.16)}
.gj #tui .tui-win{animation:none;opacity:1;translate:none;scale:none;rotate:none;transition:none}
.gj #tui .tui-bar{opacity:var(--bar,1);transform:translateY(calc((var(--bar,1) - 1) * 30px))}
.gj #tui .tui-scr{clip-path:inset(0 0 calc((1 - var(--rows,1)) * 100%) 0)}
.gj-paint{position:absolute;left:0;right:0;top:calc(30px + var(--rows,1) * (100% - 30px));height:2px;margin-top:-1px;z-index:3;pointer-events:none;opacity:var(--paint,0);
  background:linear-gradient(90deg,transparent,rgba(200,250,255,0.95) 18%,rgba(200,250,255,0.95) 82%,transparent);box-shadow:0 0 18px 3px rgba(95,224,255,0.5)}
@media (max-width:900px){
  .mo .facet{translate:0 24px}
  .mo .screen.on .facet{translate:none}
}

/* ---------- family and related ---------- */
.sec-h{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:600;line-height:1.04;letter-spacing:-0.034em}
.cards{margin-top:clamp(18px,3.6svh,36px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* a family of one or two: the cards come up larger, a half each, rather than a small one alone in a wide row */
.cards.few{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1120px}
.cards.few .card-img{aspect-ratio:16/9;max-height:calc(var(--sh) * 0.5)}
.cards.few .card-b b{font-size:19px}
.cards.few .card-b span{font-size:14.5px}
/* a family of one: a single wide card, the picture to the left and its words beside it */
@media (min-width:901px){
  .cards.one{grid-template-columns:minmax(0,1fr)}
  .cards.one > .card{grid-row:auto;grid-template-rows:auto auto 1fr;grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding-bottom:0}
  .cards.one > .card .card-img{grid-row:1 / 4;grid-column:1;aspect-ratio:16/10;max-height:calc(var(--sh) * 0.62);border-bottom:0;border-right:1px solid var(--line)}
  .cards.one > .card .card-b > *{grid-column:2;margin-inline:28px}
  .cards.one > .card .card-b > :first-child{margin-top:32px}
  .cards.one > .card .card-b i{margin-bottom:28px}
  .cards.one .card-b b{font-size:24px}
  .cards.one .card-b span{font-size:15.5px;max-width:40ch}
}
/* the next ones to look at: two rows of four, the second left out where the window is short */
.cards.rel .card-img{max-height:calc(var(--sh) * 0.17)}
@media (min-width:901px) and (max-height:860px){ .cards.rel > .card:nth-child(n+5){display:none} .cards.rel .card-img{max-height:calc(var(--sh) * 0.24)} }
.card{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(16,26,56,0.6),rgba(6,10,24,0.88));transition:transform .6s var(--ease),border-color .35s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:rgba(160,200,255,0.42)}
.card-img{width:100%;aspect-ratio:5/3;max-height:calc(var(--sh) * 0.22);overflow:hidden;background:#050811;border-bottom:1px solid var(--line)}
.card-img img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0.86;transition:opacity .4s}
.card:hover .card-img img{opacity:1}
.card-b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.cards{grid-auto-rows:auto}
.cards > .card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;padding-bottom:14px}
.cards > .card .card-b{display:contents}
.cards > .card .card-b > *{margin-inline:14px}
.cards > .card .card-b > :first-child{margin-top:12px}
.cards > .card .card-b span{margin-top:4px}
.cards > .card .card-b i{margin-top:6px;align-self:end}
.cards{row-gap:0}
@media (min-width:901px){
  .cards > .card:nth-child(n+4){margin-top:var(--s4)}
  .cards.c4 > .card:nth-child(4){margin-top:0}
  .cards.c4 > .card:nth-child(n+5){margin-top:var(--s4)}
}
.card-b b{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-0.01em}
.card-b span{font-size:13px;line-height:1.45;color:var(--text-dim)}
.card-b i{font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--text-faint);margin-top:2px}
.end{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);margin-top:clamp(20px,4svh,44px);padding-top:var(--s5);border-top:1px solid var(--line)}
.end-nav{display:flex;gap:var(--s3);flex-wrap:wrap}
.last{padding-bottom:0}
.last .wrap.grow{flex:1;display:flex;flex-direction:column;justify-content:flex-start}

/* ---------- products index ---------- */
.px-h{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:600;line-height:1;letter-spacing:-0.04em}
.px-sub{margin-top:var(--s3);font-size:var(--fs-lead);color:var(--text-dim);max-width:60ch}
.px-bar{position:sticky;top:var(--hdr);z-index:5;margin-top:var(--s6);padding:var(--s3) 0;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(180deg,rgba(2,4,12,0.92),rgba(2,4,12,0.78));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* the bar: a menu per facet, the count, grouping and sorting, on one line; the filters in force under it */
.pxb{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.pxb-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pxb-r{display:flex;align-items:center;gap:10px;margin-left:auto}
.pxd{position:relative}
.pxd-b{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 14px;border-radius:8px;border:1px solid var(--line-2);background:rgba(14,21,44,0.78);
  font-family:var(--font-display);font-size:13.5px;font-weight:500;color:var(--text-dim);white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.pxd-b:hover{color:var(--text);border-color:var(--border-strong)}
.pxd-b b{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:#0a1430;background:var(--grad-accent)}
.pxd-b svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .3s var(--ease)}
.pxd.set .pxd-b{color:var(--text);border-color:rgba(134,210,255,0.4)}
.pxd.open .pxd-b{color:var(--text);border-color:rgba(160,200,255,0.55);background:rgba(22,32,64,0.9)}
.pxd.open .pxd-b svg{transform:rotate(180deg)}
.pxd-p{position:absolute;left:0;top:calc(100% + 8px);z-index:20;display:flex;flex-wrap:wrap;gap:6px;width:max-content;max-width:min(560px,calc(100vw - 2 * var(--gutter)));padding:12px;border-radius:12px;
  border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(14,22,46,0.98),rgba(6,10,24,0.99));box-shadow:0 30px 60px -24px rgba(0,0,0,0.95);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s linear .25s}
.pxd.open .pxd-p{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s}
.pxb-r .pxd-p{left:auto;right:0}
.px-t{flex:none;font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--text-dim);padding:7px 11px;border-radius:999px;
  border:1px solid var(--line);background:rgba(17,25,46,0.7);transition:color .2s,border-color .2s,background .2s;white-space:nowrap}
.px-t i{font-style:normal;margin-left:6px;color:var(--text-faint)}
.px-t:hover{color:var(--text);border-color:var(--border-strong)}
.px-t.on{color:#0a1430;background:var(--grad-accent);border-color:transparent}
.px-t.on i{color:rgba(10,20,48,0.62)}
.px-n{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--text-faint);white-space:nowrap}
.px-n b{font-weight:600;color:var(--text)}
.pxs{display:inline-flex;padding:3px;gap:2px;border-radius:9px;border:1px solid var(--line-2);background:rgba(10,16,36,0.8)}
.pxs button{height:28px;padding:0 10px;border-radius:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);white-space:nowrap;transition:color .2s,background .2s}
.pxs button:hover{color:var(--text)}
.pxs button.on{color:var(--text);background:rgba(150,180,255,0.12)}
.pxa{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.pxa-p{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 9px 0 11px;border-radius:999px;border:1px solid rgba(134,210,255,0.35);background:rgba(93,139,255,0.1);
  font-family:var(--font-display);font-size:12.5px;font-weight:500;color:var(--text);transition:border-color .2s,background .2s}
.pxa-p i{font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint)}
.pxa-p span{font-size:14px;line-height:1;color:var(--text-dim)}
.pxa-p:hover{border-color:rgba(134,210,255,0.7);background:rgba(93,139,255,0.18)}
.pxa-x{height:28px;padding:0 10px;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);text-decoration:underline;text-underline-offset:3px}
.pxa-x:hover{color:var(--text)}
/* narrow: one row (Filter, Group, Sort, the count); every menu opens the bar's whole width */
.pxb.pxb-m{position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px}
.pxb-m .pxd{position:static;flex:none}
.pxb-m .pxd-b{height:34px;padding:0 9px 0 11px;gap:6px;font-size:13px}
.pxb-m .pxd-p{left:0;right:0;width:auto;max-width:none;max-height:min(64vh,520px);overflow:auto;overscroll-behavior:contain}
.pxb-m .px-n{margin-left:auto;padding-left:4px}
.pxf-g{flex:1 1 100%;display:grid;gap:8px}
.pxf-g + .pxf-g{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}
.pxf-g > i{font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-faint)}
.pxf-g > div{display:flex;flex-wrap:wrap;gap:6px}
.px-group{margin-top:var(--s7)}
.px-group h2{font-family:var(--font-display);font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-0.02em;display:flex;align-items:baseline;gap:12px}
.px-group h2 i{font-style:normal;font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}
.px-grid{margin-top:var(--s4);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.px-grid .card-img{max-height:none}
.px-card .card-b .px-tg{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.px-card .px-tg em{font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--text-faint);border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.px-card .p-stage-chip{position:absolute;top:10px;left:10px;z-index:2}
.px-page{padding:calc(var(--hdr) + var(--s7)) 0 var(--s9)}

@media (max-width:1180px){
  .px-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards.c4 .card-b span{font-size:12.5px}
}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .p-stage{padding:0 10% 8% 0}
  .phone{width:24%;border-radius:20px;padding:4px}
  .phone img{border-radius:16px}
  .facets,.cards,.cards.c4{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80%,340px);overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:0 var(--gutter) var(--s3);scroll-padding:0 var(--gutter);scrollbar-width:none}
  .facets::-webkit-scrollbar,.cards::-webkit-scrollbar{display:none}
  .facet,.card{scroll-snap-align:start}
  .cards,.cards.c4{grid-auto-columns:min(62%,260px)}
  .cards.few{grid-template-columns:none;grid-auto-columns:min(84%,340px);max-width:none}
  /* the way on: the two neighbours side by side, all products under them, each the same width */
  .end{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .end-nav{display:contents}
  .end .btn{justify-content:center;min-width:0}
  .end > .btn-primary{grid-column:1 / -1}
  .px-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .pxb{flex-wrap:nowrap;flex-direction:column;align-items:stretch;gap:8px}
  .pxb-f{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .pxb-f::-webkit-scrollbar{display:none}
  .pxb-r{margin-left:0;flex-wrap:wrap;row-gap:8px}
  .pxs{margin-left:auto}
  .pxs button{padding:0 9px}
  .pxd{position:static}
  .pxd-p{left:0;right:0;max-width:none;width:auto}
  .pxb-r .pxd-p{left:0;right:0}
}
@media (max-width:900px){
  .p-back{display:none}
  .p-h{margin-top:0}
  .p-nm{margin-bottom:var(--s2)}
  .p-tl{font-size:clamp(28px,8.4vw,38px)}
  .lead{font-size:16px;-webkit-line-clamp:3}
  .p-steps,.p-done{font-size:16px}
  .p-tags{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .p-facts{gap:8px;max-width:none}
  .p-facts.row{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .p-facts .p-fact{padding:8px 10px 9px}
  .p-facts .p-fact b{font-size:16px}
  .p-facts .p-fact span{font-size:11px;letter-spacing:0.08em}
  .p-stage,.p-stage.solo{padding:0;margin-right:0}
  .phone{display:none}
  /* a phone keeps two notes, unless the page needs all of them (content "notes": "all") */
  .p-notes:not(.all) div:nth-child(n+3),.p-own ~ .p-notes{display:none}
  .p-own{margin-top:var(--s3);font-size:11px}
  .p-notes div{grid-template-columns:84px minmax(0,1fr)}
  .links{margin-top:var(--s4)}
  .split .links{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .split .links::-webkit-scrollbar{display:none}
  .split .links.even{margin-right:0;padding-right:0;overflow:visible}
  .split .links > *{flex:none}
  .p-meta{margin-top:var(--s3)}
  /* the hero holds one window: the tour's caption goes, and a long coverage keeps its first five */
  .split > .p-stage .p-meta{display:none}
  .p-cov li:not(.more):nth-child(n+6){display:none}
}
@media (max-width:900px) and (max-height:800px){
  .lead{-webkit-line-clamp:3}
  .p-facts{margin-top:var(--s3)}
  .p-notes:not(.all),.p-own ~ .p-facts{display:none}
  .p-fact{padding:8px 11px 9px}
  .p-fact b{font-size:18px}
}
/* a short window keeps the lead to what matters: name, line, figures, the way in */
@media (min-width:901px) and (max-height:820px){
  .p-back{display:none}
  .p-h{margin-top:0}
  .p-tl{font-size:clamp(32px,min(3.8vw,6.6svh),60px)}
  .lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .p-fact{padding:8px 12px 9px}
  .p-notes:not(.all) div:nth-child(n+3){display:none}
  .links{margin-top:var(--s4)}
  .card-img{max-height:calc(var(--sh) * 0.16)}
  .cards{gap:var(--s3)}
}
@media (prefers-reduced-motion:reduce){
  .scr,.tour img{transition:none}
}

/* ---------- /enterprise and its areas: nothing behind them - the pictures are the products' own screens, and the
   diagrams are drawn flat and come up once, as their screen arrives ---------- */
.ent .lead{display:block;-webkit-line-clamp:none;overflow:visible;max-width:58ch}
.ent-hero,.ent-wl{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ent-wl .lead{font-size:var(--fs-body,17px);max-width:52ch}
.ent-wl .p-facts{margin-top:var(--s5)}
.ent-shot{position:relative;display:block;overflow:hidden;border-radius:10px;background:#050811;box-shadow:0 0 0 1px rgba(150,190,255,0.14),0 24px 50px -30px rgba(0,0,0,0.9)}
.ent-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
/* the parent: the four, each by its own screen and what an enterprise gets from it */
.ent-ix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.ent-card{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);color:inherit;text-decoration:none;
  background:linear-gradient(170deg,rgba(14,22,44,0.82),rgba(6,10,22,0.92));box-shadow:0 30px 60px -40px rgba(0,0,0,0.9);transition:border-color .3s,transform .5s var(--ease)}
.ent-card:hover,.ent-card:focus-visible{border-color:color-mix(in srgb,var(--accent-2) 55%,transparent);transform:translateY(-3px)}
.ent-card .ent-shot{aspect-ratio:16/8;max-height:calc(var(--sh) * 0.2);border-radius:0;box-shadow:none;border-bottom:1px solid var(--line)}
.ent-card-b{display:flex;flex-direction:column;gap:8px;padding:14px 40px 16px 16px}
.ent-card-b .kick{font-size:11px}
.ent-card-b b{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-0.02em;line-height:1.2}
.ent-card-b .ent-pts{margin-top:2px;gap:4px}
.ent-card-b .ent-pts li{font-size:13px;color:var(--text-dim)}
@media (min-width:901px){
  .ent-ix{grid-auto-rows:auto;row-gap:0}
  .ent-ix > .ent-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;padding-bottom:16px}
  .ent-ix > .ent-card:nth-child(n+3){margin-top:var(--s4)}
  .ent-ix > .ent-card .ent-card-b{display:contents}
  .ent-ix > .ent-card .ent-card-b > *{margin:8px 40px 0 16px}
  .ent-ix > .ent-card .ent-card-b > :first-child{margin-top:14px}
}
.ent-card-a{position:absolute;right:16px;bottom:15px;font-style:normal;color:var(--text-faint);transition:color .3s,transform .3s}
.ent-card:hover .ent-card-a{color:var(--accent-2);transform:translateX(3px)}
/* the diagrams: the stack and the data pipeline, boxes and what joins them, a tier or a stage at a time */
.ent-mol,.ent-pipe{margin:0}
.ent-mol svg,.ent-pipe svg{display:block;width:100%;height:auto;overflow:visible}
.ent-mol .mol-t-svg{display:none}
.mol-n rect{fill:rgba(10,18,36,0.94);stroke:rgba(150,190,255,0.32);stroke-width:1}
.mol-n.lyr rect{fill:rgba(12,30,36,0.94);stroke:rgba(110,230,190,0.55)}
.mol-n.lyr .mol-nm{fill:#c9fbe6}
.mol-n.blk rect{fill:rgba(12,26,44,0.94);stroke:color-mix(in srgb,var(--accent-2) 55%,transparent)}
.mol-n.grp rect{fill:rgba(10,16,30,0.42);stroke:rgba(210,225,255,0.34);stroke-dasharray:5 5}
.mol-n.grp.web rect{fill:rgba(10,16,30,0.6)}
.mol-n.cli rect{fill:rgba(12,20,40,0.96)}
.mol-n.more .mol-nm{fill:var(--text-faint)}
.mol-n.prt rect{fill:rgba(18,26,58,0.94);stroke:rgba(140,170,255,0.6)}
.mol-n.chip rect{fill:rgba(10,18,36,0.94);stroke:rgba(150,190,255,0.26)}
.mol-n.chip.out rect{stroke:color-mix(in srgb,var(--accent-2) 45%,transparent)}
.mol-nm{font-family:var(--font-mono);font-size:13px;font-weight:600;fill:#eef2ff}
.mol-n.std .mol-nm,.mol-n.cli.in .mol-nm{font-size:11.5px}
.mol-n.cli .mol-nm{font-size:12px}
.mol-sub{font-family:var(--font-body);font-size:11px;fill:#9aa6c8}
.mol-c{font-family:var(--font-body);font-size:11px;fill:#cfd8f5}
.mol-t{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.14em;fill:#8cb6ff}
.mol-t2{font-family:var(--font-body);font-size:11px;fill:#6e7aa0}
.mol-b{fill:none;stroke:rgba(150,190,255,0.42);stroke-width:1.3}
.mol-f{fill:none;stroke:#c2f4ff;stroke-width:2;stroke-linecap:round;stroke-dasharray:0.06 0.94;stroke-dashoffset:1;opacity:0}
.mo .ent :is(.mol-n,.mol-lg){opacity:0;transition:opacity .7s var(--ease) calc(var(--k,0) * 70ms + 200ms)}
.mo .ent .screen.on :is(.mol-n,.mol-lg){opacity:1}
.mo .ent .mol-b{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) calc(var(--k,0) * 70ms + 300ms)}
.mo .ent .screen.on .mol-b{stroke-dashoffset:0}
.mo .ent .screen.on .mol-f{opacity:0.85;animation:molF 3.2s linear calc(var(--k,0) * 0.25s + 1.6s) infinite}
@keyframes molF{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){ .mol-f{display:none} }
/* the sections under a heading */
.facets.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ent-head{max-width:860px}
.ent-head .sec-h{margin-top:var(--s3)}
.ent-head > .sec-h:first-child{margin-top:0}
.ent-head .lead{margin-top:var(--s3)}
.ent-head + .facets,.sec-h + .facets.ent-f{margin-top:clamp(18px,3.4svh,34px)}
.ent .facet-img{max-height:calc(var(--sh) * 0.3)}
.ent .facet{padding-bottom:var(--s5)}
.ent .facet-body > :first-child{margin-top:var(--s4)}
.ent .facet p{font-size:14px;line-height:1.55;margin-top:8px}
.ent .facet-t{margin-top:8px}
.ent-f .facet-body .links{margin-top:auto;padding-top:14px;align-self:end}
.ent-lead{margin-top:10px;font-size:14.5px;color:var(--text-dim);line-height:1.6}
.ent-pts{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.ent-pts li{position:relative;padding-left:18px;font-size:14px;color:var(--text)}
.ent-pts li::before{content:"";position:absolute;left:0;top:0.62em;width:9px;height:1.5px;border-radius:1px;background:var(--accent-2)}
.ent-links{margin-top:clamp(14px,2.6svh,26px)}
@media (max-width:900px){
  .ent-links{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .ent-links::-webkit-scrollbar{display:none}
  .ent-links > *{flex:none}
}
/* the partner portal: the tenancy down a rail, the roles at each level, and the portal itself with its controls */
/* the two sides end level: the rail of tiers spreads down the height of the portal and its controls */
.ent-pt{margin-top:clamp(18px,3.4svh,34px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3.4vw,48px);align-items:stretch}
.ent-tiers{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:clamp(10px,1.9svh,20px);align-content:space-between}
.ent-tiers::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1.5px;background:linear-gradient(180deg,rgba(95,224,255,0.75),rgba(95,224,255,0.12))}
.ent-tier{position:relative;padding-left:28px}
.ent-tier-d{position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;background:#02040c;box-shadow:inset 0 0 0 2px #bff3ff,0 0 10px rgba(95,224,255,0.45)}
.ent-tier b{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-0.015em}
.ent-tier p{margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--text-dim)}
.ent-roles,.ent-langs{display:flex;flex-wrap:wrap;gap:6px}
.ent-roles{margin-top:8px}
.ent-roles span,.ent-langs span{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;padding:3px 9px;border-radius:999px;color:var(--accent-2);box-shadow:inset 0 0 0 1px rgba(95,224,255,0.3)}
.ent-pt-r .ent-shot{width:100%;aspect-ratio:16/8.6;max-height:calc(var(--sh) * 0.42)}
.ent-ctl{margin-top:var(--s4);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.ent-ctl > div{padding-top:var(--s3);border-top:1px solid var(--line-2)}
.ent-ctl p{margin-top:6px;font-size:13px;line-height:1.5;color:var(--text-dim)}
.ent-end .wrap.grow{display:flex;flex-direction:column;justify-content:center}
.ent-cta{max-width:720px;margin:auto;text-align:center}
.ent-cta .lead{margin:var(--s4) auto 0}
.ent-cta .links{justify-content:center;margin-top:var(--s5)}
@media (max-width:900px){ .ent-cta .links{display:grid;grid-template-columns:minmax(0,1fr);max-width:300px;margin-inline:auto} .ent-cta .links > *{justify-content:center} }
@media (max-height:820px) and (min-width:901px){
  .ent-card-b .ent-pts{display:none}
  .ent-ctl p{font-size:12.5px}
  .ent .facet-img{max-height:calc(var(--sh) * 0.22)}
  .ent .facet{padding-bottom:var(--s4)}
  .ent .facet-body > *{margin-inline:var(--s4)}
  .ent .facet-body > :first-child{margin-top:var(--s3)}
  .ent-pts{margin-top:8px;gap:3px}
  .ent-pts li{font-size:13px}
  .ent-pt-r .ent-shot{max-height:calc(var(--sh) * 0.36)}
}
@media (max-width:900px){
  .ent-hero,.ent-wl,.ent-pt{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .ent-ix{grid-template-columns:minmax(0,1fr);gap:12px}
  .ent-card .ent-shot{aspect-ratio:16/7;max-height:none}
  .ent-card-b b{font-size:16px}
  .facets.two{grid-template-columns:none}
  .ent-ctl{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
}
@media (max-width:700px){ .ent-mol .mol-w{display:none} .ent-mol .mol-t-svg{display:block;max-width:420px;margin:0 auto} }

/* ---------- the enterprise index ----------
   the four as one stack: each area's own screen a plate, all turned to the same angle and set one above another,
   its name and line out to the side on a leader; held while the page scrolls through it (.exs, below), then the ways
   in over the figures */
.ex-copy{container-type:inline-size}
.ex-hl{margin-top:var(--s4);font-family:var(--font-display);font-weight:600;font-size:min(clamp(34px,4vw,60px),9.2cqi);line-height:1.04;letter-spacing:-0.042em;white-space:nowrap}
.ex-hl .grad{display:block;width:fit-content}
.ex-copy .lead{display:block;-webkit-line-clamp:none;overflow:visible;max-width:44ch}
.ex-copy .links{margin-top:var(--s5)}
.stk{--step:18.5%;position:relative;height:min(calc(var(--sh) - 90px),660px);perspective:2600px;perspective-origin:38% 20%}
.stk-l{position:absolute;left:0;right:0;top:calc(var(--k) * var(--step));height:44%;display:block;color:inherit;text-decoration:none;z-index:calc(10 - var(--k))}
/* a layer is only where its plate and its name are: the box around them overlaps the plates under it, so the pointer
   passes through it to whichever plate it is over */
.stk-l{pointer-events:none}
.stk-p,.stk-t{pointer-events:auto}
.stk-p{position:absolute;left:0;top:0;width:58%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#050811;transform-origin:50% 50%;
  transform:rotateX(57deg) rotateZ(-33deg);
  box-shadow:0 0 0 1px rgba(160,200,255,0.3),inset 0 1px 0 rgba(255,255,255,0.12),0 9px 0 -1px rgba(16,26,54,0.98),0 10px 0 -1px rgba(150,190,255,0.22),0 46px 70px -24px rgba(0,0,0,0.95);
  transition:translate .7s var(--ease),filter .5s var(--ease),box-shadow .5s var(--ease)}
.stk-p img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.stk-p::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(150deg,rgba(170,215,255,0.14),transparent 42%,rgba(2,4,12,0.28))}
.stk-t{position:absolute;left:63%;right:-12px;top:24%;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;align-items:baseline;transition:opacity .5s var(--ease)}
.stk-t::before{content:"";position:absolute;right:calc(100% + 12px);top:0.62em;width:clamp(28px,4vw,64px);height:1px;background:linear-gradient(90deg,transparent,rgba(150,200,255,0.55))}
.stk-t i{grid-row:span 2;font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;color:var(--accent-2)}
.stk-t b{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-0.015em;white-space:nowrap}
.stk-t span{font-size:clamp(12px,0.95vw,13.5px);line-height:1.45;color:var(--text-dim);white-space:nowrap}
@media (hover:hover){
  .stk:hover .stk-l:not(:hover) .stk-p{filter:brightness(0.62) saturate(0.75)}
  .stk:hover .stk-l:not(:hover) .stk-t{opacity:0.5}
  .stk-l:hover .stk-p{translate:0 -14px;box-shadow:0 0 0 1px rgba(170,215,255,0.55),inset 0 1px 0 rgba(255,255,255,0.16),0 9px 0 -1px rgba(16,26,54,0.98),0 10px 0 -1px rgba(150,200,255,0.4),0 60px 80px -24px rgba(0,0,0,0.95)}
  .stk-l:hover .stk-t b{color:#fff}
}
/* the stack builds from the bottom layer up as its screen arrives */
.mo .stk-l{opacity:0;translate:0 -36px;transition:opacity .9s var(--ease) calc((3 - var(--k)) * 150ms + 200ms),translate 1.2s var(--ease) calc((3 - var(--k)) * 150ms + 200ms)}
.mo .screen.on .stk-l{opacity:1;translate:none}
/* the ways in: three panes, and under them the figures the stack stands on */
.ex-ways{margin-top:clamp(16px,3svh,30px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.ex-way{position:relative;display:flex;flex-direction:column;padding:clamp(18px,2.6svh,28px) clamp(18px,1.8vw,28px);border-radius:var(--r-lg);border:1px solid rgba(150,180,255,0.13);
  background:linear-gradient(180deg,rgba(255,255,255,0.035),transparent 32%),linear-gradient(180deg,rgba(16,25,54,0.72),rgba(6,10,24,0.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 30px 60px -40px rgba(0,0,0,0.9)}
.ex-way .kick{font-size:11px}
.ex-w-t{margin-top:var(--s3);font-family:var(--font-display);font-size:clamp(20px,1.7vw,26px);font-weight:600;letter-spacing:-0.025em;line-height:1.16}
.ex-way p{margin-top:var(--s3);font-size:14.5px;line-height:1.6;color:var(--text-dim)}
.ex-way .links{margin-top:auto;padding-top:var(--s4)}
/* the figures close the screen: a band at its foot, the ways in under the heading */
#ways > .wrap{flex:1;display:flex;flex-direction:column}
.ex-figs{margin:auto 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);padding-top:clamp(16px,3svh,28px);border-top:1px solid var(--line-2)}
.ex-figs div{display:flex;flex-direction:column;gap:6px}
.ex-figs dt{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,min(4vw,7.4svh),64px);line-height:1;letter-spacing:-0.04em;background:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.ex-figs dd{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim)}
.mo .ex-way,.mo .ex-figs div{opacity:0;translate:0 22px;transition:opacity .8s var(--ease) calc(var(--k,0) * 110ms + 150ms),translate 1s var(--ease) calc(var(--k,0) * 110ms + 150ms)}
.ex-figs div:nth-child(2){--k:1} .ex-figs div:nth-child(3){--k:2} .ex-figs div:nth-child(4){--k:3}
.mo .screen.on .ex-way,.mo .screen.on .ex-figs div{opacity:1;translate:none}
@media (min-width:901px) and (max-height:820px){
  .ex-way p{font-size:13.5px}
  .ex-figs{padding-top:var(--s4)}
}
@media (max-width:900px){
  .ex-hl{font-size:min(40px,10.6cqi)}
  .stk{--step:20%;height:min(40svh,360px)}
  .stk-p{left:8%;width:76%}
  .stk-t{display:none}
  .ex-ways{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,340px);overflow-x:auto;scroll-snap-type:x mandatory;
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:0 var(--gutter) var(--s2);scroll-padding:0 var(--gutter);scrollbar-width:none}
  .ex-ways::-webkit-scrollbar{display:none}
  .ex-way{scroll-snap-align:start}
  .ex-figs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s4);margin-top:var(--s6)}
  .ex-figs dt{font-size:40px}
}
@media (max-width:900px) and (max-height:740px){
  .ex-copy .lead{font-size:14.5px}
  .ex-copy .links{margin-top:var(--s4)}
  .stk{height:min(30svh,280px)}
  .ex-way p{font-size:13.5px}
  .ex-figs{margin-top:var(--s4);row-gap:var(--s3)}
  .ex-figs dt{font-size:32px}
}
@media (prefers-reduced-motion:reduce){ .stk-p{transition:none} }

/* the stack as a story: the stage held for five screens of scroll, a snap point at each. The stack comes apart, and a
   layer at a time leaves it, turns to face the reader beside its own words and goes on up with the page as the next
   comes (product.js sets where each plate and each set of words is). Without motion, the words one under another */
.exs{position:relative;scroll-snap-align:start;scroll-snap-stop:always}
.exs-stage{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hdr) + var(--sy)) 0 calc(var(--sy) + 54px);overflow:hidden}
.exs-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.exs-copy{display:grid;align-items:center}
.exs-c{grid-area:1 / 1}
.exs-n{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;color:var(--text-faint)}
.exs-n i{width:34px;height:1px;background:linear-gradient(90deg,var(--accent-2),var(--line-2))}
.exs-c .kick{margin-top:var(--s4)}
.exs-t{margin-top:var(--s3);font-family:var(--font-display);font-weight:600;font-size:clamp(32px,min(3.4vw,6.4svh),54px);line-height:1.05;letter-spacing:-0.04em}
.exs-t .grad{display:block;width:fit-content}
.exs-c .lead{margin-top:var(--s4);max-width:40ch}
.exs-c .links{margin-top:var(--s5)}
.exs-dots{list-style:none;margin:0;padding:0;position:absolute;z-index:2;right:var(--gutter);top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:14px;opacity:0}
.exs-dots li{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;color:var(--text-faint);opacity:0.45;
  transition:opacity .5s var(--ease),color .5s var(--ease)}
.exs-dots li i{width:16px;height:1px;background:currentColor;transition:width .5s var(--ease)}
.exs-dots li.on{opacity:1;color:var(--accent-2)}
.exs-dots li.on i{width:30px}
.exs-snap{display:none}
.exs .stk-p{will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .exs{height:calc((var(--n) + 1) * 100svh)}
  .exs-stage{position:sticky;top:0;height:100svh;min-height:0}
  .exs-snap{display:block;position:absolute;inset:0;pointer-events:none}
  .exs-snap i{position:absolute;left:0;width:1px;height:100svh;top:calc(var(--k) * 100svh);scroll-snap-align:start;scroll-snap-stop:always}
  .exs-c:not(.on){opacity:0;visibility:hidden}
  .mo .exs .stk-l{opacity:0;translate:0 -36px;transition:opacity .9s var(--ease) calc((3 - var(--k)) * 150ms + 200ms),translate 1.2s var(--ease) calc((3 - var(--k)) * 150ms + 200ms)}
  .mo .exs.on .stk-l{opacity:1;translate:none}
}
@media (prefers-reduced-motion:reduce){
  .exs-copy{display:flex;flex-direction:column;gap:var(--s7,48px)}
  .exs-dots,.exs-stage > .hero-cue{display:none}
}
@media (max-width:900px){
  .exs-in{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .exs-t{font-size:min(36px,9.4vw)}
  .exs-dots{display:none}
}

/* ---------- an enterprise area on a page of its own: its words beside a board, its figures under them; then what it
   is made of ---------- */
.ent-top{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ent-top .p-tl .grad{display:block;width:fit-content}
.ent-top .lead{max-width:46ch}
.ent-top .p-facts{margin-top:clamp(18px,3.4svh,30px)}
.ent-top .links{margin-top:clamp(18px,3.4svh,30px)}
.ent-part{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,72px);align-items:center}
.ent-part.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ent-part.flip .ent-part-t{order:2}
.ent-part-t .sec-h{margin-top:var(--s3)}
.ent-part-t .lead{margin-top:var(--s4);max-width:46ch}
.ent-part-t .links{margin-top:var(--s5)}
.ent-scr{--glow:rgba(45,216,156,0.5)}
.ent-scr img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:inherit;position:relative;z-index:1}
/* the crates: a pane each, set alike - the name, what it reaches, what it does, its modules, the line that adds it and
   where it is published, each on the same row as its neighbour's */
.crates{margin-top:clamp(18px,3.4svh,34px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4)}
.crates.libs{grid-template-columns:repeat(3,minmax(0,1fr))}
.crate{position:relative;display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:12px;align-content:start;padding:clamp(18px,2.6svh,26px) clamp(18px,1.8vw,26px);
  border-radius:var(--r-lg);border:1px solid rgba(150,180,255,0.12);
  background:radial-gradient(120% 90% at 0% 0%,rgba(95,224,255,0.07),transparent 55%),linear-gradient(180deg,rgba(255,255,255,0.03),transparent 30%),linear-gradient(180deg,rgba(14,22,48,0.78),rgba(5,9,22,0.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 34px 70px -44px rgba(0,0,0,0.95);transition:border-color .5s var(--ease),transform .6s var(--ease)}
.crate.lib{grid-row:span 4}
.crates > .crate:nth-child(n+3){margin-top:var(--s4)}
.crates.libs > .crate:nth-child(n+3){margin-top:0}
.crate:hover{border-color:rgba(95,224,255,0.3);transform:translateY(-3px)}
.crate-h{display:flex;align-items:center;gap:10px;min-width:0}
.crate-h b{font-family:var(--font-mono);font-size:clamp(16px,1.35vw,19px);font-weight:600;letter-spacing:-0.01em;color:#eef4ff;white-space:nowrap;overflow:hidden;text-overflow:clip}
.crate-v{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-2)}
.crate-v i{font-style:normal;margin-left:6px;letter-spacing:0.04em;text-transform:none;color:var(--text-faint)}
.crate p{font-size:14px;line-height:1.6;color:var(--text-dim)}
.crate-m{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:start;gap:6px}
.crate-m li{font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;padding:3px 8px;border-radius:5px;color:#cfe0ff;background:rgba(120,160,255,0.07);box-shadow:inset 0 0 0 1px rgba(150,185,255,0.16)}
.crate-m.langs li{color:var(--accent-2);box-shadow:inset 0 0 0 1px rgba(95,224,255,0.3);background:none;border-radius:999px;padding:3px 9px}
.crate-i{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 13px;border:0;border-radius:8px;cursor:pointer;font:inherit;text-align:left;color:var(--text);
  background:#03060d;box-shadow:inset 0 0 0 1px rgba(150,185,255,0.14),inset 0 2px 10px rgba(0,0,0,0.7);transition:box-shadow .4s var(--ease)}
.crate-i:hover{box-shadow:inset 0 0 0 1px rgba(95,224,255,0.4),inset 0 2px 10px rgba(0,0,0,0.7)}
.crate-i code{font-family:var(--font-mono);font-size:12.5px;color:#e6f4ff;white-space:nowrap;overflow:hidden}
.crate-i code span{color:#2dd89c;margin-right:4px}
.crate-i em{flex:none;font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-faint);transition:color .3s}
.crate-i:hover em{color:var(--accent-2)}
.crate-i.done em{color:#2dd89c}
.crate .links{gap:6px;align-self:end}
.crate .chip{font-size:11px;padding:4px 8px}
@media (min-width:901px) and (max-height:820px){ .crate p{font-size:13px;line-height:1.5} .crate{row-gap:9px} }
@media (max-width:900px){
  .ent-top{grid-template-columns:minmax(0,1fr)}
  .ent-part,.ent-part.flip{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .ent-part.flip .ent-part-t{order:0}
  .crates,.crates.libs{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(86%,360px);grid-template-rows:repeat(6,auto);gap:0 var(--s3);overflow-x:auto;
    scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) var(--s2);scroll-padding:0 var(--gutter);scrollbar-width:none}
  .crates.libs{grid-template-rows:repeat(4,auto)}
  .crates::-webkit-scrollbar{display:none}
  .crate{scroll-snap-align:start}
  .crates > .crate:nth-child(n+3){margin-top:0}
}