/* GENERATED by scripts/build-chrome.mjs from public/pages/home/index.html — do not edit. Run npm run build:chrome after changing the header, drawer or footer there. */ /* Tokens: the home page's, both themes. Declared on the wrapper, not :root, so a page with its own palette cannot recolour the chrome and the chrome cannot recolour the page. --lav has no light value on the home page; the avatar gradient falls back to the same tint it does there. */ .exz-site{--bg:#FBFAF8; --surface:#FFFFFF; --surface-2:#F5F2ED; --surface-3:#EDE8E0; --ink:#141126; --ink-2:#463F63; --mute:#78717F; --line:#E8E3DA; --line-2:#D9D2C7; --violet:#5B3FBF; --violet-2:#7C5CE6; --deep:#34268F; --night:#1A1345; --gold:#E8A62C; --green:#2F9E77; --blue:#3B6FD4; --rose:#C7548A; --surface-page:var(--bg); --surface-primary:var(--surface); --surface-secondary:var(--surface-2); --surface-tertiary:var(--surface-3); --border-subtle:var(--line); --border-strong:var(--line-2); --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-muted:var(--mute); --brand-primary:var(--violet); --brand-accent:var(--gold); --brand-positive:var(--green); --brand-accent-ink:#7A5406; --elev-0:none; --elev-1:0 1px 2px rgba(52,38,143,.05); --elev-2:0 4px 16px rgba(52,38,143,.07); --elev-3:0 10px 34px rgba(52,38,143,.10); --elev-4:0 24px 64px rgba(52,38,143,.16); --z-header:40; --z-support:60; --z-drawer-back:65; --z-drawer:70; --z-progress:80; --z-world-back:900; --z-world:910; --z-world-nav:930; --font:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif; --serif:Lora,Georgia,serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --fs-hero:clamp(40px,5.2vw,68px); --fs-h2:clamp(26px,3vw,38px); --r:18px; --r-s:10px; --r-xs:6px; --shadow:0 20px 60px rgba(52,38,143,.12); --shadow-2:0 2px 12px rgba(52,38,143,.06); --max:1280px; --gutter:clamp(20px,4vw,48px); --ease:cubic-bezier(.2,.7,.2,1); --lav:#EDE9FB; font-family:var(--font);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased; text-align:left;font-size:16px;} /* Night tokens. data-theme is the visitor's day/night choice, set on by the same rule on every page. data-chrome="dark" is different: a page puts it on (the app puts it in index.html) to say its own surface is dark whatever the theme — the marketing studio, the AI tools page, the labs, every React route — so the chrome does not sit as a pale glass card with dark text on a black page. Light pages leave it off and follow the theme. */ [data-theme="dark"] .exz-site,[data-chrome="dark"] .exz-site{--bg:#0E0B22; --surface:#161233; --surface-2:#1C1740; --lav:#241B5C; --ink:#F3F0FF; --ink-2:#C9C2E6; --mute:#8F87B3; --line:#2A2452; --line-2:#3A3268; --surface-3:#241B5C; --elev-1:0 1px 2px rgba(0,0,0,.4); --elev-2:0 4px 16px rgba(0,0,0,.42); --elev-3:0 10px 34px rgba(0,0,0,.48); --elev-4:0 24px 64px rgba(0,0,0,.58); --brand-accent-ink:#F0BC5B; --shadow:0 20px 60px rgba(0,0,0,.45); --shadow-2:0 2px 12px rgba(0,0,0,.3);} /* The same element resets the home page applies globally, kept inside the wrapper. A page's own reset (or Tailwind's) must not restyle the chrome. */ .exz-site *,.exz-site *::before,.exz-site *::after{box-sizing:border-box} .exz-site a{color:inherit;text-decoration:none;border:0;background:transparent;box-shadow:none} .exz-site button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;margin:0;padding:0;text-transform:none;letter-spacing:normal} .exz-site input{font:inherit;color:inherit;margin:0} /* A page's own .btn or .nav rules (marketing sets uppercase mono buttons) must not restyle the chrome's; the chrome states its type outright. */ .exz-site .btn,.exz-site .ctx,.exz-site .nav a,.exz-site .prodpanel .pi,.exz-site .morepanel a,.exz-site .fcol a{text-transform:none;letter-spacing:normal;font-family:var(--font)} .exz-site img{display:block;max-width:100%;height:auto;border:0} .exz-site h5,.exz-site h6,.exz-site p{margin:0} .exz-site svg{display:block} /* The chrome's own display rules would otherwise beat the hidden attribute (a link set to display:flex stays visible even when hidden). */ .exz-site [hidden]{display:none!important} /* Log out, a button styled as the menu item next to it. */ .exz-site .morepanel .exz-logout{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px;line-height:1.3;border-top:1px solid var(--line);margin-top:6px;padding-top:12px;border-radius:0 0 9px 9px} .exz-site .morepanel .exz-logout:hover,.exz-site .morepanel .exz-logout:focus-visible{background:var(--surface-2)} .exz-site .morepanel .exz-logout b{display:block;font-weight:600;color:var(--rose);font-size:13.5px} .exz-site .morepanel .exz-logout span{display:block;font-size:11.5px;color:var(--mute);margin-top:1px} .exz-site .drawer .dl .exz-logout{color:var(--rose)} .exz-site .container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)} .exz-site .mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)} .exz-site .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-size:14px;font-weight:600; background:var(--ink);color:var(--bg);transition:transform .25s var(--ease),background .25s;white-space:nowrap} .exz-site .btn:hover{transform:translateY(-1px)} .exz-site .btn.primary{background:var(--violet);color:#fff} .exz-site .btn.primary:hover{background:var(--deep)} .exz-site .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);font-weight:500} .exz-site .btn.ghost:hover{background:var(--surface-2)} .exz-site .btn.sm{padding:10px 18px;font-size:13px} .exz-site .btn .arr{display:inline-block;transition:transform .25s var(--ease)} .exz-site .btn:hover .arr{transform:translateX(3px)} .exz-site .hdr{position:sticky;top:0;z-index:40;background:transparent;border-bottom:1px solid transparent;transition:border-color .3s} .exz-site .hdr .container{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px; transition:all .45s var(--ease);border:1px solid transparent;border-radius:999px} .exz-site .hdr.compact .container{height:58px;max-width:1120px;margin-top:10px;padding:0 10px 0 16px; background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(18px) saturate(1.3); border-color:color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 18px 50px rgba(52,38,143,.16),0 1px 0 rgba(255,255,255,.6) inset} .exz-site .ctx{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--deep);padding:8px 14px;border-radius:999px; background:var(--lav,#EDE9FB);border:1px solid var(--line);white-space:nowrap;cursor:pointer;font-family:inherit;transition:border-color .2s,background .2s} .exz-site .ctx:hover{background:color-mix(in srgb,var(--lav,#EDE9FB) 70%,var(--surface))} .exz-site .ctx .navchev{opacity:.5;margin-left:1px} .exz-site .ctx .aud{display:none;align-items:center;gap:7px;opacity:1} .exz-site .ctx .aud>span{opacity:.45;font-weight:400} .exz-site .ctx .aud b{font-weight:600} .exz-site .hdr.compact .ctx .aud,.exz-site .topshell.compact .ctx .aud{display:inline-flex;animation:exz-rvin .35s var(--ease) both} .exz-site .hdr.compact .ctx,.exz-site .topshell.compact .ctx{border-color:rgba(232,166,44,.5)} .exz-site .prodwrap.open .ctx{border-color:var(--violet);background:var(--surface)} .exz-site .hdr.compact .nav{gap:18px;font-size:12.5px;white-space:nowrap} .exz-site .brand{display:flex;align-items:center;gap:13px} .exz-site .brand img{height:36px;width:auto} .exz-site .brand .word{font-size:19px;font-weight:700;letter-spacing:.18em} .exz-site .nav{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:500;color:var(--ink-2)} .exz-site .nav a{position:relative;padding:8px 0;white-space:nowrap} .exz-site .nav a:after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--violet);transition:width .3s var(--ease)} .exz-site .nav a.on:after,.exz-site .nav a:hover:after{width:100%;background:var(--violet)} .exz-site .nav a.on{color:var(--ink)} .exz-site .nav a.ai{color:var(--violet);font-weight:600;display:inline-flex;align-items:center;gap:6px} .exz-site .nav a.hl{color:var(--gold);font-weight:600;padding:8px 10px;margin:0 -10px;border-radius:9px} .exz-site .nav a.hl:hover{background:rgba(232,166,44,.12)} .exz-site .nav a.hl:after{display:none} .exz-site .nav .more-wrap{position:relative;display:inline-flex} .exz-site .navchev{font-size:10px;line-height:1;transition:transform .2s var(--ease)} .exz-site .nav .more-wrap.open .navchev,.exz-site .nav .ai-wrap.open .navchev,.exz-site .prodwrap.open .navchev{transform:rotate(180deg)} .exz-site .nav a.more{width:32px;height:32px;padding:0;margin-left:-4px;border:1px solid var(--line-2);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2)} .exz-site .nav a.more:hover{background:var(--surface-2);color:var(--ink)} .exz-site .nav a.more:after{display:none} .exz-site .nav .more-wrap.open a.more{background:var(--surface-2);color:var(--ink);border-color:var(--violet)} .exz-site .morepanel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-60%);min-width:290px;display:none;padding:8px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--elev-4);z-index:60} .exz-site .nav .more-wrap.open .morepanel{display:block} .exz-site .morepanel a{display:block;padding:9px 12px;border-radius:9px;white-space:normal;line-height:1.3} .exz-site .morepanel a:after{display:none} .exz-site .morepanel a:hover,.exz-site .morepanel a:focus-visible{background:var(--surface-2)} .exz-site .morepanel a b{display:block;font-weight:600;color:var(--ink);font-size:13.5px} .exz-site .morepanel a span{display:block;font-size:11.5px;color:var(--mute);margin-top:1px} [data-theme="dark"] .exz-site .morepanel,[data-chrome="dark"] .exz-site .morepanel{box-shadow:0 24px 60px rgba(0,0,0,.5)} .exz-site .aipanel{min-width:660px;max-width:calc(100vw - 40px);transform:translateX(-50%);grid-template-columns:repeat(3,1fr);gap:4px 10px} .exz-site .nav .ai-wrap.open .aipanel{display:grid} .exz-site .aipanel .grp>b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:6px 12px 4px} .exz-site .prodwrap{position:relative;display:inline-flex;align-items:center} .exz-site .prodpanel{position:absolute;top:calc(100% + 14px);left:0;min-width:520px;max-width:calc(100vw - 40px);display:none; grid-template-columns:1fr 1fr;gap:2px 8px;padding:8px;border-radius:16px;background:var(--surface);border:1px solid var(--line); box-shadow:0 26px 60px rgba(20,17,38,.20);z-index:70} .exz-site .prodwrap.open .prodpanel{display:grid;animation:exz-rvin .22s var(--ease) both} .exz-site .prodpanel .pi{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink);line-height:1.3} .exz-site .prodpanel .pi:hover,.exz-site .prodpanel .pi:focus-visible{background:var(--surface-2)} .exz-site .prodpanel .pi b{display:block;font-size:13.5px;font-weight:600} .exz-site .prodpanel .pi span{display:block;font-size:11.5px;color:var(--mute);margin-top:2px} .exz-site .prodpanel .pi b i{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--gold);margin-left:7px;vertical-align:1px} .exz-site .prodpanel .pi.soon{opacity:.6} .exz-site .prodpanel .pi.soon:hover{background:transparent} [data-theme="dark"] .exz-site .prodpanel,[data-chrome="dark"] .exz-site .prodpanel{box-shadow:0 26px 60px rgba(0,0,0,.55)} @media(max-width:720px){ .exz-site .prodpanel{position:fixed;top:72px;left:12px;right:12px;min-width:0;max-width:none;grid-template-columns:1fr;max-height:72vh;overflow-y:auto} } .exz-site .themesel{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px} .exz-site .themesel button{appearance:none;border:0;background:transparent;color:var(--mute);font:inherit;font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer;min-height:24px} .exz-site .themesel button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink)} .exz-site .themesel button:focus-visible{outline:2px solid var(--gold);outline-offset:1px} .exz-site .hdr .nav{gap:26px} .exz-site .hright{display:flex;align-items:center;gap:12px} .exz-site .menu-btn{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:var(--r-s);font-family:var(--mono);font-size:11px} @media(max-width:700px){ .exz-site .topshell .brand .word{display:none} .exz-site .topshell .brand{gap:0} .exz-site .topshell .brand img{height:34px} } .exz-site .nlband{border-top:1px solid var(--line);padding:26px 0} .exz-site .nlband .newsletter{margin:0;display:flex;align-items:center;gap:22px;flex-wrap:wrap} .exz-site .nlband .newsletter h6{color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;flex:none} .exz-site .nlband .newsletter form{flex:1 1 320px;max-width:460px;margin:0} .exz-site .nlband .newsletter input{background:var(--surface);border-color:var(--line-2);color:var(--ink)} .exz-site .nlband .newsletter input::placeholder{color:var(--mute)} .exz-site .nlband .newsletter p{font-size:11.5px;color:var(--mute);margin:0;flex:1 1 220px} .exz-site .nlband .nl-msg{flex-basis:100%} @media(max-width:760px){ .exz-site .nlband{padding:20px 0} .exz-site .nlband .newsletter{gap:12px} .exz-site .nlband .newsletter p{flex-basis:100%} } .exz-site .fgrid{grid-template-columns:1.5fr repeat(3,1fr);gap:26px} .exz-site footer{padding:44px 0 26px} .exz-site .fbot{margin-top:30px;padding-top:18px;flex-wrap:wrap;gap:12px 20px} .exz-site .flegal{display:flex;flex-wrap:wrap;gap:4px 16px} .exz-site .flegal a{color:rgba(255,255,255,.55);transition:color .2s} .exz-site .flegal a:hover{color:#fff} @media(max-width:900px){ .exz-site .fgrid{grid-template-columns:1fr 1fr;gap:22px} .exz-site .fbrand{grid-column:1/-1} } @media(max-width:560px){ .exz-site footer{padding:34px 0 22px} .exz-site .fgrid{grid-template-columns:1fr 1fr;gap:18px 16px} .exz-site .fcol a{margin-bottom:7px} .exz-site .fbot{margin-top:22px;font-size:11.5px} } .exz-site [data-fx="off"] .glass{backdrop-filter:blur(18px) saturate(1.1)!important;-webkit-backdrop-filter:blur(18px) saturate(1.1)} .exz-site [data-fx="off"] .glass:after{opacity:.25} .exz-site .fxsel{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px} .exz-site .fxsel button{appearance:none;border:0;background:transparent;color:var(--mute);font:inherit;font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer;line-height:1.5} .exz-site .fxsel button[aria-pressed="true"]{background:var(--surface-2);color:var(--ink)} .exz-site .fxsel button:focus-visible{outline:2px solid var(--gold);outline-offset:1px} .exz-site footer{background:var(--night);color:rgba(255,255,255,.66);padding:64px 0 36px;font-size:13px} .exz-site .fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px} .exz-site .fcol h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#fff;font-weight:600;margin-bottom:16px;text-transform:uppercase} .exz-site .fcol a{display:block;color:rgba(255,255,255,.62);margin-bottom:10px;transition:color .2s} .exz-site .fcol a:hover{color:#fff} .exz-site .fbrand img{height:34px} .exz-site .fbrand p{margin-top:16px;line-height:1.65;max-width:34ch} .exz-site .fbot{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.04em} @keyframes exz-vt-out{to{opacity:0;transform:translateY(12px)}} @keyframes exz-vt-in{from{opacity:0;transform:translateY(-10px)}} .exz-site .skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;z-index:100} .exz-site .skip:focus{left:12px} .exz-site .progress{position:fixed;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--violet),var(--gold));z-index:80;transition:width .1s linear} .exz-site .hdr.compact .brand img{height:28px} .exz-site .hdr.compact .brand .word{font-size:16px;letter-spacing:.14em} .exz-site .brand img,.exz-site .brand .word{transition:all .35s var(--ease)} @keyframes exz-rvin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .exz-site .btn{position:relative;overflow:hidden;isolation:isolate} .exz-site .btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease);z-index:-1} .exz-site .btn:hover:after{transform:translateX(120%)} .exz-site .btn:active{transform:translateY(1px) scale(.99)} .exz-site .btn.primary{box-shadow:0 10px 26px rgba(91,63,191,.32)} .exz-site .btn.primary:hover{box-shadow:0 14px 34px rgba(91,63,191,.42)} .exz-site footer{position:relative;overflow:hidden} .exz-site footer .wm{position:absolute;right:-2%;bottom:-6%;font-size:clamp(120px,22vw,300px);font-weight:700;letter-spacing:-.05em;color:#fff;opacity:.035;line-height:1;pointer-events:none;user-select:none} .exz-site footer .container{position:relative;z-index:1} .exz-site .social{display:flex;gap:8px;margin-top:16px} .exz-site .social a{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:all .25s} .exz-site .social a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .exz-site .social a:hover{border-color:var(--gold);color:#fff;transform:translateY(-2px)} .exz-site .badges{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap} .exz-site .badges span{border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 12px;font-size:10.5px;color:rgba(255,255,255,.6);line-height:1.3;display:flex;flex-direction:column;gap:2px} .exz-site .badges b{color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.02em} .exz-site .badges span:first-child b:before{content:"";display:inline-block;width:14px;height:9px;margin-right:6px;vertical-align:-1px;border-radius:2px;background:linear-gradient(180deg,#111 33%,#D00 33% 66%,#FFCE00 66%)} .exz-site .topshell{position:sticky;top:0;z-index:40} .exz-site .topshell .hdr{position:static;background:transparent;border:0} .exz-site .topshell .hdr .container{height:60px;border-radius:0} .exz-site .topshell .shell{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none} .exz-site .topshell:before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(52,38,143,.08);z-index:-1} .exz-site .topshell.compact:before{opacity:0} .exz-site .topshell.compact .hdr .container{height:56px;max-width:1200px;margin-top:10px;padding:0 10px 0 16px;border-radius:999px; background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px) saturate(1.3); border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 18px 50px rgba(52,38,143,.16)} .exz-site .topshell.compact .ctx{border-color:rgba(232,166,44,.5)} .exz-site .topshell.compact .brand img{height:28px} .exz-site .topshell.compact .brand .word{font-size:16px} [data-theme="dark"] .exz-site .brand img,[data-chrome="dark"] .exz-site .brand img{filter:brightness(0) invert(1)} [data-theme="dark"] .exz-site .brand .word,[data-chrome="dark"] .exz-site .brand .word{color:#fff} [data-theme="dark"] .exz-site .btn,[data-chrome="dark"] .exz-site .btn{background:#fff;color:var(--night)} [data-theme="dark"] .exz-site .btn.primary,[data-chrome="dark"] .exz-site .btn.primary{background:var(--violet);color:#fff} [data-theme="dark"] .exz-site .btn.ghost,[data-chrome="dark"] .exz-site .btn.ghost{background:transparent;color:var(--ink)} [data-theme="dark"] .exz-site footer,[data-chrome="dark"] .exz-site footer{border-top:1px solid var(--line)} .exz-site .menu-btn{font-weight:600} .exz-site .drawer{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(20px);padding:18px var(--gutter) 30px;overflow:auto} .exz-site .drawer.open{display:flex;animation:exz-rvin .3s var(--ease) both} .exz-site .drawer .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px} .exz-site .drawer h5{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:18px 0 8px} .exz-site .drawer .dl{display:grid;gap:6px} .exz-site .drawer .dl a,.exz-site .drawer .dl button,.exz-site .drawer .dl span.soon{padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;text-align:left;color:var(--ink);display:block} .exz-site .drawer .dl .on{background:var(--violet);color:#fff;border-color:var(--violet)} .exz-site .drawer .dl .soon{color:var(--mute);font-weight:500;cursor:default} .exz-site .drawer .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px} .exz-site .drawer .cta{display:flex;gap:10px;margin-top:auto;padding-top:20px} @media(max-width:1100px){ .exz-site .nav{display:none} .exz-site .menu-btn{display:block} .exz-site .hdr .signin{display:none} } @media(max-width:640px){ .exz-site .container{padding:0 16px} .exz-site .hdr .btn.primary{display:none} .exz-site .topshell.compact .hdr .container{max-width:none;margin:8px 10px 0;height:50px} } @media(max-width:640px){ .exz-site .topshell{padding-top:8px} .exz-site .topshell .hdr .container{height:56px;padding:0 12px 0 14px;border-radius:16px} .exz-site .brand img{height:30px} .exz-site .brand .word{font-size:15px;letter-spacing:.14em} .exz-site .hdr .ico{width:36px;height:36px} .exz-site .hdr .ico.avatar{display:none} .exz-site footer .wm{font-size:clamp(96px,30vw,150px);right:-30%} .exz-site .progress{height:3px} .exz-site .topshell.compact .brand .word{display:none} .exz-site .topshell.compact .ctx{padding:6px 10px;font-size:11.5px} .exz-site .topshell.compact .hdr .container{padding:0 10px} } .exz-site .topshell{position:sticky;top:0;z-index:40} .exz-site .topshell:before{display:none} .exz-site .topshell .hdr{background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--elev-1)} .exz-site .topshell .hdr .container{height:64px} .exz-site .topshell.compact .hdr{background:transparent;border-bottom-color:transparent;box-shadow:none} [data-theme="dark"] .exz-site .topshell .hdr,[data-chrome="dark"] .exz-site .topshell .hdr{background:var(--surface)} .exz-site .topshell{padding-top:12px} .exz-site .topshell .hdr{background:transparent;border:0;box-shadow:none} .exz-site .topshell .hdr .container{height:66px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:0 22px; box-shadow:0 18px 44px rgba(52,38,143,.16),0 1px 0 rgba(255,255,255,.9) inset} .exz-site .topshell.compact{padding-top:0} @media(max-width:1100px){ .exz-site .topshell .hdr .container{border-radius:16px;padding:0 14px;height:58px} } .exz-site .topshell .hdr .container{padding:0 34px} .exz-site .topshell .hdr .container{position:relative;z-index:6} .exz-site .progress,.exz-site .topshell,.exz-site .drawer,.exz-site .drawer-back{z-index:auto} .exz-site .progress{z-index:80} .exz-site .topshell{z-index:40} .exz-site .drawer{z-index:70} .exz-site .drawer-back{z-index:65} .exz-site footer .wm{opacity:.5;left:auto;right:-30%;bottom:-6%;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.42); background:linear-gradient(90deg,rgba(150,120,255,.85),rgba(232,166,44,.75));-webkit-background-clip:text;background-clip:text; animation:wmdrift 30s ease-in-out infinite alternate} .exz-site .hright{gap:8px} .exz-site .ico{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;justify-content:center; color:var(--ink);transition:all .25s var(--ease);position:relative} .exz-site .ico:hover{border-color:var(--violet);transform:translateY(-1px);box-shadow:var(--elev-3)} .exz-site .ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .exz-site .ico.avatar{background:linear-gradient(150deg,var(--lav),var(--surface));overflow:hidden} .exz-site .ico.avatar svg{width:20px;height:20px} .exz-site .topshell.compact .ico{width:36px;height:36px} .exz-site .topshell .hdr .container{background:color-mix(in srgb,var(--surface) 62%,transparent);backdrop-filter:blur(18px) saturate(1.2);border-color:color-mix(in srgb,#fff 60%,var(--line))} .exz-site .topshell.compact .hdr .container{background:color-mix(in srgb,var(--surface) 78%,transparent)} [data-theme="dark"] .exz-site .topshell .hdr .container,[data-chrome="dark"] .exz-site .topshell .hdr .container{background:color-mix(in srgb,var(--surface) 62%,transparent);border-color:var(--line)} @media(max-width:1100px){ .exz-site .hdr .signin{display:inline-flex} } @media(max-width:640px){ .exz-site .hdr .btn.primary{display:none} .exz-site .hdr .signin{display:none} } .exz-site .glass{background:color-mix(in srgb,var(--surface) 46%,transparent)!important; backdrop-filter:blur(34px) saturate(1.7) brightness(1.04)!important;-webkit-backdrop-filter:blur(34px) saturate(1.7) brightness(1.04); border:1px solid rgba(255,255,255,.55)!important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(255,255,255,.25) inset,0 24px 60px rgba(52,38,143,.14)!important;position:relative} .exz-site .glass:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background:linear-gradient(118deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 28%,transparent 46%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.22) 100%)} .exz-site .glass:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background:radial-gradient(420px 240px at 22% 0%,rgba(255,236,190,.30),transparent 70%);opacity:.7} .exz-site .glass>*{position:relative;z-index:1} [data-theme="dark"] .exz-site .glass,[data-chrome="dark"] .exz-site .glass{background:color-mix(in srgb,var(--surface) 42%,transparent)!important;border-color:rgba(255,255,255,.14)!important} [data-theme="dark"] .exz-site .glass:before,[data-chrome="dark"] .exz-site .glass:before{background:linear-gradient(118deg,rgba(255,255,255,.14),transparent 40%,rgba(255,255,255,.05))} .exz-site .topshell.compact .hdr .container.glass{background:color-mix(in srgb,var(--surface) 62%,transparent)!important} .exz-site .ico{background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(10px)} @media(max-width:1100px){ .exz-site .nav{display:none} .exz-site .menu-btn{display:block} .exz-site .fgrid{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .exz-site .hright .signin{display:none} } .exz-site [data-q="medium"] .glass{backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important} .exz-site [data-q="medium"] .ico{backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .exz-site [data-q="medium"] .glass{backdrop-filter:none!important;-webkit-backdrop-filter:none!important; background:color-mix(in srgb,var(--surface) 90%,transparent)!important} .exz-site [data-q="low"] .glass{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:color-mix(in srgb,var(--surface) 94%,transparent)!important} .exz-site [data-q="low"] .glass:before,.exz-site [data-q="low"] .glass:after{display:none!important} .exz-site .newsletter input{flex:1;padding:10px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font:inherit;font-size:13px;color:var(--ink)} .exz-site .newsletter{margin-top:22px} .exz-site .newsletter h6{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#fff;text-transform:uppercase;margin-bottom:10px} .exz-site .newsletter form{display:flex;gap:8px} .exz-site .nl-msg{margin:8px 0 0;font-size:12.5px;line-height:1.4;min-height:1em} .exz-site .nl-msg[data-state="ok"]{color:#8de3b6} .exz-site .nl-msg[data-state="err"]{color:#ffb4a8} .exz-site .newsletter input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff} .exz-site .newsletter input::placeholder{color:rgba(255,255,255,.45)} .exz-site .newsletter p{font-size:11px;color:rgba(255,255,255,.5);margin-top:8px;line-height:1.5} .exz-site .langsel{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .exz-site .langsel button{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.7)} .exz-site .langsel button.on{background:#fff;color:var(--night);border-color:#fff} .exz-site .langsel .auto{font-size:10.5px;color:rgba(255,255,255,.5);margin-left:6px} .exz-site .nlband{content-visibility:visible;contain-intrinsic-size:auto;padding:22px 0} .exz-site .nlband .newsletter{margin:0;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap} .exz-site .nlband .newsletter h6{margin:0;flex:none} .exz-site .nlband .newsletter form{flex:1 1 300px;max-width:440px;margin:0;gap:8px} .exz-site .nlband .newsletter p{margin:0;flex:1 1 200px;font-size:11.5px;line-height:1.45;color:var(--mute)} .exz-site .nlband .nl-msg{flex:1 1 100%;margin:0;min-height:0} @media(max-width:760px){ .exz-site .nlband{padding:18px 0} .exz-site .nlband .newsletter{gap:10px} .exz-site .nlband .newsletter form{flex:1 1 100%} .exz-site .nlband .newsletter p{flex:1 1 100%;font-size:11px} } .exz-site footer{padding:46px 0 24px} .exz-site .fgrid{grid-template-columns:1.4fr repeat(3,1fr);gap:24px} .exz-site .fcol a{margin-bottom:9px} .exz-site .fbrand p{margin-top:12px} .exz-site .badges{margin-top:12px} .exz-site .social{margin-top:12px} .exz-site .fbot{margin-top:26px;padding-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:12px} .exz-site .flegal{display:flex;flex-wrap:wrap;gap:2px 14px} .exz-site .fbot .langsel{gap:3px} .exz-site .fbot .langsel button{padding:4px 7px;font-size:10px} .exz-site .fbot .themesel button,.exz-site .fbot .fxsel button{padding:3px 8px;font-size:10.5px} @media(max-width:900px){ .exz-site .fgrid{grid-template-columns:repeat(3,1fr);gap:20px 14px} .exz-site .fbrand{grid-column:1/-1} } @media(max-width:560px){ .exz-site footer{padding:32px 0 20px} .exz-site .fgrid{gap:18px 10px} .exz-site .fcol h5{margin-bottom:10px;font-size:9.5px;letter-spacing:.1em} .exz-site .fcol a{margin-bottom:8px;font-size:12.5px;line-height:1.35} .exz-site .fbrand .flogo{height:28px} .exz-site .badges{display:none} .exz-site .fbot{margin-top:20px;padding-top:14px;font-size:11px;gap:8px 14px} .exz-site .fbot .langsel button{padding:3px 6px} } .exz-site .drawer{background:color-mix(in srgb,var(--bg) 70%,transparent)!important; backdrop-filter:blur(30px) saturate(1.7);-webkit-backdrop-filter:blur(30px) saturate(1.7); top:76px;border-radius:22px 22px 0 0;border-top:1px solid var(--line); box-shadow:0 -18px 50px rgba(52,38,143,.16)} [data-theme="dark"] .exz-site .drawer,[data-chrome="dark"] .exz-site .drawer{background:color-mix(in srgb,var(--bg) 76%,transparent)!important; box-shadow:0 -18px 50px rgba(0,0,0,.5)} .exz-site .drawer .dh .word{display:none} .exz-site .drawer .dh{justify-content:flex-end;margin-bottom:14px} .exz-site .drawer-back{position:fixed;inset:0;z-index:65; background:color-mix(in srgb,var(--night) 34%,transparent); opacity:0;pointer-events:none;transition:opacity .28s var(--ease)} .exz-site .drawer-back.on{opacity:1;pointer-events:auto} @media(prefers-reduced-motion:reduce){ .exz-site .drawer-back{transition:none} } /* The mount is a plain

at the top of . A sticky element only sticks inside its parent's box, so a wrapper with its own height would carry the header off-screen after one screenful; display:contents makes .topshell lay out as if it were body's own child, exactly as on the home page. The z-indexes are raised above anything a page reserves for its own old header (marketing used 900) so the chrome is always on top. */ #exz-header.exz-site{display:contents} .exz-site .topshell{z-index:900} .exz-site .drawer{z-index:950} /* Between the header and the drawer, on this surface's own scale: the chrome numbers its layers an order of magnitude above the home page's, so 65 would have put the backdrop underneath the header instead. */ .exz-site .drawer-back{z-index:945} .exz-site .progress{z-index:960} /* The header is sticky; an in-page jump must not land a heading under it. */ html{scroll-padding-top:92px} @media(max-width:640px){html{scroll-padding-top:76px}} /* One page-to-page transition for the whole site, the home page's own. */ ::view-transition-old(root){animation:exz-vt-out .3s cubic-bezier(.2,.7,.2,1) both} ::view-transition-new(root){animation:exz-vt-in .45s cubic-bezier(.2,.7,.2,1) both} @view-transition{navigation:auto} /* One reveal-on-scroll for page content: opt in with data-reveal on . opacity:1 is stated outright so copy never depends on an animation running. */ .exz-rv{opacity:0} .exz-rv.in{opacity:1;animation:exz-rvin .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*45ms)} @media(prefers-reduced-motion:reduce){ .exz-rv{opacity:1}.exz-rv.in{animation:none} ::view-transition-old(root),::view-transition-new(root){animation:none} .exz-site .drawer.open,.exz-site .prodwrap.open .prodpanel{animation:none} }