/* ══ v32 MACHINE ROOM — AI & automation · SHELL (v32-mroom.js)
   Ten full-screen posters, one blue dot. Base rules = the static stack (reduced motion / no JS);
   .mr--on = the pinned stage: every poster is a full-stage layer, the shell shows the current one
   (plus the incoming one under a door) and scrubs the type. Blue + white on ink only. ══ */
#machine.mroom{--gx:max(5.5vw,40px);--ez:cubic-bezier(.16,1,.3,1);position:relative;background:#0c0d12;color:#fff}
#machine .mr__sc[data-g=ink]{--gb:#0c0d12;--gr:12,13,18;--tx:#fff;--ac:#7d8bff;--ring:rgba(255,255,255,.22)}
#machine .mr__sc[data-g=white]{--gb:#fff;--gr:255,255,255;--tx:#0f1016;--ac:#2438f5;--ring:rgba(15,16,22,.18)}
#machine .mr__sc[data-g=blue]{--gb:#2438f5;--gr:36,56,245;--tx:#fff;--ac:#c7cdff;--ring:rgba(255,255,255,.4)}

/* ── static stack (reduced motion · no JS): ten posters, hard colour edges ── */
#machine .mr__pin,#machine .mr__stage{position:relative}
#machine .mr__sc{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--gb);color:var(--tx);contain:layout paint}
#machine .mr__art{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--gb);touch-action:pan-y}
#machine .mr__door{position:absolute;inset:0;z-index:1;display:none;pointer-events:none}
#machine .mr__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0}
#machine .mr__cp{position:absolute;inset:0;z-index:2;pointer-events:none}
#machine .mr__cp a,#machine .mr__cp button{pointer-events:auto}
#machine .mr__frame,#machine .mr__rail{display:none}

/* ── the pinned stage ── */
#machine.mr--on{height:820vh}
@media (max-width:760px),(hover:none){#machine.mr--on{height:720vh;height:720svh}}
#machine.mr--on .mr__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0c0d12}
#machine.mr--on .mr__stage{position:absolute;inset:0;transform-origin:50% 40%}
#machine.mr--on .mr__sc{position:absolute;inset:0;min-height:0;visibility:hidden;contain:strict}
#machine.mr--on .mr__sc.is-v{visibility:visible}
#machine.mr--on .mr__sc.is-q .mr__cp a,#machine.mr--on .mr__sc.is-q .mr__cp button{pointer-events:none}
/* the desk frame: a rounded window punched into #0c0d12 (one composited layer; fades in over ink, so it has no seam) */
#machine.mr--on .mr__frame{display:block;position:absolute;inset:10px;z-index:5;border-radius:28px;box-shadow:0 0 0 90px #0c0d12;pointer-events:none;opacity:0}

/* ── headline: Geist 500, poster scale, hand-set breaks (desktop / mobile sets built from data-d / data-m) ── */
#machine .mr__h{margin:0;font-weight:500;font-size:clamp(3rem,6.6vw,8.4rem);line-height:.88;letter-spacing:-.052em;color:var(--tx);outline:none}
#machine .mr__sc[data-k=intro] .mr__h{font-size:clamp(3.6rem,10vw,11rem)}
#machine .mr__hs{display:block}
#machine .mr__hs--m,#machine .mr__h.use-m .mr__hs--d{display:none}
#machine .mr__h.use-m .mr__hs--m,#machine.mr--fit .mr__hs{display:block}
#machine.mr--fit .mr__hs{position:absolute;visibility:hidden}
#machine .ln{display:block;overflow:hidden;padding:.05em .1em .17em;margin:-.05em -.1em -.17em}
#machine .ln--free{overflow:visible}
#machine .ln--tall{padding-top:.5em;margin-top:-.5em}
#machine .lnI{display:inline-block;white-space:nowrap;transform-origin:0 100%}
#machine .w{display:inline-block;position:relative}
#machine .mr__h em{font-style:normal;color:var(--tx);opacity:.45;transition:color .2s ease,opacity .2s ease}
#machine .is-acc em{color:var(--ac);opacity:1}
#machine .mr__echo{position:absolute;left:0;top:0;transform-origin:0 78%;white-space:nowrap;color:transparent;-webkit-text-stroke:1.2px var(--ac);opacity:0;pointer-events:none}
#machine .is-acc .mr__echo{color:transparent}
#machine .mr__sc[data-k=agents] .mr__h em::after{content:'';position:absolute;left:-.12em;right:-.12em;top:.02em;bottom:-.1em;border:1.5px solid var(--ac);border-radius:.14em;opacity:var(--b,0);transform:scale(calc(.9 + var(--b,0) * .1))}
#machine .mr__sc[data-k=agents] .mr__h em{position:relative;display:inline-block;margin:0 .12em 0 .06em}
/* the DOM full stop — the travelling blue dot lands here (intro + finale) */
#machine .mr-stop{position:relative;display:inline-block;width:var(--dd,.16em);height:var(--dd,.16em);margin-left:.05em;border-radius:50%;background:#4f66ff;vertical-align:baseline;opacity:0}
#machine .mr__sc[data-g=white] .mr-stop{background:#2438f5}
#machine .mr-stop.is-on{opacity:1}

/* ── supporting line · link pill · fact line ── */
#machine .mr__side{position:relative}
#machine .mr__p{margin:0;max-width:30ch;font-size:clamp(1rem,1.15vw,1.2rem);line-height:1.45;font-weight:400;color:var(--tx);opacity:.72}
#machine .mr__pl{display:inline-flex;align-items:center;gap:.5rem;height:44px;margin-top:1.3rem;padding:0 1.25rem;border-radius:99px;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--tx);box-shadow:inset 0 0 0 1px var(--ring);transition:background-color .3s,color .3s,box-shadow .3s}
#machine .mr__pl i,#machine .mr__fact i{font-style:normal;transition:transform .4s var(--ez)}
#machine .mr__pl:hover,#machine .mr__pl:focus-visible{background:var(--tx);color:var(--gb);box-shadow:inset 0 0 0 1px var(--tx)}
#machine .mr__pl:hover i,#machine .mr__fact:hover i{transform:translate(2px,-2px)}
#machine .mr__pl:focus-visible,#machine .mr__fact:focus-visible,#machine .mr__rail button:focus-visible{outline:2px solid var(--ac,#7d8bff);outline-offset:3px}
#machine .mr__mb{display:none}
#machine .mr__fact{display:table;margin-top:1rem;font-size:16px;line-height:1.4;color:var(--tx);opacity:.9;border-bottom:1px solid var(--ring);transition:opacity .3s}
#machine .mr__fact:hover{opacity:1}
#machine .mr__fact b{font-weight:600;color:var(--ac)}
#machine .mr__kk{margin:0 0 1.2rem;font-size:14px;font-weight:400;color:var(--tx);opacity:.7}
#machine .mr__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
#machine .mr__cta .pill{height:48px;padding:0 1.35rem;gap:.7rem;font-size:14px;letter-spacing:0;text-transform:none}
#machine .mr__cta .pill--line{background:transparent;color:#0f1016;box-shadow:inset 0 0 0 1px rgba(15,16,22,.18)}
#machine .mr__cta .pill--line::before{background:#0f1016}
#machine .mr__cta .pill--line:hover,#machine .mr__cta .pill--line:focus-visible{color:#fff}
#machine .mr-cta1 b{position:relative;flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);transition:background-color .25s,box-shadow .25s}
#machine .mr-cta1.is-lit b{background:#fff;box-shadow:none}
#machine .mr-cta1.is-lit b::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);animation:mrBreath 2.6s ease-in-out infinite}
#machine .mr-cta1:hover b,#machine .mr-cta1:focus-visible b{background:#2438f5}
#machine .mr-cta1:hover b::after{border-color:rgba(36,56,245,.6)}
@keyframes mrBreath{0%,100%{transform:scale(.72);opacity:.9}55%{transform:scale(1.3);opacity:0}}

/* ── compositions (desktop) · C centred · T type on top · R art left · B art high · L art right · S split finale ── */
#machine .mr__sc[data-c=C] .mr__cp{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--gx) 8vh;text-align:center}
#machine .mr__sc[data-c=C] .mr__side{margin-top:2.2rem}
#machine .mr__sc[data-c=C] .mr__p{margin:0 auto;max-width:44ch}
#machine .mr__sc[data-c=T] .mr__h{position:absolute;left:var(--gx);top:13%;width:calc(61% - var(--gx))}
#machine .mr__sc[data-c=T] .mr__side{position:absolute;left:64%;top:22%;width:30%}
#machine .mr__sc[data-c=R] .mr__cp{left:58%;right:4%;top:auto;bottom:84px}
#machine .mr__sc[data-c=R] .mr__side{margin-top:2rem}
#machine .mr__sc[data-c=B] .mr__h{position:absolute;left:var(--gx);bottom:11%;width:calc(62% - var(--gx))}
#machine .mr__sc[data-c=B] .mr__side{position:absolute;right:var(--gx);bottom:11%;width:27%}
#machine .mr__sc[data-c=L] .mr__cp{left:var(--gx);right:auto;width:min(40vw,40rem);top:auto;bottom:84px}
#machine .mr__sc[data-c=L] .mr__side{margin-top:2rem}
#machine .mr__sc[data-c=S] .mr__hb{position:absolute;left:var(--gx);bottom:14%;width:calc(53% - var(--gx))}
#machine .mr__sc[data-c=S] .mr__side{position:absolute;left:58%;right:6%;bottom:14%}
#machine .mr__sc[data-c=T] .mr__scrim{background:linear-gradient(180deg,rgba(var(--gr),.8) 0,rgba(var(--gr),.8) 32%,rgba(var(--gr),0) 41%)}
#machine .mr__sc[data-c=R] .mr__scrim{background:linear-gradient(270deg,rgba(var(--gr),.8) 0,rgba(var(--gr),.8) 38%,rgba(var(--gr),0) 43%)}
#machine .mr__sc[data-c=B] .mr__scrim{background:linear-gradient(0deg,rgba(var(--gr),.8) 0,rgba(var(--gr),.8) 38%,rgba(var(--gr),0) 46%)}
#machine .mr__sc[data-c=L] .mr__scrim{background:linear-gradient(90deg,rgba(var(--gr),.8) 0,rgba(var(--gr),.8) 38%,rgba(var(--gr),0) 44%)}

/* ── intro kicker (the only Geist Mono in the section) ── */
#machine .mr__kick{position:absolute;left:var(--gx);top:100px;z-index:6;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#c7cdff;pointer-events:none}
#machine.mr--on .mr__kick{opacity:0}
@media (min-width:901px){#machine .mr__kick{display:none}}   /* the header shows the same label there */
html.mr-in .hd::before{opacity:0}   /* posters are solid grounds: the compact header band would grey the desk rim */

/* ── chapter rail: label · line with ten notches + riding dot · Skip ── */
#machine.mr--on .mr__rail{--rc:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:absolute;left:var(--gx);right:var(--gx);bottom:calc(6px + env(safe-area-inset-bottom));height:44px;z-index:6;color:var(--rc);opacity:0;transition:color .35s ease}
#machine .mr__pin[data-lum=light] .mr__rail{--rc:#0f1016}
#machine .mr__pin .mr__rail.is-dk{--rc:#0f1016}
#machine .mr__pin .mr__rail.is-dk .mr__rdot{background:#2438f5}
#machine .mr__rl{display:flex;align-items:center;gap:.45em;margin:0;font-size:13px;line-height:1.2;opacity:.7;white-space:nowrap}
#machine .mr__rn{display:inline-flex;align-items:center;gap:.45em}
#machine .mr__rl.no-n .mr__rn{display:none}
#machine .mr__dgs{display:inline-flex;font-variant-numeric:tabular-nums}
#machine .mr__dg{display:block;height:1.2em;overflow:hidden}
#machine .mr__dg>span{display:block;transform:translate3d(0,calc(var(--d,0) * -10%),0);transition:transform .7s var(--ez)}
#machine .mr__dg i{display:block;height:1.2em;font-style:normal;text-align:center}
#machine .mr__line{position:relative;width:min(34vw,520px);height:44px;cursor:pointer}
#machine .mr__line::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.28}
#machine .mr__nt{position:absolute;top:0;width:44px;height:44px;margin-left:-22px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
#machine .mr__nt::before{content:'';position:absolute;left:50%;top:50%;width:1px;height:9px;margin:-4.5px 0 0 -.5px;background:currentColor;opacity:.4;transition:opacity .3s,transform .3s}
#machine.mr--on .mr__nt{pointer-events:none}   /* the line picks the nearest notch (v32-mroom.js) */
#machine .mr__nt.is-past::before{opacity:.85}
#machine .mr__nt:hover::before,#machine .mr__nt:focus-visible::before{opacity:1;transform:scaleY(1.6)}
#machine .mr__rdot{position:absolute;left:0;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#2f45ff;pointer-events:none}
#machine .mr__pin[data-g=blue] .mr__rdot{background:#fff}
#machine .mr__pin[data-g=ink] .mr__rdot{background:#4f66ff}
#machine .mr__skip{justify-self:end;height:44px;padding:0 .2rem;border:0;background:none;color:inherit;font-size:13px;opacity:.7;cursor:pointer;transition:opacity .3s}
#machine .mr__skip:hover{opacity:1}
#machine .mr__skip i{font-style:normal;display:inline-block;margin-left:.3em;transition:transform .4s var(--ez)}
#machine .mr__skip:hover i{transform:translateY(3px)}

/* ── phone: one template — headline top (84px), art middle, line + one full-width pill bottom ── */
@media (max-width:760px){
  #machine.mroom{--gx:16px}
  #machine.mr--on .mr__frame{inset:6px;border-radius:20px}
  #machine .mr__h{font-size:clamp(2.4rem,11vw,3.2rem)}
  #machine .mr__sc[data-k=intro] .mr__h{font-size:clamp(3.1rem,14vw,4.4rem)}
  #machine .mr__sc[data-c] .mr__cp{inset:0;width:auto}
  #machine .mr__sc:not([data-c=C]):not([data-c=S]) .mr__h,#machine .mr__sc[data-c=S] .mr__hb{position:absolute;left:22px;right:22px;top:84px;bottom:auto;width:auto}
  #machine .mr__sc:not([data-c=C]):not([data-c=S]) .mr__side{position:absolute;left:22px;right:22px;top:auto;bottom:calc(70px + env(safe-area-inset-bottom));width:auto;margin:0}
  #machine .mr__sc[data-c=S] .mr__hb{top:29%}
  #machine .mr__sc[data-c=S] .mr__side{position:absolute;left:22px;right:22px;top:51%;bottom:auto;width:auto}
  #machine .mr__p{max-width:none;font-size:1rem}
  #machine .mr__pl{display:flex;justify-content:center;width:100%;margin-top:1rem}
  #machine .mr__dk{display:none}
  #machine .mr__mb{display:inline}
  #machine .mr__fact{margin-top:.8rem;font-size:15px}
  #machine .mr__kk{margin-bottom:.8rem}
  #machine .mr__cta{flex-direction:column;gap:.55rem;margin-top:calc(.04 * 100svh)}
  #machine .mr__cta .pill{justify-content:center;width:100%}
  #machine .mr__sc:not([data-c=C]):not([data-c=S]) .mr__scrim{background:linear-gradient(180deg,rgba(var(--gr),.8) 0,rgba(var(--gr),.8) 25%,rgba(var(--gr),0) 31%,rgba(var(--gr),0) 72%,rgba(var(--gr),.8) 78%,rgba(var(--gr),.8) 100%)}
  #machine .mr__sc[data-k=deploy] .mr__scrim{background:linear-gradient(180deg,rgba(12,13,18,.8) 0,rgba(12,13,18,.8) 22%,rgba(12,13,18,0) 30%,rgba(12,13,18,0) 70%,rgba(12,13,18,.55) 80%,rgba(12,13,18,.55) 100%)}
  #machine .mr__kick{top:92px;left:22px}
  #machine.mr--on .mr__rail{left:16px;right:16px;grid-template-columns:0 1fr auto}
  #machine .mr__rl{visibility:hidden}
  #machine .mr__line{width:52vw;justify-self:center}
  #machine .mr__sc{min-height:max(680px,100svh)}
  #machine.mr--on .mr__sc{min-height:0}
}
@media (max-width:760px) and (max-height:700px){#machine .mr__h{font-size:clamp(2.1rem,9.6vw,2.8rem)}}
/* a present scene paints its own door: the fallback grounds step aside so the incoming poster shows through */
#machine.mr--on .mr__sc.is-door,#machine.mr--on .mr__sc.is-door .mr__art{background:transparent}
@media (prefers-reduced-motion:reduce){#machine .mr-cta1.is-lit b::after{animation:none;transform:scale(1.1);opacity:.5}#machine .mr__h em{transition:none}}