@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
/* Shared ONOTO header — extracted from the main site so static pages render the identical header. */
/* Tokens live in onoto-tokens.css, which every page loads before this file.
   Redeclaring them here would shadow its responsive overrides. */
.redesign-home,
.onoto-header,
.onoto-footer,
.onoto-cookie-banner {
  font-family: var(--onoto-sans);
}
.redesign-home *,
.onoto-header *,
.onoto-footer *,
.onoto-cookie-banner * {
  box-sizing: border-box;
}
.redesign-home button,
.onoto-header button,
.onoto-cookie-banner button {
  font: inherit;
}
.redesign-home a,
.onoto-header a,
.onoto-footer a {
  color: inherit;
  text-decoration: none;
}
.onoto-arrow {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.4;
  transition: transform 220ms ease;
}
a:hover .onoto-arrow,
button:hover .onoto-arrow {
  transform: translate(2px, -2px);
}
.onoto-chevron {
  width: 9px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 200ms ease;
}
/* Header */
.onoto-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  right: 0;
  left: 0;
  padding-inline: 0;
  pointer-events: none;
}
.onoto-header-shell {
  width: var(--onoto-shell);
  height: 62px;
  margin-inline: auto;
  padding: 0 9px 0 20px;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  border: 1px solid transparent;
  background: rgba(7, 12, 11, 0.6);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(22px) saturate(130%);
  transition: color 320ms ease, background 320ms ease, border-color 320ms ease;
  pointer-events: auto;
}
.onoto-header.is-dark .onoto-header-shell {
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.onoto-header.is-light .onoto-header-shell {
  border-color: rgba(7, 12, 11, 0.14);
  background: rgba(241, 240, 233, 0.88);
  color: var(--onoto-ink);
  box-shadow: 0 18px 60px rgba(7, 12, 11, 0.1);
}
.onoto-logo {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
}
.onoto-logo.is-dark {
  color: var(--onoto-ink);
}
.onoto-logo-mark {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  gap: 3px;
}
.onoto-logo-mark i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
  transition: transform 260ms ease;
}
.onoto-logo:hover .onoto-logo-mark i:nth-child(1) { transform: rotate(45deg) translate(-1px, -1px); }
.onoto-logo:hover .onoto-logo-mark i:nth-child(2) { transform: rotate(45deg) translate(1px, -1px); }
.onoto-logo:hover .onoto-logo-mark i:nth-child(3) { transform: rotate(45deg) translate(-1px, 1px); }
.onoto-logo:hover .onoto-logo-mark i:nth-child(4) { transform: rotate(45deg) translate(1px, 1px); }
.onoto-desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
  font-weight: 500;
}
.onoto-desktop-nav > a,
.onoto-nav-group > button {
  position: relative;
  padding: 22px 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.onoto-desktop-nav > a::after,
.onoto-nav-group > button::after {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: '';
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}
.onoto-desktop-nav > a:hover::after,
.onoto-nav-group:hover > button::after {
  transform: scaleX(1);
  transform-origin: left;
}
.onoto-nav-group {
  position: relative;
}
.onoto-nav-group > button {
  display: flex;
  align-items: center;
  gap: 7px;
}
.onoto-nav-group:hover .onoto-chevron {
  transform: rotate(180deg);
}
.onoto-nav-menu {
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  width: 244px;
  padding: 9px;
  border: 1px solid rgba(7, 12, 11, 0.16);
  background: var(--onoto-paper);
  box-shadow: 0 20px 70px rgba(7, 12, 11, 0.22);
  color: var(--onoto-ink);
  opacity: 0;
  transform: translate(-50%, 8px);
  visibility: hidden;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}
.onoto-nav-group:hover .onoto-nav-menu,
.onoto-nav-group:focus-within .onoto-nav-menu {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}
.onoto-nav-menu > span {
  display: block;
  padding: 10px 12px 9px;
  border-bottom: 1px solid var(--onoto-line);
  color: #777f7c;
  font-family: var(--onoto-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}
.onoto-nav-menu a {
  display: flex;
  min-height: 40px;
  padding: 0 11px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(7, 12, 11, 0.08);
  font-size: 12px;
}
.onoto-nav-menu a:last-child {
  border-bottom: 0;
}
.onoto-nav-menu a:hover {
  background: #e3e2da;
}
.onoto-nav-menu .onoto-arrow {
  width: 11px;
  height: 11px;
}
.onoto-header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  font-weight: 500;
}
.onoto-header-login {
  opacity: 0.8;
}
.onoto-header-login:hover {
  opacity: 1;
}
.onoto-header-cta {
  display: inline-flex;
  height: 44px;
  padding: 0 17px;
  align-items: center;
  gap: 6px;
  background: var(--onoto-mint);
  color: var(--onoto-ink) !important;
  font-weight: 700;
  transition: background 200ms ease, transform 200ms ease;
}
.onoto-header-cta:hover {
  background: #8ce7da;
  transform: translateY(-1px);
}
.onoto-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.onoto-menu-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  margin: 5px 0;
  background: currentColor;
  transition: transform 200ms ease;
}
.onoto-header.menu-open .onoto-menu-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
.onoto-header.menu-open .onoto-menu-toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }
.onoto-mobile-nav {
  display: none;
}
.hero-sidebar .onoto-logo-mark {
  grid-template-columns: repeat(2, 4px);
  gap: 2px;
}
.hero-sidebar .onoto-logo-mark i {
  width: 4px;
  height: 4px;
}
.hero-priority-card > button .onoto-arrow {
  width: 8px;
  height: 8px;
}
.onoto-nav-menu > span,
.onoto-footer-links h4 {
  font-family: var(--onoto-sans);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 1120px) {
  .onoto-header-shell {
    grid-template-columns: 155px 1fr auto;
  }
  .onoto-desktop-nav { gap: 20px; }
  .onoto-header-login { display: none; }
}
@media (max-width: 900px) {
  .onoto-header {
    top: 12px;
    padding-inline: 0;
  }
  .onoto-header-shell {
    height: 58px;
    grid-template-columns: 1fr auto;
  }
  .onoto-desktop-nav,
  .onoto-header-cta,
  .onoto-header-login {
    display: none;
  }
  .onoto-menu-toggle { display: block; }
  .onoto-mobile-nav {
    position: absolute;
    top: 66px;
    right: 12px;
    left: 12px;
    max-height: calc(100vh - 90px);
    padding: 15px;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.16);
    background: #0a100f;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease;
  }
  .onoto-header.menu-open .onoto-mobile-nav {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .onoto-mobile-nav > div {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .onoto-mobile-nav strong {
    margin-bottom: 5px;
    color: var(--onoto-mint);
    font-family: var(--onoto-sans);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
  }
  .onoto-mobile-nav a {
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.72);
    font-size: 14px;
  }
  .onoto-mobile-nav > div > a:first-child {
    color: var(--onoto-mint);
    font-family: var(--onoto-sans);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: none;
  }
}
@media (max-width: 680px) {
  .onoto-header-shell { padding-left: 14px; }
  .onoto-logo { font-size: 13px; }
  .onoto-logo-mark { grid-template-columns: repeat(2,6px); gap: 3px; }
  .onoto-logo-mark i { width: 6px; height: 6px; }
}
@media (max-width: 900px) {
  .onoto-mobile-nav strong,
  .onoto-mobile-nav > div > a:first-child {
    font-family: var(--onoto-sans);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Mobile chrome pass.
   The pill, its toggle and the drawer are the only interface shared by all ten
   static pages, so the touch work lives here once. Every rule below sits inside
   a media block and comes last in the file, so it wins over the earlier mobile
   blocks without editing them, and desktop is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* The logo was a 15px-tall hit area sitting in a 58px pill. Grow the box,
     not the type — the mark and wordmark stay exactly where they were. */
  .onoto-logo {
    min-height: 44px;
    padding-right: 12px;
    -webkit-tap-highlight-color: transparent;
  }

  /* 44x44 icon button with the two bars optically centred in the square. */
  .onoto-menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .onoto-menu-toggle span {
    margin: 4px 0;
  }
  .onoto-header.menu-open .onoto-menu-toggle {
    border-color: var(--onoto-mint);
    color: var(--onoto-mint);
  }

  /* Dim the page under an open drawer so the 3D scenes stop reading through it.
     It hangs off the header, not the pill — the pill's backdrop-filter would
     make it the containing block and trap the scrim inside 58px. Purely
     visual: it never takes a tap, the toggle stays the way out. */
  .onoto-header.menu-open::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background: rgba(7, 12, 11, 0.5);
    content: '';
    pointer-events: none;
  }

  /* Drawer: shares the pill's column, capped at a readable panel width, scrolls
     inside itself when the list is taller than the viewport, and keeps its last
     row clear of the home indicator. Opening is click-driven (the .menu-open
     class), so nothing here depends on hover.

     It used to hand-compute right: calc((100vw - shell) / 2), which is wrong on
     any viewport with a classic (non-overlay) scrollbar: 100vw counts the
     scrollbar, but .onoto-header is position:fixed;left:0;right:0, so the
     containing block that offset resolves against does not. The drawer's right
     edge landed half a scrollbar width inside the pill's — measured at 7.5px
     out against a 15px scrollbar.

     The fix is the same idea as margin-inline:auto — resolve against the real
     containing block instead of against 100vw — but written as an offset rather
     than a centring, and the difference matters. The pill is `width: shell;
     margin-inline: auto`, so its right edge sits (containingBlock - shell) / 2
     from the right, which is exactly what 50% - shell/2 evaluates to. The
     drawer is capped at 420px, so it is narrower than the pill on anything
     above ~444px; centring it there would leave BOTH its edges 124px off the
     pill at 700px, which is a bigger miss than the bug being fixed. Anchoring
     the right edge instead keeps the panel under the button that opened it at
     every width, and lands on the pill's edge exactly. */
  .onoto-mobile-nav {
    right: calc(50% - var(--onoto-shell) / 2);
    left: auto;
    width: min(var(--onoto-shell), 420px);
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
  }

  /* One column at every touch width. The file used to declare 1fr 1fr at 680
     and 1fr again at 430, both of which lost to this rule on source order —
     three rules, one winner, and the two dead ones read as a ladder that
     disagreed with itself. They are gone; this is the only column rule left.
     Two columns never worked here anyway: auto-placement put the nine-item
     Solutions list beside the four-item Company list, so the right-hand column
     ran out of rows and left a ~364px hole down the side of the drawer. */
  .onoto-header.menu-open .onoto-mobile-nav {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .onoto-mobile-nav > div {
    gap: 0;
  }

  /* Section anchoring. The drawer is a scroll region, so each group's caption
     sticks to the top of the region while that group's own rows pass under it.
     Sticky is scoped to the group's <div>, so a caption is pushed out by the
     next one instead of stacking up. Needs an opaque background — the panel's
     own colour, so nothing appears to change. */
  .onoto-mobile-nav strong,
  .onoto-mobile-fold > summary {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #0a100f;
  }

  /* Long groups fold. Fifteen links at 52px under four captions made the drawer
     a 1,040px scroll at 320px — you opened the nav and were immediately in a
     list with no horizon. Solutions is nine of those fifteen, so it opens
     closed: the drawer now fits the screen, and every link is still in the DOM
     one tap away. <details> gives the open/close semantics, keyboard support
     and screen-reader state for free. */
  .onoto-mobile-fold {
    display: block;
  }
  .onoto-mobile-fold > summary {
    display: flex;
    min-height: 52px;
    padding: 8px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--onoto-mint);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    list-style: none;
    cursor: pointer;
  }
  .onoto-mobile-fold > summary::-webkit-details-marker {
    display: none;
  }
  .onoto-mobile-fold > summary .onoto-chevron {
    width: 11px;
    height: 7px;
    flex: none;
  }
  .onoto-mobile-fold[open] > summary .onoto-chevron {
    transform: rotate(180deg);
  }
  .onoto-mobile-fold > summary:active {
    background: rgba(255, 255, 255, 0.07);
  }
  .onoto-mobile-fold > summary:focus-visible {
    outline: 1px solid var(--onoto-mint);
    outline-offset: -2px;
  }
  /* Folded rows sit one step in, so the group reads as a group once it opens. */
  .onoto-mobile-fold > a {
    padding-left: 28px;
  }

  /* Group caption keeps its small mint voice; only its box grows. */
  .onoto-mobile-nav strong {
    display: block;
    margin-bottom: 0;
    padding: 12px 16px 6px;
  }

  /* Every row in the drawer is a full-width 52px target on a hairline rule.
     The second selector is the Platform link, which is the first child of its
     group and was previously styled as a 12px caption. */
  .onoto-mobile-nav a,
  .onoto-mobile-nav > div > a:first-child {
    width: auto;
    min-height: 52px;
    padding: 8px 16px;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .onoto-mobile-nav a:active,
  .onoto-mobile-nav > div > a:first-child:active {
    background: rgba(255, 255, 255, 0.07);
  }
  .onoto-mobile-nav a:focus-visible {
    outline: 1px solid var(--onoto-mint);
    outline-offset: -2px;
  }

  /* Book a demo closes the list as a real button instead of one more link. */
  .onoto-mobile-nav a.onoto-mobile-demo {
    min-height: 52px;
    margin: 2px 16px 0;
    padding: 0 18px;
    justify-content: center;
    border-bottom: 0;
    background: var(--onoto-mint);
    color: var(--onoto-ink);
    font-weight: 700;
  }
}

@media (max-width: 680px) {
  /* Drawer rows share the left edge of the logo, which sits at 14px here. */
  .onoto-mobile-nav strong,
  .onoto-mobile-fold > summary {
    padding-right: 14px;
    padding-left: 14px;
  }
  .onoto-mobile-nav a,
  .onoto-mobile-nav > div > a:first-child {
    padding-right: 14px;
    padding-left: 14px;
  }
  .onoto-mobile-fold > a {
    padding-left: 26px;
  }
  .onoto-mobile-nav a.onoto-mobile-demo {
    margin-right: 14px;
    margin-left: 14px;
    padding: 0 16px;
  }
}

/* ---------------------------------------------------------------------------
   Hide the pill on the way down, bring it back on the way up.
   58px of fully opaque chrome is 7% of a 390x844 screen held permanently, and
   because it is opaque it visibly slices headings in half as they scroll under
   it. Scrolling down is a request for the page, so it gets the page; the first
   upward flick is a request for navigation, so the nav comes straight back.
   Below 900px only — the desktop header never moves.

   .is-hidden and this transform are duplicated verbatim in the React header so
   the static pages and the app hide by exactly the same amount. Keep them in
   step if either changes.

   No will-change here on purpose: will-change:transform would make
   .onoto-header a containing block for fixed-position descendants even while
   the transform is none, and that would trap the .menu-open::before scrim
   inside the 58px pill instead of covering the viewport.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .onoto-header {
    transition: transform 260ms cubic-bezier(.4, 0, .2, 1);
  }
  .onoto-header.is-hidden {
    transform: translateY(calc(-100% - 20px));
  }
  /* An open drawer hangs off the header, so the header has to stay put. */
  .onoto-header.menu-open.is-hidden {
    transform: none;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .onoto-mobile-nav,
  .onoto-menu-toggle span,
  .onoto-arrow,
  .onoto-header {
    transition: none;
  }
  /* Reduced motion means no travelling chrome at all, not the same journey
     taken instantly: the header simply stays where it is. */
  .onoto-header.is-hidden {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Touch has no hover, but it fakes one: the first tap applies :hover and it
   stays applied until the next tap lands somewhere else. Every lift, nudge and
   underline-wipe below is decoration, so on a touch pointer it is dead weight
   that leaves things looking stuck. The hover-opened dropdown is deliberately
   left alone — there it is the affordance, not the decoration.
   --------------------------------------------------------------------------- */
@media (hover: none) {
  a:hover .onoto-arrow,
  button:hover .onoto-arrow,
  .onoto-logo:hover .onoto-logo-mark i:nth-child(1),
  .onoto-logo:hover .onoto-logo-mark i:nth-child(2),
  .onoto-logo:hover .onoto-logo-mark i:nth-child(3),
  .onoto-logo:hover .onoto-logo-mark i:nth-child(4),
  .onoto-header-cta:hover {
    transform: none;
  }
  .onoto-header-cta:hover {
    background: var(--onoto-mint);
  }
  .onoto-desktop-nav > a:hover::after,
  .onoto-nav-group:hover > button::after {
    transform: scaleX(0);
  }
}