/* Design tokens. Also on .nav-promo-spacer (the in-flow banner copy outside
   the header) so it sizes like the real banner. */
.nav-root,
.nav-promo-spacer {
  --nav-neutral: var(--_default---swatch--neutral, #ffffff);
  --nav-neutral-50: var(--_default---swatch--neutral-50, #fafafa);
  --nav-neutral-100: var(--_default---swatch--neutral-100, #f3f2f3);
  --nav-neutral-200: var(--_default---swatch--neutral-200, #e9e6e9);
  --nav-neutral-300: var(--_default---swatch--neutral-300, #dad4da);
  --nav-neutral-400: var(--_default---swatch--neutral-400, #b0a6b1);
  --nav-neutral-500: var(--_default---swatch--neutral-500, #867489);
  --nav-neutral-600: var(--_default---swatch--neutral-600, #69586c);
  --nav-neutral-700: var(--_default---swatch--neutral-700, #58475a);
  --nav-neutral-800: var(--_default---swatch--neutral-800, #3d2f40);
  --nav-neutral-900: var(--_default---swatch--neutral-900, #342237);

  --nav-brand-50: var(--_default---swatch--brand-50, #faf7fe);
  --nav-brand-100: var(--_default---swatch--brand-100, #f3ecfd);
  --nav-brand-200: var(--_default---swatch--brand-200, #e9dcfb);
  --nav-brand-300: var(--_default---swatch--brand-300, #d8c0f6);
  --nav-brand-600: var(--_default---swatch--brand-600, #8f4bd2);
  --nav-brand-700: var(--_default---swatch--brand-700, #803bbf);

  --nav-bg: var(--_theme---background, var(--nav-neutral));
  --nav-text: var(--_theme---text, var(--nav-neutral-900));
  /* The site variable is "secondary" now; the old misspelled "secondery" no
     longer exists, and reading it pinned this to neutral-600 in theme-dark. */
  --nav-text-secondary: var(--_theme---text-secondary, var(--nav-neutral-600));
  --nav-text-tertiary: var(--_theme---text-tertiary, #58475a);
  --nav-border: var(--_theme---border, var(--nav-neutral-300));
  --nav-hover-bg: var(--_theme---hover, var(--nav-neutral-100));

  --nav-btn-primary-bg: var(--_theme---button-primary--background, var(--nav-brand-600));
  --nav-btn-primary-bg-hover: var(--_theme---button-primary--background-hover, var(--nav-brand-700));
  --nav-btn-primary-border: var(--_theme---button-primary--border, var(--nav-brand-600));
  --nav-btn-primary-border-hover: var(--_theme---button-primary--border-hover, var(--nav-brand-700));
  --nav-btn-primary-text: var(--_theme---button-primary--text, var(--nav-neutral));

  --nav-btn-secondary-bg: var(--_theme---button-secondary--background, var(--nav-neutral));
  --nav-btn-secondary-bg-hover: var(--_theme---button-secondary--background-hover, var(--nav-neutral-50));
  --nav-btn-secondary-border: var(--_theme---button-secondary--border, var(--nav-neutral-300));
  --nav-btn-secondary-text: var(--_theme---button-secondary--text, var(--nav-neutral-700));
  --nav-btn-secondary-text-hover: var(--_theme---button-secondary--text-hover, var(--nav-neutral-800));

  --nav-badge-bg: var(--_theme---button-primary--background, var(--nav-brand-600));
  --nav-badge-text: var(--_theme---button-primary--text, var(--nav-neutral));

  --nav-icon-card-border: var(--_theme---feature-card--border-outer, var(--nav-neutral-300));

  /* Focus ring: 2px background gap + 2px brand ring (matches site buttons). */
  --nav-focus-gap: var(--_theme---background, var(--nav-neutral));
  --nav-focus-ring: var(--_default---swatch--brand-500-main, var(--nav-brand-600));

  --nav-radius-sm: var(--_default---radius--small, 0.5rem);
  --nav-radius-md: var(--_default---radius--main, 1rem);
  --nav-radius-round: var(--_default---radius--round, 100vw);

  --nav-font: var(--_typography---font--primary-family, Satoshi, Arial, "Helvetica Neue", Helvetica, sans-serif);
  --nav-text-small: var(--_typography---font-size--text-small, 0.875rem);
  --nav-text-small-line: var(--_typography---line-height--small, 1.25rem);
  --nav-text-xsmall: var(--_typography---font-size--text-xsmall, 0.75rem);
  --nav-weight-regular: var(--_typography---font--primary-regular, 400);
  --nav-weight-medium: var(--_typography---font--primary-medium, 500);

  --nav-space-4: var(--_spacing---space--4, 0.25rem);
  --nav-space-8: var(--_spacing---space--8, 0.5rem);
  --nav-space-12: var(--_spacing---space--12, clamp(0.5rem, calc(0.5rem + 0.25 * (100vw - 320px) / 960), 0.75rem));
  --nav-space-16: var(--_spacing---space--16, clamp(0.75rem, calc(0.75rem + 0.25 * (100vw - 320px) / 960), 1rem));
  --nav-space-24: var(--_spacing---space--24, clamp(1rem, calc(1rem + 0.5 * (100vw - 320px) / 960), 1.5rem));
  --nav-space-32: var(--_spacing---space--32, clamp(1.5rem, calc(1.5rem + 0.5 * (100vw - 320px) / 960), 2rem));
  --nav-space-40: var(--_spacing---space--40, clamp(2rem, calc(2rem + 0.5 * (100vw - 320px) / 960), 2.5rem));
  --nav-space-48: var(--_spacing---space--48, clamp(2.25rem, calc(2.25rem + 0.75 * (100vw - 320px) / 960), 3rem));
  --nav-space-96: var(--_spacing---space--96, clamp(4rem, calc(4rem + 2 * (100vw - 320px) / 960), 6rem));
}

.nav-root {

  font-family: var(--nav-font);

  z-index: 999;
  background-color: transparent;
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  transform: translateY(0%);
  will-change: transform;
  transition: background-color 0.3s ease, color 0.2s ease,
    box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-root.nav-scrolled {
  background-color: var(--nav-bg);
  box-shadow: 0 1px 0 var(--nav-border);
}

/* Skip link: off-screen via transform (keeps it focusable and in the a11y
   tree); slides in on focus. */
.nav-skip-link {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  z-index: 1000;
  padding: 0.406rem 0.75rem;
  border: 0.094rem solid var(--nav-btn-primary-border);
  border-radius: var(--nav-radius-sm);
  background-color: var(--nav-btn-primary-bg);
  font-size: var(--nav-text-small);
  line-height: var(--nav-text-small-line);
  font-weight: var(--nav-weight-medium);
  white-space: nowrap;
  transform: translateY(calc(-100% - 1rem));
  transition: transform 0.2s ease;
}

/* Beats the `.nav-root a { color: inherit }` reset. */
.nav-root .nav-skip-link {
  color: var(--nav-btn-primary-text);
}

.nav-skip-link:focus {
  transform: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--nav-focus-gap), 0 0 0 4px var(--nav-focus-ring);
}

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

/* Mobile menu open: bar and menu form one sheet; no divider, no bg fade. */
.nav-root.nav-menu-open {
  box-shadow: none;
  transition: none;
}

.nav-root.nav-on-brand:not(.nav-scrolled) .nav-brand,
.nav-root.nav-on-brand:not(.nav-scrolled) .nav-dd,
.nav-root.nav-on-brand:not(.nav-scrolled) .nav-link {
  color: #ffffff;
}

.nav-root.nav-on-brand:not(.nav-scrolled) .nav-toggle .nav-toggle-line {
  background-color: #ffffff;
}

.nav-root.nav-on-brand:not(.nav-scrolled) .nav-btn--secondary,
.nav-root.nav-on-brand:not(.nav-scrolled) .nav-btn--secondary:hover {
  background-color: #ffffff;
  color: #58475a;
  border-color: #dad4da;
}

/* On-brand hover: keep white text on a translucent white chip. Hover-capable
   pointers only, so it can't stick after a tap. */
@media (hover: hover) and (pointer: fine) {
  .nav-root.nav-on-brand:not(.nav-scrolled) .nav-dd:hover,
  .nav-root.nav-on-brand:not(.nav-scrolled) .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
  }
}

.nav-root *,
.nav-root *::before,
.nav-root *::after {
  box-sizing: border-box;
}

.nav-root * {
  -webkit-tap-highlight-color: transparent;
}

.nav-root[data-theme-transitioning="true"],
.nav-root[data-theme-transitioning="true"] * {
  transition-duration: 0ms !important;
}

.nav-root a {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.nav-root :where(button) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
}

.nav-root img {
  max-width: 100%;
}

.nav-container {
  max-width: 80rem;
  margin-right: 1rem;
  margin-left: 1rem;
  width: calc(100% - 2rem);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.nav-outer-wrap {
  column-gap: 4.625rem;
  row-gap: 4.625rem;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.nav-brand {
  width: 5.4375rem;
  color: var(--nav-text);
  justify-content: flex-start;
  align-items: center;
  padding-left: 0;
  transition: opacity 0.2s, color 0.2s;
  display: flex;
}

.nav-brand:hover {
  opacity: 0.8;
}

.nav-menu {
  align-items: center;
  width: 100%;
  position: static;
}

.nav-menu-mask {
  column-gap: var(--nav-space-16);
  row-gap: var(--nav-space-16);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.nav-dd-wrapper {
  column-gap: var(--nav-space-4);
  row-gap: var(--nav-space-4);
  display: flex;
}

.nav-dd {
  color: var(--nav-text-tertiary);
  border-radius: var(--nav-radius-sm);
  cursor: pointer;
  padding: 4px 8px;
  position: static;
  transition: background-color 0.3s, color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
  .nav-dd:hover {
    background-color: var(--nav-hover-bg);
  }
}

.nav-dd-toggle {
  column-gap: var(--nav-space-8);
  row-gap: var(--nav-space-8);
  justify-content: flex-start;
  align-items: center;
  display: flex;
  outline: none;
}

.nav-dd-text {
  font-size: var(--nav-text-small);
  line-height: var(--nav-text-small-line);
  font-weight: var(--nav-weight-regular);
}

.nav-dd-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-dd.is-open .nav-dd-arrow {
  transform: rotate(180deg);
}

.nav-dd-panel {
  width: 100%;
  padding: var(--nav-space-40) var(--nav-space-48) var(--nav-space-48);
  border-radius: var(--nav-radius-md);
  background-color: var(--nav-bg);
  cursor: auto;
  flex-flow: column;
  display: flex;
  position: absolute;
  top: 3.5rem;
  left: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 1;
  overflow: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s, background-color 0.2s ease;
}

.nav-dd-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s, background-color 0.2s ease;
}

.nav-dd-panel.is-swap {
  transition: opacity 0s, visibility 0s, background-color 0s,
    height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-dd-grid {
  column-gap: var(--nav-space-96);
  row-gap: var(--nav-space-32);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.nav-dd-column {
  flex-direction: column;
  grid-column-end: auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.nav-dd-column.is-full {
  width: 100%;
}

.nav-dd-column.has-top-margin {
  margin-top: 0;
}

@media screen and (min-width: 992px) {
  .nav-dd-column.spans-row {
    grid-column: 1 / -1;
  }

  .nav-dd-column.align-end {
    align-self: end;
  }
}

.nav-dd-column-title {
  color: var(--nav-text-tertiary);
  font-size: 12px;
  font-weight: var(--nav-weight-medium);
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.nav-dd-column-title.is-transparent {
  color: transparent;
}

.nav-dd-title-hidden {
  width: 100%;
}

.nav-dd-spacer {
  flex: none;
  width: 100%;
}

.nav-dd-spacer--md {
  height: var(--nav-space-16);
}

.nav-dd-spacer--sm {
  height: var(--nav-space-12);
}

.nav-dd-group {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.nav-dd-item {
  width: 100%;
  min-height: 44px;
  padding: var(--nav-space-8) var(--nav-space-16) var(--nav-space-8) var(--nav-space-8);
  column-gap: var(--nav-space-12);
  row-gap: var(--nav-space-12);
  border-radius: var(--nav-radius-md);
  color: var(--nav-text);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
  display: flex;
  overflow: hidden;
  outline: none;
  position: relative;
}

.nav-dd-item:hover,
.nav-dd-item:active {
  background-color: var(--nav-hover-bg);
  color: var(--nav-text);
}

.nav-dd-item-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: transparent;
}

.nav-dd-item-icon {
  border: 1px solid var(--nav-icon-card-border);
  border-radius: var(--nav-space-12);
  background-color: var(--nav-neutral);
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5rem;
  display: flex;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.nav-dd-item-icon img {
  object-fit: contain;
  width: 1.5rem;
  height: 1.5rem;
}

.nav-dd-item-cover {
  aspect-ratio: 5 / 2;
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 7.5rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.nav-dd-item-cover img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.nav-dd-item-body {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 2px;
  text-align: left;
}

.nav-dd-item-title-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: var(--nav-space-8);
  row-gap: var(--nav-space-8);
}

.nav-dd-item-title {
  color: var(--nav-text);
  font-weight: var(--nav-weight-medium);
  transition: color 0.2s ease;
}

.nav-dd-item-badge {
  background-color: var(--nav-badge-bg);
  color: var(--nav-badge-text);
  text-transform: uppercase;
  border-radius: 0.25rem;
  padding: 2px 6px;
  font-size: 0.625rem;
  font-weight: var(--nav-weight-medium);
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-dd-item-desc {
  color: var(--nav-text-tertiary) !important;
  font-size: var(--nav-text-small);
  line-height: var(--nav-text-small-line);
  font-weight: var(--nav-weight-regular);
  margin: 0;
  transition: color 0.2s ease;
}

.nav-dd-buttons {
  column-gap: var(--nav-space-8);
  row-gap: var(--nav-space-8);
  display: flex;
  flex-wrap: wrap;
}

.nav-dd-buttons:focus {
  outline: none;
}

.nav-dd-buttons .nav-dd-button.is-extra {
  display: none;
}

.nav-dd-buttons .nav-dd-button-more {
  display: none;
}

.nav-dd-buttons.has-overflow .nav-dd-button-more {
  display: flex;
}

.nav-dd-buttons.is-expanded .nav-dd-button.is-extra {
  display: flex;
}

.nav-dd-buttons.is-expanded .nav-dd-button-more {
  display: none;
}

.nav-dd-button,
.nav-dd-button-more {
  flex: 0 1 auto;
  min-width: 0;
  column-gap: var(--nav-space-8);
  row-gap: var(--nav-space-8);
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-radius-round);
  background-color: var(--nav-bg);
  color: var(--nav-text);
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 1rem 0.375rem 0.375rem;
  /* Site text-small: 0.875rem (14px). */
  font-size: var(--nav-text-small);
  line-height: var(--nav-text-small-line);
  transition: background-color 0.25s, color 0.25s;
  display: flex;
  overflow: hidden;
}

.nav-dd-button {
  position: relative;
}

.nav-dd-button-more {
  padding: 0.375rem 0.5rem 0.375rem 0.375rem;
}

.nav-dd-button:hover,
.nav-dd-button-more:hover {
  background-color: var(--nav-hover-bg);
}

.nav-dd-button-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: transparent;
}

.nav-dd-button-icon {
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-radius-round);
  width: 1.375rem;
  height: 1.375rem;
  padding: 1px;
  position: relative;
  overflow: hidden;
  flex: none;
  transition: border-color 0.2s ease;
}

.nav-dd-button-icon img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.nav-dd-button-arrow {
  width: 0.75rem;
  height: 0.75rem;
  display: none;
  color: var(--nav-border);
  flex: none;
  transition: color 0.2s ease;
}

.nav-dd-button-more .nav-dd-button-arrow {
  display: block;
}

/* Integration logos at 75% so the theme colour shows around them. */
.nav-dd-buttons.is-integrations .nav-dd-button-icon img {
  width: 75%;
  height: 75%;
  margin: auto;
}

/* "Show all integrations": site .app_pill.templates style without the icon,
   so it uses its own even padding. */
.nav-dd-app-pill {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  column-gap: var(--nav-space-8);
  row-gap: var(--nav-space-8);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--nav-border);
  border-radius: 2.375rem;
  background-color: var(--nav-neutral-100);
  transition: color 0.25s ease;
}

/* Beats the `.nav-root a { color: inherit }` reset. */
.nav-root .nav-dd-app-pill {
  color: var(--nav-text);
}

.nav-dd-app-pill-text {
  font-size: var(--nav-text-small);
  line-height: var(--nav-text-small-line);
  font-weight: var(--nav-weight-medium);
}

.nav-dd-app-pill-arrow {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  color: var(--nav-neutral-400);
}

/* Shaft draws in on hover (hover-capable pointers only); head stays still. */
.nav-dd-app-pill-shaft {
  stroke-dasharray: 12;
}

@media (hover: hover) and (pointer: fine) {
  .nav-dd-app-pill-shaft {
    stroke-dashoffset: 12;
    transition: stroke-dashoffset 0.25s ease;
  }

  .nav-dd-app-pill:hover .nav-dd-app-pill-shaft,
  .nav-dd-app-pill:focus-visible .nav-dd-app-pill-shaft {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dd-app-pill-shaft {
    stroke-dashoffset: 0;
    transition: none;
  }
}

.nav-link {
  border-radius: var(--nav-radius-sm);
  color: var(--nav-text-tertiary);
  cursor: pointer;
  padding: 4px 8px;
  position: static;
  display: flex;
  transition: background-color 0.3s, color 0.3s;
}

/* Beats the `.nav-root a { color: inherit }` reset so nav-link matches nav-dd. */
.nav-root .nav-link {
  color: var(--nav-text-tertiary);
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover {
    background-color: var(--nav-hover-bg);
  }
}

.nav-buttons {
  column-gap: var(--nav-space-12);
  row-gap: var(--nav-space-12);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.nav-button-slot {
  display: flex;
}

.nav-btn {
  border-radius: var(--nav-radius-sm);
  font-size: var(--nav-text-small);
  line-height: var(--nav-text-small-line);
  font-weight: var(--nav-weight-regular);
  text-align: center;
  vertical-align: middle;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 0.406rem 0.75rem;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
  display: flex;
  position: relative;
  border: 0.094rem solid transparent;
}

.nav-btn--primary {
  --_button-style---border: var(--nav-btn-primary-border);
  --_button-style---background: var(--nav-btn-primary-bg);
  --_button-style---text: var(--nav-btn-primary-text);
  --_button-style---border-hover: var(--nav-btn-primary-border-hover);
  --_button-style---background-hover: var(--nav-btn-primary-bg-hover);
  border-color: var(--_button-style---border);
  background-color: var(--_button-style---background);
  color: var(--_button-style---text);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05),
    inset 0 0 0 1px rgba(10, 13, 18, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.nav-btn--primary:hover {
  border-color: var(--_button-style---border-hover);
  background-color: var(--_button-style---background-hover);
}

.nav-btn--secondary {
  --_button-style---border: var(--nav-btn-secondary-border);
  --_button-style---background: var(--nav-btn-secondary-bg);
  --_button-style---text: var(--nav-text-tertiary);
  --_button-style---background-hover: var(--nav-btn-secondary-bg-hover);
  --_button-style---text-hover: var(--nav-btn-secondary-text-hover);
  border-color: var(--_button-style---border);
  background-color: var(--_button-style---background);
  color: var(--_button-style---text);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05);
}

.nav-btn--secondary:hover {
  background-color: var(--_button-style---background-hover);
  color: var(--_button-style---text-hover);
}

.nav-btn-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: transparent;
  border-radius: inherit;
}

.nav-toggle {
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding: 18px;
  position: relative;
}

.nav-toggle-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nav-toggle-line {
  background-color: var(--nav-text);
  border-radius: 4px;
  width: 1rem;
  height: 0.125rem;
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
  transition: background-color 0.2s ease, transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle[aria-expanded='true'] .nav-toggle-line:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle-line:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle-line:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

.nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 500;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .nav-dd-panel,
  .nav-dd-panel.is-open,
  .nav-dd-panel.is-swap,
  .nav-backdrop,
  .nav-backdrop.is-open {
    transition: opacity 0.2s ease, visibility 0s linear;
  }

  .nav-root {
    transition-duration: 0.01ms !important;
  }
}

.nav-menu {
  overscroll-behavior-y: contain;
}

@media screen and (max-width: 991px) {
  .nav-toggle {
    display: flex;
  }

  .nav-brand {
    z-index: 99;
    position: relative;
  }

  .nav-menu {
    display: none;
  }

  .nav-menu.is-open {
    padding-right: var(--nav-space-16);
    padding-left: var(--nav-space-16);
    background-color: var(--nav-bg);
    flex-direction: column;
    align-items: stretch;
    /* Viewport minus the header, so it fits when a promo banner is shown. */
    height: calc(100svh - 100%);
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: auto;
    transition: background-color 0.2s ease;
  }

  .nav-toggle {
    z-index: 99;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
  }

  .nav-menu-mask {
    flex-direction: column;
    flex: none;
    justify-content: space-between;
    min-height: 100%;
  }

  .nav-dd-column.has-top-margin {
    margin-top: -1rem;
  }

  .nav-dd-item-body {
    text-align: left;
  }

  .nav-container {
    position: static;
  }

  .nav-dd-wrapper {
    flex-flow: column;
    width: 100%;
  }

  .nav-dd {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid var(--nav-border);
    background-color: var(--nav-bg);
    border-radius: 0;
    flex-flow: column;
    align-items: stretch;
    display: flex;
  }

  .nav-dd:hover {
    background-color: var(--nav-bg);
  }

  .nav-dd:active {
    background-color: var(--nav-hover-bg);
  }

  .nav-dd-toggle {
    width: 100%;
    padding-top: var(--nav-space-24);
    padding-bottom: var(--nav-space-24);
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .nav-dd-panel {
    padding: 0;
    position: static;
    top: auto;
    left: auto;
    border-radius: 0;
    height: 0;
  }

  .nav-dd-panel.is-open {
    height: auto;
    margin-bottom: var(--nav-space-16);
  }

  .nav-dd-grid {
    flex-flow: column;
    grid-template-columns: 1fr;
    display: flex;
  }

  .nav-dd-item {
    padding-left: 0;
    background-color: var(--nav-bg);
  }

  .nav-dd-item:hover {
    background-color: var(--nav-bg);
  }

  .nav-dd-buttons {
    column-gap: var(--nav-space-8);
    row-gap: var(--nav-space-8);
    flex: 0 auto;
  }

  .nav-dd-title-hidden {
    display: none;
  }

  .nav-dd-text {
    font-size: 1.0625rem;
  }

  /* CTAs stick to the bottom of the open menu. The top padding is a fade into
     the menu background and, being in flow, also spaces the last item.
     Negative inline margins cover the menu's side padding. */
  .nav-buttons {
    --nav-cta-fade: 1.5rem;
    position: sticky;
    bottom: 0;
    z-index: 3;
    column-gap: var(--nav-space-16);
    row-gap: var(--nav-space-16);
    text-align: center;
    flex-flow: column;
    width: calc(100% + 2 * var(--nav-space-16));
    margin-top: auto;
    margin-right: calc(-1 * var(--nav-space-16));
    margin-left: calc(-1 * var(--nav-space-16));
    padding: var(--nav-cta-fade) var(--nav-space-16)
      calc(var(--nav-space-16) + env(safe-area-inset-bottom, 0rem));
    background: linear-gradient(to bottom, transparent, var(--nav-bg) var(--nav-cta-fade));
    /* Let taps pass through the fade; buttons re-enable pointer events. */
    pointer-events: none;
  }

  .nav-buttons > * {
    pointer-events: auto;
  }

  /* Keep focused items above the sticky CTA block. Height is measured in
     Navigation.tsx; 10rem is a first-paint estimate. */
  .nav-menu.is-open {
    scroll-padding-bottom: var(--nav-cta-block-h, 10rem);
  }

  .nav-link {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid var(--nav-border);
    background-color: var(--nav-bg);
    border-radius: 0;
    order: 9999;
    align-items: stretch;
    display: flex;
  }

  .nav-link:hover {
    background-color: var(--nav-bg);
  }

  .nav-link:active {
    background-color: var(--nav-hover-bg);
  }

  .nav-button-slot {
    width: 100%;
  }

  .nav-btn {
    width: 100%;
  }

  .nav-root.nav-on-brand:not(.nav-scrolled) .nav-dd,
  .nav-root.nav-on-brand:not(.nav-scrolled) .nav-link {
    color: var(--nav-text-tertiary);
  }

  .nav-root.nav-on-brand:not(.nav-scrolled) .nav-dd:hover,
  .nav-root.nav-on-brand:not(.nav-scrolled) .nav-link:hover {
    color: var(--nav-text-tertiary);
    background-color: var(--nav-bg);
  }

  .nav-root.nav-on-brand:not(.nav-scrolled) .nav-dd:active,
  .nav-root.nav-on-brand:not(.nav-scrolled) .nav-link:active {
    color: var(--nav-text-tertiary);
    background-color: var(--nav-hover-bg);
  }

  .nav-root.nav-on-brand:not(.nav-scrolled) .nav-btn--secondary {
    border-color: var(--_button-style---border);
    background-color: var(--_button-style---background);
    color: var(--_button-style---text);
  }

  .nav-root.nav-on-brand:not(.nav-scrolled) .nav-btn--secondary:hover {
    background-color: var(--_button-style---background-hover);
    color: var(--_button-style---text-hover);
  }
}

@media screen and (max-width: 479px) {
  .nav-dd-grid {
    flex-flow: column;
    display: flex;
  }

  .nav-dd-buttons {
    flex-flow: row wrap;
    display: flex;
  }
}
/* --- Focus styles ---
   Double ring via box-shadow. `outline: transparent` stays on every rule so
   forced-colors mode (which ignores box-shadow) still draws a ring. */

/* Over a dark/brand section (transparent nav): white ring, no gap. */
.nav-root.nav-on-brand:not(.nav-scrolled) {
  --nav-focus-gap: transparent;
  --nav-focus-ring: #ffffff;
}

/* Open panels and the mobile menu always sit on --nav-bg: brand ring. */
.nav-root .nav-dd-panel,
.nav-root .nav-menu.is-open {
  --nav-focus-gap: var(--nav-bg);
  --nav-focus-ring: var(--_default---swatch--brand-500-main, var(--nav-brand-600));
}

/* Top-level controls: logo, static links, hamburger, "Show all" pills */
.nav-brand:focus-visible,
.nav-link:focus-visible,
.nav-toggle:focus-visible,
.nav-dd-button-more:focus-visible,
.nav-dd-app-pill:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--nav-focus-gap), 0 0 0 4px var(--nav-focus-ring);
}

.nav-brand:focus-visible,
.nav-link:focus-visible,
.nav-toggle:focus-visible {
  border-radius: var(--nav-radius-sm);
}

/* Dropdown toggles (Product / Solutions / Resources) */
.nav-dd-toggle:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Desktop: ring the whole .nav-dd pill. :has(> button:focus-visible), not
   :focus-within, so it isn't ringed while focus is inside the panel. */
@media screen and (min-width: 992px) {
  .nav-dd:has(> .nav-dd-toggle:focus-visible) {
    box-shadow: 0 0 0 2px var(--nav-focus-gap), 0 0 0 4px var(--nav-focus-ring);
  }
}

/* Mobile: .nav-dd is a full-width accordion, so ring the button row. */
@media screen and (max-width: 991px) {
  .nav-dd-toggle:focus-visible {
    box-shadow: 0 0 0 2px var(--nav-focus-gap), 0 0 0 4px var(--nav-focus-ring);
    border-radius: var(--nav-radius-sm);
    /* Lift the focused toggle above the open panel so the ring isn't covered. */
    position: relative;
    z-index: 2;
  }

  /* Room for the first toggle's ring inside the scrolling menu. */
  .nav-menu.is-open {
    padding-top: 4px;
  }
}

/* CTA buttons: focus is on the overlay <a>; ring the .nav-btn and keep its
   variant shadows. */
.nav-btn-link:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.nav-btn--primary:has(> .nav-btn-link:focus-visible) {
  box-shadow: 0 0 0 2px var(--nav-focus-gap), 0 0 0 4px var(--nav-focus-ring),
    0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05),
    inset 0 0 0 1px rgba(10, 13, 18, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.nav-btn--secondary:has(> .nav-btn-link:focus-visible) {
  box-shadow: 0 0 0 2px var(--nav-focus-gap), 0 0 0 4px var(--nav-focus-ring),
    0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05);
}

/* Dropdown items + integration pills: the overlay <a> is clipped by the
   card's overflow:hidden, so ring the card (its own box-shadow isn't clipped). */
.nav-dd-item-link:focus-visible,
.nav-dd-button-link:focus-visible {
  outline: 2px solid transparent;
  outline-offset: -2px;
}

.nav-dd-item:has(> .nav-dd-item-link:focus-visible),
.nav-dd-button:has(> .nav-dd-button-link:focus-visible) {
  background-color: var(--nav-hover-bg);
  box-shadow: 0 0 0 2px var(--nav-focus-gap), 0 0 0 4px var(--nav-focus-ring);
}

/* Mobile: padding so rings aren't clipped by the panel's overflow:hidden. */
@media screen and (max-width: 991px) {
  .nav-dd-panel.is-open {
    padding: 0 4px 4px;
  }
}

/* The name of an overlay link (menu items, pills, the CTA buttons, the logo).
   Kept as text inside the <a> rather than an aria-label so GTM's Click Text,
   which reads the link's own text, has a value -- the same fix the site's
   overlay cards use. */
.nav-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Reveal (keep last) ---
   The site head hides code-islands until their CSS loads, to avoid an
   unstyled flash. !important in the shadow tree beats the outer rule, so
   this reveals the component once this file applies. */
:host {
  display: contents !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
}

/* Promo banner above the nav bar -- Figma "Banner", Size=Full-width.
   The --nav-* tokens come from Navigation.css, which declares them on both
   .nav-root (the visible banner) and .nav-promo-spacer (its invisible twin in
   the page flow), so the two always resolve the same sizes. */

.nav-promo,
.nav-promo-spacer {
  --nav-promo-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nav-promo-duration: 0.35s;

  /* Light theme (Figma "Default") */
  --nav-promo-bg: var(--_theme---background-2, var(--nav-neutral-50));
  --nav-promo-border: var(--nav-border);
  --nav-promo-title: var(--nav-text);
  --nav-promo-copy: var(--nav-text-secondary);
  --nav-promo-close: var(--nav-neutral-500);
  --nav-promo-close-hover: var(--nav-text-tertiary);
  --nav-promo-close-hover-bg: var(--nav-hover-bg);
  /* The timer boxes are white in every site theme, so their border and digits
     use fixed swatches, not the theme's text/border (light in theme-dark). */
  --nav-promo-timer-bg: var(--nav-neutral);
  --nav-promo-timer-border: var(--nav-neutral-300);
  --nav-promo-timer-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
  --nav-promo-timer-text: var(--nav-neutral-900);

  display: grid;
  grid-template-rows: 1fr;
  font-family: var(--nav-font);
  transition: grid-template-rows var(--nav-promo-duration) var(--nav-promo-ease),
    margin var(--nav-promo-duration) var(--nav-promo-ease);
}

/* Brand theme. Supporting copy is brand-50, not Figma's #e9d7fe: that tint is
   under 4.5:1 on brand-600 at 14px, brand-50 clears it (WCAG 1.4.3). */
.nav-promo.is-theme-brand,
.nav-promo-spacer.is-theme-brand {
  --nav-promo-bg: var(--nav-brand-600);
  --nav-promo-border: var(--nav-brand-700);
  --nav-promo-title: var(--nav-neutral);
  --nav-promo-copy: var(--nav-brand-50);
  --nav-promo-close: rgba(255, 255, 255, 0.7);
  --nav-promo-close-hover: var(--nav-neutral);
  --nav-promo-close-hover-bg: rgba(255, 255, 255, 0.12);
  --nav-promo-timer-bg: transparent;
  --nav-promo-timer-border: var(--_default---swatch--brand-500-main, #a66ee2);
  --nav-promo-timer-shadow: none;
  --nav-promo-timer-text: var(--nav-neutral);
}

.nav-promo-spacer *,
.nav-promo-spacer *::before,
.nav-promo-spacer *::after {
  box-sizing: border-box;
}

/* Inside the fixed header: runs edge to edge over the header's 1rem top
   padding, so it sits flush on the top of the viewport, and gives that 1rem
   back below itself so the bar keeps its usual gap. Closed, both margins go
   to 0 and the header is exactly what it was without a banner. */
.nav-promo {
  align-self: stretch;
  margin: -1rem 0 1rem;
}

.nav-promo-spacer {
  visibility: hidden;
  pointer-events: none;
}

.nav-promo.is-closed,
.nav-promo-spacer.is-closed {
  grid-template-rows: 0fr;
  margin: 0;
}

/* Hidden once collapsed, so nothing inside can be reached or read. */
.nav-promo.is-closed {
  visibility: hidden;
  transition: grid-template-rows var(--nav-promo-duration) var(--nav-promo-ease),
    margin var(--nav-promo-duration) var(--nav-promo-ease),
    visibility 0s linear var(--nav-promo-duration);
}

.nav-promo.is-instant,
.nav-promo-spacer.is-instant {
  transition: none;
}

.nav-promo-clip {
  min-height: 0;
  overflow: hidden;
}

.nav-promo-bar {
  position: relative;
  /* Inset line, not a border: Figma draws the stroke inside the frame, so the
     bar keeps the design's exact height (64 / 48 / 50px). */
  box-shadow: inset 0 -1px 0 var(--nav-promo-border);
  background-color: var(--nav-promo-bg);
  color: var(--nav-promo-copy);
  transition: opacity 0.25s ease;
}

.nav-promo.is-closed .nav-promo-bar {
  opacity: 0;
}

.nav-promo-container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ---- Copy ---- */

.nav-promo-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.375rem;
  min-width: 0;
  margin: 0;
  font-size: var(--nav-text-small);
  line-height: var(--nav-text-small-line);
}

.nav-promo-title {
  color: var(--nav-promo-title);
  font-weight: var(--nav-weight-medium);
}

.nav-promo-text {
  color: var(--nav-promo-copy);
  font-weight: var(--nav-weight-regular);
}

/* ---- Icon + button (Figma "Single action") ---- */

.is-iconButton .nav-promo-container {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.is-iconButton .nav-promo-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 0.75rem;
}

.nav-promo-lead {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  column-gap: 0.75rem;
  min-width: 0;
}

.nav-promo-actions {
  display: flex;
  flex: none;
  align-items: center;
  column-gap: 0.5rem;
}

/* The site's featured-icon tile: a white 40px frame around a raised 32px key.
   It stays white in every site theme, so the frame and the icon use fixed
   swatches -- the theme's text colour turns light in theme-dark, which made
   the icon white on white. */
.nav-promo-icon {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--nav-neutral-300);
  border-radius: 0.625rem;
  background-color: var(--nav-neutral);
}

.nav-promo-icon-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background-color: var(--nav-neutral);
  color: var(--nav-neutral-900);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1),
    0 3px 3px rgba(0, 0, 0, 0.1), 1px 8px 5px rgba(0, 0, 0, 0.05),
    inset 0 -2px 2px rgba(0, 0, 0, 0.1);
}

.nav-promo-icon-svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* Same look as the nav's secondary button (.nav-btn--secondary). */
.nav-promo-button {
  display: inline-flex;
  flex: none;
  justify-content: center;
  align-items: center;
  /* 1px off the Figma padding for the border, so the button is 36px tall. */
  padding: calc(0.5rem - 1px) calc(0.875rem - 1px);
  border: 1px solid var(--nav-btn-secondary-border);
  border-radius: var(--nav-radius-sm);
  background-color: var(--nav-btn-secondary-bg);
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px rgba(10, 13, 18, 0.05);
  font-size: var(--nav-text-small);
  line-height: var(--nav-text-small-line);
  font-weight: var(--nav-weight-medium);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Beats the `.nav-root a { color: inherit }` reset. */
.nav-root .nav-promo-button {
  color: var(--nav-text-tertiary);
}

/* ---- Centered link (Figma "Slim") ---- */

.is-centeredLink .nav-promo-container {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.is-centeredLink .nav-promo-copy {
  justify-content: center;
  text-align: center;
}

.nav-promo-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: currentColor;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.nav-root .nav-promo-link {
  color: var(--nav-promo-copy);
}

/* ---- Countdown ---- */

.is-countdown .nav-promo-container {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.is-countdown .nav-promo-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
}

.is-countdown .nav-promo-copy {
  column-gap: 0.5rem;
}

.nav-promo-divider {
  display: block;
  width: 1px;
  height: 1rem;
  background-color: var(--nav-promo-border);
}

.nav-promo-timer {
  display: flex;
  flex: none;
  align-items: center;
  column-gap: 0.5rem;
  font-size: var(--nav-text-small);
  line-height: var(--nav-text-small-line);
}

.nav-promo-timer-unit {
  display: flex;
  align-items: center;
  column-gap: 0.375rem;
}

.nav-promo-timer-value {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 1.75rem;
  height: 1.625rem;
  padding: 0.25rem;
  border: 1px solid var(--nav-promo-timer-border);
  border-radius: 0.375rem;
  background-color: var(--nav-promo-timer-bg);
  box-shadow: var(--nav-promo-timer-shadow);
  color: var(--nav-promo-timer-text);
  font-size: var(--nav-text-xsmall);
  line-height: 1.125rem;
  font-weight: var(--nav-weight-medium);
  font-variant-numeric: tabular-nums;
}

.nav-promo-timer-label {
  color: var(--nav-promo-copy);
}

.nav-promo-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Close ---- */

.nav-promo-close {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--nav-radius-sm);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-root .nav-promo-close {
  color: var(--nav-promo-close);
}

/* Slim and countdown: centred copy, close pinned to the viewport's right edge
   (not the container's), with side padding wide enough that long copy never
   runs under it. */
.is-centeredLink .nav-promo-container,
.is-countdown .nav-promo-container {
  padding-right: 3rem;
  padding-left: 3rem;
}

.is-centeredLink .nav-promo-close,
.is-countdown .nav-promo-close {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
}

.nav-promo-close-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  /* The click lands on the button that carries the tracking attributes,
     never on the SVG inside it. */
  pointer-events: none;
}

/* ---- Hover ---- */

@media (hover: hover) and (pointer: fine) {
  .nav-root .nav-promo-button:hover {
    background-color: var(--nav-btn-secondary-bg-hover);
    color: var(--nav-btn-secondary-text-hover);
  }

  .nav-root .nav-promo-link:hover {
    color: var(--nav-promo-title);
  }

  .nav-root .nav-promo-close:hover {
    background-color: var(--nav-promo-close-hover-bg);
    color: var(--nav-promo-close-hover);
  }
}

/* ---- Focus: the site's double ring, the gap in the banner colour ---- */

.nav-promo-button:focus-visible,
.nav-promo-link:focus-visible,
.nav-promo-close:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--nav-promo-bg), 0 0 0 4px var(--nav-focus-ring);
}

.nav-promo.is-theme-brand .nav-promo-button:focus-visible,
.nav-promo.is-theme-brand .nav-promo-link:focus-visible,
.nav-promo.is-theme-brand .nav-promo-close:focus-visible {
  box-shadow: 0 0 0 2px var(--nav-promo-bg), 0 0 0 4px var(--nav-neutral);
}

.nav-promo-link:focus-visible {
  border-radius: 0.125rem;
}

/* ---- Mobile (Figma Breakpoint=Mobile): stacked, close in the top corner ---- */

@media screen and (max-width: 767px) {
  .nav-promo-container,
  .is-iconButton .nav-promo-container,
  .is-centeredLink .nav-promo-container,
  .is-countdown .nav-promo-container {
    padding: 1rem;
  }

  .nav-promo-copy,
  .is-centeredLink .nav-promo-copy,
  .is-countdown .nav-promo-copy {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.125rem;
    text-align: left;
  }

  /* Clear of the close button in the corner. */
  .nav-promo-title {
    padding-right: 2rem;
  }

  .nav-promo-divider {
    display: none;
  }

  .is-iconButton .nav-promo-content {
    flex-direction: column;
    align-items: stretch;
    row-gap: 0.75rem;
  }

  /* .nav-promo-lead keeps its desktop row: the icon sits beside the copy,
     centred on it, and only the button drops to its own full-width line. */

  .nav-promo-actions {
    display: block;
  }

  .nav-promo-button {
    width: 100%;
  }

  .is-countdown .nav-promo-content {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.75rem;
  }

  .nav-promo-close,
  .is-centeredLink .nav-promo-close,
  .is-countdown .nav-promo-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-promo,
  .nav-promo-spacer,
  .nav-promo.is-closed,
  .nav-promo-bar {
    transition: none;
  }
}