/* The typeface is linked from each page's head, which the browser fetches in
   parallel; an @import here waited for this file first. */

/* ------------------------------------------------------------------
   Linear's system, applied to Panorithm's own product.

   Everything inside a frame is page DOM: no iframes, no screenshots.
   That is what lets it move. Each mock plays its own short sequence when
   it scrolls into view, so the page reads as software in use rather than
   a gallery of stills.
   ------------------------------------------------------------------ */
:root{
  --void:#08090a; --carbon:#0f1011; --obsidian:#161718;
  --graphite:#23252a; --smoke:#383b3f; --ash:#62666d;
  --fog:#8a8f98; --mist:#d0d6e0; --bone:#e5e5e6; --paper:#fff;
  --lime:#e4f222; --green:#27a644; --violet:#6366f1; --lav:#8b5cf6;
  --coral:#eb5757; --teal:#02b8cc; --amber:#d9a668;

  --max:1200px; --gap:96px;
  --r-card:12px; --r-btn:6px; --r-pill:9999px; --r-badge:4px;
  --ease:cubic-bezier(.22,1,.36,1);

  --sh-sm:rgba(0,0,0,.4) 0 2px 4px 0;
  --sh-line:rgb(35,37,42) 0 0 0 1px inset;
  --sh-xl:rgba(8,9,10,.6) 0 4px 32px 0;
  --sh-lime:rgba(0,0,0,.01) 0 5px 2px 0,rgba(0,0,0,.04) 0 3px 2px 0,rgba(0,0,0,.07) 0 1px 1px 0;
  --sh-float:rgba(0,0,0,.62) 0 24px 60px -14px, rgba(255,255,255,.055) 0 0 0 1px;
}
/* Our type is the default, on bare :root, not behind an attribute. It was
   behind [data-font] and only one page ran the script that sets it, so every
   other page had no font family at all and fell back to the browser's serif.
   A design token that needs JavaScript to exist is not a token. */
:root{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --meta:var(--sans); --feat:"cv11","ss01"; --meta-feat:"cv11","ss01"; --meta-ls:-.011em;
}
:root,:root[data-font="ours"]{letter-spacing:-.011em}
:root[data-font="ours"]{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --meta:var(--sans); --feat:"cv11","ss01"; --meta-feat:"cv11","ss01"; --meta-ls:-.011em;
}

*{box-sizing:border-box}
body{background:var(--void);color:var(--mist);font-family:var(--sans);
  font-size:16px;line-height:1.5;font-weight:400;font-feature-settings:var(--feat);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body{letter-spacing:-.011em}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.m{font-family:var(--meta);font-feature-settings:var(--meta-feat);letter-spacing:var(--meta-ls);
  font-size:11.5px;color:var(--ash);font-variant-numeric:tabular-nums}

/* ---------- One animation system ----------
   Nothing moves until it is on screen, nothing moves twice without reason,
   and everything travels the same 6px on the same curve. */
/* The page is correct with no JavaScript at all: everything is visible, in
   place, at rest. Only once the script is alive and has proved the observer
   works does anything start hidden. A page that needs an event to become
   readable is a page that is sometimes blank, and we have had that bug. */
body.anim [data-in]{opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease) var(--d,0ms),transform .5s var(--ease) var(--d,0ms)}
body.anim [data-in].on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  body.anim [data-in]{opacity:1;transform:none;transition:none}
}

/* ---------- Icons, avatars, status ---------- */
.i{width:14px;height:14px;flex:none;display:block;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.i.s{width:12px;height:12px}
.av{width:18px;height:18px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:8px;font-weight:590;letter-spacing:0;color:#0b0b0d}
.av.a{background:#b7c3d6} .av.c{background:#9fd0c4} .av.d{background:#e0c18f}
.av.e{background:#dfa6a6} .av.f{background:#a9bde4}
.av.bot{background:var(--obsidian);box-shadow:0 0 0 1px var(--smoke) inset;color:var(--mist)}
.st{width:13px;height:13px;flex:none;border-radius:50%;display:block;position:relative}
.st.todo{box-shadow:0 0 0 1.4px var(--ash) inset}
.st.prog{box-shadow:0 0 0 1.4px var(--amber) inset;
  background:conic-gradient(var(--amber) 0 52%,transparent 52% 100%);background-clip:content-box;padding:3px}
.st.done{background:var(--green)}
.st.hold{box-shadow:0 0 0 1.4px var(--coral) inset}
.pri{display:flex;gap:1.5px;align-items:flex-end;height:10px;flex:none}
.pri i{width:2.5px;background:var(--smoke);border-radius:1px;display:block}
.pri i:nth-child(1){height:4px}.pri i:nth-child(2){height:7px}.pri i:nth-child(3){height:10px}
.pri.hi i{background:var(--fog)} .pri.hi i:nth-child(3){background:var(--mist)}
.pri.lo i:nth-child(2),.pri.lo i:nth-child(3){background:var(--graphite)}
.sp{width:9px;height:9px;border-radius:50%;border:1.4px solid var(--graphite);
  border-top-color:var(--paper);display:block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sp{animation:none}}


/* ---------- Nav. The wordmark is the one on the live site: weight 250,
   tight tracking, no mark beside it, and the parent brand underneath. ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(8,9,10,.72);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease),background .2s var(--ease)}
nav.stuck{border-bottom-color:rgba(255,255,255,.07);background:rgba(8,9,10,.86)}
/* Three columns: the wordmark, the links in the middle, the account on the right. */
nav .in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px}
.brand{display:flex;align-items:center;line-height:1;justify-self:start}
.wordmark{font-size:22px;font-weight:250;letter-spacing:-.046em;line-height:1.1;color:#fff}
.brand .by{font-size:11px;color:var(--ash);letter-spacing:-.01em;margin-top:1px}
.brand .by b{color:var(--fog);font-weight:700;letter-spacing:-.025em}
nav .links{display:flex;gap:4px;justify-self:center}
nav .links a{padding:8px 13px;font-size:14px;color:var(--fog);border-radius:var(--r-pill);transition:color .15s,background .15s}
nav .links a:hover{color:var(--paper);background:rgba(255,255,255,.05)}
.pill{background:var(--paper);color:var(--void);border-radius:var(--r-pill);
  padding:8px 16px;font-size:13px;font-weight:510;letter-spacing:-.011em;display:inline-block}
nav .acct{display:flex;align-items:center;gap:6px;justify-self:end}
nav .acct .login{padding:8px 14px;font-size:14px;color:var(--mist);border-radius:var(--r-pill)}
nav .acct .login:hover{color:var(--paper);background:rgba(255,255,255,.05)}
nav .acct .pill{padding:9px 18px;font-size:14px}
nav .acct .pill:hover{background:var(--bone)}
nav .menu{display:none}
@media(max-width:880px){
  nav .in{grid-template-columns:1fr auto auto;height:60px;gap:10px}
  nav .links,nav .acct .login{display:none}
  nav .menu{display:block;position:static}
  nav .menu summary{list-style:none;cursor:pointer;width:40px;height:40px;border-radius:var(--r-pill);
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    box-shadow:var(--sh-line)}
  nav .menu summary::-webkit-details-marker{display:none}
  nav .menu summary span{display:block;width:16px;height:1.5px;background:var(--paper);border-radius:2px;transition:transform .2s var(--ease)}
  nav .menu[open] summary span:first-child{transform:translateY(3.25px) rotate(45deg)}
  nav .menu[open] summary span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  /* Absolute with its own height: the header's backdrop blur makes it the box
     a fixed child measures against, which squeezed a fixed sheet to 41px. */
  nav .menu .sheet{position:absolute;left:0;right:0;top:100%;height:calc(100dvh - 60px);z-index:60;display:flex;flex-direction:column;
    padding:12px 20px 28px;background:#08090a;border-top:1px solid rgba(255,255,255,.07);overflow-y:auto}
  nav .menu .sheet a{padding:14px 4px;font-size:17px;color:var(--mist);border-bottom:1px solid rgba(255,255,255,.06)}
  nav .menu .sheet a:last-child{border-bottom:0;color:var(--paper)}
}

/* ---------- Type ---------- */
h1{font-size:72px;line-height:1;letter-spacing:-.022em;font-weight:510;color:var(--paper);margin:0;text-wrap:balance}
h2{font-size:48px;line-height:1.02;letter-spacing:-.022em;font-weight:510;color:var(--paper);margin:0;text-wrap:balance}
p{margin:0}
.say{font-size:17px;line-height:1.6;color:var(--mist);max-width:48ch}
.go{display:inline-flex;gap:10px;align-items:baseline;margin-top:20px;font-size:13px}
.go b{font-weight:400;color:var(--ash);font-family:var(--meta);font-feature-settings:var(--meta-feat);
  letter-spacing:var(--meta-ls);font-variant-numeric:tabular-nums}
.go a{color:var(--mist)} .go a:hover{color:var(--paper)}
@media(max-width:820px){h1{font-size:38px}h2{font-size:29px;line-height:1.1}.say{font-size:16px}}

.btn-lime{display:inline-block;background:var(--lime);color:var(--void);border-radius:var(--r-btn);
  padding:10px 16px;font-size:14px;font-weight:510;letter-spacing:-.011em;box-shadow:var(--sh-lime)}
.btn-ghost{display:inline-block;border:1px solid var(--graphite);color:var(--mist);
  border-radius:var(--r-btn);padding:9px 12px;font-size:13px}

section{padding-top:var(--gap);position:relative}
#sky{position:absolute;inset:-120px 0 auto 0;height:720px;pointer-events:none;z-index:0;
  background:
    radial-gradient(52% 40% at 18% 0%,rgba(99,102,241,.15) 0%,transparent 66%),
    radial-gradient(44% 38% at 84% 8%,rgba(2,184,204,.10) 0%,transparent 68%),
    radial-gradient(70% 48% at 50% 40%,rgba(228,242,34,.045) 0%,transparent 70%)}
main{position:relative;z-index:1}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
@media(max-width:900px){.head{grid-template-columns:1fr;gap:18px}}

/* ---------- Product surfaces ---------- */
.shot{margin-top:44px;position:relative;--glow:99,102,241}
/* The agent is wider than the words. Linear lets the product overhang the
   text column; so does this, symmetrically, and never past the viewport. */
.shot.bleed{width:min(1400px,calc(100vw - 32px));margin-left:50%;transform:translateX(-50%)}
.shot::before{content:"";position:absolute;inset:12% 0 -14% 0;
  background:radial-gradient(74% 62% at 50% 100%,rgba(var(--glow),.26) 0%,rgba(var(--glow),.09) 40%,transparent 72%);
  filter:blur(30px);pointer-events:none;z-index:0}
.shot>*{position:relative;z-index:1}
.floor{background:linear-gradient(180deg,rgb(8,9,10) 8%,rgba(208,214,224,.12) 100%);
  border-radius:var(--r-card);padding:1px}
.scroll{overflow-x:auto;overflow-y:hidden;border-radius:var(--r-card);
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.app{background:var(--carbon);border-radius:var(--r-card);box-shadow:var(--sh-line);
  overflow:hidden;min-width:940px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.035) 0,rgba(255,255,255,0) 92px)}
.bar{display:flex;align-items:center;gap:9px;padding:0 13px;height:42px;
  border-bottom:1px solid var(--graphite);color:var(--fog);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0))}
.bar .t{font-size:12.5px;color:var(--mist);font-weight:510;letter-spacing:-.011em}
.bar .sep{color:var(--smoke);font-size:12px}
.bar .r{margin-left:auto;display:flex;gap:11px;align-items:center;color:var(--ash)}
.ib{width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--ash)}
.badge{background:rgba(255,255,255,.05);color:var(--fog);border-radius:var(--r-badge);
  padding:1px 6px;font-size:11.5px;line-height:1.5;display:inline-flex;gap:4px;align-items:center}
.badge.g{background:rgba(39,166,68,.15);color:#6cd489}
.badge.v{background:rgba(99,102,241,.18);color:#a6a9f8}
.badge.c{background:rgba(235,87,87,.15);color:#f08b8b}
.badge.t{background:rgba(2,184,204,.14);color:#57cfdd}
.badge.l{background:var(--lime);color:var(--void);font-weight:510}
.float{position:absolute;background:var(--obsidian);border-radius:10px;
  box-shadow:var(--sh-float);overflow:hidden;z-index:3}
.dim{opacity:.3;filter:saturate(.65)}

.side{width:196px;flex:none;border-right:1px solid var(--graphite);padding:9px 8px;
  display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.008)}
.side .ws{display:flex;align-items:center;gap:8px;padding:6px 7px 10px;color:var(--mist)}
.side .ws b{font-size:12.5px;font-weight:510;flex:1;letter-spacing:-.011em}
.side .grp{font-size:10.5px;color:var(--ash);padding:13px 7px 4px;letter-spacing:.03em}
.side a{display:flex;gap:8px;align-items:center;padding:5px 7px;border-radius:5px;
  font-size:12.5px;color:var(--fog);letter-spacing:-.011em}
.side a .c{margin-left:auto;font-size:10.5px;color:var(--ash);font-family:var(--meta);
  font-feature-settings:var(--meta-feat);font-variant-numeric:tabular-nums}
.side a.on{background:rgba(255,255,255,.06);color:var(--paper)}
.sq{width:11px;height:11px;border-radius:3px;flex:none}

.list{flex:1;min-width:0;display:flex;flex-direction:column}
.lh{display:flex;align-items:center;gap:8px;padding:0 15px;height:34px;
  border-bottom:1px solid var(--graphite);font-size:11.5px;color:var(--ash)}
.ln{display:flex;align-items:center;gap:10px;padding:0 15px;height:37px;
  border-bottom:1px solid rgba(35,37,42,.62);font-size:12.5px;color:var(--mist);letter-spacing:-.011em}
.ln .id{font-family:var(--meta);font-feature-settings:var(--meta-feat);letter-spacing:var(--meta-ls);
  font-size:11px;color:var(--ash);width:62px;flex:none;font-variant-numeric:tabular-nums}
.ln .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln .tx em{font-style:normal;color:var(--ash)}
.ln .rt{display:flex;gap:7px;align-items:center;flex:none}
.ln .ok{opacity:0;transition:opacity .35s var(--ease)}
.ln.checked .ok{opacity:1}

.insp{width:248px;flex:none;border-left:1px solid var(--graphite);padding:14px;
  display:flex;flex-direction:column;gap:11px;background:rgba(255,255,255,.01)}
.insp .k{font-size:10.5px;color:var(--ash);letter-spacing:.03em}
.insp .v{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mist)}
.doc{background:rgba(255,255,255,.022);border-radius:var(--r-btn);box-shadow:var(--sh-sm);
  padding:8px 10px;display:flex;gap:9px;align-items:center}
.doc .tx{min-width:0;flex:1}
.doc b{font-size:12px;font-weight:510;color:var(--mist);display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.011em}

.ans{flex:1;min-width:0;padding:17px 19px;display:flex;flex-direction:column;gap:11px}
.ans .q{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--paper);
  font-weight:510;letter-spacing:-.012em}
.ans p{font-size:13.5px;line-height:1.62;color:var(--fog)}
.ans p b{color:var(--mist);font-weight:510}
.think{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ash);
  transition:opacity .4s var(--ease),max-height .4s var(--ease)}
.ans .q{min-height:21px}
.think.gone{opacity:0;max-height:0;overflow:hidden}
/* A caret that keeps blinking, because a page with a cursor on it is in use. */
.caret{display:inline-block;width:1.5px;height:1em;background:var(--mist);
  vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none;opacity:0}}

/* ---------- Findings board ---------- */
.board{display:flex;min-width:940px}
.bc{flex:1;min-width:0;border-right:1px solid var(--graphite);padding:11px 10px;
  display:flex;flex-direction:column;gap:7px}
.bc:last-child{border-right:0}
.bch{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--fog);padding:2px 2px 5px}
.bch .n{margin-left:auto;font-family:var(--meta);font-feature-settings:var(--meta-feat);
  font-size:10.5px;color:var(--ash);font-variant-numeric:tabular-nums}
.tk{background:rgba(255,255,255,.028);border-radius:var(--r-btn);box-shadow:var(--sh-sm);
  padding:9px 10px;display:flex;flex-direction:column;gap:7px}
.tk .top{display:flex;align-items:center;gap:7px}
.tk .id{font-family:var(--meta);font-feature-settings:var(--meta-feat);letter-spacing:var(--meta-ls);
  font-size:10.5px;color:var(--ash);font-variant-numeric:tabular-nums}
.tk .h{font-size:12.5px;line-height:1.38;color:var(--mist);letter-spacing:-.011em}
.tk .ft{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.tk .ft .av{margin-left:auto}

/* ---------- The agent ----------
   This is the tour canvas, at the size it was drawn: 196px cards, the same
   hairline border, the same dot vocabulary, the same tag pills, the same
   output ports with their sub-lines, the same region boxes with the label
   above. Nothing redrawn and nothing shrunk.

   At full size it is wider than any page, so it bleeds past the frame the way
   a product screenshot does, and the camera pans to follow the run. You see
   the rest because the work moves you there. */
.wf{display:flex;min-width:940px}
.wfc{flex:1;min-width:0;position:relative;height:512px;overflow:hidden;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:22px 22px;border-right:1px solid var(--graphite)}
/* The far edge admits the canvas keeps going. */
.wfc::after{content:"";position:absolute;inset:0 0 0 auto;width:86px;pointer-events:none;z-index:4;
  background:linear-gradient(90deg,transparent,rgba(15,16,17,.92))}
.wfi{position:absolute;left:0;top:0;width:1800px;height:560px;
  transition:transform 1s var(--ease);will-change:transform}
.wfi>svg{position:absolute;left:0;top:0;width:1800px;height:560px;overflow:visible;z-index:1}
.wfi path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.6;transition:stroke .4s,opacity .4s}
.wfi path.lead{stroke:rgba(255,255,255,.062);stroke-width:1}
.wfi path.flow{stroke:#6fb894;stroke-width:2;stroke-dasharray:5 6;animation:along .7s linear infinite}
@keyframes along{to{stroke-dashoffset:-22}}
.wfi path.done{stroke:rgba(111,184,148,.4)}
.wfi .ah{fill:rgba(255,255,255,.42);stroke:none}

.region{position:absolute;border:1px solid rgba(255,255,255,.062);border-radius:14px;
  background:rgba(255,255,255,.032);z-index:0}
.col{position:absolute;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.2);z-index:2}

.nd{position:absolute;width:196px;background:#0d0d10;border:1px solid rgba(255,255,255,.062);
  border-radius:11px;padding:11px 13px;font-size:13px;z-index:2;
  transition:opacity .5s var(--ease),border-color .4s,box-shadow .4s,transform .5s var(--ease)}
.nd .t{color:rgba(255,255,255,.93);font-weight:600;display:flex;gap:7px;align-items:center;line-height:1.25}
.nd .d{color:rgba(255,255,255,.34);font-size:11.5px;margin-top:4px;line-height:1.35}
.nd img{width:17px;height:17px;flex:none;object-fit:contain;display:block}
.nd .dot{width:8px;height:8px;border-radius:50%;flex:none;background:rgba(255,255,255,.2)}
.nd .dot.ok{background:#6fb894} .nd .dot.info{background:#7fa7d9} .nd .dot.gs{background:#34a853}
.nd .tag{display:inline-block;font-size:10.5px;padding:0 7px;border-radius:999px;
  border:1px solid rgba(255,255,255,.062);color:rgba(255,255,255,.34);margin-top:6px;margin-right:4px}
.nd .tag.model{color:#7fa7d9;border-color:rgba(127,167,217,.45)}
.nd .tag.approval{color:#d9a668;border-color:rgba(217,166,104,.45)}
.nd .who{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:5px;
  width:11px;height:11px;color:#d9a668}
.nd .tick{position:absolute;top:-7px;right:-7px;width:17px;height:17px;border-radius:50%;
  background:#6fb894;display:flex;align-items:center;justify-content:center;color:#06130d;
  transform:scale(0);transition:transform .32s cubic-bezier(.2,1.5,.4,1)}
.out{position:absolute;font-size:11.5px;color:rgba(255,255,255,.55);white-space:nowrap;
  transform:translateY(-50%);background:var(--carbon);padding:0 7px;z-index:2;transition:opacity .4s}
.out.go{color:#6fb894} .out.stop{color:#d9a668}
.out b{display:block;font-weight:400;font-size:10.5px;color:rgba(255,255,255,.2);margin-top:1px}

/* At rest the run is finished, so the still frame is a result. */
.wf .nd{opacity:.85;border-color:rgba(111,184,148,.3)}
.wf .nd .tick{transform:scale(1)}
.wf.playing .nd{opacity:.14;border-color:rgba(255,255,255,.062)}
.wf.playing .nd .tick{transform:scale(0)}
.wf.playing .nd.ran{opacity:.42;border-color:rgba(111,184,148,.3)}
.wf.playing .nd.ran .tick{transform:scale(1)}
.wf.playing .nd.now{opacity:1;transform:scale(1.015);border-color:rgba(255,255,255,.34)}
.wf.playing .nd.doing{box-shadow:0 0 0 4px rgba(255,255,255,.05),0 0 34px -12px var(--lime)}
.wf.playing .nd.doing::after{content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);
  animation:thread 1.1s ease-in-out infinite}
@keyframes thread{0%{transform:scaleX(0);transform-origin:left}
  50%{transform:scaleX(1);transform-origin:left}
  50.1%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}}
.wf.done .nd.ran{opacity:.85}
@media (prefers-reduced-motion:reduce){
  .wfi{transition:none}
  .wfi path.flow,.wf.playing .nd.doing::after{animation:none}
  .wf.playing .nd{opacity:1}
}


.panel{width:252px;flex:none;display:flex;flex-direction:column}
.panel .ph{padding:12px 14px;border-bottom:1px solid var(--graphite);display:flex;align-items:baseline;gap:8px}
.panel .ph b{font-size:12.5px;color:var(--paper);font-weight:510;letter-spacing:-.011em;transition:color .5s}
.panel.fin .ph b{color:#6cd489}
.panel .ph .m{margin-left:auto}
.panel .pl{padding:7px 0;display:flex;flex-direction:column}
.it{display:flex;gap:8px;align-items:center;padding:5px 14px;font-size:12px;color:var(--ash);
  letter-spacing:-.011em;transition:color .35s,background .35s}
.it .ic{width:11px;flex:none;display:flex;align-items:center;justify-content:center}
.it .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it .ms{font-family:var(--meta);font-feature-settings:var(--meta-feat);font-size:10.5px;
  color:var(--ash);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .35s}
.it.was{color:var(--fog)} .it.was .ic{color:var(--green)} .it.was .ms{opacity:1}
.it.at{color:var(--paper);background:rgba(255,255,255,.055)}
.par{margin:5px 9px;border-left:2px solid rgba(255,255,255,.09);background:rgba(255,255,255,.02);
  border-radius:0 8px 8px 0;padding-bottom:3px;transition:border-color .4s,background .4s}
.par.live{border-left-color:var(--lime);background:rgba(255,255,255,.045)}
.par .ph2{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash);padding:7px 12px 3px}
.par .it{padding-left:12px}

.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--graphite);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-line);margin-top:44px}
@media(max-width:900px){.chips{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.chips{grid-template-columns:1fr}}
.chip{background:var(--carbon);padding:15px 17px;display:flex;flex-direction:column;gap:8px;min-height:92px}
.chip .hd{display:flex;align-items:center;gap:8px}
.chip b{font-size:13px;font-weight:510;color:var(--mist);letter-spacing:-.011em}
.chip span{font-size:11.5px;color:var(--ash);line-height:1.45}

.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:52px}
@media(max-width:820px){.proof{grid-template-columns:repeat(2,1fr);gap:24px}}
.proof .hd{display:flex;align-items:center;gap:7px}
.proof b{font-size:12.5px;font-weight:510;color:var(--mist);letter-spacing:-.011em}
.proof span{font-size:11.5px;color:var(--ash);display:block;margin-top:2px}


/* ---------- Small screens ----------
   The one rule: nothing is positioned on top of anything else. Panels that
   overhang a frame on a wide screen become the next thing down the page, and
   the run's list moves under the canvas instead of beside it. Frames still
   scroll sideways, because a stripped screenshot proves less than a real one
   you can push around with a thumb. */
@media(max-width:820px){
  :root{--gap:64px}
  .shot{margin-top:28px}
  .shot::before{inset:18% 0 -8% 0}
  /* Overhanging panels rejoin the flow. */
  .float{position:static !important;width:auto !important;margin-top:12px;
    box-shadow:var(--sh-line),var(--sh-sm)}
  .proof{margin-top:36px;gap:20px}
  .chips{margin-top:28px}
  h1 br,h2 br{display:none}
  .head{gap:14px}
}
@media(max-width:820px){
  /* The run reads top to bottom: canvas, then what it did. */
  .wf{flex-direction:column;min-width:0}
  .wfc{height:320px;border-right:0;border-bottom:1px solid var(--graphite)}
  .wfc::after{width:48px}
  .panel{width:100%;border-left:0}
  .app.wfapp{min-width:0}
}
@media(max-width:520px){
  .proof{grid-template-columns:1fr;gap:16px}
  .wfc{height:280px}
}

footer{padding:var(--gap) 0 92px;margin-top:var(--gap);border-top:1px solid var(--graphite)}
.fine{font-size:11.5px;color:var(--ash);margin-top:40px}

/* ---------- Pages that are mostly words ----------
   Named .page, not .doc: .doc is already the source-document chip in the
   product UI, and its display:flex was leaking onto whole pages.
   Security, the changelog, anything read rather than operated. One column,
   measured for reading, on the same ground as everything else. */
.page{max-width:760px;margin:0 auto;padding:0 24px}
.page h1{font-size:48px;line-height:1.02;letter-spacing:-.022em;font-weight:510;margin:0}
.page .lead{font-size:17px;line-height:1.6;color:var(--fog);margin-top:18px;max-width:60ch}
.page h3{font-size:20px;line-height:1.33;letter-spacing:-.012em;font-weight:590;color:var(--paper);margin:0}
.page p{font-size:15px;line-height:1.65;color:var(--fog)}
.page p b{color:var(--mist);font-weight:510}
.page a.inl{color:var(--mist);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--smoke)}
.blocks{display:flex;flex-direction:column;gap:1px;background:var(--graphite);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-line);margin-top:40px}
.blk{background:var(--carbon);padding:20px 22px;display:flex;flex-direction:column;gap:9px}
.blk .hd{display:flex;align-items:center;gap:9px}
.blk .hd .m{margin-left:auto}
.kv{display:grid;grid-template-columns:200px minmax(0,1fr);gap:10px 24px;margin-top:8px}
@media(max-width:640px){.kv{grid-template-columns:1fr;gap:4px 0}.kv .k+.k{margin-top:12px}}
.kv .k{font-size:12.5px;color:var(--ash);letter-spacing:-.011em}
.kv .v{font-size:14px;color:var(--mist);line-height:1.55}
@media(max-width:820px){.page h1{font-size:32px}.page .lead{font-size:15px}}

/* ---------- Changelog ---------- */
.log{display:flex;flex-direction:column;gap:0;margin-top:44px}
.rel{display:grid;grid-template-columns:132px minmax(0,1fr);gap:28px;
  padding:26px 0;border-top:1px solid var(--graphite)}
.rel:first-child{border-top:0;padding-top:0}
.rel .when{display:flex;flex-direction:column;gap:5px;position:sticky;top:76px;align-self:start}
.rel .when .d{font-family:var(--meta);font-feature-settings:var(--meta-feat);
  letter-spacing:var(--meta-ls);font-size:12.5px;color:var(--mist);font-variant-numeric:tabular-nums}
.rel .items{display:flex;flex-direction:column;gap:14px;min-width:0}
.ent{display:flex;flex-direction:column;gap:5px}
.ent .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ent b{font-size:15px;font-weight:510;color:var(--paper);letter-spacing:-.012em}
.ent p{font-size:14px;line-height:1.6;color:var(--fog);margin:0;max-width:62ch}
@media(max-width:640px){.rel{grid-template-columns:1fr;gap:12px}.rel .when{position:static;flex-direction:row;align-items:center;gap:10px}}

/* ---------- The product, full height ---------- */
body.product{overflow:hidden}
.prod{position:fixed;inset:56px 0 0 0;display:flex;background:var(--void)}
.prod .side{width:232px;height:100%;overflow-y:auto}
.prod .main{flex:1;min-width:0;display:flex;flex-direction:column}
.prod .insp{height:100%;overflow-y:auto}
.thread{flex:1;min-width:0;overflow-y:auto;padding:22px 26px;display:flex;
  flex-direction:column;gap:20px;max-width:none}
.turn{display:flex;gap:11px;align-items:flex-start;max-width:74ch}
.turn .body{min-width:0;flex:1;display:flex;flex-direction:column;gap:10px}
.turn.you .body p{font-size:15px;color:var(--paper);font-weight:510;letter-spacing:-.012em;line-height:1.5}
.turn p{font-size:14.5px;line-height:1.65;color:var(--fog);margin:0}
.turn p b{color:var(--mist);font-weight:510}
.composer{border-top:1px solid var(--graphite);padding:14px 26px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.012))}
.field{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-btn);padding:12px 14px;display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--fog);max-width:900px}
.field .ph{flex:1;min-width:0}
.field:focus-within{border-color:var(--mist)}
.composer .note{font-size:11.5px;color:var(--ash);margin:9px 0 0;display:flex;gap:8px;align-items:center}
@media(max-width:900px){.prod .side,.prod .insp{display:none}.thread{padding:18px}}

/* ---------- Computer use ----------
   A system with no way in is still a system somebody opens every day. This is
   that: a browser, driven. The cursor moves at the speed software moves, which
   is the entire benefit and therefore the entire animation. */
.cu{position:relative;min-height:430px;overflow:hidden;background:var(--carbon)}
.cu .chrome{display:flex;align-items:center;gap:9px;padding:0 12px;height:38px;
  border-bottom:1px solid var(--graphite);background:rgba(255,255,255,.022)}
.cu .tabs{display:flex;gap:6px;align-items:center}
.cu .tab{font-size:11.5px;color:var(--ash);padding:3px 9px;border-radius:5px;white-space:nowrap}
.cu .tab.on{background:rgba(255,255,255,.06);color:var(--mist)}
.cu .url{flex:1;min-width:0;background:rgba(255,255,255,.03);border-radius:var(--r-pill);
  padding:4px 11px;font-family:var(--meta);font-feature-settings:var(--meta-feat);
  font-size:11px;color:var(--ash);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cu .screen{position:relative;height:calc(100% - 38px);padding:18px 20px;overflow:hidden}
/* Deliberately plainer than our own UI: this is somebody else's software. */
.cu .sys{background:#101216;border:1px solid #262a31;border-radius:6px;overflow:hidden}
.cu .sysbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#161a20;
  border-bottom:1px solid #262a31;font-size:12px;color:#9aa3b0}
.cu .sysbar b{color:#d2d8e2;font-weight:600;font-size:12.5px}
.cu .form{display:grid;grid-template-columns:132px minmax(0,1fr);gap:9px 14px;padding:14px 16px;align-items:center}
.cu .lab{font-size:11.5px;color:#7c8594}
.cu .inp{background:#0b0d11;border:1px solid #2b3039;border-radius:4px;padding:6px 9px;
  font-size:12.5px;color:#d2d8e2;min-height:29px;font-variant-numeric:tabular-nums;
  transition:border-color .18s,box-shadow .18s}
.cu .inp.focus{border-color:#6f8ab8;box-shadow:0 0 0 2px rgba(111,138,184,.18)}
.cu .acts{display:flex;gap:8px;padding:0 16px 14px}
.cu .sbtn{font-size:12px;padding:6px 13px;border-radius:4px;border:1px solid #2b3039;
  color:#c3cad6;background:#181c23;transition:background .15s,transform .1s}
.cu .sbtn.main{background:#2f6fb4;border-color:#2f6fb4;color:#fff}
.cu .sbtn.hit{transform:scale(.97);filter:brightness(1.25)}
.cu .rows{border-top:1px solid #262a31}
.cu .r{display:grid;grid-template-columns:96px minmax(0,1fr) 86px;gap:12px;padding:7px 16px;
  font-size:12px;color:#9aa3b0;border-bottom:1px solid #1d2128;transition:background .18s}
.cu .r.pick{background:rgba(47,111,180,.18);color:#d2d8e2}
/* The confirmation sits under the button that caused it, in the flow. It used
   to be positioned over the buttons, which clipped their labels and read as a
   broken screen rather than a result. */
.cu .ok{margin:0 16px 14px;background:#123222;border:1px solid #1e5b38;border-radius:5px;
  padding:9px 12px;font-size:12.5px;color:#8fe3b0;display:flex;align-items:center;gap:9px;
  opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0;overflow:hidden;
  transition:opacity .3s var(--ease),max-height .34s var(--ease),
    padding .3s var(--ease),margin .3s var(--ease)}
.cu .ok.on{opacity:1;max-height:70px;padding-top:9px;padding-bottom:9px;margin-bottom:14px}
.cu .ok span{min-width:0}
/* The cursor. Fast on purpose: the argument is that it does not hesitate. */
.cu .cur{position:absolute;left:0;top:0;width:15px;height:21px;z-index:6;pointer-events:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));transition:transform .2s cubic-bezier(.3,.8,.3,1)}
.cu .cur.slow{transition-duration:.34s}
.cu .ring{position:absolute;width:26px;height:26px;border-radius:50%;z-index:5;
  border:1.5px solid rgba(255,255,255,.75);opacity:0;pointer-events:none;
  margin:-13px 0 0 -13px;transform:scale(.4)}
.cu .ring.go{animation:tap .42s cubic-bezier(.22,1,.36,1)}
@keyframes tap{0%{opacity:.85;transform:scale(.35)}100%{opacity:0;transform:scale(1.5)}}
.cu .hud{position:absolute;right:16px;top:52px;z-index:6;display:flex;gap:6px;align-items:center}
@media (prefers-reduced-motion:reduce){.cu .cur{transition:none}.cu .ring.go{animation:none}}
@media(max-width:820px){.cu{height:392px}.cu .form{grid-template-columns:104px minmax(0,1fr)}}

/* ---------- Settings and account screens ----------
   Rows of a thing and its state. The state is the point, so it sits right and
   is the only thing allowed any colour. */
.set{display:flex;flex-direction:column;gap:1px;background:var(--graphite);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-line)}
.set .row{background:var(--carbon);padding:15px 18px;display:flex;align-items:center;gap:14px}
.set .row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.set .row b{font-size:14px;font-weight:510;color:var(--mist);letter-spacing:-.011em}
.set .row span.sub{font-size:12.5px;color:var(--ash);line-height:1.5}
.set .head{background:rgba(255,255,255,.022);padding:11px 18px;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ash)}
.tog{width:34px;height:20px;border-radius:999px;background:var(--graphite);flex:none;
  position:relative;transition:background .2s}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:var(--fog);transition:transform .2s var(--ease),background .2s}
.tog.on{background:rgba(228,242,34,.9)}
.tog.on::after{transform:translateX(14px);background:var(--void)}
.tog.off{opacity:.5}
/* A locked control is not a control. It says why rather than looking broken. */
.tog.lock{background:var(--graphite);opacity:.4}

.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ash);padding:10px 14px;border-bottom:1px solid var(--graphite)}
.tbl td{padding:11px 14px;border-bottom:1px solid rgba(35,37,42,.62);color:var(--mist);
  letter-spacing:-.011em}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-family:var(--meta);font-feature-settings:var(--meta-feat);
  font-variant-numeric:tabular-nums;color:var(--fog)}
.tblwrap{overflow-x:auto;border-radius:var(--r-card);box-shadow:var(--sh-line);
  background:var(--carbon);margin-top:32px}
.tblwrap table{min-width:560px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--graphite);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-line);margin-top:40px}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--carbon);padding:17px 18px;display:flex;flex-direction:column;gap:3px}
.stat b{font-size:27px;font-weight:510;color:var(--paper);letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:12px;color:var(--ash);line-height:1.4}

/* ---------- The hero cycles through companies ----------
   One frame, four businesses. The tabs are not decoration: they are the claim
   that this is four industries rather than one rehearsed demo, and the line
   under the live one fills for as long as that scene has left. */
.scenes{display:flex;gap:4px;margin-top:40px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.scenes::-webkit-scrollbar{display:none}
.sc{position:relative;font:inherit;font-size:12.5px;letter-spacing:-.011em;font-weight:510;
  border:0;background:transparent;color:var(--ash);padding:7px 13px 10px;cursor:pointer;
  white-space:nowrap;transition:color .3s}
.sc:hover{color:var(--mist)}
.sc.on{color:var(--paper)}
.sc i{position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;border-radius:2px;
  background:var(--graphite);display:block;overflow:hidden}
.sc i::after{content:"";position:absolute;inset:0;background:var(--paper);
  transform:scaleX(0);transform-origin:left}
.sc.on i::after{animation:fill var(--dur,11s) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
/* The swap itself: everything inside the frame steps back, changes, returns.
   The chrome stays put, so it reads as the same product with new data in it. */
#heroshot .app{transition:opacity .34s var(--ease)}
#heroshot.swap .ans,#heroshot.swap .insp,#heroshot.swap .side,
#heroshot.swap #co-bar{opacity:0;transform:translateY(4px)}
#heroshot .ans,#heroshot .insp,#heroshot .side,#heroshot #co-bar{
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .sc.on i::after{animation:none;transform:scaleX(1)}
  #heroshot.swap .ans,#heroshot.swap .insp,#heroshot.swap .side,#heroshot.swap #co-bar{
    opacity:1;transform:none}
}

/* The cards behind the front one. Two is enough to say "there are more"; more
   than two and it stops being a product and becomes a graphic. */
.shot .deck{position:absolute;display:block;border-radius:var(--r-card);
  background:var(--carbon);box-shadow:var(--sh-line);z-index:0}
.shot .deck.d1{left:3.5%;right:3.5%;top:-11px;height:44px}
.shot .deck.d2{left:7%;right:7%;top:-21px;height:44px;opacity:.55}
@media(max-width:820px){.shot .deck.d1{top:-8px}.shot .deck.d2{top:-15px}}

/* ---------- Panels that sit over a frame ----------
   A panel resting on top of another panel reads as a bug unless you watched it
   arrive. So with no JavaScript it is simply the next thing down the page, and
   it only lifts on top once the frame beneath it has settled and it can be seen
   to land. Obakeng's rule: if it overlaps, it has to be an animation. */
.float{position:static;width:auto !important;margin-top:12px;
  box-shadow:var(--sh-line),var(--sh-sm)}
body.anim .float.placed{position:absolute;margin-top:0;box-shadow:var(--sh-float)}
body.anim .float.placed{width:var(--fw,min(420px,84%)) !important}

/* Integration marks. The real ones, from the vendors' own artwork, never a
   coloured square standing in for a brand. A rectangular mark keeps its shape:
   squashing somebody's logo into a square box is worse than not showing it. */
.lg{width:15px;height:15px;flex:none;object-fit:contain;display:block}
.chip .hd .lg{width:17px;height:17px}
.chip .hd{gap:7px}
.chip .hd .lg+.lg{margin-left:-3px}
.side a .lg{width:14px;height:14px}

.kv .k{display:flex;align-items:center;gap:7px}
.kv .k .lg+.lg{margin-left:-4px}
.blk .hd .lg{width:17px;height:17px}
.blk .hd .lg+.lg{margin-left:-4px}

/* ---------- Which business you are looking at ----------
   The company used to change quietly inside the chrome and nobody noticed. It
   is now the loudest thing above the frame, it moves when it changes, and the
   ones still queued sit behind it out of focus so the carousel is visibly a
   carousel rather than a screenshot that occasionally redraws. */
.reel{display:flex;align-items:center;gap:22px;margin-top:44px;min-height:54px;overflow:hidden}
.reel .now{display:flex;flex-direction:column;gap:2px;flex:none;max-width:60%}
.reel .now .v{font-size:23px;font-weight:510;letter-spacing:-.02em;color:var(--paper);
  line-height:1.15;text-wrap:balance}
.reel .now .co{font-size:13px;color:var(--ash);letter-spacing:-.011em}
.reel .now.go .v,.reel .now.go .co{animation:reelin .55s var(--ease) both}
.reel .now.go .co{animation-delay:.06s}
@keyframes reelin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* The queue. Out of focus on purpose: it is there to be counted, not read. */
.reel .queue{display:flex;gap:16px;align-items:center;flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 52%,transparent 96%);
  mask-image:linear-gradient(90deg,#000 0,#000 52%,transparent 96%)}
.reel .queue b{font:inherit;font-size:14px;font-weight:510;letter-spacing:-.012em;
  color:var(--fog);white-space:nowrap;cursor:pointer;background:none;border:0;padding:0;
  filter:blur(1.6px);opacity:.42;transition:filter .45s var(--ease),opacity .45s var(--ease),
    color .3s;flex:none}
.reel .queue b:first-child{filter:blur(.7px);opacity:.66}
.reel .queue b:hover{filter:blur(0);opacity:1;color:var(--mist)}
.reel .queue b.slide{animation:reelslide .55s var(--ease) both}
@keyframes reelslide{from{transform:translateX(26px);opacity:0}}
@media(max-width:820px){
  .reel{gap:14px;margin-top:30px}
  .reel .now{max-width:70%}
  .reel .now .v{font-size:17px}
  .reel .queue b{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .reel .now.go .v,.reel .now.go .co,.reel .queue b.slide{animation:none}
}

/* The middle lane is the only numbered one, because it is the only one that
   happens in order. Restraint on the accent: a numeral, not an outline. */
.dia .lane.mid .card{padding-left:34px}
.dia .card .n{position:absolute;left:12px;top:11px;font-size:10.5px;font-weight:590;
  color:var(--lime);font-variant-numeric:tabular-nums;opacity:.85}
.dia .card.step .t{font-size:12.5px;color:var(--paper)}


/* ---------- Diagrams that are not screenshots ----------
   Some pages have nothing to screenshot. Security is the clearest case: the
   argument is about a permission that does not exist, and there is no screen
   showing an absence. So it gets a drawing, in the same language as the
   agent canvas: the same cards, the same hairline wires, the same waves
   lighting in turn, so a diagram and a product frame read as one system.

   Every diagram below is page DOM. Nothing is an image. */
.dia{position:relative;padding:30px 24px;min-width:940px;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:22px 22px}
.dia svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.dia svg.wires path{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.5;
  transition:stroke .45s,opacity .45s}
.dia svg.wires path.flow{stroke:#6fb894;stroke-width:2;stroke-dasharray:5 6;
  animation:along .7s linear infinite}
.dia svg.wires path.blocked{stroke:var(--coral);stroke-dasharray:4 5}
.dia svg.wires .ah{fill:rgba(255,255,255,.42);stroke:none}
.dia .lanes{position:relative;z-index:1;display:flex;align-items:stretch;gap:26px}
.dia .lane{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.dia .lane-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.2);padding-bottom:2px}
.dia .card{background:var(--carbon);border:1px solid var(--graphite);border-radius:10px;
  padding:11px 13px;position:relative;
  transition:opacity .5s var(--ease),border-color .45s,box-shadow .45s,transform .5s var(--ease)}
.dia .card .t{font-size:12.5px;font-weight:510;color:var(--mist);display:flex;gap:8px;
  align-items:center;line-height:1.3;letter-spacing:-.011em}
.dia .card .d{font-size:11px;color:var(--ash);margin-top:4px;line-height:1.45}
/* Three states, and the third is the point: a thing that cannot happen. */
.dia .card.ok{border-color:rgba(111,184,148,.34)}
.dia .card.no{border-color:rgba(235,87,87,.3);background:rgba(235,87,87,.035)}
.dia .card.no .t{color:#f0a6a6}
.dia .card .stamp{position:absolute;top:-8px;right:10px;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--void);padding:0 6px;color:var(--ash)}
.dia .card.no .stamp{color:var(--coral)}
.dia .card.ok .stamp{color:#6cd489}
/* The wall. Not a card: a physical edge the request does not get past. */
.dia .wall{position:relative;z-index:1;flex:none;width:2px;align-self:stretch;
  background:repeating-linear-gradient(180deg,var(--coral) 0 7px,transparent 7px 14px);
  opacity:.5;margin:26px 0 0}
.dia .wall::after{content:"never granted";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--coral);
  background:var(--void);padding:3px 8px}
/* Playing: everything back, the lit lane forward, same grammar as the run. */
.dia.play .card{opacity:.16}
.dia.play .card.on{opacity:1;transform:scale(1.015)}
.dia.play .card.was{opacity:.45}
.dia.play .card.on.no{box-shadow:0 0 26px -8px var(--coral)}
.dia.play .card.on.ok{box-shadow:0 0 26px -8px #6fb894}
@media (prefers-reduced-motion:reduce){
  .dia.play .card{opacity:1}
  .dia svg.wires path.flow{animation:none}
}
@media(max-width:820px){.dia{padding:22px 16px}.dia .lanes{gap:16px}}

/* A product page is a screen, not a document. The content already was the
   software; this is the chrome that says so. */
.screenpad{padding:0}
.screenpad>.set,.screenpad>.stats{margin-top:0;border-radius:0;box-shadow:none}
.screenpad>.tblwrap{margin-top:0;border-radius:0;box-shadow:none;background:transparent}
.app .set .head{background:rgba(255,255,255,.015)}
.page .shot{margin-top:28px}
.page .shot .app{min-width:0}

/* .idx was used as the section eyebrow in twenty places across the site and was
   never defined, so every one of them rendered as ordinary body text. That is
   half of why the inner pages read as unfinished next to the landing page. */
.idx{font-size:12px;line-height:1.4;font-weight:510;color:var(--fog);
  letter-spacing:.02em;text-transform:uppercase;margin:0}
.idx::before{content:"";display:inline-block;width:14px;height:1px;
  background:var(--smoke);vertical-align:middle;margin-right:8px}

/* A vendor whose mark we could not source keeps its row and its space, so the
   column still lines up. Never a placeholder that could be read as a logo. */
.nomark{display:inline-block;width:18px;height:18px;border-radius:4px;
  background:var(--graphite);box-shadow:var(--sh-line)}

/* A product frame is a picture of software, so it keeps a desktop width and
   scrolls sideways. This page is not a picture: the status on the right is the
   whole point, and a reader on a phone must not have to scroll to find it.
   So these frames fit the screen and the row stacks instead. */
.app.fit{min-width:0}
@media(max-width:720px){
  .app.fit .bar{height:auto;padding:8px 13px;flex-wrap:wrap;row-gap:3px}
  .app.fit .bar .r{margin-left:0;flex:1 1 100%}
  .app.fit .ln{height:auto;align-items:flex-start;padding:11px 13px;flex-wrap:wrap}
  .app.fit .ln .tx{white-space:normal;overflow:visible;text-overflow:clip}
  .app.fit .ln .tx b{display:block}
  .app.fit .ln .tx em{display:block;margin-top:2px;line-height:1.45}
  .app.fit .ln .rt:last-child{flex:0 0 100%;margin-top:7px}
}

/* ==================================================================
   Figures.

   A node-and-wire diagram means one thing on this site: an agent run.
   It was being used for everything, so a permissions table, a roadmap
   and a list of symptoms all arrived looking like workflows, and the
   one grammar that should have been special stopped meaning anything.

   These are ordinary figures. Numerals, columns, bars, bands. No wires
   anywhere. Unlike .dia they carry no desktop min-width, so they fit a
   phone instead of scrolling sideways.
   ================================================================== */
.fig{position:relative;background:var(--carbon);border-radius:var(--r-card);
  box-shadow:var(--sh-line);padding:34px 36px}
.fig .cap{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ash);margin:0 0 15px}
.fig .foot{margin:15px 0 0;font-size:14px;color:var(--fog);line-height:1.5}

/* Numbered steps. A sequence a person performs, where the order is the point. */
/* The row fits its own width, not the window's: four items go 4, then 2 by 2,
   then 1; three go 3, then 1. Never three and a stray. Each item opens on a
   hairline instead of a side rule, so nothing breaks when the row wraps. */
.fig.steps{container-type:inline-size}
.fig.steps .frow{display:grid;gap:30px 40px;grid-template-columns:1fr}
.fig.steps .fstep{padding:18px 0 0;border-top:1px solid var(--graphite);min-width:0}
@container (min-width:560px){.fig.steps .frow:has(>.fstep:nth-child(4)){grid-template-columns:repeat(2,1fr)}}
@container (min-width:640px){.fig.steps .frow:not(:has(>.fstep:nth-child(4))){grid-template-columns:repeat(3,1fr)}}
@container (min-width:980px){.fig.steps .frow:has(>.fstep:nth-child(4)){grid-template-columns:repeat(4,1fr)}}
.fig.steps .fnum{display:block;font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1;
  color:var(--smoke);font-variant-numeric:tabular-nums;margin-bottom:10px}
.fig.steps .fstep:first-child .fnum{color:var(--lime)}
.fig.steps b{display:block;font-size:17px;font-weight:530;color:var(--paper);margin-bottom:10px;letter-spacing:-.012em}
.fig.steps .fstep p{margin:0;font-size:15px;color:var(--fog);line-height:1.65;max-width:36ch}

/* Toned columns. Two for granted against never, three for a spread. */
.fig.split .cols{display:grid;gap:12px;grid-template-columns:repeat(var(--n,2),1fr)}
.fig.split .fcol{background:var(--obsidian);border-radius:10px;padding:13px 14px;box-shadow:var(--sh-line)}
.fig.split .fcol h4{margin:0 0 3px;font-size:13px;font-weight:560;color:var(--bone);letter-spacing:-.011em}
.fig.split .fcol .fsub{display:block;font-size:11.5px;color:var(--ash);margin-bottom:9px}
.fig.split .fitem{display:flex;gap:8px;align-items:flex-start;padding:7px 0;
  border-top:1px solid rgba(35,37,42,.8);font-size:12.5px;color:var(--mist);line-height:1.45}
.fig.split .fitem .mk{flex:none;width:13px;height:13px;margin-top:2px;border-radius:3px;
  display:grid;place-items:center;font-size:9px;font-weight:700;line-height:1}
.fig.split .fyes .mk{background:rgba(39,166,68,.2);color:#6cd489}
.fig.split .fno  .mk{background:rgba(235,87,87,.16);color:#f08b8b}
.fig.split .fsoon .mk{background:rgba(255,255,255,.06);color:var(--ash)}
.fig.split .fyes h4{color:#8fdca5} .fig.split .fno h4{color:#f0a0a0}

/* Bars. For magnitudes, where the comparison is the whole message. */
.fig.bars .b{display:grid;grid-template-columns:minmax(120px,1.1fr) 2.4fr auto;gap:12px;
  align-items:center;padding:6px 0;font-size:12.5px}
.fig.bars .b .lb{color:var(--mist);line-height:1.35}
.fig.bars .track{height:9px;border-radius:5px;background:var(--graphite);overflow:hidden}
.fig.bars .fill{display:block;height:100%;border-radius:5px;background:var(--smoke);
  width:calc(var(--v)*1%);transition:width 1.1s var(--ease)}
.fig.bars .b.fhi .fill{background:var(--lime)}
.fig.bars .b.fhi .lb{color:var(--paper)}
.fig.bars .fval{color:var(--fog);font-variant-numeric:tabular-nums;text-align:right;min-width:52px}
.fig.bars .b.fhi .fval{color:var(--lime)}
body.anim .fig.bars [data-in] .fill{width:0}
body.anim .fig.bars [data-in].on .fill{width:calc(var(--v)*1%)}

/* Tiles. A set with no order, where each item stands on its own. */
.fig.tiles .grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.fig.tiles .tile{background:var(--obsidian);border-radius:10px;padding:13px 14px;box-shadow:var(--sh-line)}
.fig.tiles .tile b{display:block;font-size:13px;font-weight:530;color:var(--bone);margin-bottom:4px}
.fig.tiles .tile p{margin:0;font-size:12.5px;color:var(--fog);line-height:1.5}

/* Bands. Nested layers, for where something physically sits. */
.fig.bands .band{display:flex;gap:11px;align-items:center;background:var(--obsidian);
  border-radius:10px;padding:12px 14px;box-shadow:var(--sh-line);margin-bottom:7px}
.fig.bands .band:nth-child(2){margin-left:18px}
.fig.bands .band:nth-child(3){margin-left:36px}
.fig.bands .band:nth-child(4){margin-left:54px}
.fig.bands .band b{font-size:13px;font-weight:530;color:var(--bone)}
.fig.bands .band span{font-size:12.5px;color:var(--fog);margin-left:auto;text-align:right}

/* Agenda. A run of time, where the clock is the spine. */
.fig.agenda ol{list-style:none;margin:0;padding:0 0 0 20px;position:relative}
.fig.agenda ol::before{content:"";position:absolute;left:4px;top:5px;bottom:5px;
  width:1px;background:var(--graphite)}
.fig.agenda li{position:relative;padding:0 0 15px}
.fig.agenda li:last-child{padding-bottom:0}
.fig.agenda li::before{content:"";position:absolute;left:-20px;top:5px;width:9px;height:9px;
  border-radius:50%;background:var(--smoke);box-shadow:0 0 0 3px var(--carbon)}
.fig.agenda li:first-child::before{background:var(--lime)}
.fig.agenda .tm{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);
  font-variant-numeric:tabular-nums}
.fig.agenda b{display:block;font-size:13.5px;font-weight:530;color:var(--bone);margin:2px 0 3px}
.fig.agenda p{margin:0;font-size:12.5px;color:var(--fog);line-height:1.5}

@media(max-width:640px){
  .fig{padding:24px 20px}
  .fig.split .cols{grid-template-columns:1fr}
  .fig.bars .b{grid-template-columns:1fr auto;row-gap:4px}
  .fig.bars .track{grid-column:1/-1}
  .fig.bands .band{margin-left:0!important}
  .fig.bands .band span{margin-left:0}
  .fig.bands .band{flex-direction:column;align-items:flex-start;gap:3px}
}
.fig.split .fitem b{color:var(--bone);font-weight:530}
.fig.split .fitem b+span,.fig.split .fitem>span{display:block}

/* ==================================================================
   Paper proof.

   The strongest thing we can show is not a diagram of the product, it
   is the work itself: three real documents where every page is correct
   on its own and the money is lost in the gap between them. Nobody
   needs a flowchart to understand that. They need to see the paper.

   Everything is prefixed pp- because generic names on this stylesheet
   collide, and a collision here collapses the whole figure silently.
   ================================================================== */
.pp{position:relative}
.pp-fan{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);align-items:start}
.pp-sheet{margin:0;background:#fbfbf8;color:#16171a;border-radius:3px;padding:13px 14px 11px;
  box-shadow:rgba(0,0,0,.55) 0 18px 40px -16px, rgba(0,0,0,.35) 0 3px 9px -3px;
  position:relative}
.pp-sheet::after{content:"";position:absolute;inset:0;border-radius:3px;
  box-shadow:rgba(0,0,0,.09) 0 0 0 1px inset;pointer-events:none}
.pp-sheet header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  border-bottom:1.5px solid #16171a;padding-bottom:6px;margin-bottom:7px}
.pp-sheet header b{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pp-sheet header span{font-size:10.5px;color:#6b6b74;font-variant-numeric:tabular-nums}
.pp-who{font-size:10px;color:#6b6b74;line-height:1.45;margin-bottom:8px}
.pp-who b{display:block;font-size:11.5px;font-weight:600;color:#16171a;letter-spacing:-.01em}
.pp-line{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:10.5px;
  padding:5px 0;border-bottom:1px solid #d8d8de;line-height:1.35}
.pp-line:last-of-type{border-bottom:0}
.pp-line .q{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-dim{color:#8b8b93}
.pp-hand{font-family:"Bradley Hand","Segoe Script","Snell Roundhand",cursive;
  color:#26408f;font-size:12px;display:block;margin-top:3px}
.pp-sig{margin-top:9px;padding-top:6px;border-top:1px solid #d8d8de;font-size:9.5px;color:#6b6b74}
.pp-cap{margin:9px 0 0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);
  text-align:center}

/* The highlight is the act of reading. It wipes across the figure it found. */
.pp-hl{position:relative;padding:1px 3px;margin:0 -3px;border-radius:2px;background:transparent}
.pp-hl::before{content:"";position:absolute;inset:0;border-radius:2px;background:rgba(228,242,34,.62);
  transform:scaleX(0);transform-origin:left;z-index:-1}
.pp-hl.bad::before{background:rgba(235,87,87,.32)}
body.anim .pp[data-in].on .pp-hl::before{animation:ppwipe .42s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes ppwipe{to{transform:scaleX(1)}}
body:not(.anim) .pp-hl::before{transform:scaleX(1)}

/* The finding lands last, after all three have been read. */
.pp-out{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-top:16px;
  background:var(--carbon);border-radius:10px;padding:13px 15px;box-shadow:var(--sh-line)}
.pp-out .amt{font-size:23px;font-weight:600;letter-spacing:-.03em;color:var(--lime);
  font-variant-numeric:tabular-nums;line-height:1}
.pp-out .say{margin:0;font-size:12.5px;color:var(--fog);line-height:1.5;flex:1;min-width:210px}
.pp-out .say b{color:var(--bone);font-weight:530}
body.anim .pp[data-in] .pp-out{opacity:0;transform:translateY(7px)}
body.anim .pp[data-in].on .pp-out{opacity:1;transform:none;
  transition:opacity .5s var(--ease) 1.5s, transform .5s var(--ease) 1.5s}

body.anim .pp[data-in] .pp-sheet{opacity:0;transform:translateY(10px)}
body.anim .pp[data-in].on .pp-sheet{opacity:1;transform:translateY(0);
  transition:opacity .55s var(--ease) var(--sd,0s), transform .55s var(--ease) var(--sd,0s)}

@media (prefers-reduced-motion:reduce){
  body.anim .pp[data-in] .pp-sheet,body.anim .pp[data-in] .pp-out{opacity:1;transform:none}
  .pp-hl::before{animation:none!important;transform:scaleX(1)}
}
@media(max-width:760px){
  .pp-fan{grid-template-columns:1fr;gap:16px}
  
  .pp-out .amt{font-size:20px}
}

/* ==================================================================
   Extraction.

   The document on the left, the record it became on the right, and a
   box over each figure the agent found. The box carries the VALUE, not
   a field name, because a box saying "quantity" proves nothing and a
   box saying "40" proves it read the page.

   Boxes are anchored to the text they found rather than positioned at
   fixed coordinates, so they cannot drift when the type reflows.
   One integer on the parent, data-step, advances the whole thing.
   ================================================================== */
.xt{display:grid;gap:14px;grid-template-columns:1.15fr .85fr;align-items:start}
.xt-paper{background:#fbfbf8;color:#16171a;border-radius:4px;padding:16px 17px;
  box-shadow:rgba(0,0,0,.55) 0 18px 40px -18px, rgba(0,0,0,.09) 0 0 0 1px inset;position:relative}
.xt-paper header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-bottom:1.5px solid #16171a;padding-bottom:7px;margin-bottom:9px}
.xt-paper header b{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.xt-paper header span{font-size:10.5px;color:#6b6b74;font-variant-numeric:tabular-nums}
.xt-meta{font-size:10.5px;color:#6b6b74;line-height:1.5;margin:0 0 10px}
.xt-meta b{color:#16171a;font-weight:600}
.xt-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;font-size:10.5px;
  padding:6px 0;border-bottom:1px solid #d8d8de;align-items:baseline}
.xt-row .n{font-variant-numeric:tabular-nums;font-weight:600;min-width:20px;text-align:right}
.xt-hand{font-family:"Bradley Hand","Segoe Script","Snell Roundhand",cursive;color:#26408f;
  font-size:12.5px;display:inline-block}
/* the skeleton of the rest of the page, so it reads as a whole document */
.xt-bars{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.xt-bars i{display:block;height:5px;border-radius:3px;background:#e6e6ea}
.xt-bars i:nth-child(1){width:86%} .xt-bars i:nth-child(2){width:72%}
.xt-bars i:nth-child(3){width:79%} .xt-bars i:nth-child(4){width:48%}

/* A found figure, and the box that lands on it. */
.xt-t{position:relative;display:inline-block;border-radius:2px;
  transition:background .25s var(--ease),box-shadow .25s var(--ease)}
.xt-box{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,4px) scale(.9);
  white-space:nowrap;font-size:9.5px;font-weight:600;letter-spacing:.01em;
  background:#eef0ff;color:#3730a3;border:1.5px solid #6366f1;border-radius:4px;
  padding:1px 5px;opacity:0;pointer-events:none;z-index:2;
  transition:opacity .28s cubic-bezier(.2,.7,.3,1),transform .28s cubic-bezier(.2,.7,.3,1)}
.xt-box::after{content:"";position:absolute;top:100%;left:50%;margin-left:-3px;
  border:3px solid transparent;border-top-color:#6366f1}
.xt[data-step="1"] [data-at="1"] .xt-box,.xt[data-step="2"] [data-at="1"] .xt-box,
.xt[data-step="3"] [data-at="1"] .xt-box,.xt[data-step="4"] [data-at="1"] .xt-box,
.xt[data-step="2"] [data-at="2"] .xt-box,.xt[data-step="3"] [data-at="2"] .xt-box,
.xt[data-step="4"] [data-at="2"] .xt-box,
.xt[data-step="3"] [data-at="3"] .xt-box,.xt[data-step="4"] [data-at="3"] .xt-box,
.xt[data-step="4"] [data-at="4"] .xt-box{opacity:1;transform:translate(-50%,0) scale(1)}
.xt[data-step="1"] [data-at="1"],.xt[data-step="2"] [data-at="1"],.xt[data-step="3"] [data-at="1"],
.xt[data-step="4"] [data-at="1"],.xt[data-step="2"] [data-at="2"],.xt[data-step="3"] [data-at="2"],
.xt[data-step="4"] [data-at="2"],.xt[data-step="3"] [data-at="3"],.xt[data-step="4"] [data-at="3"],
.xt[data-step="4"] [data-at="4"]{background:#eef0ff;box-shadow:0 0 0 1.5px #6366f1}

/* The record being built, one field at a time. */
.xt-rec{background:var(--carbon);border-radius:10px;box-shadow:var(--sh-line);overflow:hidden}
.xt-rec .hd{display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid var(--graphite);font-size:11.5px;color:var(--fog)}
.xt-rec .hd .ct{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ash);font-size:11px}
.xt-f{padding:8px 12px;border-bottom:1px solid rgba(35,37,42,.7);
  opacity:0;transform:translateY(5px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.xt[data-step="1"] .xt-f[data-at="1"],.xt[data-step="2"] .xt-f[data-at="1"],
.xt[data-step="3"] .xt-f[data-at="1"],.xt[data-step="4"] .xt-f[data-at="1"],
.xt[data-step="2"] .xt-f[data-at="2"],.xt[data-step="3"] .xt-f[data-at="2"],
.xt[data-step="4"] .xt-f[data-at="2"],
.xt[data-step="3"] .xt-f[data-at="3"],.xt[data-step="4"] .xt-f[data-at="3"],
.xt[data-step="4"] .xt-f[data-at="4"]{opacity:1;transform:none}
.xt-f .lab{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--ash);margin-bottom:2px}
.xt-conf{margin-left:auto;font-size:9.5px;font-weight:600;padding:1px 5px;border-radius:3px;
  background:rgba(39,166,68,.16);color:#6cd489;font-variant-numeric:tabular-nums}
.xt-conf.mid{background:rgba(217,166,104,.16);color:var(--amber)}
.xt-f .val{font-size:13px;color:var(--bone);font-weight:530;letter-spacing:-.011em}
.xt-f .src{font-size:10px;color:var(--ash);margin-top:2px;font-variant-numeric:tabular-nums}

/* The caption rail, advancing with the same integer. */
.xt-rail{grid-column:1/-1;display:grid;gap:9px;grid-template-columns:repeat(4,1fr);margin-top:2px}
.xt-rail div{font-size:11.5px;color:var(--ash);line-height:1.45;padding-top:9px;
  border-top:1.5px solid var(--graphite);transition:color .3s var(--ease),border-color .3s var(--ease)}
.xt-rail b{display:block;font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--smoke);margin-bottom:3px;transition:color .3s var(--ease);font-variant-numeric:tabular-nums}
.xt[data-step="1"] .xt-rail div:nth-child(1),.xt[data-step="2"] .xt-rail div:nth-child(2),
.xt[data-step="3"] .xt-rail div:nth-child(3),.xt[data-step="4"] .xt-rail div:nth-child(4){
  color:var(--mist);border-color:var(--lime)}
.xt[data-step="1"] .xt-rail div:nth-child(1) b,.xt[data-step="2"] .xt-rail div:nth-child(2) b,
.xt[data-step="3"] .xt-rail div:nth-child(3) b,.xt[data-step="4"] .xt-rail div:nth-child(4) b{color:var(--lime)}

@media(max-width:780px){
  .xt{grid-template-columns:1fr}
  .xt-rail{grid-template-columns:1fr 1fr}
}

/* ==================================================================
   Scroll.

   Three layers, and each one has to be complete on its own:

     1. No JavaScript, no scroll timelines. Everything is visible and
        correct. This is what a screenshot and a slow phone get.
     2. IntersectionObserver. Reveals and the data-step demonstrations.
        Works everywhere, so it carries anything that matters.
     3. Native CSS scroll timelines. Chrome 115 and Safari 26 have them,
        Firefox does not yet, so NOTHING here may carry meaning. It is
        depth and weight only: if a Firefox reader never sees any of it,
        they have missed nothing.

   Deliberately absent: fade-up on every element, pinned full-page
   scrolljacking, horizontal hijack, cursor trails. Those read as a 2014
   template, and the research bears that out.

   Parallax uses the independent `translate` and `scale` properties, not
   `transform`, so it cannot fight the reveal transitions that already
   use `transform`.
   ================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Paper has weight. Each sheet drifts a different distance, so the
       three separate slightly as they pass rather than moving as a slab.
       Total travel is under 30px: felt, not seen. */
    .pp-sheet{animation:drift linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
    .pp-fan .pp-sheet:nth-child(1){--dr:15px}
    .pp-fan .pp-sheet:nth-child(2){--dr:6px}
    .pp-fan .pp-sheet:nth-child(3){--dr:19px}
    @keyframes drift{from{translate:0 var(--dr,10px)}to{translate:0 calc(var(--dr,10px) * -1)}}

    /* A frame settles as it arrives, then holds. Scale only, and only a
       point and a half, which reads as the panel coming to rest. */
    .shot .app,.xt-paper{animation:settle linear both;animation-timeline:view();
      animation-range:entry 5% entry 85%}
    @keyframes settle{from{scale:.985}to{scale:1}}

    /* A floating panel lifts further than the frame it sits on. That
       difference is the whole illusion of depth. */
    .float{animation:drift linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%;--dr:22px}

  }
}

/* A row of actions. It was an inline flex with a fixed gap, so on a phone the
   labels wrapped inside the buttons and a 36px control became 59px of ragged
   text. A button whose label breaks in half does not read as finished. */
.acts{display:flex;gap:12px;flex-wrap:wrap}
.acts>*{white-space:nowrap}
@media(max-width:520px){
  .acts{flex-direction:column;align-items:stretch}
  .acts>*{justify-content:center;text-align:center}
}
/* The wordmark asked for 26px of line box inside 24px. Nothing clipped, but it
   is the first thing on every page, so it should be exact. */
.wordmark{line-height:1.22}

/* ==================================================================
   Consent.

   The security page argued about permissions in a two column table.
   The permissions are granted on a screen the person actually sees, so
   show that screen. It is proof rather than a claim, and it is the one
   picture that cannot be argued with.
   ================================================================== */
.cs{max-width:420px;margin:0 auto;background:#fff;color:#202124;border-radius:12px;
  box-shadow:rgba(0,0,0,.6) 0 24px 60px -20px, rgba(0,0,0,.1) 0 0 0 1px;overflow:hidden}
.cs-top{padding:22px 24px 0;text-align:center}
.cs-top .g{display:inline-flex;gap:7px;align-items:center;font-size:13px;color:#5f6368;margin-bottom:14px}
.cs-top h4{margin:0 0 4px;font-size:16px;font-weight:400;color:#202124;letter-spacing:0}
.cs-top h4 b{font-weight:500}
.cs-acct{display:inline-flex;align-items:center;gap:7px;margin:12px 0 4px;padding:4px 12px 4px 5px;
  border:1px solid #dadce0;border-radius:999px;font-size:13px;color:#3c4043}
.cs-acct .av{width:20px;height:20px;border-radius:50%;background:#1a73e8;color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:600}
.cs-body{padding:16px 24px 4px}
.cs-lead{font-size:12.5px;color:#5f6368;margin:0 0 10px}
.cs-scope{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:13px;color:#3c4043;line-height:1.45}
.cs-scope .tick{flex:none;width:16px;height:16px;margin-top:1px;color:#5f6368}
.cs-scope b{font-weight:500;color:#202124}
.cs-scope span{display:block;font-size:11.5px;color:#5f6368;margin-top:1px}
.cs-none{margin:12px 0 0;padding:11px 13px;background:#f1f3f4;border-radius:8px;font-size:12px;color:#5f6368;line-height:1.5}
.cs-none b{color:#202124;font-weight:500}
.cs-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px 18px}
.cs-btn{font-size:13.5px;font-weight:500;padding:8px 22px;border-radius:5px;white-space:nowrap}
.cs-btn.g{background:#1a73e8;color:#fff}
.cs-btn.t{color:#1a73e8}
.cs-note{margin:14px auto 0;max-width:420px;font-size:12px;color:var(--ash);line-height:1.55;text-align:center}

/* ==================================================================
   The driven browser.

   Computer use argued in a table about having a way in or not. The
   honest picture is the screen itself, with a box on each field before
   it is filled and a step list keeping pace beside it. The portal is
   invented, like every company on this site.
   ================================================================== */
.bz{display:grid;gap:14px;grid-template-columns:1.5fr .85fr;align-items:start}
.bz-win{background:#1c1d21;border-radius:10px;overflow:hidden;
  box-shadow:rgba(0,0,0,.6) 0 20px 50px -20px, rgba(255,255,255,.06) 0 0 0 1px}
.bz-chrome{display:flex;align-items:center;gap:8px;padding:9px 11px;background:#2a2c31}
.bz-chrome i{width:9px;height:9px;border-radius:50%;background:#45474d;display:block}
.bz-url{flex:1;margin-left:6px;background:#1c1d21;border-radius:5px;padding:4px 10px;
  font-size:11px;color:var(--fog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz-page{background:#f4f5f7;color:#1c1d21;padding:15px 16px;position:relative;min-height:212px}
.bz-page h5{margin:0 0 3px;font-size:13px;font-weight:600}
.bz-page .sub{font-size:11px;color:#6b6b74;margin:0 0 13px}
.bz-fld{margin-bottom:9px;position:relative}
.bz-fld label{display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:#6b6b74;margin-bottom:3px}
.bz-fld .box{background:#fff;border:1px solid #d3d5da;border-radius:5px;padding:6px 9px;
  font-size:12px;color:#9a9ca3;min-height:29px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.bz-fld .box b{color:#1c1d21;font-weight:500;opacity:0;transition:opacity .2s var(--ease)}
/* the numbered mark that says which field is next */
.bz-n{position:absolute;left:-9px;top:15px;width:18px;height:18px;border-radius:5px;
  background:#6366f1;color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;
  box-shadow:0 0 0 2px #f4f5f7;opacity:0;transform:scale(.6);
  transition:opacity .25s cubic-bezier(.2,.7,.3,1),transform .25s cubic-bezier(.2,.7,.3,1)}
.bz[data-step="1"] [data-at="1"] .bz-n,.bz[data-step="2"] [data-at="2"] .bz-n,
.bz[data-step="3"] [data-at="3"] .bz-n,.bz[data-step="4"] [data-at="4"] .bz-n{opacity:1;transform:scale(1)}
.bz[data-step="1"] [data-at="1"] .box,.bz[data-step="2"] [data-at="2"] .box,
.bz[data-step="3"] [data-at="3"] .box,.bz[data-step="4"] [data-at="4"] .box{
  border-color:#6366f1;box-shadow:0 0 0 2px #e0e7ff}
.bz[data-step="2"] [data-at="1"] .box b,.bz[data-step="3"] [data-at="1"] .box b,
.bz[data-step="4"] [data-at="1"] .box b,.bz[data-step="3"] [data-at="2"] .box b,
.bz[data-step="4"] [data-at="2"] .box b,.bz[data-step="4"] [data-at="3"] .box b{opacity:1}
/* the pointer, moving between fields rather than drifting about */
.bz-cur{position:absolute;width:15px;height:15px;pointer-events:none;z-index:4;
  transition:translate .55s cubic-bezier(.4,.1,.2,1);translate:14px 190px}
.bz[data-step="1"] .bz-cur{translate:22px 62px}
.bz[data-step="2"] .bz-cur{translate:22px 104px}
.bz[data-step="3"] .bz-cur{translate:22px 146px}
.bz[data-step="4"] .bz-cur{translate:22px 188px}
.bz-cur svg{width:15px;height:15px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.bz-steps{display:flex;flex-direction:column;gap:2px}
.bz-steps div{padding:9px 0 9px 13px;border-left:2px solid var(--graphite);font-size:12.5px;
  color:var(--ash);line-height:1.45;transition:color .3s var(--ease),border-color .3s var(--ease)}
.bz-steps b{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--smoke);margin-bottom:2px;font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.bz[data-step="1"] .bz-steps div:nth-child(1),.bz[data-step="2"] .bz-steps div:nth-child(2),
.bz[data-step="3"] .bz-steps div:nth-child(3),.bz[data-step="4"] .bz-steps div:nth-child(4){
  color:var(--mist);border-color:var(--lime)}
.bz[data-step="1"] .bz-steps div:nth-child(1) b,.bz[data-step="2"] .bz-steps div:nth-child(2) b,
.bz[data-step="3"] .bz-steps div:nth-child(3) b,.bz[data-step="4"] .bz-steps div:nth-child(4) b{color:var(--lime)}
@media(max-width:780px){.bz{grid-template-columns:1fr}}

/* A magnitude drawn inside a row, so a findings list reads as a measurement
   rather than as a list of complaints. Sits between the label and the number. */
.lnbar{flex:0 0 96px;height:6px;border-radius:3px;background:var(--graphite);overflow:hidden}
.lnbar i{display:block;height:100%;border-radius:3px;background:var(--smoke);width:calc(var(--v)*1%)}
.ln.top .lnbar i{background:var(--lime)}
.ln.top .tx b{color:var(--paper)}
@media(max-width:720px){.lnbar{display:none}}

/* The long headline needs a lower size than the 72px opener, or it fills the
   screen. This is the one page allowed to do it, and it is a deliberate
   exception the copy forced rather than a new rule. */
.hero-h1{font-size:54px;line-height:1.06;letter-spacing:-.03em;max-width:17ch;max-width:none}
@media(max-width:900px){.hero-h1{font-size:38px}}
@media(max-width:560px){.hero-h1{font-size:30px}}
/* One word carries the accent, and it is the only lime on the view. */
.cycle{color:var(--lime);display:inline-block}
/* Running: every word in one grid cell, clipped to the line, so a word enters
   from below and leaves upward without anything around it moving. Only the
   final width change touches layout, and it happens once. */
.cycle.on{display:inline-block;vertical-align:bottom;white-space:nowrap;overflow:hidden;
  padding-bottom:.14em;margin-bottom:-.14em}
.cycle .c{display:inline-block;will-change:transform,opacity}
/* The pause control exists for keyboard users and appears only on focus. */
.cycle-pause{position:absolute;left:-9999px;font:inherit;font-size:12.5px;color:var(--mist);
  background:var(--carbon);box-shadow:var(--sh-line);border:0;border-radius:6px;padding:6px 10px;cursor:pointer}
.cycle-pause:focus-visible{position:static;display:inline-block;margin-top:10px;outline:1px solid var(--lime)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.qual{font-size:14px;color:var(--fog);line-height:1.5;max-width:34ch;text-align:right}
@media(max-width:760px){.qual{text-align:left;max-width:none}}

/* The video frame on the arrival page. It holds its shape before the file
   exists, so the page can be judged now rather than after the edit. */
.vid{position:relative;aspect-ratio:16/9;background:
  radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.05),rgba(255,255,255,0) 60%),var(--void);
  display:grid;place-items:center;gap:11px}
.vid .play{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--lime);color:var(--void);box-shadow:rgba(228,242,34,.22) 0 0 0 10px}
.vid .play svg{width:24px;height:24px;margin-left:2px}
.vidcap{font-size:12px;color:var(--ash)}
/* The hero call to action, as its own thing rather than inline styles fighting
   the mobile rules. Right aligned beside the sentence on a wide screen, full
   width under it on a phone. */
.hero-cta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  margin-left:auto;min-width:0;max-width:100%}
@media(max-width:760px){
  .hero-cta{align-items:stretch;margin-left:0;width:100%}
  .hero-cta .qual{text-align:left;max-width:none}
}

/* On a phone the hero frame shows only the question and its answer: the
   sidebar and sources column pushed the answer off screen. */
@media(max-width:620px){
  #heroshot .app{min-width:0}
  #heroshot .side,#heroshot .insp,#heroshot .bar .r{display:none}
}

/* Sabri's page parts: the line naming who it is for, the offer, the FAQ, the PS. */
.eyebrow{font-size:15px;color:var(--mist);font-weight:510;margin-bottom:18px;letter-spacing:-.005em}
.offer{margin-top:40px;max-width:620px;background:var(--carbon);box-shadow:var(--sh-line);
  border-radius:var(--r-card);padding:22px 24px}
.offer .row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--graphite);font-size:17px;color:var(--mist)}
.offer .row b{color:var(--paper);font-weight:510;font-variant-numeric:tabular-nums}
.offer .row.total{border-bottom:0;font-size:20px}
.offer .row.total b{color:var(--lime)}
.offer .note{font-size:15px;color:var(--fog);margin:10px 0 18px}
.faq{margin-top:36px;max-width:760px}
.faq details{border-bottom:1px solid var(--graphite);padding:16px 0}
.faq summary{cursor:pointer;font-size:18px;color:var(--paper);font-weight:510;list-style-position:outside}
.faq details p{font-size:17px;line-height:1.6;color:var(--mist);margin:10px 0 0;max-width:62ch}
.ps{max-width:760px;font-size:18px;line-height:1.65;color:var(--mist)}
.ps p{margin:0 0 22px}
.ps b{color:var(--paper)}

/* The mock system's buttons share the .acts name with the page's real buttons.
   On a phone the page rule stacked and stretched them into a bare blue bar, so
   the mock keeps its own small row, and its order rows get narrower columns. */
@media(max-width:820px){
  .cu .acts{flex-direction:row;align-items:center;flex-wrap:wrap}
  .cu .acts>*{flex:none}
  .cu .r{grid-template-columns:72px minmax(0,1fr) 64px;gap:8px}
}

/* Hero reads top to bottom: promise, explanation, then the button right under it
   (Sabri 29:13), with the offer line beneath the button. */
.hero-stack{display:flex;flex-direction:column;align-items:flex-start;gap:26px;margin-top:22px}
.hero-stack .say{max-width:56ch;font-size:19px}
.hero-stack .hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-left:0}
.hero-stack .qual{text-align:left;max-width:none}
@media(max-width:520px){.hero-stack .hero-cta{align-items:stretch;width:100%}.hero-stack .say{font-size:17px}}
.hero-stack .btn-lime,.offer .btn-lime,.ps .btn-lime,.btn-lime.big{font-size:16px;padding:13px 22px}
.hero-stack .btn-ghost{font-size:15px;padding:12px 18px}
.fig.steps .cap{margin-bottom:26px}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--fog);font-weight:300;font-size:26px;line-height:1;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--lime)}
.ps{border-left:2px solid var(--lime);padding:4px 0 4px 26px}

/* Eyebrow (Sabri 24:38): small icons that carry proof before the headline makes
   its claim, the strongest proof first, then who the page is for. */
.eyebrow{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.eyebrow .eb{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--fog);font-weight:500}
.eyebrow .eb .i{width:14px;height:14px;color:var(--fog)}
.eyebrow .eb.cred{color:var(--paper);background:rgba(255,255,255,.06);box-shadow:var(--sh-line);
  border-radius:var(--r-pill);padding:5px 11px 5px 9px}
.eyebrow .eb.cred .i{color:var(--lime)}

/* ---------- Colour in the dark ----------
   The ground stays black; colour lives in soft light behind it. Three blurred
   blobs drift behind the hero, every product picture sits in its own glow, and
   a faint wash keeps the long page from going flat below the fold. */
#sky{height:900px;overflow:hidden;background:none}
#sky::before,#sky::after,#sky i{content:"";position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
#sky::before{width:58vw;height:58vw;max-width:820px;max-height:820px;left:-8vw;top:-10vw;
  background:radial-gradient(circle,rgba(99,102,241,.42),rgba(99,102,241,0) 68%);animation:sky-a 26s ease-in-out infinite alternate}
#sky::after{width:50vw;height:50vw;max-width:720px;max-height:720px;right:-10vw;top:-4vw;
  background:radial-gradient(circle,rgba(2,184,204,.30),rgba(2,184,204,0) 68%);animation:sky-b 32s ease-in-out infinite alternate}
@keyframes sky-a{to{transform:translate(9vw,6vw) scale(1.12)}}
@keyframes sky-b{to{transform:translate(-8vw,8vw) scale(.92)}}
.shot::before{background:radial-gradient(74% 62% at 50% 100%,rgba(var(--glow),.40) 0%,rgba(var(--glow),.14) 42%,transparent 74%);filter:blur(42px)}
body{background:
  radial-gradient(60% 40% at 100% 45%,rgba(99,102,241,.07),transparent 70%),
  radial-gradient(55% 35% at 0% 75%,rgba(2,184,204,.06),transparent 70%),
  radial-gradient(50% 30% at 60% 100%,rgba(228,242,34,.04),transparent 70%),
  var(--void)}
@media (prefers-reduced-motion:reduce){#sky::before,#sky::after{animation:none}}
/* The dream outcome, said once and plainly, between the promise and the detail. */
.outcome{font-size:22px;line-height:1.4;color:var(--paper);font-weight:450;margin:18px 0 0;max-width:40ch;letter-spacing:-.012em}
@media(max-width:560px){.outcome{font-size:18px}}
.scroll.fitted{overflow:hidden}
.scroll.fitted>.app{min-width:0;flex:none}

/* A real recording of the browser agent. It only loads once it is on screen,
   and plays muted and looped, like a screenshot that moves. */
.rec{margin:44px 0 0;position:relative}
.rec video{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:1260/580;background:transparent;
  /* The recording's black was lifted to the page colour when it was cut, and
     the last few percent of each edge fade out, so there is no box: only the
     glowing browser and its panel show. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  mask-composite:intersect}
.rec figcaption{position:relative;z-index:1;margin-top:16px;font-size:15px;line-height:1.55;color:var(--fog);max-width:70ch}

/* Asking the WhatsApp group: the table first, at full strength. A beat later
   the rest of it steps back, the message the answer came from lights up, and
   the answer rises into the corner that leaves that message in view. */
.shot .tbl>.side,.shot .tbl .ln{transition:opacity .9s var(--ease),filter .9s var(--ease),background .9s var(--ease),box-shadow .9s var(--ease)}
.shot.asking .tbl>.side,.shot.asking .tbl .ln:not(.src){opacity:.32;filter:saturate(.6)}
.shot.asking .tbl .ln.src{background:rgba(228,242,34,.07);box-shadow:inset 2px 0 0 #e4f222}
body.anim .float.ask.placed{opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .8s var(--ease),transform .9s cubic-bezier(.16,1,.3,1);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08)}
body.anim .float.ask.placed.on{opacity:1;transform:none}
.float.ask .doc{box-shadow:inset 2px 0 0 #e4f222}
@media (prefers-reduced-motion:reduce){body.anim .float.ask.placed{transition:none;transform:none;opacity:1}}
/* Never seen in the flow first and then jump: hidden until it is placed. */
body.anim .float[data-place]:not(.placed){opacity:0 !important}

/* Nothing a reader is meant to read is set small. The trust row, the
   built-or-not chips, the section links and the captions all come up to a
   comfortable size, with room around them. Text inside the product pictures
   is part of the picture and keeps its own scale. */
.proof{gap:44px}
.proof .hd{gap:9px}
.proof b{font-size:15px;color:var(--paper)}
.proof span{font-size:14px;color:var(--fog);margin-top:5px;line-height:1.5}
.chip{padding:20px 20px;gap:10px;min-height:104px}
.chip b{font-size:15px}
.chip span{font-size:14px;color:var(--fog);line-height:1.5}
.go{font-size:15px}
.fig .cap{font-size:13px;letter-spacing:.09em}
.fine{font-size:13px;line-height:1.6}
@media(max-width:820px){.proof{gap:26px 22px}}

/* ---------- The logo wall ----------
   Three rows of every tool an agent can work in, drifting in alternate
   directions at slightly different speeds, fading out at both edges. Each track
   holds its row twice, so sliding it by half its width loops without a seam.
   Hover or touch pauses it; reduced motion shows it still. */
.logowall{margin-top:44px;display:flex;flex-direction:column;gap:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.lg-row{overflow:hidden}
.lg-track{display:flex;gap:14px;width:max-content;animation:lg-slide 70s linear infinite}
.lg-dup{display:contents}
.lg-row.r1 .lg-track{animation-duration:82s;animation-direction:reverse}
.lg-row.r2 .lg-track{animation-duration:64s}
.logowall:hover .lg-track,.logowall:active .lg-track{animation-play-state:paused}
@keyframes lg-slide{to{transform:translateX(calc(-50% - 7px))}}
.lg-t{flex:none;display:inline-flex;align-items:center;gap:11px;height:58px;padding:0 20px;
  border-radius:14px;background:var(--carbon);box-shadow:var(--sh-line);
  transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.lg-t:hover{background:var(--obsidian);box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.lg-t img{width:26px;height:26px;object-fit:contain;display:block}
.lg-t b{font-size:15px;font-weight:510;color:var(--mist);letter-spacing:-.011em;white-space:nowrap}
.lg-t.mark{padding:0 24px}
.lg-t.mark img{width:auto;height:22px;max-width:150px}
@media(max-width:640px){
  .logowall{gap:10px;margin-top:32px}
  .lg-track{gap:10px}
  .lg-t{height:48px;padding:0 15px;gap:9px;border-radius:12px}
  .lg-t img{width:22px;height:22px}
  .lg-t b{font-size:14px}
  .lg-t.mark img{height:18px}
  @keyframes lg-slide{to{transform:translateX(calc(-50% - 5px))}}
}
@media (prefers-reduced-motion:reduce){.lg-track{animation:none}.lg-row{overflow-x:auto}}
/* Marks drawn in a dark brand colour would vanish on the tile, so they show in
   white, the way the ads do. */
.lg-t.inv img{filter:brightness(0) invert(1);opacity:.9}
/* The hero shows the agent's own job, labelled, rather than a person asking. */
.q .job{color:var(--lime);font-weight:600;margin-right:2px}

/* No browser margin round the page: the header runs edge to edge, and the
   ground behind the page is the same dark, so nothing shows above the header
   or when a phone is pulled past the top. */
html,body{margin:0}
html{background:var(--void)}