:root {
  --dx-btn-radius: 4px;
  --dx-btn-pad-y-md: 0.72rem;
  --dx-btn-pad-x-md: 1.15rem;
  --dx-btn-pad-y-sm: 0.46rem;
  --dx-btn-pad-x-sm: 0.8rem;
  --dx-btn-font-size-md: clamp(12px, 1.05vw, 13px);
  --dx-btn-font-size-sm: clamp(11px, 0.95vw, 12px);
  --dx-btn-min-h-md: 2.4rem;
  --dx-btn-min-h-sm: 2rem;
  --dx-btn-primary-weight: 800;
  --dx-btn-secondary-weight: 700;
  --dx-btn-primary-border: transparent;
  --dx-btn-secondary-border: rgba(32, 32, 32, 0.22);
  --dx-btn-primary-bg: linear-gradient(130deg, var(--dex-accent, #ff1910), #ff9810);
  --dx-btn-secondary-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(245, 249, 255, 0.52));
  --dx-btn-primary-shadow: 0 10px 30px rgba(255, 0, 80, 0.25);
  --dx-btn-primary-shadow-hover: 0 12px 36px rgba(255, 0, 80, 0.28);
  --dx-btn-primary-shadow-focus: 0 0 0 4px rgba(255, 25, 16, 0.25), 0 10px 30px rgba(255, 0, 80, 0.25);
  --dx-btn-glint: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.75) 50%, transparent 70%);
  --dx-btn-hover-lift: -2px;
  --dx-btn-hover-scale: var(--dx-motion-scale-hover, 1.015);
  --dx-btn-press-scale: var(--dx-motion-scale-press, 0.985);
  --dx-btn-dur-xs: var(--dx-motion-dur-xs, 120ms);
  --dx-btn-dur-sm: var(--dx-motion-dur-sm, 180ms);
  --dx-btn-dur-md: var(--dx-motion-dur-md, 260ms);
  --dx-btn-ease-standard: var(--dx-motion-ease-standard, cubic-bezier(.22, .8, .24, 1));
  --dx-btn-ease-emphasis: var(--dx-motion-ease-emphasis, cubic-bezier(.2, .9, .25, 1));
  --dx-btn-ease-exit: var(--dx-motion-ease-exit, cubic-bezier(.4, 0, .2, 1));

  /* The legacy Squarespace shell (#siteWrapper.site-wrapper, present on the home
     route and retained across soft navigation) carries high-specificity button
     rules that read these padding vars. They were never defined, so buttons
     under that shell collapsed to zero padding (full-bleed gradient) anywhere
     reached via soft nav. Map them to the canonical button padding. */
  --primary-button-padding-y: var(--dx-btn-pad-y-md);
  --primary-button-padding-x: var(--dx-btn-pad-x-md);
  --secondary-button-padding-y: var(--dx-btn-pad-y-md);
  --secondary-button-padding-x: var(--dx-btn-pad-x-md);
  --tertiary-button-padding-y: var(--dx-btn-pad-y-md);
  --tertiary-button-padding-x: var(--dx-btn-pad-x-md);

  /* Same shell sets `border-style: solid; border-width: var(--*-button-stroke)`.
     Undefined, the width computed to the initial `medium` (~3px) and the color
     to currentColor (white text) — a white inset ring on first load. Canonical
     buttons are borderless, so pin the stroke to zero. */
  --primary-button-stroke: 0;
  --secondary-button-stroke: 0;
  --tertiary-button-stroke: 0;
}

button,
input,
select,
textarea,
.dx-button-element,
.dx-block-button-element,
.sqs-button-element {
  font: inherit;
}

button,
.dx-button-element,
.dx-block-button-element,
.sqs-button-element,
.cta-btn,
.cta,
.dex-btn,
.ghost,
.ghost-btn,
.theme-btn--primary,
.btn--border.theme-btn--primary-inverse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  border: var(--dx-border-thin, var(--border-001)) solid transparent;
  border-radius: var(--dx-btn-radius) !important;
  padding: var(--dx-btn-pad-y-md) var(--dx-btn-pad-x-md);
  text-decoration: none;
  line-height: 1.05;
  min-height: var(--dx-btn-min-h-md);
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none !important;
  white-space: nowrap;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
  font-feature-settings: "liga" 1, "dlig" 1, "calt" 1, "ss01" 1, "salt" 1, "rlig" 1;
}

button,
.dx-button-element,
.dx-block-button-element,
.sqs-button-element {
  border-color: var(--dx-color-border, var(--color-006));
  background: var(--dx-color-surface, var(--color-002));
  color: var(--dx-color-text, var(--color-004));
  box-shadow: var(--dx-shadow-soft, var(--shadow-001));
}

.dx-button-element--primary,
.dx-block-button-element--primary,
.sqs-button-element--primary,
.theme-btn--primary,
.cta-btn,
.cta,
.dex-btn {
  border: 0;
  background: var(--dx-btn-primary-bg);
  color: #fff;
  box-shadow: var(--dx-btn-primary-shadow);
  font-family: var(--font-heading, "Stretch Pro", sans-serif);
  font-size: var(--dx-btn-font-size-md);
  font-weight: var(--dx-btn-primary-weight);
}

.dx-button-element--secondary,
.dx-block-button-element--secondary,
.sqs-button-element--secondary,
.ghost,
.ghost-btn,
.btn--border.theme-btn--primary-inverse,
.dx-button-element--primary.btn--border.theme-btn--primary-inverse {
  border: 0;
  background: var(--dx-btn-secondary-bg);
  color: #000;
  box-shadow: none;
  font-family: var(--font-heading, "Stretch Pro", sans-serif);
  font-size: var(--dx-btn-font-size-md);
  font-weight: var(--dx-btn-secondary-weight);
}

/* Primitive lock: known runtime hooks must resolve to canonical styles */
.header-actions-action--cta .btn.dx-button-element--primary,
#heroExplore.dx-button-element--primary,
#btn-call.dx-button-element--primary,
.join-button.dx-button-element--primary,
.dex-btn.dx-button-element--primary {
  border: 0 !important;
  background: var(--dx-btn-primary-bg) !important;
  color: #fff !important;
  box-shadow: var(--dx-btn-primary-shadow) !important;
  padding: var(--dx-btn-pad-y-md) var(--dx-btn-pad-x-md) !important;
  min-height: var(--dx-btn-min-h-md) !important;
  font-family: var(--font-heading, "Stretch Pro", sans-serif) !important;
  font-size: var(--dx-btn-font-size-md) !important;
  font-weight: var(--dx-btn-primary-weight) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#auth-ui-signin.dx-button-element--secondary,
#btn-catalog.dx-button-element--secondary,
.join-button.dx-button-element--secondary,
.ghost.dx-button-element--secondary,
.btn--border.theme-btn--primary-inverse.dx-button-element--secondary {
  border: 0 !important;
  background: var(--dx-btn-secondary-bg) !important;
  color: #000 !important;
  box-shadow: none !important;
  padding: var(--dx-btn-pad-y-md) var(--dx-btn-pad-x-md) !important;
  min-height: var(--dx-btn-min-h-md) !important;
  font-family: var(--font-heading, "Stretch Pro", sans-serif) !important;
  font-size: var(--dx-btn-font-size-md) !important;
  font-weight: var(--dx-btn-secondary-weight) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.dx-button-size--md {
  padding: var(--dx-btn-pad-y-md) var(--dx-btn-pad-x-md);
  font-size: var(--dx-btn-font-size-md);
  min-height: var(--dx-btn-min-h-md);
}

.dx-button-size--sm,
.cta-btn.sm,
.ghost-btn.sm {
  padding: var(--dx-btn-pad-y-sm) var(--dx-btn-pad-x-sm);
  font-size: var(--dx-btn-font-size-sm);
  min-height: var(--dx-btn-min-h-sm);
  letter-spacing: 0.02em;
}

/* First-paint collection favorites shared by /entry/ and /uav/. */
body.dx-entry-page {
  --dx-test5-header-radius: var(--radius-002, 4px);
}

body.dx-entry-page .dex-collections .dx-fav-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.dx-entry-page .dex-collections .dx-fav-heart-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  width: auto;
  padding: 0.42rem 0.56rem !important;
  border: 1px solid rgba(27, 33, 45, 0.24) !important;
  border-radius: var(--dx-test5-header-radius) !important;
  background: rgba(255, 255, 255, 0.3) !important;
  color: rgba(29, 33, 42, 0.86) !important;
  line-height: 1 !important;
  cursor: pointer !important;
  overflow: visible !important;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 180ms ease !important;
}

body.dx-entry-page .dex-collections .dx-fav-heart-btn:hover,
body.dx-entry-page .dex-collections .dx-fav-heart-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(224, 36, 94, 0.42) !important;
}

body.dx-entry-page .dex-collections .dx-fav-heart-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.1rem !important;
  height: 1.1rem !important;
  pointer-events: none !important;
}

body.dx-entry-page .dex-collections .dx-fav-heart-svg {
  width: 1.1rem !important;
  height: 1.1rem !important;
  stroke: currentColor !important;
  filter: drop-shadow(0 0 0.25px rgba(0, 0, 0, 0.25));
}

body.dx-entry-page .dex-collections .dx-fav-heart-svg path {
  stroke-width: 1.8;
  fill: transparent;
  transition: fill 160ms ease, stroke 160ms ease;
}

body.dx-entry-page .dex-collections .dx-fav-heart-chip {
  font-family: var(--font-heading, "Typefesse", sans-serif) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

body.dx-entry-page .dex-collections .overview-item--favorite-collection button.dx-fav-entry-toggle.dx-fav-heart-btn {
  width: 100% !important;
  min-height: 2rem !important;
  padding: var(--primary-button-padding-y, var(--dx-btn-pad-y-md)) var(--primary-button-padding-x, var(--dx-btn-pad-x-md)) !important;
  border: 0 !important;
  border-radius: var(--dx-test5-header-radius) !important;
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow: var(--dx-btn-primary-shadow) !important;
}

body.dx-entry-page .dex-collections .overview-item--favorite-buckets .overview-badges button.dx-fav-bucket-toggle.dx-fav-heart-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--dx-entry-tile-height, clamp(28px, 1.85vw, 34px)) !important;
  max-height: var(--dx-entry-tile-height, clamp(28px, 1.85vw, 34px)) !important;
  height: var(--dx-entry-tile-height, clamp(28px, 1.85vw, 34px)) !important;
  padding: clamp(3px, 0.45vw, 6px) !important;
  border-color: transparent !important;
  border-radius: var(--dx-test5-header-radius) !important;
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body.dx-entry-page .dex-collections .overview-item--favorite-buckets .overview-badges button.dx-fav-bucket-toggle.dx-fav-heart-btn .dx-fav-heart-icon {
  display: inline-flex !important;
}

body.dx-entry-page .dex-collections .dx-fav-heart-btn.is-active {
  color: #e0245e !important;
  border-color: rgba(224, 36, 94, 0.44) !important;
  background: rgba(224, 36, 94, 0.1) !important;
}

body.dx-entry-page .dex-collections .dx-fav-heart-btn.is-active .dx-fav-heart-svg path {
  fill: currentColor;
}

.dx-button-element .dx-add-to-cart-button-inner,
.dx-block-button-element .dx-add-to-cart-button-inner,
.sqs-button-element .dx-add-to-cart-button-inner,
.cta-btn .dx-add-to-cart-button-inner,
.cta .dx-add-to-cart-button-inner,
.dex-btn .dx-add-to-cart-button-inner,
.ghost .dx-add-to-cart-button-inner,
.ghost-btn .dx-add-to-cart-button-inner,
.theme-btn--primary .dx-add-to-cart-button-inner,
.btn--border.theme-btn--primary-inverse .dx-add-to-cart-button-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
}

.dx-button-block {
  display: flex;
  width: 100%;
  min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .dx-button-element--primary,
  .dx-block-button-element--primary,
  .sqs-button-element--primary,
  .theme-btn--primary,
  .cta-btn,
  .cta,
  .dex-btn,
  .dx-button-element--secondary,
  .dx-block-button-element--secondary,
  .sqs-button-element--secondary,
  .ghost,
  .ghost-btn,
  .btn--border.theme-btn--primary-inverse {
    transition:
      transform var(--dx-btn-dur-sm) var(--dx-btn-ease-emphasis),
      box-shadow var(--dx-btn-dur-md) var(--dx-btn-ease-standard),
      background-color var(--dx-btn-dur-md) var(--dx-btn-ease-standard),
      border-color var(--dx-btn-dur-md) var(--dx-btn-ease-standard),
      filter var(--dx-btn-dur-md) var(--dx-btn-ease-standard),
      opacity var(--dx-btn-dur-sm) var(--dx-btn-ease-standard);
  }

  .dx-button-element--primary:hover,
  .dx-block-button-element--primary:hover,
  .sqs-button-element--primary:hover,
  .theme-btn--primary:hover,
  .cta-btn:hover,
  .cta:hover,
  .dex-btn:hover,
  .dx-button-element--secondary:hover,
  .dx-block-button-element--secondary:hover,
  .sqs-button-element--secondary:hover,
  .ghost:hover,
  .ghost-btn:hover,
  .btn--border.theme-btn--primary-inverse:hover {
    transform: translateY(var(--dx-btn-hover-lift)) scale(var(--dx-btn-hover-scale));
  }

  .dx-button-element--primary:hover,
  .dx-block-button-element--primary:hover,
  .sqs-button-element--primary:hover,
  .theme-btn--primary:hover,
  .cta-btn:hover,
  .cta:hover,
  .dex-btn:hover {
    box-shadow: var(--dx-btn-primary-shadow-hover);
  }

  .dx-button-element--primary:active,
  .dx-block-button-element--primary:active,
  .sqs-button-element--primary:active,
  .theme-btn--primary:active,
  .cta-btn:active,
  .cta:active,
  .dex-btn:active,
  .dx-button-element--secondary:active,
  .dx-block-button-element--secondary:active,
  .sqs-button-element--secondary:active,
  .ghost:active,
  .ghost-btn:active,
  .btn--border.theme-btn--primary-inverse:active {
    transform: translateY(0) scale(var(--dx-btn-press-scale));
    transition-duration: var(--dx-btn-dur-xs);
    transition-timing-function: var(--dx-btn-ease-exit);
  }

  .dx-button-element--primary:not(:hover):not(:focus-visible),
  .dx-block-button-element--primary:not(:hover):not(:focus-visible),
  .sqs-button-element--primary:not(:hover):not(:focus-visible),
  .theme-btn--primary:not(:hover):not(:focus-visible),
  .cta-btn:not(:hover):not(:focus-visible),
  .cta:not(:hover):not(:focus-visible),
  .dex-btn:not(:hover):not(:focus-visible),
  .dx-button-element--secondary:not(:hover):not(:focus-visible),
  .dx-block-button-element--secondary:not(:hover):not(:focus-visible),
  .sqs-button-element--secondary:not(:hover):not(:focus-visible),
  .ghost:not(:hover):not(:focus-visible),
  .ghost-btn:not(:hover):not(:focus-visible),
  .btn--border.theme-btn--primary-inverse:not(:hover):not(:focus-visible) {
    animation: dx-button-settle var(--dx-btn-dur-xs) var(--dx-btn-ease-standard);
  }
}

.dx-button-element--primary,
.dx-block-button-element--primary,
.sqs-button-element--primary,
.theme-btn--primary,
.cta-btn,
.cta,
.dex-btn {
  position: relative;
  overflow: hidden;
}

@media (hover: hover) {
  .dx-button-element--primary::after,
  .dx-block-button-element--primary::after,
  .sqs-button-element--primary::after,
  .theme-btn--primary::after,
  .cta-btn::after,
  .cta::after,
  .dex-btn::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: var(--dx-btn-glint);
    transform: translateX(-120%);
    pointer-events: none;
  }

  .dx-button-element--primary:hover::after,
  .dx-block-button-element--primary:hover::after,
  .sqs-button-element--primary:hover::after,
  .theme-btn--primary:hover::after,
  .cta-btn:hover::after,
  .cta:hover::after,
  .dex-btn:hover::after,
  .dx-button-element--primary:focus-visible::after,
  .dx-block-button-element--primary:focus-visible::after,
  .sqs-button-element--primary:focus-visible::after,
  .theme-btn--primary:focus-visible::after,
  .cta-btn:focus-visible::after,
  .cta:focus-visible::after,
  .dex-btn:focus-visible::after {
    animation: dx-button-glint 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

button:focus-visible,
.dx-button-element:focus-visible,
.dx-block-button-element:focus-visible,
.sqs-button-element:focus-visible,
.cta-btn:focus-visible,
.cta:focus-visible,
.dex-btn:focus-visible,
.ghost:focus-visible,
.ghost-btn:focus-visible,
.theme-btn--primary:focus-visible,
.btn--border.theme-btn--primary-inverse:focus-visible {
  outline: none;
  box-shadow: var(--dx-btn-primary-shadow-focus);
}

button:disabled,
.dx-button-element:disabled,
.dx-block-button-element:disabled,
.sqs-button-element:disabled,
.cta-btn:disabled,
.cta[aria-disabled='true'],
.dex-btn[aria-disabled='true'],
.ghost[aria-disabled='true'],
.ghost-btn:disabled,
.theme-btn--primary[aria-disabled='true'],
.btn--border.theme-btn--primary-inverse[aria-disabled='true'],
.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  transform: none !important;
}

input:not([type='checkbox']):not([type='radio']),
select,
textarea {
  width: 100%;
  border: var(--dx-border-thin, var(--border-001)) solid var(--dx-color-border, var(--color-006));
  border-radius: var(--dx-radius-sm, var(--radius-001));
  background: var(--dx-color-surface, var(--color-002));
  color: var(--dx-color-text, var(--color-004));
  padding: var(--dx-space-xs, var(--space-002)) var(--dx-space-sm, var(--space-003));
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--dx-border-thin, var(--border-001)) solid var(--dx-color-accent, var(--color-007));
  outline-offset: 2px;
}

@keyframes dx-button-glint {
  to {
    transform: translateX(120%);
  }
}

@keyframes dx-button-settle {
  0% {
    transform: translateY(0) scale(1);
  }

  40% {
    transform: translateY(-0.3px) scale(1.006);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* ============================================================================
   dx-pagenav — the one global paged-nav primitive (pips + L/R chevrons).
   iOS UIPageControl-style: windowed dots, capsule active, edge-shrink. Driven by
   /assets/js/dx-pagenav.js. Auto-themes light vs dark (profile-protected / .--on-dark).
   ============================================================================ */
.dx-pagenav {
  --dx-pagenav-size: 8px;
  --dx-pagenav-gap: 7px;
  --dx-pagenav-window: 7;
  --dx-pagenav-active-extra: 12px;
  --dx-pagenav-dot: rgba(34, 40, 54, 0.26);
  --dx-pagenav-active: rgba(20, 24, 34, 0.92);
  --dx-pagenav-ring: rgba(34, 40, 54, 0.22);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  max-width: 100%;
  line-height: 0;
}
.dx-pagenav[data-dx-pagenav-hidden] { display: none; }

.dx-pagenav__viewport {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
}
.dx-pagenav__track {
  display: flex;
  align-items: center;
  gap: var(--dx-pagenav-gap);
  will-change: transform;
  padding: 2px 0;
}
.dx-pagenav__dot {
  flex: 0 0 auto;
  /* !important: these dots are <button>s that inherit host button resets
     (min-height / border-radius) which otherwise stretch them into tall bars. */
  box-sizing: border-box !important;
  width: var(--dx-pagenav-size) !important;
  height: var(--dx-pagenav-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: var(--dx-pagenav-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  appearance: none;
  -webkit-appearance: none;
  background: var(--dx-pagenav-dot);
  cursor: pointer;
  transform-origin: center;
  transition:
    width 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 300ms ease,
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 300ms ease;
}
.dx-pagenav__dot.is-active {
  width: calc(var(--dx-pagenav-size) + var(--dx-pagenav-active-extra)) !important;
  background: var(--dx-pagenav-active);
}
/* Trailing/leading taper indicates more pages — a gentle size step, not a fade. */
.dx-pagenav__dot[data-edge="1"] { transform: scale(0.78); }
.dx-pagenav__dot[data-edge="2"] { transform: scale(0.56); opacity: 0.82; }
.dx-pagenav__dot:hover:not(.is-active) { background: var(--dx-pagenav-active); opacity: 0.55; }
.dx-pagenav__dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--dx-pagenav-ring);
}

.dx-pagenav--on-dark,
body.dx-route-profile-protected .dx-pagenav {
  --dx-pagenav-dot: rgba(255, 255, 255, 0.32);
  --dx-pagenav-active: rgba(255, 255, 255, 0.95);
  --dx-pagenav-ring: rgba(255, 255, 255, 0.3);
}

/* ---- L/R page-nav buttons (the dex hero "tabbed" prototype) ----------------
   A flat, glyphless, semi-transparent rounded-square tab — modelled on the home
   featured-carousel hero nav, which is the global standard. !important throughout
   because this class is also stamped onto legacy arrows (achievements ::before
   glyphs, board/settings heroicons, home carousel) by dx-pagenav.js, overriding
   their existing !important rules. Positioning is left to legacy/wrapper rules. */
.dx-pagenav-arrow {
  --dx-pagenav-arrow-size: clamp(40px, 3vw, 50px);
  --dx-pagenav-arrow-radius: 8px;
  box-sizing: border-box !important;
  width: var(--dx-pagenav-arrow-size) !important;
  height: var(--dx-pagenav-arrow-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: var(--dx-pagenav-arrow-radius) !important;
  border: 1px solid rgba(0, 0, 0, 0.55) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  color: #232323 !important;
  cursor: pointer;
  overflow: hidden !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 200ms ease, opacity 200ms ease;
}
/* Glyphless to match the hero tab — suppress legacy CSS glyphs and any injected
   icon so every nav button reads as the same clean tab. */
.dx-pagenav-arrow::before,
.dx-pagenav-arrow::after { content: none !important; background: none !important; border: 0 !important; }
.dx-pagenav-arrow > svg,
.dx-pagenav-arrow > * { display: none !important; }
.dx-pagenav-arrow:hover { background: rgba(0, 0, 0, 0.36) !important; transform: translateY(-1px); }
.dx-pagenav-arrow:active { transform: scale(0.93); }
.dx-pagenav-arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 25, 16, 0.26) !important; }
.dx-pagenav-arrow:disabled,
.dx-pagenav-arrow[aria-disabled="true"] { opacity: 0.35; cursor: default; pointer-events: none; }

.dx-pagenav-arrow--on-dark,
body.dx-route-profile-protected .dx-pagenav-arrow {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  color: var(--dx-blackglass-ink, #f3f3f4) !important;
}
.dx-pagenav-arrow--on-dark:hover,
body.dx-route-profile-protected .dx-pagenav-arrow:hover { background: rgba(255, 255, 255, 0.26) !important; }

@media (prefers-reduced-motion: reduce) {
  .dx-pagenav__dot,
  .dx-pagenav-arrow { transition: none; }
}