/* Original animation styling, scoped to its restored section. */
#connected-business .fd2{position:relative;isolation:isolate;overflow-anchor:none;margin:72px 0 -52px;background:var(--ha-ink);box-shadow:0 0 0 100vmax var(--ha-ink);clip-path:inset(0 -100vmax)}
#connected-business .fd-stage{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:64px 0 72px}
#connected-business .fd2.fd-live .fd-track{height:520vh}
#connected-business .fd2.fd-live .fd-stage{position:sticky;top:var(--fd-bar,0px);min-height:calc(100vh - var(--fd-bar,0px));box-sizing:border-box;padding:24px 0}
html body.ha-message-hierarchy section#connected-business .fd-band-head{margin:0;font:800 clamp(28px,3.2vw,44px)/1.1 var(--ha-font-sans);letter-spacing:-.02em;color:var(--ha-vapour)!important;text-align:center} /* grey context, white key phrase, over the section's ink heading rule */
html body.ha-message-hierarchy section#connected-business .fd-band-head b{color:var(--ha-white)!important}
#connected-business .fd-visual{position:relative;width:min(100%,1200px,calc((100vh - 330px) * 2.1));margin:0 auto;aspect-ratio:2.1}
/* Amps, said at the start and then let go; your Amp's bubble says what it is doing as the story runs (one job a step,
   clever and everyday in turn); the ending stays. Heights are held so nothing moves. founders-diagram.js drives it. */
html body.ha-message-hierarchy section#connected-business .fd-intro{display:block;margin:-6px auto 0;width:min(64ch,100%);max-width:none;font:600 clamp(16px,1.4vw,19px)/1.4 var(--ha-font-sans);color:var(--ha-vapour)!important;text-align:center;text-wrap:balance;transition:opacity .6s,filter .6s}
html body.ha-message-hierarchy section#connected-business .fd-intro b{color:var(--ha-white)}
#connected-business .fd-scene{position:relative;width:100%}
#connected-business .fd-job{position:absolute;z-index:2;left:var(--job-x,60%);top:var(--job-y,62%);width:min(320px,44%);box-sizing:border-box;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;padding:14px 18px 14px 14px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.06) 45%,rgba(255,255,255,.09));-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.05),0 14px 34px rgba(0,0,0,.38);text-align:left;transition:left .7s cubic-bezier(.2,.7,.2,1),top .7s cubic-bezier(.2,.7,.2,1)}
/* One shape of liquid glass, the box and its point together (Lee, 30 Oct 2026): founders-diagram.js draws the outline as one
   path; the glass is clipped to it, a single light edge runs up over the point and back down, and the shadow falls outside it */
#connected-business .fd-job.is-shaped:not(.is-docked){border:0;padding:15px 19px 15px 15px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
#connected-business .fd-job-shade,#connected-business .fd-job-glass,#connected-business .fd-job-edge{position:absolute;left:0;top:-10px;width:100%;height:calc(100% + 10px);overflow:visible;pointer-events:none}
#connected-business .fd-job-glass{background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.06) 45%,rgba(255,255,255,.09));-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
#connected-business .fd-job.is-shaped>.fd-job-amp,#connected-business .fd-job.is-shaped>.fd-job-say{position:relative;z-index:1}
#connected-business .fd-job.is-docked>:is(.fd-job-shade,.fd-job-glass,.fd-job-edge){display:none}
#connected-business .fd-job-amp{position:relative;width:36px;height:36px}
#connected-business .fd-job-amp img{display:block;width:36px;height:36px}
#connected-business .fd-job-say{display:flex;flex-direction:column;justify-content:center;gap:7px;min-height:78px;transition:opacity .56s cubic-bezier(.2,.7,.2,1),transform .56s cubic-bezier(.2,.7,.2,1),filter .56s cubic-bezier(.2,.7,.2,1)}
#connected-business .fd-job.is-thinking .fd-job-say{opacity:0;transform:translateY(-6px);filter:blur(3px);transition-duration:.34s;transition-timing-function:cubic-bezier(.4,0,.8,.5)} /* between jobs the words lift and soften away, and the next rise into their place from just below; no thinking dots (Lee, 30 Oct 2026) */
#connected-business .fd-job.is-arriving .fd-job-say{opacity:0;transform:translateY(6px);filter:blur(3px);transition:none}
html body.ha-message-hierarchy section#connected-business .fd-job-say b{color:var(--ha-white);font:700 17px/1.3 var(--ha-font-sans);letter-spacing:-.01em}
#connected-business .fd-joins{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
#connected-business .fd-joins span{padding:3px 9px;border-radius:999px;background:rgba(247,241,238,.08);color:var(--ha-vapour);font:600 12px/1.25 var(--ha-font-sans)}
#connected-business .fd-joins i{font:700 12px var(--ha-font-sans);font-style:normal;color:var(--ha-meta-on-dark)}
#connected-business .fd-jobs{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* the whole list, for screen readers; the bubble shows one at a time */
/* Once the script runs: the intro lets go as the story starts, the bubble waits for it, the ending waits for the end */
#connected-business .fd2.fd-story:not(.fd-intro-on) .fd-intro{opacity:0;filter:blur(4px)}
#connected-business .fd-job>:not(.fd-job-say){transition:opacity .4s}#connected-business .fd2.fd-story:not(.fd-job-on) .fd-job>*,#connected-business .fd2.fd-story:not(.fd-job-on) .fd-job.is-docked{opacity:0} /* each layer fades, not the bubble, so its glass keeps seeing the drawing behind; the docked box is its own glass, so it fades whole */
#connected-business .fd-more{transition:opacity .5s,visibility 0s}#connected-business .fd2.fd-story:not(.fd-end-on) .fd-more{opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s} /* More detail comes in as the drawing finishes (Lee, 30 Oct 2026); its place is kept. It can be reached the moment it starts to show, and stays until it has faded */
#connected-business .fd-job.is-docked{position:sticky;left:auto;top:auto;bottom:16px;width:100%;margin-top:-4px;transition:opacity .4s}
@media (prefers-reduced-motion:reduce){#connected-business .fd-intro,#connected-business .fd-job,#connected-business .fd-job>*,#connected-business .fd-job-say,#connected-business .fd-more{transition:none}}

/* Responsive scroll stage */
@media(max-width:900px){#connected-business .fd2.fd-live .fd-stage{gap:12px;padding:12px 0}#connected-business .fd2.fd-live .fd-visual{aspect-ratio:auto;height:max(340px,calc(100svh - 480px - var(--fd-bar,0px)))}#connected-business .fd2.fd-live .fd-job.is-docked{position:relative;bottom:auto;margin-top:0}}
@media(max-width:599px){#connected-business .fd2.fd-live .fd-stage{gap:10px}#connected-business .fd2.fd-live .fd-visual{height:max(300px,calc(100svh - 400px - var(--fd-bar,0px)))}#connected-business .fd2.fd-live .fd-band-head{order:0}#connected-business .fd2.fd-live .fd-scene{order:1}#connected-business .fd2.fd-live .fd-intro{order:2;min-height:45px;margin-bottom:-55px;align-self:stretch}#connected-business .fd2.fd-live .fd-job{order:3}#connected-business .fd2.fd-live .fd-more{order:5}}

/* Original More detail */
#connected-business .fd-more{width:100%;margin-top:8px;text-align:center}
#connected-business .fd-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:46px;box-sizing:border-box;padding:10px 18px;border:1px solid rgba(199,199,204,.45);border-radius:13px;font:800 16px/1.2 var(--ha-font-sans);color:var(--ha-white)}
#connected-business .fd-more>summary::-webkit-details-marker{display:none}
#connected-business .fd-more>summary::after{content:"+";font-weight:500}
#connected-business .fd-more[open]>summary::after{content:"\2212"}
#connected-business .fd-more>summary:hover{border-color:var(--ha-vapour)}
#connected-business .fd-more>summary:focus-visible{outline:3px solid var(--ha-bloom);outline-offset:4px}
#connected-business{--fd-teal:#34A8AA} /* the approved HumanAmp OS teal, not yet a token */
/* The earlier band (Lee, 29 Oct 2026: kept behind the expansion under the drawing): lede, HumanAmp and your business diagram, counter, HumanAmp OS card */
#connected-business .fd-old{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:'lede .' 'panel side';gap:22px clamp(40px,5vw,72px);align-items:start;padding-top:32px;text-align:left}
#connected-business .fd-team-lede{grid-area:lede}
#connected-business .fd2-panel{grid-area:panel}
/* Beside the diagram: the paragraph, counter and About centred on the HumanAmp card; HumanAmp OS centred on your business */
#connected-business .fd-side{grid-area:side;align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) auto;row-gap:52px}
#connected-business .fd-ours{align-self:safe center;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
#connected-business .fd-os{position:relative;height:var(--fd-biz-h,250px);display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:14px;box-sizing:border-box;padding:24px 28px;border-radius:22px;background:var(--ha-ink-raised);border:1px solid rgba(52,168,170,.4)}
/* The HumanAmp OS card matches the diagram's Your business card: its height (set by founders-diagram.js), corner and teal outline; the tile sits top right, where Secure sits on that card */
#connected-business .fd-os img{position:absolute;top:22px;right:24px;display:block;width:32px;height:32px}
#connected-business .fd-os .fd-os-link{margin-top:auto}
html body section#connected-business .fd-side .fd-os p{max-width:30ch;padding-right:44px;font:700 21px/1.35 var(--ha-font-sans);letter-spacing:-.01em;color:var(--ha-white)!important}
html body section#connected-business .fd-os p span{display:block;margin-top:6px;font:500 17.5px/1.55 var(--ha-font-sans);letter-spacing:0;color:var(--ha-vapour)}
@media(min-width:901px) and (max-width:960px){html body section#connected-business .fd-side .fd-os p{font-size:19px}html body section#connected-business .fd-os p span{font-size:16px}}
/* HumanAmp OS: an offer card with the OS teal action, on the squircle button tokens */
#connected-business .fd-os-link{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;min-height:48px;box-sizing:border-box;padding:12px 20px;border-radius:12px;text-decoration:none;font:800 16px/1.2 var(--ha-font-sans);white-space:nowrap;color:var(--ha-ink)!important;--sq-line:#34A8AA;--sq-fill:#34A8AA}
#connected-business .fd-os-link::before,#connected-business .fd-os-link::after{content:"";position:absolute;z-index:-1;pointer-events:none;-webkit-mask:var(--sq-l) left center/auto 100% no-repeat,var(--sq-r) right center/auto 100% no-repeat;-webkit-mask-composite:source-in;mask:var(--sq-l) left center/auto 100% no-repeat,var(--sq-r) right center/auto 100% no-repeat;mask-composite:intersect}
#connected-business .fd-os-link::before{inset:0;background:var(--sq-line)}
#connected-business .fd-os-link::after{inset:1px;background:var(--sq-fill)}
#connected-business .fd-os-link:hover{--sq-line:#4DB8BA;--sq-fill:#4DB8BA}
#connected-business .fd-os-link:focus-visible{outline:3px solid #34A8AA;outline-offset:4px}
@media (forced-colors:active){#connected-business .fd-os-link{border:1px solid LinkText}}
html body section#connected-business .fd-team-lede,html body section#connected-business .fd-side p{margin:0;max-width:58ch;font:500 17.5px/1.55 var(--ha-font-sans);color:var(--ha-vapour)!important}
html body section#connected-business .fd-old .founder-about-link{--sq-fill:var(--ha-ink);--sq-line:rgba(199,199,204,.45);color:var(--ha-white)!important}
html body section#connected-business .fd-side .founder-profile-actions{margin:0!important}
/* The split-flap counter, from the earlier homepage's readout */
#connected-business .fd-count{display:inline-flex;flex-direction:column;align-items:flex-start;gap:12px}
#connected-business .fd-flaps{display:inline-flex;gap:6px}
#connected-business .flap{position:relative;display:inline-block;width:.72em;height:1.14em;line-height:1.14em;text-align:center;overflow:hidden;border-radius:8px;font:600 clamp(48px,4.4vw,64px)/1.14 var(--ha-font-mono);color:var(--ha-white);background:var(--ha-ink-raised);box-shadow:inset 0 0 0 1px rgba(199,199,204,.16)}
#connected-business .flap::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:var(--ha-ink);box-shadow:0 1px 0 rgba(199,199,204,.08)}
#connected-business .flap::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;z-index:1;transform-origin:bottom}
#connected-business .flap.flick::before{animation:fdFlick .16s ease-in}
@keyframes fdFlick{0%{transform:scaleY(1);background:rgba(247,241,238,.14)}100%{transform:scaleY(.05);background:rgba(41,43,47,.5)}}
#connected-business .fd-count-l{font:600 15px/1.3 var(--ha-font-sans);color:var(--ha-vapour)}
/* The diagram: HumanAmp on charcoal above your business on white */
#connected-business .fd2-panel{position:relative;min-height:600px}
#connected-business .fd2-panel svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* HumanAmp and your business on the raised charcoal of the homepage cards: coral for us, teal for your business */
#connected-business .fd-old .card.ours{fill:var(--ha-ink-raised);stroke:rgba(199,199,204,.16);stroke-width:1}
#connected-business .fd-old .card.biz{fill:var(--ha-ink-raised);stroke:rgba(52,168,170,.6);stroke-width:1.2}
#connected-business .fd-old .secure-in{fill:none;stroke:rgba(52,168,170,.2);stroke-width:1}
#connected-business .fd-old .t1{font:800 19px var(--ha-font-sans);fill:var(--ha-white);letter-spacing:-.01em}
#connected-business .fd-old .t2{font:600 14px var(--ha-font-sans);fill:var(--ha-vapour)}
#connected-business .fd-old .t3{font:600 12.5px var(--ha-font-sans);fill:var(--ha-vapour)}
#connected-business .fd-old .lite .t1{fill:var(--ha-ink)}
#connected-business .fd-old .lite .t2,#connected-business .fd-old .lite .t3{fill:var(--ha-support-on-paper)}
#connected-business .fd-old .halo{fill:none;stroke:rgba(247,241,238,.9);stroke-width:2.5}
#connected-business .fd-old .assoc{fill:var(--ha-support-on-paper);stroke:rgba(247,241,238,.85);stroke-width:1.6}
#connected-business .fd-old .bond{fill:none;stroke:rgba(245,137,124,.7);stroke-width:1.6;stroke-linecap:round}
#connected-business .fd-old .fine{fill:none;stroke:rgba(199,199,204,.2);stroke-width:1;stroke-linecap:round}
#connected-business .fd-old .mesh{stroke:rgba(199,199,204,.1);stroke-width:1}
#connected-business .fd-old .ag{opacity:.75;transition:opacity .3s}
#connected-business .fd-old .ag.lead,#connected-business .fd-old .ag.busy{opacity:1}
#connected-business .fd-old .talk{fill:none;stroke:rgba(199,199,204,.45);stroke-width:1.2;stroke-linecap:round}
#connected-business .fd-old .talk.hot{stroke:rgba(245,137,124,.9);stroke-width:1.4;stroke-linecap:butt}
#connected-business .fd-old .net{fill:none;stroke:rgba(52,168,170,.42);stroke-width:1.1;stroke-linecap:round}
#connected-business .fd-old .ring{fill:none;stroke:rgba(52,168,170,.25);stroke-width:1.4}
#connected-business .fd-old.live .ring{animation:fdBreathe 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes fdBreathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.14);opacity:1}}
#connected-business .fd-old .agent{opacity:.9}
#connected-business .fd-old.live .agent{animation:fdWork 2.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes fdWork{0%,100%{opacity:.5}40%{opacity:1}}
#connected-business .fd-old .agent.lit{filter:brightness(1.25) drop-shadow(0 0 4px rgba(52,168,170,.8))}
#connected-business .fd-old .person{fill:var(--ha-support-on-paper);stroke:rgba(247,241,238,.3);stroke-width:1.2;transition:fill .3s,stroke .3s}
#connected-business .fd-old .person.lit{fill:rgba(52,168,170,.55);stroke:var(--fd-teal)}
#connected-business .fd-old .shield{fill:rgba(52,168,170,.22);stroke:var(--fd-teal);stroke-width:1.3;stroke-linejoin:round}
#connected-business .fd-old .lock{fill:var(--fd-teal)}
#connected-business .fd-old .lock-loop{fill:none;stroke:var(--fd-teal);stroke-width:1.2}
#connected-business .fd-old .contact{fill:none;stroke:rgba(245,137,124,.75);stroke-width:1.4;stroke-linecap:butt}
#connected-business .fd-old .contact.back{stroke:rgba(52,168,170,.75)}
#connected-business .fd-old .port{fill:var(--ha-ink);stroke:var(--fd-teal);stroke-width:1.4;transition:fill .25s}
#connected-business .fd-old .port.lit{fill:var(--fd-teal)}
#connected-business .fd-old .port.ours{fill:var(--ha-ink);stroke:var(--ha-bloom)}
#connected-business .fd-old .port.ours.lit{fill:var(--ha-bloom)}
#connected-business .fd-old .links .sig{r:3px}
#connected-business .fd-old .lab{fill:var(--ha-ink);stroke:rgba(245,137,124,.45);stroke-width:1;stroke-dasharray:3 3}
#connected-business .fd-old .scan{fill:var(--ha-bloom);transition:transform .5s ease-in-out}
#connected-business .fd-old .ok{fill:rgba(247,241,238,.25);transition:fill .3s}
#connected-business .fd-old .ok.on{fill:var(--ha-bloom)}
#connected-business .fd-old .sig{fill:var(--ha-bloom)}
#connected-business .fd-old .sig.os{fill:var(--fd-teal)}
#connected-business .fd-old .sig.faint{fill:rgba(247,241,238,.75)}
#connected-business .fd-old .sig.boost{fill:var(--ha-bloom);r:3.6px}
#connected-business .fd-old .judge{fill:none;stroke:var(--ha-white);stroke-width:1.5}
#connected-business .fd-old .ripple{fill:none;stroke:var(--fd-teal);stroke-width:1.4}
@media(prefers-reduced-motion:reduce){#connected-business .flap.flick::before{animation:none}}
/* Less is more (Lee, 27 Oct 2026): smaller portraits; one quiet line per link, no glows, dashes or halos */
#connected-business .fd-old .t1{font:700 16px var(--ha-font-sans)}
#connected-business .fd-old .lab{fill:none;stroke:rgba(199,199,204,.18);stroke-dasharray:none}
#connected-business .fd-old .secure-in,#connected-business .fd-old .ripple,#connected-business .fd-old .ring{display:none}
#connected-business .fd-old .card.biz{stroke:rgba(52,168,170,.4);stroke-width:1}
#connected-business .fd-old .contact{stroke:rgba(199,199,204,.35);stroke-width:1}
#connected-business .fd-old .contact.back{display:none}
#connected-business .fd-old .port,#connected-business .fd-old .port.ours{fill:var(--ha-ink-raised);stroke:rgba(199,199,204,.35);stroke-width:1}
#connected-business .fd-old .port.lit,#connected-business .fd-old .port.ours.lit{fill:var(--ha-bloom)}
#connected-business .fd-old .net{stroke:rgba(199,199,204,.18);stroke-width:1}
#connected-business .fd-old .talk{stroke:rgba(199,199,204,.3);stroke-width:1}
#connected-business .fd-old .sig,#connected-business .fd-old .sig.os,#connected-business .fd-old .sig.boost,#connected-business .fd-old .links .sig{r:2.4px}
#connected-business .fd-old .sig.os{fill:var(--ha-vapour)}
#connected-business .fd-old .agent.lit{filter:none;opacity:1}
#connected-business .fd-old .person.lit{fill:rgba(52,168,170,.35)}
#connected-business .fd-old .halo{stroke:rgba(247,241,238,.5);stroke-width:1.5}
#connected-business .fd-old .bond{stroke:rgba(245,137,124,.5);stroke-width:1.2}
#connected-business .fd-old .judge{display:none}
@media(max-width:1180px){#connected-business .fd-side{row-gap:40px}#connected-business .fd-ours{gap:20px}#connected-business .fd-os{height:var(--fd-biz-h,240px)}}
@media(max-width:900px){#connected-business .fd-old{grid-template-columns:1fr;grid-template-areas:'lede' 'panel' 'side';row-gap:28px}#connected-business .fd-side{row-gap:48px}#connected-business .fd-ours{gap:24px}#connected-business .fd-os{height:auto}#connected-business .fd2-panel{min-height:540px}}
@media(prefers-reduced-motion:reduce){#connected-business .fd2 *{transition:none!important}}


/* The section now has its own full-width charcoal background. */
#connected-business .fd2{margin:0;box-shadow:none;clip-path:none}
#connected-business .fd-still{position:absolute;inset:0;display:block}
#connected-business .fd-still img{display:block;width:100%;height:100%;object-fit:contain}
#connected-business .fd-ready .fd-still{display:none}
#connected-business .fd2:not(.fd-ready) .fd-job{position:relative;left:auto;top:auto;width:min(400px,100%);margin:20px auto}
#connected-business .fd-net{position:absolute;inset:0;display:block;width:100%;height:100%}

/* Keep every task bubble below the drawing, including when the renderer docks it on phones. */
html body #connected-business .fd2 .fd-job{
 position:relative;left:auto;top:auto;bottom:auto;
 width:min(480px,100%);margin:32px auto 0;
 transition:none;
}
/* Reserve the bubble's row inside the pinned composition rather than covering the canvas. */
@media(min-width:901px){
 #connected-business .fd2.fd-live .fd-visual{width:min(100%,1200px,calc((100svh - 490px) * 2.1))}
}
@media(max-width:900px){
 html body #connected-business .fd2.fd-live .fd-job,
 html body #connected-business .fd2.fd-live .fd-job.is-docked{margin:44px auto 0}
}

@media(min-width:901px) and (max-height:700px){
 #connected-business .fd2.fd-live .fd-stage{gap:12px;padding:12px 0}
 #connected-business .fd2.fd-live .fd-visual{width:min(100%,1200px,calc((100svh - 420px) * 2.1))}
 html body.ha-message-hierarchy section#connected-business .fd-band-head{font-size:28px}
}