/* Lab styles: the quark field and the Engine showcase. Loaded after site.tail.css on Home.
   Everything here uses the chassis tokens (site.css :root); no new colour is introduced.
   The devices are drawn, not rendered: 1px rules on the ground, the screen a recessed well.
   Flat, not floating: no shadows, no gloss. */

/* ---------- hero: the quark field ---------- */
.hero{isolation:isolate}
.qf{position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;display:block;pointer-events:none}

/* ---------- section intro (rail grammar, as the pillars) ---------- */
.engine{padding-bottom:0}
.engine .eg-intro{position:relative;padding-left:calc(var(--padx) + var(--indent2))}
.engine .eg-intro h2{font-family:var(--display);font-weight:500;color:var(--fg);font-size:clamp(40px,6.5vw,96px);line-height:1;letter-spacing:-0.02em;max-width:13ch}
.engine .eg-intro .body{margin-top:32px;max-width:46ch;color:var(--fg-body)}
.eg-note{margin-top:28px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-mute)}
@media (max-width:768px){.engine .eg-intro{padding-left:var(--padx)}}

/* ---------- acts ---------- */
.eg-act{position:relative;height:300vh}
.eg-act2{height:240vh}
.eg-act3{height:170vh}
.eg-act .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:88px 0 28px}

/* ---------- the drawn devices ---------- */
.lt{position:relative}
.lt-lid{position:relative;border:1px solid var(--rule-strong);border-radius:18px 18px 6px 6px;padding:2.3% 2.3% 2.8%;background:var(--ground)}
.lt-cam{position:absolute;top:1.05%;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;border:1px solid var(--rule-strong)}
.lt-scr{position:relative;aspect-ratio:16/10;border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--recess)}
.lt-base{position:relative;height:clamp(10px,1.15vw,16px);width:112%;margin-left:-6%;border:1px solid var(--rule-strong);border-top-color:var(--rule-strong);border-radius:2px 2px 16px 16px;background:var(--ground)}
.lt-base::before{content:"";position:absolute;top:-1px;left:50%;width:15%;margin-left:-7.5%;height:42%;border:1px solid var(--rule-strong);border-top:0;border-radius:0 0 8px 8px}
.ph{position:relative;aspect-ratio:390/844;padding:3.4%;border:1px solid var(--rule-strong);border-radius:15% / 7%;background:var(--ground)}
.ph-scr{position:relative;width:100%;height:100%;border:1px solid var(--rule);border-radius:12% / 5.6%;overflow:hidden;background:var(--recess);
  clip-path:inset(0 round 12% / 5.6%)}
.es-fit{position:absolute;left:0;top:0;transform-origin:0 0}

/* act 1 */
.eg-lt1{width:min(70vw,1120px,calc((100svh - 250px) * 1.5));position:relative;z-index:1;will-change:transform}
.eg-caps{position:relative;width:min(760px,90vw);height:92px;margin-top:clamp(22px,3vh,40px);text-align:center}
.eg-caps .cap{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
.eg-caps .cap.on{opacity:1;transform:none}
.cap h3{font-family:var(--display);font-weight:500;color:var(--fg);font-size:clamp(24px,2.4vw,36px);line-height:1.12;letter-spacing:-0.015em}
.cap p{margin-top:10px;font-size:16px;color:var(--fg-dim)}

/* act 2 */
.eg-act2-grid{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:clamp(48px,8vw,140px);width:100%}
.eg-copy{max-width:420px}
.eg-copy .eyebrow{margin-bottom:28px}
.eg-copy h3{font-family:var(--display);font-weight:500;color:var(--fg);font-size:clamp(30px,3.2vw,48px);line-height:1.05;letter-spacing:-0.02em}
.eg-copy p:not(.eyebrow){margin-top:22px;font-size:17px;color:var(--fg-dim);max-width:34ch}
.eg-ph2{width:min(340px,calc((100svh - 150px) * 0.462))}

/* act 3 */
.eg-act3-head{text-align:center;margin-bottom:clamp(24px,4vh,48px)}
.eg-act3-head h3{font-family:var(--display);font-weight:500;color:var(--fg);font-size:clamp(28px,3vw,44px);line-height:1.08;letter-spacing:-0.02em}
.eg-duo{position:relative;width:min(76vw,1160px,calc((100svh - 250px) * 1.95))}
/* the phone stands as tall as the laptop, its bottom on the same line; its screen is laid out at
   320px so the type inside reads larger than a scaled 390px screen would */
.eg-duo .eg-lt3{width:74%}
.eg-duo .eg-ph3{position:absolute;right:0;bottom:0;width:22.5%;aspect-ratio:auto}

/* ---------- the Engine's screens (laid out at device size, then scaled) ---------- */
.es{position:relative;width:100%;height:100%;background:var(--recess);color:var(--fg-body);font-family:var(--body);font-weight:300;font-size:14px;line-height:1.45;overflow:hidden}
.es b{font-weight:500;color:var(--fg)}
.es p{margin:0}
.es-k{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute)}
.es-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:none}
.es-av{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--rule-strong);font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;color:var(--fg-dim);flex:none}

/* desk grid */
.es-desk{display:grid;grid-template-columns:184px 292px 1fr 268px;grid-template-rows:56px minmax(0,1fr)}
.es-ov{grid-template-columns:184px 1fr}
.es-top{grid-column:1 / -1;display:grid;grid-template-columns:184px 1fr auto;align-items:center;gap:24px;padding:0 24px 0 0;border-bottom:1px solid var(--rule)}
.es-acct{padding-left:22px;font-size:13px;color:var(--fg);display:flex;align-items:center;gap:10px;white-space:nowrap}
.es-chev{width:6px;height:6px;border-right:1px solid var(--fg-dim);border-bottom:1px solid var(--fg-dim);transform:rotate(45deg) translateY(-2px)}
.es-search{justify-self:start;width:420px;height:34px;border:1px solid var(--rule);border-radius:999px;padding:0 16px;display:flex;align-items:center;font-size:13px;color:var(--fg-mute)}
.es-date{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;color:var(--fg-mute)}
.es-rail{border-right:1px solid var(--rule);padding:18px 12px;display:flex;flex-direction:column;gap:2px}
.es-mark{padding:0 0 22px;line-height:0;display:flex;justify-content:center}
.es-mono{height:22px;width:auto;display:block}
.es-ri{position:relative;display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;font-size:13.5px;color:var(--fg-dim)}
.es-ri.on{color:var(--fg);background:rgba(244,244,245,0.05)}
.es-ri.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:1px;background:var(--lav)}
.es-rfoot{margin-top:auto;padding:0 6px}

/* inbox list */
.es-list{border-right:1px solid var(--rule);overflow:hidden}
.es-lh{display:flex;justify-content:space-between;align-items:baseline;padding:18px 20px 14px;border-bottom:1px solid var(--rule)}
.es-lh b{font-family:var(--display);font-size:18px}
.es-lh span{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;color:var(--fg-mute)}
.es-li{display:flex;gap:12px;padding:14px 20px;border-bottom:1px solid var(--rule-soft)}
.es-li.on{background:rgba(244,244,245,0.04)}
.es-li > div{min-width:0;flex:1}
.es-lin{display:flex;justify-content:space-between;gap:8px;font-size:13.5px}
.es-lin span{font-family:var(--mono);font-size:10px;color:var(--fg-mute);letter-spacing:0.06em}
.es-li p{margin-top:3px;font-size:12.5px;color:var(--fg-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-rrow time{white-space:nowrap}

/* thread */
.es-thread{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.es-th{display:flex;justify-content:space-between;align-items:center;padding:16px 26px;border-bottom:1px solid var(--rule)}
.es-th b{display:block;font-size:15px}
.es-th span{font-size:12.5px;color:var(--fg-mute)}
.es-chip{font-family:var(--mono);font-size:10px!important;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg)!important;border:1px solid var(--rule-strong);border-radius:999px;padding:6px 12px}
.es-scroll{position:relative;flex:1;min-height:0;overflow:hidden}
.es-flow{padding:22px 26px 24px;display:flex;flex-direction:column;gap:14px;will-change:transform}
.es-flow > [data-n]{opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 10px))}
.es-msg{max-width:78%;border:1px solid var(--rule);border-radius:12px;padding:12px 15px}
.es-msg p{margin-top:5px;font-size:14px;color:var(--fg-body)}
.es-mh{display:flex;gap:14px;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-mute)}
.es-in{align-self:flex-start}
.es-out{align-self:flex-end;background:rgba(244,244,245,0.05);border-color:transparent}
.es-ev{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:6px 12px;padding:10px 0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.es-evdot{width:7px;height:7px;border-radius:50%;background:var(--fg)}
.es-evtag{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute)}
.es-evtxt{font-size:13.5px;color:var(--fg)}
.es-evmeta{grid-column:3;font-size:12px;color:var(--fg-mute)}
.es-composer{margin:0 26px 22px;height:52px;border:1px solid var(--rule);border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:13px;color:var(--fg-mute)}
.es-ch{font-family:var(--mono);font-size:10px;letter-spacing:0.12em}

/* details: the stage tracker uses the house phase-tracker motif, vertical */
.es-side{border-left:1px solid var(--rule);padding:20px 24px;display:flex;flex-direction:column;gap:8px}
.es-side .es-k{margin-top:14px}
.es-side .es-k:first-child{margin-top:0}
.es-v{font-size:13.5px;color:var(--fg-dim)}
.es-big{font-family:var(--display);font-size:26px;color:var(--fg);letter-spacing:-0.01em}
.es-track{list-style:none;margin:4px 0 0;padding:0;position:relative}
.es-track::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--rule-strong)}
.es-track li{position:relative;display:flex;align-items:center;gap:14px;padding:5px 0;font-size:13px;color:var(--fg-mute);transition:color 300ms var(--ease)}
.es-node{position:relative;width:13px;height:13px;border-radius:50%;border:1px solid rgba(244,244,245,0.45);background:var(--recess);flex:none;transition:background-color 300ms var(--ease),border-color 300ms var(--ease)}
.es-track li.done{color:var(--fg-dim)}
.es-track li.done .es-node{background:var(--fg);border-color:var(--fg)}
.es-track li.now{color:var(--fg)}
.es-track li.now .es-node{border-color:var(--lav);box-shadow:inset 0 0 0 3px var(--recess);background:var(--lav)}

/* overview */
.es-main{padding:24px 30px;display:flex;flex-direction:column;gap:20px;min-width:0}
.es-mh2{display:flex;justify-content:space-between;align-items:baseline}
.es-mh2 b{font-family:var(--display);font-size:24px;letter-spacing:-0.01em}
.es-mh2 span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;color:var(--fg-mute)}
.es-tiles{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.es-tile{padding:18px 20px 20px;border-left:1px solid var(--rule)}
.es-tile:first-child{border-left:0;padding-left:0}
.es .es-num{margin-top:10px;font-family:var(--display);font-weight:500;font-size:44px;line-height:1;letter-spacing:-0.025em;color:var(--fg);font-variant-numeric:tabular-nums}
.es-two{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}
.es-recent{flex:1;min-height:0}
.es-rrow{display:grid;grid-template-columns:96px 170px 1fr;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:13px;color:var(--fg-dim);opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 6px))}
.es-rrow:last-child{border-bottom:0}
.es-rrow time{font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;color:var(--fg-mute)}
.es-rrow b{font-size:13.5px}
.es-p-overview .es-recent{margin:14px 16px 0}
.es-p-overview .es-rrow{grid-template-columns:76px 1fr;gap:4px 10px;font-size:11.5px;padding:8px 0}
.es-p-overview .es-rrow span{grid-column:2}
.es-card{border:1px solid var(--rule);border-radius:10px;padding:18px 20px}
.es-pipe{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.es-prow{display:grid;grid-template-columns:150px 1fr 24px;align-items:center;gap:14px;font-size:13px;color:var(--fg-dim)}
.es-prow i{position:relative;height:8px;border-radius:4px;border:1px solid var(--rule)}
.es-prow b{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:rgba(244,244,245,0.55);width:calc(var(--w) * var(--g,0) * 100%)}
.es-prow em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--fg-dim);text-align:right}
.es-week{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.es-wrow{display:grid;grid-template-columns:86px repeat(5,1fr);align-items:center;font-size:13px;color:var(--fg-dim)}
.es-whead span{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;color:var(--fg-mute)}
.es-dots{display:flex;gap:5px}
.es-dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--rule)}
.es-dots i.f{border-color:transparent;background:rgba(244,244,245,calc(0.12 + 0.68 * var(--o,0)))}

/* phone */
.es-phone{display:block}
.es-status{height:48px;display:flex;align-items:center;justify-content:space-between;padding:12px 30px 0;font-family:var(--mono);font-size:11px;color:var(--fg-dim)}
.es-island{width:96px;height:26px;border-radius:999px;border:1px solid var(--rule-strong)}
.es-pane{position:absolute;left:0;right:0;top:48px;bottom:74px;display:flex;flex-direction:column;opacity:0;transform:translateY(8px);
  transition:opacity 360ms var(--ease),transform 360ms var(--ease);pointer-events:none}
.es-phone[data-pane="inbox"] .es-p-inbox,.es-phone[data-pane="today"] .es-p-today,.es-phone[data-pane="overview"] .es-p-overview{opacity:1;transform:none}
.es-ph{padding:14px 22px 14px;border-bottom:1px solid var(--rule)}
.es-ph b{display:block;font-family:var(--display);font-size:24px;letter-spacing:-0.01em}
.es-ph span{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--fg-mute);text-transform:uppercase}
.es-phone .es-flow{padding:18px 18px 24px}
.es-phone .es-msg{max-width:88%}
.es-phone .es-ev{grid-template-columns:auto 1fr;gap:4px 10px}
.es-phone .es-evtag{grid-column:2}
.es-phone .es-evtxt,.es-phone .es-evmeta{grid-column:2}
.es .es-sec{margin:18px 22px 8px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-mute)}
.es-done{padding:0 22px}
.es-di{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--rule-soft);
  opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 8px))}
.es-di b{font-size:14px}
.es-di p{font-size:12.5px;color:var(--fg-mute)}
.es-di time{font-family:var(--mono);font-size:10.5px;color:var(--fg-mute);padding-top:2px}
.es-tick{width:16px;height:16px;border-radius:50%;border:1px solid var(--rule-strong);margin-top:2px;position:relative}
.es-tick::after{content:"";position:absolute;left:4.5px;top:3.5px;width:5px;height:3px;border-left:1px solid var(--fg-dim);border-bottom:1px solid var(--fg-dim);transform:rotate(-45deg)}
.es-sec-you{opacity:var(--o,0);color:var(--fg-dim)}
/* the decision: the one place periwinkle appears in this act, because it is the one action */
.es-ask{margin:0 16px;border:1px solid var(--rule-strong);border-radius:14px;padding:16px;
  opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0)) * 12px))}
.es-ask b{font-size:15px}
.es-ask > p{margin-top:4px;font-size:13px;color:var(--fg-dim)}
.es-btns{display:flex;gap:10px;margin-top:14px}
.es-approve,.es-review{position:relative;height:40px;border-radius:999px;display:inline-grid;place-items:center;padding:0 22px;font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;overflow:hidden}
.es-approve{border:1px solid var(--fg);color:var(--recess);background:var(--fg);min-width:128px}
.es-fill{position:absolute;inset:0;background:var(--lav);transform:scaleX(var(--a,0));transform-origin:left}
.es-a1,.es-a2{position:relative;grid-area:1/1;transition:opacity 240ms var(--ease)}
.es-a2{opacity:0}
.es-ask.is-approved .es-a1{opacity:0}
.es-ask.is-approved .es-a2{opacity:1}
.es-ask.is-approved .es-approve{border-color:var(--lav)}
.es-review{border:1px solid var(--rule-strong);color:var(--fg-dim)}
.es .es-sent{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-mute);opacity:calc(var(--a,0));}
.es-tiles2{grid-template-columns:1fr 1fr;margin:16px 22px 14px;border-bottom:0}
.es-tiles2 .es-tile{padding:14px 0 14px 14px;border-bottom:1px solid var(--rule)}
.es-tiles2 .es-tile:nth-child(odd){border-left:0;padding-left:0}
.es-tiles2 .es-num{font-size:28px}
.es-p-overview .es-card{margin:0 16px}
.es-p-overview .es-prow{grid-template-columns:118px 1fr 16px;font-size:11px;gap:10px;white-space:nowrap}
.es-tabs{position:absolute;left:0;right:0;bottom:0;height:74px;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,1fr);padding-bottom:14px;background:var(--recess)}
.es-tabs span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;color:var(--fg-mute);transition:color 300ms var(--ease)}
.es-tabline{position:absolute;top:-1px;left:0;width:33.333%;height:1px;background:var(--lav);transition:transform 420ms var(--ease)}
.es-phone[data-pane="inbox"] [data-tab="inbox"],.es-phone[data-pane="today"] [data-tab="today"],.es-phone[data-pane="overview"] [data-tab="overview"]{color:var(--fg)}
.es-phone[data-pane="today"] .es-tabline{transform:translateX(100%)}
.es-phone[data-pane="overview"] .es-tabline{transform:translateX(200%)}

/* ---------- phone version: one pinned phone, its tabs carry the story ---------- */
.eg-capsm{display:none}
#engine.is-mobile #eg-act1,#engine.is-mobile #eg-act3{display:none}
#engine.is-mobile .eg-act2{height:520vh}
#engine.is-mobile .eg-act .stage{padding:calc(72px + 12px) 0 14px}
#engine.is-mobile .eg-act2-grid{grid-template-columns:1fr;justify-items:center;gap:14px}
#engine.is-mobile .eg-copy{display:none}
#engine.is-mobile .eg-capsm{display:block;position:relative;width:calc(100% - 2 * var(--padx));height:86px;text-align:center}
#engine.is-mobile .eg-capsm .cap{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity 380ms var(--ease),transform 380ms var(--ease)}
#engine.is-mobile .eg-capsm .cap.on{opacity:1;transform:none}
#engine.is-mobile .eg-capsm h3{font-size:clamp(21px,5.8vw,26px)}
#engine.is-mobile .eg-capsm p{font-size:14px;margin-top:6px}
#engine.is-mobile .eg-ph2{width:min(78vw,calc((100svh - 210px) * 0.462))}

/* ---------- reduced motion: the finished frames, unpinned ---------- */
#engine.is-static .eg-act{height:auto}
#engine.is-static .eg-act .stage{position:static;height:auto;padding:72px 0}
#engine.is-static .eg-caps{height:auto;display:flex;flex-direction:column;gap:20px}
#engine.is-static .eg-caps .cap{position:relative}
#engine.is-static .eg-lt1{width:min(90vw,980px)}
@media (max-width:820px){
  #engine.is-static .eg-act2-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  #engine.is-static .eg-lt1,#engine.is-static .eg-duo{width:92vw}
}

/* ---------- System: one Engine, three Architectures ---------- */
.sys-morph{position:relative;height:300vh}
.sys-morph .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:88px 0 28px;gap:clamp(18px,3vh,32px)}
.sys-morph .eg-lt1{opacity:var(--in,1);transform:translateY(calc((1 - var(--in,1)) * 28px))}
.sm-index{display:flex;gap:clamp(24px,4vw,64px);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute)}
.sm-index span{position:relative;padding-bottom:10px;transition:color 360ms var(--ease)}
.sm-index span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--ease)}
.sm-index span.on{color:var(--fg)}
.sm-index span.on::after{transform:scaleX(1)}
.sm-index b{font-weight:500;color:var(--fg-dim);margin-right:10px}
.sm-cap{font-size:16px;color:var(--fg-dim);text-align:center}
/* the frame stays; only the operation inside it changes */
.es-layer{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity 480ms var(--ease),transform 480ms var(--ease);padding:24px 30px;display:flex;flex-direction:column;gap:20px}
.es-layer.on{opacity:1;transform:none}
.es-stack{position:relative;min-width:0}
.es-firms{position:relative;display:inline-grid}
.es-firms span{grid-area:1/1;opacity:0;transition:opacity 480ms var(--ease)}
.es-firms span.on{opacity:1}
.es-layer .es-two{grid-template-columns:1.15fr 1fr}
#engine.is-static,.sys-morph.is-static{height:auto}
.sys-morph.is-static .stage{position:static;height:auto;padding:72px 0}
@media (max-width:820px){
  .sys-morph{height:260vh}
  .sys-morph .eg-lt1{width:92vw}
  .sm-index{gap:18px;font-size:10.5px}
}

/* the duo's phone at 320px coordinates: the same layout, tightened to fit */
#eg-ph3 .es-tiles2{margin:14px 16px 12px}
#eg-ph3 .es-tiles2 .es-num{font-size:24px}
#eg-ph3 .es-ph{padding:12px 16px}
#eg-ph3 .es-p-overview .es-card{margin:0 12px}
#eg-ph3 .es-p-overview .es-prow{grid-template-columns:96px 1fr 14px;font-size:10.5px;gap:8px}
#eg-ph3 .es-p-overview .es-recent{margin:12px 12px 0}
#eg-ph3 .es-status{padding:12px 22px 0}
#eg-ph3 .es-island{width:80px}

/* System tabs: real controls. The underline under the current one fills as the scene scrolls,
   so it reads as progress, and a quiet cue says the scene moves on its own too. */
.sm-index{gap:6px}
.sm-index button{position:relative;border:0;background:none;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  padding:10px clamp(12px,2vw,26px) 14px;transition:color 240ms var(--ease)}
.sm-index button:hover{color:var(--fg-dim)}
.sm-index button.on{color:var(--fg)}
.sm-index button::before{content:"";position:absolute;left:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);bottom:0;height:1px;background:var(--rule)}
.sm-index button::after{content:"";position:absolute;left:clamp(12px,2vw,26px);right:clamp(12px,2vw,26px);bottom:0;height:1px;background:var(--fg);
  transform:scaleX(var(--f,0));transform-origin:left;transition:none}
.sm-index button:focus-visible{outline:1px solid var(--lav);outline-offset:4px}
.sm-index span::after{display:none}
.sm-hint{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-mute);
  transition:opacity 400ms var(--ease)}
.sm-hint svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;animation:smNudge 1800ms var(--ease) infinite}
@keyframes smNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.sys-morph.is-end .sm-hint{opacity:0}
@media (prefers-reduced-motion: reduce){.sm-hint svg{animation:none}}
.sm-say{position:relative;height:28px;width:min(760px,90vw);text-align:center}
.sm-say p{position:absolute;inset:0;opacity:0;transform:translateY(6px);transition:opacity 420ms var(--ease),transform 420ms var(--ease);font-size:17px;color:var(--fg-body)}
.sm-say p.on{opacity:1;transform:none}

/* ---------- System 02: the Architecture drawn, the Engine arriving (lab-blueprint.js) ---------- */
/* not pinned: the scene sits in the page and plays when it is in view */
.bp{position:relative;margin-top:24px}
.bp .stage{display:flex;align-items:center;padding:clamp(40px,6vh,72px) var(--padx) 40px}
.bp-grid{display:grid;grid-template-columns:minmax(240px,330px) minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:center;width:100%;max-width:var(--maxw);margin:0 auto}
.bp-copy{position:relative;height:440px}
.bp-cap{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(12px);transition:opacity 480ms var(--ease),transform 480ms var(--ease)}
.bp-cap.on{opacity:1;transform:none}
.bp-cap .idx{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute)}
.bp-cap h3{margin-top:28px;font-family:var(--display);font-weight:500;color:var(--fg);font-size:clamp(30px,3vw,46px);line-height:1.06;letter-spacing:-0.02em}
.bp-cap p:last-child{margin-top:20px;font-size:16px;color:var(--fg-body);max-width:34ch}
.bp-step{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.12em;color:var(--fg-mute)}
.bp-step button{border:0;background:none;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:uppercase;color:var(--fg-mute);padding:10px 0;transition:color 300ms var(--ease)}
.bp-step button:hover{color:var(--fg-dim)}
.bp-step button[aria-pressed="true"]{color:var(--fg)}
.bp-step button:focus-visible{outline:1px solid var(--lav);outline-offset:4px}
.bp-step{bottom:34px}
/* after the first play: the way back to the other half, a text link that draws its underline */
.bp-hint{position:absolute;left:0;bottom:0;border:0;background:none;cursor:pointer;padding:6px 0;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-dim);
  opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity 420ms var(--ease),transform 420ms var(--ease),color 240ms var(--ease)}
.bp-hint::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 360ms var(--ease)}
.bp-hint.on{opacity:1;transform:none;pointer-events:auto}
.bp-hint:hover{color:var(--fg)}
.bp-hint:hover::after{transform:scaleX(1)}
.bp-hint:focus-visible{outline:1px solid var(--lav);outline-offset:4px}
.bp-step i{position:relative;width:72px;height:1px;background:var(--rule)}
.bp-step b{position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left}
.bp-lt{width:min(88%,calc((100svh - 200px) * 1.5));justify-self:center}
/* the machine is drawn round the sheet only when the sheet becomes a screen */
.bp-lt .lt-lid{background:transparent;border-color:rgba(244,244,245,calc(0.32 * var(--dev,0)))}
.bp-lt .lt-cam{opacity:var(--dev,0)}
.bp-lt .lt-scr{background:rgba(16,16,16,var(--dev,0));border-color:rgba(244,244,245,calc(0.12 * var(--dev,0)));overflow:visible}
.bp-lt .lt-base{opacity:var(--dev,0)}
.bp-ui{position:absolute;inset:0;overflow:hidden;border-radius:3px}
.bp-ui .es{background:transparent}
.bp-ui .es > *{opacity:0}
/* the drawing */
.bp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bp-svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.bp-svg .bp-gridlines{fill:none;stroke:rgba(244,244,245,0.045);stroke-width:1;stroke-dasharray:none;opacity:calc(var(--grid,0) * var(--sheet,1))}
.bp-border{fill:none;stroke:rgba(244,244,245,0.32);stroke-width:1.2;opacity:var(--sheet,1)}
.bp-border2{fill:none;stroke:rgba(244,244,245,0.12);stroke-width:1;opacity:var(--sheet,1)}
.bp-tb{fill:none;stroke:rgba(244,244,245,0.32);stroke-width:1;opacity:var(--sheet,1)}
.bp-title text{opacity:calc(var(--ttl,0) * var(--sheet,1))}
.bp-k{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:0.14em;fill:rgba(244,244,245,0.5)}
.bp-v{font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:0.04em;fill:var(--fg)}
.bp-sheetno{font-family:var(--display);font-weight:500;font-size:22px;fill:var(--fg)}
.bp-mark{fill:var(--fg);opacity:calc(var(--ttl,0) * var(--sheet,1))}
.bp-ext{fill:none;stroke:rgba(244,244,245,0.85);stroke-width:2.4;opacity:var(--walls,1)}
.bp-ext2{fill:none;stroke:rgba(244,244,245,0.4);stroke-width:1;opacity:var(--walls,1)}
.bp-wall{fill:none;stroke:rgba(244,244,245,0.78);stroke-width:1.8;stroke-linecap:square;opacity:var(--walls,1)}
.bp-door{fill:none;stroke:rgba(244,244,245,0.42);stroke-width:1;opacity:var(--anno,1)}
.bp-dim{fill:none;stroke:rgba(244,244,245,0.38);stroke-width:1;opacity:var(--anno,1)}
.bp-dimt{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:0.06em;fill:rgba(244,244,245,0.6);text-anchor:middle;opacity:calc(var(--lbl,0) * var(--anno,1))}
.bp-corr{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.16em;fill:rgba(244,244,245,0.6);opacity:calc(var(--lbl,0) * var(--anno,1))}
.bp-rooms{opacity:calc(var(--lbl,0) * var(--anno,1))}
.bp-room circle{fill:none;stroke:rgba(244,244,245,0.5);stroke-width:1}
.bp-tag{font-family:var(--mono);font-weight:500;font-size:11px;fill:rgba(244,244,245,0.75);text-anchor:middle}
.bp-lbl{font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:0.16em;fill:var(--fg);text-anchor:middle}
.bp-route{fill:none;stroke:rgba(244,244,245,0.7);stroke-width:1.2;stroke-dasharray:7 7;stroke-dashoffset:0;opacity:var(--anno,1)}
.bp-route-mask{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round}
.bp-nodes circle{fill:var(--fg);opacity:calc(var(--node,0) * var(--anno,1))}
@media (max-width:900px){
  .bp .stage{padding:32px var(--padx) 40px}
  .bp-copy{height:300px}
  .bp-grid{grid-template-columns:1fr;gap:20px}
  .bp-cap h3{margin-top:14px;font-size:clamp(26px,7vw,34px)}
  .bp-cap p:last-child{margin-top:12px;font-size:15px}
  .bp-lt{width:min(100%,calc((100svh - 330px) * 1.5))}
  .bp-lbl{font-size:30px}.bp-tag{font-size:20px}.bp-room circle{r:24}
  .bp-dimt{font-size:26px}.bp-corr{font-size:22px}
  .bp-title text{display:none}
}
.bp.is-static{height:auto}
.bp.is-static .stage{position:static;height:auto;padding:56px var(--padx)}
.bp.is-static .bp-copy{height:auto;display:flex;flex-direction:column;gap:40px}
.bp.is-static .bp-cap{position:relative}
.bp.is-static .bp-step{display:none}

/* ---------- System 04: one line, from the first message to the payment (lab-line.js) ---------- */
.ln-sec{padding-bottom:0}
.ln-sec .ln-intro{position:relative;padding-left:calc(var(--padx) + var(--indent2))}
.ln-sec .ln-intro h2{font-family:var(--display);font-weight:500;color:var(--fg);font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-0.02em;max-width:14ch}
.ln-sec .ln-intro .body{margin-top:32px;max-width:46ch;color:var(--fg-body)}
@media (max-width:768px){.ln-sec .ln-intro{padding-left:var(--padx)}}
/* not pinned: the sheet sits in the page and plays when it is in view */
.ln{position:relative}
.ln .stage{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,34px);padding:clamp(48px,7vh,88px) var(--padx) 160px}
.ln-view{position:relative;width:min(100%,1440px)}
.ln-svg{display:block;width:100%;height:auto;overflow:visible}
.ln-svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.ln-grid{fill:none;stroke:rgba(244,244,245,0.045);stroke-width:1;opacity:var(--grid,0)}
.ln-border{fill:none;stroke:rgba(244,244,245,0.32);stroke-width:1.2}
.ln-border2{fill:none;stroke:rgba(244,244,245,0.12);stroke-width:1}
.ln-dim{fill:none;stroke:rgba(244,244,245,0.38);stroke-width:1}
.ln-zone{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.16em;fill:rgba(244,244,245,0.7);opacity:var(--zone,0)}
.ln-ch,.ln-m{fill:none;stroke:rgba(244,244,245,0.55);stroke-width:1.2}
.ln-chl,.ln-ml{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.14em;fill:rgba(244,244,245,0.6)}
.ln-chl{opacity:var(--chl,0)}
.ln-ml{opacity:var(--ml,0)}
.ln-pulse{fill:var(--fg)}
.ln-node{opacity:var(--on,0)}
.ln-ring{fill:none;stroke:rgba(244,244,245,0.5);stroke-width:1}
.ln-core{fill:var(--fg)}
.ln-nl{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.16em;fill:var(--fg)}
.ln-route{fill:none;stroke:rgba(244,244,245,0.8);stroke-width:1.2}
.ln-dot{fill:var(--fg)}
/* the sheets: paper is the ground itself, so the route passes under them */
.ln-paper{fill:var(--ground);opacity:var(--paper,0)}
.ln-edge{fill:none;stroke:rgba(244,244,245,0.6);stroke-width:1}
.ln-w{fill:none;stroke:rgba(244,244,245,0.32);stroke-width:1.4;stroke-linecap:round}
.ln-sheet text{opacity:var(--txt,0)}
.ln-k{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:0.14em;fill:rgba(244,244,245,0.55)}
.ln-ref{font-family:var(--mono);font-size:9.5px;letter-spacing:0.06em;fill:rgba(244,244,245,0.45)}
.ln-amt{font-family:var(--display);font-weight:500;font-size:17px;fill:var(--fg)}
.ln-row{font-family:var(--body);font-size:12px;fill:rgba(244,244,245,0.75)}
/* the decision: the client's signature, the one periwinkle stroke on the sheet */
.ln-sig{fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ln-sheet .ln-sigt{font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:0.12em;fill:rgba(244,244,245,0.6);opacity:var(--sigt,0)}
.ln-stamp{opacity:var(--txt,0)}
.ln-stamp rect{fill:none;stroke:rgba(244,244,245,0.4);stroke-width:1;transition:stroke 300ms var(--ease)}
.ln-due,.ln-paidt{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:0.16em}
.ln-due{fill:rgba(244,244,245,0.55)}
.ln-sheet .ln-paidt{fill:var(--fg);opacity:0}
.ln-stamp.is-paid rect{stroke:var(--fg)}
.ln-sheet .ln-stamp.is-paid .ln-paidt{opacity:var(--txt,1)}
.ln-stamp.is-paid .ln-due{opacity:0}
.ln-ledger text{opacity:var(--led,0)}
.ln-lrow.ln-new text{opacity:calc(var(--led,0) * var(--nr,0))}
.ln-lrow.ln-new text:first-child{fill:var(--fg)}
.ln-total{font-family:var(--display);font-weight:500;font-size:28px;letter-spacing:-0.01em;fill:var(--fg);font-variant-numeric:tabular-nums}
.ln-tb{fill:none;stroke:rgba(244,244,245,0.32);stroke-width:1}
.ln-title text{opacity:var(--ttl,0)}
.ln-v{font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:0.04em;fill:var(--fg)}
.ln-sheetno{font-family:var(--display);font-weight:500;font-size:20px;fill:var(--fg)}
.ln-sect{display:none}
/* the three zones, below the sheet: progress rules, and a way to jump */
.ln-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,48px);width:min(100%,1180px)}
.ln-caps button{position:relative;text-align:left;border:0;background:none;cursor:pointer;color:var(--fg-mute);font:inherit;padding:16px 0 0;transition:color 300ms var(--ease)}
.ln-caps button::before,.ln-caps button::after{content:"";position:absolute;left:0;right:0;top:0;height:1px}
.ln-caps button::before{background:var(--rule)}
.ln-caps button::after{background:var(--fg);transform:scaleX(var(--f,0));transform-origin:left}
.ln-caps .n{display:block;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.14em;text-transform:uppercase}
.ln-caps .t{display:block;margin-top:8px;font-size:15.5px;line-height:1.45;color:var(--fg-mute);transition:color 300ms var(--ease)}
.ln-caps button.on{color:var(--fg-dim)}
.ln-caps button.on .t{color:var(--fg)}
.ln-caps button:hover .t{color:var(--fg-dim)}
.ln-caps button:focus-visible{outline:1px solid var(--lav);outline-offset:6px}
@media (max-width:900px){
  .ln .stage{padding:40px var(--padx) 120px}
  .ln-view{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ln-view::-webkit-scrollbar{display:none}
  .ln-svg{width:auto;height:min(54svh,420px);max-width:none}
  .ln-caps{grid-template-columns:1fr;gap:0}
  .ln-caps button{display:none;padding-top:12px}
  .ln-caps button.on{display:block}
}
.ln.is-static{height:auto}
.ln.is-static .stage{position:static;height:auto;padding:56px var(--padx)}

/* System 03, side by side: the three operations as a list beside the laptop, so the change of
   business reads in the words and on the screen at once. Each name's rule fills down as the scene
   scrolls; the current one opens to its line. */
.sys-morph .stage{padding:88px var(--padx) 28px}
.sm-grid{display:grid;grid-template-columns:minmax(250px,340px) minmax(0,1fr);gap:clamp(40px,5vw,96px);align-items:center;width:100%;max-width:var(--maxw);margin:0 auto}
.sys-morph .eg-lt1{width:min(88%,calc((100svh - 230px) * 1.5));justify-self:center}
.sm-kicker{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:22px}
.sys-morph .sm-index{display:flex;flex-direction:column;gap:0;font-size:12px}
.sys-morph .sm-index button{display:block;width:100%;text-align:left;padding:16px 0 16px 22px}
.sys-morph .sm-index button::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto;background:var(--rule)}
.sys-morph .sm-index button::after{left:0;right:auto;top:0;bottom:0;width:1px;height:auto;background:var(--fg);transform:scaleY(var(--f,0));transform-origin:top}
.sm-name{display:block}
.sm-line{display:block;max-height:0;opacity:0;overflow:hidden;margin-top:0;font-family:var(--display);font-weight:500;text-transform:none;letter-spacing:-0.01em;
  font-size:clamp(22px,2.1vw,30px);line-height:1.15;color:var(--fg);transition:max-height 520ms var(--ease),opacity 420ms var(--ease),margin-top 520ms var(--ease)}
.sys-morph .sm-index button.on .sm-line{max-height:140px;opacity:1;margin-top:12px}
.sys-morph .sm-cap{margin-top:26px;text-align:left;font-size:15px;color:var(--fg-dim)}
.sys-morph .eg-note{margin-top:10px}
.sys-morph .sm-hint{margin-top:22px;justify-content:flex-start}
@media (max-width:820px){
  .sys-morph .stage{padding:76px var(--padx) 16px}
  .sm-grid{grid-template-columns:1fr;gap:18px}
  .sm-kicker,.sys-morph .sm-cap,.sys-morph .eg-note,.sys-morph .sm-hint{display:none}
  .sys-morph .sm-index button{padding:9px 0 9px 16px}
  .sm-line{font-size:20px}
  .sys-morph .eg-lt1{width:100%}
}

/* ---------- phones: what does not read at phone size is left to the desktop ---------- */
.bp-ph{display:none}
.bp-ph{border-color:rgba(244,244,245,calc(0.32 * var(--dev,0)));background:transparent}
.bp-ph .ph-scr{background:rgba(16,16,16,var(--dev,0));border-color:rgba(244,244,245,calc(0.12 * var(--dev,0)))}
.bp-ph .bp-ui .es{background:transparent}
@media (max-width:820px){
  .bp-lt{display:none}
  .bp-ph{display:block;width:min(80vw,340px);justify-self:center}
  .bp-ph .bp-ui{border-radius:0}
  .bp .bp-copy{height:252px}
  /* in the portrait drawing the type is set for a screen a third of the width */
  .bp-ph .bp-lbl{font-size:15px}.bp-ph .bp-tag{font-size:11px}.bp-ph .bp-room circle{r:15}
  .bp-ph .bp-dimt{font-size:12px}.bp-ph .bp-corr{font-size:12px}
  .bp-ph .bp-title text{display:block}
}
.bp-ph .bp-ui .es-status,.bp-ph .bp-ui .es-tabs{opacity:1}

/* System 03 on phones: no laptop; each operation as a card read at full size */
.sm-cards{display:none}
@media (max-width:820px){
  .sys-morph.is-phone{height:auto}
  .sys-morph.is-phone .stage{position:static;height:auto;padding:56px var(--padx) 72px}
  .sys-morph.is-phone .eg-lt1{display:none}
  .sys-morph.is-phone .sm-kicker{display:flex;margin-bottom:14px}
  .sys-morph.is-phone .sm-index{flex-direction:row;gap:0;border-bottom:1px solid var(--rule)}
  .sys-morph.is-phone .sm-index button{flex:1;padding:12px 0 14px;text-align:left}
  .sys-morph.is-phone .sm-index button::before{display:none}
  .sys-morph.is-phone .sm-index button::after{left:0;right:0;top:auto;bottom:-1px;width:auto;height:1px;transform:scaleX(var(--f,0));transform-origin:left}
  .sys-morph.is-phone .sm-index b{display:block;margin:0 0 4px}
  .sys-morph.is-phone .sm-line{display:none}
  .sm-cards{display:block;position:relative;margin-top:22px}
  .sm-card{display:none}
  .sm-card.on{display:block;animation:smCardIn 480ms var(--ease) both}
  @keyframes smCardIn{from{opacity:0;transform:translateY(10px)}}
  .sm-card h4{font-family:var(--display);font-weight:500;font-size:clamp(24px,6.8vw,30px);line-height:1.12;letter-spacing:-0.015em;color:var(--fg)}
  .sm-card .sm-firm{margin-top:18px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-mute)}
  .sm-tiles{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;border-top:1px solid var(--rule)}
  .sm-tiles div{padding:14px 0 16px;border-bottom:1px solid var(--rule)}
  .sm-tiles div:nth-child(even){padding-left:16px;border-left:1px solid var(--rule)}
  .sm-tiles p{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute)}
  .sm-tiles strong{display:block;margin-top:8px;font-family:var(--display);font-weight:500;font-size:28px;line-height:1;letter-spacing:-0.02em;color:var(--fg)}
  .sm-pipe{margin-top:20px}
  .sm-pipe p{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:10px}
  .sm-prow{display:grid;grid-template-columns:42% 1fr 22px;align-items:center;gap:10px;padding:6px 0;font-size:13px;color:var(--fg-dim)}
  .sm-prow i{position:relative;height:6px;border-radius:3px;border:1px solid var(--rule)}
  .sm-prow b{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:rgba(244,244,245,0.55);width:calc(var(--w) * 100%)}
  .sm-prow em{font-style:normal;font-family:var(--mono);font-size:11px;text-align:right}
  .sys-morph.is-phone .sm-cap{display:block;margin-top:24px}
  .sys-morph.is-phone .eg-note{display:block}
}

/* ---------- Plans: the reach, drawn (lab-plans.js) ---------- */
.reach{margin-top:12px}
.r-svg{display:block;width:100%;height:auto;overflow:visible}
/* dash 1, gap 2: an undrawn line has a full gap's margin, so no sliver shows at its end */
.r-svg .rp{stroke-dasharray:1 2;stroke-dashoffset:1;transition:stroke-dashoffset 1200ms cubic-bezier(0.65,0,0.35,1)}
/* built: everything drawn at or below the level on show */
.r-svg[data-tier="0"] .rp,.r-svg[data-tier="1"] .rp,.r-svg[data-tier="2"] .rp{stroke-dashoffset:0}
.r-svg[data-tier="0"] .t1,.r-svg[data-tier="0"] .t2,.r-svg[data-tier="1"] .t2{stroke-dashoffset:1}
.r-svg .r-walls .rp{transition-delay:120ms}
.r-svg .r-doors .rp{transition-delay:520ms}
.r-grid{fill:none;stroke:rgba(244,244,245,0.045);stroke-width:1;opacity:0;transition:opacity 900ms var(--ease)}
.r-border{fill:none;stroke:rgba(244,244,245,0.28);stroke-width:1.2}
.r-ext{fill:none;stroke:rgba(244,244,245,0.85);stroke-width:2.2}
.r-ext2{fill:none;stroke:rgba(244,244,245,0.38);stroke-width:1}
.r-wall{fill:none;stroke:rgba(244,244,245,0.75);stroke-width:1.6;stroke-linecap:square}
.r-door{fill:none;stroke:rgba(244,244,245,0.4);stroke-width:1}
.r-dim{fill:none;stroke:rgba(244,244,245,0.38);stroke-width:1}
.r-dimt{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.16em;fill:rgba(244,244,245,0.6);text-anchor:middle;opacity:0;transition:opacity 600ms var(--ease) 400ms}
.r-room circle{fill:none;stroke:rgba(244,244,245,0.5);stroke-width:1}
.r-tag{font-family:var(--mono);font-weight:500;font-size:10px;fill:rgba(244,244,245,0.7);text-anchor:middle}
.r-lbl{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:0.16em;fill:var(--fg);text-anchor:middle}
.r-rooms,.r-wroom,.r-wdot,.t2t{opacity:0;transition:opacity 600ms var(--ease) 700ms}
.r-route{fill:none;stroke:rgba(244,244,245,0.72);stroke-width:1.3;stroke-dasharray:7 7}
.r-route-mask{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round}
.r-steps circle{fill:var(--fg);opacity:0;transition:opacity 400ms var(--ease) calc(500ms + var(--i) * 160ms)}
.r-wdot{fill:var(--fg)}
.r-tb{fill:none;stroke:rgba(244,244,245,0.3);stroke-width:1}
.r-k{font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:0.14em;fill:rgba(244,244,245,0.5);opacity:0;transition:opacity 600ms var(--ease)}
.r-v{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:0.12em;fill:var(--fg)}
.r-no{font-family:var(--display);font-weight:500;font-size:20px;fill:var(--fg)}
.r-tier{opacity:0;transition:opacity 400ms var(--ease)}
.r-svg:not([data-tier="-1"]) .r-grid{opacity:1}
.r-svg:not([data-tier="-1"]) .r-dimt:not(.t2t),.r-svg:not([data-tier="-1"]) .r-rooms,.r-svg:not([data-tier="-1"]) .r-k{opacity:1}
.r-svg[data-tier="1"] .r-steps circle,.r-svg[data-tier="2"] .r-steps circle{opacity:1}
.r-svg[data-tier="2"] .r-wroom,.r-svg[data-tier="2"] .r-wdot,.r-svg[data-tier="2"] .t2t{opacity:1}
.r-svg[data-tier="0"] .r-tier[data-t="0"],.r-svg[data-tier="1"] .r-tier[data-t="1"],.r-svg[data-tier="2"] .r-tier[data-t="2"]{opacity:1}
/* the engine sheet: a turbofan in half section (lab-plans.js) */
.r-eng .r-front .rp{transition-delay:160ms}
/* butt ends, so a part not yet drawn leaves no mark on the empty sheet */
.r-eng .rp{stroke-linecap:butt}
.r-view{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:0.16em;fill:rgba(244,244,245,0.5);text-anchor:middle}
.r-eng .r-rotor{transform-box:view-box;transform-origin:745px 260px}
.r-eng[data-tier="1"] .r-rotor,.r-eng[data-tier="2"] .r-rotor{animation:rSpin 9s linear infinite}
@keyframes rSpin{to{transform:rotate(360deg)}}
.r-eng .r-fanb{stroke:rgba(244,244,245,0.55)}
.r-eng .r-cut .rp{transition-delay:240ms}
.r-eng .r-blade{fill:none;stroke:rgba(244,244,245,0.62);stroke-width:1}
.r-eng .r-blades .rp{transition-delay:calc(420ms + var(--i) * 22ms)}
.r-eng .r-fan{stroke:rgba(244,244,245,0.8)}
.r-seam{fill:none;stroke:rgba(244,244,245,0.26);stroke-width:1}
.r-hid{fill:none;stroke:rgba(244,244,245,0.26);stroke-width:1;stroke-dasharray:4 3;opacity:0;transition:opacity 700ms var(--ease) 900ms}
.r-hf{fill:url(#r-hatch);stroke:none;opacity:0;transition:opacity 900ms var(--ease) 1000ms}
.r-cl{fill:none;stroke:rgba(244,244,245,0.3);stroke-width:1;stroke-dasharray:22 5 3 5;opacity:0;transition:opacity 800ms var(--ease)}
.r-gnd{fill:none;stroke:rgba(244,244,245,0.3);stroke-width:1;opacity:0;transition:opacity 600ms var(--ease) 700ms}
.r-flow{fill:none;stroke:rgba(244,244,245,0.66);stroke-width:1.2;stroke-dasharray:6 8}
.r-flow.r-byp{stroke:rgba(244,244,245,0.4)}
.r-bal .r-bc{fill:var(--ground);stroke:rgba(244,244,245,0.5);stroke-width:1}
.r-bal .r-lead{fill:none;stroke:rgba(244,244,245,0.4);stroke-width:1}
.r-bal .r-bdot{fill:rgba(244,244,245,0.75)}
.r-pn{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:0.1em;fill:rgba(244,244,245,0.6)}
.r-pl{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.12em;fill:var(--fg)}
.r-eng:not([data-tier="-1"]) .r-hid,.r-eng:not([data-tier="-1"]) .r-hf,.r-eng:not([data-tier="-1"]) .r-cl,.r-eng[data-tier="0"] .r-gnd,.r-eng[data-tier="1"] .r-gnd{opacity:1}
.r-eng .r-whid{opacity:0!important}
.r-eng[data-tier="2"] .r-whid{opacity:1!important}
/* installed: the stand comes away as the pylon is drawn */
.r-eng[data-tier="2"] .t01{stroke-dashoffset:1}
/* running: once the air is through, it keeps moving */
.r-eng[data-tier="1"] .r-flow,.r-eng[data-tier="2"] .r-flow{animation:rFlow 1.1s linear infinite}
@keyframes rFlow{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion: reduce){.r-eng .r-flow,.r-eng .r-rotor{animation:none!important}}
.reach-hint{margin-top:40px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute)}
/* the empty sheet: grid, border and title block wait for a level */
.r-svg .r-grid,.r-svg .r-k{opacity:1}
.r-svg[data-tier="-1"] .r-plk{opacity:0}
/* the line between the columns and the sheet: the idle prompt, or the level's words */
.reach-hint{min-height:88px;transition:opacity 170ms var(--ease),transform 220ms var(--ease)}
.reach-hint.is-out{opacity:0;transform:translateY(4px)}
/* the cue (lab-plans.js): a light along a column's top, the sheet sketched faintly, a live dot */
.pcol.is-tease::before{transform:scaleX(1);transition:transform 700ms cubic-bezier(0.2,0.8,0.2,1)}
.pcol.is-tease .pidx{color:var(--fg)}
.r-svg > *{transition:opacity 500ms var(--ease)}
.r-svg.is-ghost > :not(.r-border):not(.r-grid):not(.r-title):not(.r-wroom){opacity:0.38}
.reach-hint:not(.is-level) .rs-k::before{content:"";display:inline-block;width:6px;height:6px;margin:-2px 12px 0 0;border-radius:50%;background:var(--lav);vertical-align:middle;animation:rsPulse 1.8s ease-in-out infinite}
@keyframes rsPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.35;transform:scale(0.7)}}
@media (prefers-reduced-motion: reduce){.reach-hint .rs-k::before{animation:none!important}}
.reach-hint .rs-k,.reach-hint .rs-m{display:block}
.reach-hint .rs-k{transition:opacity 160ms var(--ease)}
.reach-hint .rs-k.is-out{opacity:0}
/* the caret: a thin rule after the last letter, breathing rather than flashing; still while typing */
.reach-hint .rs-c{display:none;width:1.5px;height:1.05em;margin-left:3px;vertical-align:-0.16em;background:var(--fg);animation:rsCaret 1.25s ease-in-out infinite}
.reach-hint.is-level .rs-c{display:inline-block}
.reach-hint.is-typing .rs-c{animation:none;opacity:1}
@keyframes rsCaret{0%,40%{opacity:0.9}55%,90%{opacity:0.12}100%{opacity:0.9}}
.reach-hint .rs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.reach-hint .rs-c{animation:none}}
.reach-hint.is-level .rs-k{color:var(--fg-dim)}
.reach-hint .rs-m{margin-top:10px;font-family:var(--body);font-weight:400;font-size:clamp(17px,1.4vw,20px);line-height:1.45;letter-spacing:0;text-transform:none;color:var(--fg);max-width:62ch}

/* three columns: each level with its build, read across on one baseline */
.pcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--rule)}
.pcol{position:relative;padding:32px 28px 36px;border-left:1px solid var(--rule);cursor:pointer;outline:none;transition:background-color 300ms var(--ease)}
.pcol:first-child{border-left:0;padding-left:0}
.pcol::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease)}
.pcol.on::before{transform:scaleX(1)}
.pcol:focus-visible{outline:1px solid var(--lav);outline-offset:4px}
.pidx{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.12em;color:var(--fg-mute);transition:color 300ms var(--ease)}
.pcol.on .pidx{color:var(--fg)}
.pcol h3{margin-top:18px;font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,38px);line-height:1.05;letter-spacing:-0.015em;color:var(--fg)}
.pline{margin-top:14px;font-size:15.5px;line-height:1.5;color:var(--fg-body);min-height:4.5em;max-width:30ch}
.pprice{margin-top:28px;font-family:var(--display);font-weight:500;font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:-0.03em;color:var(--fg);font-variant-numeric:tabular-nums}
.pprice span{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;color:var(--fg-mute);margin-left:4px}
.pmeta{margin-top:12px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.08em;color:var(--fg-dim)}
.pbuild{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule)}
.pbk{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--fg-dim)}
.pbcap{margin-top:8px;font-size:15px;color:var(--fg-body)}
.pnote{margin-top:56px;text-align:center;font-size:14px;color:var(--fg-mute)}
/* every row of the three columns on one line across: name, line, price, terms, build */
@media (min-width:701px){
  .pcols{grid-template-rows:repeat(6,auto)}
  .pcol{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start}
  .pline{min-height:0}
}
@media (max-width:700px){
  .reach,.reach-hint{display:none}
  .pcols{grid-template-columns:1fr;margin-top:8px}
  .pcol{border-left:0;padding:28px 0 32px;border-bottom:1px solid var(--rule);cursor:default}
  .pcol::before{display:none}
  .pline{min-height:0}
}

/* ---------- About (lab-about.js) ---------- */
/* the name is written in, left to right; then the signing line */
.ab-name{clip-path:inset(-0.2em 100% -0.3em 0)}
.ab-name.in{clip-path:inset(-0.2em -0.1em -0.3em 0);transition:clip-path 1100ms cubic-bezier(0.65,0,0.35,1)}
.ab-sign{display:block;width:min(420px,70%);height:auto;margin-top:6px;overflow:visible}
.ab-sign path{fill:none;stroke:var(--lav);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.signed .ab-sign path{stroke-dashoffset:0;transition:stroke-dashoffset 1200ms cubic-bezier(0.2,0.8,0.2,1)}
/* the same sentence, in the two languages the work is delivered in */
.ab-lang{margin-top:28px;display:flex;gap:22px;align-items:flex-start;padding-top:18px;border-top:1px solid var(--rule);max-width:620px}
.ab-tags{display:flex;gap:10px;padding-top:9px;flex:none;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:0.14em;color:var(--fg-mute)}
.ab-tags span{transition:color 400ms var(--ease)}
.ab-tags span.on{color:var(--fg)}
.ab-lines{position:relative;flex:1;min-height:2.6em}
.ab-lines p{position:absolute;left:0;top:0;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.8vw,26px);line-height:1.2;letter-spacing:-0.01em;color:var(--fg);
  opacity:0;transform:translateY(8px);transition:opacity 600ms var(--ease),transform 700ms var(--ease)}
.ab-lines p.on{opacity:1;transform:none}
@media (max-width:768px){.ab-lang{flex-direction:column;gap:10px}.ab-lines{min-height:3.8em;width:100%}}
@media (prefers-reduced-motion: reduce){.ab-name{clip-path:none}.ab-sign path{stroke-dashoffset:0}}

/* ---------- Industry pages: each pillar shown (lab-moments.js) ---------- */
.mo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:clamp(40px,5vw,88px);align-items:start}
.mo-grid .prow{grid-template-columns:1fr;gap:12px;transition:opacity 500ms var(--ease)}
.mo-grid .prow h3{max-width:22ch}
.mo-grid .prow:not(.mo-on){opacity:0.42}
.mo-side{position:sticky;top:max(96px,calc(50vh - 330px));padding-top:32px}
.mo-ph{width:100%}
.mo-side .eg-note{margin-top:16px;text-align:center}
.mo-phone .mo-pane{position:absolute;left:0;right:0;top:48px;bottom:0;opacity:0;transform:translateY(10px);transition:opacity 480ms var(--ease),transform 520ms var(--ease)}
.mo-phone .mo-pane.on{opacity:1;transform:none}
.mo-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.mo-prof{display:flex;gap:12px;align-items:center}
.mo-prof b{font-size:16px}
.mo-prof p{font-size:12.5px;color:var(--fg-mute)}
.mo-dl{margin:0;border-top:1px solid var(--rule)}
.mo-dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.mo-dl dt{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute)}
.mo-dl dd{margin:0;font-size:13px;color:var(--fg)}
.mo-dl .mo-zero{font-family:var(--display);font-size:18px}
.mo-phone .es-ev{grid-template-columns:auto auto 1fr}
.mo-phone .es-evmeta{display:none}
.mo-msg{max-width:92%}
.mo-pay{display:inline-block;margin-top:10px;padding:8px 14px;border-radius:999px;background:var(--fg);color:#101010;font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase}
.mo-doc{border:1px solid var(--rule-strong);border-radius:10px;padding:16px}
.mo-k{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-mute)}
.mo-lines{display:flex;flex-direction:column;gap:7px;margin:14px 0}
.mo-lines i{display:block;height:2px;border-radius:1px;background:rgba(244,244,245,0.18)}
.mo-row{display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid var(--rule);font-size:13px}
.mo-row b{font-family:var(--display);font-size:16px}
.mo-sig{display:block;width:70%;height:auto;margin-top:16px;overflow:visible}
.mo-sig path{fill:none;stroke:var(--lav);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.mo-pane.on .mo-sig path,.mo-card.seen .mo-sig path{stroke-dashoffset:0;transition:stroke-dashoffset 1200ms cubic-bezier(0.2,0.8,0.2,1) 300ms}
.mo-signed{margin-top:8px;padding-top:8px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--fg-dim)}
.mo-card{display:none}
@media (max-width:760px){
  .mo-grid{grid-template-columns:1fr}
  .mo-side{display:none}
  .mo-grid .prow:not(.mo-on){opacity:1}
  .mo-card{display:block;margin-top:18px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--recess)}
  .mo-card .es{position:relative;height:auto}
  .mo-card .mo-pane{position:static;opacity:1;transform:none}
}

/* a drawn laptop's base is wider than its lid (112%): the page never scrolls sideways for it */
html,body{overflow-x:clip}

/* The drawings scale with their width, so on tablets and small laptops their type would fall to
   about 7px. Below 1280px the type inside them is set larger in drawing units, so it stays near
   10–11px on screen. Positions are unchanged; every label has the room. */
@media (max-width:1280px){
  .ln-zone{font-size:15px}.ln-chl,.ln-ml{font-size:14px}.ln-nl{font-size:14px}
  .ln-k{font-size:13px}.ln-ref{font-size:11px}.ln-row{font-size:15px}.ln-amt{font-size:20px}
  .ln-sheet .ln-sigt{font-size:11px}.ln-total{font-size:32px}.ln-v{font-size:14px}.ln-sheetno{font-size:22px}
  .bp-lt .bp-lbl{font-size:20px}.bp-lt .bp-tag{font-size:13px}.bp-lt .bp-room circle{r:18}
  .bp-lt .bp-dimt{font-size:17px}.bp-lt .bp-corr{font-size:16px}.bp-lt .bp-k{font-size:12px}
  .r-lbl{font-size:17px}.r-tag{font-size:13px}.r-room circle{r:15}.r-bal .r-bc{r:14}.r-pl{font-size:13px}.r-pn{font-size:12px}.r-view{font-size:12px}.r-dimt{font-size:14px}.r-k{font-size:12px}.r-v{font-size:15px}.r-no{font-size:24px}
}
.mo-sig{max-width:220px}

/* System 03: the kicker on the rail, with its hole, like every other section */
.sm-rail{display:flex;align-items:center;gap:24px;margin-bottom:22px}
.sm-rail .punch{margin:0;flex:none}
.sm-rail .sm-kicker{margin:0;line-height:1.8;white-space:normal}
@media (max-width:768px){.sm-rail .punch{width:15px;height:15px}}

/* System 02: the hole and eyebrow head the copy column, which sits in the page's margin column;
   the drawing sets on the content axis every other section uses */
.bp-grid{grid-template-columns:calc(var(--indent2) - 32px) minmax(0,1fr);gap:32px;align-items:start;max-width:none}
.bp .stage{align-items:flex-start}
.bp-copy{height:auto}
.bp-rail{display:flex;align-items:center;gap:24px;margin-bottom:56px}
.bp-rail .punch{margin:0;flex:none}
.bp-rail .eyebrow{line-height:1.8;white-space:normal}
.bp-caps{position:relative;height:440px}
.bp-lt{width:min(92%,calc((100svh - 170px) * 1.52));justify-self:center}
@media (max-width:1100px){.bp-grid{grid-template-columns:260px minmax(0,1fr)}.bp-caps{height:470px}}
@media (max-width:820px){
  .bp-grid{grid-template-columns:1fr}
  .bp-rail{margin-bottom:28px}
  .bp-rail .punch{width:15px;height:15px}
  .bp-caps{height:252px}
}

/* Home, act 1, sized the Neurona 28 way: the stage reaches the real bottom of the screen and
   counts a third of the room Safari keeps for its toolbar (100lvh − 100svh), so the laptop takes
   the height the bars would otherwise leave empty; the top padding is only the nav's own height.
   Width: as large as the window allows once the nav, the caption and the base are paid for. */
@media (min-width:821px){
  #eg-act1 .stage{--stage-h:100svh;padding:72px 0 8px}
  @supports (height:100lvh){
    #eg-act1 .stage{--stage-h:calc(100svh + (100lvh - 100svh) * 0.35);height:100lvh;padding-bottom:calc(100lvh - var(--stage-h) + 8px)}
  }
  .eg-lt1{width:min(80vw,1260px,calc((var(--stage-h,100svh) - 205px) * 1.52))}
  #eg-act1 .eg-caps{height:84px;margin-top:clamp(14px,2vh,22px)}
}
/* act 3: the headline keeps its distance; the phone is sized to the laptop by script */
.eg-act3-head{margin-bottom:clamp(36px,6vh,64px)}

/* Phones (founder's Safari round, 2026-11-03).
   System 02 and 03: the hole sits above its eyebrow, as on every other section at this width. */
@media (max-width:768px){
  .bp-rail,.sm-rail{display:block}
  .bp-rail .punch,.sm-rail .punch{margin:0 0 32px}
  .sm-rail{margin-bottom:28px}
}
/* System 02: the copy column grows with what it holds. The captions share one cell, so the
   box is as tall as the longer one; the stepper and the way-back link follow in the flow. The
   phone below can no longer start inside the copy. */
@media (max-width:820px){
  .bp .bp-copy{height:auto}
  .bp-caps{height:auto;display:grid}
  .bp-cap{position:relative;grid-area:1/1}
  .bp-step{position:relative;bottom:auto;grid-area:2/1;margin-top:24px}
  .bp-hint{position:relative;bottom:auto;grid-area:3/1;justify-self:start;margin-top:4px}
}