/* The feature slides as galleries (Poly's features grid): a centred title over a bento of five tiles, four columns,
   a wide-narrow-narrow row over a wide-wide row. Each tile is either a close-up of the real interface or an image
   of the idea, on its own plain background, with a numbered caption at its foot. Tiles are not links. */
/* the frame keeps a transform of its own (a hundredth of a pixel: GSAP counts an identity matrix as none). GSAP reads
   a fixed frame's matrix by lifting it out of the DOM when it has none, and that reloads every iframe inside (the live
   project page in tile 06) on each slide */
.gal-p { display:block; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; transform:translate(.01px, 0); }
.gal-p::-webkit-scrollbar { display:none; }
/* the title stands as far under the nav (72 px) as the tiles stand under it: 48 px each side, the design system's title gap */
.gal { width:90vw; margin:0 auto; padding:calc(72px + 48px) 0 9rem; }
.gal h2 { text-align:center; font-size:2.75vw; line-height:1.1; letter-spacing:-.01em; font-weight:600; color:var(--tx); margin-bottom:48px; }
.gal h2 .sf { position:relative; display:inline-block; }
.gal h2 .underline { position:absolute; left:-2%; top:100%; width:104%; margin-top:-.45em; height:auto; overflow:visible; }
.gal h2 .underline path { stroke-dashoffset:0; animation:none; stroke:var(--tx); }
.bento { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:20.8vw; gap:.9vw; }
/* radii as the site's: a tile is a picture frame (12 px, as the design system's media), the interface on it a small glass card (8 px) */
.tile { position:relative; overflow:hidden; border-radius:12px; isolation:isolate; background:#EFE7DA; color:#151D20; }
.tile.w2 { grid-column:span 2; }
.tile.tall { grid-column:span 2; grid-row:span 2; }
/* the day runs top to bottom: dawn, morning, noon, sunset, dusk, night. Plain tiles carry the hour as a grained gradient */
.tile[data-tone]::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.tile > .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.tile .tart { position:absolute; inset:0; }
.tile .cap { position:absolute; left:0; right:0; bottom:0; z-index:5; display:grid; grid-template-columns:minmax(0,1fr); align-items:start; padding:2.2rem 1.4rem 1.2rem; color:#fff;
  /* as Poly's tiles: only a short, soft shade under the words, not a dark band */
  background:linear-gradient(to top, rgba(18,22,26,.42) 0%, rgba(18,22,26,.18) 55%, rgba(18,22,26,0) 100%); text-shadow:0 1px 12px rgba(18,22,26,.35); }
.gal-p .demo[hidden] { display:none !important; }
.cap h3 { font-size:1.75rem; font-weight:500; letter-spacing:-.015em; line-height:1.1; }
.cap p { font-size:1.05rem; line-height:1.32; color:rgba(255,255,255,.86); margin-top:.3rem; max-width:36rem; }

/* the shared card look inside tiles */
/* one glass for every UI surface in the gallery, taken from the 08 ticket: smoked navy, a hairline of light, no blur */
.gal { --gl-bg:rgba(26,34,54,.62); --gl-sh:inset 0 0 0 1px rgba(255,255,255,.14), 0 2rem 3rem -2rem rgba(0,0,0,.5); --gl-tx:#fff; --gl-tx2:rgba(255,255,255,.8); --gl-tx3:rgba(255,255,255,.7); --gl-sub:rgba(255,255,255,.1); --gl-div:rgba(255,255,255,.12); --gl-bar:rgba(255,255,255,.18); }
.uc, .glassp, .tk { background:var(--gl-bg); box-shadow:var(--gl-sh); color:var(--gl-tx); }
.uc { border-radius:8px; } .glassp { border-radius:8px; }


.ico { display:inline-grid; place-items:center; flex:none; }
/* 06 · the real project page (assets/app/projects.html) in a glass card: its hero and the road to signing, scaled
   to the tile by gallery.js, fading out under the caption */
.a-inbox .d-orch { display:block; zoom:1; margin:0; position:absolute; left:6%; right:6%; top:1.6rem; }
.a-inbox .d-orch .thread { display:none; }
.a-inbox .inbox { border-radius:8px; }
.tall .a-inbox .d-orch { zoom:.94; left:9%; right:9%; top:4.6rem; } .tall .a-inbox .inbox { height:41rem; overflow:hidden; display:flex; flex-direction:column; } .tall .a-inbox .cols3 { flex:1; min-height:0; overflow:hidden;  -webkit-mask:linear-gradient(#000 80%,transparent 98%); mask:linear-gradient(#000 80%,transparent 98%); }
.a-inbox { --panel:var(--gl-bg); --panel2:var(--gl-sub); --line:var(--gl-div); --tx:#fff; --mut:var(--gl-tx2); --dim:var(--gl-tx3); --sky:#42BFFF; }

.ico svg { display:block; }
.okd { width:.55rem; height:.55rem; border-radius:50%; background:#2FA36B; display:inline-block; }


/* 02 · a thread message and the tasks it made */
.a-thread { display:grid; align-content:start; justify-items:center; padding:1.4rem 1.4rem 0; }
.a-thread .msgc { width:100%; max-width:24rem; display:flex; gap:.7rem; padding:.8rem 1rem; font-size:1rem; line-height:1.35; position:relative; z-index:3; }
.a-thread .msgc img { width:1.7rem; }
.a-thread .msgc time { color:#8E9AA0; font-size:.85rem; margin-left:.3rem; }
.a-thread .fan { width:100%; max-width:22rem; display:grid; gap:.35rem; margin-top:.45rem; }
.a-thread .tc { display:flex; align-items:center; gap:.55rem; padding:.5rem .85rem; font-size:.95rem; box-shadow:inset 3px 0 0 #1F8FD6, 0 .8rem 1.6rem -1rem rgba(28,60,90,.4); }
.a-thread .tc i { width:.5rem; height:.5rem; border-radius:50%; background:#1F8FD6; }

/* 03 · approve */
.a-approve { display:grid; place-items:center; padding-bottom:5rem; }
.a-approve .apc { width:min(84%, 22rem); padding:1.2rem 1.2rem 1rem; }
.a-approve .t { font-size:1.15rem; font-weight:600; }
.a-approve .s { color:#6B7A82; font-size:.95rem; margin-top:.25rem; }
.a-approve .acts { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1.2rem; }
.a-approve .b { padding:.5rem .95rem; border-radius:.55rem; font-size:.95rem; font-weight:600; box-shadow:inset 0 0 0 1px rgba(21,29,32,.14); }
.a-approve .b.go { background:#151D20; color:#fff; box-shadow:none; transition:background .25s; }
.a-approve .b.go.done { background:#2FA36B; }
.a-approve .cur { position:absolute; width:1.6rem; left:62%; top:58%; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

/* 04 · the steps, over the pile of work they came from */
.a-log { display:grid; place-items:start center; padding-top:1.6rem; }
.a-log .glassp { width:min(80%, 34rem); padding:1rem 1.2rem 1.1rem; background:rgba(255,255,255,.78); }
.a-log .gh { display:flex; align-items:center; gap:.5rem; font-size:1.1rem; font-weight:700; margin-bottom:.6rem; }
.a-log .gh .okd { margin-left:auto; }
.a-log li { list-style:none; display:flex; align-items:center; gap:.6rem; padding:.28rem 0; font-size:.98rem; color:#33424A; white-space:nowrap; }
.a-log li .ico { width:1.3rem; height:1.3rem; border-radius:.35rem; background:#fff; box-shadow:0 0 0 1px rgba(21,29,32,.08); }
.a-log li .ck { margin-left:auto; color:#2FA36B; font-weight:700; }
.a-log li.more { color:#6B7A82; font-size:.92rem; padding-top:.5rem; }
.a-log ol { padding:0; margin:0; }

/* 05 · one task, layered through its states (Poly's version-history stack) */
.a-stack .sc { position:absolute; width:46%; padding:1rem 1.1rem; }
.a-stack .sc .t { font-size:1.05rem; font-weight:600; }
.a-stack .sc .m { display:flex; align-items:center; gap:.45rem; margin-top:.7rem; font-size:.9rem; color:#55636B; }
.a-stack .chip { font-size:.85rem; }

/* 06 · agent icons */
.a-icons { display:grid; grid-template-columns:repeat(2,auto); justify-content:center; align-content:center; gap:1rem; padding-bottom:5rem; }
.gicon { width:5.6rem; height:5.6rem; border-radius:1.35rem; display:grid; place-items:center; background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.6)); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,.8), 0 1.2rem 2.4rem -1rem rgba(28,60,90,.45); }
.gicon.sm { width:4.6rem; height:4.6rem; border-radius:1.1rem; }

/* search, used twice */
.a-search { display:grid; place-items:start center; align-content:start; padding-top:1.6rem; }
.a-search .sb { width:min(88%, 26rem); display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; font-size:1.08rem; }
.a-search .sb svg { flex:none; }
.a-search .sb .q::after { content:""; display:inline-block; width:2px; height:1.1em; background:#1F8FD6; vertical-align:-.15em; margin-left:2px; animation:blink 1s steps(1) infinite; }
.a-search .rs { width:min(88%, 26rem); margin-top:1.1rem; padding:.4rem; }
.a-search .r { display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; border-radius:.55rem; font-size:.95rem; }
.a-search .r .ico { width:1.4rem; height:1.4rem; border-radius:.4rem; background:#F4F1EC; }
.a-search .r small { margin-left:auto; color:#8E9AA0; font-size:.82rem; }
.a-search .r:first-child { background:#EEF5FB; }
@keyframes blink { 50% { opacity:0; } }

/* 08 · the agents, side by side */
.a-agents .d-agents { zoom:.84; width:auto; margin:0; position:absolute; left:0; right:0; top:1.9rem; justify-content:flex-start; padding-left:2rem; -webkit-mask:linear-gradient(90deg,#000 80%,transparent); mask:linear-gradient(90deg,#000 80%,transparent); }
.a-agents .ag { box-shadow:0 1.4rem 3rem -1.4rem rgba(28,60,90,.45); }

/* 09 · people and agents in one pill (Poly's avatars) */
.a-team { display:grid; place-items:center; padding-bottom:6.4rem; }
.a-team .pill { display:flex; padding:.8rem 1rem; border-radius:999px; }
.a-team .pill > * { width:5.4rem; height:5.4rem; border-radius:50%; margin-left:-.9rem; border:3px solid rgba(255,255,255,.9); object-fit:cover; background:#fff; display:grid; place-items:center; box-shadow:0 .6rem 1.2rem -.6rem rgba(0,0,0,.35); }
.a-team .pill > :first-child { margin-left:0; }

/* 10 · one board, everyone on it */
.a-board { padding:1.6rem 1.6rem 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; align-content:start; }
.a-board h6 { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#6B7A82; margin:0 0 .5rem .2rem; font-weight:700; }
.a-board .bc { padding:.75rem .8rem; margin-bottom:.5rem; font-size:.95rem; font-weight:600; }
.a-board .who { display:flex; align-items:center; gap:.4rem; margin-top:.5rem; font-size:.82rem; font-weight:500; color:#55636B; }
.a-board .who img, .a-board .who .ico { width:1.35rem; height:1.35rem; border-radius:50%; object-fit:cover; }
.a-board .who .ico { border-radius:.35rem; background:#fff; box-shadow:0 0 0 1px rgba(21,29,32,.1); }

/* 11 · cover mode, the night card only */
.a-cover .d-pro { zoom:1; margin:0; display:block; position:absolute; left:7%; right:7%; top:1.6rem; }
.a-cover .d-pro .cmp { display:none; }
.a-cover .d-pro .desk { height:24rem; }

/* 13 · the notch, opened by the companion */
.a-notch { display:grid; place-items:start center; padding-top:1.8rem; }
.a-notch .nt { width:min(92%, 24rem); background:#0B0C0E; color:#fff; border-radius:0 0 1.4rem 1.4rem; padding:.7rem 1rem .9rem; box-shadow:0 1.2rem 2.4rem -1rem rgba(0,0,0,.6); }
.a-notch .nt .hd { display:flex; align-items:center; gap:.55rem; font-size:.98rem; font-weight:700; }
.a-notch .nt .hd img { height:1.6rem; }
.a-notch .nt .hd .dots { margin-left:auto; display:flex; gap:3px; } .a-notch .nt .hd .dots i { width:5px; height:5px; border-radius:50%; background:#42BFFF; }
.a-notch .cxs { display:grid; gap:.4rem; margin-top:.7rem; }
.a-notch .cx { display:flex; align-items:center; gap:.55rem; padding:.5rem .6rem; border-radius:.6rem; background:rgba(255,255,255,.08); font-size:.9rem; color:#D9DEE2; }
.a-notch .cx .ico { width:1.3rem; height:1.3rem; border-radius:.35rem; background:#fff; }

/* 14 · drafts written overnight, stacked */
.a-drafts .dr { position:absolute; width:52%; padding:1rem 1.1rem 1.2rem; }
.a-drafts .dr .to { font-size:.88rem; color:#6B7A82; }
.a-drafts .dr .sub { font-size:1.08rem; font-weight:700; margin-top:.25rem; }
.a-drafts .dr .ln { height:.5rem; border-radius:.3rem; background:#ECE8E1; margin-top:.55rem; }
.a-drafts .dr .tag { position:absolute; right:1rem; top:1rem; }

/* 15 · the morning brief */
.a-brief { display:grid; place-items:start center; padding-top:1.6rem; }
.a-brief .uc { width:min(80%, 34rem); padding:1.2rem 1.3rem; }
.a-brief .hd { display:flex; align-items:center; gap:.6rem; font-size:1.1rem; font-weight:700; }
.a-brief .hd img { width:1.5rem; } .a-brief .hd small { margin-left:auto; color:#8E9AA0; font-weight:500; font-size:.88rem; }
.a-brief .nums { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:1rem; }
.a-brief .nums div { padding:.7rem .8rem; border-radius:.7rem; background:#F6F3EE; }
.a-brief .nums b { display:block; font-size:2rem; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.a-brief .nums span { font-size:.88rem; color:#55636B; }
.a-brief .you { display:flex; align-items:center; gap:.55rem; margin-top:.8rem; padding:.65rem .8rem; border-radius:.7rem; background:#FFF4E5; font-size:.95rem; }

/* 18 · the gateway: the line is masked before it leaves */
.a-gate { display:grid; place-items:start center; padding-top:1.8rem; }
.a-gate .uc { width:min(82%, 34rem); padding:1.2rem 1.3rem; }
.a-gate .line { font-size:1.12rem; line-height:1.6; }
.a-gate .pii { position:relative; display:inline-block; }
.a-gate .pii .m { position:absolute; inset:-.05rem -.2rem; border-radius:.35rem; background:#1F8FD6; color:#fff; font:700 .8rem/1.75rem ui-monospace,Menlo,monospace; text-align:center; transform-origin:left center; }
.a-gate .ft { display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }

/* 17 · roles over the person */
.a-roles .rc { position:absolute; display:flex; align-items:center; gap:.45rem; padding:.5rem .8rem; border-radius:.7rem; font-size:.98rem; font-weight:600; background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 .8rem 1.6rem -1rem rgba(0,0,0,.45); color:#151D20; }
.a-roles .rc .okd { background:#1F8FD6; }

/* 19 · a person signs off */
.a-sign { display:grid; place-items:start center; padding-top:1.6rem; }
.a-sign .uc { width:min(80%, 32rem); padding:1.2rem 1.3rem; }
.a-sign .t { font-size:1.15rem; font-weight:700; } .a-sign .s { color:#6B7A82; font-size:.92rem; margin-top:.2rem; }
.a-sign .who { display:flex; align-items:center; gap:.6rem; margin-top:1rem; padding-top:.9rem; border-top:1px solid #EEEAE3; }
.a-sign .who img { width:2.2rem; height:2.2rem; border-radius:50%; object-fit:cover; }
.a-sign .sig { height:2.6rem; margin-left:auto; }
.a-sign .sig path { fill:none; stroke:#1F3C66; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.a-sign .ok { display:flex; align-items:center; gap:.45rem; margin-top:.6rem; color:#23794E; font-size:.95rem; font-weight:600; }

/* 20 · every run, logged */
.a-runs { display:grid; place-items:start center; padding-top:1.6rem; }
.a-runs .glassp { width:min(82%, 34rem); padding:.6rem; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); color:#fff; }
.a-runs .rw { display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius:.6rem; font-size:1rem; }
.a-runs .rw + .rw { border-top:1px solid rgba(255,255,255,.1); }
.a-runs .rw time { margin-left:auto; color:rgba(255,255,255,.6); font:500 .85rem ui-monospace,Menlo,monospace; }
.a-runs .st { width:1.3rem; height:1.3rem; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:800; }
.a-runs .st.ok { background:#2FA36B; } .a-runs .st.hold { background:#E8A33A; } .a-runs .st.run { border:2px solid #42BFFF; border-right-color:transparent; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* 21 · the tools, as app icons */
.a-tools { display:flex; justify-content:center; align-items:center; gap:1.1rem; padding-bottom:5rem; }
.a-tools .gicon { position:relative; }
.a-tools .gicon .okd { position:absolute; right:.45rem; bottom:.45rem; box-shadow:0 0 0 2px #fff; }

/* 23 · files stay where they are; ANIMA reads them in place */
.a-sync { display:grid; place-items:start center; padding-top:1.6rem; }
.a-sync .glassp { width:min(86%, 20rem); padding:1rem 1.1rem; background:rgba(255,255,255,.8); }
.a-sync .row { display:flex; align-items:center; gap:.6rem; padding:.42rem 0; font-size:.98rem; }
.a-sync .row b { margin-left:auto; font-variant-numeric:tabular-nums; }

/* 24 · ANIMA answers in the Slack thread */
.a-slack { display:grid; place-items:start center; padding-top:1.5rem; }
.a-slack .uc { width:min(84%, 36rem); padding:.4rem 0 .8rem; }
.a-slack .ch { display:flex; align-items:center; gap:.5rem; padding:.7rem 1.1rem; font-weight:700; border-bottom:1px solid #EEEAE3; }
.a-slack .m { display:flex; gap:.7rem; padding:.75rem 1.1rem 0; font-size:1rem; line-height:1.4; }
.a-slack .m img { width:2.1rem; height:2.1rem; border-radius:.5rem; object-fit:cover; flex:none; }
.a-slack .m .an { width:2.1rem; height:2.1rem; border-radius:.5rem; background:#EEF5FB; display:grid; place-items:center; flex:none; }
.a-slack .m b small { color:#8E9AA0; font-weight:500; margin-left:.35rem; font-size:.82rem; }
.a-slack .src { display:flex; gap:.4rem; margin-top:.45rem; flex-wrap:wrap; }
.a-slack .src span { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .5rem; border-radius:.4rem; background:#F4F1EC; font-size:.82rem; font-weight:600; }

/* 25 · connected in a click */
.a-connect { display:grid; place-items:start center; padding-top:1.8rem; }
.a-connect .uc { width:min(80%, 30rem); padding:1.2rem 1.3rem; display:flex; align-items:center; gap:1rem; }
.a-connect .uc .gicon { width:3.6rem; height:3.6rem; border-radius:.9rem; }
.a-connect .t { font-size:1.15rem; font-weight:700; } .a-connect .s { color:#6B7A82; font-size:.92rem; margin-top:.15rem; }
.a-connect .btn2 { margin-left:auto; padding:.55rem 1rem; border-radius:.6rem; font-size:.95rem; font-weight:700; background:#151D20; color:#fff; white-space:nowrap; transition:background .3s; }
.a-connect .btn2.on { background:#E7F5EC; color:#23794E; }

/* the tall tiles' interface fades out over its last 56 px, above the caption's words or at the picture's foot (gallery.js sets data-fade, --fe) */
.gal .tile[data-fade] .tart { -webkit-mask:linear-gradient(#000 calc(var(--fe) - 56px), transparent var(--fe)); mask:linear-gradient(#000 calc(var(--fe) - 56px), transparent var(--fe)); }
/* 03 · next time, done for you: one skill card. The first run is yours (a step a second, 12 min), it is saved as a skill,
   then ANIMA runs the same steps in seconds (gallery.js a-skill). No fan of apps around ANIMA: that is the Inbox tile's picture */
/* the card sits centred in what the caption's words leave above it (--cap: from the words' top to the tile's foot, set by gallery.js) */
.a-skill { display:grid; place-items:center; padding-bottom:var(--cap, 0px); }
.a-skill .uc { width:86%; padding:.7rem .85rem .6rem; }
.a-skill .hd { display:flex; align-items:center; gap:.45rem; font-size:.95rem; font-weight:700; }
.a-skill .hd .sp { color:#7FD3FF; font-size:.9rem; }
.a-skill .hd .chip { margin-left:auto; font-size:.72rem; font-weight:700; padding:.28rem .55rem; border-radius:99px; background:var(--gl-sub); color:var(--gl-tx2); white-space:nowrap; }
.a-skill .hd .chip.sky { background:rgba(66,191,255,.22); color:#BFE9FF; }
.a-skill .hd .chip.ok { background:rgba(46,180,120,.26); color:#BFF2D9; }
.a-skill ol { list-style:none; margin:.55rem 0 0; padding:0; display:grid; gap:.32rem; }
.a-skill li { display:flex; align-items:center; gap:.55rem; font-size:.86rem; color:var(--gl-tx2); }
.a-skill .lg { width:1.35rem; height:1.35rem; border-radius:.4rem; background:#fff; display:grid; place-items:center; flex:none; }
.a-skill .lg img { width:14px; height:14px; }
.a-skill .ck { margin-left:auto; width:1.05rem; height:1.05rem; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); display:grid; place-items:center; flex:none; }
.a-skill .ck svg { opacity:0; } .a-skill .ck path { fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.a-skill li.on { color:#fff; } .a-skill li.on .ck { background:#2EB478; box-shadow:none; } .a-skill li.on .ck svg { opacity:1; }
.a-skill.auto li.on .ck { background:#42BFFF; }
.a-skill .ft { display:flex; align-items:center; margin-top:.5rem; padding-top:.45rem; border-top:1px solid var(--gl-div); font-size:.74rem; color:var(--gl-tx3); }
.a-skill .ft .tm { margin-left:auto; font-family:'JetBrains Mono',ui-monospace,monospace; color:#fff; }
@media (prefers-reduced-motion:reduce) { .a-search .sb .q::after, .a-runs .st.run { animation:none; } }


/* the gallery sits on a plain page, like Poly's */
.gal-p { background:#FFFFFF; }

/* ---------- like Poly's tiles: every mock sits whole inside its tile, with wide margins on every side ---------- */
.tile .tart { overflow:hidden; }
.tall .a-agents .d-agents { zoom:1.12; top:2.4rem; padding-left:2.4rem; -webkit-mask:none; mask:none; }
.tall .a-agents .ag { min-height:44rem; }
.tall .a-cover .d-pro { zoom:1.22; left:7%; right:-25%; top:2.2rem; } .tall .a-cover .d-pro .desk { height:30rem; }
.tall .a-log { place-items:start; padding:2.6rem 0 0 8%; } .tall .a-log .glassp { zoom:1.3; width:34rem; }
.tall .a-board { zoom:1.4; padding:2rem 0 0 2rem; width:150%; grid-template-columns:repeat(3,16rem); }
.tall .a-slack { place-items:start; padding:2.6rem 0 0 7%; } .tall .a-slack .uc { zoom:1.4; width:34rem; }
.a-stack { zoom:1.25; } .a-stack .sc { width:22rem; }
.a-thread { place-items:start; justify-items:start; padding:1.8rem 0 0 1.6rem; } .a-thread .msgc, .a-thread .fan { zoom:1.15; width:24rem; max-width:none; }
.a-approve { place-items:start; padding:2.2rem 0 0 1.6rem; } .a-approve .apc { zoom:1.2; width:22rem; } .a-approve .cur { left:72%; top:44%; }
.a-icons .gicon { width:7rem; height:7rem; border-radius:1.7rem; } .a-icons .gicon svg { transform:scale(1.25); }
.a-search { place-items:start center; padding-top:2.8rem; } .a-search .sb, .a-search .rs { width:80%; }
.a-notch { padding-top:0; } .a-notch .nt { zoom:1.15; width:22rem; border-radius:0 0 1.4rem 1.4rem; }
.a-drafts { zoom:1.2; } .a-drafts .dr { width:24rem; }
.a-sign { place-items:start; padding:2.2rem 0 0 7%; } .a-sign .uc { zoom:1.25; width:30rem; }
.a-runs { place-items:start; padding:2.2rem 0 0 7%; } .a-runs .glassp { zoom:1.2; width:32rem; }
.a-gate { place-items:start; padding:1.8rem 0 0 1.6rem; } .a-gate .uc { zoom:1.1; width:26rem; }
.a-sync { place-items:start; padding:1.8rem 0 0 1.6rem; } .a-sync .glassp { zoom:1.15; width:20rem; }
.a-connect { place-items:start; padding:2rem 0 0 1.6rem; } .a-connect .uc { zoom:1.15; width:26rem; }
.a-tools .gicon { width:7rem; height:7rem; border-radius:1.7rem; } .a-tools .gicon svg { transform:scale(1.25); }
@media (max-width:1023px) {
  .gal { padding:4.5rem 0 6rem; } .gal h2 { font-size:1.9rem; margin-bottom:1.6rem; }
  .bento { grid-template-columns:1fr; grid-auto-rows:80vw; gap:.6rem; } .tile.w2, .tile.tall { grid-column:auto; grid-row:auto; }
}

/* 12 · cover mode in a wide tile */
.w2 .a-cover .d-pro { zoom:1.12; left:6%; right:-14%; top:1.8rem; }


/* 08 · task tickets in columns, all the same card (Poly's collaborative conversations): the middle one is read in full,
   its neighbours run off the tile */
.a-ticket { display:flex; justify-content:center; align-items:center; padding-bottom:7.6rem; }
.a-ticket .tc2 { flex:none; width:31rem; zoom:1.1; display:grid; gap:1.1rem; align-content:start; }
.a-ticket .tc2.s1, .a-ticket .tc2.s3, .a-ticket .s2 .tk + .tk { display:none; }
.tk { border-radius:1.6rem; padding:1.1rem 1.2rem 1.3rem; display:grid; gap:.75rem; }
.tk .th { display:flex; align-items:baseline; gap:.55rem; font-size:1.05rem; font-weight:700; line-height:1.3; }
.tk .th .id { font:600 .8rem ui-monospace,Menlo,monospace; color:rgba(255,255,255,.55); flex:none; }
.tk .tf { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding-bottom:.75rem; border-bottom:1px solid rgba(255,255,255,.12); }
.tk .f { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .55rem; border-radius:.5rem; background:rgba(255,255,255,.1); font-size:.8rem; font-weight:600; color:rgba(255,255,255,.88); }
.tk .f img, .tk .f .ico { width:1.05rem; height:1.05rem; border-radius:50%; object-fit:cover; }
.tk .f .ico { border-radius:.25rem; background:#fff; }
.tk .f.ok { background:rgba(47,163,107,.25); color:#9BE3BE; } .tk .f.run { background:rgba(66,191,255,.2); color:#A9DEFF; } .tk .f.you { background:rgba(232,163,58,.25); color:#F7CE8C; } .tk .f.hi { background:rgba(235,87,87,.22); color:#FFB2B2; }
.tk .ah { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.tk .cm { display:flex; gap:.6rem; }
.tk .cm > img, .tk .cm .av2 { width:1.9rem; height:1.9rem; border-radius:50%; object-fit:cover; flex:none; display:grid; place-items:center; background:#fff; }
.tk .cm .av2 img { width:1.2rem; }
.tk .cm b { font-size:.9rem; } .tk .cm time { color:rgba(255,255,255,.5); font-size:.75rem; margin-left:.4rem; }
.tk .cm .tag { margin-left:.35rem; padding:.05rem .35rem; border-radius:.3rem; background:rgba(66,191,255,.22); color:#A9DEFF; font-size:.66rem; font-weight:700; vertical-align:.1rem; }
.tk .cm p { margin-top:.25rem; padding:.6rem .75rem; border-radius:.75rem; background:rgba(255,255,255,.12); font-size:.93rem; line-height:1.4; }
.tk .ev { display:flex; align-items:center; gap:.45rem; padding-left:2.5rem; font-size:.8rem; color:rgba(255,255,255,.62); }
.tk .ev b { color:rgba(255,255,255,.9); font-weight:600; } .tk .ev em { font-style:normal; color:#7FDCAA; font-family:ui-monospace,Menlo,monospace; }

/* 02 · connectors on two rings around ANIMA (Enrichment Orbit); each one is swapped on its own clock */
.a-orbit .rg { position:absolute; left:50%; top:37.5%; border-radius:50%; border:1px solid rgba(255,255,255,.75); transform:translate(-50%,-50%); }
.a-orbit .rg.r1 { width:23%; aspect-ratio:1; } .a-orbit .rg.r2 { width:40%; aspect-ratio:1; }
.a-orbit .ring { position:absolute; left:50%; top:37.5%; width:0; height:0; }
.a-orbit .sat { position:absolute; left:0; top:0; width:1.75rem; height:1.75rem; margin:-.875rem 0 0 -.875rem; }
.a-orbit .sat.sm { width:1.55rem; height:1.55rem; margin:-.775rem 0 0 -.775rem; }
.a-orbit .lg { position:absolute; inset:0; border-radius:.5rem; display:grid; place-items:center; background:#fff; box-shadow:0 .6rem 1.4rem -.6rem rgba(31,60,110,.5); }
.a-orbit .lg img, .a-orbit .lg svg { width:55%; height:55%; }
.a-orbit .core { position:absolute; left:50%; top:37.5%; width:3.3rem; height:3.3rem; margin:-1.65rem 0 0 -1.65rem; border-radius:50%; display:grid; place-items:center; background:linear-gradient(150deg,#42BFFF,#1F59E0); box-shadow:0 0 0 .6rem rgba(66,191,255,.18), 0 1rem 2rem -.8rem rgba(31,89,224,.6); }
.a-orbit .core img { width:1.75rem; filter:brightness(0) invert(1); }
.a-orbit .big { position:absolute; left:1.3rem; top:1.1rem; color:#1C3557; font-size:.85rem; font-weight:600; line-height:1.1; }
.a-orbit .big b { display:block; font-size:2rem; letter-spacing:-.01em; }

/* 09 · the gateway between your data and the agents (Integration Beam) */
.a-beam .bx { position:absolute; left:12%; right:12%; top:2.4rem; aspect-ratio:3/2; }
.a-beam .bx > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.a-beam .ln path { fill:none; stroke:rgba(255,255,255,.18); stroke-width:1.4; }
.a-beam .pl path { fill:none; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:.14 .86; stroke-dashoffset:1; animation:beam 4.2s linear infinite; }
.a-beam .pl.out path { stroke:#7FD4FF; filter:drop-shadow(0 0 3px #42BFFF); }
.a-beam .pl.back path { stroke:#9BE3BE; filter:drop-shadow(0 0 3px #2FA36B); }
@keyframes beam { 0% { stroke-dashoffset:1; opacity:0; } 4% { opacity:1; } 30% { stroke-dashoffset:-.14; opacity:1; } 31%, 100% { opacity:0; stroke-dashoffset:-.14; } }
.a-beam .nd { position:absolute; width:2.8rem; height:2.8rem; margin:-1.4rem 0 0 -1.4rem; border-radius:.75rem; display:grid; place-items:center; background:#fff; box-shadow:0 .6rem 1.2rem -.6rem rgba(0,0,0,.6); }
.a-beam .nd img { width:1.5rem; }
.a-beam .gw { position:absolute; left:50%; top:50%; width:3.6rem; height:3.6rem; margin:-1.8rem 0 0 -1.8rem; border-radius:1rem; display:grid; place-items:center; background:linear-gradient(150deg,#42BFFF,#1F59E0); box-shadow:0 0 0 .45rem rgba(66,191,255,.16), 0 0 2rem rgba(66,191,255,.5); }
@media (prefers-reduced-motion:reduce) { .a-beam .pl path { animation:none; opacity:0; } }

/* 10 · the knowledge base, live, as the app has it */
.a-kb iframe { position:absolute; left:0; top:0; width:1440px; height:1000px; border:0; pointer-events:none; transform-origin:0 0; }

/* 12 · the companion cursor: you ask out loud, it points to the spot on your screen and fills it in */
.a-cursor .ask { position:absolute; left:1.3rem; top:1.1rem; display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .8rem; border-radius:999px; background:#151D20; color:#fff; font-size:.92rem; font-weight:600; box-shadow:0 .6rem 1.2rem -.6rem rgba(0,0,0,.5); }
.a-cursor .wv { display:inline-flex; align-items:center; gap:2px; height:1rem; }
.a-cursor .wv i { width:3px; height:40%; border-radius:2px; background:#42BFFF; animation:wv .9s ease-in-out infinite; }
.a-cursor .wv i:nth-child(2) { animation-delay:.15s; } .a-cursor .wv i:nth-child(3) { animation-delay:.3s; } .a-cursor .wv i:nth-child(4) { animation-delay:.45s; }
@keyframes wv { 50% { height:100%; } }
.a-cursor .win { position:absolute; left:1.3rem; top:4.2rem; width:24rem; padding:0 0 .6rem; zoom:1.05; }
.a-cursor .wt { display:flex; align-items:center; gap:.35rem; padding:.6rem .8rem; border-bottom:1px solid #EEEAE3; font-size:.85rem; font-weight:700; }
.a-cursor .wt i { width:.6rem; height:.6rem; border-radius:50%; background:#E4DED5; } .a-cursor .wt span { margin-left:.5rem; }
.a-cursor .fr { display:flex; align-items:center; gap:.8rem; padding:.5rem .9rem; font-size:.95rem; }
.a-cursor .fr label { width:7.5rem; color:#6B7A82; }
.a-cursor .fv { flex:1; padding:.4rem .6rem; border-radius:.5rem; box-shadow:inset 0 0 0 1px #E4DED5; min-height:1.9rem; font-weight:600; }
.a-cursor .ring2 { position:absolute; width:11rem; height:4.6rem; overflow:visible; pointer-events:none; }
.a-cursor .ring2 ellipse { fill:none; stroke:#1F8FD6; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.a-cursor .cc { position:absolute; left:0; top:0; display:flex; align-items:flex-start; gap:.15rem; }
.a-cursor .cc img { width:1.7rem; margin-top:.8rem; }
.a-cursor .bub { position:absolute; left:-6.5rem; top:2.7rem; padding:.4rem .7rem; border-radius:.7rem; background:#1F8FD6; color:#fff; font-size:.88rem; font-weight:600; white-space:nowrap; box-shadow:0 .5rem 1rem -.5rem rgba(31,89,224,.6); }



/* 08 · the ticket's goal checklist and its two threads */
.tk .gl { display:grid; gap:.35rem; padding:.7rem .8rem; border-radius:.8rem; background:rgba(255,255,255,.07); }
.tk .gl .gh { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:.1rem; }
.tk .gi { display:flex; align-items:center; gap:.55rem; font-size:.9rem; }
.tk .cb { width:1.05rem; height:1.05rem; border-radius:.3rem; border:1.5px solid rgba(255,255,255,.55); display:grid; place-items:center; flex:none; font-size:.7rem; font-weight:900; color:transparent; transition:background .25s, border-color .25s, color .25s; }
.tk .gi.on .cb { background:#2FA36B; border-color:#2FA36B; color:#fff; } .tk .gi.on span:last-child { color:rgba(255,255,255,.6); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.35); }
.tk .thr { display:grid; gap:.45rem; }
.tk .msg2 { display:flex; gap:.5rem; font-size:.88rem; line-height:1.35; }
.tk .msg2 > img, .tk .msg2 .av2 { width:1.6rem; height:1.6rem; border-radius:50%; object-fit:cover; flex:none; display:grid; place-items:center; background:#fff; }
.tk .msg2 .av2 img { width:1rem; }
.tk .msg2 b { font-size:.85rem; } .tk .msg2 time { color:rgba(255,255,255,.5); font-size:.72rem; margin-left:.35rem; }
.tk .msg2 .tag { margin-left:.3rem; padding:.03rem .3rem; border-radius:.3rem; background:rgba(66,191,255,.22); color:#A9DEFF; font-size:.62rem; font-weight:700; vertical-align:.1rem; }
.tk .msg2 p { margin-top:.1rem; color:rgba(255,255,255,.9); }
.tk .reps { margin-left:.75rem; padding-left:.9rem; border-left:2px solid rgba(255,255,255,.16); display:grid; gap:.45rem; }
.tk .rc2 { font-size:.75rem; font-weight:700; color:#A9DEFF; margin-left:2.1rem; }
.a-cursor .cc .bud { width:2.4rem; height:2.4rem; margin-top:.4rem; }




/* 11 · the trace waterfall: every step of a run as a bar on one timeline */
.a-trace { display:grid; place-items:center; padding-bottom:7.4rem; }
.a-trace .tw { width:44rem; padding:.9rem 1.1rem 1rem; zoom:.96; }
.a-trace .th2 { display:flex; align-items:center; gap:.45rem; font-size:.95rem; } .a-trace .th2 .sp { color:#1F8FD6; } .a-trace .ttl { color:#6B7A82; } .a-trace .th2 .chip { margin-left:auto; }
.a-trace .stats { display:grid; grid-template-columns:repeat(6,1fr); gap:.4rem; margin:.9rem 0; padding:.7rem 0; border-top:1px solid #EEEAE3; border-bottom:1px solid #EEEAE3; }
.a-trace .stats small { display:block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#8E9AA0; font-weight:700; } .a-trace .stats b { font-size:1.15rem; font-weight:600; font-variant-numeric:tabular-nums; }
.a-trace .axis { margin-right:4.4rem; display:grid; grid-template-columns:15rem 1fr; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#8E9AA0; font-weight:700; margin-bottom:.3rem; }
.a-trace .ax2 { display:flex; justify-content:space-between; } .a-trace .ax2 i { font-style:normal; letter-spacing:0; }
.a-trace .spans { position:relative; margin-right:4.4rem; }
.a-trace .sr { display:grid; grid-template-columns:15rem 1fr; align-items:center; height:1.95rem; }
.a-trace .nm { display:flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; }
.a-trace .d1 .nm { padding-left:1.1rem; } .a-trace .d2 .nm { padding-left:2.2rem; font-weight:500; color:#55636B; }
.a-trace .nm .ico { width:1.1rem; height:1.1rem; display:inline-grid; place-items:center; } .a-trace .nm .ico img { width:1rem; }
.a-trace .tr { position:relative; height:100%; }
.a-trace .bar3 { position:absolute; top:.6rem; height:.7rem; border-radius:.35rem; background:linear-gradient(90deg,#7FB6FF,#5B8CF0); transform-origin:left center; }
.a-trace .bar3.t { background:#DCE6F0; } .a-trace .d0 .bar3 { background:#E5EBF2; }
.a-trace .tr em { position:absolute; top:.5rem; margin-left:.4rem; font-style:normal; font-size:.72rem; color:#6B7A82; white-space:nowrap; }
.a-trace .ph { position:absolute; top:0; bottom:0; left:15rem; width:2px; background:#1F8FD6; box-shadow:0 0 .4rem rgba(31,143,214,.5); }


/* ---------- the quiet tiles: skeleton bars instead of words ---------- */
.gal .tile i.b { display:block; height:.55rem; border-radius:.3rem; background:var(--gl-bar); }

/* 03 · three agents type into the same doc, each with its own caret and pointer */
.a-cur2 { --c1:#2F80ED; --c2:#D97757; --c3:#1D2328; }
.a-cur2 .dc { position:absolute; left:50%; top:2.6rem; width:20rem; margin-left:-10rem; padding:1rem 1.25rem 1.3rem; }
.a-cur2 .dt { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.a-cur2 .tt { display:block; width:48%; height:.85rem; border-radius:.4rem; background:#D9D4CB; }
.a-cur2 .avs { margin-left:auto; display:flex; }
.a-cur2 .avs i { width:1.05rem; height:1.05rem; border-radius:50%; margin-left:-.25rem; box-shadow:0 0 0 2px #fff; }
.a-cur2 .avs .a1 { background:var(--c1); } .a-cur2 .avs .a2 { background:var(--c2); } .a-cur2 .avs .a3 { background:var(--c3); }
.a-cur2 .ln { display:flex; align-items:center; height:2.3rem; }
.a-cur2 .t1 .b { width:78%; } .a-cur2 .t2 .b { width:62%; } .a-cur2 .t3 .b { width:84%; }
.a-cur2 .cr { flex:none; width:2.5px; height:1.15rem; margin-left:2px; border-radius:1px; animation:blink 1s steps(1) infinite; }
.a-cur2 .t1 .cr { background:var(--c1); } .a-cur2 .t2 .cr { background:var(--c2); animation-delay:-.35s; } .a-cur2 .t3 .cr { background:var(--c3); animation-delay:-.7s; }
.a-cur2 .t1 .b { background:#CFE0F7; } .a-cur2 .t2 .b { background:#F3D6CA; } .a-cur2 .t3 .b { background:#DCDDDF; }
.a-cur2 .ac2 { position:absolute; left:0; top:0; display:flex; align-items:flex-start; gap:.1rem; pointer-events:none; opacity:0; }
.a-cur2 .ac2 em { margin-top:.85rem; padding:.16rem .42rem; border-radius:.35rem; color:#fff; font-style:normal; font-size:.66rem; font-weight:600; line-height:1.25; white-space:nowrap; box-shadow:0 .3rem .6rem -.3rem rgba(0,0,0,.35); }
.a-cur2 .a1 em { background:var(--c1); } .a-cur2 .a2 em { background:var(--c2); } .a-cur2 .a3 em { background:var(--c3); }
.a-cur2 .ac2 svg { display:block; width:1.05rem; height:1.25rem; stroke:#fff; stroke-width:1.6; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.a-cur2 .a1 svg { fill:var(--c1); } .a-cur2 .a2 svg { fill:var(--c2); } .a-cur2 .a3 svg { fill:var(--c3); }

/* 12 · cover mode: a real notch with the live character, the bar you type into, the night, and a person who checks */
.a-cov .notch { position:absolute; left:50%; top:0; transform:translateX(-50%); display:flex; align-items:center; gap:.5rem; height:3rem; padding:0 1rem 0 .4rem; background:#000; color:#fff; border-radius:0 0 1.3rem 1.3rem; font-size:.95rem; font-weight:700; box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.8); white-space:nowrap; }
.a-cov .notch .bud { width:2.8rem; height:2.8rem; }
.a-cov .notch .nt { margin-right:.3rem; }
.a-cov .tb { position:absolute; left:5%; top:4.4rem; width:54%; display:flex; align-items:center; gap:.6rem; padding:.55rem .55rem .55rem 1rem; border-radius:999px; background:rgba(255,255,255,.95); color:#151D20; font-size:.98rem; box-shadow:0 .8rem 1.6rem -.8rem rgba(0,0,0,.6); }
.a-cov .tb .tx { flex:1; min-width:0; white-space:nowrap; overflow:hidden; }
.a-cov .tb .tx::after { content:""; display:inline-block; width:2px; height:1.05em; background:#1F8FD6; vertical-align:-.15em; margin-left:1px; animation:blink 1s steps(1) infinite; }
.a-cov .tb .send { width:2rem; height:2rem; border-radius:50%; background:#1F59E0; display:grid; place-items:center; flex:none; }
.a-cov .tln { position:absolute; left:5%; top:8.2rem; width:54%; color:#fff; }
.a-cov .clk { font-size:.9rem; color:rgba(255,255,255,.75); } .a-cov .clk b { font-size:1.7rem; font-weight:600; color:#fff; font-variant-numeric:tabular-nums; margin-right:.2rem; }
.a-cov .bar { position:relative; height:.5rem; margin-top:.45rem; border-radius:.25rem; background:rgba(255,255,255,.16); }
.a-cov .bar .hd { position:absolute; left:0; top:-.35rem; width:2px; height:1.2rem; background:#42BFFF; box-shadow:0 0 .6rem #42BFFF; }
.a-cov .bar .e { position:absolute; top:.05rem; width:.4rem; height:.4rem; margin-left:-.2rem; border-radius:50%; background:#2FA36B; opacity:0; }
.a-cov .bar .e.w { background:#E8A33A; }
.a-cov .hrs { display:flex; justify-content:space-between; margin-top:.35rem; font-size:.75rem; color:rgba(255,255,255,.55); }
.a-cov .chk { position:absolute; right:4.5%; top:4.4rem; width:34%; padding:.9rem 1rem; }
.a-cov .chk .t { font-size:1rem; font-weight:700; } .a-cov .chk .s { font-size:.82rem; color:#6B7A82; margin-top:.15rem; }
.a-cov .chk .who { display:flex; align-items:center; gap:.45rem; margin-top:.7rem; font-size:.85rem; color:#33424A; }
.a-cov .chk .who img { width:1.6rem; height:1.6rem; border-radius:50%; object-fit:cover; }
.a-cov .chk .acts { display:flex; justify-content:flex-end; gap:.4rem; margin-top:.7rem; }
.a-cov .chk .b { padding:.38rem .75rem; border-radius:.5rem; font-size:.85rem; font-weight:600; box-shadow:inset 0 0 0 1px rgba(21,29,32,.14); }
.a-cov .chk .b.go { background:#151D20; color:#fff; box-shadow:none; transition:background .25s; } .a-cov .chk .b.go.done { background:#2FA36B; }

/* 12 · a larger notch, the resources shared for the night, and a brighter night bar */
.a-cov .notch { height:4rem; padding:0 1.3rem 0 .6rem; gap:.65rem; font-size:1.1rem; border-radius:0 0 1.7rem 1.7rem; }
.a-cov .notch .bud { width:3.9rem; height:3.9rem; }
.a-cov .shr { position:absolute; left:5%; top:5.4rem; width:56%; }
.a-cov .sh { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:.45rem; }
.a-cov .rs2 { display:flex; gap:.4rem; flex-wrap:wrap; }
.a-cov .r2 { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem .4rem .45rem; border-radius:.6rem; background:rgba(255,255,255,.93); color:#151D20; font-size:.88rem; font-weight:600; box-shadow:0 .6rem 1.2rem -.6rem rgba(0,0,0,.6); }
.a-cov .r2 .ico { width:1.3rem; height:1.3rem; }
.a-cov .tln { top:9.4rem; width:56%; }
.a-cov .bar { height:.8rem; border-radius:.4rem; background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.a-cov .bar .fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:.4rem; background:linear-gradient(90deg,#1F59E0,#42BFFF); box-shadow:0 0 1rem rgba(66,191,255,.6); }
.a-cov .bar .hd { top:-.45rem; height:1.7rem; width:3px; background:#fff; box-shadow:0 0 .8rem #42BFFF; }
.a-cov .bar .e { top:.15rem; width:.5rem; height:.5rem; margin-left:-.25rem; background:#fff; box-shadow:0 0 0 2px #2FA36B; }
.a-cov .bar .e.w { box-shadow:0 0 0 2px #E8A33A; }
.a-cov .hrs { color:rgba(255,255,255,.8); font-size:.8rem; font-weight:600; }
.a-cov .clk b { font-size:2rem; }
.a-cov .chk { top:5.4rem; }


/* ---------- one inbox, learning mode, access ---------- */




/* 07 · learning mode: a task a person keeps repeating flows into ANIMA, which learns it and fans it out to the apps it runs on */
.a-eco .bx { position:absolute; left:8%; right:8%; top:2.2rem; aspect-ratio:3/1; }
.a-eco .bx > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.a-eco .ln path { fill:none; stroke:rgba(110,45,25,.42); stroke-width:1.8; }
.a-eco .pl path { fill:none; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:.14 .86; stroke-dashoffset:1; animation:beam 4.2s linear infinite; }
.a-eco .pl.in path { stroke:#FFE1B8; filter:drop-shadow(0 0 3px #FFB86B); animation-duration:2.1s; }
.a-eco .pl.out path { stroke:#FFFFFF; filter:drop-shadow(0 0 3px rgba(255,255,255,.9)); }
.a-eco .nd { position:absolute; width:2.4rem; height:2.4rem; margin:-1.2rem 0 0 -1.2rem; border-radius:.7rem; display:grid; place-items:center; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); border:1px solid rgba(255,255,255,.75); box-shadow:0 .6rem 1.2rem -.6rem rgba(80,30,20,.45); }
.a-eco .nd img { width:1.3rem; }
.a-eco .ask { position:absolute; left:0; top:50%; width:30%; transform:translateY(-50%); }
.a-eco .bub { position:relative; z-index:3; display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem; border-radius:4px 14px 14px 14px; }
.a-eco .bub img { width:1.8rem; height:1.8rem; border-radius:50%; object-fit:cover; flex:none; }
.a-eco .bub span { flex:1; display:grid; gap:.45rem; }
.a-eco .bb { position:absolute; left:0; right:0; height:100%; border-radius:4px 14px 14px 14px; background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.5); }
.a-eco .bb.b1 { top:-.55rem; left:.5rem; right:-.5rem; z-index:2; } .a-eco .bb.b2 { top:-1.1rem; left:1rem; right:-1rem; z-index:1; opacity:.6; }
.a-eco .core2 { position:absolute; left:50%; top:50%; width:3.6rem; height:3.6rem; margin:-1.8rem 0 0 -1.8rem; }
.a-eco .cnode { position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; background:linear-gradient(150deg,#42BFFF,#1F59E0); box-shadow:0 0 0 4px rgba(255,255,255,.35), 0 .8rem 2rem -.6rem rgba(31,89,224,.8); }
.a-eco .cnode img { width:1.8rem; filter:brightness(0) invert(1); }
.a-eco .rp1, .a-eco .rp2 { position:absolute; inset:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.75); animation:ripple 2.8s ease-out infinite; }
.a-eco .rp2 { animation-delay:1.4s; }
.a-eco .spk { position:absolute; right:-.35rem; top:-.45rem; color:#FFF4D6; font-style:normal; font-size:1rem; text-shadow:0 0 .6rem rgba(255,220,150,.9); animation:twinkle 2.8s ease-in-out infinite; }
@keyframes ripple { 0% { transform:scale(1); opacity:.85; } 100% { transform:scale(2.1); opacity:0; } }
@keyframes twinkle { 0%, 100% { transform:scale(.8) rotate(0); opacity:.6; } 50% { transform:scale(1.15) rotate(20deg); opacity:1; } }

@media (prefers-reduced-motion:reduce) { .a-eco .pl path { animation:none; opacity:0; } .a-eco .rp1, .a-eco .rp2, .a-eco .spk { animation:none; } }

/* 04 · one inbox: messages rain in from every app, pass through ANIMA, and come out as one column of tasks; no window, just the figure */
.a-flowin .chp, .a-flowin .fun, .a-flowin .ow4 { position:absolute; display:grid; place-items:center; }
.a-flowin .chp { width:2.1rem; height:2.1rem; margin:-1.05rem 0 0 -1.05rem; border-radius:.65rem; background:#fff; box-shadow:0 .6rem 1.2rem -.6rem rgba(28,60,90,.5); }
.a-flowin .chp img { width:1.2rem; }
.a-flowin .fun { left:42%; top:38%; width:3.4rem; height:3.4rem; margin:-1.7rem 0 0 -1.7rem; border-radius:50%; background:linear-gradient(150deg,#42BFFF,#1F59E0); box-shadow:0 0 0 5px rgba(255,255,255,.55), 0 .9rem 2rem -.6rem rgba(31,89,224,.7); z-index:2; }
.a-flowin .fun > img { width:1.75rem; filter:brightness(0) invert(1); }
.a-flowin .hal { position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px rgba(66,191,255,.55); opacity:0; }
.a-flowin .tr4 { position:absolute; left:59%; display:flex; align-items:center; gap:.55rem; height:1.6rem; margin-top:-.8rem; }
.a-flowin .cb2 { position:relative; width:1.15rem; height:1.15rem; border-radius:.32rem; box-shadow:inset 0 0 0 1.6px rgba(21,48,70,.45); flex:none; transition:background .35s, box-shadow .35s; }
.a-flowin .cb2::after { content:""; position:absolute; left:.3rem; top:.25rem; width:.5rem; height:.27rem; border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg) scale(0); transition:transform .3s .05s; }
.a-flowin .tr4.on .cb2 { background:#2FA36B; box-shadow:none; } .a-flowin .tr4.on .cb2::after { transform:rotate(-45deg) scale(1); }
.a-flowin .ln4 { display:block; height:.5rem; border-radius:.25rem; background:rgba(255,255,255,.85); box-shadow:0 .3rem .7rem -.4rem rgba(28,60,90,.35); transition:opacity .35s; }
.a-flowin .tr4.on .ln4 { opacity:.55; }
.a-flowin .ow4 { position:relative; width:1.5rem; height:1.5rem; border-radius:50%; background:#fff; overflow:hidden; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 .4rem .8rem -.4rem rgba(28,60,90,.5); }
.a-flowin .ow4 img { width:100%; height:100%; object-fit:cover; } .a-flowin .ow4 img.am { width:.9rem; height:auto; object-fit:contain; }

/* 10 · roles and access as a permission matrix: who (rows) by app (columns); Okta applies the role and the grid resolves */
.a-mx .idp4, .a-mx .hd4, .a-mx .rh, .a-mx .cl { position:absolute; display:grid; place-items:center; }
.a-mx .idp4, .a-mx .hd4, .a-mx .rh { width:2.1rem; height:2.1rem; margin:-1.05rem 0 0 -1.05rem; background:#fff; box-shadow:0 .6rem 1.2rem -.6rem rgba(90,40,30,.5); }
.a-mx .hd4, .a-mx .idp4 { border-radius:.65rem; } .a-mx .rh { border-radius:50%; overflow:hidden; }
.a-mx .hd4 img { width:1.2rem; } .a-mx .idp4 svg { width:1.15rem; height:1.15rem; }
.a-mx .rh img.am { width:1.2rem; } .a-mx .rh img.fc { width:100%; height:100%; object-fit:cover; } .a-mx .rh .mk { display:grid; }
.a-mx .hal { position:absolute; inset:0; border-radius:.65rem; box-shadow:0 0 0 2px rgba(0,125,193,.6); opacity:0; }
.a-mx .cl { width:1.35rem; height:1.35rem; margin:-.675rem 0 0 -.675rem; border-radius:50%; box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.85); transition:background .3s, box-shadow .3s; }
.a-mx .cl.ok::after { content:""; width:.52rem; height:.28rem; margin-top:-.12rem; border:solid #fff; border-width:0 0 2px 2px; transform:rotate(-45deg) scale(0); transition:transform .3s .05s; }
.a-mx .cl.no svg { width:.7rem; height:.7rem; opacity:0; transition:opacity .3s; }
.a-mx .cl.ok.on { background:#2FA36B; box-shadow:0 0 0 3px rgba(47,163,107,.22), 0 0 .9rem rgba(47,163,107,.55); } .a-mx .cl.ok.on::after { transform:rotate(-45deg) scale(1); }
.a-mx .cl.no.on { background:rgba(110,70,60,.55); box-shadow:none; } .a-mx .cl.no.on svg { opacity:1; }
.a-mx .scan { position:absolute; height:2px; margin-top:-1px; border-radius:1px; background:linear-gradient(90deg,transparent,#fff 15%,#fff 85%,transparent); box-shadow:0 0 .8rem rgba(255,255,255,.9); opacity:0; pointer-events:none; }


/* ---------- the shared glass, read on each tile: light text, white backing kept only under logos and avatars ---------- */
.gal .uc .chip.sky, .gal .uc .chip { background:rgba(66,191,255,.2); color:#A9DEFF; border-color:transparent; }
/* 03 */
.a-cur2 { --c3:#E9ECEF; }
.a-cur2 .tt { background:rgba(255,255,255,.34); }
.a-cur2 .t1 .b { background:rgba(47,128,237,.55); } .a-cur2 .t2 .b { background:rgba(217,119,87,.55); } .a-cur2 .t3 .b { background:rgba(255,255,255,.34); }
.a-cur2 .avs i { box-shadow:0 0 0 2px rgba(26,34,54,.9); }
.a-cur2 .a3 em { color:#151D20; } .a-cur2 .a3 svg { stroke:#151D20; }
/* 05 */
.a-search .sb svg { stroke:#A9DEFF; } .a-search .sb .q::after { background:#42BFFF; }
.a-search .r .ico { background:#fff; } .a-search .r small { color:var(--gl-tx3); } .a-search .r:first-child { background:var(--gl-sub); }
/* 07 */
.a-eco .nd { background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; border:0; }
.a-eco .bb { background:rgba(26,34,54,.36); border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
/* 11 */
.a-trace .th2 .sp { color:#42BFFF; } .a-trace .ttl { color:var(--gl-tx2); }
.a-trace .stats { border-color:var(--gl-div); } .a-trace .stats small, .a-trace .axis { color:var(--gl-tx3); }
.a-trace .d2 .nm { color:var(--gl-tx2); } .a-trace .nm .ico { background:#fff; border-radius:.3rem; }
.a-trace .bar3.t { background:rgba(255,255,255,.22); } .a-trace .d0 .bar3 { background:rgba(255,255,255,.14); }
.a-trace .tr em { color:var(--gl-tx2); } .a-trace .ph { background:#42BFFF; }
/* 12 */
.a-cov .r2 { background:var(--gl-bg); color:#fff; box-shadow:var(--gl-sh); } .a-cov .r2 .ico { background:#fff; border-radius:.3rem; }
.a-cov .chk .s { color:var(--gl-tx2); } .a-cov .chk .who { color:rgba(255,255,255,.82); }
.a-cov .chk .b { background:var(--gl-sub); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.a-cov .chk .b.go { background:#fff; color:#151D20; box-shadow:none; } .a-cov .chk .b.go.done { background:#2FA36B; color:#fff; }

/* 04 · each task carries the app it came from; 11 · span kinds instead of a repeated mark */
.a-flowin .ow4.src { border-radius:.4rem; }
.a-trace .ico.kd { display:grid; place-items:center; color:#42BFFF; font-size:.7rem; font-style:normal; background:none; }
.a-trace .ico.fc img { width:100%; height:100%; border-radius:50%; object-fit:cover; }

/* 07 · the routine ANIMA watches: a vertical workflow, its steps lighting up one by one before it is learned */
.a-eco .flow { position:absolute; left:0; top:50%; width:31%; transform:translateY(-50%); list-style:none; padding:0; display:grid; gap:.85rem; }
.a-eco .flow::before { content:""; position:absolute; left:.85rem; top:.85rem; bottom:.85rem; width:2px; margin-left:-1px; border-radius:1px; background:rgba(110,45,25,.42); }
.a-eco .flow::after { content:""; position:absolute; left:.85rem; top:.85rem; width:6px; height:1.6rem; margin-left:-3px; border-radius:3px; background:linear-gradient(transparent,#FFE1B8,transparent); filter:drop-shadow(0 0 4px #FFB86B); animation:fdown 4.2s ease-in-out infinite; }
@keyframes fdown { 0% { transform:translateY(0); opacity:0; } 8% { opacity:1; } 38% { transform:translateY(calc(var(--fh, 7rem))); opacity:1; } 46%, 100% { transform:translateY(calc(var(--fh, 7rem))); opacity:0; } }
.a-eco .flow li { position:relative; display:flex; align-items:center; gap:.6rem; }
.a-eco .flow .sn { width:1.7rem; height:1.7rem; flex:none; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 0 0 3px rgba(255,255,255,.18); animation:stp 4.2s ease-in-out infinite; animation-delay:var(--d); }
.a-eco .flow .sn img { width:.95rem; }
.a-eco .flow .sl { font-size:.92rem; font-weight:600; color:#fff; white-space:nowrap; text-shadow:0 1px 10px rgba(90,35,15,.55); }
@keyframes stp { 0%, 100% { box-shadow:0 0 0 3px rgba(255,255,255,.18); } 12%, 40% { box-shadow:0 0 0 4px rgba(255,225,184,.95), 0 0 14px rgba(255,184,107,.9); } }
@media (prefers-reduced-motion:reduce) { .a-eco .flow .sn { animation:none; } }
.a-eco .flow { --fh:6.1rem; }
@media (prefers-reduced-motion:reduce) { .a-eco .flow::after { animation:none; opacity:0; } }
.a-search .sb .q::after { animation:none; }
/* 10 · ANIMA's row is the live character, not the mark */
.a-mx .rh.bd { background:none; box-shadow:none; overflow:visible; } .a-mx .rh.bd .bud { position:absolute; left:50%; top:50%; width:2.9rem; height:2.9rem; transform:translate(-50%,-50%); }
/* 07 · the hub is the live character; the figure sits centred in the space above the caption */
.a-eco .cnode.bd { background:none; box-shadow:none; } .a-eco .cnode.bd .bud { width:150%; height:150%; margin:-25%; }
.a-eco .bx { top:calc((100% - 4.4rem) / 2); transform:translateY(-50%); }
.a-inbox .seg .on { background:var(--gl-sub); color:#fff; }

/* hover: each tile's ground zooms in a touch (the photo, or the gradient), caption and art stay put; the parts that look
   pressable answer with a quiet tint in their own shape. These are pictures, so the cursor stays an arrow. */
.tile > .bg { transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.tile[data-tone] { background-size:100% 100% !important; background-position:50% 50% !important; transition:background-size .6s cubic-bezier(.2,.8,.2,1); }
.a-search .r, .a-inbox .ac, .a-inbox .seg span, .a-inbox .acts .b, .a-ticket .tk .f, .a-cov .chk .b, .a-cov .r2 { transition:background-color .15s, box-shadow .15s; }
@media (hover:hover) {
  .tile:hover > .bg { transform:scale(1.02); }
  .tile[data-tone]:hover { background-size:102% 102% !important; }
  .a-search .r:hover { background-color:rgba(255,255,255,.1); } .a-search .r:first-child:hover { background-color:rgba(255,255,255,.16); }
  .a-inbox .ac:hover { background-color:rgba(255,255,255,.15); }
  .a-inbox .seg span:not(.on):hover, .a-inbox .acts .b:not(.go):hover { background-color:rgba(255,255,255,.1); }
  .a-inbox .acts .b.go:hover { background-color:#2A353A; }
  .a-ticket .tk .f:not(.ok):not(.run):not(.you):not(.hi):hover { background-color:rgba(255,255,255,.18); }
  .a-cov .chk .b:not(.go):hover { background-color:rgba(255,255,255,.2); }
  .a-cov .chk .b.go:not(.done):hover { background-color:#E6EAED; }
  .a-cov .r2:hover { background-color:rgba(44,54,80,.72); }
}

/* narrow desktops and iPads on their side (1024–1199px, the deck still runs): two tiles a row at most, and as on a phone each tile is its picture with the caption under it, so the
   words never run over the picture. Tall tiles keep two rows and their picture takes what the caption leaves; the last two (the run
   trace and cover mode, both wide pictures) run the full width, which also closes the grid without a gap */
@media (min-width:1024px) and (max-width:1199px) {
  .gal { padding:calc(72px + 48px) 0 7rem; } .gal h2 { font-size:2.4rem; margin-bottom:48px; }
  .bento { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; grid-auto-flow:row dense; gap:12px; }
  .tile, .tile.w2, .tile.tall { grid-column:auto; grid-row:auto; display:flex; flex-direction:column; border-radius:12px; }
  .tile .tart { position:relative; inset:auto; flex:none; height:clamp(250px, 27vw, 320px); }
  .tile.tall { grid-row:span 2; } .tile.tall .tart { flex:1 1 auto; height:auto; min-height:clamp(250px, 27vw, 320px); }
  .tile .cap { position:relative; margin-top:auto; padding:.5rem 1.4rem 1.3rem; }
  .bento > .tile.w2:last-child, .bento > .tile.tall:nth-last-child(2) { grid-column:span 2; grid-row:auto; }
  .bento > .tile.tall:nth-last-child(2) .tart { flex:none; height:440px; }
  /* the ticket fits its tile's width instead of its desktop 31rem */
  .a-ticket { align-items:safe center; padding:16px 0; }
  .a-ticket .tc2 { width:calc(100% - 32px); zoom:1; }
  /* the pictures were drawn to sit above a caption laid over the tile's foot; here the caption is below, so each one is
     brought to the middle of its picture area and fitted to the narrower tile */
  .a-team { padding-bottom:0; } .a-team .pill { zoom:.85; }
  .a-orbit .rg, .a-orbit .ring, .a-orbit .core { top:50%; }
  .a-cur2 .dc { top:50%; transform:translateY(-50%); }
  .a-flowin { transform:translateY(12%); }
  .a-search { place-items:center; align-content:center; padding:0; }
  .a-beam .bx { top:50%; transform:translateY(-50%); }
  .a-mx { transform:translateY(10%); }
  .a-trace { padding-bottom:0; }
  /* the workflow (its steps sit inside .bx, so the steps' left is measured from it) takes the phone's layout: steps on the left,
     the learned fan-out to the right of them */
  .a-eco .bx { left:28%; right:3%; top:50%; }
  .a-eco .flow { position:absolute; left:calc(16px - 40%); top:50%; width:auto; gap:.7rem; transform:translateY(-50%); }
  .a-eco .flow .sn { width:1.45rem; height:1.45rem; } .a-eco .flow .sn img, .a-eco .flow .sn svg { width:.8rem; height:.8rem; }
  .a-eco .flow::before { left:.725rem; }
  .a-eco .flow .sl { font-size:.8rem; }
  .a-eco .flow { --fh:4.85rem; } .a-eco .flow::before, .a-eco .flow::after { top:.725rem; } .a-eco .flow::before { bottom:.725rem; } .a-eco .flow::after { left:.725rem; }
  .a-eco .bx { left:28%; right:3%; }
  .a-eco .nd { width:1.7rem; height:1.7rem; margin:-.85rem 0 0 -.85rem; border-radius:.5rem; } .a-eco .nd img, .a-eco .nd svg { width:.95rem; height:.95rem; }
  .a-eco .core2 { width:2.6rem; height:2.6rem; margin:-1.3rem 0 0 -1.3rem; } .a-eco .cnode img { width:1.3rem; }
}