/* ══ The public site, built from design/automatemotion-site/reference ══════════ GENERATED by scripts/site_fix_build.py. Every rule above the shell is the reference's own; edit the reference or the script, not this file. */ a{font-family:inherit} a:focus-visible{outline:2px solid #8CCFE0;outline-offset:3px} .lp-nav{color:#8A8A94;text-decoration:none;transition:color 160ms ease} .lp-nav:hover{color:#F4F4F5} .lp-pill{transition:background 180ms ease, box-shadow 180ms ease} .lp-pill:hover{background:rgba(255,255,255,.08) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3) !important} .lp-solid{transition:transform 240ms cubic-bezier(.22,1,.36,1), filter 180ms ease} .lp-solid:hover{transform:scale(1.03);filter:brightness(1.05)} @keyframes lp-breathe{0%,100%{opacity:.92;transform:translate(0,0) scale(1)}50%{opacity:1;transform:translate(-18px,6px) scale(1.04)}} .lp-bloom{animation:lp-breathe 9s ease-in-out infinite} @keyframes lp-up{from{opacity:0;transform:translateY(16px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}} .lp-in{opacity:0;animation:lp-up 1.2s cubic-bezier(.22,1,.36,1) forwards} @media (prefers-reduced-motion: reduce){.lp-bloom{animation:none}.lp-in{animation:none;opacity:1}} @keyframes am-sweep{0%{background-position:160% 0}22%{background-position:-60% 0}100%{background-position:-60% 0}} .am-shine{background-image:linear-gradient(100deg,var(--c1) 0%,var(--c2) 38%,#FFFFFF 50%,var(--c2) 62%,var(--c1) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:am-sweep 7s ease-in-out infinite} .am-ring{background-image:linear-gradient(110deg,var(--c1) 0%,var(--c2) 40%,#FFFFFF 50%,var(--c2) 60%,var(--c1) 100%);background-size:260% 100%;animation:am-sweep 7s ease-in-out infinite} a,button{font-family:inherit} a:focus-visible,button:focus-visible{outline:2px solid #8CCFE0;outline-offset:3px} .lg-toc{transition:color 160ms ease, background 160ms ease} .lg-toc:hover{color:#F4F4F5} @keyframes pw-gleam{0%{transform:translateX(-180%) skewX(-18deg)}50%,100%{transform:translateX(440%) skewX(-18deg)}} .pw-gleam{position:absolute;top:0;bottom:0;left:0;width:42%;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 25%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.18) 75%,rgba(255,255,255,0) 100%);transform:translateX(-180%) skewX(-18deg);animation:pw-gleam 10s cubic-bezier(.4,0,.2,1) 2.6s infinite} .lp-in{} @media (prefers-reduced-motion: reduce){.pw-gleam{display:none}.lp-in{animation:none;opacity:1}} @media (prefers-reduced-motion: reduce){.lp-in{animation:none;opacity:1}} a,button,input,textarea{font-family:inherit} input::placeholder,textarea::placeholder{color:#5E5E66} input:focus::placeholder,textarea:focus::placeholder{color:transparent} input,textarea,input:focus,textarea:focus{outline:none} .ap-field{transition:box-shadow 180ms ease, background 180ms ease} .ap-field:focus-within{background:rgba(255,255,255,.055) !important;box-shadow:inset 0 0 0 1px rgba(205,235,243,.32) !important} .ap-chip{transition:background 160ms ease, box-shadow 160ms ease, color 160ms ease} .ap-chip:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24) !important} .lp-solid:hover{transform:scale(1.02);filter:brightness(1.05)} @media (prefers-reduced-motion: reduce){.lp-in{animation:none;opacity:1}.pw-gleam{display:none}} a,button,input{font-family:inherit} input::placeholder{color:#5E5E66} input:focus::placeholder{color:transparent} input,input:focus{outline:none} .s4-nav{color:rgba(244,244,245,.72);text-decoration:none;transition:color 160ms ease} .s4-nav:hover{color:#F4F4F5} .s4-field{transition:box-shadow 180ms ease, background 180ms ease} .s4-field:focus-within{background:rgba(255,255,255,.06) !important;box-shadow:inset 0 0 0 1px rgba(205,235,243,.34) !important} .s4-btn{transition:transform 240ms cubic-bezier(.22,1,.36,1), filter 180ms ease} .s4-btn:hover{transform:scale(1.015);filter:brightness(1.05)} .s4-grain{background-image:url("data:image/svg+xml;utf8,");background-size:220px 220px} @keyframes s4-in{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}} .s4-in{} @keyframes s4-view{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}} .s4-view{animation:s4-view .6s cubic-bezier(.22,1,.36,1)} @keyframes si-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}} .si-shake{animation:si-shake .45s ease} @media (prefers-reduced-motion: reduce){.s4-in{animation:none;opacity:1}.s4-view{animation:none}.pw-gleam{display:none}} button,input{font-family:inherit} input::placeholder{color:#62626A} input:focus{outline:none} button:focus-visible{outline:2px solid #8CCFE0;outline-offset:2px} input,input:focus,input:focus-visible{outline:none !important;box-shadow:none} .pw-codebox:focus-within{background:rgba(255,255,255,.06) !important} .pw-codebox input:focus::placeholder{color:transparent} .pw-press{transition:transform 90ms ease, filter 140ms ease} .pw-press:hover{filter:brightness(1.06)} .pw-press:active{transform:scale(.98)} .pw-card{transition:transform 180ms ease} .pw-card:hover{transform:translateY(-3px)} .pw-metal{background:linear-gradient(180deg,#FFFFFF 0%,#D9DCE0 45%,#8E9097 100%);-webkit-background-clip:text;background-clip:text;color:transparent} @keyframes pw-up{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}} @keyframes pw-card-in{0%{opacity:0;transform:translateY(22px) scale(.97);filter:blur(8px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}} @keyframes pw-ribbon{0%{opacity:0;transform:translate(34px,-34px) rotate(45deg)}100%{opacity:1;transform:rotate(45deg)}} @keyframes pw-bg{from{opacity:0}to{opacity:1}} @keyframes pw-sweep{0%{background-position:0 0}100%{background-position:100% 0}} .pw-in{opacity:0;animation:pw-up 1.2s cubic-bezier(.22,1,.36,1) forwards} .pw-cardin{opacity:0;animation:pw-card-in 1.6s cubic-bezier(.22,1,.36,1) forwards} .pw-rib{opacity:0;animation:pw-ribbon .9s cubic-bezier(.22,1,.36,1) 1.7s forwards} .pw-bgin{opacity:0;animation:pw-bg 2.2s ease-out forwards} .pw-shine{background-image:linear-gradient(100deg,#FFFFFF 0%,#D9DCE0 30%,#8E9097 46%,#FFFFFF 52%,#D9DCE0 60%,#8E9097 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pw-sweep 1.8s cubic-bezier(.45,0,.2,1) both} .pw-cta{transition:transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms ease, filter 200ms ease} .pw-cta:hover{transform:scale(1.04);filter:brightness(1.05)} .pw-cta:active{transform:scale(1.0)} .pw-replay:hover{background:rgba(255,255,255,.12);color:#F4F4F5} @media (prefers-reduced-motion: reduce){.pw-gleam{animation:none;display:none}.pw-in,.pw-cardin,.pw-rib,.pw-bgin{animation:none;opacity:1}.pw-shine{animation:none}} @media (prefers-reduced-motion: reduce){.pw-card:hover{transform:none}.pw-press:active{transform:none}} @keyframes l3-word{0%,12%{opacity:0;transform:translateY(6px);filter:blur(4px)}30%,78%{opacity:1;transform:none;filter:blur(0)}100%{opacity:0;transform:translateY(-2px);filter:blur(3px)}} .l3-word{animation:l3-word var(--d) cubic-bezier(.22,1,.36,1) infinite} @keyframes l3-ch{0%{opacity:0;transform:translateY(14px) scale(.96);filter:blur(10px)}60%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}} .l3-ch{display:inline-block;opacity:0;animation:l3-ch 1.2s cubic-bezier(.22,1,.36,1) forwards} @keyframes l3-logoin{0%{opacity:0;transform:scale(.88);filter:blur(10px)}100%{opacity:1;transform:none;filter:blur(0)}} .l3-logoin{opacity:0;animation:l3-logoin 1.1s cubic-bezier(.22,1,.36,1) .1s forwards} @keyframes l3-fillin{0%{transform:translateY(720px)}100%{transform:translateY(0)}} .l3-fillin{transform:translateY(720px);animation:l3-fillin 1.7s cubic-bezier(.65,0,.2,1) .35s forwards} @keyframes l3-glint{0%{transform:translateX(-560px)}100%{transform:translateX(1150px)}} .l3-glint{transform:translateX(-560px);animation:l3-glint 1.3s cubic-bezier(.45,0,.25,1) 2.1s forwards} @keyframes l3-glowin{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}} .l3-glowin{opacity:0;animation:l3-glowin 1.6s ease-out .3s forwards} .l3-replay:hover{background:rgba(255,255,255,.12);color:#F4F4F5} @keyframes l3-bg{0%,100%{opacity:.85}50%{opacity:1}} .l3-bg{animation:l3-bg calc(var(--d) * 2) ease-in-out infinite} /* one 3.2s cycle: outline draws, liquid pours up, glint, breathe, drain */ @keyframes l2-draw{0%{stroke-dashoffset:1}22%{stroke-dashoffset:0}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.35}} @keyframes l2-fill{0%,14%{transform:translateY(520px)}52%{transform:translateY(-30px)}78%{transform:translateY(-30px)}100%{transform:translateY(520px)}} @keyframes l2-wave{from{transform:translateX(0)}to{transform:translateX(-260px)}} @keyframes l2-glint{0%,50%{transform:translateX(-560px)}68%,100%{transform:translateX(1150px)}} @keyframes l2-glow{0%,40%{opacity:0;transform:translate(-50%,-50%) scale(.9)}58%,76%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.95)}} @keyframes l2-bar{0%{transform:scaleX(0);opacity:1}78%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}} .l2-draw{stroke-dasharray:1;animation:l2-draw var(--d) cubic-bezier(.6,0,.2,1) infinite} .l2-fill{animation:l2-fill var(--d) cubic-bezier(.55,0,.25,1) infinite} .l2-wave{animation:l2-wave 1.1s linear infinite} .l2-wave2{animation:l2-wave 1.7s linear infinite reverse} .l2-glint{animation:l2-glint var(--d) ease-in-out infinite} .l2-glow{animation:l2-glow var(--d) ease-in-out infinite} .l2-bar{transform-origin:left;animation:l2-bar var(--d) cubic-bezier(.6,0,.2,1) infinite} @media (prefers-reduced-motion: reduce){.l3-ch,.l3-logoin,.l3-glowin{animation:none;opacity:1}.l3-glint{animation:none;display:none}.l2-draw,.l2-fill,.l2-wave,.l2-wave2,.l2-glint,.l2-glow,.l2-bar{animation:none}.l2-fill{transform:translateY(-30px)}} /* ══ the shell ══════════════════════════════════════════════════════════════ The reference is a 1440 artboard. `.lp-page` is that artboard as a column: 1440 wide and centred on a wider window, 100% below it, and NEVER scaled up, so a 76px headline is 76px at every width. `.lp-bleed` is the escape hatch the brief asks for: the glows and the grain live in a 100vw box, so the background reaches the edges of the window while the content does not. Below 1440 the layout has to give somewhere. The classes here are added by scripts/site_fix_build.py from each box's own inline style, so the breakpoints live in ONE place instead of being sprinkled through 150KB of generated markup. */ /* clip, not hidden, so position:sticky still works; on html as well as body because a glow that is deliberately positioned past the edge otherwise leaves the page scrollable sideways. */ html{background:#050507;overflow-x:clip} body{margin:0;background:#050507;overflow-x:clip} .lp-page{position:relative;width:min(1440px,100%);margin:0 auto} .lp-bleed{position:absolute;left:50%;top:0;width:100vw;height:100%; transform:translateX(-50%);overflow:hidden;pointer-events:none;z-index:0} .lp-fit{position:relative;display:flex;justify-content:center;width:100%;overflow:hidden} /* Sign in ships BOTH views and shows one; the inline display:flex on each is why this needs the bang, not because something is fighting it. */ .si-view:not([data-on]){display:none !important} /* Same reason: the reference styles display INLINE, so the hidden attribute loses to it and the price that is supposed to be put away stays on screen. */ [hidden]{display:none !important} /* The legal copy is the only body text on the site with links in it, and without this they come out the browser's default blue. */ .lp-legal a{color:#A9DCEA;text-decoration:none} .lp-legal a:hover{text-decoration:underline} .lp-legal code{font-size:13px;color:#B8B8BE} /* The legal nav is a switcher: one view is shown and its item is lit. The values are the reference's own, lifted off its inline style so they can move between items. */ .lg-toc.on{background:rgba(255,255,255,.06) !important;color:#F4F4F5 !important; box-shadow:inset -2px 0 0 rgba(214,242,250,.7) !important} .lg-view:not([data-on]){display:none !important} /* REDUCED MOTION: the FINISHED logo, not an empty one. The reference's own rule turns the fill animation off and leaves .l3-fillin at translateY(720px), which is the mark before anything has poured into it, so the loader showed a hollow outline and then faded. The brief says the finished logo is held for 600ms, and loader.js already shortens the hold; this is the frame it holds. */ @media (prefers-reduced-motion: reduce){ .l3-fillin{transform:translateY(0) !important;animation:none !important} .l3-ch,.l3-logoin,.l3-glowin{animation:none !important;opacity:1 !important} .l3-glint{display:none !important} } /* ── below the artboard ────────────────────────────────────────────────── EVERY override here carries !important, and that is not laziness: the reference's styles are INLINE on each element, so a class selector loses to them by specificity no matter how it is written. The alternative is editing 150KB of generated markup, which is the thing this whole approach exists to avoid. */ @media (max-width:1439px){ .lp-wide{max-width:100% !important} /* the app preview is scaled, not capped: capping it first would scale the cap */ .lp-shot{max-width:none !important} } @media (max-width:1340px){ .lp-fit{height:646px} .lp-shot{transform:scale(.85);transform-origin:top center} } @media (max-width:1180px){ .lp-page h1{font-size:60px !important} .lp-fit{height:534px} .lp-shot{transform:scale(.70);transform-origin:top center} } @media (max-width:1000px){ .lp-fit{height:420px} .lp-shot{transform:scale(.55);transform-origin:top center} } @media (max-width:860px){ .lp-page{width:100%} .lp-page h1{font-size:40px !important;line-height:1.06 !important} .lp-page h2{font-size:30px !important} .lp-auto{height:auto !important;min-height:0 !important; padding-top:64px !important;padding-bottom:64px !important} .lp-stack{flex-direction:column !important;align-items:flex-start !important;gap:20px !important} .lp-cols{grid-template-columns:1fr !important;gap:0 !important} .lp-cols > *{border-left:0 !important;padding-left:0 !important;max-width:100% !important} .lp-wrap{flex-wrap:wrap !important;justify-content:center !important;gap:18px !important} .lp-pad{padding-left:20px !important;padding-right:20px !important} .lp-mar{margin-left:20px !important;margin-right:20px !important} .lp-fit{height:300px} .lp-shot{transform:scale(.40);transform-origin:top center} /* the header and the footer wrap instead of running off the side */ .lp-page header{position:relative !important;flex-wrap:wrap !important;height:auto !important; padding:16px 20px !important;gap:10px 14px !important} .lp-page footer{flex-wrap:wrap !important;height:auto !important; padding:22px 0 !important;gap:10px 18px !important} .lp-page footer > span[style*="flex: 1"]{display:none !important} /* a band lays its content out in flow, because two boxes pinned to the same bottom overlap */ .lp-flow{display:flex !important;flex-direction:column !important;align-items:flex-start !important; justify-content:center !important;gap:18px !important; padding:40px 20px !important;height:auto !important;min-height:0 !important} .lp-abs{position:static !important;inset:auto !important;max-width:100% !important} /* SIGN IN ON A PHONE (the brief names this one): the emerald panel becomes a 220px top band and the form sits below it. Its headline is 60px and cannot live in 220px, so the band keeps the glow and the mark and drops the words rather than clipping them. */ .lp-page > section.s4-in:first-of-type{height:220px !important;min-height:0 !important} .lp-page > section.s4-in:first-of-type > *:not(header):not(.lp-bleed){display:none !important} .lp-page{min-height:0 !important} /* the form column fills the width instead of keeping its 400px desktop card */ .lp-page > section.s4-in:last-of-type > div{width:100% !important;max-width:100% !important} /* anything still laid out at a desktop width gives way */ .lp-page [style*="width: 420px"],.lp-page [style*="width: 400px"], .lp-page [style*="width: 380px"],.lp-page [style*="width: 360px"], .lp-page [style*="max-width: 760px"],.lp-page [style*="width: 286px"]{max-width:100% !important} } @media (max-width:520px){ .lp-fit{height:220px} .lp-shot{transform:scale(.28);transform-origin:top center} .lp-page h1{font-size:34px !important} } /* ══ THE SITE'S SCALE (2026-11-06) ═══════════════════════════════════════════ The pages are the design's 1440x900 artboards at real pixel size, which on a laptop pushed the hero headline half off the first screen and cut sign in. ONE factor scales the whole page, so the design is unchanged, only smaller: --site-z = clamp(.68, min(width/1600, height/1000), 1), set before the first paint by door.js. Big screens get 1, the design's own size; it never grows. Desktop widths only: under 1024px the phone/tablet rules above own the page. */ @media (min-width:1024px){ .lp-page{ zoom:var(--site-z, 1); /* the column is at most 1440 SCREEN pixels, as before; in zoomed units that is 1440 / z, so a scaled page fills a laptop window instead of leaving bands */ width:min(calc(1440px / var(--site-z, 1)), 100%); } /* the glows still reach the window's edges: 100vw inside a zoomed box is scaled with it */ .lp-bleed{ width:calc(100vw / var(--site-z, 1)); } /* The homepage's first band IS the first screen: it fills the window at any scale, so the headline and its line sit on the bottom of what you see, never under it. `100vh` inside a zoomed element is scaled with it, hence the division. */ .lp-page > section.lp-auto.lp-flow:first-of-type[style*="height: 900px"]{ height:max(560px, calc(100vh / var(--site-z, 1))) !important; } /* Sign in is one screen, never more and never less: both panels fill the window exactly. */ .lp-page.lp-cols{ min-height:calc(100vh / var(--site-z, 1)) !important; height:calc(100vh / var(--site-z, 1)); } } /* ══ NO BLACK GAP ON OVERSCROLL (2026-11-06) ═════════════════════════════════ Pulling past the top or bottom (the trackpad rubber band in Chrome and Safari on a Mac, and on phones) uncovered the canvas behind the page: a flat band in the root colour, which read as a black bar against the hero's glow. The bounce is switched off on the root, so the page simply stops at its edges, and the canvas is the page's own colour for any browser that still shows a sliver of it. */ html, body{ background:#050507; overscroll-behavior:none; overscroll-behavior-y:none; }