/* Everything the pages share: the token set, the top bar, the footer, and the rules that govern both on small screens. Each page keeps its own CSS inline and loads this file first, so a page rule always wins over a shared one. The pages duplicate their header and footer markup on purpose (no build step, no runtime injection), so the five copies are edited together. */ :root{ /* ---- surface ramp -------------------------------------- */ --s0:#0A0A0A; --s1:#111111; --s2:#161616; --s3:#1C1C1C; --s4:#242424; --b1:rgba(255,255,255,.06); --b2:rgba(255,255,255,.10); --b3:rgba(255,255,255,.16); --hi:inset 0 1px 0 rgba(255,255,255,.04); --focus:rgba(0,122,239,.40); /* ---- text neutrals, zero chroma ------------------------ */ --t0:#FFFFFF; --t1:#E8E8E8; --t2:#B1B1B1; --t3:#808080; --t4:#555555; /* ---- anchor, and green for savings and good trends ----- */ --a:#007AEF; --a-lift:#1CA2FF; --a-deep:#002351; --ok:#53B93A; /* ---- radius / motion ----------------------------------- */ --r-lg:12px; --r-md:8px; --r-sm:6px; --r-pill:999px; --ease:cubic-bezier(.22,.61,.36,1); --d1:120ms; --d2:180ms; /* ---- type ---------------------------------------------- */ --t-display:64px; --t-ask:24px; --t-body:20px; --t-ui:15px; --t-uis:13.5px; --t-micro:11px; --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; --gutter:40px; --bar-h:84px; } /* A change to a hex text or anchor token is a change to its OKLCH twin. */ @supports (color:oklch(0.5 0.1 250)){ :root{ --t1:oklch(.93 0 0); --t2:oklch(.76 0 0); --t3:oklch(.60 0 0); --t4:oklch(.45 0 0); --a:oklch(.58 .21 250); --a-lift:oklch(.70 .19 250); --a-deep:oklch(.26 .10 250); --ok:oklch(.70 .19 140); } } *{box-sizing:border-box} /* Too-wide content is cut rather than given a scrollbar, so a missing scrollbar is never evidence that nothing overflows. `clip` instead of `hidden` because `hidden` would break position:sticky. */ html{overflow-x:clip} body{margin:0;background:var(--s0);color:var(--t1);font-family:var(--sans); -webkit-font-smoothing:antialiased;overflow-x:clip} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:4px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ico{width:16px;height:16px;flex:none;display:block; fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .ico20{width:20px;height:20px} /* ---------------- top bar, fixed, on every page ---------------- */ /* The bar is clear by default, which is what the desktop homepage and pricing page are designed around. It turns solid wherever the page can scroll beneath it with nothing reserving the space: on the legal pages (class on , so the header markup stays identical everywhere), on every page at 960px and below, and on the homepage whenever its sections lay out in flow (set from that page's own CSS). The edge is a real border only in the solid variant, because a border on the clear bar would shift its contents by half a pixel. */ .top{position:fixed;inset:0 0 auto 0;z-index:20; display:flex;align-items:center;gap:16px; height:var(--bar-h);padding:0 var(--gutter); background:var(--bar-bg,transparent); border-bottom:var(--bar-edge,0) solid transparent; transition:border-color var(--d2) var(--ease)} .top.sc{border-bottom-color:var(--b1)} .bar-solid{--bar-bg:var(--s0);--bar-edge:1px} .mark{display:flex;align-items:center} .mark .logo{display:block;height:22px;width:auto} /* the centered pill nav */ .pillnav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:flex;align-items:center;gap:2px; background:var(--s2);box-shadow:var(--hi);border:1px solid var(--b2); border-radius:var(--r-pill);padding:5px} /* Reaches the sub-pages' bare links and the homepage's items alike, without reaching into the homepage dropdown, whose one anchor styles itself. */ .pillnav>a,.pillnav .nl{display:flex;align-items:center;gap:6px; font-family:var(--sans);font-size:var(--t-ui);font-weight:450;color:var(--t2); background:none;border:0;cursor:pointer; padding:9px 16px;border-radius:var(--r-pill); transition:background var(--d1) var(--ease),color var(--d1) var(--ease)} .pillnav>a:hover,.pillnav .nl:hover, .pillnav div:focus-within button.nl, .pillnav div.open button.nl{color:var(--t0);background:var(--s3)} .pillnav a.on{color:var(--t0);background:var(--s3)} /* ---------------- right side of the bar ---------------- */ .grow{flex:1} .login{font-size:var(--t-ui);font-weight:450;color:var(--t2);padding:9px 14px; border-radius:var(--r-md);transition:color var(--d1) var(--ease)} .login:hover{color:var(--t0)} .cta{display:inline-flex;align-items:center;justify-content:center;height:42px; padding:0 20px;border:0;cursor:pointer;border-radius:var(--r-pill); background:var(--t0);color:#0A0A0A; font-family:var(--sans);font-size:var(--t-ui);font-weight:600;letter-spacing:-.005em; white-space:nowrap; transition:transform var(--d1) var(--ease),background var(--d1) var(--ease)} .cta:hover{background:#E8E8E8} .cta:active{transform:translateY(1px)} /* the shared focus ring squares its target off at 4px; pills stay pills */ .cta:focus-visible,.pillnav>a:focus-visible,.pillnav .nl:focus-visible, .navm>summary:focus-visible{border-radius:var(--r-pill)} /* ---------------- the menu, 960px and below ---------------- A
so it opens and closes with no script at all; the script adds the ARIA state, Escape, and closing on a choice or on focus leaving. The dimmed ground behind the open panel is drawn by the itself, so a tap anywhere outside the panel lands on the summary and closes it, again without script. */ .navm{display:none;flex:none} .navm summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent} .navm summary::-webkit-details-marker{display:none} .navm>summary{position:relative;display:block;width:42px;height:42px;padding:10px; background:var(--s2);border:1px solid var(--b2);border-radius:var(--r-pill); box-shadow:var(--hi);color:var(--t1); transition:background var(--d1) var(--ease),color var(--d1) var(--ease)} .navm>summary:hover,.navm[open]>summary{background:var(--s3);color:var(--t0)} .navm[open] .when-shut,.navm:not([open]) .when-open{display:none} /* a closed
keeps its contents laid out in some engines, where a fixed panel would still be measured, and found, off to one side */ .navm details:not([open])>:not(summary),.navm:not([open])>:not(summary){display:none} /* the control is drawn at the CTA's height; this brings what a thumb can hit up to 44px without making it look heavier than the CTA beside it */ .navm>summary::after{content:"";position:absolute;inset:-4px} .navm[open]>summary::before{content:"";position:fixed;inset:var(--bar-h) 0 0 0; background:rgba(10,10,10,.64);cursor:default;touch-action:none; animation:navfade var(--d2) var(--ease)} #navpanel{position:fixed;top:calc(var(--bar-h) - 6px);right:var(--gutter); width:min(380px,calc(100% - 2 * var(--gutter))); max-height:calc(100vh - var(--bar-h) - 6px);max-height:calc(100dvh - var(--bar-h) - 6px); overflow-y:auto;overscroll-behavior:contain; background:var(--s2);border:1px solid var(--b2);border-radius:var(--r-lg); box-shadow:var(--hi);padding:8px; animation:navin var(--d2) var(--ease)} #navpanel>a,#navprod{position:relative;display:block;min-height:48px;padding:0 14px; border-radius:var(--r-md);font-size:16px;font-weight:500;line-height:48px;color:var(--t1); transition:background var(--d1) var(--ease),color var(--d1) var(--ease)} #navpanel>a:hover,#navprod:hover, #navpanel>a[aria-current]{color:var(--t0);background:var(--s3)} #navpanel>a:focus-visible,#navprod:focus-visible{outline-offset:-2px;border-radius:var(--r-md)} /* the way out to the trust page, set apart and quieter, as it is in the footer. 46px, not the 44px minimum: the entrance animation lands the panel on a fractional offset, so a row measured at exactly the minimum reads as 43.99px about one time in five. */ #navpanel>a.out{margin-top:13px;min-height:46px;line-height:46px; font-size:var(--t-uis);font-weight:450;color:var(--t3)} #navpanel>a.out::before{content:"";position:absolute;left:14px;right:14px;top:-7px; height:1px;background:var(--b1)} #navpanel>a.out::after{content:" \2197";color:var(--t4)} #navpanel>a.out:hover{color:var(--t0)} @keyframes navin{from{opacity:0;transform:translateY(-4px)}} @keyframes navfade{from{opacity:0}} /* ---------------- footer: the wordmark, a hairline, then one quiet row ---------------- */ footer{padding:140px var(--gutter) 40px} .fmark{display:block;text-align:center;font-weight:600;letter-spacing:-.045em; line-height:.9;font-size:clamp(60px,16vw,240px);color:var(--t1); margin:0 0 clamp(60px,10vh,110px)} .frow{display:flex;align-items:center;justify-content:space-between;gap:20px; max-width:1240px;margin:0 auto;border-top:1px solid var(--b1); padding-top:26px;font-size:var(--t-uis);color:var(--t3)} .fend{display:flex;align-items:center;gap:28px} .flinks{display:flex;align-items:center;gap:30px} .flinks a{color:var(--t3);white-space:nowrap;transition:color var(--d1) var(--ease)} .flinks a:hover,.flinks a[aria-current]{color:var(--t0)} /* Oneleet trust seal, immediately left of the SOC 2 link whose words it repeats. Served live from Oneleet, so the audit state changes without a code change. Held at 84% until hover so it stays a footnote next to the wordmark; aspect-ratio reserves the box against layout shift. */ .fbadge{display:block;flex:none;width:48px;aspect-ratio:212/321; opacity:.84;transition:opacity var(--d2) var(--ease)} .fbadge:hover{opacity:1} .fbadge img{display:block;width:100%;height:auto} @media(max-width:960px){ :root{--gutter:20px;--bar-bg:var(--s0);--bar-edge:1px} .pillnav{display:none} .navm{display:block} .top .mark{padding:12px 0} } /* phones: the bar keeps the logo, the one CTA, and the menu */ @media(max-width:640px){ :root{--bar-h:68px} .top .login{display:none} .top .mark .logo{height:20px} .top .cta{position:relative;height:38px;padding:0 16px;font-size:14px} .top .cta::after{content:"";position:absolute;inset:-4px 0} .navm>summary{width:38px;height:38px;padding:8px} #navpanel{top:calc(var(--bar-h) + 4px);max-height:calc(100vh - var(--bar-h) - 16px); max-height:calc(100dvh - var(--bar-h) - 16px)} .frow{flex-direction:column;gap:16px} .flinks{flex-wrap:wrap;justify-content:center;gap:12px 24px} .fend{flex-direction:column;gap:18px} .fbadge{width:42px} } /* At full size the logo, the CTA and the menu need 440px of bar. Up to there the slack between them goes first; below 410px each gives a little as well, and the logo takes whatever the width leaves, which keeps the CTA's label whole down to 360px. */ @media(max-width:440px){ .top{gap:8px} .top .grow{display:none} .top .cta{margin-left:auto} } @media(max-width:410px){ .top .mark .logo{height:clamp(16px,calc((100vw - 258px) / 6.36),20px)} .top .cta{height:36px;padding:0 10px;font-size:13px} .navm>summary{width:36px;height:36px;padding:7px} } @media (prefers-reduced-motion: reduce){ /* !important because every page's own