@font-face{font-family:'Newsreader';src:url('/static/fonts/newsreader-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/static/fonts/instrument-sans-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
body{margin:0;background:#FAFAF9;font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif;color:#16181C;line-height:1.6;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
a{color:#E8622E;text-decoration:none}
a:hover{color:#C9501F}

/* --- The shared header and footer -----------------------------------------
   Generated from Site Header v2.dc.html and Site Footer v2.dc.html by
   v2/build/build_shell.py. Every declaration is read out of the design's own
   logic class by running it, never typed here. Do not hand-edit.

   box-sizing is scoped to these two components rather than widened into the
   site reset. The reset is shared with pages that are already signed off, and
   changing it would move them. The handoff assumes border-box; this gives it
   that without touching a page. */
.zshell, .zshell *, .zshell *::before, .zshell *::after { box-sizing: border-box }

.nav-group { position: relative; display: flex; align-items: center }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 14.5px; background: none; border: 0; padding: 12px 0; margin: -12px 0; cursor: pointer; text-decoration: none; white-space: nowrap; color: #9AA0A8; font-weight: 400 }
.nav-trigger svg { display: block; margin-top: 1px; flex: none }

/* Lit means the current section, or a panel that is open. The weight change
   alters the label's width, which in a right-aligned cluster shifts every
   sibling. The fix is to RESERVE the bold width, not to drop the weight
   change: a colour-only active state is too weak here. The ::after holds a
   zero-height bold copy of the label, so the box is always the wider of the
   two and nothing moves when it lights. */
.nav-trigger.is-lit,
.nav-group.is-open .nav-trigger { color: #E9EAEC; font-weight: 600 }
.nav-label { display: block }
.nav-label::after {
  content: attr(data-label); display: block; height: 0;
  overflow: hidden; visibility: hidden; pointer-events: none;
  font-weight: 600;
}

/* Every panel anchors to its trigger's RIGHT edge, not its left.
   The design left-aligns all but the last. Measured at a 500px viewport that
   overflows the document by 28px, and it does so even with every panel closed,
   because visibility:hidden still occupies layout. That breaks "no panel
   overflows the viewport at any width" and it puts a horizontal scrollbar on
   every page, not just when a panel is open.
   Right-anchoring is safe here precisely because the cluster is right-aligned,
   so every trigger already sits in the right half of the bar and a panel grows
   leftward into space that exists. A DEVIATION from the drawn alignment,
   measured rather than assumed, and worth confirming with Claude Design. */
.nav-panel-wrap { position: absolute; top: 100%; padding-top: 14px; z-index: 40; left: auto; right: 0; visibility: hidden; pointer-events: none }
.nav-panel-wrap.is-right { left: auto; right: 0 }
.nav-group.is-open .nav-panel-wrap,
.nav-group:focus-within .nav-panel-wrap { visibility: visible; pointer-events: auto }

.nav-panel { min-width: 270px; max-width: min(330px,calc(100vw - 48px)); padding: 8px; background: #1B1E23; border: 1px solid #2F343B; border-radius: 6px; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -12px rgba(0,0,0,.72); display: flex; flex-direction: column; transition: opacity 90ms linear, transform 90ms ease-out; opacity: 0; transform: translateY(-3px) }
.nav-group.is-open .nav-panel,
.nav-group:focus-within .nav-panel { opacity: 1; transform: translateY(0) }

/* A user preference, not a breakpoint. The site has no media queries for
   layout and this does not introduce one. */
@media (prefers-reduced-motion: reduce) { .nav-panel { transition: none } }

.nav-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 5px; text-decoration: none; background: transparent }
.nav-row:hover { background: #262A31 }
.nav-row b { display: block; font-size: 14.5px; font-weight: 600; color: #E9EAEC; line-height: 1.35 }
.nav-row span { display: block; font-size: 12.5px; line-height: 1.45; color: #9AA0A8 }

.nav-cta { font-size: 14.5px; font-weight: 700; color: #15171B; padding: 9px 18px; border-radius: 5px; text-decoration: none; white-space: nowrap; background: #E8622E }
.nav-cta:hover { background: #D9561F }

/* Login and the trial button share one flex:none container with nowrap, so
   they can never separate when the bar wraps. That is the one wrapping
   guarantee the handoff asks to preserve. */
.nav-actions { display: flex; align-items: center; gap: 22px; flex: none; white-space: nowrap }
.nav-sep { display: block; width: 1px; height: 18px; background: #262A31; flex: none }

.nav-trigger:focus-visible, .nav-row:focus-visible, .nav-cta:focus-visible,
.nav-login:focus-visible, .foot-link:focus-visible, .foot-brand:focus-visible,
.legal-link:focus-visible, .skip:focus-visible { outline: 2px solid #E8622E; outline-offset: 3px }

/* Skip to content, the first focusable thing on every page. Lets someone on a
   keyboard jump past the menu instead of tabbing through it on all 30 pages.

   IT CANNOT MOVE THE DESIGN. position:fixed takes an element out of the page's
   flow completely: it occupies no space, it cannot push anything, and that
   stays true inside a flex container, where an out-of-flow child is not a flex
   item at all. At rest it sits 100px above the top edge, so it draws nothing.
   It appears only while it has focus, which on this site means a keyboard.

   Its look is the trial button's, reused rather than invented, so it carries
   the design's own accent, padding and radius. The only values added here are
   the four positioning ones, and z-index:50 clears the nav panel's 40. */
.skip { font-size: 14.5px; font-weight: 700; color: #15171B; padding: 9px 18px; border-radius: 5px; text-decoration: none; white-space: nowrap; background: #E8622E; position: fixed; z-index: 50; top: -100px; left: 12px }
.skip:focus { top: 12px }

/* The landing spot is a box that already exists on every page, given an id and
   tabindex so focus can actually move there rather than only the scroll
   position. The attributes change nothing visually, but after the jump a
   browser may paint its focus ring around that box, and on the homepage
   hover.css's global rule would make that 2px of accent around the whole hero
   band. Suppressed. The id selector outranks the global one. */
#content:focus, #content:focus-visible { outline: none !important }

/* The bar. Right-aligned: the group cluster carries margin-left:auto and the
   actions follow it, matching the shipped homepage. */
.zshell-bar {
  position: relative; display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 36px; row-gap: 14px; min-height: 78px; padding: 14px 0;
  border-bottom: 1px solid #262A31;
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
.nav-wordmark {
  font-family: 'Newsreader', Georgia, serif; font-size: 24px; font-weight: 600;
  letter-spacing: -.02em; color: #fff; text-decoration: none;
  white-space: nowrap; flex: none;
}
/* min-width:0 is load-bearing. Without it this flex item cannot shrink below
   its own min-content width, and because every trigger is white-space:nowrap
   that width is the sum of all four groups. The row then overflows instead of
   wrapping, which widens the whole document and makes every page look clipped
   at narrow widths. Caught at 375px. */
.nav-groups {
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 36px; row-gap: 14px; margin-left: auto;
  min-width: 0;
}
.nav-login {
  font-size: 14.5px; color: #7C838C; text-decoration: none; white-space: nowrap;
  padding: 12px 0; margin: -12px 0;
}
.nav-login:hover { color: #E9EAEC }

/* The footer. The links moved from #7C838C to #A9AEB6 and the headings down to
   #6E757E: at 14.5px the old value measured about 4.4:1 and the links are the
   content, so they had to rise and the labels could recede. */
.zshell-foot { background: #15171B; border-top: 1px solid #262A31 }
.foot-main {
  padding: clamp(48px,6vw,72px) clamp(24px,5vw,72px) clamp(36px,4vw,52px);
  display: flex; flex-wrap: wrap; column-gap: 72px; row-gap: 44px;
  align-items: flex-start;
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
.foot-brandblock { flex: 1 1 260px; min-width: 0; max-width: 34ch; display: flex; flex-direction: column; gap: 10px }
.foot-brand {
  font-family: 'Newsreader', Georgia, serif; font-size: 22px; font-weight: 600;
  letter-spacing: -.018em; color: #E9EAEC; text-decoration: none;
}
.foot-strap { font-size: 14.5px; line-height: 1.6; color: #8B9199 }

/* margin-left:auto is load-bearing. Relying on the brand block's flex-grow
   fails, because its max-width caps the growth and the leftover space then
   lands after the columns on a wide viewport. */
.foot-cols {
  /* flex-start, not flex-end. On a wide viewport margin-left:auto pins the
     whole block right and the block is content-sized, so this has no
     effect there. On a phone the block fills the width and the columns
     wrap: flex-end left them hugging the right edge under a left-aligned
     wordmark. */
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  /* 64px until the viewport drops below 600, then it tightens towards 28px
     by 390px, which is what lets three columns fit on a phone. A plain vw
     slope could not do both: 5vw also narrowed the gap at 900px and moved
     the footer on every page at tablet width. This leaves >=600px exactly
     as it was. */
  column-gap: clamp(28px, calc(64px - (600px - 100vw) * 0.2), 64px);
  row-gap: 36px;
  /* `flex: none` here meant the block could never shrink, so on a phone it
     held its full 419px and hung off the right edge: measured +29px of
     document overflow at 390px and +59px at 360px, with the Company column
     half off-screen. Mayank saw it on a phone, 2026-09-10. Shrinking is what
     lets the inner flex-wrap do its job. On a wide viewport margin-left:auto
     still pins the block right and nothing moves. */
  flex: 0 1 auto; min-width: 0; margin-left: auto;
}
.foot-col { display: flex; flex-direction: column; gap: 11px; min-width: 0 }
.foot-head {
  font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #6E757E; margin-bottom: 1px;
}
.foot-link { font-size: 14.5px; text-decoration: none; padding: 6px 0; margin: -6px 0; white-space: nowrap; color: #A9AEB6 }
.foot-link:hover { color: #E9EAEC }

.foot-legal {
  border-top: 1px solid #21252B;
  padding: 20px clamp(24px,5vw,72px) 26px;
  display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 14px;
  align-items: center;
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
.legal-left { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 5px }
.legal-copy { font-size: 13px; color: #6E757E }
.legal-mor  { font-size: 13px; line-height: 1.55; color: #5E656E }
.legal-links { margin-left: auto; flex: none; display: flex; flex-wrap: wrap; column-gap: 26px; row-gap: 8px }
.legal-link { font-size: 13px; text-decoration: none; padding: 6px 0; margin: -6px 0; white-space: nowrap; color: #6E757E }
.legal-link:hover { color: #A9AEB6 }