html{
  --bg:#ffffff;--surface:#ffffff;--surface-2:#f5f6f8;
  --ink:#1B1F3B;--muted:#5d5f66;--muted-2:#9a9aa1;--muted-3:#b4b4bb;
  --border:rgba(27,31,59,.10);
  --red:#E6261C;--cta:#1B1F3B;--cta-h:#070a18;
  --surface-3:#eceef2;--border-2:rgba(27,31,59,.16);
  --accent:#E6261C;
  --nav-max:1240px;
  --panel-max:1174px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* glass, same language as the collapsed nav pill: a translucent white
     over a heavy blur, with a bright top edge to catch the light */
  /* The FROST comes from the blur (see .nav-panels), not from a low tint, so
     the tint is set by contrast instead: over a dark hero .70 put the small
     uppercase labels near 1.8:1. .84 keeps the panel reliably light on any
     backdrop while the blur still clearly reads as glass. */
  --glass:rgba(255,255,255,.84);
  --glass-tile:rgba(255,255,255,.5);
  --glass-line:rgba(255,255,255,.75);
}
img{max-width:100%}
/* ============ NAV ============
   Rest state: full viewport width, transparent, no border/shadow/radius.
   Scrolled state: collapses to the existing 1240px glass pill, unchanged
   from production (bg rgba(255,255,255,.7), radius 14px, border, shadow).
   A third axis -- data-tone on <body> -- simulates the page telling the
   nav "you're sitting over a dark hero right now": rest-state text/icons/
   logo invert to light. The scrolled pill ignores tone; its own opaque
   glass background is always legible regardless of what's behind it. */
/* sticky, not fixed: at full width the bar occupies its own space so it
   never covers the top of the hero. Once scrolled it sticks at top:0 and
   the page runs underneath, which is the floating-pill behaviour. */
.nav.nav{position:sticky;top:0;z-index:60;padding:14px 0 0}
.nav-in.nav-in{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  width:calc(100% - 32px);max-width:100%;margin:0 auto;
  background:rgba(255,255,255,0);
  border:1px solid rgba(0,0,0,0);
  border-radius:0px;
  padding:10px clamp(16px,2.4vw,28px);
  box-shadow:0 0 0 0 rgba(20,28,46,0);
  transition:max-width .5s var(--ease),background .5s var(--ease),
             border-color .5s var(--ease),border-radius .5s var(--ease),
             padding .5s var(--ease),box-shadow .5s var(--ease),
             width .5s var(--ease);
}
.nav.nav.scrolled .nav-in.nav-in{
  max-width:calc(var(--nav-max) - 32px);
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-color:var(--border);
  border-radius:14px;
  padding:8px 16px;
  box-shadow:0 10px 30px -16px rgba(20,28,46,.22),0 2px 6px -2px rgba(20,28,46,.08);
}
.nav-left.nav-left{display:flex;align-items:center;gap:26px;min-width:0}
.logo.logo{display:inline-flex;align-items:center;line-height:0;flex:none}
.logo.logo img{height:18px;width:auto;display:block}
.logo.logo .ll.ll{display:none}
.nav-links.nav-links{display:flex;align-items:center;gap:4px}
/* direct-child only: a descendant selector here also captures every link
   inside the mega-menu panels, which overrode their colour and padding */
.nav-links.nav-links > a{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .3s var(--ease);padding:8px 6px}
.nav-links.nav-links > a:hover{color:var(--ink)}
.nav-right.nav-right{display:flex;align-items:center;gap:12px}
/* ============ NAV CATEGORIES (mega menu) ============ */
/* static, so the absolutely-positioned panel resolves against .nav-in.nav-in */
.navcat{position:static}
.navcat-trig{
  all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  font-size:14px;font-weight:600;color:var(--muted);padding:8px 10px;border-radius:9px;
  background:transparent;
  transition:color .3s var(--ease),background .2s var(--ease);
}
.navcat-trig:hover{color:var(--ink)}
/* open trigger keeps a lit background so the panel reads as belonging to it */
.navcat.open .navcat-trig{color:var(--ink);background:var(--surface-3)}
.navcat-chev{width:11px;height:11px;transition:transform .3s var(--ease);flex:none}
.navcat.open .navcat-chev{transform:rotate(180deg)}
/* Panel is centred on ITS OWN trigger and clamped to the viewport, both set
   from JS as --panel-x. Page-centring it looked detached at wide viewports:
   the nav links sit left, so the trigger fell outside the panel's span
   entirely and the caret had nowhere valid to point. Radius matches the
   collapsed pill exactly (14px); concentric: 14 = card 6 + 8 padding. */
.navcat-panel{
  position:absolute;top:calc(100% + 8px);left:var(--panel-x,0px);
  transform:translateY(-8px) scale(.985);
  transform-origin:var(--caret-x,50%) top;
  /* --panel-max is the nav's own content width in the collapsed pill state
     (1240 container - 32 gutter - 2 border - 32 padding). Capping every
     panel to it is what lets them all left-align to the nav content edge
     instead of falling back to a viewport gutter. */
  width:min(var(--panel-max),calc(100vw - 90px));
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 32px 80px -28px rgba(20,28,46,.38),0 6px 16px -6px rgba(20,28,46,.12),
             inset 0 1px 0 var(--glass-line);
  padding:8px;display:grid;grid-template-columns:1fr .34fr;gap:16px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s;
}
/* caret tying the panel back to whichever trigger opened it; --caret-x is
   set from JS as the trigger's centre measured against .nav-in.nav-in, and has to
   be recomputed on scroll because the pill collapse moves the triggers */
.navcat-panel::before{
  content:"";position:absolute;top:-6px;left:var(--caret-x,50%);
  width:12px;height:12px;margin-left:-6px;pointer-events:none;
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border-left:1px solid var(--border);border-top:1px solid var(--border);
  border-radius:3px 0 0 0;transform:rotate(45deg);
}
/* open state lives on the panel now that it is no longer nested in .navcat */
.navcat-panel.open{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear 0s;
}
/* cards stretch to the full row height so there is never dead space above or
   below the photos; min-height on the card is what actually sets the row */
.navcat-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* Photo IS the card: image fills it edge to edge, title + description sit
   ON the image over a bottom scrim. Nothing stacked below the picture. */
.navcat-card{
  position:relative;display:block;height:100%;min-height:248px;border-radius:6px;overflow:hidden;
  background:var(--surface-2);text-decoration:none;color:inherit;isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.navcat-card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -22px rgba(20,28,46,.5)}
.navcat-card-img{position:absolute;inset:0;overflow:hidden}
.navcat-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.navcat-card:hover .navcat-card-img img{transform:scale(1.06)}
.navcat-card-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,14,24,.94) 0%,rgba(10,14,24,.8) 24%,rgba(10,14,24,.38) 50%,rgba(10,14,24,.08) 76%,rgba(10,14,24,0) 100%)}
.navcat-card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px}
.navcat-card-title{display:block;font-size:15px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.navcat-card-desc{display:block;margin:5px 0 0;font-size:12px;line-height:1.4;color:rgba(255,255,255,.76);text-wrap:pretty}
/* centred rather than top-aligned: with only 3 items against the card block
   a top-aligned list left a chunk of the column visibly empty */
.navcat-list{display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--border);padding:4px 12px 4px 20px}
.navcat-list-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:0 8px 8px}
/* padding kept tight so the column stays shorter than the 230px cards and
   the cards, not the list, decide the row height */
.navcat-item{
  display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;
  min-height:48px;text-decoration:none;color:var(--ink);
  transition:background .18s var(--ease);
}
.navcat-item:hover{background:var(--surface-2)}
.navcat-item-ic{width:36px;height:36px;flex:none;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.navcat-item-ic svg{width:17px;height:17px}
.navcat-item-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.navcat-item-title{font-size:14px;font-weight:700;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.navcat-item-desc{font-size:12px;line-height:1.4;color:var(--muted);text-wrap:pretty}
.navcat-item-ar{width:16px;height:16px;flex:none;opacity:0;transform:translateX(-4px);transition:opacity .18s var(--ease),transform .18s var(--ease);color:var(--muted-2)}
.navcat-item:hover .navcat-item-ar{opacity:1;transform:translateX(0)}
/* ---- Product panel: three columns (Features / Metrics / Education).
   Features and Metrics run two-up so 8 and 15 items stay short vertically
   instead of becoming one very tall list; Education keeps a single column. */
/* Features gets the widest track: its titles are the longest ("Smart
   Performance Testing"), while the metric names are mostly one short word */
.navcat-panel.is-product{width:min(var(--panel-max),calc(100vw - 90px));grid-template-columns:1.18fr 1.10fr .56fr;gap:0}
/* ---- Resources: two feature cards, three below, three in a side rail ---- */
.navcat-panel.is-resources{width:min(980px,var(--panel-max),calc(100vw - 90px));grid-template-columns:1fr .40fr;gap:0}
.rsc-main{padding:6px 14px;min-width:0;display:grid;gap:10px;align-content:start}
.rsc-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rsc-small{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
/* same shape as the Solutions rail: hairline divider, uppercase label, then
   borderless rows, vertically centred against the block on the left */
.rsc-side{border-left:1px solid var(--border);padding:6px 8px 6px 16px;min-width:0;
  display:flex;flex-direction:column;justify-content:center}
.rsc-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;
  min-height:186px;padding:14px;border:1px solid var(--border);border-radius:6px;background:var(--glass-tile);
  text-decoration:none;color:inherit;isolation:isolate;
  transition:transform .25s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease)}
/* faint graph-paper texture, faded out diagonally, so the two lead cards read
   as feature tiles rather than just bigger list rows */
.rsc-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.75;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(215deg,#000,transparent 62%);mask-image:linear-gradient(215deg,#000,transparent 62%)}
.rsc-card:hover{transform:translateY(-2px);border-color:var(--border-2);box-shadow:0 16px 32px -20px rgba(20,28,46,.4)}
/* one quiet illustration carries the card; it fills the space an icon left
   empty without adding anything else to read */
.rsc-viz{display:block;flex:1;min-height:0;display:flex;align-items:center}
.rsc-viz svg{width:100%;height:auto;display:block;
  transition:transform .35s var(--ease)}
.rsc-card:hover .rsc-viz svg{transform:translateY(-2px)}
.rsc-card-body{display:flex;flex-direction:column;gap:3px}
.rsc-card-title{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.rsc-card-desc{font-size:12px;line-height:1.4;color:var(--muted);text-wrap:pretty}
/* Science is four peer pages with no sub-grouping and no hub page to link a
   header to, so it is a single 2x2 block on a narrower panel */
/* 570 = 2 x (icon 34 + gap 10 + longest description 197 + item padding 16)
   + column gap + column/panel padding. Sized to the content, no slack. */
.navcat-panel.is-science{width:min(570px,var(--panel-max),calc(100vw - 90px));grid-template-columns:1fr;gap:0}
.navcat-panel.is-science .npcol{padding:6px}
/* tight column padding: the panel is capped to the nav content width, so
   horizontal room comes out of padding rather than out of type size */
.npcol{padding:6px 14px;min-width:0}
.npcol + .npcol{border-left:1px solid var(--border)}
.npcol:first-child{padding-left:8px}
.npcol:last-child{padding-right:8px}
.npcol-head{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:2px 10px 12px;transition:color .18s var(--ease)}
a.npcol-head:hover{color:var(--ink)}
.npcol-head svg{width:12px;height:12px;opacity:0;transform:translateX(-3px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
a.npcol-head:hover svg{opacity:1;transform:translateX(0)}
.npcol-head.is-static{cursor:default}
.npgrid{display:grid;gap:1px;align-content:start}
/* row flow by default, so item 2 sits to the RIGHT of item 1 */
.npgrid-2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6px}
/* the all-15 metric list flows down each sub-column instead, because it is
   ordered by family (Engines, Thresholds, Fuel, Lactate dynamics, Body) and
   row-wise filling scattered those groups across both columns */
.npgrid-col{grid-auto-flow:column;grid-template-rows:repeat(var(--rows,8),auto)}
/* the eighth tile out to the hub: no description, so the row re-centres and
   the title takes the size that description would otherwise have earned */
.npitem.is-all{align-items:center}
.npitem.is-all .npitem-ic{background:var(--ink);border-color:var(--ink);color:#fff}
.npitem.is-all .npitem-title{color:var(--ink);font-size:15px}
.npitem{display:flex;align-items:flex-start;gap:10px;padding:9px 8px;border-radius:11px;text-decoration:none;color:var(--ink);transition:background .16s var(--ease)}
.npitem:hover{background:var(--surface-2)}
.npitem-ic{width:34px;height:34px;flex:none;border-radius:10px;background:var(--glass-tile);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);margin-top:1px}
.npitem-ic svg{width:18px;height:18px}
.npitem-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.npitem-title{font-size:13.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.npitem-desc{font-size:12px;line-height:1.35;color:var(--muted)}
/* the light --surface-3 lit-state would put white text on a light pill here,
   so over a dark hero the open trigger gets a translucent white instead */
.divid.divid{width:1px;height:24px;background:var(--border);transition:background .3s var(--ease)}
/* plain text links in the nav right side (Contact us, Log in) */
.nav-txt{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;padding:0 8px;height:32px;display:inline-flex;align-items:center;white-space:nowrap;transition:color .3s var(--ease)}
.nav-txt:hover{color:var(--ink)}
.cta.cta{display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:99px;background:var(--cta);color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:background .18s,transform .18s}
.cta.cta:hover{background:var(--cta-h);transform:translateY(-1px)}
/* ---- rest-state tone inversion: /* ===================== MOBILE (drill-down sheet) =====================
   Pattern researched from Stripe and Webflow, which both use a full-screen
   sheet with DRILL-DOWN levels rather than accordions. With 8 features, 8
   metrics and 3 education items, an accordion root would be an enormous
   scroll; drilling keeps every screen short. Webflow's header is the better
   variant (back + current section name + close), so that is what is used. */
/* all:unset MUST come before display, or it resets display back to inline
   and the burger leaks onto desktop */
.burger{all:unset;display:none;cursor:pointer;width:44px;height:44px;border-radius:11px;
  align-items:center;justify-content:center;flex:none;color:var(--ink);
  transition:background .18s var(--ease)}
.burger:hover{background:var(--surface-3)}
.burger span{display:block;width:19px;height:2px;border-radius:2px;background:currentColor;
  position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;
  border-radius:2px;background:currentColor}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.msheet{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  height:100vh;height:100dvh;background:var(--bg);
  transform:translateY(8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s linear .24s}
.msheet.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility 0s linear 0s}
.msheet-head{flex:none;display:flex;align-items:center;gap:8px;height:64px;padding:0 12px;
  border-bottom:1px solid var(--border)}
.msheet-head .logo.logo{margin-left:4px}
.msheet-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.msheet-ico{all:unset;cursor:pointer;width:44px;height:44px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background .18s var(--ease)}
.msheet-ico:hover{background:var(--surface-3)}
.msheet-ico svg{width:20px;height:20px}
.msheet-close{margin-left:auto}
/* back button and section title only exist below the root level */
.msheet:not([data-level="root"]) .msheet-logo{display:none}
.msheet[data-level="root"] .msheet-back,
.msheet[data-level="root"] .msheet-title{display:none}
.msheet-body{position:relative;flex:1;min-height:0}
.mlevel{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px 16px calc(28px + env(safe-area-inset-bottom));
  transform:translateX(100%);opacity:0;visibility:hidden;
  transition:transform .28s var(--ease),opacity .22s var(--ease),visibility 0s linear .28s}
.mlevel.active{transform:none;opacity:1;visibility:visible;
  transition:transform .28s var(--ease),opacity .22s var(--ease),visibility 0s linear 0s}
/* the level you came from parks slightly to the left, so going back reads as
   returning rather than as a new screen arriving */
.mlevel.behind{transform:translateX(-22%);opacity:0}
.mrow{display:flex;align-items:center;gap:13px;width:100%;min-height:58px;
  padding:11px 6px;background:none;border:0;border-bottom:1px solid var(--border);
  text-align:left;text-decoration:none;color:var(--ink);cursor:pointer;font:inherit;
  transition:background .15s var(--ease)}
.mrow:active{background:var(--surface-2)}
.mrow-ic{width:38px;height:38px;flex:none;border-radius:11px;background:var(--surface-2);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.mrow-ic svg{width:19px;height:19px}
.mrow-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mrow-title{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.mrow-desc{font-size:13px;line-height:1.35;color:var(--muted)}
.mrow-chev{width:18px;height:18px;flex:none;color:var(--muted-2);margin-left:auto}
.mrow.is-lead .mrow-title{font-size:17px}
/* the "see all" row reads as the end of a group, not another sibling item */
.mrow.is-all{border-bottom:0}
.mrow.is-all .mrow-title{color:var(--ink)}
.mrow.is-all .mrow-ic{background:var(--ink);border-color:var(--ink);color:#fff}
.mgroup{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);padding:24px 6px 6px}
.mlevel > .mgroup:first-child{padding-top:10px}
/* secondary links + CTA sit in flow under the last category, so nothing is
   pinned and no gap opens up underneath the menu */
.mtail{display:flex;flex-direction:column;padding:14px 6px 0}
.mlink{display:flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:600;
  color:var(--muted);text-decoration:none;transition:color .15s var(--ease)}
.mlink:active{color:var(--ink)}
.mcta{margin-top:14px;justify-content:center;height:50px;font-size:15.5px}
body.mlock{overflow:hidden}
@media (max-width:999px){
  .nav-links.nav-links,.nav-txt,.divid.divid{display:none}
  .burger{display:inline-flex}
  .nav-panels{display:none}
  .nav-in.nav-in{padding:8px 14px}
  .nav-right.nav-right{gap:6px}
  .nav-right.nav-right .cta.cta{height:38px;padding:0 15px;font-size:13.5px}
}
@media (min-width:1000px){ .msheet{display:none} }
/* ============ demo scaffolding (not part of the shipped nav) ============ */
.hero-demo{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:0 16px 10vh;padding-top:0}
/* Parked drill levels (.mlevel translateX off-canvas) extend the page's
   scroll width on pages that do not set body{overflow-x:hidden} themselves
   (native CMS templates). Clip them at the sheet, where they belong. */
.msheet{overflow:hidden}

/* Native CMS template pages (webinar, videos) do not load a page bundle that
   sets the body font, so the injected nav fell back to the platform default
   and read heavier than Manrope. Carry the font with the nav itself. */
.nav,.nav *,.msheet,.msheet *,.navcat-panel,.navcat-panel *{font-family:'Manrope',-apple-system,system-ui,sans-serif}