/* Concept only (JB, 18 Oct 2026), layered on a copy of the homepage at /homepage-cinematic-team-split/; the real homepage does not load this. Group colours: builders indigo #5351fb, agents cyan #077995, sellers green #11813b
   (never pink: JB, pink reads as red and red is negative); Eva her light blue ring. */

/* 1. The hero intro: Eva, then the builders, the agents, the sellers and the integrations, then lines from Eva; 4.6 s, then she flies into the hero's chat */
.ts-intro-layer{position:absolute;inset:0;z-index:60;background:radial-gradient(1000px 700px at 50% 52%,rgba(115,113,252,.07),rgba(115,113,252,0) 70%),#fff;pointer-events:none;opacity:1;transition:opacity .6s ease}
.ts-intro-layer.ts-out{opacity:0}
/* until the intro has drawn, the hero picture waits (never a flash of it first) */
html.ts-intro-wait .arrival-home-screen .v-art > :not(.ts-intro-layer){opacity:0!important;transition:none!important}
html.ts-intro-veil .arrival-home-screen .v-art > :not(.ts-intro-layer),html.ts-intro-veil .arrival-hero-tabs{filter:opacity(0)}   /* v3: unseen, but the hero still counts itself visible (team-split.js) */
/* the close: the groups, lines and labels go first, Eva stays and glides onto the hero's own Eva (team-split.js) */
.ts-intro-layer.ts-closing .ts-i-group,.ts-intro-layer.ts-closing .ts-i-agent,.ts-intro-layer.ts-closing .ts-i-lines,.ts-intro-layer.ts-closing .ts-i-label.e{opacity:0;transition:opacity .35s ease}
.ts-intro-layer.ts-closing .ts-i-group,.ts-intro-layer.ts-closing .ts-i-agent{animation-fill-mode:none}
.ts-intro-layer .ts-i-eva{position:absolute;left:50%;top:52%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:14px;animation:tsPop .7s cubic-bezier(.22,.7,.2,1) both}
.ts-intro-layer .ts-i-eva img{width:150px;height:150px;border-radius:50%;box-shadow:0 0 0 6px #fff,0 0 0 9px rgba(143,237,255,.75),0 22px 44px -18px rgba(20,30,80,.45)}
.ts-i-label{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 11px;border-radius:999px;background:#fff;font:700 13px/1 Manrope,Arial,sans-serif;white-space:nowrap;box-shadow:0 4px 14px rgba(20,30,80,.12)}
.ts-i-label svg{width:16px;height:16px}
.ts-i-label.e{color:#141414;box-shadow:0 4px 14px rgba(20,30,80,.12),0 0 0 1px rgba(143,237,255,.9)}
.ts-i-label.b{color:#5351fb;box-shadow:0 4px 14px rgba(20,30,80,.1),0 0 0 1px rgba(83,81,251,.3)}
.ts-i-label.a{color:#077995;box-shadow:0 4px 14px rgba(20,30,80,.1),0 0 0 1px rgba(7,121,149,.3)}
.ts-i-label.s{color:#11813b;box-shadow:0 4px 14px rgba(20,30,80,.1),0 0 0 1px rgba(17,129,59,.3)}
.ts-i-group{position:absolute;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:12px}
.ts-i-group.i small{margin-top:-2px}
.ts-i-group small{font:600 12px/1.3 Manrope,Arial,sans-serif;color:#3a3a3a}
.ts-i-group.b{left:16%;top:50%;animation:tsIn .7s .8s cubic-bezier(.22,.7,.2,1) both}
.ts-i-group.a{left:50%;top:5%;animation:tsIn .6s 1.6s cubic-bezier(.22,.7,.2,1) both}
.ts-i-group.s{left:84%;top:52%;animation:tsIn .7s 2.4s cubic-bezier(.22,.7,.2,1) both}
.ts-i-faces{display:flex;gap:10px}
.ts-i-faces img{width:58px;height:58px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 8px 18px -8px rgba(20,30,80,.4)}
.ts-i-group.b .ts-i-faces img{box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(83,81,251,.6),0 8px 18px -8px rgba(20,30,80,.4)}
.ts-i-group.s .ts-i-faces img{box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(17,129,59,.6),0 8px 18px -8px rgba(20,30,80,.4)}
/* the integrations, under Eva, last (JB, 18 Oct: "show the integrations as well"); brand blue, the 4th group colour */
.ts-i-label.i{color:#1237E0;box-shadow:0 4px 14px rgba(20,30,80,.1),0 0 0 1px rgba(18,55,224,.28)}
.ts-i-group.i{left:50%;top:84%;animation:tsIn .7s 3.2s cubic-bezier(.22,.7,.2,1) both}
.ts-i-logos{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(18,55,224,.12),0 8px 20px -10px rgba(20,30,80,.3)}
.ts-i-logos img{width:26px;height:26px;object-fit:contain}
.ts-i-sep{width:1px;height:22px;background:#dcdff0;margin:0 4px}
.ts-i-agent{position:absolute;translate:-50% -50%;width:46px;height:46px;padding:9px;box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(7,121,149,.25),0 6px 14px -6px rgba(7,121,149,.45);animation:tsPop .5s cubic-bezier(.22,.7,.2,1) both}
.ts-i-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ts-i-lines line{stroke:rgba(115,113,252,.35);stroke-width:.25;stroke-dasharray:60;stroke-dashoffset:60;animation:tsDraw .7s 3.8s ease forwards}
@keyframes tsPop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes tsIn{from{opacity:0;translate:-50% calc(-50% + 14px)}to{opacity:1;translate:-50% -50%}}
@keyframes tsDraw{to{stroke-dashoffset:0}}

/* 1b. Since 18 Oct the intro is the radar, then the groups (team-split.js); a 720 x 470 stage scaled to the picture. Prefixed tsr- so no homepage class can reach it. */
.tsr-stage{position:absolute;width:720px;height:470px;transform-origin:0 0;transition:opacity .35s ease}
.ts-intro-layer.ts-closing .tsr-stage{opacity:0}
.tsr-grid{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tsr-grid .ring{fill:none;stroke:rgba(143,237,255,.65);stroke-width:1;stroke-dasharray:2 5}
.tsr-rings{transition:opacity .6s}
.tsr-rings.dim{opacity:.3}
.tsr-arc{fill:none;stroke-width:4;stroke-linecap:round;opacity:.85}
.tsr-sweep{position:absolute;left:160px;top:44px;width:400px;height:400px;border-radius:50%;background:conic-gradient(from -70deg,rgba(143,237,255,0) 0deg,rgba(143,237,255,.5) 68deg,rgba(143,237,255,.95) 69.6deg,rgba(143,237,255,0) 70deg);transition:opacity .5s}
.tsr-sweep.off{opacity:0}
.tsr-it{position:absolute;opacity:0;scale:.4;z-index:10;transition:opacity .35s,scale .45s cubic-bezier(.3,1.6,.5,1)}
.tsr-it.on{opacity:1;scale:1}
.tsr-it.fly{transition:opacity .35s,scale .45s cubic-bezier(.3,1.6,.5,1),left 1s cubic-bezier(.6,0,.3,1),top 1s cubic-bezier(.6,0,.3,1)}
.tsr-face{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff}
.tsr-face.b{box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(83,81,251,.6),0 8px 18px -8px rgba(20,30,80,.4)}
.tsr-face.s{box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(17,129,59,.6),0 8px 18px -8px rgba(20,30,80,.4)}
.tsr-agent,.tsr-logo{display:grid;place-items:center;width:100%;height:100%;background:#fff}
.tsr-agent{border-radius:50%;box-shadow:0 0 0 1px rgba(7,121,149,.22),0 6px 14px -6px rgba(7,121,149,.45)}
.tsr-agent img{width:62%;height:62%}
.tsr-logo{border-radius:10px;box-shadow:0 0 0 1px rgba(18,55,224,.12),0 6px 14px -8px rgba(20,30,80,.35)}
.tsr-logo img{width:60%;height:60%;object-fit:contain}
.tsr-ok{position:absolute;right:-4px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:#11813b;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2px #fff;scale:0;transition:scale .35s cubic-bezier(.3,1.6,.5,1);z-index:2}
.tsr-ok svg{width:9px;height:9px}
.tsr-it.lit .tsr-ok{scale:1}
.tsr-ping{position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 2px rgba(18,55,224,.45);opacity:0;pointer-events:none}
.tsr-it.on .tsr-ping{animation:tsrPing .9s ease-out}
@keyframes tsrPing{from{opacity:1;scale:.8}to{opacity:0;scale:1.8}}
.tsr-flash line{stroke-width:1.4;stroke-dasharray:240;stroke-dashoffset:240;animation:tsrFlash 1.2s ease-out forwards}
@keyframes tsrFlash{40%{stroke-dashoffset:0;opacity:.7}100%{stroke-dashoffset:0;opacity:0}}
.tsr-line{opacity:0;transition:opacity .5s}
.tsr-line.on{opacity:1}
.tsr-line line{stroke-width:2;stroke-dasharray:3 4;opacity:.5}
.tsr-lab{position:absolute;display:flex;flex-direction:column;gap:3px;opacity:0;transition:opacity .5s;z-index:20;white-space:nowrap}
.tsr-lab.on{opacity:1}
.tsr-lab b{display:inline-flex;align-items:center;gap:6px;font:700 16px/1.1 'Space Grotesk',Manrope,Arial,sans-serif}
.tsr-lab b svg{width:16px;height:16px}
.tsr-lab span{font:600 12px/1.3 Manrope,Arial,sans-serif;color:#3a3a3a}
.tsr-eva{position:absolute;z-index:5;border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px #fff,0 0 0 8px rgba(143,237,255,.9),0 22px 44px -18px rgba(20,30,80,.45);animation:tsPop .6s cubic-bezier(.22,.7,.2,1) both}

/* 1c. v2's look, used by v2 (?intro=v2) and v3 (the default since 18 Oct; ?intro=v1 shows the first radar intro): the intro in the hero's own look (JB, 18 Oct: "how could you adjust so it matches the rest of the animations") */
.ts-intro-layer.v2{background:transparent}
.ts-intro-layer.v2 .tsr-grid .ring{stroke:rgba(115,113,252,.16);stroke-dasharray:none}
.ts-intro-layer.v2 .tsr-arc{stroke-width:1.5;opacity:.45}
.ts-intro-layer.v2 .tsr-sweep{background:conic-gradient(from -70deg,rgba(143,237,255,0) 0deg,rgba(143,237,255,.22) 66deg,rgba(115,113,252,.28) 69.6deg,rgba(143,237,255,0) 70deg)}
.ts-intro-layer.v2 .tsr-face.b,.ts-intro-layer.v2 .tsr-face.s{box-shadow:0 0 0 1px rgba(115,113,252,.15),0 6px 15px rgba(18,55,224,.07)}   /* the hero's own face ring */
.ts-intro-layer.v2 .tsr-agent{box-shadow:0 0 0 1px rgba(115,113,252,.15),0 6px 15px rgba(18,55,224,.07)}
.ts-intro-layer.v2 .tsr-logo{box-shadow:0 0 0 1px rgba(115,113,252,.15),0 6px 15px rgba(18,55,224,.07)}
.ts-intro-layer.v2 .tsr-it{transition:opacity .5s cubic-bezier(.22,.61,.36,1),scale .6s cubic-bezier(.22,.61,.36,1)}   /* the hero's ease, no overshoot */
.ts-intro-layer.v2 .tsr-it.fly{transition:opacity .5s,scale .6s cubic-bezier(.22,.61,.36,1),left 1s cubic-bezier(.45,0,.2,1),top 1s cubic-bezier(.45,0,.2,1)}
.ts-intro-layer.v2 .tsr-ping{box-shadow:0 0 0 1px rgba(143,237,255,.9)}
.ts-intro-layer.v2 .tsr-flash line{stroke-width:1;opacity:.5}
.ts-intro-layer.v2 .tsr-line line{stroke-width:1.2;opacity:.35}
.ts-intro-layer.v2 .tsr-line circle{r:3}
.ts-intro-layer.v2 .tsr-pill{flex-direction:row;align-items:center;padding:6px 12px;border:1px solid #E0E0E0;border-radius:999px;background:#fff;box-shadow:0 6px 18px -10px rgba(20,30,80,.25)}
.ts-intro-layer.v2 .tsr-pill b{font:700 11px/1 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;gap:6px}
.ts-intro-layer.v2 .tsr-pill b svg{width:14px;height:14px}
.ts-intro-layer.v2 .tsr-eva{animation-timing-function:cubic-bezier(.22,.61,.36,1)}
/* the hand-over: the radar and labels go, the team flies home into the hero */
/* only opacity, never the hero's own transitions: a permanent transition rule here stopped its first story on the opening picture (18 Oct) */
html.ts-intro-reveal .arrival-home-screen .v-art > :not(.ts-intro-layer){opacity:.4!important}
/* 1 Eva per screen: the hero's own big Eva stays unseen until the intro's Eva lands on her (filter, not opacity, so team-split.js still finds her place) */
html.ts-intro-reveal .arrival-home-screen .v-art .c-ecosystem img[src*="eva-confident"]{filter:opacity(0)}

.ts-intro-layer.v2.ts-closing .tsr-stage{opacity:1}
.ts-intro-layer.v2.ts-closing .tsr-grid,.ts-intro-layer.v2.ts-closing .tsr-sweep,.ts-intro-layer.v2.ts-closing .tsr-lab{opacity:0;transition:opacity .3s}
.ts-intro-layer.v2 .tsr-it.home{transition:left .7s cubic-bezier(.45,0,.2,1),top .7s cubic-bezier(.45,0,.2,1),width .7s cubic-bezier(.45,0,.2,1),height .7s cubic-bezier(.45,0,.2,1)}
.ts-intro-layer.v2 .tsr-it.fade{opacity:0;scale:.6;transition:opacity .35s,scale .35s}

/* 1d. v3, the default: the team folds into Eva at the centre, then she becomes the hero's own opening Eva */
html.ts-intro-hold .arrival-home-screen .v-art > :not(.ts-intro-layer){opacity:0!important}
/* v3: the hero's own big Eva (and the chat's small one) stay unseen while the intro's Eva stands in for them and flies into the chat; filter, not opacity, so their boxes can still be read */
html.ts-hide-hero-eva .arrival-home-screen .v-art .c-ecosystem img[src*="eva-confident"],html.ts-hide-hero-eva .arrival-home-screen .v-art eva-scene{filter:opacity(0)}
.ts-intro-layer.v3{transition:opacity .15s linear}   /* the hero's own Eva is right under hers, so a quick cut reads as 1 Eva */
.ts-intro-layer.v2 .tsr-it.fold{opacity:0;scale:.3;transition:left .9s cubic-bezier(.45,0,.2,1),top .9s cubic-bezier(.45,0,.2,1),scale .9s cubic-bezier(.45,0,.2,1),opacity .5s ease .45s}
.ts-intro-layer.v3.ts-closing .tsr-grid,.ts-intro-layer.v3.ts-closing .tsr-sweep,.ts-intro-layer.v3.ts-closing .tsr-lab{transition:opacity .6s ease}

/* 2b. The chapter pictures cross over more slowly (was 420 ms) */
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
 .arrival-visual{transition:opacity 700ms cubic-bezier(.45,0,.2,1),transform 700ms cubic-bezier(.22,.61,.36,1),visibility 0s linear 700ms!important}
 .arrival-visual[data-ready=true][data-shown=true]{transition:opacity 700ms cubic-bezier(.45,0,.2,1),transform 700ms cubic-bezier(.22,.61,.36,1)!important}
 .arrival-flow .arrival-marker > .h-arrival-copy{will-change:opacity,transform}
 /* 2d. No scroll snap: tried on 18 Oct, it pulled every short wheel scroll back to the chapter's start, so a reader could not leave the first chapter */
}

/* 3. The roster with fixed seats; a seat empties and fills with a short animation */
html.ts-strip-on .arrival-home-screen .arrival-team-strip,html.ts-strip-on .arrival-home-screen .arrival-cast[data-strip="true"]{opacity:0!important}
.ts-strip{position:absolute;left:50%;bottom:8px;translate:-50% 0;z-index:6;width:max-content;display:flex;align-items:center;height:50px;padding:0 10px 0 14px;border:1px solid #E0E0E0;border-radius:25px;background:#fff;box-shadow:0 6px 18px -10px rgba(20,30,80,.25);white-space:nowrap;transition:opacity .35s ease}
.ts-strip.ts-hide{opacity:0;pointer-events:none}
.ts-strip-label{flex:none;display:inline-flex;align-items:center;gap:6px;font:700 11px/1 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#141414;padding-right:12px}
.ts-strip-label svg,.ts-seg-label svg{width:14px;height:14px;flex:none}
.ts-seg{flex:none;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-left:1px solid #E6E6EE;height:32px}
.ts-seg-label{flex:none;display:inline-flex;align-items:center;gap:4px;font:700 10px/1 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-right:2px}
.ts-seg.b .ts-seg-label{color:#5351fb}.ts-seg.a .ts-seg-label{color:#077995}.ts-seg.s .ts-seg-label{color:#11813b}
.ts-slot{position:relative;flex:none;width:30px;height:30px}
.ts-slot.agent{width:26px;height:26px}
.ts-slot img,.ts-slot .ts-seat{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;box-sizing:border-box;transition:opacity .45s ease,scale .45s cubic-bezier(.22,.7,.2,1)}
.ts-slot img{object-fit:cover;background:#fff}
.ts-seg.b .ts-slot img{box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(83,81,251,.55)}
.ts-seg.s .ts-slot img{box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(17,129,59,.55)}
.ts-slot.agent img{box-shadow:0 2px 6px rgba(83,81,251,.2)}
.ts-slot.eva img{box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(143,237,255,.9)}
.ts-slot .ts-seat{border:1.5px dashed #c9c9d6;background:#f6f6fa;opacity:0;scale:.7}
.ts-seg.b .ts-seat{border-color:rgba(83,81,251,.45)}.ts-seg.a .ts-seat{border-color:rgba(7,121,149,.45)}.ts-seg.s .ts-seat{border-color:rgba(17,129,59,.5)}
.ts-slot.away img{opacity:0;scale:.4}
.ts-slot.away .ts-seat{opacity:1;scale:1}
@media (prefers-reduced-motion:reduce){.ts-slot img,.ts-slot .ts-seat{transition:none}}

/* the call: the seller on the extension's user avatar */
.ts-call-seat{position:fixed;z-index:20;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #11813b,0 4px 10px rgba(20,30,80,.25);pointer-events:none;transition:opacity .4s ease,scale .4s ease}
.ts-call-seat.ts-hide{opacity:0;scale:.5}
.ts-banner{position:fixed;left:16px;bottom:16px;z-index:9999;padding:8px 12px;border-radius:10px;background:#141414;color:#fff;font:600 12px/1.3 Manrope,Arial,sans-serif;max-width:340px;box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* 4. The builder card: taller, so the zoomed-in workflow fits (team-split.js, builderZoom); the frame quieter: a soft shadow and a hairline instead of the deep drop shadow */
@media(min-width:1280px){
 .c-hero-workflow{top:150px!important;height:640px!important;box-shadow:0 12px 32px -20px rgba(20,30,80,.22),0 0 0 1px rgba(18,55,224,.06)!important}
}

/* 5. No box behind the hero (JB, 18 Oct: "do we need to have this line here or cube with the different color inside? can't this be the full page behind?"): the orbit area's own 2 glows
   stopped hard at its box; the page's own wash (on the body) carries the colour instead */
.arrival-home-screen .c-hub{background:none!important}
/* JB, 19 Oct 2026: "the team roster doesn't fit on the page anymore" (6 sellers made the bar 993 px in an 876 px picture): the sellers overlap as a face pile, the agents and the groups sit closer */
.ts-strip{padding:0 8px 0 12px}
.ts-strip-label{padding-right:8px}
.ts-seg{gap:4px;padding:0 9px}
.ts-seg.s{gap:0}
.ts-seg.s .ts-slot+.ts-slot{margin-left:-7px}
.ts-seg.s .ts-seg-label{margin-right:6px}
.ts-slot{width:28px;height:28px}
.ts-slot.agent{width:24px;height:24px}
.ts-seg.s .ts-slot+.ts-slot{margin-left:-8px}
/* JB, 19 Oct 2026: the Listening pill hangs under Eva's face (expanded-story.js copy sets data-below), so it never covers the message above her */
.u-eva-status[data-below=true]{translate:-50% 0!important}
/* JB, 19 Oct 2026 ("Eva listening is overlapping with the chat"): while she listens and thinks, Eva waits lower in the chat, below where her answer card appears, then docks up into it */
@media (min-width:927px){
.c-story[data-moment=overview][data-hero-phase=conversation]:not([data-hero-eva=docked]){--hero-eva-y:.46!important}
.c-story[data-moment=overview]:is([data-hero-story=slack],[data-hero-story=teams])[data-hero-phase=conversation]:not([data-hero-eva=docked]){--hero-eva-y:.46!important}
}
/* JB, 19 Oct 2026: the Gmail window (the run email in its inbox) and the Salesforce record sit beside Slack's chat, from near the top */
.c-story[data-moment=overview][data-hero-work-focus] [data-hero-activity-window=completion-email][data-hero-work-promoted=true]{top:calc(var(--c-stage-height) * .02)!important}
.c-story[data-moment=overview][data-hero-work-focus] [data-hero-activity-window=crm][data-hero-work-promoted=true]{top:calc(var(--c-stage-height) * .24)!important}
/* the Salesforce record comes in front: the research toast before it steps aside, so the record's Salesforce header is never covered */
.c-story[data-moment=overview][data-hero-work=illustrative-configured-account-writeback] [data-hero-activity-window=workspace]{opacity:0!important;visibility:hidden!important}
.c-story[data-moment=overview][data-hero-work-focus] [data-hero-activity-window=crm][data-hero-work-promoted=true]{top:calc(var(--c-stage-height) * .04)!important;z-index:5!important}

/* single-rep chapters (Week, Meeting, Call): the team bar shows only the rep in the story (JB, 19 Oct 2026) */
.ts-seg.s .ts-slot.ts-solo-off{display:none}

/* A + C, ?flow=ac (JB, 19 Oct 2026): the radar's rings blow outwards as the team bursts; members flying between the hero and their seats in the team bar */
.ts-intro-layer.v2.ts-closing.ts-a .tsr-grid{transform:scale(1.4);transform-origin:50% 52%;opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .8s ease}
.ts-ac-fly{position:fixed;z-index:80;left:0;top:0;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px #fff,0 6px 14px -6px rgba(20,30,80,.4);pointer-events:none}
.ts-ac-fly.agent{object-fit:contain}
.ts-slot.ts-arriving img{opacity:0!important;transition:none!important}
html.ts-ac-burst .arrival-home-screen .v-art .c-float-person,html.ts-ac-burst .arrival-home-screen .v-art .c-agent,html.ts-ac-burst .ts-hero-seller{visibility:hidden!important}
/* the bar leaves at once when the hero comes back, so it never shows under the hero's tool tabs (JB, 19 Oct 2026, A + C film) */
.ts-strip.ts-hide{transition:none}
/* A + C: the tool tabs wait until the team has burst out of the bar, then fade in */
html.ts-flow .arrival-hero-tabs{transition:opacity .35s ease}
html.ts-ac-burst .arrival-hero-tabs{opacity:0!important;transition:none}
/* the hero's tool tabs never show while the team bar is on screen: scrolling up, they came in over the bar (JB, 19 Oct 2026, A + C film) */
html.ts-strip-on .arrival-hero-tabs{opacity:0!important;pointer-events:none}
/* A, the integrations (?flow=ac&tools=dock|orbit, JB 19 Oct 2026): the CRMs and browsers land in the hero */
html.ts-flow .ts-int-chip{position:absolute;z-index:4;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(115,113,252,.2),0 6px 14px -8px rgba(20,30,80,.35);display:grid;place-items:center;pointer-events:none}
html.ts-flow .ts-int-chip img{width:20px;height:20px;object-fit:contain}
.ts-int-dock{position:absolute;right:8px;bottom:60px;z-index:39;display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 0 0 1px rgba(18,55,224,.08),0 10px 28px -14px rgba(18,55,224,.35);font:700 10px/1 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#141414;white-space:nowrap;transition:opacity .35s ease}
.ts-int-dock img{width:18px;height:18px;object-fit:contain}
.ts-int-lab{display:inline-flex;align-items:center;gap:5px;color:#1237E0}.ts-int-lab svg{width:13px;height:13px;flex:none}
.ts-int-sep{width:1px;height:16px;background:#E0E0E0;margin:0 3px}
html.ts-intro-veil .ts-int-dock,html.ts-intro-wait .ts-int-dock{filter:opacity(0)}
html.ts-strip-on .ts-int-dock,html.ts-ac-burst .ts-int-dock{opacity:0!important;pointer-events:none}
@media(max-width:899px){.ts-int-dock{display:none}}
/* tighter, so the dock clears the chat card's corner (19 Oct film) */
.ts-int-dock{gap:5px;padding:0 10px;letter-spacing:.06em}.ts-int-dock img{width:16px;height:16px}.ts-int-sep{margin:0 2px}
/* Builders and Sellers in the hero (JB, 19 Oct 2026, option B): a thin ring in the group's colour on each face, and 1 name per group */
.arrival-home-screen .c-story .c-float-person:is([data-actor="nina"],[data-actor="david"],[data-actor="sarah"]):not(.is-docked) .c-person{box-shadow:0 0 0 1.5px rgba(83,81,251,.75)!important}
.arrival-home-screen .c-story .c-float-person:is([data-actor="leo"],[data-actor="emma"]):not(.is-docked) .c-person{box-shadow:0 0 0 1.5px rgba(17,129,59,.75)!important}
.ts-role-pill{position:absolute;z-index:5;translate:-50% -50%;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:#fff;border:1px solid;font:700 11px/1 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none;box-shadow:0 6px 16px -10px rgba(20,30,80,.3);transition:opacity .4s ease}
.ts-role-pill svg{width:13px;height:13px;flex:none}.ts-role-pill.b{color:#5351fb;border-color:rgba(83,81,251,.35)}.ts-role-pill.s{color:#11813b;border-color:rgba(17,129,59,.35)}
@media(max-width:899px){.ts-role-pill{display:none}}
/* the hero shades whoever is not in the current story (JB, 19 Oct 2026): people, agents and the group names; a filter, so it multiplies with the hero's own fades */
.arrival-home-screen .c-story :is(.c-float-person,.c-agent).ts-dim,.ts-hero-seller.ts-dim,.ts-role-pill.ts-dim{filter:opacity(.42) saturate(.6);transition:filter .5s ease}
.arrival-home-screen .c-story :is(.c-float-person,.c-agent),.ts-hero-seller,.ts-role-pill{transition:filter .5s ease}
/* the integrations (JB, 19 Oct 2026): the dock's seats, TitanX, logos flying to their windows, and the team bar's Integrations group */
.ts-int-slot{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;transition:filter .4s ease}
.ts-int-slot img{transition:opacity .2s}.ts-int-slot.out img{opacity:0}
.ts-int-slot.out::after{content:'';position:absolute;inset:-2px;border:1.5px dashed #b9c1d6;border-radius:50%}
.ts-int-slot.ts-dim{filter:opacity(.38) saturate(.4)}
.ts-int-fly{box-shadow:0 0 0 2px #1237E0,0 8px 18px -6px rgba(20,30,80,.35)!important}
.ts-seg.i .ts-slot.logo img{object-fit:contain;padding:5px;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(18,55,224,.4)}
.ts-seg.i .ts-slot+.ts-slot{margin-left:-8px}
.ts-seg.i .ts-seg-label{color:#1237E0}
.ts-seg.i .ts-slot.ts-lit img{box-shadow:0 0 0 2px #fff,0 0 0 4px #1237E0}.ts-seg.i .ts-slot.ts-lit{z-index:2}
/* the team bar with its 4th group fits under the picture (JB, 19 Oct 2026): smaller seats and gaps, and the 4 group names say what it is, so the "Your team" lead goes */
.ts-strip-label{display:none}.ts-strip{padding:0 6px}
.ts-seg{gap:3px;padding:0 7px}.ts-seg:first-of-type{border-left:0}
.ts-seg-label{letter-spacing:.06em}
.ts-slot{width:26px;height:26px}.ts-slot.agent{width:22px;height:22px}
.ts-seg.s .ts-slot+.ts-slot,.ts-seg.i .ts-slot+.ts-slot{margin-left:-9px}
/* square logos sit fully inside their circles (JB, 19 Oct 2026: HubSpot looked cropped) */
.ts-int-fly{padding:0}.ts-seg.i .ts-slot.logo img{padding:24%!important}
/* the loop (JB, 19 Oct 2026): the hero eases out while the team gathers onto the radar, and back in once they have burst out again */
html.ts-flow .arrival-home-screen .v-art > :not(.ts-intro-layer),html.ts-flow .arrival-hero-tabs,html.ts-flow .ts-int-dock{transition:filter .8s ease,opacity .35s ease}
/* Integrations seats side by side: a logo half under the next seat read as a cropped logo (JB, 20 Oct 2026); faces still stack */
.ts-seg.i .ts-slot+.ts-slot{margin-left:3px!important}
/* logos never clipped (JB, 20 Oct 2026): the circle is a background disc and ring, not round corners on the logo image */
.ts-seg.i .ts-slot.logo img{border-radius:0!important;box-shadow:none!important;inset:-3.5px!important;width:calc(100% + 7px)!important;height:calc(100% + 7px)!important;padding:calc(24% + 2px)!important;object-fit:contain;background:radial-gradient(circle closest-side,#fff calc(100% - 2.0px),rgba(18,55,224,.4) calc(100% - 1.5px),rgba(18,55,224,.4) 100%,transparent calc(100% + .5px))!important}
.ts-seg.i .ts-slot.ts-lit img{background:radial-gradient(circle closest-side,#fff calc(100% - 3.0px),#1237E0 calc(100% - 2.5px),#1237E0 100%,transparent calc(100% + .5px))!important}
.ts-int-fly{border-radius:0!important;box-shadow:none!important;object-fit:contain;background:radial-gradient(circle closest-side,#fff calc(100% - 2.5px),#1237E0 calc(100% - 2.0px),#1237E0 100%,transparent calc(100% + .5px))!important}
/* The customer chapter (JB, 20 Oct 2026): after the 8 stories, 3 customer steps in the same frame, scroll-driven, with its own rail and team bar; faces, favorite agents,
   CRMs and chats fly out of the bar into the story and back. Logos sit in background discs, never in round images (round images clip their tips). */
.ts-cu{background:#fff;position:relative}
.ts-cu-track{height:330vh;position:relative}
.ts-cu-stage{position:sticky;top:64px;height:calc(100vh - 64px);max-width:1280px;margin:0 auto;padding:0 32px;box-sizing:border-box;overflow:hidden}
.ts-cu-rail{height:52px;display:flex;align-items:center}
.ts-cu-rail .arrival-rail{display:flex!important;position:static!important;top:auto!important;left:auto!important;visibility:visible!important}
.ts-cu-rail .arrival-rail{max-width:none!important;width:max-content}.ts-cu-rail .arrival-rail-step,.ts-cu-rail .arrival-rail-label,.ts-cu-rail li{flex:none}.ts-cu-rail .arrival-rail-step img{flex:none;display:block}
.ts-cu-steps{position:relative;height:calc(100% - 52px - 76px)}
.ts-cu-step{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:center;transition:opacity .35s ease}
.ts-cu-step[hidden]{display:grid!important;opacity:0;pointer-events:none;visibility:hidden}
.ts-cu-copy{min-width:0;max-width:560px}
.ts-cu-copy .h-arrival-eyebrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ts-cu-logo{display:block;margin:2px 0 12px}
.ts-cu-copy h2{margin:0;font-size:clamp(30px,3.1vw,44px);line-height:1.08;letter-spacing:-.025em;font-weight:700;color:#141414;text-wrap:balance}   /* the column's width, lines evened (JB, 20 Oct 2026: ARIS's 'enablement.' and 'workflows.' up a line) */
.ts-cu-copy h2 span{display:block;color:#1237E0}
.ts-cu-quote{display:flex;gap:14px;align-items:flex-start;margin:22px 0 0}
.ts-cu-quote>img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(194,65,12,.55)}
.ts-cu-quote q{quotes:"\201C" "\201D";display:block;font-size:17px;line-height:1.45;color:#333}
.ts-cu-quote small{display:block;margin-top:6px;font-size:13.5px;color:#4b4b4b}.ts-cu-quote b{color:#141414}
.ts-cu-uses{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;margin:18px 0 0}
.ts-cu-uses dt{display:flex;gap:6px;align-items:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4b4b4b;white-space:nowrap}
.ts-cu-uses dt svg{width:14px;height:14px;fill:none;stroke:#1237E0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ts-cu-uses dd{margin:0;display:flex;gap:6px;flex-wrap:wrap}
.ts-cu-chip{display:inline-flex;gap:6px;align-items:center;border:1px solid #e3e6ee;border-radius:999px;padding:3px 10px 3px 4px;font-size:13px;font-weight:600;color:#141414;background:#fff}
.ts-cu-chip>img{width:22px;height:22px}
.ts-cu-disc{width:22px;height:22px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(circle closest-side,#fff calc(100% - 1.5px),#d9ddee calc(100% - 1px),#d9ddee 100%,transparent calc(100% + .5px))}
.ts-cu-disc img{width:12px;height:12px;object-fit:contain}
.ts-cu-btn{display:inline-flex;align-items:center;gap:16px;margin-top:22px;min-height:48px;padding:0 8px 0 24px;border-radius:100px;background:#EBEEFF;color:#1237E0;font-weight:600;font-size:16px;text-decoration:none;transition:background .2s ease}
.ts-cu-btn:hover,.ts-cu-btn:focus-visible{background:#dfe4ff}
.ts-cu-btn .h-icon{background:#1237E0;color:#fff;border-radius:50%;width:36px;height:36px;padding:9px;box-sizing:border-box}
.ts-cu-pic{min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.ts-cu-frame{position:relative;width:min(100%,calc((100vh - 64px - 52px - 76px - 90px) * var(--r,1)))}
.ts-cu-frame>img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 30px 60px -34px rgba(20,30,80,.45)}
.ts-cu-ring{position:absolute;border:2.5px solid #1237E0;border-radius:12px;background:rgba(18,55,224,.04)}
.ts-cu-num{position:absolute;width:26px;height:26px;border-radius:50%;background:#1237E0;color:#fff;font:800 13px/26px 'Space Grotesk',sans-serif;text-align:center}
.ts-cu-cap{margin:16px 0 0;align-self:flex-start;background:#fff;border:1px solid #e3e6ee;border-radius:14px;padding:10px 16px;font-size:15px;font-weight:700;display:flex;gap:10px;align-items:center;box-shadow:0 12px 26px -18px rgba(20,30,80,.35)}
.ts-cu-bar{position:absolute;left:50%;bottom:14px;translate:-50% 0;display:flex;gap:14px;align-items:center;height:50px;padding:0 14px;border:1px solid #E0E0E0;border-radius:25px;background:#fff;box-shadow:0 6px 18px -10px rgba(20,30,80,.25);white-space:nowrap;font:800 10.5px/1 'Space Grotesk',sans-serif;letter-spacing:.07em;text-transform:uppercase}
.ts-cu-g{display:flex;gap:5px;align-items:center}.ts-cu-g>svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-right:1px}
.ts-cu-g.c{color:#c2410c}.ts-cu-g.a{color:#077995}.ts-cu-g.t{color:#1237E0}
.ts-cu-g+.ts-cu-g{border-left:1px solid #e9ebf1;padding-left:12px}
.ts-cu-seat{position:relative;width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.ts-cu-seat>img{width:32px;height:32px;transition:opacity .25s ease,scale .3s ease}
.ts-cu-g.c .ts-cu-seat>img,.ts-cu-seat.eva>img{border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(194,65,12,.45)}
.ts-cu-seat.eva>img{box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(143,237,255,.9)}
.ts-cu-seat.ag>img{width:28px;height:28px}
.ts-cu-seat.logo>img{width:32px;height:32px;padding:9px;box-sizing:border-box;object-fit:contain;background:radial-gradient(circle closest-side,#fff calc(100% - 2px),rgba(18,55,224,.35) calc(100% - 1.5px),rgba(18,55,224,.35) 100%,transparent calc(100% + .5px))}
.ts-cu-seat::after{content:'';position:absolute;inset:2px;border-radius:50%;border:1.5px dashed #c8cde0;opacity:0;transition:opacity .25s ease}
.ts-cu-seat.away>img{opacity:0;scale:.5}.ts-cu-seat.away::after{opacity:1}
.ts-cu-fly{position:fixed;z-index:90;left:0;top:0;pointer-events:none;box-sizing:border-box}
.ts-cu-fly.face{border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #c2410c,0 8px 18px -6px rgba(20,30,80,.35)}
.ts-cu-fly.agent{object-fit:contain;filter:drop-shadow(0 6px 10px rgba(20,30,80,.3))}
.ts-cu-fly.logo{object-fit:contain;background:radial-gradient(circle closest-side,#fff calc(100% - 2.5px),#1237E0 calc(100% - 2px),#1237E0 100%,transparent calc(100% + .5px))}
.ts-cu-wait{visibility:hidden}
/* the G2 ribbon */
.ts-g2{background:#fff;padding:72px 0 64px;overflow:hidden;text-align:center}
.ts-g2-head h2{margin:0;font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.02em;font-weight:700;color:#141414}.ts-g2-head h2 span{color:#1237E0}
.ts-g2-head .h-arrival-eyebrow img{width:14px;height:14px}
.ts-g2-sub{margin:12px 0 0;color:#4b4b4b;font-size:17px}
.ts-g2-lanes{position:relative;margin-top:32px}
.ts-g2-lanes::before,.ts-g2-lanes::after{content:'';position:absolute;top:0;bottom:0;width:160px;z-index:2;pointer-events:none}
.ts-g2-lanes::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}.ts-g2-lanes::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.ts-g2-lane{display:flex;gap:16px;width:max-content;margin-top:16px}
.ts-g2-lane.l1{animation:tsG2L 80s linear infinite}.ts-g2-lane.l2{animation:tsG2R 80s linear infinite}
.ts-g2-lanes:hover .ts-g2-lane{animation-play-state:paused}
@keyframes tsG2L{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes tsG2R{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.ts-g2-card{width:320px;min-height:178px;margin:0;flex:none;text-align:left;background:#f7f8fc;border:1px solid #eceef5;border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.ts-g2-top{display:flex;justify-content:space-between;align-items:center}
.ts-g2-stars{color:#ff9f1c;font-size:22px;letter-spacing:2px;line-height:1}
.ts-g2-card blockquote{margin:0;font-size:18px;line-height:1.35;font-weight:600;color:#141414}
.ts-g2-card blockquote::before{content:'\201C'}.ts-g2-card blockquote::after{content:'\201D'}
.ts-g2-card figcaption{margin-top:auto;display:flex;gap:10px;align-items:center;font-size:13px;color:#4b4b4b}
.ts-g2-card figcaption>img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.ts-g2-card figcaption b{display:block;color:#141414;font-size:14px}
.ts-g2-ini{width:36px;height:36px;border-radius:50%;background:#5b3fd6;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.ts-g2-all{margin-top:30px}.ts-g2-all a{display:inline-flex;gap:8px;align-items:center;border:1px solid #e3e6ee;border-radius:999px;padding:12px 22px;color:#1237E0;font-weight:700;text-decoration:none}
.ts-g2-all a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:999px){.ts-cu-track{height:auto}.ts-cu-stage{position:static;height:auto;padding:40px 20px;overflow:visible}.ts-cu-rail,.ts-cu-bar{display:none}
 .ts-cu-steps{height:auto}.ts-cu-step,.ts-cu-step[hidden]{position:static;display:grid!important;grid-template-columns:1fr;gap:20px;opacity:1;visibility:visible;margin-bottom:48px}.ts-cu-frame{height:auto;max-height:none;width:100%}}
@media (prefers-reduced-motion:reduce){.ts-g2-lane{animation:none!important}.ts-cu-step{transition:none}}
/* the bar morph into the customer chapter (JB, 20 Oct 2026) */
.ts-cu-seat.ts-cu-hold>img{opacity:0!important}.ts-cu-seat.ts-cu-hold::after{opacity:0!important}
.ts-cu-fly.plain{border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 6px 14px -6px rgba(20,30,80,.35)}
html.ts-cu-on .ts-strip{opacity:0!important;transition:opacity .2s ease}
/* Compare, Pick yours (JB, 20 Oct 2026): after the G2 ribbon, 7 chips and 1 picture */
.ts-cmp{background:#fff;padding:24px 0 84px;text-align:center}
.ts-cmp-head h2{margin:0;font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-.02em;font-weight:700;color:#141414}
.ts-cmp-head h2 span{color:#1237E0}
.ts-cmp-head .h-arrival-eyebrow svg,.ts-cmp-lg.ico svg,.ts-cmp-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ts-cmp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1280px;margin:26px auto 30px;padding:0 16px}
.ts-cmp-chip{display:inline-flex;align-items:center;gap:9px;border:1px solid #DDE1EA;border-radius:999px;background:#fff;padding:7px 15px 7px 8px;font:700 14px/1 Manrope,sans-serif;color:#141414;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s,color .2s}
.ts-cmp-chip:hover{border-color:#9aa8e8}
.ts-cmp-chip[aria-selected="true"]{border-color:#1237E0;background:#eef1ff;color:#1237E0;box-shadow:0 0 0 3px rgba(18,55,224,.12)}
.ts-cmp-chip:focus-visible,.ts-cmp-btn:focus-visible{outline:2px solid #1237E0;outline-offset:3px}
/* a logo whole in its own white square: never a radius on the img */
.ts-cmp-lg{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:4px;box-sizing:border-box;background:#fff;border:1px solid #E3E6EE;border-radius:7px;flex:none;color:#141414}
.ts-cmp-lg img{width:100%;height:100%;object-fit:contain;display:block;border-radius:0}
.ts-cmp-lg+.ts-cmp-lg{margin-left:3px}
.ts-cmp-stage{max-width:1120px;margin:0 auto;padding:0 32px;text-align:left}
.ts-cmp-panel{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;min-height:min(560px,calc(100vh - 250px))}
.ts-cmp-panel[hidden]{display:none}
.ts-cmp-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ts-cmp-who{display:inline-flex;align-items:center;gap:8px;margin:0;font:700 14px/1.2 Manrope,sans-serif;color:#141414}
.ts-cmp-copy h3{margin:0;font-size:clamp(28px,2.7vw,38px);line-height:1.1;letter-spacing:-.02em;font-weight:700;color:#141414}
.ts-cmp-copy h3 span{color:#1237E0}
.ts-cmp-lead{margin:0;font-size:17px;line-height:1.55;color:#3f4450;max-width:470px}
.ts-cmp-btn{display:inline-flex;align-items:center;gap:8px;margin-top:6px;background:#141414;color:#fff;border-radius:999px;padding:12px 20px;font:700 14.5px/1 Manrope,sans-serif;text-decoration:none}
.ts-cmp-btn:hover{background:#1237E0}
.ts-cmp-pic{display:flex;justify-content:center}
.ts-cmp-pic img{width:auto;height:auto;max-width:min(100%,470px);max-height:max(360px,calc(100vh - 330px));display:block}   /* the whole screen fits under the chips */
.ts-cmp-in .ts-cmp-copy{animation:ts-cmp-rise .45s cubic-bezier(.2,.7,.2,1) both}
.ts-cmp-in .ts-cmp-pic{animation:ts-cmp-rise .5s .06s cubic-bezier(.2,.7,.2,1) both}
@keyframes ts-cmp-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ts-cmp-fly{position:fixed;z-index:60;pointer-events:none;margin:0!important;box-shadow:0 8px 18px -8px rgba(20,30,80,.4)}
@media(max-width:900px){.ts-cmp-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:22px 0 28px}.ts-cmp-chip{flex:none}
  .ts-cmp-stage{padding:0 16px}.ts-cmp-panel{grid-template-columns:1fr;gap:28px;min-height:0}.ts-cmp-pic img{max-width:420px}}
@media(prefers-reduced-motion:reduce){.ts-cmp-in .ts-cmp-copy,.ts-cmp-in .ts-cmp-pic{animation:none}.ts-cmp-chip{transition:none}}
/* The grouped story rail (JB, 20 Oct 2026; rail.js). Stacked titles: each act's title sits small above its own chapters, so a title never reads as a
   button; every chapter keeps its icon. The rail grows from 36 to 40 px and sits 2 px higher, inside the band the page already keeps for it. */
.arrival-rail{height:40px!important;top:-46px!important;padding:0 6px!important}
.arrival-rail>ol{align-self:stretch;align-items:stretch!important}
.arrival-rail-act{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;margin:4px 0;gap:1px}
.arrival-rail-act+.arrival-rail-act::before{display:none!important}
.arrival-rail-act+.arrival-rail-act{border-left:1px solid rgba(18,55,224,.18);padding-left:4px;margin-left:4px}
.arrival-rail-label{font-size:9px!important;letter-spacing:.09em!important;padding:0 10px!important;line-height:1!important;color:#3f4450!important}
.arrival-rail-label svg{display:none!important}
.arrival-rail-step{min-height:21px!important;padding:0 10px 0 8px!important}
/* what follows the stories, folded into a chip that jumps there */
.arrival-rail-act.ts-rail-fold{justify-content:center!important}
.ts-rail-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 9px;margin:0 2px;border-radius:999px;background:#f3f5fb;box-shadow:inset 0 0 0 1px #dde2ee;font:600 12px/1 'Space Grotesk',sans-serif;color:#161616;text-decoration:none;white-space:nowrap;transition:background .15s ease}
.ts-rail-chip:hover{background:#eaeefb}.ts-rail-chip:focus-visible{outline:2px solid #1237E0;outline-offset:2px}
.ts-rail-chip svg{width:14px;height:14px;flex:none;color:#1237E0}
.ts-rail-logos{display:inline-flex;align-items:center;gap:3px}.ts-rail-logos img{display:block}
.ts-rail-logos svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
/* the pinned rail after the stories: fixed under the menu, folds on the hand-over from Call */
.arrival-rail.ts-rail2{position:fixed!important;top:70px;z-index:40;display:flex!important;max-width:calc(100vw - 32px)!important;width:max-content;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s,left .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1)}
html.ts-rail2-on .arrival-rail.ts-rail2{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease,left .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1)}
html.ts-rail2-on .arrival-home-screen .arrival-rail{visibility:hidden!important}
.ts-rail2>ol>li{overflow:hidden;max-width:var(--w,600px);transition:max-width .6s cubic-bezier(.4,0,.2,1),opacity .35s ease,padding .6s,margin .6s,border-color .6s}
.ts-rail2>ol>li.ts-r-shut{max-width:0;opacity:0;padding-left:0!important;margin-left:0!important;border-left-color:transparent!important}
.ts-rail2>ol>li:not(.ts-r-shut)+li:not(.ts-r-shut){border-left:1px solid rgba(18,55,224,.18)}
.ts-rail2>ol>li:first-child,.ts-rail2>ol>li.ts-r-shut+li.ts-r-after{border-left-color:transparent}
.ts-rail2.ts-r-measure{max-width:none!important}.ts-rail2.ts-r-measure>ol>li{max-width:none!important}
.ts-rail2.ts-r-instant,.ts-rail2.ts-r-instant>ol>li{transition:none!important}
/* the customer chapter keeps its rail's room; the pinned rail sits in it */
.ts-cu-rail .arrival-rail{display:none!important}
#home-compare,#home-reviews{scroll-margin-top:120px}
@media(max-width:999px){.arrival-rail.ts-rail2{display:none!important}}
@media(prefers-reduced-motion:reduce){.arrival-rail.ts-rail2,.ts-rail2>ol>li{transition:none!important}}
/* The customer panels build up row by row (customers.js build, JB, 20 Oct 2026): a row rises in, its agent lands on its icon and then its numbers fill; once every row is in,
   the row the step is about is outlined along its own edge, with the caption's number beside it. */
.ts-cu-panel{display:block;margin:0 auto;max-width:520px;width:100%}
.ts-cu-panel .ts-cu-row{position:relative;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.ts-cu-panel .ts-cu-row.in{opacity:1;transform:none}
.ts-cu-panel .ts-cu-row[data-agent]:not(.landed) .cs-fico,.ts-cu-panel .ts-cu-row[data-agent]:not(.landed) .cs-pico{opacity:0}
.ts-cu-panel .cs-fico,.ts-cu-panel .cs-pico{transition:opacity .25s ease}
@media(min-width:1000px){.ts-cu-panel .ts-cu-row:not(.landed) .cs-dots i.on{background:#e3e6ee!important;box-shadow:none!important}}
.ts-cu-panel .cs-dots i{transition:background .5s ease}
.ts-cu-panel .cs-pnote{opacity:0;transition:opacity .5s ease}.ts-cu-panel .cs-pnote.in{opacity:1}
.ts-cu-built .ts-cu-panel .ts-cu-row[data-key]{outline:2px solid #1237E0;outline-offset:3px;box-shadow:0 14px 30px -18px rgba(18,55,224,.55)}
@media(max-width:999px){.ts-cu-panel .ts-cu-row{opacity:1!important;transform:none!important}.ts-cu-panel .ts-cu-row .cs-fico,.ts-cu-panel .ts-cu-row .cs-pico{opacity:1!important}.ts-cu-panel .cs-pnote{opacity:1}}
@media(prefers-reduced-motion:reduce){.ts-cu-panel .ts-cu-row,.ts-cu-panel .cs-pnote{transition:none}}
/* The closing band, Night faded in (JB, 20 Oct 2026: "Build variant 1, Night faded in, into the concept homepage with the rail's Yours stop and concept 2's
   copy"; drawn in internal/.../close-concepts/concept-1-dark.html). Compare's white and its dots fade into night over the band's first 260px, so the page
   never cuts to black; the copy is concept 2's (Your story, the logo slot, the headline, 1 button) on the left, the team roster on the right, its Builders
   and Sellers seats open. The footer's own demo card is left off this page: its heading and buttons hide, its trust badges stay. */
#home-demo.ts-close-sec{position:relative;padding:300px 0 96px;background:linear-gradient(180deg,#fff 0,#f4f5f8 50px,#c9ccd6 130px,#2a2d36 210px,#141414 280px);color:#fff;overflow:hidden}
#home-demo.ts-close-sec::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(160,168,190,.32) 1px,transparent 1.2px) 0 0/16px 16px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 640px);mask-image:linear-gradient(180deg,#000,transparent 640px)}
.ts-close{position:relative;max-width:1240px;margin:0 auto;padding:0 var(--h-gutter,32px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:56px;align-items:center}
.ts-close-copy{min-width:0}
#home-demo .h-arrival-eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:#c8d1ff;margin:0}
#home-demo .h-arrival-eyebrow>svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ts-close-slot{display:flex;width:max-content;gap:8px;align-items:center;margin-top:14px;border:2px dashed rgba(200,209,255,.6);border-radius:10px;padding:6px 12px;font-weight:800;font-size:14px;color:#c8d1ff}
.ts-close-slot svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#home-demo .ts-close-copy h2{margin:16px 0 0;font-size:clamp(40px,4vw,56px);line-height:1.04;letter-spacing:-.03em;font-weight:700;color:#fff;text-wrap:balance;text-align:left}
#home-demo .ts-close-copy h2 span{display:block;color:#9fb0ff}
#home-demo .ts-close-copy .h-button{margin-top:30px}
.ts-close-team{margin:0;position:relative;border-radius:22px;padding:26px 24px 22px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.ts-close-team figcaption{position:absolute;top:-12px;left:50%;translate:-50% 0;display:inline-flex;gap:6px;align-items:center;white-space:nowrap;background:#1d2029;color:#e6e8ef;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:3px 10px;font:800 10.5px/1.4 'Space Grotesk',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.ts-close-team svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ts-close-team figcaption svg{width:12px;height:12px}
.ts-close-g{background:#1d2029;border:1px solid #2c303c;border-radius:16px;padding:14px 16px;box-shadow:0 12px 26px -20px rgba(0,0,0,.6);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.ts-close-g+.ts-close-g{margin-top:12px}
.ts-close-gh{margin:0 0 10px;display:flex;gap:7px;align-items:center;font:800 11px/1 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ts-close-gh small{margin-left:auto;font:700 12px/1 Manrope,sans-serif;letter-spacing:0;text-transform:none;color:#c9ccd6}
.ts-close-g.b .ts-close-gh,.ts-close-g.b .ts-close-open i{color:#b7b5ff}.ts-close-g.a .ts-close-gh{color:#7fe3f7}
.ts-close-g.s .ts-close-gh,.ts-close-g.s .ts-close-open i{color:#7fe0a5}.ts-close-g.t .ts-close-gh{color:#a9b8ff}
.ts-close-seats{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ts-close-seat{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:opacity .3s ease,scale .35s cubic-bezier(.2,.7,.2,1.3)}
.ts-close-seat img{width:36px;height:36px}
.ts-close-seat.eva img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #1d2029,0 0 0 4px rgba(143,237,255,.95)}
.ts-close-g.a .ts-close-seat:not(.eva){background:#fff;box-shadow:0 0 0 2px #fff}   /* the agents on a white disc with a white border, as in the light rows (JB, 20 Oct 2026: "put a white border around the agents") */
.ts-close-g.a .ts-close-seat:not(.eva) img{width:38px;height:38px}
.ts-close-seat.logo{background:#fff;box-shadow:0 0 0 1.5px rgba(18,55,224,.3)}.ts-close-seat.logo img{width:24px;height:24px;object-fit:contain;transition:opacity .22s ease,scale .3s ease}.ts-close-seat.logo img.ts-close-swap{opacity:0;scale:.7}
.ts-close-open{display:inline-flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:800;color:#c9ccd6;transition:opacity .3s ease}
.ts-close-open i{width:40px;height:40px;border-radius:50%;border:2px dashed currentColor;display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.ts-close-open i svg{width:18px;height:18px}
.ts-close-g.b .ts-close-open i{background:rgba(183,181,255,.08)}.ts-close-g.s .ts-close-open i{background:rgba(127,224,165,.08)}
.ts-close-wait .ts-close-g{opacity:0;transform:translateY(14px)}
.ts-close-wait .ts-close-g .ts-close-seat,.ts-close-wait .ts-close-g .ts-close-open{opacity:0;scale:.6}
.ts-close-wait .ts-close-g.in{opacity:1;transform:none}
.ts-close-wait .ts-close-g.in .ts-close-seat,.ts-close-wait .ts-close-g.in .ts-close-open{opacity:1;scale:1}
.ts-close-wait .ts-close-g.in .ts-close-seats>:nth-child(1){transition-delay:165ms}.ts-close-wait .ts-close-g.in .ts-close-seats>:nth-child(2){transition-delay:210ms}.ts-close-wait .ts-close-g.in .ts-close-seats>:nth-child(3){transition-delay:255ms}.ts-close-wait .ts-close-g.in .ts-close-seats>:nth-child(4){transition-delay:300ms}.ts-close-wait .ts-close-g.in .ts-close-seats>:nth-child(5){transition-delay:345ms}.ts-close-wait .ts-close-g.in .ts-close-seats>:nth-child(6){transition-delay:390ms}.ts-close-wait .ts-close-g.in .ts-close-seats>:nth-child(7){transition-delay:435ms}.ts-close-wait .ts-close-g.in .ts-close-seats>:nth-child(8){transition-delay:480ms}.ts-close-wait .ts-close-g.in .ts-close-seats>:nth-child(9){transition-delay:525ms}
#eg-footer .egf-band{display:block;background:none;border-radius:0;padding:0 0 20px;margin-bottom:40px;border-bottom:1px solid rgba(255,255,255,.14)}#eg-footer .egf-band-h,#eg-footer .egf-btns{display:none}#eg-footer .egf-badges{border-top:0;padding-top:0}   /* the shared quiet footer (shared-nav.css, egf-quiet), always on here: this page's last block is the story aside, so the shared check cannot see the close */
@media(max-width:999px){#home-demo.ts-close-sec{padding:220px 0 88px}.ts-close{grid-template-columns:1fr;gap:48px}}
@media(prefers-reduced-motion:reduce){.ts-close-g,.ts-close-seat,.ts-close-open{transition:none}}

/* the customer panels, the story pages' own (build_cu_panels.py) */
.ts-cu-panel{--border:#E0E0E0;--text:#141414}
.ts-cu-panel .vp{position:relative;padding:34px 26px 26px;border-radius:24px;isolation:isolate}
.ts-cu-panel .vp::before{content:"";position:absolute;inset:0;border-radius:24px;z-index:-1;
  background:radial-gradient(circle at 70% 75%,rgba(18,55,224,.10),transparent 60%),radial-gradient(rgba(20,20,20,.13) 1px,transparent 1.2px) 0 0/14px 14px,#FAFAFB;
  border:1px solid var(--border)}
.ts-cu-panel .vp-dim{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;
  background:#fff;border:1px solid var(--border);border-radius:100px;padding:4px 12px;font:700 .6rem/1.3 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.ts-cu-panel .cs-panel{padding:30px 20px 18px}
.ts-cu-panel .cs-fun{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px;position:relative}
.ts-cu-panel .cs-fun>li{position:relative;background:#fff;border:1px solid #E0E0E0;border-radius:14px;padding:11px 14px;box-shadow:0 2px 6px rgba(18,22,25,.04)}
.ts-cu-panel .cs-fun>li+li::before{content:"";position:absolute;left:50%;top:-18px;width:2px;height:18px;background:#9AA6E8;transform:translateX(-50%)}
.ts-cu-panel .cs-fun>li+li::after{content:"";position:absolute;left:50%;top:-7px;width:8px;height:8px;border-right:2px solid #9AA6E8;border-bottom:2px solid #9AA6E8;transform:translateX(-50%) rotate(45deg)}
.ts-cu-panel .cs-fstep{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.ts-cu-panel .cs-fico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#EEF1FC}
.ts-cu-panel .cs-fico img{width:22px;height:22px;display:block}
.ts-cu-panel .cs-fico svg{width:18px;height:18px;fill:#1237E0}
.ts-cu-panel .cs-fbody{min-width:0}
.ts-cu-panel .cs-fhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ts-cu-panel .cs-fnum{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;color:#141414;white-space:nowrap}
.ts-cu-panel .cs-fwhat{font-size:.82rem;line-height:1.35;color:#262626;flex:1 1 180px;min-width:0}
.ts-cu-panel .cs-dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px}
.ts-cu-panel .cs-dots i{display:block;width:8px;height:8px;border-radius:2px;background:#DADDE5}
.ts-cu-panel .cs-dots i.on{background:#1237E0}
.ts-cu-panel .cs-dots-ct{gap:2px}
.ts-cu-panel .cs-dots-ct i{width:6px;height:6px;border-radius:50%}
.ts-cu-panel .cs-dots-new i{width:7px;height:7px;border-radius:50%}
.ts-cu-panel .cs-dots-new i.on{background:#16A34A}
.ts-cu-panel .cs-dots-sql{gap:6px}
.ts-cu-panel .cs-dots-sql i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 3px #EEF1FC}
.ts-cu-panel .cs-fstep-sql{border-color:rgba(18,55,224,.35)!important;box-shadow:0 18px 40px -26px rgba(18,55,224,.6)!important}
.ts-cu-panel .cs-dots-mk{gap:5px}
.ts-cu-panel .cs-dots-mk i{width:14px;height:14px;border-radius:50%;background:#fff;border:2px dashed #6B7280}
.ts-cu-panel .cs-dots-mk i.on{background:#1237E0;border:0}
.ts-cu-panel .cs-dots-sel{gap:2px}
.ts-cu-panel .cs-dots-sel i{width:6px;height:6px;border-radius:50%}
.ts-cu-panel .cs-pnote{margin:12px 0 0;font-size:.78rem;color:#3F3F46;text-align:center}
.ts-cu-panel .cs-path{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ts-cu-panel .cs-pstep{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;background:#fff;border:1px solid #E0E0E0;border-radius:14px;padding:10px 14px}
.ts-cu-panel .cs-pstep+.cs-pstep::before{content:"";position:absolute;left:31px;top:-13px;width:2px;height:13px;background:#9AA6E8}
.ts-cu-panel .cs-pico{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#EEF1FC}
.ts-cu-panel .cs-pico svg{width:18px;height:18px;fill:#1237E0}
.ts-cu-panel .cs-pbody{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.ts-cu-panel .cs-pbody b{font-size:.98rem;color:#141414}
.ts-cu-panel .cs-pbody span{font-size:.82rem;color:#262626}
.ts-cu-panel .cs-pend{border-color:rgba(18,55,224,.4);box-shadow:0 22px 44px -28px rgba(18,55,224,.65)}
.ts-cu-panel .cs-pend .cs-pico{background:#1237E0}
.ts-cu-panel .cs-pend .cs-pico svg{fill:#fff}