/* One viewport, one fixed message, still product pictures; the cast (Eva, people, agents) is what moves (JB, 14 Oct 2026). */
:root{--arrival-gap:32px;--arrival-nav:80px;--arrival-radius:24px}
.arrival-enhanced .h-story-shell{display:block!important}
.arrival-enhanced .h-story-shell .h-opening{height:calc(100vh - 104px)!important;height:calc(100svh - 104px)!important;min-height:calc(100vh - 104px)!important;min-height:calc(100svh - 104px)!important;padding:0!important}
.arrival-enhanced .h-story-shell .h-story-copy{opacity:0;pointer-events:none}
.arrival-marker{min-height:108vh;min-height:108svh;position:relative;scroll-margin-top:0}
.arrival-mobile-poster{display:none}
.arrival-marker>.h-arrival-copy{max-width:var(--h-max);margin:auto;padding:80px var(--h-gutter)}
.arrival-enhanced .arrival-marker>.h-arrival-copy{visibility:hidden}
.arrival-home-screen{position:fixed;inset:calc(var(--arrival-nav) + var(--arrival-bar,0px)) 0 20px;z-index:12;max-width:var(--h-max);width:calc(100% - var(--h-gutter)*2);margin:auto;display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:var(--arrival-gap);align-items:center;background:var(--white);isolation:isolate}
.arrival-home-screen[hidden]{display:none!important}
.arrival-home-screen .v-copy{max-height:100%;min-width:0}
.arrival-home-screen .h-arrival-copy{position:static;padding:0}
.arrival-home-screen .v-copy h1{font-size:clamp(40px,4.5vw,64px)}
.arrival-home-screen .v-copy h2{font-size:clamp(34px,3.7vw,50px);max-width:13ch}
/* The headline scrolls, the picture stays (JB, 14 Oct 2026, wide screens; arrival-home.js flow()). Each chapter section is
   1 screen tall and laid out on the pinned screen's own 2 columns, so a resting headline sits exactly where the pinned one
   did; the screen lets it show through on the left and keeps the picture on the right. */
.arrival-flow .arrival-marker{min-height:calc(100vh - var(--arrival-nav) - var(--arrival-rail,0px) - 20px);min-height:calc(100svh - var(--arrival-nav) - var(--arrival-rail,0px) - 20px);display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:var(--arrival-gap);align-items:center;max-width:var(--h-max);width:calc(100% - var(--h-gutter)*2);margin:0 auto}
.arrival-flow #home-groundwork.arrival-marker,.arrival-flow #home-team.arrival-marker{grid-template-columns:minmax(0,28fr) minmax(0,72fr);gap:24px}  /* chapter 4 (launch plan S1) keeps chapter 3's split: its longer headline must not reach into chapter 3's pinned picture while it scrolls in */
.arrival-flow .arrival-marker>.h-arrival-copy{visibility:visible;grid-column:1;max-width:none;margin:0;padding:0;min-width:0}
.arrival-flow .arrival-marker>.h-arrival-copy h2{font-size:clamp(34px,3.7vw,50px);max-width:13ch}
h2[data-balance]{text-wrap:balance}  /* launch plan S1: the chapter 4 headline's lines break evenly, so no word is left alone on a line */
.arrival-flow .arrival-home-screen{background:transparent;pointer-events:none}
/* JB, 18 Oct 2026: "how could we make the background here more integrated with the background of the page?", then "Build C, one wash and no box". The picture's box was white on the hero's own faint violet wash, so its edges showed. On a wide
   screen the box is clear, the hero section paints no wash, and the page paints 1 soft oval of the same violet centred on the picture: no edge anywhere. Nothing scrolls under the box that it was hiding (vart_clear_walk.mjs). */
.arrival-flow .arrival-home-screen .v-art{background:transparent;pointer-events:auto}
.arrival-flow .h-story-shell{background:none}
html.arrival-flow body{background:radial-gradient(1100px 760px at 62% 470px,rgba(115,113,252,.07),rgba(115,113,252,0) 70%) no-repeat,#fff}
.arrival-flow .arrival-home-screen .v-copy{pointer-events:auto}.arrival-flow .arrival-home-screen .v-copy:empty{pointer-events:none}
@media(max-height:650px){.arrival-flow .arrival-marker>.h-arrival-copy h2{font-size:30px}.arrival-flow .arrival-marker>.h-arrival-copy .h-body{font-size:12px;margin-top:10px}}
.arrival-home-screen .v-art{height:100%;position:relative;overflow:hidden}
.arrival-hero-layer{position:absolute;inset:0}
.arrival-hero-layer[hidden]{display:none}
.arrival-home-screen .h-sticky-mount{position:relative!important;width:100%!important;height:auto!important;min-height:0!important;visibility:visible!important;overflow:visible!important}
.arrival-home-screen .h-sticky-mount>.h-story-moment{position:relative!important;width:100%!important;max-width:none!important;left:auto!important;top:auto!important}
/* Launch plan T2 (JB, 16 Oct 2026): the picture swap is gentler. The new picture fades in over 420 ms and drifts up 10 px as it does; the old one fades out over 300 ms, quickly at first, and stays where it is until it is gone,
   so the two are never both more than half visible together. Reduced motion: no fade and no drift, the picture simply changes. */
.arrival-visual{position:absolute;left:0;top:0;width:100%;height:calc(100% - 62px - var(--arrival-rail,0px) + var(--arrival-bar,0px));border:0;pointer-events:none;background:transparent;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity 300ms cubic-bezier(.33,1,.68,1),visibility 0s 300ms,transform 0s 300ms}
.arrival-visual[data-ready=true][data-shown=true]{opacity:1;visibility:visible;transform:none;transition:opacity 420ms cubic-bezier(.45,0,.2,1),transform 420ms cubic-bezier(.22,.61,.36,1)}
.arrival-visual[data-interactive=true][data-ready=true][data-shown=true]{pointer-events:auto}
/* Launch plan N1 (JB's pick D5 A, 15 Oct 2026): the chapter bar, 36 px high, in the pinned screen 8 px above its picture. --arrival-rail is its height (0 on phones),
   --arrival-bar the room it takes while it shows. The pictures keep 1 size when it comes and goes: they lose the bar's height all the time (the calc on .arrival-visual). */
.arrival-rail{position:absolute;left:0;top:-44px;z-index:3;display:none;height:36px;max-width:100%;box-sizing:border-box;align-items:center;padding:0 4px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 0 0 1px rgba(18,55,224,.12),0 10px 24px -16px rgba(18,55,224,.4);pointer-events:auto}
html.arrival-rail-on .arrival-rail{display:flex}
html.arrival-rail-gone .arrival-rail{visibility:hidden}  /* lifted away with the last chapter: out of sight and out of the tab order */
/* A headline that scrolls up behind the bar must not show through the gaps around it: while the bar shows, an invisible white band, as wide as the window, fills the room
   between the menu and the picture (it rides with the screen, so it leaves with the last chapter). left:calc(50% - 50vw) puts its left edge on the window's, because the screen is centred. */
html.arrival-rail-on .arrival-home-screen::before{content:'';position:absolute;z-index:-1;left:calc(50% - 50vw);width:100vw;top:calc(-1 * (var(--arrival-bar,0px) + 16px));height:calc(var(--arrival-bar,0px) + 16px);background:var(--white,#fff);pointer-events:none}
.arrival-rail ol{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.arrival-rail-act{display:flex;align-items:center}
.arrival-rail-act+.arrival-rail-act::before{content:'';flex:none;width:1px;height:18px;margin:0 6px 0 4px;background:rgba(18,55,224,.18)}
.arrival-rail-label{display:inline-flex;align-items:center;gap:6px;padding:0 8px 0 6px;font:700 11px/1 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#161616;white-space:nowrap}
.arrival-rail-label svg,.arrival-rail-step svg{flex:none;width:14px;height:14px;fill:currentColor;color:var(--blue,#1237E0)}
.arrival-rail-step{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px 0 10px;border-radius:999px;font:600 12px/1.2 'Space Grotesk',sans-serif;color:#161616;text-decoration:none;white-space:nowrap;transition:background .15s ease}
.arrival-rail-step:hover{background:#F2F5FE}
.arrival-rail-step[aria-current=step]{background:#EDF1FE;color:var(--blue,#1237E0);box-shadow:inset 0 0 0 1.5px var(--blue,#1237E0)}
.arrival-rail-step:focus-visible{outline:2px solid var(--blue,#1237E0);outline-offset:2px}
@media(max-width:999px){.arrival-rail-step{padding:0 8px}.arrival-rail-step span{display:none}.arrival-rail-step[aria-current=step]{padding:0 12px 0 10px}.arrival-rail-step[aria-current=step] span{display:inline}}  /* a tablet: icons, and the name of the step that plays */
@media(prefers-reduced-motion:reduce){.arrival-rail-step{transition:none}}
/* The hand-off to customers (JB, 14 Oct 2026): their faces fly onto the story cards */
.arrival-handoff{position:fixed;z-index:60;width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--white,#fff);box-sizing:border-box;transform-origin:0 0;transition:transform .8s cubic-bezier(.22,.61,.36,1),border-width .8s ease;pointer-events:none;box-shadow:0 10px 24px -12px rgba(37,59,127,.45)}
/* The shared footer, exactly as on every other page (JB, 14 Oct 2026: "the footer seems broken"). homepage.css still
   carries overrides written for the old light footer; on the current footer (shared-nav v34, white text) they painted it
   white and hid every link. These put the shared values back; they are not a homepage style. */
.cinematic-review .eg-footer,.clay-light-story .eg-footer{background:var(--night,#141414);color:#fff;border-top:0}
.cinematic-review .eg-footer .wrapper{width:auto}
/* The end of the page, JB's pick B (14 Oct 2026): a soft blue wash fades in behind the customer stories and G2 and back to
   white before compare; the section opens with room, so leaving chapter 6 lands on its heading; G2 shows the faces. */
#home-customers{padding:136px 0 104px;border-top:0;background:linear-gradient(180deg,#fff 0,#F4F5F7 200px)}  /* JB 15 Oct, compare option 3: the wash runs on behind compare; review C12, 17 Oct: the product's canvas grey (JB picked C of 3 drawn colours), no longer the blue wash */
#home-customers .h-customer-intro{margin-bottom:44px}
#home-customers .h-story-card,#home-customers .h-review{background:#fff;border:1px solid rgba(18,55,224,.08);box-shadow:0 24px 48px -30px rgba(18,55,224,.35)}
/* The story cards, text only and quote first (JB, 14 Oct 2026): logo in a 40 px box, the quote as the main text, then the
   person and the link, each at the same height in all 3 cards. Logos share 1 ink height, measured from the files: ARIS
   ink is 258/333 of its PNG, IGEN 197/333, the Luzmo SVG is all ink. */
#home-customers .h-story-card{gap:22px;padding:32px}
#home-customers .h-story-logo-box{height:40px;display:flex;align-items:center}
#home-customers .h-story-logo{width:auto;max-width:none;object-fit:contain;object-position:left center}
#home-customers [data-customer=aris] .h-story-logo{height:29px;margin-left:-7px}
#home-customers [data-customer=igen] .h-story-logo{height:38px;margin-left:-14px}
#home-customers [data-customer=luzmo] .h-story-logo{height:22px}
#home-customers .h-story-card blockquote{font:600 21px/1.45 Manrope,sans-serif;letter-spacing:-.015em;color:var(--night)}
/* Launch plan P1 (JB, 16 Oct 2026, pick D6 A): Luzmo's 1 figure under its quote, in the customer's card and in the customer's words (the approved set in proof_band.py). */
#home-customers .h-story-who{margin-top:auto;padding-top:20px;border-top:1px solid rgba(18,55,224,.1)}
#home-customers .h-g2{margin-top:56px;padding:0;background:transparent}
#home-customers .h-review-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#home-customers .h-review blockquote{font-size:22px;margin:12px 0 28px}
#home-customers .h-review-author{display:flex;align-items:center;gap:14px}
#home-customers .h-review-author picture{flex:none}
#home-customers .h-review-author img{display:block;width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(18,55,224,.25)}
#home-customers .h-review-author>div{display:grid;gap:2px}
#home-customers .h-stars{color:var(--blue,#1237E0);letter-spacing:2px;font-size:22px;line-height:1}  /* JB 14 Oct: bigger, in blue */
#home-customers .h-g2-logo{display:block;width:26px;height:26px}
#home-customers>.h-wrap>.h-actions{margin-top:36px}
/* The closing, JB's pick B of 7 (15 Oct 2026): no fade, a clean edge after compare, then the closing and the footer as 1
   night block; the Request a demo button is its only call to action. */
#home-demo{padding:128px 0 128px;border:0;background:#141414;color:#fff}
#home-demo h2{color:#fff}#home-demo h2 span{color:var(--ice,#8FEDFF)}
#home-demo .h-body{color:rgba(255,255,255,.78)}
@media(max-width:900px){#home-customers .h-review-grid{grid-template-columns:1fr}}
@media(max-width:599px){#home-customers{padding:88px 0 64px}#home-demo{padding:88px 0 88px}}
/* Hero logos (JB, 15 Oct 2026): 8, in 2 rows of 4; the 3 with a customer story link to it, with a small line under the
   logo as on the live homepage, but in colour (no greyscale) and readable (11 px, brand blue). */
.v-copy .h-trust>div{align-items:start;justify-items:center;row-gap:18px}  /* JB 15 Oct: each logo centred in its column */
/* JB 15 Oct 2026: the label as on the live site, and the hero's Request a demo bigger */
.h-trust .h-trust-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#525252}
.h-trust .h-trust-label b{font-weight:700;color:var(--night,#141414)}
.arrival-home-screen .v-copy .h-hero-copy .h-button,#home-hero .h-hero-copy .h-button{min-height:60px;padding:16px 32px;font-size:18px;gap:16px}
/* JB 15 Oct: the 8 logos at 1 visual weight. Each file's ink was measured (its padding differs: Agilio's is mostly the
   small SOFTWARE line, SlideHub's is wide and thin), and each logo is sized to the same ink area, 1,700 px², with the ink
   at most 92 px wide; the image is then padded to 1 row height of 42 px, so the Customer story lines stay aligned. */
.arrival-home-screen .v-copy .h-trust img,.v-copy .h-trust img{width:auto;max-width:none;max-height:none;box-sizing:content-box;object-fit:contain;object-position:center}
.v-copy .h-trust img[src$="luzmologo.svg"]{--lh:18px;--lp:12px}
.v-copy .h-trust img[src$="igen.png"]{--lh:37px;--lp:2.5px}  /* heavy letters: a little under the shared area */
.v-copy .h-trust img[src$="software-AG.png"]{--lh:34px;--lp:4px}
.v-copy .h-trust img[src$="spiideo-400w.png"]{--lh:37px;--lp:2.5px}
.v-copy .h-trust img[src$="agilio.png"]{--lh:35px;--lp:3.5px}
.v-copy .h-trust img[src$="slidehub.png"]{--lh:40px;--lp:1px}
.v-copy .h-trust img[src$="emagine-dark.png"]{--lh:23px;--lp:9.5px}  /* thin mark: a little over the shared area */
.v-copy .h-trust img[src$="taylor-mono.svg"]{--lh:16px;--lp:13px}
/* Launch plan B1 (JB, 15 Oct 2026): those sizes are 1 set, scaled as 1 (--ls) below 1000 px wide, so the 8 logos stay
   balanced and inside the screen: 1 row of 8 on a tablet, 2 rows of 4 below 760 px (media rules at the end). */
.v-copy .h-trust img{height:calc(var(--lh,32px) * var(--ls,1));padding:calc(var(--lp,5px) * var(--ls,1)) 0}
/* JB, 17 Oct 2026: "put the logos in a more greyish tone like we have on the live page today". The live homepage dims its logos twice: the bar at opacity .6 and each logo at grayscale(1) and opacity .8, which is .48 in all
   (a black mark draws as #858585 on white). Here it is 1 rule on the logos; the "Customer story" lines under 3 of them keep their own faint tone. */
.v-copy .h-trust img{filter:grayscale(1);opacity:.48}
/* JB, 18 Oct 2026: "when we rollover the logo with customer story can the logo become colorfull", then "use the brandfetch api to fetch the color logo" and "Build B: the same wordmarks in brand colour (IGEN purple, ARIS dark green with the pink star,
   Luzmo full black)". Only the 3 logos with a customer story change, while the mouse or the keyboard focus is on the logo or its "Customer story" line. IGEN and ARIS fade to Brandfetch's own colour wordmark (images/customers/logos/igen-colour and
   aris-colour: the grey file's own canvas and ink box, so the 2 sit on each other and nothing moves, and the grey one fades out); Luzmo has no colour wordmark (it is black, and its lime does not read on white), so it goes to full black. The other
   5 logos stay grey. The sizes are the grey files' own (--lh, --lp). */
.v-copy .h-trust img[src$="igen-colour.png"]{--lh:37px;--lp:2.5px}
.v-copy .h-trust img[src$="aris-colour.png"]{--lh:34px;--lp:4px}
.h-trust .h-trust-story{position:relative}
.v-copy .h-trust .h-trust-story img,.v-copy .h-trust .h-trust-colour{transition:opacity .2s ease,filter .2s ease}
.v-copy .h-trust .h-trust-colour{position:absolute;top:0;left:50%;transform:translateX(-50%);display:block;opacity:0;pointer-events:none}
.v-copy .h-trust .h-trust-colour img{display:block;filter:none;opacity:1}
.v-copy .h-trust .h-trust-story:not(.h-trust-swap):hover img,.v-copy .h-trust .h-trust-story:not(.h-trust-swap):focus-visible img{filter:none;opacity:1}
.v-copy .h-trust .h-trust-swap:hover>img,.v-copy .h-trust .h-trust-swap:focus-visible>img{opacity:0}
.v-copy .h-trust .h-trust-swap:hover .h-trust-colour,.v-copy .h-trust .h-trust-swap:focus-visible .h-trust-colour{opacity:1}
@media(prefers-reduced-motion:reduce){.v-copy .h-trust .h-trust-story img,.v-copy .h-trust .h-trust-colour{transition:none}}
.h-trust .h-trust-story{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:0;text-decoration:none;color:var(--blue,#1237E0)}
/* JB, 15 Oct 2026: as on the live site, the line is faint until the mouse is over the logo (or keyboard focus is on it);
   then it shows fully, with its arrow. An exception JB asked for to the no-light-grey-text rule. */
.h-trust-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;line-height:1.2;white-space:nowrap;opacity:.75;transition:opacity .2s ease}
.h-trust-badge .h-icon{width:12px;height:12px;flex:none;opacity:0;transition:opacity .2s ease,transform .2s ease}
.h-trust-story:hover .h-trust-badge,.h-trust-story:focus-visible .h-trust-badge{opacity:1}
.h-trust-story:hover .h-trust-badge .h-icon,.h-trust-story:focus-visible .h-trust-badge .h-icon{opacity:1;transform:translateX(3px)}
.h-trust-story:focus-visible{outline:2px solid var(--blue,#1237E0);outline-offset:4px;border-radius:4px}
/* The hero's workflow builder (JB, 15 Oct 2026): the product's Newbiz pipeline canvas, whole and at its own size, beside the
   ChatGPT window in the hero's world (856 wide, the chat on its left), shown once Eva has created the workflow. */
.c-hero-workflow{position:absolute;left:530px;top:206px;width:412px;height:483px;z-index:30;border-radius:14px;overflow:hidden;background:#f4f4f4;box-shadow:0 28px 56px -28px rgba(20,30,80,.38),0 0 0 1px rgba(18,55,224,.1);opacity:0;transform:translateX(28px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.c-hero-workflow[data-on]{opacity:1;transform:none}
/* while the builder is open (review C13, JB 17 Oct 2026: "keep the agents and people in the background floating"): the floating faces and agents stay; only the ones that would sit under it step back
   (arrival-home.js marks them data-under-builder), so none sits half under it. The 3 agents the workflow is made of fly to their steps instead (arrival-home.js, heroWorkflow). */
.c-story .c-ecosystem .c-float-person,.c-story .c-hub .c-agent{transition:opacity .35s ease}
@media(min-width:1280px){.c-story:has(.c-hero-workflow[data-on]) .c-ecosystem .c-float-person[data-under-builder],.c-story:has(.c-hero-workflow[data-on]) .c-hub .c-agent[data-under-builder]{opacity:0!important}}
/* JB, 18 Oct 2026: "Keep the hero its old size below 1280 px wide and hide the builder card there" (it was mostly cut there; below 1000 px it already was hidden) */
@media(max-width:1279px){.c-hero-workflow{display:none}}
@media(prefers-reduced-motion:reduce){.c-hero-workflow{transition:none;transform:none}}
/* After the proof, compare as 3 small cards (JB, 14 Oct 2026) */
.h-story-paths.h-compare-only{padding:88px 0 96px;background:#F4F5F7;border-top:0}  /* JB 15 Oct, option 3: on the stories' wash, then 1 clean edge into the night ending; review C12, 17 Oct: the canvas grey, as the stories' wash above it */
.h-compare-only .h-compare-card{border-color:rgba(18,55,224,.08);box-shadow:0 24px 48px -30px rgba(18,55,224,.35)}.h-story-paths.h-compare-only>.h-wrap{display:block}  /* heading above, the 3 cards full width */.h-compare-title{font-size:28px;letter-spacing:-.02em;margin:0 0 24px;color:var(--night,#141414)}
.h-compare-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.h-compare-card{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--h-line,#e0e0e0);border-radius:16px;background:var(--white,#fff);color:var(--night,#141414);text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease}
.h-compare-card strong{font-size:18px;letter-spacing:-.01em}.h-compare-card span{font-size:15px;line-height:1.5;color:#3a3a3a}.h-compare-card .h-icon{margin-top:auto;width:20px;height:20px;color:#1237E0}
.h-compare-card:hover,.h-compare-card:focus-visible{border-color:#1237E0;box-shadow:0 12px 28px -18px rgba(18,55,224,.45)}
/* Each card's thumbnail: the compare page's own vs card, whole, in a fixed frame so the 3 cards line up (JB, 14 Oct 2026) */
.h-compare-thumb{display:flex;justify-content:center;align-items:center;height:360px;margin:-22px -22px 8px;padding:6px 8px 4px;border-bottom:1px solid var(--h-line,#e0e0e0);border-radius:16px 16px 0 0;background:#fff;overflow:hidden}
.h-compare-thumb picture{display:flex;height:100%;justify-content:center}.h-compare-thumb img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;transition:transform .3s ease}
.h-compare-card:hover .h-compare-thumb img,.h-compare-card:focus-visible .h-compare-thumb img{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){.h-compare-thumb img{transition:none}.h-compare-card:hover .h-compare-thumb img{transform:none}}
@media(max-width:820px){.h-compare-cards{grid-template-columns:1fr}.h-compare-title{font-size:24px}}  /* the extension chapter's browser tabs (JB, 14 Oct) */
.arrival-cast{position:absolute;left:0;top:0;z-index:6;width:64px;height:64px;box-sizing:border-box;border-radius:50%;pointer-events:none;transform-origin:0 0;transition:transform .75s cubic-bezier(.22,.61,.36,1),opacity .45s ease}
.arrival-cast[hidden]{display:none}.arrival-cast[data-instant=true]{transition:none}
.arrival-cast[data-kind=eva]{border:3px solid var(--white);background:var(--white);box-shadow:0 10px 26px -12px rgba(18,55,224,.45)}
.arrival-cast[data-kind=person]{border:3px solid var(--white);background:var(--white);object-fit:cover;box-shadow:0 6px 16px -8px rgba(37,59,127,.35)}
.arrival-cast[data-kind=agent]{box-shadow:0 6px 16px -8px rgba(37,59,127,.3)}
/* A partner whose data the picture shows (TitanX, chapter 3): its own logo, in colour, on a white pill. */
/* A chapter's seller motion (JB, 14 Oct 2026, pick A): the workspace page's own hero tag, in the site's .tag style. */
.h-arrival-eyebrow{display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;padding:5px 14px;border:1px solid rgba(18,55,224,.1);border-radius:100px;background:#EEF1FC;color:#1237E0;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1.4;text-transform:uppercase}
.h-arrival-eyebrow>svg{flex:none;width:14px;height:14px;fill:currentColor}
.arrival-cast[data-kind=partner]{width:253px;padding:14px 24px;border:1px solid #E0E0E0;border-radius:32px;background:var(--white);object-fit:contain;box-shadow:0 6px 16px -8px rgba(37,59,127,.3)}
.arrival-cast[data-seated=true],.arrival-cast[data-strip=true]{box-shadow:none}.arrival-cast[data-seated=true]{border-width:0;background:transparent}
.arrival-team-strip{position:absolute;left:50%;bottom:8px;height:46px;transform:translateX(-50%);box-sizing:border-box;border:1px solid #E0E0E0;border-radius:23px;background:var(--white);z-index:5}
.arrival-team-strip[hidden]{display:none}
/* Launch plan T3 (JB, 16 Oct 2026): the strip says what it is. Its label comes first in the pill, in the style of the chapter bar's labels (11 px, bold, capitals, dark ink, a 14 px blue icon);
   the faces and agents start after it (arrival-home.js, stripLead). */
.arrival-team-label{position:absolute;left:14px;top:0;bottom:0;display:flex;align-items:center;gap:6px;font:700 11px/1 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#161616;white-space:nowrap;pointer-events:none}
.arrival-team-label svg{flex:none;width:14px;height:14px;fill:currentColor;color:var(--blue,#1237E0)}
.h-review-theme,.h-review-top,.h-review-author span,.h-review-author time,.h-disclosure{color:var(--night)!important}
#home-customers.h-section{padding:56px 0 48px}#home-customers .h-customer-intro{margin-bottom:24px}#home-customers .h-g2{margin-top:24px;padding:32px}
.h-story-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.h-story-card{display:flex;flex-direction:column;gap:16px;background:var(--h-review-bg);border-radius:var(--h-radius);padding:28px}
.h-story-logo{display:block;width:auto;max-width:120px;height:28px;object-fit:contain;object-position:left center}
.h-story-card h3{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--night)}.h-story-card h3 span{color:var(--blue)}
.h-story-card blockquote{margin:0;font:500 16px/1.55 Manrope,sans-serif;color:var(--night)}
.h-story-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.h-story-stats>div{background:var(--white);border-radius:14px;padding:12px}
.h-story-stats dt{font:650 22px/1.1 Manrope,sans-serif;letter-spacing:-.02em;color:var(--blue)}.h-story-stats dd{margin:6px 0 0;font:500 12px/1.4 Manrope,sans-serif;color:var(--night)}
.h-story-who{display:flex;align-items:center;gap:12px;margin-top:auto}.h-story-who img{display:block;width:48px;height:48px;border-radius:50%;object-fit:cover}
.h-story-who p{margin:0;font-size:14px;line-height:1.35;color:var(--night)}.h-story-who strong{display:block}.h-story-who span{font-size:13px}
#home-customers .h-review-intro{margin-bottom:24px}#home-customers>.h-wrap>.h-actions{margin-top:28px}
@media(min-width:1000px){.arrival-home-screen[data-story=home-groundwork],.arrival-home-screen[data-story=home-team]{grid-template-columns:minmax(0,28fr) minmax(0,72fr);gap:24px}}
@media(max-width:999px){
 .h-story-cards{grid-template-columns:1fr}
 .arrival-home-screen{width:calc(100% - 32px);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:16px;bottom:16px}
 .arrival-home-screen .v-copy{align-self:start}.arrival-home-screen .v-copy h1,.arrival-home-screen .v-copy h2{font-size:clamp(28px,4.6vw,40px);line-height:1.1;max-width:none}
 .arrival-home-screen .v-copy h1 br,.arrival-home-screen .v-copy h2 br{display:none}.arrival-home-screen .v-copy h1>span:not(.hero-heading-break),.arrival-home-screen .v-copy h2>span{display:block}
 .arrival-home-screen .v-copy .h-body{font-size:13px;line-height:1.55;margin-top:12px;max-width:65ch}
 .arrival-home-screen .v-copy .h-actions{margin-top:16px}.arrival-home-screen .v-copy .h-button{min-height:40px;font-size:12px;padding:10px 18px}
 .arrival-home-screen .v-copy .h-trust{padding-top:12px;margin-top:16px;gap:8px;--ls:.6}.arrival-home-screen .v-copy .h-trust>div{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
 /* Launch plan B1: the Customer story line stays inside its logo's column, on 2 lines if it must, without the arrow
    (it only shows on hover) */
 .arrival-home-screen .v-copy .h-trust .h-trust-story{width:100%}
 .h-trust .h-trust-badge{white-space:normal;text-align:center;justify-content:center}.h-trust .h-trust-badge .h-icon{display:none}
}
/* Launch plan B1: below 760 px, 2 rows of 4 at 75% of the desktop sizes (a column is 72 px at 360 px wide, the widest ink
   69 px). */
@media(max-width:759px){
 .arrival-home-screen .v-copy .h-trust{--ls:.75}
 .arrival-home-screen .v-copy .h-trust>div{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 8px}
}
/* JB, 18 Oct 2026: "Fix the hero logo row overlap at 1000 to 1100 px wide". From 1000 to 1220 px the logos or their Customer story lines overlapped (the copy column is 302 to 366 px there, so a column of the 4 is 63 to 80 px) and up to
   1320 px the lines nearly touched. From 1000 to 1339 px the logos are drawn at 75% (from 1000 to 1119 px at 62%) and the Customer story line may take 2 lines without its arrow, as below 1000 px. Measured: no overlap and at least
   16 px apart at every width from 1000 to 1440 (launch-probes-20261015/logo_row_widths_probe.mjs). */
@media(min-width:1000px) and (max-width:1339px){.arrival-home-screen .v-copy .h-trust{--ls:.75}.arrival-home-screen .v-copy .h-trust .h-trust-story{width:100%}.h-trust .h-trust-badge{white-space:normal;text-align:center;justify-content:center}.h-trust .h-trust-badge .h-icon{display:none}}
@media(min-width:1000px) and (max-width:1119px){.arrival-home-screen .v-copy .h-trust{--ls:.62}}
@media(max-height:650px){.arrival-home-screen .v-copy h1,.arrival-home-screen .v-copy h2{font-size:30px}.arrival-home-screen .v-copy .h-body{font-size:12px;margin-top:10px}.arrival-home-screen .v-copy .h-trust{display:none}}
@media(prefers-reduced-motion:reduce){.arrival-visual,.arrival-visual[data-ready=true][data-shown=true],.arrival-cast{transition:none}.arrival-visual{transform:none}}
@media(max-width:599px){
 .arrival-enhanced .arrival-marker{min-height:0;padding:40px 16px;overflow:hidden}
 .arrival-enhanced .arrival-marker>.h-arrival-copy{visibility:visible;padding:0;margin:0 0 24px}
 .arrival-marker h2{font-size:32px;line-height:1.12;letter-spacing:-.03em}
 .arrival-marker .h-body{font-size:15px;line-height:1.6;margin-top:18px}
 .arrival-marker .h-actions{margin-top:22px}
 .arrival-mobile-poster{display:block}.arrival-mobile-poster img{display:block;width:100%;height:auto}
 .h-story-card{padding:22px}
}
/* Launch plan H2 (JB, 15 Oct 2026): the tool tabs under the hero chat. Logos in their own colours on a light pill; the
   playing tool in brand blue. Wide screens with motion only, as the story itself. */
.arrival-hero-tabs{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:40;display:none;gap:4px;padding:3px;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)}
@media(min-width:900px) and (prefers-reduced-motion:no-preference){.arrival-hero-tabs{display:flex}}
.arrival-hero-tab{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:5px 14px 5px 10px;border:0;border-radius:999px;background:transparent;font:600 13px/1.2 'Space Grotesk',sans-serif;color:var(--night,#141414);cursor:pointer;white-space:nowrap}
.arrival-hero-tab img{width:20px;height:20px;object-fit:contain;flex:none}
.arrival-hero-tab:hover{background:#F2F5FE}
.arrival-hero-tab[aria-selected="true"]{background:#EDF1FE;color:var(--blue,#1237E0);box-shadow:inset 0 0 0 1.5px var(--blue,#1237E0)}
.arrival-hero-tab:focus-visible{outline:2px solid var(--blue,#1237E0);outline-offset:2px}
/* Launch plan H4: the hero's quiet next step, a text link beside the demo button. */
.h-hero-copy .h-actions .h-see-how{margin:0;align-self:center;color:var(--blue,#1237E0);font-size:16px;font-weight:600;gap:8px}
.h-hero-copy .h-actions .h-see-how .h-icon{width:18px;height:18px}
/* Launch plan (launch audit hp-cls, 15 Oct 2026): until the script has laid the hero out in its pinned screen, the plain
   hero would paint first and then jump (layout shift 0.24 to 0.29 on the preview). The stage waits unpainted instead and
   shows in its final place; if the script is slow, it shows anyway after 2.5 s. visibility, not opacity: a headline first
   painted transparent never counts as the page's main content (LCP), and every part inside inherits it until the reveal.
   Without scripts the class is never set. */
html.arrival-integrated:not(.arrival-ready) :is(.h-story-shell,.arrival-home-screen,.arrival-journey){visibility:hidden;animation:arrival-show 0s linear 2.5s forwards}
html.arrival-integrated:not(.arrival-ready) :is(.h-story-shell,.arrival-home-screen,.arrival-journey) *{visibility:inherit!important}
@keyframes arrival-show{to{visibility:visible}}
/* Launch plan P2 (JB, 16 Oct 2026, pick D7 A): "Works with your stack", the row between the last chapter and the stories: 13 logos in their own colours (the files as the vendors' marks ship, never
   filtered), in 4 groups (CRMs, team chat, AI tools, browsers; JB 18 Oct: each logo links to the page that backs its group), 1 row on a wide screen (down to 1000 px), 2 on a tablet (the CRMs, then the rest), 3 on a phone (6, 5 and 2). The pinned picture ends at this row (arrival-home.js). */
.h-stack{padding:88px 0 8px;background:var(--white,#fff)}
.h-stack-title{margin:0 0 28px;font-size:28px;line-height:1.2;letter-spacing:-.02em;color:var(--night,#141414)}
.h-stack-groups{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.h-stack-group{display:flex;gap:12px;margin:0;padding:0;list-style:none}
.h-stack-logo{display:grid;place-items:center;width:56px;height:56px;box-sizing:border-box;border:1px solid rgba(18,55,224,.1);border-radius:14px;background:#fff;box-shadow:0 12px 24px -18px rgba(18,55,224,.35)}
.h-stack-logo img{display:block;width:30px;height:30px;object-fit:contain;filter:none;opacity:1}
/* JB, 18 Oct 2026: every logo links to the page that backs its group; the link fills its tile, the tile lifts a little on hover, and a keyboard focus is ringed in the brand blue */
.h-stack-link{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;text-decoration:none}
.h-stack-logo{transition:border-color .2s ease,transform .2s ease}.h-stack-logo:hover{border-color:rgba(18,55,224,.35);transform:translateY(-2px)}
.h-stack-link:focus-visible{outline:2px solid var(--blue,#1237E0);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.h-stack-logo{transition:none}.h-stack-logo:hover{transform:none}}
@media(max-width:999px){.h-stack-groups{gap:10px 24px}.h-stack-group{gap:10px}.h-stack-logo{width:48px;height:48px}}
@media(max-width:599px){.h-stack{padding:56px 0 0}.h-stack-title{font-size:24px;margin-bottom:20px}.h-stack-groups{gap:8px 28px}.h-stack-group{gap:8px}}
/* JB, 18 Oct 2026: "show me different concepts for the CTAs", then "do B" (of 4 drawn: A text link, B soft pill with a circle arrow, C night pill, D split button). The 7 chapter Explore buttons are a soft brand-tint pill with the arrow in a
   solid blue circle: they read as clickable and still second to Request a demo, the only filled blue pill. The circle takes the site's hover blue on hover or focus. Measured inside the screen from 360 to 1440 px (cta_b_probe.mjs). */
.arrival-marker .h-arrival-copy a.h-button-secondary{background:#EBEEFF;border:0;color:#1237E0;padding:0 10px 0 28px;gap:18px;font-weight:600;transition:background .2s ease}
.arrival-marker .h-arrival-copy a.h-button-secondary .h-icon{background:#1237E0;color:#fff;border-radius:50%;width:42px;height:42px;padding:11px;box-sizing:border-box;transition:background .2s ease,transform .2s ease}
.arrival-marker .h-arrival-copy a.h-button-secondary:hover,.arrival-marker .h-arrival-copy a.h-button-secondary:focus-visible{background:#DDE3FF}
.arrival-marker .h-arrival-copy a.h-button-secondary:hover .h-icon,.arrival-marker .h-arrival-copy a.h-button-secondary:focus-visible .h-icon{background:#0E2CB3;transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){.arrival-marker .h-arrival-copy a.h-button-secondary,.arrival-marker .h-arrival-copy a.h-button-secondary .h-icon{transition:none}.arrival-marker .h-arrival-copy a.h-button-secondary:hover .h-icon,.arrival-marker .h-arrival-copy a.h-button-secondary:focus-visible .h-icon{transform:none}}
@media print{.arrival-home-screen{display:none!important}.arrival-marker{min-height:0;break-inside:avoid}.arrival-enhanced .arrival-marker>.h-arrival-copy{visibility:visible}.arrival-enhanced .h-story-shell .h-story-copy{opacity:1}}