/* Enviz site chrome: tokens, base, header, buttons, type, FAQ, footer, reveal.
   Shared by every page built from pages/ (tools/pages/build.mjs). Built on the round-2 homepage system. */
@font-face{font-family:'Satoshi';src:url('/s/satoshi-400.50dca57f0b.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/s/satoshi-500.af02a72246.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/s/satoshi-700.353a7fbfb4.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Caveat';src:url('/s/caveat-600.e9fcd0bea7.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Sora';src:url('/s/sora-400.98141d7eaa.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sora';src:url('/s/sora-500.edd010ebf2.woff2') format('woff2');font-weight:500;font-display:swap}

:root{color-scheme:light;
--ink:#161537;--royal:#201E4E;--royal-2:#2B2868;--grey-h:#716EAE;--body:#4B4A66;--muted:#615F7E;--faint:#8D8BA4;
--line:#DDDCE4;--line-2:#E7E4EE;--cloud:#F4F3F6;--page:#FAF9FA;--white:#FFFFFF;
--pale:#F5EEFE;--p100:#EBDCFE;--p300:#C397FC;--purple:#9B52FA;--p600:#7F42CF;--p700:#6332A4;
--lime:#E3FF75;--on-dark:#C7C5E6;--on-dark-2:#A9A6D4;
--r1:10px;--r2:16px;--r3:22px;
--sh:0 20px 44px -24px rgba(32,30,78,.32);
--f-d:'Satoshi','Helvetica Neue',Arial,sans-serif;--f-m:'Sora','Helvetica Neue',Arial,sans-serif;--f-h:'Caveat','Bradley Hand','Segoe Print',cursive}
*{box-sizing:border-box}
body{margin:0;background:var(--page)}
.site{--gl:max(20px,env(safe-area-inset-left,0px));--gr:max(20px,env(safe-area-inset-right,0px));position:relative;min-height:100vh;background:var(--page);color:var(--ink);font-family:var(--f-d);-webkit-font-smoothing:antialiased;overflow-x:clip}
@media(min-width:980px){.site{--gl:max(48px,env(safe-area-inset-left,0px));--gr:max(48px,env(safe-area-inset-right,0px))}}
.site a{color:inherit}
.site img{max-width:100%;display:block}
.site h1,.site h2,.site h3{margin:0;text-wrap:balance}
.site p{margin:0;text-wrap:pretty}
.site ul{margin:0;padding:0;list-style:none}
.site :focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.site ::selection{background:var(--p300);color:var(--ink)}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}

/* hero background: one lilac blob that travels */
.hero-bg{position:absolute;left:0;right:0;top:0;height:1500px;z-index:0;pointer-events:none;overflow:hidden;background:var(--page);-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.hero-bg::after{content:'';position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(32,30,78,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(32,30,78,.05) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(70% 55% at 70% 22%,#000,transparent 78%);mask-image:radial-gradient(70% 55% at 70% 22%,#000,transparent 78%)}
.hb{position:absolute;display:block;border-radius:50%;width:58vw;height:50vw;max-width:860px;max-height:720px;right:-6vw;top:-6vw;background:radial-gradient(closest-side,rgba(195,151,252,.36),rgba(214,186,253,.26) 55%,rgba(214,186,253,0));filter:blur(36px);animation:hbT 24s ease-in-out infinite}
@keyframes hbT{0%{transform:translate(0,0) scale(1) rotate(0);border-radius:50% 46% 54% 50%}25%{transform:translate(-30%,26%) scale(1.14) rotate(16deg);border-radius:38% 62% 46% 54%}50%{transform:translate(-80%,60%) scale(.94) rotate(-8deg);border-radius:60% 40% 34% 66%}75%{transform:translate(-36%,14%) scale(1.16) rotate(10deg);border-radius:46% 54% 40% 60%}100%{transform:translate(0,0) scale(1) rotate(0);border-radius:50% 46% 54% 50%}}
@media(max-width:719px){.hb{width:120vw;height:105vw;right:-45vw;top:-8vw;filter:blur(30px)}}
.hdr,.hero,.plans{position:relative;z-index:1}

/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.logo{display:inline-flex;color:var(--ink);text-decoration:none}
.logo svg{display:block;height:21px;width:auto;fill:currentColor}
.nav{display:none;gap:28px;font-size:15px;font-weight:500;white-space:nowrap}
.nav a{text-decoration:none}
.nav a:hover{color:var(--p600)}
.nav a[aria-current="page"]{color:var(--p600)}
.hdr-r{display:flex;align-items:center;gap:18px}
.login{font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.login:hover{color:var(--p600)}
.menu-b{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:transparent;cursor:pointer}
.menu-b span{display:block;height:1.5px;border-radius:2px;background:var(--ink)}
.site .hdr-cta{display:none}
@media(min-width:720px){.site .hdr-cta{display:inline-flex}}
@media(min-width:980px){.hdr{padding-top:22px;padding-bottom:22px}.logo svg{height:24px}}
@media(min-width:1100px){.nav{display:flex}.menu-b{display:none}}

/* buttons: only the arrow turns */
.btn{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 6px 0 22px;border-radius:999px;border:0;background:var(--ink);text-decoration:none;font-family:inherit;font-size:16px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .3s}
.site .btn{color:#F4F3F6}
.btn .circ{flex:none;width:42px;height:42px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center}
.arw{display:block;width:15px;height:15px}
.arw svg{display:block;width:100%;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.btn:hover .arw svg,a:hover>.circ .arw svg{transform:rotate(45deg)}
.btn-s{height:42px;padding:0 4px 0 16px;gap:10px;font-size:14.5px}
.btn-s .circ{width:34px;height:34px}
.btn-s .arw{width:13px;height:13px}
.site .btn-w{background:#F4F3F6;color:var(--ink)}
.site .btn-w:hover{background:#fff}
.btn-full{width:100%;justify-content:space-between}

/* type */
.eb{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--p100);color:var(--p700);font-family:var(--f-m);text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:500;line-height:1;white-space:nowrap}
.h1{font-weight:500;font-size:clamp(40px,10.6vw,68px);line-height:1;letter-spacing:-0.045em}
.h2{font-weight:500;font-size:clamp(32px,8.6vw,54px);line-height:1.04;letter-spacing:-0.045em}
.l2{color:var(--grey-h)}
.hero .l2{color:var(--purple)}
.sub{font-size:17px;line-height:1.5;color:var(--body);max-width:30em;text-wrap:balance}
@media(min-width:720px){.h2{font-size:clamp(34px,4.6vw,54px)}}
@media(min-width:980px){.sub{font-size:19px}}
.sec{padding-top:60px;padding-bottom:60px}
@media(min-width:720px){.sec{padding-top:88px;padding-bottom:88px}}
@media(min-width:980px){.sec{padding-top:104px;padding-bottom:104px}}

/* page hero (centred on desktop) */
.hero{padding-top:20px}
.hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:760px}
@media(min-width:980px){.hero{padding-top:44px}.hero-in{align-items:center;text-align:center;margin:0 auto;gap:20px}.hero .sub{margin:0 auto}}


/* mobile menu */
.menu-b span{transition:transform .3s}
.menu-b[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-b[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.menu-p{position:relative;z-index:40;margin-top:-4px;margin-bottom:8px}
.menu-p[hidden]{display:none}
.menu-in{display:flex;flex-direction:column;padding:6px 18px;border-radius:var(--r2);background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh)}
.menu-in a{padding:14px 0;font-size:17px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line-2)}
.menu-in a:last-child{border-bottom:0}
.menu-in a[aria-current="page"]{color:var(--p600)}
@media(min-width:1100px){.menu-p{display:none}}

/* the "I have" chooser */
.pick{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:10px}
@media(min-width:980px){.pick{align-items:center}}
.pick-l{font:600 24px/1 var(--f-h);color:var(--p700);rotate:-2deg}
.tgl{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 16px 34px -26px rgba(32,30,78,.45)}
.tgl-knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--royal);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
[data-mode="model"] .tgl-knob{transform:translateX(100%)}
.tgl button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 20px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:16px;font-weight:700;color:var(--body);cursor:pointer;white-space:nowrap;transition:color .35s}
.tgl button svg{width:18px;height:18px;flex:none}
.tgl button[aria-pressed="true"]{color:#fff}
@media(max-width:400px){.tgl button{padding:0 14px;font-size:15px}}

/* mode swapping */
[data-mode="plans"] .m-model,[data-mode="model"] .m-plans{display:none !important}
.swap{animation:sw .45s cubic-bezier(.2,.7,.2,1)}
@keyframes sw{from{opacity:0;transform:translateY(6px)}}

/* builders strip */
.strip-sec{padding-top:0;padding-bottom:72px}
.strip{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:center;padding:22px 20px;border-radius:var(--r3);background:#fff;border:1px solid var(--line)}
.strip-t{display:flex;flex-direction:column;gap:6px}
.strip-q{font-size:15px;color:var(--body)}
.strip-h{font-weight:500;font-size:26px;line-height:1.1;letter-spacing:-0.03em}
.bl{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.bl img{height:16px;width:auto;opacity:.55}
@media(min-width:980px){.strip{grid-template-columns:auto minmax(0,1fr) auto;gap:40px;padding:26px 32px}.bl{justify-content:center}.bl img{height:19px}}

/* faq */
.faq{background:var(--pale)}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media(min-width:980px){.faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}.faq-side{position:sticky;top:40px}}
.faq-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.help{font-family:var(--f-m);font-size:12.5px;text-underline-offset:4px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-i{padding:0 18px;border-radius:var(--r2);background:#fff;box-shadow:0 12px 28px -22px rgba(32,30,78,.38)}
@media(min-width:720px){.faq-i{padding:0 22px}}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:58px;padding:14px 0;border:0;background:transparent;font:inherit;font-size:17px;font-weight:500;letter-spacing:-0.012em;color:var(--ink);text-align:left;cursor:pointer}
.faq-q:hover{color:var(--p600)}
.sign{flex:none;width:30px;height:30px;border-radius:50%;background:var(--pale);color:var(--p600);display:flex;align-items:center;justify-content:center;font-family:var(--f-m);font-size:16px;transition:background .25s,color .25s}
.faq-i.on .sign{background:var(--purple);color:#fff}
.faq-a{display:none;padding:0 0 20px;font-size:16px;line-height:1.6;color:var(--body);max-width:36em}
.faq-i.on .faq-a{display:block;animation:sw .35s ease}

/* footer */
.ft{background:var(--ink);color:#E9E7F3;padding-top:64px;overflow:hidden}
.site .ft a{color:#E9E7F3;text-decoration:none}
.ft-top{display:grid;grid-template-columns:minmax(0,1fr);gap:44px}
.ft-h{font-size:30px;font-weight:500;line-height:1.08;letter-spacing:-0.04em;color:#fff}
.ft-h span{color:var(--p300)}
.ft-soc{display:flex;gap:10px;margin-top:26px}
.ft-soc a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);transition:background .25s}
.ft-soc a:hover{background:var(--purple)}
.ft-soc svg{width:18px;height:18px;fill:#fff}
.ft-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
@media(min-width:560px){.ft-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ft-cols nav{display:flex;flex-direction:column;gap:11px;font-size:14.5px}
.ft-cols nav span{font-size:12.5px;color:#9A97CC;margin-bottom:2px}
.site .ft-cols a:hover,.site .ft-cols a[aria-current="page"]{color:var(--p300)}
.ft-bot{position:relative;display:flex;justify-content:space-between;gap:12px;margin-top:52px;padding-top:20px;font-size:13px;color:#9A97CC}
.ft-bot::before{content:'';position:absolute;top:0;left:var(--gl);right:var(--gr);height:1px;background:rgba(255,255,255,.1)}
.ft-logo{margin-top:36px;height:calc((min(100vw,1240px) - var(--gl) - var(--gr)) * 97 / 380 * .72);overflow:hidden}
.ft-logo svg{display:block;width:100%;height:auto;fill:var(--purple)}
@media(min-width:980px){.ft{padding-top:96px}.ft-top{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px}.ft-h{font-size:clamp(28px,4vw,44px)}.ft-cols nav{font-size:15.5px;gap:12px}.ft-logo{margin-top:56px}}

/* reveal */
.rv{transition:transform 1s cubic-bezier(.22,.8,.24,1),opacity 1s ease}
.js .rv:not(.in){transform:translateY(18px);opacity:.001}
@media (prefers-reduced-motion: reduce){.hb{animation:none}.rv,.swap,.tgl-knob{transition:none !important;animation:none !important}.js .rv:not(.in){transform:none;opacity:1}}
/* never hide content from Humblytics page-hiding */
html{opacity:1!important}

/* nav: "For builders" dropdown (hover or click on desktop) and the mobile accordion */
.nav{align-items:center}
.dd{position:relative}
.dd-b{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.dd-b svg{width:13px;height:13px;transition:rotate .3s}
.dd-b:hover,.dd-b[aria-current="page"],.dd.open .dd-b{color:var(--p600)}
.dd.open .dd-b svg{rotate:180deg}
.dd-p{position:absolute;z-index:50;top:100%;left:50%;width:540px;padding-top:16px;translate:-50% 6px;opacity:0;visibility:hidden;transition:opacity .2s,translate .25s cubic-bezier(.2,.7,.2,1),visibility 0s .25s;white-space:normal}
.dd.open .dd-p{opacity:1;visibility:visible;translate:-50% 0;transition:opacity .2s,translate .25s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover) and (pointer:fine){.dd:hover .dd-p{opacity:1;visibility:visible;translate:-50% 0;transition:opacity .2s,translate .25s cubic-bezier(.2,.7,.2,1)}.dd:hover .dd-b svg{rotate:180deg}}
.dd-in{overflow:hidden;border-radius:var(--r2);background:#fff;border:1px solid var(--line-2);box-shadow:0 30px 60px -30px rgba(22,21,55,.45)}
.dd-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;padding:20px 20px 16px}
.site .dd-i{display:flex;flex-direction:column;gap:4px;padding:12px 12px 14px;border-radius:12px;text-decoration:none;color:var(--ink);transition:background .2s}
.site .dd-i:hover,.site .dd-i[aria-current="page"]{background:var(--pale);color:var(--ink)}
.dd-i b{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px;font-weight:500;letter-spacing:-.01em}
.dd-i b::after{content:'→';color:var(--purple);font-size:15px;opacity:0;translate:-4px 0;transition:opacity .2s,translate .25s}
.dd-i:hover b::after,.dd-i[aria-current="page"] b::after{opacity:1;translate:0 0}
.dd-i span{font-size:13.5px;font-weight:400;line-height:1.4;color:var(--muted)}
.dd-f{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px 16px 32px;background:var(--cloud)}
.dd-ft{display:flex;flex-direction:column;gap:2px}
.dd-ft b{font-size:15px;font-weight:500;color:var(--ink)}
.dd-ft span{font-size:13.5px;font-weight:400;color:var(--muted)}
.site .dd-cta{display:inline-flex;align-items:center;flex:none;height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:#F4F3F6;font-size:14.5px;font-weight:500;text-decoration:none;transition:background .25s}
.site .dd-cta:hover{background:var(--royal-2,#2B2868);color:#fff}
.mm-b{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--line-2);background:none;font:inherit;font-size:17px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer}
.mm-b svg{width:16px;height:16px;transition:rotate .3s}
.mm-b[aria-expanded="true"] svg{rotate:180deg}
/* phone menu: tighter sub-list, no descriptions */
.mm-sub{display:flex;flex-direction:column;gap:0;padding:4px 0 10px;border-bottom:1px solid var(--line-2)}
.mm-sub[hidden]{display:none}
.site .menu-in .mm-i{display:block;padding:9px 12px;border-radius:10px;border-bottom:0;font-size:15.5px;font-weight:500;color:var(--body);transition:background .2s,color .2s}
.site .menu-in .mm-i[aria-current="page"]{background:var(--pale);color:var(--ink)}
/* desktop bar: lilac pill on hover */
.site .nav{gap:4px}
.site .nav>a,.site .nav .dd-b{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;transition:background .2s,color .2s}
.site .nav>a:hover,.site .nav .dd-b:hover,.site .dd.open .dd-b{background:var(--pale);color:var(--p700)}
@media(hover:hover) and (pointer:fine){.site .dd:hover .dd-b{background:var(--pale);color:var(--p700)}}
.dd-p{padding-top:10px}
.mm-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:12px 12px 12px 14px;border-radius:12px;background:var(--cloud)}
.mm-f span{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:400;color:var(--muted)}
.mm-f b{font-size:14.5px;font-weight:500;color:var(--ink)}
.site .menu-in .mm-f .dd-cta{padding:0 16px;height:38px;border-bottom:0;font-size:14px;color:#F4F3F6}
.site .hdr{z-index:30}

/* phone menu floats over the page instead of pushing it down */
.site .menu-p{position:absolute;left:0;right:0;top:66px;z-index:40;margin:0}

/* footer: an Upload button in the space under Company (22 Oct) */
.ft-cta{grid-column:1 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ft-cta>span{font-size:12.5px;color:#9A97CC}
.site .ft-cta .btn{color:var(--ink,#161537)}
@media(min-width:720px){.ft-cta{grid-column:3;grid-row:2}}
.ft-cta{align-self:end}
.site .ft-cols .ft-cta a.btn:hover{color:var(--ink,#161537)}
