/* /automate: the one stylesheet this page loads. Merged on 3 Oct 2026 from v4.css, automate.css, v3.css and monday.css
   (in that order, unused rules removed by local/preview/purge_css.py); edit it directly from here on. */
/* ---- from v4.css ---- */
:root{--ink:#f4f2ec;--ink2:#c2bfb4;--muted:#83817a;--label:#9a978f;--faint:#55534e;--bg0:#0a0a0e;--bg1:#0f1116;--panel:#15151c;--panel2:#1a1a22;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);--brand:#ff5a2e;--onbrand:#1a0c05;--wa:#25c07d;--eo:cubic-bezier(.16,1,.3,1);--pop:cubic-bezier(.34,1.56,.64,1);--glass:rgba(19,19,25,.78);--navbg:rgba(10,10,14,.76);--sunken:rgba(0,0,0,.35);--hover:rgba(255,255,255,.05);--dotoff:#3a3a44;--scrim:rgba(6,6,9,.7);--shadow:0 40px 90px -40px rgba(0,0,0,.95);--outbub:#0e4a34;--outink:#e6f7ef;--inbub:#1e1f27;--screen:#0b141a;--wahead:#111b21;--grain:.04;--glow1:rgba(255,90,46,.16);--glow2:rgba(91,147,245,.12)}
html{color-scheme:dark;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bot .tip,.bot .zz{animation:none!important}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg0);color:var(--ink);font-family:"Schibsted Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
body{overflow-x:hidden;transition:background .4s var(--eo),color .4s var(--eo)}
body::after{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+")}
::selection{background:var(--brand);color:#0a0a0e}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--brand)}
h1,h2,h3{margin:0;font-family:Syne,sans-serif;font-weight:700;letter-spacing:-.028em;line-height:1.06;text-wrap:pretty}
p{margin:0;text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:14.5px;padding:11px 20px;border:1.5px solid transparent;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .25s var(--eo)}
.btn:hover{transform:translateY(-1px);color:var(--ink)}
.btn:active{transform:translateY(0)}
.btn-brand{background:var(--brand);border-color:var(--brand);color:var(--onbrand)}
.btn-brand:hover{background:#ff6c44;border-color:#ff6c44;color:var(--onbrand)}
.btn-ghost{border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--ink2);background:var(--hover)}
.btn-lg{font-size:15px;padding:14px 26px;border-radius:12px}
.btn-sm{font-size:13px;padding:8px 15px;border-radius:9px}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 32px;height:64px;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.scrolled{background:var(--navbg);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line)}
.logo{font-family:Syne,sans-serif;font-weight:800;font-size:15px;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap;flex:none}
.logo b{color:var(--brand)}
.logo:hover{color:var(--ink)}
.links{display:flex;gap:26px;font-size:13.5px;font-weight:500;white-space:nowrap}
.links a{position:relative;color:var(--ink2);transition:color .18s}
.links a:hover{color:var(--ink)}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--brand);transition:right .35s var(--eo)}
.links a:hover::after{right:0}
.nav-right{display:flex;gap:16px;align-items:center;font-size:13.5px;font-weight:500;white-space:nowrap;flex:none}
.nav-right>a:not(.btn){color:var(--ink2)}
.nav-right>a:not(.btn):hover{color:var(--ink)}
/* story */
.glow{position:absolute;border-radius:50%;filter:blur(80px);transition:opacity 1.2s var(--eo),transform 1.6s var(--eo)}
.ch{position:absolute;left:0;right:0;top:50%;transform:translateY(calc(-50% + 18px));opacity:0;visibility:hidden;transition:opacity .45s var(--eo),transform .45s var(--eo),visibility 0s .45s;max-width:560px;pointer-events:none}
.ch.on{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .6s var(--eo) .08s,transform .6s var(--eo) .08s;pointer-events:auto}
.ch h1{font-size:clamp(40px,4.6vw,66px);margin:22px 0 20px}
.ch h1 em{font-style:normal;color:var(--brand)}
.ch h2{font-size:clamp(26px,2.6vw,36px);margin:0 0 14px}
.cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.ch p{font-size:16px;line-height:1.55;color:var(--ink2)}
.prompt{border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(16px);border-radius:14px;margin-top:20px;overflow:hidden;box-shadow:var(--shadow)}
.prompt pre{margin:0;padding:18px 18px 20px;font-family:inherit;font-size:16px;line-height:1.55;color:var(--ink);white-space:pre-wrap;min-height:120px}
.prompt pre::after{content:"";display:inline-block;width:2px;height:18px;background:var(--brand);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite}
.prompt.done pre::after{display:none}
@keyframes blink{50%{opacity:0}}
.note{margin-top:14px!important;font-size:13.5px!important;color:var(--muted)!important}
.outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:20px}
.out{background:var(--glass);padding:18px 16px}
.out b{display:block;font-family:Syne,sans-serif;font-weight:700;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.025em;color:var(--ink);line-height:1.05}
.out span{display:block;margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.4}
.cost{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--hover)}
.cost p{font-size:14px;color:var(--ink2)}
.cost p b{color:var(--ink);font-weight:600}
.trust{margin-top:18px;display:flex;gap:6px 18px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.trust span+span::before{content:"·";margin-right:18px;color:var(--faint)}
/* the stage's right column: phone + stack */
.phone{--phw:300px;flex:none;width:auto;height:min(100%,calc(var(--phw)*2.1333));aspect-ratio:9/19.2;border-radius:40px;background:#0b0b10;padding:10px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.9),inset 0 0 0 1.5px rgba(255,255,255,.05);position:relative;transition:transform .8s var(--eo),opacity .8s var(--eo)}
.screen{position:relative;height:100%;border-radius:31px;overflow:hidden;background:var(--screen);color:var(--ink);font-size:12.5px}
.av{width:34px;height:34px;border-radius:50%;background:var(--avc,#f2a53a);color:#1a0c05;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.who{min-width:0;flex:1}
.who b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stack{width:0;opacity:0;overflow:hidden;transition:width .8s var(--eo),opacity .6s var(--eo);flex:none}
.lay{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);opacity:0;transform:translateX(12px);transition:opacity .45s var(--eo),transform .45s var(--eo),background .3s}
.lay:last-child{border-bottom:0}
.lay.in{opacity:1;transform:none}
.lay i{width:8px;height:8px;border-radius:50%;background:var(--lc);opacity:.55;transition:opacity .3s,box-shadow .3s}
/* now you */
.try{background:var(--bg0);color:var(--ink);padding:104px 32px 112px;border-top:1px solid var(--line);position:relative}
.try::before{content:"";position:absolute;left:50%;top:-1px;width:min(720px,80%);height:340px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,rgba(255,90,46,.1),transparent 70%);pointer-events:none}
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font-weight:600;font-size:13.5px}
.ph .st{font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--label);display:flex;align-items:center;gap:7px}
.ph .st i{width:6px;height:6px;border-radius:50%;background:var(--dotoff)}
.ph .st.live i{background:var(--wa);box-shadow:0 0 0 3px rgba(37,192,125,.16)}
.team .lay{padding:12px 18px;grid-template-columns:8px minmax(0,1fr) auto}
.team .lay.in{opacity:1;transform:none}
.chat{display:flex;flex-direction:column;height:540px}
.thread{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:9px;background:var(--sunken);scroll-behavior:smooth}
.thread .log{align-self:flex-end;font-family:"Geist Mono",monospace;font-size:10.5px;color:var(--label);margin:-2px 2px 4px 0;text-align:right;line-height:1.6;max-width:92%}
.thread .log b{color:var(--ink2);font-weight:500}
.send{width:34px;height:34px;border:1px solid var(--line2);border-radius:9px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:default;opacity:.5;transition:opacity .2s,background .2s,color .2s,border-color .2s}
.send svg{width:15px;height:15px}
.send.ready{opacity:1;background:var(--brand);border-color:var(--brand);color:var(--onbrand);cursor:pointer}
.send.ready:hover{background:#ff6c44;border-color:#ff6c44}
/* cta + footer */
.fin{position:relative;padding:120px 32px 100px;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.fin .glow{left:50%;top:50%;width:60vw;height:60vw;transform:translate(-50%,-50%);background:var(--glow1);opacity:.6}
.fin h2{font-size:clamp(32px,4.4vw,56px)}
.fin h2 em{font-style:normal;color:var(--brand)}
.fin p{margin:18px auto 0;font-size:17px;color:var(--ink2);max-width:44ch}
.fin .cta{justify-content:center;margin-top:30px}
/* footer: the wordmark runs full width and bleeds off the bottom */
.foot{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:72px 0 48px;color:var(--muted)}
.foot-grid{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start;position:relative;z-index:2}
.foot-cols{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:56px}
.foot-cols h4{margin:0 0 16px;font-family:"Schibsted Grotesk",sans-serif;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0;white-space:nowrap}
.foot-cols a{display:block;font-size:15px;color:var(--ink);margin-bottom:11px;white-space:nowrap}
.foot-cols a:hover{color:var(--brand)}
.foot-bar{max-width:1180px;margin:64px auto 0;padding:0 32px 18px;display:flex;justify-content:space-between;gap:20px;font-size:13px;flex-wrap:wrap;position:relative;z-index:2}
.foot-word{position:absolute;left:0;right:0;bottom:0;z-index:1;line-height:0;transform:translateY(16%);pointer-events:none;user-select:none}
.foot-word svg{display:block;width:100%;height:auto}
.foot-word text{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.04em;fill:url(#fwg);stroke:rgba(255,255,255,.06);stroke-width:.6}
@media (max-width:860px){
  .foot{padding-top:56px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .foot-cols{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:28px}
  .foot-bar{margin-top:56px}
}
/* ---------- v4: hero (canvas shoreline + copy) ---------- */
.hero{position:relative;height:100vh;height:100dvh;overflow:hidden;background:var(--bg0)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,color-mix(in srgb,var(--bg0) 92%,transparent) 0%,color-mix(in srgb,var(--bg0) 74%,transparent) 40%,color-mix(in srgb,var(--bg0) 20%,transparent) 62%,transparent 78%);opacity:0;transition:opacity 1.2s var(--eo);pointer-events:none;z-index:2}
#skip{position:absolute;right:28px;bottom:24px;z-index:6;font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:none;border:0;cursor:pointer;padding:6px 0;color:var(--ink2);transition:color .2s}
#skip:hover{color:var(--ink)}
/* ---------- v4: story stage without a hero chapter ---------- */
.ch h2{font-size:clamp(26px,2.6vw,36px)}
/* the trace as a preemption queue */
.queue{margin-top:20px;border:1px solid var(--line);border-radius:16px;background:var(--glass);backdrop-filter:blur(16px);overflow:hidden;box-shadow:var(--shadow)}
.q{display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;align-items:start;padding:10px 8px 9px;border-radius:10px;opacity:.28;transition:opacity .4s var(--eo),background .3s}
.q.live,.q.done{opacity:1}
.q.done{opacity:.55}
.q.live{background:var(--hover)}
/* borders that hide: team + queue rows */
.lay{border-bottom-color:transparent;position:relative}
.lay::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:1px;background:var(--line);opacity:0;transition:opacity .2s}
.lay:hover::after{opacity:1}
.team .lay:hover{background:var(--hover)}
@media (max-width:860px){
  .hero::after{background:linear-gradient(to top,color-mix(in srgb,var(--bg0) 88%,transparent) 0%,color-mix(in srgb,var(--bg0) 60%,transparent) 55%,transparent 85%)}
}
/* ---------- v4: the run console (replaces the phone) ---------- */
.cv{grid-area:1/1;display:flex;flex-direction:column;min-height:0;max-height:100%;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s var(--eo),transform .45s var(--eo),visibility 0s .45s}
.cv.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--eo) .05s,transform .5s var(--eo) .05s}
/* the board fills itself */
@media (max-width:860px){
  .ch{position:absolute;top:auto;bottom:0;transform:translateY(12px);max-width:none}
  .ch.on{transform:none}
  .ch h2{font-size:24px}
  .prompt pre{min-height:0;font-size:14px}
}
/* ---------- anatomy of an agent: scroll-pinned layer stack ---------- */
.agents{position:relative;height:340vh;border-top:1px solid var(--line)}
@media (max-width:860px){
  .agents{height:300vh}
}
/* atmosphere per chapter: cold and dim before, warm once the prompt lands, spotlight for the run, calm green after */
.scene{position:relative;z-index:2;height:100%;max-width:1320px;margin:0 auto;padding:64px 40px 112px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:0}
.copy{position:relative;min-height:0}
.ch{position:absolute;left:0;top:50%;max-width:520px;transform:translateY(calc(-50% + 18px));opacity:0;visibility:hidden;transition:opacity .35s var(--eo),transform .35s var(--eo),visibility 0s .35s;pointer-events:none;z-index:1}
.ch.on{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .6s var(--eo) .2s,transform .6s var(--eo) .2s;pointer-events:auto;z-index:2}
.ch h2{font-size:clamp(30px,3.4vw,46px);margin:0 0 12px}
.ch p{font-size:17px;color:var(--ink2)}
.ch h2,.ch p,.ch .prompt,.ch .outs,.ch .cta{opacity:0;transform:translateY(16px);transition:opacity .5s var(--eo),transform .55s var(--eo)}
.ch.on h2{opacity:1;transform:none;transition-delay:.09s}
.ch.on p,.ch.on .prompt,.ch.on .outs{opacity:1;transform:none;transition-delay:.17s}
.ch.on .cta{opacity:1;transform:none;transition-delay:.25s}
.ch .prompt{margin-top:18px;max-width:460px}
.ch .prompt pre{min-height:0;font-size:15px}
.ch .cta{margin-top:22px}
/* the world: threads card, summary card, pill, bots on a ground line */
.world{position:relative;height:min(300px,32vh);min-height:220px}
.ground{position:absolute;left:-40px;right:-40px;bottom:0;height:1px;background:linear-gradient(to right,transparent,var(--line2) 20%,var(--line2) 80%,transparent)}
.ground::after{content:"";position:absolute;left:0;right:0;top:1px;height:80px;background:linear-gradient(to bottom,var(--hover),transparent)}
.floor{position:absolute;left:0;right:0;bottom:0;height:100%}
.bot{--x:50%;--y:0px;--s:1;position:absolute;left:var(--x);bottom:0;width:96px;margin-left:-48px;transform:translate3d(0,calc(var(--y)*-1),0) scale(var(--s));transform-origin:50% 100%;transition:opacity .4s var(--eo),filter .4s var(--eo);will-change:transform;opacity:1}
.bot[data-st="off"]{opacity:0}
.bot .ring{position:absolute;left:50%;bottom:-4px;width:120px;height:20px;margin-left:-60px;border-radius:50%;border:1.5px solid var(--pc);opacity:0;transform:scale(.6);transition:opacity .35s var(--eo),transform .35s var(--eo)}
.bot.lit .ring{opacity:.7;transform:none;animation:ringpulse 1.4s var(--eo) infinite}
@keyframes ringpulse{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.15);opacity:0}}
.bot svg{width:96px;height:104px;display:block;overflow:visible;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
/* faces (same state map as story/mascot.js): idle=open+smile, talk/work=open+o, sleep=sleep+flat, walk=open+smile */
.bot[data-st="work"] .tip{animation:blinktip .7s infinite}
@keyframes blinktip{50%{fill:#fff}}
.bot .zz{position:absolute;left:72%;bottom:92%;font-family:"Geist Mono",monospace;font-size:11px;color:var(--muted);opacity:0}
.bot[data-st="sleep"] .zz{opacity:1;animation:zz 2.4s infinite}
@keyframes zz{0%{transform:translate(0,0);opacity:0}30%{opacity:.9}100%{transform:translate(7px,-10px);opacity:0}}
/* the artifact card: what this layer owns / did. The story page's .art, sized down. */
.bot .card{position:absolute;left:50%;bottom:calc(100% + 10px);width:184px;margin-left:-92px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.65);padding:11px 13px 12px;text-align:left;opacity:0;transform:translateY(14px) scale(.94);transition:opacity .4s var(--eo),transform .5s var(--pop);pointer-events:none;z-index:3}
.bot .card.on{opacity:1;transform:none}
.bot .card.done{opacity:.45;transform:translateY(6px) scale(.8);filter:saturate(.6)}
.bot .card.done .ck i{box-shadow:none}
.bot.lit{z-index:5}
.bot .card .ck{display:flex;align-items:center;gap:7px;font-family:"Geist Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bot .card .ck i{width:5px;height:5px;border-radius:50%;background:var(--pc);box-shadow:0 0 8px var(--pc)}
.bot .card::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--line2)}
/* the run log: agent pill on top, every hand-off as a log line under it. Lives in the copy row, right side, clear of the bots and their cards. */
.th{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n t" "s s";padding:7px 8px;border-radius:9px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--eo),transform .4s var(--eo)}
.th.in{opacity:1;transform:none}
.th b{grid-area:n;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th span{grid-area:s;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th em{grid-area:t;font-style:normal;font-family:"Geist Mono",monospace;font-size:10px;color:var(--label)}
.summary{position:absolute;right:0;top:50%;width:min(340px,34%);padding:16px 18px 14px;border:1px solid var(--line);border-left:2px solid var(--wa);border-radius:14px;background:var(--glass);backdrop-filter:blur(16px);box-shadow:var(--shadow);opacity:0;transform:translateY(calc(-50% + 12px));transition:opacity .5s var(--eo),transform .5s var(--eo);pointer-events:none}
.summary.in{opacity:1;transform:translateY(-50%)}
.summary p{font-size:14px;line-height:1.55}
.summary time{display:block;margin-top:8px;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.1em;color:var(--label)}
.world{margin-top:28px}
@media (max-width:1180px){
  .bot{width:80px}
  .bot{margin-left:-40px}
  .bot svg{width:80px;height:87px}
  .bot .card{width:160px;margin-left:-80px}
}
@media (max-width:860px){
  .scene{padding:72px 18px 100px}
  .ch{max-width:none;top:auto;bottom:0;transform:translateY(12px)}
  .ch.on{transform:none}
  .copy{min-height:36vh}
  .ch h2{font-size:clamp(26px,7vw,34px)}
  .ch p{font-size:15px}
  .world{height:min(240px,30vh);min-height:180px}
  .bot{width:52px}
  .bot{margin-left:-26px}
  .bot svg{width:52px;height:56px}
  .bot .card{width:150px;margin-left:-75px;padding:8px 10px}
  .summary{display:none}
}
@media (max-height:700px){
  .ch[data-ch="3"] h2{margin-bottom:0}
}
/* book a demo (overrides story/demo.js injected styles) */
.demo-scrim{background:var(--scrim)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;overflow-y:auto!important;align-items:safe center!important}
.demo-scrim:not([data-v="2"]) .demo-box{margin:auto!important;width:min(460px,94vw)!important;background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:var(--shadow)!important;padding:32px 32px 28px!important;color:var(--ink)!important;animation:demoIn .4s var(--eo) both!important}
@keyframes demoIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.demo-scrim:not([data-v="2"]) .demo-box h3{font-size:26px!important;color:var(--ink)!important;line-height:1.05!important}
.demo-scrim:not([data-v="2"]) .demo-box .dsub{font-size:14px!important;color:var(--muted)!important;margin-top:10px!important;line-height:1.55!important}
.demo-scrim:not([data-v="2"]) .demo-box label{font-family:"Schibsted Grotesk",sans-serif!important;font-size:12.5px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink2)!important;margin:18px 0 7px!important}
.demo-scrim:not([data-v="2"]) .demo-box input,.demo-scrim:not([data-v="2"]) .demo-box textarea{background:var(--hover)!important;border:1px solid var(--line)!important;border-radius:10px!important;color:var(--ink)!important;font-size:14.5px!important;padding:11px 13px!important;box-shadow:none!important}
.demo-scrim:not([data-v="2"]) .demo-box input::placeholder,.demo-scrim:not([data-v="2"]) .demo-box textarea::placeholder{color:var(--label)}
.demo-scrim:not([data-v="2"]) .demo-box input:focus,.demo-scrim:not([data-v="2"]) .demo-box textarea:focus{border-color:rgba(255,90,46,.55)!important;box-shadow:0 0 0 3px rgba(255,90,46,.12)!important}
.demo-scrim:not([data-v="2"]) .demo-actions{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:12px!important;margin-top:26px!important}
.demo-scrim:not([data-v="2"]) .demo-actions .btn-ghost{color:var(--ink2);border-color:var(--line2)}
.demo-scrim:not([data-v="2"]) .demo-actions .btn-ghost:hover{background:var(--hover);color:var(--ink)}
.demo-scrim:not([data-v="2"]) .demo-msg{font-size:12.5px!important;margin-top:14px!important;color:var(--wa)!important}
.demo-scrim:not([data-v="2"]) .demo-msg.err{color:#e0552a!important}
@media (max-height:760px){
  .demo-scrim:not([data-v="2"]) .demo-box{padding:22px 26px 20px!important}
  .demo-scrim:not([data-v="2"]) .demo-box h3{font-size:22px!important}
  .demo-scrim:not([data-v="2"]) .demo-box label{margin:11px 0 5px!important}
  .demo-scrim:not([data-v="2"]) .demo-box textarea{min-height:0!important;height:56px!important}
  .demo-scrim:not([data-v="2"]) .demo-actions{margin-top:16px!important}
}
/* responsive */
@media (max-width:1180px){
  .phone{--phw:264px}
}
@media (max-width:980px){
  .stack{position:absolute;inset:0;display:grid;place-items:center;width:auto;overflow:visible;opacity:0;pointer-events:none;transition:opacity .6s var(--eo)}
  .phone{--phw:236px;border-radius:34px;padding:8px}
  .screen{border-radius:27px;font-size:11.5px}
  .ch h1{font-size:clamp(34px,4.4vw,48px)}
  .links{display:none}
  .nav{padding:0 18px}
  .outs{grid-template-columns:1fr 1fr 1fr}
  .out b{font-size:19px}
  .cost{grid-template-columns:1fr}
  .try{padding:72px 18px 80px}
  .chat{height:460px}
  .fin{padding:90px 20px 80px}
}
@media (max-width:760px){
  .phone{--phw:400px;border-radius:28px;padding:6px}
  .screen{border-radius:22px;font-size:10px}
  .ch{position:absolute;top:auto;bottom:0;transform:translateY(12px);max-width:none}
  .ch.on{transform:none}
  .ch h1{font-size:clamp(30px,8vw,40px);margin:12px 0 10px}
  .cta{margin-top:16px}
  .ch h2{font-size:24px}
  .prompt pre{min-height:0;font-size:14px}
}
@media (max-height:700px) and (min-width:761px){
  .ch h1{font-size:clamp(30px,3.8vw,44px);margin:14px 0 12px}
  .cta{margin-top:18px}
  .phone{--phw:230px}
  .prompt pre{min-height:0;font-size:14.5px}
  .out{padding:12px}
  .out b{font-size:19px}
}
/* backdrops: cold night → the prompt warms the floor → amber for the team → a dark theatre for the run → morning */
.sky{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--eo)}
/* the sun rises behind the team in the last chapter, the way it set on the beach */
.sun{position:absolute;left:58%;bottom:112px;width:min(260px,26vw);height:min(260px,26vw);border-radius:50%;background:radial-gradient(circle,#ffc68a 0%,rgba(255,150,80,.55) 38%,transparent 70%);transform:translate(-50%,110%);opacity:0;transition:transform 2.6s var(--eo),opacity 1.4s var(--eo);filter:blur(4px)}
/* after: the numbers land one by one; the summary opens on the count that started it all */
.ch .outs .out{opacity:0;transform:translateY(10px);transition:opacity .5s var(--eo),transform .55s var(--eo)}
.ch.on .outs .out{opacity:1;transform:none;transition-delay:.25s}
.ch.on .outs .out:nth-child(2){transition-delay:.45s}
.ch.on .outs .out:nth-child(3){transition-delay:.65s}
.summary .z{display:inline-flex;align-items:center;gap:8px;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wa);margin-bottom:10px}
.summary .z i{width:6px;height:6px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 3px rgba(37,192,125,.18)}
/* confetti */
@media (max-width:1100px){
  .ch[data-ch="4"]{max-width:56%}
}
@media (max-width:860px){
  .sun{bottom:100px}
  .summary{display:none}
}
/* run: a clock against the human */
.ch .clock{opacity:0;transform:translateY(16px);transition:opacity .5s var(--eo) .17s,transform .55s var(--eo) .17s;margin-top:22px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ch.on .clock{opacity:1;transform:none}
.clock b{font-family:Syne,sans-serif;font-weight:700;font-size:clamp(34px,3.4vw,48px);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;transition:color .4s}
.clock span{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .4s}
.clock.end b{color:var(--wa)}
.clock.end span{color:var(--ink2)}
/* try: tap a reply instead of typing */
.sugs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px 0;background:var(--panel);border-top:1px solid var(--line);transition:opacity .3s}
.sugs:empty{display:none}
.sugs button{appearance:none;font:inherit;font-size:12.5px;font-weight:500;color:var(--ink2);background:var(--hover);border:1px solid var(--line2);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s,background .2s,transform .25s var(--eo)}
.sugs button:hover{color:var(--ink);border-color:var(--brand);background:rgba(255,90,46,.1);transform:translateY(-1px)}
@media (max-height:700px){
  .ch .clock{margin-top:12px}
  .clock b{font-size:30px}
}
/* progress rides the top edge of the chapter rail, never across copy */
.summary .z,.ph,.ph .st{white-space:nowrap}
/* finished work collapses to a small receipt so the line stays readable */
.bot .card.done{width:max-content;max-width:150px;margin-left:0;left:50%;padding:5px 9px;transform:translateX(-50%) translateY(4px);opacity:.85;filter:none;border-radius:999px;background:var(--panel)}
.bot .card.done::after{display:none}
.bot .card.done .ck{margin:0;gap:6px;color:var(--ink2)}
.bot .card.done .ck::after{content:"✓";color:var(--wa);font-size:10px;letter-spacing:0}
@media (max-height:700px){
  .ch[data-ch="2"] p,.ch[data-ch="3"] p{display:none}
  .ch[data-ch="3"] .clock{margin-top:8px}
}
/* ===== Phones (26 Sept) =====
   1. The hero kept its desktop width (min(640px,60vw) = 225px on a 375 phone), so the
      headline wrapped one word a line and the column ran up under the nav.
   2. The "After" figures sat in a 56% column (a tablet rule) and were cut off.
   3. Six agent names side by side collided; on a phone only the working agent is named. */
@media (max-width:860px){
  .ch[data-ch="4"]{max-width:none}
}
@media (max-width:560px){
  /* the owner stands on agent 02's spot once the six take the floor */
  /* the end agents' cards open inward so they stay on screen */
  .floor>.bot:first-child .card{margin-left:-22px}
  .floor>.bot:last-of-type .card{margin-left:-128px}
  .outs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .out:nth-child(3){grid-column:1 / -1}
}
/* Our profiles: icons under the footer logo (26 Sept) */
.fb-r{display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap}
.soc{display:inline-flex;align-items:center;gap:16px}
.soc a{display:inline-flex;color:var(--muted,#83817a);opacity:.85;transition:color .2s,opacity .2s}
.soc a:hover{color:var(--ink,#f4f2ec);opacity:1}
.soc svg{display:block}
/* ---- from automate.css ---- */
/* Automate v2 — loads after v4/v4.css (tokens, nav, buttons, try, fin, footer, demo modal) */
.nav .links a.on{color:var(--ink)}
/* hero */
@keyframes up{to{opacity:1;transform:none}}
/* hero: live run card */
@keyframes fill{to{transform:scaleX(1)}}
/* case studies: pinned, one industry per screen */
.case{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-rows:minmax(0,1fr) auto;gap:28px 72px;opacity:0;visibility:hidden;transition:opacity .4s var(--eo),visibility 0s .4s}
.case.on{opacity:1;visibility:visible;transition:opacity .5s var(--eo)}
.case h3{font-size:clamp(26px,2.7vw,40px);line-height:1.08;margin:16px 0 16px;max-width:20ch}
.cc{align-self:center;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden;min-height:0}
.fl{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);padding-top:22px}
/* how it goes live */
.hw{padding:140px 40px;border-top:1px solid var(--line)}
.hw-prompt{background:var(--sunken);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.55;color:var(--ink);min-height:120px}
.hw-prompt::after{content:"";display:inline-block;width:2px;height:16px;background:var(--brand);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite}
.hw-chips{display:flex;flex-wrap:wrap;gap:8px}
.hw-chips span{font-size:13px;font-weight:500;color:var(--ink2);background:var(--sunken);border:1px solid var(--line);border-radius:9px;padding:7px 11px;opacity:.35;transition:opacity .4s,color .4s,border-color .4s}
.hw-chips span.on{opacity:1;color:var(--ink);border-color:var(--line2)}
.hw-live{background:var(--sunken);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hw-live>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.hw-live>div:last-child{border-bottom:0}
.hw-live>div:first-child{color:var(--ink);font-weight:600}
.hw-live em{font-style:normal;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--wa);display:flex;align-items:center;gap:6px}
.hw-live em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 3px rgba(37,192,125,.18)}
.hw-live span.ck{color:var(--wa)}
/* try: industry tabs */
.try-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin:0 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--sunken)}
.try-tabs button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;transition:background .25s,color .25s;white-space:nowrap}
.try-tabs button:hover{color:var(--ink)}
.try-tabs button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.try{padding-top:140px}
@media (max-height:800px) and (min-width:861px){
  .fl{padding-top:16px}
}
.cc{max-height:100%;display:flex;flex-direction:column}
@media (max-height:760px) and (min-width:861px){
  .fl{padding-top:12px}
  .case h3{font-size:clamp(24px,2.3vw,32px);margin:10px 0 10px}
}
@media (max-height:680px) and (min-width:861px){
  .case{position:static;opacity:1;visibility:visible}
  .cc{max-height:none}
}
@media (max-width:1100px){
  .case{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:24px 40px}
}
@media (max-width:860px){
  .case{position:static;opacity:1;visibility:visible;grid-template-columns:1fr;gap:24px}
  .fl{grid-template-columns:1fr 1fr;gap:20px 0}
  .hw{padding:96px 20px}
}
/* ===== hero v4: two statements, six lanes ===== */
.hz{position:relative;height:100vh;height:100dvh;min-height:620px;overflow:hidden;display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
.hz-lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);pointer-events:none}
.hz-lanes i{position:relative;border-left:1px dashed rgba(255,255,255,.07);overflow:hidden}
.hz-lanes i:first-child{border-left:0}
.hz-lanes i::after{content:"";position:absolute;left:50%;top:-30%;width:2px;height:22%;margin-left:-1px;border-radius:2px;background:linear-gradient(to bottom,transparent,rgba(255,90,46,.9));animation:lane var(--d) linear infinite;animation-delay:var(--o)}
.hz-lanes i::before{content:"";position:absolute;left:50%;top:-30%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--brand);box-shadow:0 0 14px 3px rgba(255,90,46,.55);animation:lanedot var(--d) linear infinite;animation-delay:var(--o)}
@keyframes lane{from{transform:translateY(0)}to{transform:translateY(620%)}}
@keyframes lanedot{from{transform:translateY(0)}to{transform:translateY(calc(100vh * 1.6))}}
.hz-a,.hz-b h2{font-family:Syne,sans-serif;font-weight:700;letter-spacing:-.04em;line-height:.98;font-size:clamp(40px,min(8vw,11.5vh),128px);color:var(--ink)}
.hz-a{opacity:0;transform:translateY(18px);animation:up 1s var(--eo) .1s forwards}
.hz-b{grid-row:3;justify-self:end;text-align:right;display:flex;flex-direction:column;align-items:flex-end;opacity:0;transform:translateY(18px);animation:up 1s var(--eo) .45s forwards}
.hz-b h2{color:var(--brand)}
.hz-b .cta{margin-top:clamp(16px,3vh,32px);justify-content:flex-end}
@media (max-width:860px){
  .hz-a,.hz-b h2{font-size:clamp(44px,13vw,72px)}
  .hz-lanes{grid-template-columns:repeat(3,1fr)}
  .hz-lanes i:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){
  .hz-lanes i::before,.hz-lanes i::after{animation:none;display:none}
  .hz-a,.hz-b{animation:none;opacity:1;transform:none}
}
/* ===== layers v2: isometric stack + accordion ===== */
.lx{padding:140px 48px;border-top:1px solid var(--line)}
.lx-in{max-width:1440px;margin:0 auto}
.lx-h{font-size:clamp(36px,4.4vw,64px);letter-spacing:-.035em;line-height:1.02}
.lx-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center;margin-top:40px}
/* the stack: glass sheets seen slightly from above; a message drops through them */
.lx-stack{position:relative;display:flex;flex-direction:column;gap:18px}
/* isometric sheets; a message drops through their centres */
.lx-stack{align-items:stretch}
.lx-iso{--W:min(24vw,330px);--G:calc(var(--W)*.25);--X:calc(var(--W)*.26);--a:0;--ac:var(--brand);position:relative;height:calc(var(--G)*5 + var(--W)*.816 + var(--X));margin:10px 0}
.pl{position:absolute;left:50%;top:calc(var(--i)*var(--G));width:var(--W);height:var(--W);margin:calc(var(--W)*-.092) 0 0 calc(var(--W)/-2);transform:scaleY(.5774) rotate(45deg);z-index:calc(10 - var(--i));transition:top .7s var(--eo);cursor:pointer}
.pl-f{position:absolute;inset:0;background:var(--bg0);border:1px solid rgba(255,255,255,.2);overflow:hidden;transition:background .6s var(--eo),border-color .6s var(--eo)}
.pl-f span{position:absolute;right:9%;bottom:5%;font-family:"Schibsted Grotesk",sans-serif;font-size:calc(var(--W)*.075);font-weight:500;color:var(--ink2);white-space:nowrap;transition:color .4s}
.pl:hover .pl-f{border-color:rgba(255,255,255,.4)}
.pl.was .pl-f{border-color:color-mix(in srgb,var(--lc) 55%,transparent);background:color-mix(in srgb,var(--lc) 5%,var(--bg0))}
.pl.was .pl-f span{color:var(--lc)}
.pl.on,.pl.on~.pl{top:calc(var(--i)*var(--G) + var(--X))}
.pl.on .pl-f{background:var(--lc);border-color:var(--lc)}
.pl.on .pl-f span{color:#0a0a0e;font-weight:600}
.pl-r{position:absolute;left:50%;top:50%;width:18%;height:18%;margin:-9% 0 0 -9%;border-radius:50%;border:1.5px solid rgba(10,10,14,.55);opacity:0}
.pl.on .pl-r{animation:ripple 1.6s var(--eo) .35s infinite}
@keyframes ripple{0%{transform:scale(.4);opacity:.9}100%{transform:scale(4.2);opacity:0}}
/* the event falls through: each streak sits between two sheets in z, so it vanishes under the upper one and lands on the lower one */
.pl{z-index:calc(20 - var(--i)*2)}
.lx-fall{position:absolute;left:50%;width:2px;margin-left:-1px;height:var(--h,60px);z-index:calc(21 - var(--g)*2);pointer-events:none;opacity:0;background:linear-gradient(to bottom,transparent,var(--lc));clip-path:inset(0 0 100% 0)}
.lx-fall b{position:absolute;left:50%;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--lc) 45%,transparent),0 0 16px 3px var(--lc)}
.lx-fall.go{animation:fallline .95s var(--eo) forwards}
.lx-fall.go b{animation:fallhead .55s cubic-bezier(.55,0,.8,.4) forwards}
@keyframes fallline{0%{opacity:1;clip-path:inset(0 0 100% 0)}55%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes fallhead{from{transform:translateY(0)}to{transform:translateY(var(--h))}}
.pl-d{position:absolute;left:50%;top:50%;width:7%;height:7%;margin:-3.5% 0 0 -3.5%;border-radius:50%;background:#0a0a0e;opacity:0;transform:scale(.2);transition:opacity .3s,transform .4s var(--pop)}
.pl.on .pl-d{opacity:1;transform:none;transition-delay:.5s}
.pl.was .pl-d{opacity:.6;transform:scale(.6);background:var(--lc)}
.pl.on .pl-r{border-color:rgba(10,10,14,.5);animation:ripple 1.6s var(--eo) .55s infinite}
.lx-ev,.lx-res{display:flex;align-items:baseline;gap:12px;font-size:14px;color:var(--ink2)}
.lx-ev small{font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.lx-res{justify-content:center;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);opacity:0;transform:translateY(-6px);transition:opacity .5s var(--eo),transform .5s var(--eo)}
.lx-res i{width:6px;height:6px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 3px rgba(37,192,125,.18)}
.lx-stack.fin .lx-res{opacity:1;transform:none;transition-delay:.9s}
.lx-note{position:absolute;left:calc(50% + var(--W)*.2);max-width:calc(50% - var(--W)*.2);top:0;transform:translateY(-50%);z-index:40;white-space:normal!important;border-radius:12px!important;line-height:1.35;font-size:13px;font-weight:500;color:var(--ink);background:rgba(10,10,14,.86);border:1px solid color-mix(in srgb,var(--ac) 50%,var(--line2));border-radius:999px;padding:6px 12px;white-space:nowrap;box-shadow:0 12px 30px -12px rgba(0,0,0,.9);transition:top .7s var(--eo);pointer-events:none}
.lx-note.in{animation:notein .5s var(--eo) .6s both}
@keyframes notein{from{opacity:0;translate:-6px 0}to{opacity:1;translate:0 0}}
/* the list: numbered, with a timer line on the open item */
.lx-list{border-top:1px solid var(--line)}
.lx-it{position:relative;border-bottom:1px solid var(--line)}
.lx-it button{appearance:none;width:100%;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;gap:4px 12px;padding:22px 4px;background:none;border:0;color:var(--muted);font:inherit;text-align:left;cursor:pointer;transition:color .25s}
.lx-it button:hover{color:var(--ink2)}
.lx-it em{font-style:normal;font-family:"Geist Mono",monospace;font-size:11px;color:var(--faint);transition:color .3s}
.lx-it b{font-family:"Schibsted Grotesk",sans-serif;font-weight:500;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em}
.lx-it button span{grid-column:2;font-size:14px;color:var(--faint);max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--eo),opacity .3s}
.lx-it:not(.on) button:hover span{max-height:24px;opacity:1}
.lx-it.on button{color:var(--ink)}
.lx-it.on em{color:var(--lc)}
.lx-bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--eo)}
.lx-bd>div{overflow:hidden;min-height:0;padding-left:56px}
.lx-it.on .lx-bd{grid-template-rows:1fr}
.lx-bd p{font-size:16.5px;line-height:1.6;color:var(--ink2);max-width:46ch}
.lx-chips{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0 28px}
.lx-chips span{font-size:13.5px;color:var(--ink);border:1px solid color-mix(in srgb,var(--lc) 35%,var(--line2));border-radius:999px;padding:6px 14px}
.lx-bar{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--lc);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.lx-it.on .lx-bar{opacity:1;transform:scaleX(1);transition:none}
.lx-it.on.auto .lx-bar{animation:fill 3.2s linear forwards;transform:scaleX(0)}
@media (max-width:860px){
  .lx{padding:96px 20px}
  .lx-g{grid-template-columns:1fr;gap:40px}
  .lx-iso{--W:min(52vw,280px)}
  .lx-note{font-size:11.5px;left:calc(50% + 14px)}
}
/* ===== case studies v3: carousel ===== */
.cx{padding:140px 0 110px;border-top:1px solid var(--line);overflow:hidden}
.cx-top{max-width:1440px;margin:0 auto;padding:0 48px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.cx-top h2{font-size:clamp(36px,4.4vw,64px);letter-spacing:-.035em;line-height:1.02}
.cx-nav{display:flex;gap:12px}
.cx-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line2);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.cx-nav button:hover{border-color:var(--brand);color:var(--brand)}
.cx-nav svg{width:20px;height:20px}
.cx-vp{margin-top:48px;touch-action:pan-y}
.cx-track{display:flex;gap:28px;transition:transform .8s var(--eo);will-change:transform}
.cx-card{--t:var(--brand);flex:none;width:min(1060px,76vw);height:clamp(440px,62vh,580px);border-radius:22px;overflow:hidden;position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;padding:44px;background:radial-gradient(120% 90% at 100% 100%,color-mix(in srgb,var(--t) 38%,transparent),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--t) 20%,#101016),#0e0e13 70%);border:1px solid color-mix(in srgb,var(--t) 22%,var(--line));opacity:.38;transform:scale(.96);transition:opacity .6s var(--eo),transform .8s var(--eo);cursor:pointer;user-select:none}
.cx-card::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(to left,#000,transparent 70%);mask-image:linear-gradient(to left,#000,transparent 70%);pointer-events:none}
.cx-card.on{opacity:1;transform:none;cursor:default}
.cx-l{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0}
.cx-brand b{display:block;font-family:Syne,sans-serif;font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.cx-brand span{display:block;margin-top:6px;font-size:13.5px;color:var(--ink2)}
.cx-dots{max-width:1440px;margin:44px auto 0;padding:0 48px;display:flex;justify-content:center;gap:10px 40px;flex-wrap:wrap}
.cx-dots button{appearance:none;background:none;border:0;padding:0 0 10px;font-family:Syne,sans-serif;font-weight:600;font-size:18px;color:var(--faint);cursor:pointer;position:relative;transition:color .25s}
.cx-dots button::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--brand);transform:scale(0);transition:transform .35s var(--pop)}
.cx-dots button:hover{color:var(--ink2)}
.cx-dots button.on{color:var(--ink)}
.cx-dots button.on::after{transform:scale(1)}
@media (max-width:980px){
  .cx-card{grid-template-columns:1fr;height:auto;min-height:0;padding:28px;width:86vw;gap:28px}
}
@media (max-width:860px){
  .cx{padding:96px 0 80px}
  .cx-top{padding:0 20px}
  .cx-nav button{width:44px;height:44px}
  .cx-dots{padding:0 20px;gap:8px 20px}
  .cx-dots button{font-size:15px}
}
/* hero v5: lanes are the six agents, a relay passes down them */
.hz{--T:7s}
.hz-lanes i::before,.hz-lanes i::after{animation-duration:var(--T);animation-delay:calc(var(--n)*var(--T)/-6*-1 - var(--T))}
.hz-lanes i::after{background:linear-gradient(to bottom,transparent,rgba(255,90,46,.75))}
.hz-a h1{font-family:Syne,sans-serif;font-weight:700;letter-spacing:-.04em;line-height:.98;font-size:inherit;color:var(--ink);margin:0}
.hz-a{font-size:clamp(40px,min(8vw,11.5vh),128px)}
.hz-sub{font-size:clamp(15px,1.25vw,18px);line-height:1.55;color:var(--muted);max-width:40ch;margin-top:clamp(16px,2.6vh,28px);letter-spacing:0;font-family:"Schibsted Grotesk",sans-serif;font-weight:400}
.hz-lab{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line)}
.hz-lab span{padding:18px 0 22px 20px;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
@media (max-width:860px){
  .hz-lab{grid-template-columns:repeat(3,1fr)}
  .hz-lab span:nth-child(n+4){display:none}
  .hz-lab span{padding-left:12px}
}
.lx-chips span{white-space:nowrap}
/* case cards: artefact per industry, alternating sides */
.cx-card.flip{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.cx-card.flip .cx-art{order:-1}
.cx-card.flip::after{-webkit-mask-image:linear-gradient(to right,#000,transparent 70%);mask-image:linear-gradient(to right,#000,transparent 70%)}
.cx-card.flip{background:radial-gradient(120% 90% at 0% 100%,color-mix(in srgb,var(--t) 38%,transparent),transparent 60%),linear-gradient(200deg,color-mix(in srgb,var(--t) 20%,#101016),#0e0e13 70%)}
.cx-art{position:relative;z-index:1;align-self:center;min-width:0}
.ax{border-radius:18px;background:rgba(10,10,14,.74);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow);padding:0 0 16px;overflow:hidden}
.ax-h{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;white-space:nowrap}
.ax-h em{font-style:normal;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.08em;color:var(--t);font-weight:500}
.ax-ok{margin:14px 18px 0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--wa);opacity:0;transition:opacity .5s var(--eo)}
.ax-ok::before{content:"";width:9px;height:5px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.cx-card.on .ax-ok{opacity:1;transition-delay:2.6s}
/* route */
.ax-map{display:block;width:100%;height:auto;padding:14px 18px 0;color:rgba(255,255,255,.2)}
.ax-map circle{fill:var(--t)}
.rt-done{stroke:var(--t);stroke-dasharray:100;stroke-dashoffset:100}
.cx-card.on .rt-done{transition:stroke-dashoffset 2.4s var(--eo) .4s;stroke-dashoffset:38}
.ax-tl{padding:10px 18px 0;display:grid;gap:8px}
.ax-tl p{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.ax-tl p::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--dotoff);flex:none}
.ax-tl p.d{color:var(--ink)}
.cx-card.on .ax-tl p.d::before{background:var(--t);border-color:var(--t);transition:background .3s 1s}
@media (max-width:980px){
  .cx-card.flip{grid-template-columns:1fr}
  .cx-card.flip .cx-art{order:0}
  .cx-art{max-width:460px}
}
/* layers: static, colour by default, click to open */
.pl .pl-f{border-color:color-mix(in srgb,var(--lc) 55%,transparent);background:color-mix(in srgb,var(--lc) 6%,var(--bg0))}
.pl .pl-f span{color:var(--lc)}
.pl:hover .pl-f{border-color:var(--lc)}
.pl.on .pl-f{background:var(--lc);border-color:var(--lc)}
.pl.on .pl-f span{color:#0a0a0e}
.lx-stack .lx-res{display:none}
.lx-fall.go{animation:fallline 1.1s var(--eo) forwards}
.lx-fall.go b{animation:fallhead .65s cubic-bezier(.55,0,.8,.4) forwards,fallfade 1.1s linear forwards}
@keyframes fallfade{0%,70%{opacity:1}100%{opacity:0}}
.pl.was .pl-d{opacity:0!important}
.lx-stack.man .lx-ev,.lx-stack.man .lx-note,.lx-stack.man .lx-res,.lx-stack.man .lx-fall{display:none!important}
.lx-stack.man .pl.was .pl-f{border-color:color-mix(in srgb,var(--lc) 55%,transparent);background:color-mix(in srgb,var(--lc) 6%,var(--bg0))}
/* ---- from v3.css ---- */
/* Automate v3: manifesto, three jobs, a day handled */
body::after{opacity:.055}
/* manifesto: static, sized to fit; the strike draws once */
.mf{background:var(--brand);color:#0a0a0e;padding:clamp(80px,14vh,160px) 48px 40px}
.mf-in{max-width:1440px;margin:0 auto}
.mf-t{font-family:Syne,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;font-size:clamp(28px,calc((100vw - 96px)*.061),132px);color:#0a0a0e;margin:0}
.mf-t span{white-space:nowrap}
.mf-t span{display:block;opacity:0;transform:translateY(.25em);transition:opacity .8s var(--eo),transform .9s var(--eo)}
.mf-t .l2{transition-delay:.15s}
.mf.in .mf-t span{opacity:1;transform:none}
.mf-t s{position:relative;text-decoration:none;display:inline-block}
.mf-t s::after{content:"";position:absolute;left:-.04em;right:-.04em;top:52%;height:.09em;background:#0a0a0e;transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.7,0,.2,1) .9s}
.mf.in .mf-t s::after{transform:scaleX(1)}
.mf-foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(56px,9vh,110px);padding-top:22px;border-top:1px solid rgba(10,10,14,.3);font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#0a0a0e}
.mf-foot span{white-space:nowrap}
.mf ::selection{background:#0a0a0e;color:var(--brand)}
@media (max-width:860px){
  .mf{padding:80px 20px 32px}
  .mf-t{font-size:calc((100vw - 40px)*.061)}
  .mf-foot{justify-content:flex-start;gap:10px 24px}
}
@media (prefers-reduced-motion:reduce){
  .mf-t span{opacity:1;transform:none}
  .mf-t s::after{transform:scaleX(1);transition:none}
}
/* three jobs */
.jb{padding:140px 48px;border-top:1px solid var(--line)}
.jb-top,.jb-g{max-width:1440px;margin:0 auto}
.jb-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.jb-top h2{font-size:clamp(36px,4.4vw,64px);letter-spacing:-.035em;line-height:1.02}
.jb-top p{font-size:17px;color:var(--muted);max-width:30ch;text-align:right}
.jb-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.jb-c{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:30px 30px 26px;display:flex;flex-direction:column;min-width:0;transition:border-color .3s,transform .5s var(--eo)}
.jb-c:hover{border-color:var(--line2);transform:translateY(-3px)}
.jb-t{display:flex;align-items:center;gap:10px;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.jb-t i{width:7px;height:7px;border-radius:50%;background:var(--lc);box-shadow:0 0 12px var(--lc)}
.jb-c h3{font-family:"Schibsted Grotesk",sans-serif;font-weight:500;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.02em;margin:16px 0 26px}
.jb-v{margin-top:auto;height:220px;border-radius:14px;background:var(--sunken);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;position:relative}
/* v1: channels converge */
.jv1{width:100%;height:100%;padding:10px}
.jv1 path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.2;stroke-dasharray:3 4}
.jv1 .jch rect{fill:var(--panel2);stroke:var(--line2)}
.jv1 .jch text{fill:var(--ink);font:500 11.5px "Schibsted Grotesk",sans-serif;text-anchor:middle}
.jv1 .mv{fill:var(--brand);filter:drop-shadow(0 0 5px var(--brand))}
.jv1 .core{fill:var(--brand)}
.jv1 .ring{fill:none;stroke:var(--brand);stroke-width:1.2;transform-origin:266px 95px;animation:jring 2.4s var(--eo) infinite}
@keyframes jring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.35);opacity:0}}
/* v2: invoice gets approved */
.jv2{--T:5s;display:grid;grid-template-columns:150px auto;gap:22px;align-items:center}
.doc{position:relative;width:150px;height:176px;border-radius:10px;background:#f1eee6;color:#16161b;padding:14px 14px 0;box-shadow:0 20px 40px -20px rgba(0,0,0,.9);transform:rotate(-3deg)}
.doc-h b{display:block;font-size:13px;font-weight:700}
.doc-h span{font-size:10.5px;color:#6b6860}
.doc>i{display:block;height:5px;border-radius:3px;background:#d9d4c8;margin-top:10px}
.doc>i:first-of-type{margin-top:16px}
.doc>i.s{width:60%}
.doc-a{position:absolute;left:14px;bottom:14px;font-family:"Geist Mono",monospace;font-size:13px;font-weight:600}
.stamp{position:absolute;right:-14px;top:62px;font-family:"Geist Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1f9d63;border:2px solid #1f9d63;border-radius:6px;padding:5px 9px;transform:rotate(-14deg) scale(1.6);opacity:0;animation:stamp var(--T) var(--eo) infinite}
@keyframes stamp{0%,62%{opacity:0;transform:rotate(-14deg) scale(1.6)}68%,94%{opacity:1;transform:rotate(-14deg) scale(1)}100%{opacity:0;transform:rotate(-14deg) scale(1)}}
.chk{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.chk li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);white-space:nowrap;animation:chk var(--T) linear infinite}
.chk li::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--dotoff);box-sizing:border-box;flex:none;animation:chkd var(--T) linear infinite;animation-delay:inherit}
.chk li:nth-child(1){animation-delay:calc(var(--T)*-.9)}
.chk li:nth-child(2){animation-delay:calc(var(--T)*-.75)}
.chk li:nth-child(3){animation-delay:calc(var(--T)*-.6)}
.chk li:nth-child(4){animation-delay:calc(var(--T)*-.45)}
@keyframes chk{0%,24%{color:var(--muted)}25%,94%{color:var(--ink)}95%,100%{color:var(--muted)}}
@keyframes chkd{0%,24%{background:transparent;border-color:var(--dotoff)}25%,94%{background:var(--wa);border-color:var(--wa)}95%,100%{background:transparent;border-color:var(--dotoff)}}
/* v3: stack tiles light in turn */
.jv3{display:grid;grid-template-columns:repeat(3,76px);grid-auto-rows:48px;gap:8px}
.jv3 span,.jv3 b{display:grid;place-items:center;border-radius:10px;font-size:12px;font-weight:500;color:var(--muted);border:1px solid var(--line);background:var(--panel2);animation:tile 4s var(--eo) infinite;animation-delay:calc(var(--o)*.5s)}
.jv3 b{animation:none;background:var(--brand);border-color:var(--brand);color:#0a0a0e;font-family:Syne,sans-serif;font-size:18px;font-weight:800;box-shadow:0 0 30px -6px var(--brand)}
@keyframes tile{0%,4%{color:var(--muted);border-color:var(--line);background:var(--panel2)}10%,30%{color:var(--ink);border-color:#8fd4ff;background:rgba(143,212,255,.1)}45%,100%{color:var(--ink2);border-color:var(--line2);background:var(--panel2)}}
/* a day, handled */
.dy{background:#ebe7de;color:#131318;padding:140px 48px 150px}
.dy figure{margin:0;opacity:0;transform:translateY(24px);transition:opacity .8s var(--eo),transform .9s var(--eo)}
.dy figure.in{opacity:1;transform:none}
.dy figure:nth-child(2){transition-delay:.12s}
.dy figure:nth-child(3){transition-delay:.24s}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+")}
.dy figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline;padding-top:18px}
.dy time{font-family:"Geist Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.06em;color:#c9401b}
.dy figcaption span{font-size:17px;line-height:1.35;color:#131318;letter-spacing:-.01em}
.dy ::selection{background:#131318;color:#ebe7de}
@media (max-width:980px){
  .jb-g{grid-template-columns:1fr}
  .jb-v{height:200px}
}
@media (max-width:860px){
  .jb,.dy{padding:96px 20px}
  .jb-top{flex-direction:column;align-items:flex-start}
  .jb-top p{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .stamp,.chk li,.chk li::before,.jv3 span,.jv1 .ring{animation:none}
  .stamp{opacity:1;transform:rotate(-14deg)}
}
.cx-scope{display:inline-block;white-space:nowrap;font-style:normal;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#0a0a0e;background:var(--t);border-radius:999px;padding:4px 10px;margin-bottom:14px}
/* case cards v4: one number, one line, the picture does the rest */
.cx-card,.cx-card.flip{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:48px;padding:48px}
.cx-card.flip{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.cx-brand b{font-size:clamp(28px,2.4vw,36px);letter-spacing:-.03em}
.cx-brand span{font-size:13px;color:var(--ink2);margin-top:4px}
.cx-art{justify-self:stretch}
.cx-art .ax{max-width:520px;margin:0 auto}
.cx-card.flip .cx-art .ax{margin-left:0}
@media (max-width:980px){
  .cx-card,.cx-card.flip{grid-template-columns:1fr;padding:28px;gap:28px}
  .cx-card.flip .cx-art{order:0}
}
/* serious-case artefacts */
.ax-steps{list-style:none;margin:0;padding:10px 18px 0;display:grid;gap:2px}
.ax-steps li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line);transition:color .4s}
.ax-steps li:last-child{border-bottom:0}
.ax-steps li i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--dotoff);box-sizing:border-box;transition:background .3s,border-color .3s}
.ax-steps time{font-family:"Geist Mono",monospace;font-size:11px;color:var(--label)}
.cx-card.on .ax-steps li{color:var(--ink);transition-delay:calc(.4s + var(--o)*.4s)}
.cx-card.on .ax-steps li i{background:var(--t);border-color:var(--t);transition-delay:calc(.4s + var(--o)*.4s)}
.cx-card.on .ax-steps li:last-child{color:var(--wa)}
.cx-card.on .ax-steps li:last-child i{background:var(--wa);border-color:var(--wa)}
.ax-fn{position:relative;margin:10px 18px 0;height:34px;border-radius:8px;background:rgba(255,255,255,.04);display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:13px;color:var(--ink2);overflow:hidden}
.ax-fn i{position:absolute;inset:0 auto 0 0;width:var(--w);background:color-mix(in srgb,var(--t) 30%,transparent);border-right:2px solid var(--t);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--eo)}
.ax-fn span,.ax-fn b{position:relative;z-index:1}
.ax-fn b{font-family:"Geist Mono",monospace;font-size:12.5px;color:var(--ink)}
.cx-card.on .ax-fn i{transform:none;transition-delay:calc(.3s + var(--o)*.25s)}
.ax-kp{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px 0}
.ax-kp b{display:block;font-family:Syne,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.02em}
.ax-kp span{font-size:12px;color:var(--muted)}
.ax-prog{margin:16px 18px 0}
.ax-prog i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.ax-prog i::after{content:"";position:absolute;inset:0;width:82%;background:var(--t);border-radius:4px;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--eo)}
.cx-card.on .ax-prog i::after{transform:none;transition-delay:.4s}
.ax-prog span{display:block;margin-top:8px;font-size:12.5px;color:var(--ink2)}
.ax-pay{list-style:none;margin:10px 0 0;padding:0 18px;display:grid}
.ax-pay li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:13px;color:var(--ink2);opacity:0;transform:translateY(6px);transition:opacity .4s var(--eo),transform .4s var(--eo)}
.ax-pay b{font-family:"Geist Mono",monospace;font-size:12px;color:var(--ink);font-weight:500}
.ax-pay em{font-style:normal;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#ffb27a;white-space:nowrap}
.ax-pay em.ok{color:var(--wa)}
.cx-card.on .ax-pay li{opacity:1;transform:none;transition-delay:calc(1.2s + var(--o)*.3s)}
.ax-chart{display:block;width:100%;height:auto;padding:12px 14px 0}
.ax-chart path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ax-base{stroke:rgba(255,255,255,.35)}
.ax-sp{stroke:#ff5a4e;stroke-dasharray:100;stroke-dashoffset:100}
.ax-fl{stroke:var(--wa);stroke-dasharray:100;stroke-dashoffset:100}
.ax-mk{stroke:rgba(255,255,255,.25);stroke-dasharray:3 3;opacity:0}
.cx-card.on .ax-sp{transition:stroke-dashoffset .6s ease-in .5s;stroke-dashoffset:0}
.cx-card.on .ax-fl{transition:stroke-dashoffset .9s var(--eo) 1.3s;stroke-dashoffset:0}
.cx-card.on .ax-mk{opacity:1;transition:opacity .3s 1.2s}
.ax-tag{margin:10px 18px 0;font-size:13px;color:var(--ink2);opacity:0;transition:opacity .4s 1.3s}
.ax-tag b{font-family:"Geist Mono",monospace;color:#ff8a66;margin-right:8px}
.cx-card.on .ax-tag{opacity:1}
.ax-route .rt-done{stroke:var(--t);stroke-dasharray:100;stroke-dashoffset:100}
.cx-card.on .ax-route .rt-done{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--eo) .3s}
.rt-rep{stroke:var(--wa);stroke-dasharray:100;stroke-dashoffset:100}
.cx-card.on .rt-rep{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--eo) 1.2s}
.ax-map .rep{fill:var(--wa)}
.ax-map .brk circle{fill:#ff5a4e}
.ax-map .brk path{stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.ax-route .ax-tl p{opacity:.3;transition:opacity .4s}
.ax-route .ax-tl time{font-family:"Geist Mono",monospace;font-size:11px;color:var(--t);min-width:40px}
.ax-route .ax-tl p::before{display:none}
.cx-card.on .ax-route .ax-tl p{opacity:1;color:var(--ink);transition-delay:calc(.5s + var(--o)*.45s)}
.cx-card.on .ax-ok{transition-delay:2.4s}
/* audit fixes */
.ax-fn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-right:10px}
.ax-route .rt-done{stroke:rgba(255,255,255,.55)!important}
.ax-spike .ax-chart{padding-bottom:4px}
.try{display:none}
/* a day, handled: grainy colour-field scenes */
.dy figcaption time{font-size:13px}
@media (max-width:980px){
  .dy figcaption{grid-template-columns:1fr;gap:6px}
  .dy figcaption span{font-size:15px}
}
/* full-bleed statement */
.pvx,.end{position:relative;height:100vh;height:100dvh;min-height:640px;overflow:hidden;background:#0c0c10;isolation:isolate}
.pvx-media,.end-media{position:absolute;inset:-6% 0;z-index:-2;will-change:transform}
.pvx-media image-slot,.end-media image-slot{position:absolute;inset:0}
.pvx-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(8,8,12,.86) 0%,rgba(8,8,12,.35) 38%,rgba(8,8,12,0) 60%),linear-gradient(to bottom,rgba(8,8,12,.55),transparent 22%)}
.pvx-copy{position:absolute;left:0;right:0;bottom:0;max-width:1440px;margin:0 auto;padding:0 48px clamp(56px,9vh,96px);pointer-events:none}
.pvx-k{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,242,236,.7);margin-bottom:22px}
.pvx h2,.end h2{font-family:"Schibsted Grotesk",sans-serif;font-weight:500;letter-spacing:-.045em;line-height:.96;font-size:clamp(48px,7.4vw,128px);color:#f4f2ec}
.pvx h2,.pvx-k,.end h2,.end .cta{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--eo),transform 1.2s var(--eo)}
.pvx.in h2,.pvx.in .pvx-k,.end.in h2,.end.in .cta{opacity:1;transform:none}
.pvx.in h2{transition-delay:.12s}
.end.in .cta{transition-delay:.25s}
/* a day: three frames, edge to edge */
.tr3{padding:150px 0 0;border-top:1px solid var(--line);background:var(--bg0)}
.tr3-top{max-width:1440px;margin:0 auto;padding:0 48px 56px}
.tr3-top h2{font-family:"Schibsted Grotesk",sans-serif;font-weight:500;font-size:clamp(40px,5vw,80px);letter-spacing:-.045em;line-height:1}
.tr3-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--bg0)}
.tr3 figure{position:relative;margin:0;height:min(88vh,860px);min-height:520px;overflow:hidden;background:#141418}
.tr3 figure image-slot{position:absolute;inset:0}
.tr3 figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(8,8,12,.82),rgba(8,8,12,0) 45%)}
.tr3 figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 32px 36px;pointer-events:none;color:#f4f2ec}
.tr3 time{display:block;font-family:"Schibsted Grotesk",sans-serif;font-weight:500;font-size:clamp(56px,6vw,104px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.tr3 figcaption span{display:block;margin-top:14px;font-size:16px;line-height:1.45;color:rgba(244,242,236,.82)}
.tr3 figure time,.tr3 figure figcaption span{opacity:0;transform:translateY(18px);transition:opacity 1s var(--eo),transform 1.1s var(--eo)}
.tr3 figure.in time,.tr3 figure.in figcaption span{opacity:1;transform:none}
.tr3 figure.in figcaption span{transition-delay:.15s}
.tr3 figure:nth-child(2).in time{transition-delay:.15s}
.tr3 figure:nth-child(3).in time{transition-delay:.3s}
/* close */
.end-copy{position:absolute;left:0;right:0;bottom:0;max-width:1440px;margin:0 auto;padding:0 48px clamp(56px,10vh,110px);display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;pointer-events:none}
.end .cta{pointer-events:auto;margin:0}
@media (max-width:980px){
  .tr3-g{grid-template-columns:1fr}
  .tr3 figure{height:70vh;min-height:420px}
}
@media (max-width:860px){
  .pvx-copy,.end-copy,.tr3-top{padding-left:20px;padding-right:20px}
  .tr3{padding-top:96px}
  .tr3 figcaption{padding:0 20px 28px}
}
/* ===== drawn scenes (scenes.js) in place of photographs ===== */
canvas.scn{position:absolute;inset:0;width:100%;height:100%;display:block}
/* a day: the 24-hour rail, and what each frame handled */
.tr3-rail{position:relative;margin-top:48px;height:44px;max-width:1440px}
.tr3-line{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line2)}
.tr3-line i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,90,46,.15),var(--brand));transform:scaleX(0);transform-origin:0 50%;transition:transform 2.4s cubic-bezier(.6,0,.2,1) .2s}
.tr3-rail.in .tr3-line i{transform:scaleX(.7778)}
.tr3-rail b{position:absolute;left:var(--at);top:5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--bg0);border:1.5px solid var(--line2);transition:background .4s,border-color .4s,box-shadow .4s}
.tr3-rail.in b{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 5px rgba(255,90,46,.14)}
.tr3-rail.in b:nth-of-type(1){transition-delay:.45s}
.tr3-rail.in b:nth-of-type(2){transition-delay:.95s}
.tr3-rail.in b:nth-of-type(3){transition-delay:2.3s}
.tr3-rail b em{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);font-style:normal;font-family:"Geist Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--ink2);white-space:nowrap}
.tr3-rail span{position:absolute;left:var(--at);top:22px;transform:translateX(-50%);font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.12em;color:var(--faint)}
.tr3-rail span:first-of-type{transform:none}
.tr3-rail span:last-of-type{transform:translateX(-100%)}
.tr3-k{position:absolute;left:32px;top:30px;z-index:2;display:flex;align-items:center;gap:9px;font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,236,.82);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.tr3-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)}
.tr3 figure::before{content:"";position:absolute;inset:0 0 auto;height:120px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(8,8,12,.45),transparent)}
@media (max-width:860px){
  .tr3-rail{margin-top:36px}
  .tr3-k{left:20px;top:22px}
}
@media (prefers-reduced-motion:reduce){
  .tr3-line i,.tr3-rail b{transition:none}
}
/* the close: the hero's six lanes again, so the page ends where it began */
.end{--T:7s;background:#09090d}
.end .end-lanes{z-index:0}
.end .end-lanes i{border-left-color:rgba(255,255,255,.06)}
.end-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 60% at 50% 118%,rgba(255,90,46,.30),rgba(255,90,46,.08) 45%,transparent 72%),linear-gradient(to bottom,#09090d 0%,transparent 30%)}
.end-copy{z-index:1}
.end h2{font-family:Syne,sans-serif;font-weight:700;letter-spacing:-.04em}
.end{height:auto;min-height:0;padding:clamp(150px,26vh,250px) 0 clamp(130px,22vh,210px);display:flex}
.end .end-lanes i{border-left-color:rgba(255,255,255,.085)}
.end-glow{background:radial-gradient(60% 70% at 50% 120%,rgba(255,90,46,.42),rgba(255,90,46,.1) 46%,transparent 74%),linear-gradient(to bottom,#09090d 0%,rgba(9,9,13,0) 35%)}
.end-copy{position:relative;inset:auto;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(30px,4.5vh,48px);padding:0 24px;width:100%}
.end h2{font-size:clamp(46px,8.4vw,140px);line-height:.94}
.end .cta{justify-content:center}
/* ===== premium pass (27 Sept): headline + visual heroes, light calm bands, regular-weight type ===== */
:root{--paper:#f4f1ea;--paper-ink:#141418;--paper-mute:#6a665e;--paper-soft:#857f73;--paper-line:rgba(20,20,24,.13)}
/* hero: the drawn lanes, the headline, nothing else */
.hz{background:#0b0c0f}
.hz .hz-lanes{display:none}
.hz-a h1,.hz-b h2{font-family:"Schibsted Grotesk",sans-serif;font-weight:500;letter-spacing:-.055em;line-height:.94;color:#f4f2ec}
.hz-a,.hz-b h2{font-size:clamp(46px,min(8.6vw,13vh),150px)}
.hz-b h2{color:#f4f2ec}
.hz-lab{z-index:2;background:linear-gradient(to top,rgba(8,8,11,.7),rgba(8,8,11,0));border-top-color:rgba(255,255,255,.08)}
.hz-lab span{color:rgba(244,242,236,.62)}
/* the same calm type everywhere a section opens */
.jb-top h2,.cx-top h2,.lx-h,.tr3-top h2,.end h2,.tb-h{font-family:"Schibsted Grotesk",sans-serif;font-weight:500;letter-spacing:-.045em;line-height:1}
.jb-top h2,.cx-top h2,.lx-h{font-size:clamp(40px,4.8vw,76px)}
/* light bands */
.lt{background:var(--paper);color:var(--paper-ink);border-top:0!important}
.lt ::selection{background:var(--paper-ink);color:var(--paper)}
.tb-in{max-width:1440px;margin:0 auto}
.tb-h{font-size:clamp(42px,5vw,84px);color:var(--paper-ink);margin:0}
.tb-h span{color:var(--paper-soft)}
.tb{padding:clamp(110px,16vh,170px) 48px}
@media (max-width:860px){
  .tb{padding:96px 20px}
}
/* the nav over a light band */
.nav.on-lt{background:rgba(244,241,234,.86);border-bottom-color:rgba(20,20,24,.1);color:#141418}
.nav.on-lt .logo,.nav.on-lt .links a{color:#141418}
.nav.on-lt .links a{opacity:.72}
.nav.on-lt .links a:hover,.nav.on-lt .links a.on{opacity:1}
/* the three jobs on paper: dark cards on a light band */
.jb.lt .jb-top h2{color:var(--paper-ink)}
.jb.lt .jb-top p{color:var(--paper-mute)}
.jb.lt .jb-c{background:#111116;border-color:#111116;color:#f4f2ec;box-shadow:0 30px 60px -40px rgba(20,20,24,.45)}
.jb.lt .jb-c:hover{border-color:#26262e}
/* case cards: the same calm type as the rest of the page */
.cx-brand b{font-family:"Schibsted Grotesk",sans-serif;font-weight:500;letter-spacing:-.035em}
/* ===== Altrnative's own language: six lanes, ember as signal light, Syne at a calm weight ===== */
.k6{display:flex;align-items:center;gap:12px;margin-bottom:26px;font-family:"Geist Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.k6 i{width:22px;height:1.5px;background:var(--brand);flex:none}
.lt .k6{color:var(--paper-mute)}
.hz-a h1,.hz-b h2,.jb-top h2,.cx-top h2,.lx-h,.tr3-top h2,.end h2,.tb-h,.pvx h2{font-family:Syne,sans-serif;font-weight:500;letter-spacing:-.045em;line-height:.98}
.hz-a,.hz-b h2{font-size:clamp(44px,min(7.4vw,12vh),132px)}
/* every light band carries the six lanes, faintly, aligned with the hero's */
.lt{position:relative;isolation:isolate}
.lt::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,rgba(20,20,24,.075) 0 12px,transparent 12px 26px),repeating-linear-gradient(to bottom,rgba(20,20,24,.075) 0 12px,transparent 12px 26px),repeating-linear-gradient(to bottom,rgba(20,20,24,.075) 0 12px,transparent 12px 26px),repeating-linear-gradient(to bottom,rgba(20,20,24,.075) 0 12px,transparent 12px 26px),repeating-linear-gradient(to bottom,rgba(20,20,24,.075) 0 12px,transparent 12px 26px);
  background-size:1px 100%;background-repeat:no-repeat;background-position:16.666% 0,33.333% 0,50% 0,66.666% 0,83.333% 0}
@media (max-width:860px){
  .lt::before{background-position:33.333% 0,66.666% 0,-10px 0,-10px 0,-10px 0}
}
.mf-foot b{font-family:Syne,sans-serif;font-weight:800;font-size:15px;letter-spacing:-.01em;margin-right:6px}
/* ===== case cards: a sentence, three outcomes, the agents that ran it ===== */
.cx-brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cx-brand .cx-scope{margin:0}
.cx-brand span{margin:0;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.cx-say{margin:26px 0 0;font-family:Syne,sans-serif;font-weight:500;font-size:clamp(28px,2.6vw,42px);letter-spacing:-.04em;line-height:1.06;color:var(--ink);max-width:17ch}
.cx-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:auto;padding-top:28px}
.cx-kpi div{border-top:1px solid rgba(255,255,255,.16);padding-top:12px}
.cx-kpi b{display:block;font-family:Syne,sans-serif;font-weight:500;font-size:clamp(22px,2vw,32px);letter-spacing:-.035em;line-height:1;color:var(--ink)}
.cx-kpi span{display:block;margin-top:6px;font-size:12.5px;line-height:1.35;color:var(--ink2)}
.cx-say,.cx-kpi div{opacity:0;transform:translateY(12px);transition:opacity .6s var(--eo),transform .7s var(--eo)}
.cx-card.on .cx-say{opacity:1;transform:none;transition-delay:.2s}
.cx-card.on .cx-kpi div{opacity:1;transform:none;transition-delay:calc(.35s + var(--o)*.1s)}
@media (max-width:980px){
  .cx-say{max-width:none}
  .cx-kpi{gap:12px}
  .cx-kpi b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .cx-say,.cx-kpi div{opacity:1;transform:none;transition:none}
}
/* ===== launch and control: a four-step track, then six controls in the page's six lanes ===== */
@media (min-width:981px){
  .cx-card,.cx-card.flip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.cx-say{font-size:clamp(26px,2.4vw,38px)}
.tb{padding:clamp(110px,16vh,170px) 0 0}
.tb-in{padding:0 48px}
@media (max-width:860px){
  .tb{padding-top:96px}
  .tb-in{padding:0 20px}
}
/* the six names, each with its beam's colour */
.hz-lab span{display:flex;align-items:center;justify-content:center;gap:9px}
.hz-lab span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lc);box-shadow:0 0 10px var(--lc);flex:none}
@media (max-width:860px){
  .hz-lab{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:10px;padding:14px 12px 16px}
  .hz-lab span{display:flex!important;justify-content:flex-start;font-size:9.5px;letter-spacing:.1em}
}
@media (min-width:861px){
  .hz-lab span{padding:18px 8px 22px}
}
/* ===== launch and control, as two pictures ===== */
.tb{padding:clamp(110px,16vh,170px) 48px clamp(110px,16vh,170px)}
.tb-in{padding:0;max-width:1440px}
.tb-cards{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;margin-top:clamp(48px,7vh,72px)}
.tbc{background:#111116;color:#f4f2ec;border-radius:22px;padding:34px 34px 36px;box-shadow:0 40px 80px -50px rgba(20,20,24,.55);min-width:0}
.tbc-k{font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,242,236,.6)}
.tbc h3{margin:12px 0 0;font-family:Syne,sans-serif;font-weight:500;font-size:clamp(28px,2.6vw,40px);letter-spacing:-.04em;line-height:1.02;color:#f4f2ec}
/* the week */
.wk{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(58px,auto);row-gap:10px;margin-top:34px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:20% 100%}
.wk-h{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-height:0;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.wk-h span{padding-left:12px;font-family:"Geist Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,236,.55)}
.wk-b{position:relative;margin:0 6px;padding:11px 14px;border-radius:10px;background:color-mix(in srgb,var(--c) 14%,#16161c);border:1px solid color-mix(in srgb,var(--c) 38%,transparent);
  transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:transform .7s var(--eo),opacity .4s;transition-delay:calc(.2s + var(--o)*.35s);min-width:0}
.wk-b b{display:block;font-size:14px;font-weight:600;color:#f4f2ec;white-space:nowrap}
.wk-b em{display:block;margin-top:3px;font-style:normal;font-size:12px;color:rgba(244,242,236,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-b.live b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 var(--c);vertical-align:middle;animation:livep 1.8s ease-out infinite}
@keyframes livep{0%{box-shadow:0 0 0 0 color-mix(in srgb,#25c07d 60%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.tb-cards.in .wk-b{transform:none;opacity:1}
/* the controls */
.ctl{list-style:none;margin:30px 0 0;padding:0}
.ctl li{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-top:1px solid rgba(255,255,255,.08);font-size:15px;color:#f4f2ec}
.ctl li:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.ctl em{font-style:normal;font-family:"Geist Mono",monospace;font-size:13px;color:#ff8a66;margin-left:6px}
.sw{position:relative;flex:none;width:38px;height:22px;border-radius:11px;background:rgba(255,255,255,.12);transition:background .35s;transition-delay:calc(.3s + var(--o)*.16s)}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#f4f2ec;transition:transform .35s var(--eo);transition-delay:calc(.3s + var(--o)*.16s)}
.tb-cards.in .sw{background:var(--brand)}
.tb-cards.in .sw::after{transform:translateX(16px)}
/* side by side on every desktop width; the week tightens instead of stacking */
@media (max-width:1180px){
  .tb-cards{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:16px}
  .tbc{padding:28px 24px 30px}
  .wk-b{margin:0 3px;padding:9px 10px}
  .wk-b b{font-size:13px}
  .wk-b em{font-size:11px}
  .wk-h span{padding-left:8px}
  .ctl li{font-size:14px;gap:12px}
}
@media (max-width:980px){
  .wk-b b{font-size:12px}
  .wk-b{padding:8px 8px}
  .wk-h span{font-size:9.5px;letter-spacing:.1em}
}
@media (max-width:860px){
  .tb-cards{grid-template-columns:1fr}
}
@media (max-width:860px){
  .tb{padding:96px 20px}
  .tbc{padding:26px 20px 28px;border-radius:18px}
  .wk-b{margin:0 3px;padding:9px 9px}
  .wk-b em{display:none}
  .wk-b b{font-size:12.5px}
  .wk-h span{padding-left:6px;font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){
  .wk-b{transform:none;opacity:1;transition:none}
  .sw,.sw::after{transition:none}
  .wk-b.live b::after{animation:none}
}
.wk-b em{white-space:normal;overflow:visible;line-height:1.35}
/* the hero's third line (a scene can carry one): readable over a picture */
.hz .hz-sub{color:rgba(244,242,236,.86);text-shadow:0 1px 16px rgba(5,5,6,.95);max-width:44ch}
/* a hero whose picture owns the right side: both lines stack on the left */
.hz.hz-left .hz-b{justify-self:start;text-align:left;align-items:flex-start}
/* the hero as a photograph in daylight (2 Oct): ink on the bare wall, paper on the paint */
.hz-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.hz.hz-day{background:#e9e3d8}
.hz.hz-day.lt::before{display:none}
/* a touch smaller than on the drawn heroes, so the closing line sits below the painters */
.hz.hz-day .hz-a,.hz.hz-day .hz-b h2{font-size:clamp(42px,min(6.6vw,10.6vh),120px)}
.hz.hz-day .hz-a h1{color:#16171b}
.hz.hz-day .hz-sub{color:rgba(22,23,27,.76);text-shadow:none;max-width:42ch}
.hz.hz-day .hz-b h2{color:#fff8f1}
.hz.hz-day .hz-lab{background:none;border-top-color:rgba(255,255,255,.28)}
.hz.hz-day .hz-lab span{color:rgba(28,10,4,.88);font-weight:500}
.hz.hz-day .hz-lab span::before{background:#fff8f1;box-shadow:none}
/* the Mumbai band (3 Oct): the words are about us (why a job is fast here); the picture is only the setting */
.pvx h2{font-size:clamp(42px,min(5.6vw,9.2vh),104px)}
.pvx-copy{padding-bottom:clamp(30px,6vh,68px)}
.pvx-k{margin-bottom:clamp(12px,1.8vh,18px)}
@media (max-height:800px){
  .pvx-copy{padding-bottom:30px}
  .pvx-sub{margin-top:12px}
}
.pvx-sub{margin:clamp(16px,2.6vh,26px) 0 0;max-width:41em;font-size:clamp(16px,1.35vw,21px);line-height:1.45;color:rgba(244,242,236,.84);text-shadow:0 1px 18px rgba(8,8,12,.7);opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--eo) .22s,transform 1.2s var(--eo) .22s}
.pvx.in .pvx-sub{opacity:1;transform:none}
@media (max-width:520px){
  .pvx h2{font-size:min(42px,10.2vw)}
}
@media (prefers-reduced-motion:reduce){
  .pvx-sub{opacity:1;transform:none;transition:none}
}
/* ---- from monday.css ---- */
/* ===== /automate hero "Monday" (3 Oct) =====
   One picture. The lower half of the screen is four days (Monday 09:14 to Friday 09:14) as a field of colour rising
   out of the page: blue for the days, navy for the nights. A dotted trail wanders across it, "the usual way":
   Any update? Gentle reminder. Quote attached, on Friday. At the left, on Monday morning, one white card:
   the same request, answered in three minutes, with what the agents did in between.
   Nothing else on the screen. Earlier heroes are kept, not served: docs/design/automate-heroes/. */
.mo{position:relative;min-height:max(100vh,680px);min-height:max(100dvh,680px);overflow:hidden;display:flex;flex-direction:column;--pad:clamp(84px,10vh,124px)}
.mo.lt::before{display:none}
/* the words, centred, and nothing beside them */
.mo-in{position:relative;z-index:2;flex:none;padding:var(--pad) 48px 0;text-align:center}
.mo-in .k6{justify-content:center;margin-bottom:clamp(14px,2.4vh,24px)}
.mo-h{margin:0;font-family:Syne,sans-serif;font-weight:500;letter-spacing:-.045em;line-height:.98;font-size:clamp(40px,min(6.2vw,9.1vh),112px);color:var(--paper-ink)}
.mo-h b{font-weight:inherit;color:var(--brand)}
.mo-br{display:none}
.mo-sub{margin:clamp(12px,2.2vh,24px) auto 0;max-width:47em;font-size:clamp(15px,1.2vw,18.5px);line-height:1.5;color:var(--paper-mute);text-wrap:balance}
/* where the team has built before: five marks in one quiet ink */
/* a band of its own: the label between two hairlines, then the marks, sized to the screen so all ten sit on one line */
.mo-by{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,16px);margin-top:clamp(16px,2.6vh,30px);--u:clamp(1px,calc(100vw/1120),1.4px)}
.mo-by span{display:flex;align-items:center;gap:14px;font-family:"Geist Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-mute);white-space:nowrap}
.mo-by span::before,.mo-by span::after{content:"";width:clamp(24px,5vw,72px);height:1px;background:rgba(20,20,24,.2)}
.mo-by ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;gap:14px calc(var(--u)*27)}
.mo-by li{display:flex;align-items:center;gap:calc(var(--u)*7);flex:none}
.mo-by em{font-style:normal;font-size:calc(var(--u)*15);font-weight:600;letter-spacing:-.01em;color:#141418;opacity:.82}
.mo-by img{display:block;height:calc(var(--h)*var(--u));width:auto;filter:brightness(0);opacity:.82}
/* the picture */
.mo-fig{position:relative;z-index:1;flex:1 1 auto;min-height:clamp(330px,49vh,560px);margin-top:clamp(4px,1vh,14px)}
.mo-cv{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%)}
.mo-days{position:absolute;left:0;right:0;bottom:clamp(14px,2.2vh,22px);height:12px;font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78);pointer-events:none}
.mo-days span{position:absolute;left:calc(var(--t)/96*100%);top:0;padding-left:10px}
.mo-days span:first-child{left:38px}
.mo-days span::before{content:"";position:absolute;left:0;top:-3px;width:1px;height:16px;background:rgba(255,255,255,.4)}
.mo-days span:first-child::before{display:none}
/* the usual way: a dotted trail that takes four days */
.mo-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 1.5px rgba(10,16,48,.35))}
.mo-path path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.1 10.5;opacity:.95}
.mo-way{position:absolute;margin:0;font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#fff;white-space:nowrap;text-shadow:0 0 10px rgba(10,16,48,.45)}
.mo-ghost{position:absolute;left:calc(var(--t)/96*100%);top:var(--y);transform:translateY(-50%);margin:0;padding:8px 14px 9px;border-radius:4px 16px 16px 16px;border:1.5px solid rgba(255,255,255,.92);color:#fff;font-size:clamp(13.5px,1.05vw,17px);font-weight:500;line-height:1.2;white-space:nowrap;text-shadow:0 1px 12px rgba(10,16,48,.4);filter:drop-shadow(0 0 1.5px rgba(10,16,48,.3))}
.mo-g1{--t:43.5;--y:46%;--d:2.1s}
.mo-g2{--t:59.5;--y:69%;--d:2.9s}
/* the reply that finally goes out on Friday is solid, like the reply in the card: the same answer, four days apart */
.mo-g3{left:auto;right:48px;--y:34%;--d:3.6s;border-radius:16px 4px 16px 16px;border-color:#16171b;background:#16171b;text-shadow:none}
@media (max-width:1200px){
  .mo-g1{--t:43}
  .mo-g2{--t:57.5}
}
@media (max-width:1100px){
  .mo-g1{--t:41}
  .mo-g2{--t:55}
  .mo .mo-sum span{max-width:13em}
}
/* and in those same four days: the count that reaches Friday with the trail */
.mo-sum{position:absolute;z-index:2;right:48px;bottom:clamp(44px,7vh,68px);margin:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right;color:#fff}
.mo-sum b{font-family:Syne,sans-serif;font-weight:500;font-size:clamp(46px,min(6.4vw,11.6vh),104px);letter-spacing:-.05em;line-height:.86;font-variant-numeric:tabular-nums}
.mo .mo-sum span{display:block;max-width:16em;margin-top:clamp(8px,1.4vh,14px);font-size:clamp(13.5px,1.05vw,16.5px);font-weight:500;line-height:1.35;color:#fff}
.mo .mo-sum small{display:block;margin-top:8px;font-family:"Geist Mono",monospace;font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
/* with Altrnative: Monday, 09:17 */
.mo-card{position:absolute;z-index:3;left:48px;bottom:clamp(44px,6vh,60px);width:clamp(336px,25.6vw,396px);border-radius:18px;background:#fffdf8;color:var(--paper-ink);padding:clamp(15px,2vh,20px) 20px 0;box-shadow:0 0 0 1px rgba(10,16,48,.06),0 40px 70px -34px rgba(6,10,40,.6);text-align:left}
.mo-card header{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(8px,1.4vh,14px);font-family:"Geist Mono",monospace;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-soft)}
.mo-card header b{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--paper-ink)}
.mo-card header b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
.mo-b{position:relative;display:flex;align-items:baseline;gap:10px;width:fit-content;max-width:100%;margin:0;padding:8px 12px 9px;font-size:clamp(13.5px,.98vw,15px);font-weight:500;line-height:1.25}
.mo-b time{font-family:"Geist Mono",monospace;font-size:9.5px;font-weight:500;letter-spacing:.08em;opacity:.6;white-space:nowrap}
.mo-b.in{border-radius:4px 15px 15px 15px;background:#f0ece3}
.mo-b.out{margin-left:auto;max-width:86%;flex-wrap:wrap;justify-content:space-between;border-radius:15px 4px 15px 15px;background:#16171b;color:#f6f3ec}
.mo .mo-card .mo-file{order:3;flex-basis:100%;display:flex;align-items:center;gap:9px;margin-top:9px;padding:8px 12px 8px 10px;border-radius:10px;background:rgba(255,255,255,.12);font-size:clamp(12.5px,.92vw,14px);font-weight:500;color:#f6f3ec}
.mo-file::before{content:"";flex:none;width:13px;height:16px;border-radius:2px;background:var(--brand);clip-path:polygon(0 0,62% 0,100% 30%,100% 100%,0 100%)}
.mo-file small{margin-left:18px;font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.1em;opacity:.6}
/* what happened in between: three quiet lines on a thread */
.mo-did{list-style:none;margin:0 0 0 17px;padding:clamp(6px,1.2vh,12px) 0 clamp(6px,1.2vh,12px) 20px;border-left:1px solid rgba(20,20,24,.16)}
.mo-did li{position:relative;padding:clamp(3px,.5vh,4px) 0;font-size:clamp(13px,.92vw,14.5px);line-height:1.35;color:#3d3c39}
.mo-did li::before{content:"";position:absolute;left:-24.5px;top:.62em;width:8px;height:8px;border-radius:50%;background:#fffdf8;box-shadow:0 0 0 1.5px rgba(20,20,24,.42) inset}
.mo-card footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:clamp(9px,1.6vh,16px);padding:clamp(9px,1.6vh,15px) 0;border-top:1px solid rgba(20,20,24,.1)}
.mo-card footer b{display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.05vw,16px);font-weight:600}
.mo-card footer b::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-5' fill='none' stroke='%231a0c05' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.mo-card footer span{font-family:"Geist Mono",monospace;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-soft);white-space:nowrap}
/* short screens: a little tighter, so the card never reaches the words */
@media (max-height:800px) and (min-width:1001px){
  .mo{--pad:74px;min-height:max(100vh,762px);min-height:max(100dvh,762px)}
  .mo-h{font-size:clamp(40px,min(6.2vw,7.5vh),112px)}
  .mo-by{margin-top:12px;gap:9px;--u:clamp(1px,calc(100vw/1300),1.16px)}
  .mo-sub{max-width:62em}
  .mo-card{bottom:38px;padding-top:14px}
  .mo-sum{bottom:38px}
  .mo-days{bottom:12px}
}
@media (max-height:800px) and (min-width:1001px) and (max-width:1360px){
  .mo{min-height:max(100vh,750px);min-height:max(100dvh,750px)}
}
/* phones: the same picture, stacked. The card first, then the usual way wandering down to Friday, then the count. */
@media (max-width:1000px){
  .mo{min-height:0;--pad:96px}
  .mo-in{padding:var(--pad) 20px 0}
  .mo-br{display:inline}
  .mo-h{font-size:clamp(33px,10.4vw,60px);line-height:1}
  .mo-sub{font-size:15.5px;margin-top:18px}
  .mo-by{gap:18px;margin-top:28px;--u:1.18px}
  .mo-by ul{flex-wrap:wrap;gap:18px 28px}
  .mo-fig{min-height:0;margin-top:30px;padding:56px 16px 452px}
  .mo-cv{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%)}
  .mo-card{position:relative;left:auto;bottom:auto;width:auto;max-width:460px;margin:0 auto;padding:18px 18px 0}
  .mo-way{left:auto!important;right:max(22px,calc(50% - 208px));top:auto!important;bottom:392px}
  .mo-ghost{top:auto;font-size:15px}
  .mo-g1{left:max(118px,calc(50% - 112px));bottom:330px}
  .mo-g2{left:max(38px,calc(50% - 192px));bottom:258px}
  .mo-g3{right:max(16px,calc(50% - 230px));bottom:204px}
  .mo-sum{right:max(16px,calc(50% - 230px));bottom:46px}
  .mo-sum b{font-size:60px}
  .mo .mo-sum span{font-size:14.5px;max-width:15em}
  .mo-days{bottom:12px;font-size:9.5px;letter-spacing:.14em}
  .mo-days span{padding-left:6px}
  .mo-days span:first-child{left:14px}
}
/* arriving: the colour rises, the card lands, then the trail walks to Friday */
@media (prefers-reduced-motion:no-preference){
  .mo-in>*{opacity:0;transform:translateY(14px);animation:up .9s var(--eo) forwards}
  .mo-in>:nth-child(2){animation-delay:.08s}
  .mo-in>:nth-child(3){animation-delay:.2s}
  .mo-in>:nth-child(4){animation-delay:.32s}
  .mo-cv,.mo-days{animation:mo-rise 1.6s var(--eo) .15s both}
  .mo-card{animation:mo-card 1s var(--eo) .55s both}
  .mo-path{animation:mo-walk 2.6s cubic-bezier(.5,0,.3,1) 1.2s both}
  .mo-way{animation:mo-fade .6s ease 1.3s both}
  .mo-sum{animation:mo-fade .7s ease 1.1s both}
  .mo-ghost{animation:mo-pop .6s var(--pop) var(--d) both}
}
@keyframes mo-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes mo-card{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mo-walk{from{clip-path:inset(-20px 100% -20px 0)}to{clip-path:inset(-20px 0 -20px 0)}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-pop{from{opacity:0;transform:translateY(calc(-50% + 8px)) scale(.94)}to{opacity:1;transform:translateY(-50%)}}
/* phones (3 Oct): two things that were cut off at the right edge */
@media (max-width:520px){
  .jv2{grid-template-columns:112px auto;gap:14px}
  .doc{width:112px;height:150px;padding:11px 11px 0}
  .chk{gap:10px}
  .chk li{font-size:11.5px;gap:8px}
  .ax-h{flex-wrap:wrap;white-space:normal;row-gap:4px}
  .ax-h em{white-space:nowrap}
}
/* the seams (3 Oct): on every join between two sections sits one message, half on each, in the visitor's voice.
   It asks what the next section answers, so the page reads as one conversation. Drawn like a sent iMessage. */
.seam{position:relative;height:0;z-index:6;pointer-events:none}
.seam p{position:absolute;top:0;margin:0;padding:.5em .95em .56em;border-radius:1.15em;background:#0a84ff;color:#fff;font-size:clamp(16px,1.4vw,21px);font-weight:500;line-height:1.25;letter-spacing:-.005em;white-space:nowrap;transform:translateY(-50%);filter:drop-shadow(0 14px 18px rgba(8,10,30,.28))}
.seam p::after{content:"";position:absolute;right:-.36em;bottom:0;width:1.02em;height:1.24em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 21'%3E%3Cpath fill='%230a84ff' d='M16.8 20.6c-5.6.8-10.6-1.6-12.8-4.6C1.7 12.9.5 7.5 0 0h7c0 9.6 3.4 16.6 9.8 20.6z'/%3E%3C/svg%3E") no-repeat right bottom/contain}
/* where each one sits: right ones are tailed on the right, left ones mirrored, the last one centred over the closing line */
.seam-r p{right:max(54px,calc(50% - 666px))}
.seam-l p{left:max(54px,calc(50% - 666px))}
.seam-c p{left:50%;margin-left:-5.4em}
.seam-l p::after,.seam-c p::after{right:auto;left:-.36em;transform:scaleX(-1)}
.mf{padding-bottom:64px}
@media (prefers-reduced-motion:no-preference){
  .seam p{opacity:0;transform:translateY(calc(-50% + 12px)) scale(.94);transition:opacity .45s var(--eo),transform .55s var(--pop)}
  .seam.in p{opacity:1;transform:translateY(-50%)}
}
@media (max-width:860px){.seam p{font-size:16px}.seam-r p{right:24px}.seam-l p{left:24px}}
/* tighter sections (3 Oct): the gaps above and below each section were a screen-third of nothing.
   Enough air for the seam message to sit in, no more. */
@media (min-width:861px){
  .mf{padding-top:clamp(72px,11vh,120px)}
  .jb,.lx{padding-top:clamp(84px,11vh,104px);padding-bottom:clamp(84px,11vh,104px)}
  .cx{padding-top:clamp(84px,11vh,104px);padding-bottom:clamp(76px,10vh,96px)}
  .tb{padding-top:clamp(84px,11vh,104px);padding-bottom:clamp(84px,11vh,104px)}
  .tr3{padding-top:clamp(84px,11vh,104px)}
  .tr3-top{padding-bottom:44px}
  .end{padding-top:clamp(110px,17vh,170px);padding-bottom:clamp(100px,15vh,150px)}
}
@media (max-width:860px){
  .jb,.lx,.cx,.tb,.tr3{padding-top:80px}
  .jb,.lx,.tb{padding-bottom:80px}
  .cx{padding-bottom:68px}
}
/* phones, the mobile pass (3 Oct): every element measured at 360 and 390 wide as a touch device
   (local/preview/mobile_audit.py). Three rules: anything you tap is at least 40 px tall, no text under 11 px,
   nothing spills out of its box. */
@media (max-width:860px){
  .nav .btn-sm{min-height:40px}
  .nav .logo{display:inline-flex;align-items:center;min-height:40px}
  .cx-dots{gap:0 22px}
  .cx-dots button{min-height:42px;padding:8px 2px 13px}
  .foot-cols h4{margin-bottom:6px}
  .foot-cols a{margin-bottom:0;padding:9px 0}
  .foot .logo{display:inline-flex;align-items:center;min-height:40px}
  .soc{gap:2px}
  .soc a{width:40px;height:40px;align-items:center;justify-content:center}
  /* the sign-up form: 16 px, or iOS zooms the whole page in when a field is tapped */
  .demo-scrim .demo-box input,.demo-scrim .demo-box textarea{font-size:16px}
}
@media (max-width:520px){
  .mo .mo-way,.mo .mo-card header b,.mo .mo-card header span,.jb .jb-t,.doc .doc-h span,.cx .cx-brand .cx-scope,.cx .cx-brand span,
  .ax .ax-h em,.tb .tbc-k,.tr3 .tr3-k,.mo .mo-sum small,.mo .mo-days span,.mo .mo-card time,.mo .mo-card .mo-file small,
  .mo .mo-card footer span,.tb .wk-h span,.tr3 .tr3-rail span,.ax .ax-pay em{font-size:11px}
  /* the skyline band: a fixed height, so the small label always lands just under the bridge whatever the phone */
  .pvx{height:720px;min-height:0}
  /* a launch week has five narrow days here; a step's box grows to fit its name instead of the name spilling out */
  .wk-b{min-width:max-content}
  /* ten names in one moving row (monday.js doubles the list), each a little larger: four ragged rows pushed the
     product card off the first screen. With reduced motion it stands still and is swiped sideways instead. */
  .mo-by{--u:1.22px;align-items:stretch;overflow:hidden;gap:16px}
  .mo-by span{justify-content:center}
  .mo-by ul.mo-run{flex-wrap:nowrap;justify-content:flex-start;gap:0;width:max-content;-webkit-mask:none;mask:none;animation:mo-run 34s linear infinite}
  .mo-by ul.mo-run li{margin-right:38px}
  .mo-by:has(ul.mo-run){-webkit-mask:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
}
@keyframes mo-run{to{transform:translateX(-50%)}}
@media (max-width:520px) and (prefers-reduced-motion:reduce){
  .mo-by ul.mo-run{animation:none}
  .mo-by{overflow-x:auto;scrollbar-width:none}
  .mo-by::-webkit-scrollbar{display:none}
}