/* The living layer (web/folio/live.js): Folio as a puppet, smooth scrolling, scroll scenes and flourishes. The server adds this
   file only while motion is on for the browser; live.js does nothing under reduced motion, so these rules then style nothing. */

/* Lenis (MIT, lenis 1.3.26 lenis.css) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Folio */
.folio-stage{position:absolute;inset:0;pointer-events:none;z-index:3}
.folio-actor{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;z-index:2}
.folio-hit{position:absolute;display:block;border-radius:28%;pointer-events:none;-webkit-tap-highlight-color:transparent}
.folio-hit.is-interactive{pointer-events:auto;cursor:pointer}
.folio-svg{position:absolute;display:block;overflow:visible;pointer-events:none}
.folio-shadow{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(closest-side,rgba(7,18,41,.5),rgba(7,18,41,0));will-change:transform;pointer-events:none}
.folio-bubble{position:absolute;left:0;top:0;z-index:4;max-width:min(260px,72vw);width:max-content;padding:10px 14px;border-radius:18px;
 background:var(--surface,#fff);color:var(--text,#101a2e);font:600 14.5px/1.35 'DM Sans',system-ui,sans-serif;
 box-shadow:0 10px 30px rgba(7,18,41,.16);border:1px solid var(--line,#e3e8f1);opacity:0;scale:.85;transform-origin:50% 100%;
 transition:opacity .16s cubic-bezier(.2,0,0,1),scale .24s cubic-bezier(.2,0,0,1);pointer-events:none}
.folio-bubble.is-on{opacity:1;scale:1}
.folio-bubble::after{content:'';position:absolute;bottom:-7px;left:var(--tail,50%);width:14px;height:14px;background:inherit;border-right:1px solid var(--line,#e3e8f1);border-bottom:1px solid var(--line,#e3e8f1);transform:translateX(-50%) rotate(45deg)}
.folio-bubble.is-left{transform-origin:100% 100%}
.folio-bubble.is-right{transform-origin:0 100%}
.folio-bubble.is-right::after{left:-7px;right:auto;bottom:14px;border:0;border-left:1px solid var(--line,#e3e8f1);border-bottom:1px solid var(--line,#e3e8f1);transform:rotate(45deg)}
.folio-bubble.is-left::after{left:auto;right:-7px;bottom:14px;border-right:1px solid var(--line,#e3e8f1);border-top:1px solid var(--line,#e3e8f1);border-bottom:0;transform:rotate(45deg)}

/* The companion on working pages: never catches a click unless it stands in empty space. */
.folio-companion{position:fixed;right:12px;bottom:10px;width:150px;height:180px;z-index:55;pointer-events:none}
.folio-companion.is-ghost .folio-hit{pointer-events:none;cursor:default}
.folio-companion{transition:opacity .24s,visibility .24s}
.folio-companion.is-away{opacity:0;visibility:hidden}
@media (max-width:760px){.folio-companion{right:4px;bottom:76px;width:100px;height:120px}}
@media print{.folio-companion,.folio-stage,.m-progress,.m-motifs{display:none!important}}

/* Where a live Folio stands, the still scene behind the title steps aside. */
body.product .page-title.folio-live{background:none!important}
.page-title.folio-live{position:relative}
.page-title.folio-live>.folio-stage{left:auto;width:200px}

/* Home */
body.product .hero{position:relative}
.hero-preview .folio-stage{z-index:5}
.how-it-works{position:relative;isolation:isolate}
/* the act's colour runs the full width of the screen behind the section, as each step takes its turn */
.how-it-works.is-story::before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);z-index:-1;background:var(--m-act,transparent);transition:background-color .5s}
@media (min-width:980px){.how-it-works.is-story .how-steps{margin-top:150px}}
.how-it-works .folio-stage{z-index:1}
.how-it-works.is-story .how-steps>li{transition:opacity .3s,transform .3s,box-shadow .3s}
.how-it-works.is-story .how-steps>li:not(.is-now){opacity:.55}
.how-it-works.is-story .how-steps>li.is-now{transform:translateY(-6px);box-shadow:0 18px 40px rgba(36,87,230,.14)}
.how-it-works[data-step="1"]::before{background-color:var(--m-act-1,#eef3ff)}
.how-it-works[data-step="2"]::before{background-color:var(--m-act-2,#e6f7f8)}
.how-it-works[data-step="3"]::before{background-color:var(--m-act-3,#e9f0ff)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--m-act-1:#14203a;--m-act-2:#10282c;--m-act-3:#161f3d}}
:root[data-theme=dark]{--m-act-1:#14203a;--m-act-2:#10282c;--m-act-3:#161f3d}

/* Flourishes */
.m-progress{position:fixed;left:0;right:0;top:0;z-index:80;height:3px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#2457e6,#18c8d0);pointer-events:none}
.m-motifs{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible}
.m-motif{position:absolute;display:block;will-change:transform}
.m-motif i{display:block;font-style:normal;line-height:1}
.m-spark i{font-size:var(--s,26px);color:var(--c,#18c8d0)}
.m-ring i{width:var(--s,22px);height:var(--s,22px);border-radius:50%;border:3px solid var(--c,#2457e6)}
.m-dot i{width:var(--s,12px);height:var(--s,12px);border-radius:50%;background:var(--c,#18c8d0)}
.m-squiggle svg{width:var(--s,56px);height:auto;overflow:visible}
.m-squiggle path{fill:none;stroke:var(--c,#071229);stroke-width:3;stroke-linecap:round}
.m-mark{position:relative;display:inline-block;white-space:nowrap}
.m-swash{position:absolute;left:-2%;bottom:-.1em;width:104%;height:.28em;overflow:visible;pointer-events:none}
.m-swash path{fill:none;stroke:#18c8d0;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.k-word{display:inline-block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;vertical-align:top}
.k-unit{display:inline-block;will-change:transform}
.m-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The founder (web/folio/founder.js) */
.founder-stage.is-live .founder-still{visibility:hidden}
/* a touch smaller than the still picture it replaces, so that picture's early paint stays the page's largest paint (LCP) */
.founder-figure{position:absolute;left:50%;bottom:0;height:94%;max-width:94%;translate:-50% 0;z-index:2}
.founder-figure.is-interactive{cursor:pointer}
.founder-lean,.founder-hop,.founder-breath{position:absolute;inset:0;display:block}
.founder-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;user-select:none}
.founder-figure img.is-on{opacity:1}
.founder-shadow{position:absolute;left:24%;right:24%;bottom:-6px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(7,18,41,.35),rgba(7,18,41,0))}
.founder-folio{position:absolute;inset:auto auto 0 -8%;width:46%;height:62%;pointer-events:none;z-index:3}
.founder-bubble{z-index:5}
.founder-ball{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;z-index:6;pointer-events:none;background:radial-gradient(circle at 35% 35%,#ff7b7b,#b91c24 70%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.founder-confetti{position:absolute;left:0;top:0;width:9px;height:13px;border-radius:2px;z-index:6;pointer-events:none}
.founder-disco{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:-1;overflow:hidden;border-radius:inherit}
.founder-disco b{position:absolute;width:46%;height:46%;border-radius:50%;filter:blur(36px);opacity:.55;animation:founder-spot 1.1s ease-in-out infinite alternate}
.founder-disco b:nth-child(1){left:0;top:0;background:#2457e6}.founder-disco b:nth-child(2){right:0;top:4%;background:#18c8d0;animation-delay:-.3s}
.founder-disco b:nth-child(3){left:10%;bottom:0;background:#ffb347;animation-delay:-.6s}.founder-disco b:nth-child(4){right:6%;bottom:6%;background:#9fb7f2;animation-delay:-.9s}
@keyframes founder-spot{from{transform:translate(-8%,-6%) scale(.9)}to{transform:translate(10%,8%) scale(1.12)}}
.founder-figure.is-asleep::after{content:'z z Z';position:absolute;right:6%;top:2%;font:700 22px/1 'DM Sans',sans-serif;color:#2457e6;letter-spacing:4px}
.about-founder{position:relative;isolation:isolate}