.eFwegy68ytREFbtQQgPs {
  position: relative;
  display: block;
}

.okG64uzOZy4WlTxGJVhP {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: visible;
}

/* The wordmark fades in and out; nothing changes shape. */
.IQ749_lKcJ_9kgvLQtaX {
  opacity: 0;
  transition: opacity 450ms ease;
}

.XFz5a2MQ6nLQrKNvcYNt .IQ749_lKcJ_9kgvLQtaX {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .IQ749_lKcJ_9kgvLQtaX {
    transition: none;
  }
}

/*
 * A code component's Shadow DOM is isolated from the host page's styles
 * (Webflow docs: "Page styles won't affect components") — so unlike the
 * prototype, which gets `a`/`button`/box-sizing resets from its own global
 * index.css, this component has to carry its own minimal reset instead of
 * assuming the Webflow site provides one.
 */
.Q1vgtJ9brddxkBimVGNa,
.Q1vgtJ9brddxkBimVGNa *,
.Q1vgtJ9brddxkBimVGNa *::before,
.Q1vgtJ9brddxkBimVGNa *::after {
  box-sizing: border-box;
}

.Q1vgtJ9brddxkBimVGNa a {
  color: inherit;
  text-decoration: none;
}

.Q1vgtJ9brddxkBimVGNa button {
  font: inherit;
  color: inherit;
  background: none;
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.Q1vgtJ9brddxkBimVGNa ul {
  list-style: none;
}

.Q1vgtJ9brddxkBimVGNa {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: center;
  height: 66px;
  margin-top: 40px;
  padding-inline: var(--page-gutter, 64px);
  /* The pill's shadow, drawn here so it follows the pill's shape as it grows in (GlassHeader intro). */
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.04)) drop-shadow(0 6px 12px rgb(0 0 0 / 0.07));
}

/*
 * Tone: each part sets its own colour from what's behind it (data-tone).
 * Text, icons and outlines all follow currentColor.
 */
.Q1vgtJ9brddxkBimVGNa [data-tone] {
  --tone: var(--text-primary-rgb, 23 23 23); /* soft black, #171717 */
  pointer-events: auto;
  transition:
    color 300ms ease,
    border-color 300ms ease,
    background-color 200ms ease;
}

.Q1vgtJ9brddxkBimVGNa [data-tone='light'] {
  --tone: var(--text-inverse-rgb, 255 255 255);
}

/* Centred on the page, like the design. */
.fu3v9r5h4m7QvX2ZwDCA {
  position: absolute;
  left: 50%;
  display: flex;
  height: 64px;
  /* Centred with `translate` (not `transform`) so the breathe scale
     happens around the pill's own centre and it grows evenly on all sides. */
  translate: -50% 0;
  /* Raleway (the site face), SemiBold. */
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  font-size: var(--type-nav-size, 17px);
  line-height: var(--type-nav-lh, var(--type-line-height-cta, 20px));
  font-weight: var(--type-nav-weight, 600);
  letter-spacing: var(--type-nav-ls, 0.2px);
  white-space: nowrap;
  border-radius: 45px;
}

/*
 * Always solid white (.pillSolid), over the hero too, with a very soft
 * shadow and soft-black text (after Mastercard.com's menu).
 */
.fu3v9r5h4m7QvX2ZwDCA {
  background-color: var(--background-default, #ffffff);
  transition:
    scale 1100ms cubic-bezier(0.45, 0, 0.25, 1),
    background-color 400ms ease;
}

.fu3v9r5h4m7QvX2ZwDCA.GZbryo7IJMJlwSbDqNx5 {
  background-color: var(--background-default, #ffffff);
}

/*
 * While the menu is hovered (or has focus): solid white, wherever it is,
 * with soft-black text and no outline (over the hero too).
 */
.fu3v9r5h4m7QvX2ZwDCA:is(:hover, :focus-within) {
  background-color: var(--background-default, #ffffff);
}

.Q1vgtJ9brddxkBimVGNa .fu3v9r5h4m7QvX2ZwDCA:is(:hover, :focus-within) [data-tone] {
  --tone: var(--text-primary-rgb, 23 23 23);
}

.Q1vgtJ9brddxkBimVGNa .fu3v9r5h4m7QvX2ZwDCA:is(:hover, :focus-within) .IV2EBekHps5isWRGVy7v {
  border-color: transparent;
}

/*
 * Breathe: the pill swells subtly while the mouse is in the header band
 * (breathe in) and settles back more slowly when it leaves (breathe out).
 */
.fu3v9r5h4m7QvX2ZwDCA {
  transition:
    scale 1100ms cubic-bezier(0.45, 0, 0.25, 1),
    background-color 400ms ease;
}

.fu3v9r5h4m7QvX2ZwDCA.x1dDL6pUPe7cEbnUTksP {
  scale: 1.05;
  transition:
    scale 700ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .fu3v9r5h4m7QvX2ZwDCA,
  .fu3v9r5h4m7QvX2ZwDCA.x1dDL6pUPe7cEbnUTksP {
    scale: none;
    transition: none;
  }
}

/* Inverse of the tone: the colour of rolled-up text on a filled cell. */
.Q1vgtJ9brddxkBimVGNa [data-tone] {
  --tone-inverse: var(--text-inverse-rgb, 255 255 255);
}

.Q1vgtJ9brddxkBimVGNa [data-tone='light'] {
  --tone-inverse: var(--text-primary-rgb, 23 23 23); /* soft black */
}

.ftODnXRRplG2HYl08PkR {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ftODnXRRplG2HYl08PkR li {
  display: flex;
}

/*
 * Hover marker (placed in GlassHeader.tsx): a brand-blue pill round the
 * hovered label, sliding from one to the next (taking longer the further it
 * goes: --move, set in GlassHeader.tsx); it fades in and out in place.
 */
.ZDmyKzkJSZff0cn95RFM {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 999px;
  background: var(--action-primary-default, #0073e6);
  opacity: 0;
  pointer-events: none;
  transition:
    /* Eases out (no slow start), so it follows the mouse freely. */
    translate var(--move, 380ms) cubic-bezier(0.22, 1, 0.36, 1),
    width var(--move, 380ms) cubic-bezier(0.22, 1, 0.36, 1),
    height var(--move, 380ms) cubic-bezier(0.22, 1, 0.36, 1),
    opacity 250ms ease;
}

.ZDmyKzkJSZff0cn95RFM[data-show='true'] {
  opacity: 1;
}

/* Pressed: the marker turns soft black under the label. */
.fu3v9r5h4m7QvX2ZwDCA:has(.IV2EBekHps5isWRGVy7v:active) .ZDmyKzkJSZff0cn95RFM {
  background-color: var(--text-primary, #171717);
  transition-property: translate, width, height, opacity, background-color;
  transition-duration: var(--move, 380ms), var(--move, 380ms), var(--move, 380ms), 250ms, 80ms;
}

/* Keyboard focus: a 2px brand-blue ring round the marker, 2px out from it. */
.fu3v9r5h4m7QvX2ZwDCA:has(.IV2EBekHps5isWRGVy7v:focus-visible) .ZDmyKzkJSZff0cn95RFM {
  outline: 2px solid var(--action-primary-default, #0073e6);
  outline-offset: 2px;
}

/*
 * Cells: every link and segment draws its own part of the outline; the
 * hovered one's label turns white over the marker.
 * (Prefixed with .header so these transitions win over the tone fade above.)
 */
.Q1vgtJ9brddxkBimVGNa .IV2EBekHps5isWRGVy7v {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 22px;
  border: 1px solid rgb(var(--tone) / 0.72);
  border-width: 1px 0;
  background-clip: padding-box;
  color: rgb(var(--tone));
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition:
    background-color 350ms cubic-bezier(0.7, 0, 0.2, 1),
    border-color 350ms cubic-bezier(0.7, 0, 0.2, 1),
    color 300ms ease;
}

.Q1vgtJ9brddxkBimVGNa .IV2EBekHps5isWRGVy7v:hover,
.Q1vgtJ9brddxkBimVGNa .IV2EBekHps5isWRGVy7v:focus-visible,
.Q1vgtJ9brddxkBimVGNa .IV2EBekHps5isWRGVy7v[data-marked='true'] {
  color: var(--text-inverse, #ffffff);
  outline: none;
  /* Turns white as the marker arrives, not before. */
  transition-delay: 0ms, 0ms, 70ms;
}

/* On the white backing: no outline (the shadow edges it) and no dividers. */
.Q1vgtJ9brddxkBimVGNa .GZbryo7IJMJlwSbDqNx5 .IV2EBekHps5isWRGVy7v {
  border-color: transparent;
}

/*
 * Let's talk: a 1px soft-black outline pill round the label, the same size
 * as the hover marker, which covers it on hover.
 */
.Rvk9PsXEJxQih45I7tkU::before {
  content: '';
  position: absolute;
  inset: 7px 6px; /* the marker's 7px inset and 16px round the label (22px padding) */
  border: 1px solid rgb(var(--tone));
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.Q1vgtJ9brddxkBimVGNa .Rvk9PsXEJxQih45I7tkU:is(:hover, :focus-visible)::before {
  opacity: 0;
}

/*
 * Let's talk at the pill's end (search off): 2px more room on the right, so its outline sits as far
 * in from the pill's rounded end as from its top and bottom (it looked pinched at 6px); the label
 * keeps its 16px inside the outline.
 */
.Q1vgtJ9brddxkBimVGNa .Rvk9PsXEJxQih45I7tkU:not(:has(~ .cPDXQ70orKpu17LQmP2R)) {
  padding-right: 24px;
}

.Q1vgtJ9brddxkBimVGNa .Rvk9PsXEJxQih45I7tkU:not(:has(~ .cPDXQ70orKpu17LQmP2R))::before {
  right: 8px;
}

/* The arrow, as on the buttons (Button). */
.tZKfQqgXBYU9jlCHaCeR {
  flex: none;
}

/*
 * The logo emblem at the left end (soft black, turning white on the marker
 * like the labels).
 */
.Q1vgtJ9brddxkBimVGNa .CpV2TwCxGBJemZfARPLq {
  padding-left: 23px; /* the marker's 16px round the label + its 7px inset, so it sits evenly in the end */
  border-left-width: 1px;
  border-right-width: 1px;
  border-radius: 45px 0 0 45px;
}

.NNl3YmSDw6ZjgbR3jP1L {
  display: flex;
}

/* Outline end and the dividers, as in the design. */

.ftODnXRRplG2HYl08PkR li:last-child .RGswvoqGfU7xdHOGe0xm {
  padding-right: 26px;
}

/* Prefixed with .header to win over the base cell border widths. */
.Q1vgtJ9brddxkBimVGNa .Rvk9PsXEJxQih45I7tkU,
.Q1vgtJ9brddxkBimVGNa .cPDXQ70orKpu17LQmP2R {
  border-left-width: 1px;
}

.Q1vgtJ9brddxkBimVGNa .cPDXQ70orKpu17LQmP2R {
  padding: 0 23px 0 22px; /* likewise at the right end */
  border-right-width: 1px;
  border-radius: 0 41px 41px 0;
}

/* Ticker roll */
.n_8uOrhfQEcrxyiKSLJJ {
  display: inline-flex;
  overflow: hidden;
  vertical-align: middle;
}

.ChCRWmvzrA1J2HbYHp5t {
  position: relative;
  display: flex;
  transition: transform 450ms cubic-bezier(0.7, 0, 0.2, 1);
}

.EnseNGZkQTsttqf2cP8m {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The copy sits directly below and comes into view on hover. */
.M6uldTGV0rFlZZ6In41Q {
  position: absolute;
  top: 100%;
  left: 0;
  color: rgb(var(--tone-inverse));
}

.Q1vgtJ9brddxkBimVGNa .QWsb72DlhKcs0_FAM4bl {
  display: none;
}

/* The phones' menu icon and the menu's Let's talk: hidden until then. */
.Xd54pJMKCiywNSmxrvPW,
.ftODnXRRplG2HYl08PkR .wxZ9AGFnYzz0ZrKMWbkI {
  display: none;
}

/* The .header a reset (color: inherit) outranks the Button's white label. */
.Q1vgtJ9brddxkBimVGNa .wxZ9AGFnYzz0ZrKMWbkI a {
  color: var(--text-inverse, #ffffff);
}

.iTKcOs23Ojv_edcVpICp {
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

._aVz7KYwpayjPmiMnr9x {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 1100px and under: the links move into a full-screen menu behind the menu button. */
@media (max-width: 1100px) {
  .fu3v9r5h4m7QvX2ZwDCA {
    position: static;
    margin-left: auto;
    translate: none;
  }

  .Q1vgtJ9brddxkBimVGNa .QWsb72DlhKcs0_FAM4bl {
    display: flex;
  }

  /* .header first: the .takeover rule that hides it comes later in the file. */
  .Q1vgtJ9brddxkBimVGNa .rfQGc6XpulY64fGq6oBd {
    display: block;
  }

  /*
   * Below the bar, scrolling on its own and clipping the items at the bar as they come and go. Hidden with
   * visibility (out of the tab order) once the close has finished. .header first, to outrank the [data-tone]
   * transitions.
   */
  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR {
    position: fixed;
    inset: calc(var(--page-gutter, 20px) + 64px) 0 0;
    z-index: 0;
    display: flex;
    visibility: hidden;
    transition: visibility 0s linear calc(900ms + var(--last, 0) * 30ms);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 40px calc(var(--page-gutter, 20px) + 23px) 48px;
    overflow: hidden auto;
    overscroll-behavior: contain;
    /* Scrolled links fade out as they reach the bar (the top padding is clear at rest). */
    mask-image: linear-gradient(to bottom, transparent, #000 24px);
    white-space: normal;
  }

  .Q1vgtJ9brddxkBimVGNa .Bi2yfwrQ40fvRuhbSGtj {
    visibility: visible;
    transition: visibility 0s;
  }

  /* Closed (the slide-out still playing), the list takes no taps: the page behind is reachable at once. */
  .Q1vgtJ9brddxkBimVGNa:not([data-open='true']) .ftODnXRRplG2HYl08PkR {
    pointer-events: none;
  }

  /*
   * Items travel as far as the panel, just behind it, bottom first so none catches up with the one above.
   * Closing is the exact reverse (top first, mirrored curve), so no item is ever outside the panel.
   */
  .ftODnXRRplG2HYl08PkR li {
    translate: 0 -120vh;
    transition: translate 800ms cubic-bezier(0.8, 0, 0.3, 1) calc(var(--from-top, 0) * 30ms);
  }

  .Bi2yfwrQ40fvRuhbSGtj li {
    translate: none;
    transition: translate 800ms cubic-bezier(0.7, 0, 0.2, 1) calc(100ms + var(--from-foot, 0) * 30ms);
  }

  /* The menu is dark, so its text is always white (the bar's hover and focus too). */
  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR[data-tone],
  .Q1vgtJ9brddxkBimVGNa .fu3v9r5h4m7QvX2ZwDCA:is(:hover, :focus-within) .ftODnXRRplG2HYl08PkR[data-tone] {
    --tone: var(--text-inverse-rgb, 255 255 255);
    --tone-inverse: var(--text-primary-rgb, 23 23 23);
  }

  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm,
  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR li:first-child .RGswvoqGfU7xdHOGe0xm,
  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR li:last-child .RGswvoqGfU7xdHOGe0xm {
    height: auto;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    font-size: clamp(28px, 8vw, 42px);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  /* A bar, not text-decoration, which the label's roll would clip. Timed like the Button's text-variant underline. */
  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--text-inverse, #ffffff);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms cubic-bezier(0.45, 0, 0.55, 1);
  }

  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm:is(:hover, :focus-visible)::after {
    transform: none;
    transform-origin: left;
  }

  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm[aria-current]::after {
    height: 3px;
    border-radius: 2px;
    background: var(--action-primary-default, #0073e6);
    transform: none;
  }

  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm:active::after {
    background: var(--text-inverse, #ffffff);
  }

  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm:focus-visible {
    outline: 2px solid var(--action-primary-default, #0073e6);
    outline-offset: 4px;
  }
}

/* Compact: a copy of the 1100px block above, each selector prefixed with .header[data-compact='true'], applied
   when the header measures that its items don't fit on one line (set in GlassHeader.tsx). It is kept in step
   by hand: when the block above changes, change this copy to match. */
.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .fu3v9r5h4m7QvX2ZwDCA {
  position: static;
  margin-left: auto;
  translate: none;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .QWsb72DlhKcs0_FAM4bl {
  display: flex;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .rfQGc6XpulY64fGq6oBd {
  display: block;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR {
  position: fixed;
  inset: calc(var(--page-gutter, 20px) + 64px) 0 0;
  z-index: 0;
  display: flex;
  visibility: hidden;
  transition: visibility 0s linear calc(900ms + var(--last, 0) * 30ms);
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 40px calc(var(--page-gutter, 20px) + 23px) 48px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  mask-image: linear-gradient(to bottom, transparent, #000 24px);
  white-space: normal;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Bi2yfwrQ40fvRuhbSGtj {
  visibility: visible;
  transition: visibility 0s;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true']:not([data-open='true']) .ftODnXRRplG2HYl08PkR {
  pointer-events: none;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR li {
  translate: 0 -120vh;
  transition: translate 800ms cubic-bezier(0.8, 0, 0.3, 1) calc(var(--from-top, 0) * 30ms);
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Bi2yfwrQ40fvRuhbSGtj li {
  translate: none;
  transition: translate 800ms cubic-bezier(0.7, 0, 0.2, 1) calc(100ms + var(--from-foot, 0) * 30ms);
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR[data-tone],
.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .fu3v9r5h4m7QvX2ZwDCA:is(:hover, :focus-within) .ftODnXRRplG2HYl08PkR[data-tone] {
  --tone: var(--text-inverse-rgb, 255 255 255);
  --tone-inverse: var(--text-primary-rgb, 23 23 23);
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm,
.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR li:first-child .RGswvoqGfU7xdHOGe0xm,
.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR li:last-child .RGswvoqGfU7xdHOGe0xm {
  height: auto;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  font-size: clamp(28px, 8vw, 42px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--text-inverse, #ffffff);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms cubic-bezier(0.45, 0, 0.55, 1);
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm:is(:hover, :focus-visible)::after {
  transform: none;
  transform-origin: left;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm[aria-current]::after {
  height: 3px;
  border-radius: 2px;
  background: var(--action-primary-default, #0073e6);
  transform: none;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm:active::after {
  background: var(--text-inverse, #ffffff);
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm:focus-visible {
  outline: 2px solid var(--action-primary-default, #0073e6);
  outline-offset: 4px;
}

/*
 * 1100px and under (as phones): as far from the top as the sides (the gutter); the bar the full width,
 * the logo at its left, the menu button at its right, search (when on) before it. Let's talk is in the menu.
 */
@media (max-width: 1100px) {
  .Q1vgtJ9brddxkBimVGNa {
    margin-top: var(--page-gutter, 16px);
  }

  /* No breathing here: the bar keeps its size. (Positioned, so the hover marker is placed from its edge.) */
  .fu3v9r5h4m7QvX2ZwDCA,
  .fu3v9r5h4m7QvX2ZwDCA.x1dDL6pUPe7cEbnUTksP {
    position: relative;
    left: auto;
    display: grid;
    grid-template-columns: 1fr auto auto;
    width: 100%;
    margin-left: 0;
    scale: none;
  }

  .Q1vgtJ9brddxkBimVGNa .Rvk9PsXEJxQih45I7tkU {
    display: none;
  }

  .Q1vgtJ9brddxkBimVGNa .CpV2TwCxGBJemZfARPLq {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    padding: 0 22px 0 23px;
    border-radius: 45px 0 0 45px;
  }

  .Q1vgtJ9brddxkBimVGNa .cPDXQ70orKpu17LQmP2R {
    grid-column: 2;
    grid-row: 1;
    padding: 0 16px;
    border-right-width: 0;
    border-radius: 0;
  }

  .Q1vgtJ9brddxkBimVGNa .QWsb72DlhKcs0_FAM4bl {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    padding: 0 24px 0 22px;
    border-radius: 0 45px 45px 0;
  }

  /* Three 20px lines, 6px apart; open, the outer two cross and the middle fades. */
  .Xd54pJMKCiywNSmxrvPW {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
  }

  .Xd54pJMKCiywNSmxrvPW span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition:
      translate 300ms cubic-bezier(0.22, 1, 0.36, 1),
      rotate 300ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 200ms ease;
  }

  .Xd54pJMKCiywNSmxrvPW span:nth-child(1) {
    top: 0;
  }

  .Xd54pJMKCiywNSmxrvPW span:nth-child(2) {
    top: 6px;
  }

  .Xd54pJMKCiywNSmxrvPW span:nth-child(3) {
    top: 12px;
  }

  .Xd54pJMKCiywNSmxrvPW[data-open='true'] span:nth-child(1) {
    translate: 0 6px;
    rotate: 45deg;
  }

  .Xd54pJMKCiywNSmxrvPW[data-open='true'] span:nth-child(2) {
    opacity: 0;
  }

  .Xd54pJMKCiywNSmxrvPW[data-open='true'] span:nth-child(3) {
    translate: 0 -6px;
    rotate: -45deg;
  }

  /*
   * Pinned to the foot while a long menu scrolls behind it: bottom: 0 already clears the list's bottom padding,
   * the shadow carries the backing to the window's edge, and z-index 2 is over the links (positioned at 1).
   */
  .ftODnXRRplG2HYl08PkR .wxZ9AGFnYzz0ZrKMWbkI {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 32px;
    margin-top: auto;
    padding-top: 24px;
    background: var(--background-inverse, #171717);
    box-shadow: 0 48px 0 var(--background-inverse, #171717);
  }

  .ftODnXRRplG2HYl08PkR .wxZ9AGFnYzz0ZrKMWbkI::before {
    content: '';
    align-self: stretch;
    height: 1px;
    background: rgb(var(--tone) / 0.24);
  }
}

/* (No compact copy: the fold is always wider than this.) */
@media (max-width: 767px) {
  .ftODnXRRplG2HYl08PkR .wxZ9AGFnYzz0ZrKMWbkI {
    align-items: stretch;
  }

  .ftODnXRRplG2HYl08PkR .wxZ9AGFnYzz0ZrKMWbkI a {
    justify-content: center;
  }
}

/* (No compact copy: the fold is always wider than this.) */
@media (max-width: 359px) {
  .iTKcOs23Ojv_edcVpICp {
    display: none;
  }
}

/* Compact: a copy of the 1100px block above, each selector prefixed with .header[data-compact='true'], applied
   when the header measures that its items don't fit on one line (set in GlassHeader.tsx). It is kept in step
   by hand: when the block above changes, change this copy to match. */
.Q1vgtJ9brddxkBimVGNa[data-compact='true'] {
  margin-top: var(--page-gutter, 16px);
}

/* No breathing here: the bar keeps its size. (Positioned, so the hover marker is placed from its edge.) */
.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .fu3v9r5h4m7QvX2ZwDCA,
.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .fu3v9r5h4m7QvX2ZwDCA.x1dDL6pUPe7cEbnUTksP {
  position: relative;
  left: auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  width: 100%;
  margin-left: 0;
  scale: none;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Rvk9PsXEJxQih45I7tkU {
  display: none;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .CpV2TwCxGBJemZfARPLq {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  padding: 0 22px 0 23px;
  border-radius: 45px 0 0 45px;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .cPDXQ70orKpu17LQmP2R {
  grid-column: 2;
  grid-row: 1;
  padding: 0 16px;
  border-right-width: 0;
  border-radius: 0;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .QWsb72DlhKcs0_FAM4bl {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  padding: 0 24px 0 22px;
  border-radius: 0 45px 45px 0;
}

/* Three 20px lines, 6px apart; open, the outer two cross and the middle fades. */
.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Xd54pJMKCiywNSmxrvPW {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Xd54pJMKCiywNSmxrvPW span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition:
    translate 300ms cubic-bezier(0.22, 1, 0.36, 1),
    rotate 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Xd54pJMKCiywNSmxrvPW span:nth-child(1) {
  top: 0;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Xd54pJMKCiywNSmxrvPW span:nth-child(2) {
  top: 6px;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Xd54pJMKCiywNSmxrvPW span:nth-child(3) {
  top: 12px;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Xd54pJMKCiywNSmxrvPW[data-open='true'] span:nth-child(1) {
  translate: 0 6px;
  rotate: 45deg;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Xd54pJMKCiywNSmxrvPW[data-open='true'] span:nth-child(2) {
  opacity: 0;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Xd54pJMKCiywNSmxrvPW[data-open='true'] span:nth-child(3) {
  translate: 0 -6px;
  rotate: -45deg;
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR .wxZ9AGFnYzz0ZrKMWbkI {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 32px;
  margin-top: auto;
  padding-top: 24px;
  background: var(--background-inverse, #171717);
  box-shadow: 0 48px 0 var(--background-inverse, #171717);
}

.Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR .wxZ9AGFnYzz0ZrKMWbkI::before {
  content: '';
  align-self: stretch;
  height: 1px;
  background: rgb(var(--tone) / 0.24);
}

/*
 * The open menu's panel, after dennissnellenberg.com's menu: it comes down from the top with a curved edge (an
 * ellipse, ::before) that flattens as it lands. Closing waits for the items to go up (--last) and runs backwards
 * on the mirrored curve.
 */
.rfQGc6XpulY64fGq6oBd {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  visibility: hidden;
  background: var(--background-inverse, #171717);
  /* vh, not %: while closed, the header's filter makes the 66px header this box's container. */
  translate: 0 -120vh;
  transition: translate 800ms cubic-bezier(0.8, 0, 0.3, 1) calc(100ms + var(--last, 0) * 30ms);
}

.Q1vgtJ9brddxkBimVGNa[data-takeover='true'] .rfQGc6XpulY64fGq6oBd {
  visibility: visible;
}

.rfQGc6XpulY64fGq6oBd::before {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -25%;
  width: 150%;
  height: 120%;
  border-radius: 50%;
  background: inherit;
  /* The panel's bottom edge: 100 / 120. */
  transform-origin: 50% 83.333%;
  transition: scale 850ms cubic-bezier(0.8, 0, 0.3, 1) calc(50ms + var(--last, 0) * 30ms);
}

.Q1vgtJ9brddxkBimVGNa[data-open='true'] .rfQGc6XpulY64fGq6oBd {
  translate: none;
  pointer-events: auto;
  transition: translate 800ms cubic-bezier(0.7, 0, 0.2, 1);
}

.Q1vgtJ9brddxkBimVGNa[data-open='true'] .rfQGc6XpulY64fGq6oBd::before {
  scale: 1 0;
  transition: scale 850ms cubic-bezier(0.7, 0, 0.2, 1);
}

/* The filter would make the header the fixed panel's and links' container, so it's off while the panel is up. */
.Q1vgtJ9brddxkBimVGNa[data-takeover='true'] {
  filter: none;
}

/*
 * Open (no compact copy needed): the bar turns transparent with white contents once the panel has covered it,
 * and back as the panel uncovers it on close, so the white logo never shows over the page.
 */
.Q1vgtJ9brddxkBimVGNa[data-open='true'] .fu3v9r5h4m7QvX2ZwDCA,
.Q1vgtJ9brddxkBimVGNa[data-open='true'] .fu3v9r5h4m7QvX2ZwDCA:is(:hover, :focus-within) {
  background-color: transparent;
}

.Q1vgtJ9brddxkBimVGNa[data-open='true'] .fu3v9r5h4m7QvX2ZwDCA,
.Q1vgtJ9brddxkBimVGNa[data-open='true'] .fu3v9r5h4m7QvX2ZwDCA .IV2EBekHps5isWRGVy7v {
  transition-delay: 250ms;
}

.Q1vgtJ9brddxkBimVGNa[data-takeover='true']:not([data-open='true']) .fu3v9r5h4m7QvX2ZwDCA,
.Q1vgtJ9brddxkBimVGNa[data-takeover='true']:not([data-open='true']) .fu3v9r5h4m7QvX2ZwDCA .IV2EBekHps5isWRGVy7v {
  transition-delay: calc(300ms + var(--last, 0) * 30ms);
}

.Q1vgtJ9brddxkBimVGNa[data-open='true'] .fu3v9r5h4m7QvX2ZwDCA [data-tone],
.Q1vgtJ9brddxkBimVGNa[data-open='true'] .fu3v9r5h4m7QvX2ZwDCA:is(:hover, :focus-within) [data-tone] {
  --tone: var(--text-inverse-rgb, 255 255 255);
  --tone-inverse: var(--text-primary-rgb, 23 23 23);
}

/*
 * Folded above 1100px: the phone's gutter, as tokens.css gives --page-gutter at 1100px and under (20px), so the
 * folded bar sits where the phone bar does (full width, 20px from the top) and not at the wide desktop gutter.
 * The only rule here that is not a copy.
 */
.Q1vgtJ9brddxkBimVGNa[data-compact='true'] {
  --page-gutter: 20px;
}

/*
 * Reduced motion: every rule above that sets a transition has to be listed here at the same specificity or
 * higher (a longhand or a more specific rule beats a plain `transition: none`): the pressed marker, the
 * menu (a [data-tone] that is not a .cell), the CTA's outline, and the menu's rules in both copies and the
 * open state included.
 */
@media (prefers-reduced-motion: reduce) {
  .ZDmyKzkJSZff0cn95RFM,
  .fu3v9r5h4m7QvX2ZwDCA:has(.IV2EBekHps5isWRGVy7v:active) .ZDmyKzkJSZff0cn95RFM,
  .Q1vgtJ9brddxkBimVGNa [data-tone],
  .Q1vgtJ9brddxkBimVGNa .IV2EBekHps5isWRGVy7v,
  .Rvk9PsXEJxQih45I7tkU::before,
  .ChCRWmvzrA1J2HbYHp5t,
  .Xd54pJMKCiywNSmxrvPW span,
  .Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Xd54pJMKCiywNSmxrvPW span,
  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm::after,
  .Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR .RGswvoqGfU7xdHOGe0xm::after,
  .rfQGc6XpulY64fGq6oBd,
  .rfQGc6XpulY64fGq6oBd::before,
  .Q1vgtJ9brddxkBimVGNa[data-open='true'] .rfQGc6XpulY64fGq6oBd,
  .Q1vgtJ9brddxkBimVGNa[data-open='true'] .rfQGc6XpulY64fGq6oBd::before,
  .Q1vgtJ9brddxkBimVGNa .ftODnXRRplG2HYl08PkR,
  .Q1vgtJ9brddxkBimVGNa .Bi2yfwrQ40fvRuhbSGtj,
  .ftODnXRRplG2HYl08PkR li,
  .Bi2yfwrQ40fvRuhbSGtj li,
  .Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR,
  .Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Bi2yfwrQ40fvRuhbSGtj,
  .Q1vgtJ9brddxkBimVGNa[data-compact='true'] .ftODnXRRplG2HYl08PkR li,
  .Q1vgtJ9brddxkBimVGNa[data-compact='true'] .Bi2yfwrQ40fvRuhbSGtj li,
  .Q1vgtJ9brddxkBimVGNa[data-open='true'] .fu3v9r5h4m7QvX2ZwDCA,
  .Q1vgtJ9brddxkBimVGNa[data-open='true'] .fu3v9r5h4m7QvX2ZwDCA .IV2EBekHps5isWRGVy7v,
  .Q1vgtJ9brddxkBimVGNa[data-takeover='true']:not([data-open='true']) .fu3v9r5h4m7QvX2ZwDCA,
  .Q1vgtJ9brddxkBimVGNa[data-takeover='true']:not([data-open='true']) .fu3v9r5h4m7QvX2ZwDCA .IV2EBekHps5isWRGVy7v {
    transition: none;
  }
}

/*
 * "Skip to main content": off screen until it has keyboard focus, then a soft-black pill in the
 * top left corner over the header, with the nav's focus ring (2px brand blue, 2px out). Outside
 * .header, so it carries its own text styles.
 */
.QYVHBIRs2TcF4QKWgXwm {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--text-primary, #171717);
  color: var(--text-inverse, #ffffff);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  translate: 0 calc(-100% - 24px);
}

.QYVHBIRs2TcF4QKWgXwm:focus {
  translate: none;
  outline: 2px solid var(--action-primary-default, #0073e6);
  outline-offset: 2px;
}