/* =========================================================
   DCA Market Intelligence global design system
   Shared tokens, layout primitives and reusable corporate components.
   ========================================================= */


/* ---------------------------------------------------------
   2. Reset and base elements
   --------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--navy);
  background: var(--white);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

body.mobile-nav-open {
  overflow: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: var(--space-22) 0 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, var(--backdrop), var(--backdrop-secondary));
  transition: opacity var(--transition-fast);
}

body.desktop-menu-open::after {
  opacity: 1;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.icon {
  width: 1em;
  height: 1em;
  display: block;
  flex: 0 0 auto;
  overflow: visible;
}

.inline-arrow {
  display: inline-block;
  vertical-align: -0.12em;
}

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

button, input, select, textarea {
  font: inherit;
}

h1, h2, h3, h4, p, blockquote, ul {
  margin-top: 0;
}

h1 {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-display);
}

h2 {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-title);
}

h3 {
  font-size: var(--font-size-card);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-card);
}

p {
  line-height: var(--line-height-body);
}

/* ---------------------------------------------------------
   3. Layout primitives
   --------------------------------------------------------- */
.container {
  width: min(var(--container-max), calc(100% - (2 * var(--page-gutter))));
  margin-inline: auto;
}

.hero-inner, .split, .cards, .cta-box {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-sm);
}

.container.split {
  column-gap: var(--space-2xl);
}

.split > * {
  grid-column: span 6;
}

.cards > * {
  grid-column: span 4;
}

.coverage .cards > * {
  grid-column: span 6;
}

.section {
  padding: var(--section-space) 0;
}

.section-dark,
section[class*="hero"][class*="--dark"] {
  color: var(--white);
  background: var(--navy);
}

.section-dark .eyebrow {
  color: var(--blue-soft);
}

.section-dark h2 {
  color: var(--white);
}

.section-dark p {
  color: var(--light);
}

.section-heading--centered {
  max-width: var(--measure-wide);
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.section-heading--centered h2 {
  margin-bottom: var(--space-5);
}

.section-heading--centered > p:last-child {
  font-size: var(--font-size-small);
}

.section-heading {
  margin-bottom: var(--space-2xl);
  align-items: end;
}

.section-heading.split {
  column-gap: var(--space-3xl);
}

.section-heading.split > :nth-child(2) {
  justify-self: end;
}

.section-heading h2 {
  margin: 0;
  max-width: var(--measure-wide);
}

.section-heading > p {
  align-self: end;
  max-width: var(--measure-narrow);
  margin: 0;
  font-size: var(--font-size-lead);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   4. Shared typography and controls
   --------------------------------------------------------- */
.eyebrow {
  margin: 0 0 var(--eyebrow-gap);
  color: var(--blue);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small);
  text-transform: uppercase;
}

.intro-dark .eyebrow, .decisions .eyebrow {
  color: var(--blue-soft);
}

.btn {
  min-height: 52px;
  padding: 0 var(--space-16);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-control);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn-small {
  min-height: 40px;
  padding-inline: var(--space-6);
}

.btn-red {
  color: var(--white);
  background: var(--red-action);
}

.btn-blue {
  color: var(--white);
  background: var(--blue);
}

.btn-outline-blue {
  color: var(--blue);
  background: var(--white);
  border-color: var(--blue);
}

.btn-white {
  color: var(--blue);
  background: var(--white);
}

.btn-ghost-white {
  color: var(--white);
  background: transparent;
  border-color: rgba(255,255,255,.75);
}

.btn-arrow {
  position: absolute;
  right: var(--space-5-5);
  width: 16px;
  height: 16px;
  opacity: 0;
  transform: translateX(-7px) scale(.92);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
}

.btn-small .btn-arrow {
  display: none;
}

.btn:focus-visible .btn-arrow {
  opacity: 1;
  transform: translateX(0) scale(1);
}

@media (hover: hover) {
  .btn:hover .btn-arrow, .announcement:hover .btn .btn-arrow {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
  }

  .btn-red:hover {
    background: var(--red-action-hover);
    box-shadow: 0 10px 22px -14px rgba(201,47,63,.68);
  }

  .btn-blue:hover {
    background: var(--cta-color-hover);
    box-shadow: 0 10px 22px -14px rgba(26,104,255,.68);
  }

  .btn-outline-blue:hover {
    color: var(--white);
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: 0 10px 22px -16px rgba(26,104,255,.55);
  }

  .btn-white:hover {
    color: var(--cta-color-hover);
    background: var(--surface-control-hover);
    box-shadow: 0 10px 22px -16px rgba(1,31,46,.28);
  }

  .btn-ghost-white:hover {
    color: var(--white);
    background: rgba(255,255,255,.10);
    border-color: var(--white);
  }
}

.btn:active {
  transform: translateY(0) scale(.985);
  transition-duration: 80ms;
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--border-width-accent) solid var(--blue-soft);
  outline-offset: 3px;
}

.actions {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-sm);
  align-items: center;
}

.actions .btn {
  font-size: var(--font-size-control-large);
}

/* Every hero action group gets the same separation from its copy. */
section[class*="hero"] .actions {
  margin-top: var(--space-8);
}

.hero-bottom .actions {
  justify-content: center;
}

.cta-actions .actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cta-actions .btn {
  width: 100%;
}

/* ---------------------------------------------------------
   5. Header
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  box-shadow: var(--shadow-header);
  transition: box-shadow var(--transition-fast);
}

body.desktop-menu-open .site-header {
  box-shadow: none;
}

.topbar {
  min-height: 88px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-lg);
}

.brand-logo {
  width: 256px;
  height: auto;
  color: var(--navy);
  fill: currentColor;
  display: block;
}

.main-nav, .header-actions {
  display: flex;
  align-items: center;
}

.main-nav {
  gap: var(--space-lg);
  padding-left: var(--space-7-5);
}

.main-nav .nav-trigger {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.sign-in {
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.nav-trigger {
  min-height: 88px;
  padding: 0;
  border: 0;
  color: var(--navy);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.nav-trigger:hover, .nav-trigger[aria-expanded="true"], .nav-trigger[aria-current="page"] {
  color: var(--blue);
}

@media (hover: hover) {
  .nav-trigger:hover {
    transform: translateY(-1px);
  }

  .sign-in:hover {
    color: var(--blue);
    transform: translateY(-1px);
  }
}

.nav-trigger:focus-visible {
  outline: var(--border-width-accent) solid var(--blue-soft);
  outline-offset: 4px;
  border-radius: 4px;
}

.header-actions {
  gap: var(--space-sm);
}

.header-translator {
  min-width: 40px;
  min-height: 32px;
  display: grid;
  align-items: center;
}

/* Mobile/tablet kebab navigation. */
.mobile-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  place-items: center;
  color: var(--navy);
  background: transparent;
  cursor: pointer;
}

.mobile-menu-toggle:hover, .mobile-menu-toggle[aria-expanded="true"] {
  background: var(--pale);
}

.mobile-menu-toggle:focus-visible {
  outline: var(--border-width-accent) solid var(--blue-soft);
  outline-offset: 2px;
}

.kebab-icon {
  display: grid;
  gap: 3px;
  place-items: center;
}

.kebab-icon i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: calc(100svh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  box-shadow: 0 22px 32px -22px rgba(1, 31, 46, .34);
}

.mobile-menu[hidden] {
  display: none !important;
}

.mobile-menu:not([hidden]) {
  animation: mobile-menu-in 150ms ease-out both;
}

@keyframes mobile-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu-inner {
  padding-block: var(--space-2) var(--space-6);
}

.mobile-nav-list {
  display: grid;
}

.mobile-nav-group {
  border-bottom: var(--border-width) solid rgba(1, 31, 46, .10);
}

.mobile-nav-trigger {
  width: 100%;
  min-height: 60px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  color: var(--navy);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  cursor: pointer;
}

.mobile-nav-trigger[aria-expanded="true"] {
  color: var(--blue);
}

.mobile-nav-trigger:focus-visible {
  outline: var(--border-width-accent) solid var(--blue-soft);
  outline-offset: -3px;
}

.accordion-chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: currentColor;
  transition: transform var(--transition-fast);
}

.mobile-nav-trigger[aria-expanded="true"] .mobile-nav-chevron {
  transform: rotate(180deg);
}

.mobile-submenu {
  display: grid;
  gap: var(--space-1);
  padding: 0 0 var(--space-5);
}

.mobile-submenu[hidden] {
  display: none;
}

.mobile-submenu:not([hidden]) {
  animation: mobile-submenu-in 140ms ease-out both;
}

@keyframes mobile-submenu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-submenu > a:not(.mobile-submenu-cta) {
  display: grid;
  gap: var(--space-0-5);
  padding: 9px 0;
}

.mobile-submenu strong {
  color: var(--navy);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-fast);
}

.mobile-submenu span {
  color: var(--text-secondary);
  font-size: var(--font-size-label);
  line-height: 1.5;
}


.mobile-submenu-cta {
  width: fit-content;
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--blue);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.mobile-submenu-cta .inline-arrow {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

@media (hover: hover) {
  .mobile-submenu > a:hover strong {
    color: var(--blue);
  }

  .mobile-submenu-cta:hover {
    transform: translateX(2px);
  }

  .mobile-submenu-cta:hover .inline-arrow {
    transform: translateX(2px);
  }
}

.mobile-menu-actions {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-6);
}

.mobile-menu-actions > a:first-child {
  padding-right: var(--space-2);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.mobile-menu-actions .btn {
  min-height: 44px;
  width: 100%;
  padding-inline: var(--space-3-5);
  font-size: var(--font-size-small);
}

/* Desktop mega navigation. The panels sit over page content without changing layout. */
.mega-menu-shell {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(var(--container-max), calc(100% - (2 * var(--page-gutter))));
  max-height: calc(100vh - 88px);
  transform: translate(-50%, -7px);
  overflow-y: auto;
  z-index: 1100;
  border: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: var(--white);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 22px 30px -24px rgba(1,31,46,.48);
  transition: opacity 130ms ease-out, transform 160ms ease-out, visibility 0s linear 160ms;
  will-change: opacity, transform;
}

.mega-menu-shell.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.mega-menu {
  display: grid;
  grid-template-columns: minmax(320px, 32%) minmax(0, 1fr);
  min-height: 390px;
}

.mega-menu[hidden] {
  display: none;
}

.mega-menu-intro {
  padding: var(--space-10-5) var(--space-18);
  background: var(--white);
}

.mega-menu-intro h2 {
  margin: 0;
  font-size: var(--font-size-mega-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-card);
}

.mega-menu-intro > p {
  max-width: 310px;
  margin: var(--space-3-5) 0 var(--space-4-5);
  color: var(--text-secondary);
  font-size: var(--font-size-mega-copy);
  line-height: var(--line-height-small);
}

.mega-menu-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
  font-size: var(--font-size-mega-copy);
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.mega-menu-cta .inline-arrow {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.mega-menu-links {
  display: grid;
  gap: 13px;
  margin-top: var(--space-6);
  padding-top: var(--space-5-5);
  border-top: var(--border-width) solid rgba(1, 31, 46, .18);
}

.mega-menu-links a {
  width: fit-content;
  color: var(--navy);
  font-size: var(--font-size-mega-copy);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.mega-menu-featured {
  padding: var(--space-12) var(--space-20);
  background: var(--surface-subtle);
}

.mega-menu-label {
  margin: 0 0 var(--space-4-5);
  color: var(--text-nav-label);
  font-size: var(--font-size-mega-label);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  text-transform: uppercase;
}

.mega-menu-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 68px;
  row-gap: var(--space-5-5);
}

.mega-menu-item {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  min-width: 0;
  transition: transform var(--transition-fast);
}

.mega-menu-item strong {
  color: var(--navy);
  font-size: var(--font-size-mega-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-card);
  transition: color var(--transition-fast);
}

.mega-menu-item span {
  max-width: 330px;
  color: var(--text-nav-muted);
  font-size: var(--font-size-mega-copy);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-mega-copy, 1.55);
}

.mega-menu a:hover strong, .mega-menu-links a:hover, .mega-menu-cta:hover {
  color: var(--blue);
}

@media (hover: hover) {
  .mega-menu-item:hover, .mega-menu-links a:hover {
    transform: translateX(3px);
  }

  .mega-menu-cta:hover {
    transform: translateX(2px);
  }

  .mega-menu-cta:hover .inline-arrow {
    transform: translateX(3px);
  }
}

/* Delayed benchmark slider. Data comes from the production delayed-price feed. */
.market-ticker {
  color: var(--white);
  background: var(--navy);
}

.benchmark-slider {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: var(--space-3-5);
}

.benchmark-slider-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.benchmark-slider-label > strong {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
}

.benchmark-info {
  position: relative;
}

.benchmark-info-trigger, .benchmark-slider-nav {
  border: 0;
  display: grid;
  place-items: center;
  color: var(--white);
  background: transparent;
  cursor: pointer;
}

.benchmark-info-trigger {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--blue-soft);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.benchmark-info-trigger .icon {
  width: 17px;
  height: 17px;
}

.benchmark-info-trigger[aria-expanded="true"] {
  color: var(--white);
  background: rgba(255,255,255,.10);
}

.benchmark-info-popover {
  position: absolute;
  top: calc(100% + var(--space-3));
  left: -8px;
  z-index: 1200;
  width: min(330px, calc(100vw - 32px));
  padding: var(--space-4-5) var(--space-5);
  border: var(--border-width) solid var(--border-divider);
  border-radius: var(--radius-md);
  color: var(--navy);
  background: var(--white);
  box-shadow: var(--shadow-floating);
  white-space: normal;
}

.benchmark-info-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--space-4-5);
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-left: var(--border-width) solid var(--border-divider);
  border-top: var(--border-width) solid var(--border-divider);
  background: var(--white);
}

.benchmark-info-popover strong {
  display: block;
  margin-bottom: var(--space-1-5);
  font-size: var(--font-size-small);
}

.benchmark-info-popover p {
  margin: 0 0 var(--space-2-5);
  color: var(--text-secondary);
  font-size: var(--font-size-label);
  line-height: var(--line-height-small);
}

.benchmark-info-popover a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--blue);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
}

.benchmark-info-popover .inline-arrow {
  width: 13px;
  height: 13px;
}

.benchmark-slider-nav {
  width: 38px;
  height: 38px;
  border: var(--border-width) solid rgba(255,255,255,.20);
  border-radius: 50%;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.benchmark-slider-nav .icon {
  width: 16px;
  height: 16px;
}

.benchmark-slider-nav:disabled {
  opacity: .32;
  cursor: default;
}

@media (hover: hover) {
  .benchmark-info-trigger:hover {
    color: var(--white);
    background: rgba(255,255,255,.10);
  }

  .benchmark-slider-nav:not(:disabled):hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.38);
  }
}

.benchmark-slider-viewport {
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.benchmark-slider-viewport::-webkit-scrollbar {
  display: none;
}

.benchmark-slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(190px, 18vw, 230px);
  gap: var(--space-3);
  width: max-content;
  min-width: 100%;
}

.benchmark-slide {
  min-height: 44px;
  padding: 7px var(--space-3-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3-5);
  scroll-snap-align: start;
  border-left: var(--border-width) solid rgba(255,255,255,.12);
  transition: background-color var(--transition-fast);
}

.benchmark-slide:first-child {
  border-left-color: transparent;
}

.benchmark-slide-name {
  overflow: hidden;
  color: var(--white);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.benchmark-slide-values {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.benchmark-slide-values strong {
  color: var(--white);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.benchmark-change {
  font-size: var(--font-size-label);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
}

.benchmark-change.is-up {
  color: var(--color-up);
}

.benchmark-change.is-down {
  color: var(--red-on-dark);
}

.benchmark-change.is-neutral {
  color: var(--muted);
}

@media (hover: hover) {
  .benchmark-slide:hover {
    background: rgba(255,255,255,.06);
  }
}

@media (max-width: 1120px) and (min-width: 641px) {
  .benchmark-slider {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .benchmark-slider-label {
    display: none;
  }
}

/* ---------------------------------------------------------
   6. Hero
   --------------------------------------------------------- */
.hero, .motion-hero {
  --motion-hero-height: 820px;
  --motion-hero-overlay-height: 860px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
}

/* Reusable still poster/fallback for page heroes with motion. */
.hero::before, .motion-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -3;
  height: var(--motion-hero-height);
  pointer-events: none;
  background: url("../assets/hero-background.webp") center top / cover no-repeat;
}

/* Shared DCA hero wash: keeps copy readable and fades motion into the page. */
.hero::after, .motion-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: var(--motion-hero-overlay-height);
  pointer-events: none;
  background: linear-gradient( to bottom, rgba(240,248,255,.72) 0, rgba(240,248,255,.80) 62%, rgba(240,248,255,.94) 78%, var(--white) 100% );
}

.motion-hero > .container {
  position: relative;
  z-index: 1;
}

.hero-background-video {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -2;
  width: max(100%, 1440px);
  height: var(--motion-hero-height);
  max-width: none;
  transform: translate3d(-50%, 0, 0);
  backface-visibility: hidden;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 420ms ease-out;
}

.hero-background-video.is-ready {
  opacity: 1;
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-10) var(--space-28);
  row-gap: var(--space-xl);
}

.announcement {
  grid-column: 3 / 11;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 50px;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.event-logo img {
  width: 120px;
  height: auto;
  transition: transform var(--transition);
}

@media (hover: hover) {
  .announcement:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-floating);
  }

  .announcement:hover .event-logo img {
    transform: scale(1.025);
  }
}

.announcement-copy {
  display: grid;
  gap: var(--space-1);
}

.announcement-copy small {
  color: var(--blue);
  font-size: var(--font-size-label);
}

.announcement-copy strong {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.announcement-copy span {
  font-size: var(--font-size-body);
}

.announcement .btn {
  border-radius: var(--radius-sm);
}

.hero-copy, .platform-shot-wrap, .carousel-dots, .hero-bottom {
  grid-column: 1 / -1;
}

.hero-copy {
  text-align: center;
}

.hero-copy h1 {
  max-width: var(--container-max);
  margin: 0 auto;
}

.hero-copy h1 span {
  display: block;
  color: var(--blue);
}

.hero-copy p, .hero-bottom > p:first-child {
  max-width: var(--measure-wide);
  margin: var(--space-6) auto 0;
  color: var(--black);
  font-size: var(--font-size-lead);
}

.platform-shot-wrap {
  width: min(var(--media-max), 100%);
  aspect-ratio: 16 / 9;
  justify-self: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-platform);
  box-shadow: 0 8px 24px rgba(1,31,46,.12);
}

.platform-slider-track {
  display: grid;
}

.platform-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.012);
  transition: opacity 380ms ease, transform 520ms cubic-bezier(.2,.65,.3,1), visibility 0s linear 520ms;
}

.platform-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s;
}

.platform-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d8e4ea;
  cursor: pointer;
  transition: width var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.carousel-dot.is-active {
  width: 24px;
  border-radius: var(--radius-pill);
  background: var(--blue);
}

.carousel-dot:focus-visible {
  outline: var(--border-width-medium) solid var(--blue);
  outline-offset: 3px;
}

@media (hover: hover) {
  .carousel-dot:hover {
    transform: scale(1.18);
  }
}

.hero-bottom {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.hero-bottom > p:first-child {
  margin-top: 0;
}

.client-strip {
  padding: var(--space-8-5) 0 var(--space-11);
  border-bottom: var(--border-width) solid var(--border-soft);
  background: var(--white);
}

.client-strip .trusted-label {
  margin: 0 0 var(--space-6-5);
  text-align: center;
  font-weight: var(--font-weight-semibold);
}

.trusted-label {
  margin: var(--space-12) 0 0;
  color: var(--black);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-semibold);
}

.clients-carousel {
  width: min(1120px, 100%);
  margin-inline: auto;
  overflow: hidden;
  position: relative;
  padding-block: var(--space-2);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.clients-track {
  width: max-content;
  display: flex;
  align-items: center;
  animation: clients-scroll 42s linear infinite;
  will-change: transform;
}

.clients-set {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-right: var(--space-12);
}

.clients-set span {
  width: 148px;
  height: 68px;
  flex: 0 0 148px;
  display: grid;
  place-items: center;
}

.clients-set img {
  display: block;
  max-width: 132px;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .72;
  filter: grayscale(1);
  transition: opacity var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast);
}

@media (hover: hover) {
  .clients-carousel:hover .clients-track {
    animation-play-state: paused;
  }

  .clients-set span:hover img {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.045);
  }
}

@keyframes clients-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------------------------------------------------------
   7. Intro and benefits
   --------------------------------------------------------- */
.intro-dark {
  padding: var(--section-space-compact) 0 var(--space-3xl);
  color: var(--white);
  background: var(--navy);
}

.intro-copy {
  max-width: 720px;
  text-align: center;
}

.intro-copy h2 {
  margin: 0;
}

.intro-copy > p:last-child {
  max-width: 600px;
  margin: var(--space-8) auto 0;
  color: var(--light);
  font-size: var(--font-size-body);
}

.benefit-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  min-height: 160px;
  margin-top: var(--space-3xl);
  margin-bottom: -160px;
  padding: var(--space-8) var(--space-12);
  position: relative;
  z-index: 2;
  border-radius: var(--radius-card);
  color: var(--white);
  background: var(--blue);
  box-shadow: var(--shadow-card);
}

@media (min-width: 961px) {
  .benefit-strip.container {
    width: min(calc((100% - 64px) * .833333), calc(var(--container-max) * .833333));
  }
}

.benefit-strip span {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.benefit-strip i, .check-list li::before, .reason-list li > span {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: var(--border-width-medium) solid var(--blue-soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
}

/* ---------------------------------------------------------
   8. Markets and platform cards
   --------------------------------------------------------- */
.coverage {
  padding-top: 192px;
}

.market-card, .feature-card, .article-card {
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.market-card {
  min-height: 270px;
  padding: var(--space-12);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  color: var(--white);
  background: var(--navy);
  transition: transform var(--transition), box-shadow var(--transition);
}

.market-card::before, .market-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.market-card::before {
  z-index: -2;
  background-image: var(--market-image);
  background-position: center;
  background-size: cover;
  transform: scale(1.001);
  transition: transform var(--transition-slow);
}

.market-card::after {
  z-index: -1;
  background: rgba(1,31,46,.58);
  transition: background-color var(--transition);
}

.market-card > * {
  position: relative;
  z-index: 1;
}

.coverage .market-card:nth-child(1) {
  --market-image: url("../assets/dairy.webp");
}

.coverage .market-card:nth-child(2) {
  --market-image: url("../assets/potatoes.webp");
}

.coverage .market-card:nth-child(3) {
  --market-image: url("../assets/meat.webp");
}

.coverage .market-card:nth-child(4) {
  --market-image: url("../assets/crops.webp");
}

@media (hover: hover) {
  .market-card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-card-hover);
  }

  .market-card:hover::before {
    transform: scale(1.055);
  }

  .market-card:hover::after {
    background: rgba(1,31,46,.64);
  }

  .market-card:hover > i {
    transform: translateX(3px);
    background: var(--blue);
  }
}

.card-kicker {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-extrabold);
  text-transform: uppercase;
}

.market-card strong {
  margin-top: var(--space-2);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-card);
}

.card-description {
  max-width: 480px;
  margin-top: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-xs));
  font-size: var(--font-size-body);
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear .3s;
}

.market-card:hover .card-description,
.market-card:focus-visible .card-description,
.market-card:focus-within .card-description {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.market-card > i, .feature-card > span, .role-list b {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
}

.market-card > i .icon, .feature-card > span .icon, .role-list b .icon {
  width: 17px;
  height: 17px;
}

.market-card > i {
  justify-self: end;
  align-self: end;
  color: var(--white);
  background: var(--navy);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.platform {
  background: var(--pale);
}

.feature-card {
  min-height: 270px;
  padding: var(--space-10);
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: inherit;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.feature-card:focus-visible, .article-card:focus-visible {
  outline: var(--border-width-accent) solid var(--blue-soft);
  outline-offset: 4px;
}

.feature-card h3 {
  margin: 0;
}

.feature-card p {
  margin: var(--space-4) 0;
  font-size: var(--font-size-small);
}

.feature-card > span {
  justify-self: end;
  align-self: end;
  color: var(--white);
  background: var(--navy);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

@media (hover: hover) {
  .feature-card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-card-hover);
  }

  .feature-card:hover > span {
    transform: translateX(3px);
    background: var(--blue);
  }
}

/* ---------------------------------------------------------
   9. Commercial teams
   --------------------------------------------------------- */
.decisions {
  padding-block: var(--section-space-large);
  color: var(--white);
  background: var(--navy);
}

.decisions .split {
  align-items: center;
  column-gap: var(--space-3xl);
}

.decision-copy {
  max-width: 560px;
}

.decisions .eyebrow {
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.decision-copy h2 {
  margin: 0;
  color: var(--light);
  font-size: var(--font-size-title);
  line-height: var(--line-height-title);
}

.decision-copy > p:not(.eyebrow) {
  margin: var(--space-lg) 0 0;
  color: var(--light);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-lead);
}

.decision-copy .btn {
  margin-top: var(--space-xl);
}

.role-panel {
  display: grid;
  align-content: start;
  justify-self: end;
  width: min(100%, 650px);
}

.role-list {
  display: grid;
  gap: var(--space-3);
}

.role-list > a {
  min-height: 88px;
  padding: var(--space-4) var(--space-6);
  border: var(--border-width) solid #354f5f;
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: var(--space-5);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.role-list b {
  color: var(--white);
  background: #1c394e;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

@media (hover: hover) {
  .role-list > a:hover {
    border-color: rgba(132,172,249,.55);
    background: rgba(255,255,255,.035);
    transform: translateX(3px);
  }

  .role-list > a:hover b {
    transform: translateX(2px);
    background: var(--blue);
  }
}

.role-list span {
  display: grid;
  align-content: center;
  gap: 0;
}

.role-list strong {
  color: #fafafa;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
}

.role-list small {
  color: var(--muted);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
}

/* ---------------------------------------------------------
   10. Reporting
   --------------------------------------------------------- */
.reporting .split {
  align-items: center;
}

.report-copy h2 {
  margin: 0;
}

.report-copy > p:not(.eyebrow) {
  max-width: var(--measure);
  margin: var(--space-lg) 0 0;
  font-size: var(--font-size-body);
}

.check-list {
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.check-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.check-list li::before {
  content: "✓";
  color: var(--blue);
  border-color: var(--blue);
}

.report-media {
  display: grid;
  align-items: center;
}

.report-media > * {
  grid-area: 1 / 1;
}

.report-media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.data-preview-card {
  width: 210px;
  overflow: hidden;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  color: var(--navy);
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow-floating);
  z-index: 3;
  font-size: 8px;
  line-height: 1.3;
}

.report-mini-card {
  align-self: start;
  justify-self: start;
  width: min(210px, 38%);
  margin: -66px 0 0 -66px;
  transform: scale(.68);
  transform-origin: top left;
}

.report-mini-head, .report-mini-row, .data-preview-head, .data-preview-row {
  display: grid;
  align-items: center;
}

.report-mini-head, .data-preview-head {
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-3);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.report-mini-head strong, .data-preview-head strong {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: 8px;
}

.report-mini-head i, .data-preview-head i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.report-mini-head span, .data-preview-head span {
  color: var(--text-secondary);
}

.report-mini-row, .data-preview-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  min-height: 41px;
  padding: 7px var(--space-2-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.report-mini-row > span, .data-preview-row > span {
  min-width: 0;
  display: grid;
  gap: var(--space-0-5);
}

.report-mini-row strong, .data-preview-row strong {
  overflow: hidden;
  font-size: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.report-mini-row small, .data-preview-row small {
  color: var(--text-tertiary);
  font-size: 7px;
}

.report-mini-row b, .data-preview-row b {
  font-size: 8px;
  white-space: nowrap;
}

.report-mini-row em, .data-preview-row em {
  padding: var(--space-1) 5px;
  border-radius: 5px;
  font-size: 7px;
  font-style: normal;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.report-mini-row em.is-up, .data-preview-row em.is-up {
  color: var(--status-up-text);
  background: var(--status-up-bg);
}

.report-mini-row em.is-down, .data-preview-row em.is-down {
  color: var(--color-down);
  background: var(--status-down-bg);
}

.report-mini-chart, .data-preview-chart {
  display: block;
  width: 100%;
  height: 52px;
  background: var(--surface-chart);
}

.report-chart-fill, .data-preview-fill {
  fill: rgba(25,104,255,.12);
}

.report-chart-line, .data-preview-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.3;
  vector-effect: non-scaling-stroke;
}

.floating-tag {
  justify-self: start;
  align-self: center;
  margin-left: -107px;
  margin-top: 60px;
  padding: var(--space-3) var(--space-8-5);
  border-radius: var(--radius-pill);
  color: var(--light);
  background: var(--navy);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
}

.floating-tag--bottom, .floating-tag:last-of-type {
  align-self: end;
  margin: 0 0 var(--space-12) -16px;
}

/* ---------------------------------------------------------
   11. Insights
   --------------------------------------------------------- */
.insights {
  background: var(--pale);
}

.insights-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: end;
  max-width: none;
}

.insights-menu {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-2-5);
  padding: 15px;
  border-radius: var(--radius-pill);
  background: var(--white);
}

.insights-menu button {
  min-width: 95px;
  padding: var(--space-2-5) 15px;
  border: 0;
  appearance: none;
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-pill);
  color: var(--navy);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.insights-menu button[aria-selected="true"] {
  color: var(--white);
  background: var(--blue);
}

.insights-panels {
  min-height: 0;
}

.insights-panel[hidden] {
  display: none;
}

.insights-panel.is-entering {
  animation: insights-panel-in 220ms cubic-bezier(.2,.65,.3,1) both;
}

@keyframes insights-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: hover) {
  .insights-menu button:not([aria-selected="true"]):hover {
    color: var(--blue);
    background: var(--pale);
  }

  .insights-menu button:hover {
    transform: translateY(-1px);
  }
}

.article-card {
  overflow: hidden;
  display: grid;
  align-content: start;
  color: inherit;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.article-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

@media (hover: hover) {
  .article-card:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--shadow-card-hover);
  }

  .article-card:hover img {
    transform: scale(1.035);
  }

  .article-card:hover .article-link {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.article-card > div {
  padding: var(--space-8);
}

.article-card small,
.insights-featured-copy small {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2-5);
  margin-left: -32px;
  padding: var(--space-2-5) var(--space-5) var(--space-2-5) var(--space-8);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  color: var(--navy);
  background: var(--pale);
  font-size: var(--font-size-meta);
  font-weight: var(--font-weight-medium);
  line-height: 14px;
  letter-spacing: 0;
}

.article-sector {
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.article-meta-separator {
  color: var(--text-tertiary);
}

.article-meta time {
  color: inherit;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}

.article-card:first-child .dot {
  background: var(--dca-selective-yellow);
}

.article-card h3 {
  margin: var(--space-md) 0;
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-small);
}

.article-link, .view-more {
  color: var(--blue);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.article-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}

.article-link .inline-arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.view-more {
  display: flex;
  width: fit-content;
  margin: var(--space-xl) 0 0 auto;
  align-items: center;
  gap: var(--space-1-5);
}

.view-more .inline-arrow {
  width: 14px;
  height: 14px;
}

/* ---------------------------------------------------------
   12. Company
   --------------------------------------------------------- */
.company blockquote {
  min-height: 360px;
  align-self: center;
  margin: var(--space-10) 0 0;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-card);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-sm);
  color: var(--white);
  background: var(--navy-soft);
}

.quote-mark {
  color: var(--blue-soft);
  font-family: Georgia, serif;
  font-size: 96px;
  line-height: .7;
  margin-bottom: var(--space-12);
}

.company blockquote p {
  align-self: center;
  margin: 0;
  font-size: var(--font-size-card);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
}

.company blockquote footer {
  color: #acbec6;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.company blockquote footer small {
  display: block;
}

.company-copy h2 {
  margin: 0;
}

.company-copy > p:not(.eyebrow) {
  margin: var(--space-lg) 0 0;
  font-size: var(--font-size-body);
}

.reason-list {
  margin: var(--space-xl) 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-5);
}

.reason-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
}

.reason-list li > span {
  width: 24px;
  height: 24px;
  margin-top: var(--space-0-5);
  color: var(--blue);
  border-color: var(--blue);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
}

.reason-list div {
  display: grid;
  gap: var(--space-0-5);
}

.reason-list strong {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.reason-list small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

/* ---------------------------------------------------------
   13. CTA and footer
   CTA overlap uses normal flow and a negative margin.
   --------------------------------------------------------- */
.prefooter-cta {
  position: relative;
  z-index: 1;
  margin-bottom: -80px;
}

.cta-box {
  align-items: center;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-card);
  color: var(--white);
  background: var(--blue);
  box-shadow: var(--shadow-card);
}

.cta-box > * {
  grid-column: span 6;
}

.cta-copy small {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--white);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.cta-copy strong {
  display: block;
  max-width: 480px;
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-card);
}

.cta-actions > small {
  display: block;
  margin-top: var(--space-sm);
  color: var(--light);
  font-size: var(--font-size-label);
  text-align: center;
}

.footer {
  padding: var(--space-40) 0 var(--space-12);
  color: var(--white);
  background: var(--navy);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr minmax(288px, 352px);
  gap: var(--space-2xl);
  align-items: start;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.footer-group {
  min-width: 0;
}

.footer-group summary {
  list-style: none;
  margin: 0;
  color: var(--white);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--footer-heading-line-height);
  margin-bottom: var(--space-sm);
}

.footer-group summary::-webkit-details-marker {
  display: none;
}

.footer-accordion-icon {
  display: none;
}

.footer-links h4 {
  margin: 0;
  color: var(--white);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: var(--footer-heading-line-height);
  margin-bottom: var(--space-sm);
}

.footer-links .footer-subhead {
  margin-top: var(--space-md);
}

.footer-links a {
  display: block;
  color: var(--light);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--footer-link-line-height);
  margin-block-end: var(--footer-link-gap);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-links a:last-child {
  margin-block-end: 0;
}

@media (hover: hover) {
  .footer-links a:hover {
    color: var(--white);
    transform: translateX(2px);
  }
}

.newsletter-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  color: var(--navy);
  background: var(--white);
}

.newsletter-card h3 {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.newsletter-card p {
  margin: var(--space-2) 0 var(--space-5);
  font-size: var(--font-size-small);
}

.newsletter-card > label:not(.consent) {
  display: block;
  margin-bottom: var(--space-xs);
}

.newsletter-card input[type="email"], .newsletter-card input[type="text"] {
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid #aebdc5;
  border-radius: var(--radius-sm);
  color: var(--navy);
  background: var(--white);
  font-size: var(--font-size-small);
}

.newsletter-card fieldset {
  margin: var(--space-4) 0;
  padding: 0;
  border: 0;
}

.newsletter-card legend {
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.newsletter-card fieldset label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-1-5);
  font-size: var(--font-size-small);
}

.newsletter-card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--blue);
}

.newsletter-card .consent {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1-5) 0 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.newsletter-card .consent input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
}

.newsletter-card .consent span {
  display: block;
}

.subscribe-button {
  width: fit-content;
  margin: var(--space-6) 0 0 auto;
  min-height: 40px;
  display: flex;
}

.footer-compliance {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.footer-iosco-badge {
  flex: 0 0 auto;
  display: inline-flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.footer-iosco-badge img {
  width: min(15rem, 100%);
  height: auto;
  display: block;
}

.footer-compliance-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--light);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.footer-compliance-copy strong {
  color: var(--white);
  font-weight: var(--font-weight-semibold);
}

@media (hover: hover) {
  .footer-iosco-badge:hover {
    opacity: .92;
    transform: translateY(-.125rem);
  }
}

.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-lg);
  border-top: var(--border-width) solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
}

.legal-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2-5);
  color: var(--light);
  font-size: var(--font-size-small);
}

.footer-bull {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: block;
  color: var(--light);
  fill: currentColor;
}

.socials {
  display: flex;
  gap: var(--space-sm);
}

.socials a, .socials .social-link {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: var(--border-width) solid var(--border-on-dark-medium);
  border-radius: 50%;
  color: var(--light);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.socials .social-link.is-disabled {
  opacity: .48;
  cursor: not-allowed;
}

.social-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social-icon.whatsapp {
  width: 19px;
  height: 19px;
}

@media (hover: hover) {
  .socials a:hover {
    color: var(--white);
    border-color: var(--white);
    background: var(--surface-on-dark-hover);
    transform: translateY(-2px);
  }
}

/* Respect reduced-motion preferences without changing layout. */

/* Platform screenshots use a consistent 16:9 presentation; photography keeps its component ratio. */
img[src*="/assets/screenshots/"] {
  aspect-ratio: 16 / 9;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-background-video {
    display: none;
  }

  .faq-list summary {
    transition: none;
  }

  .faq-list details[open] p {
    animation: none;
  }

  .clients-track {
    animation: none;
    transform: none;
    width: 100%;
  }

  .clients-set {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }

  .clients-set[aria-hidden="true"] {
    display: none;
  }

  .card-description,
  .accordion-chevron,
  .btn,
  .btn-arrow,
  .inline-arrow,
  .announcement,
  .event-logo img,
  .market-card,
  .market-card::before,
  .market-card::after,
  .feature-card,
  .article-card,
  .article-card img,
  .role-list > a,
  .role-list b,
  .platform-shot-wrap,
  .platform-slide,
  .carousel-dot,
  .mega-menu-shell,
  body::after {
    transition: none !important;
    transform: none;
  }

  .mobile-menu:not([hidden]), .mobile-submenu:not([hidden]), .insights-panel.is-entering {
    animation: none;
  }
}

/* Hover-only content remains visible on touch-oriented devices. */
@media (hover: none) {
  .card-description {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media (max-width: 1120px) and (min-width: 961px) {
  .main-nav {
    gap: var(--space-5-5);
    padding-left: var(--space-2-5);
  }

  .main-nav .nav-trigger, .sign-in {
    font-size: var(--font-size-small);
  }

  .mega-menu-intro {
    padding-inline: var(--space-10);
  }

  .mega-menu-featured {
    padding-inline: var(--space-12);
  }

  .mega-menu-feature-grid {
    column-gap: var(--space-10);
  }
}

/* ---------------------------------------------------------
   14. Responsive adjustments
   --------------------------------------------------------- */
@media (max-width: 960px) {
  body::after {
    display: none;
  }

  .container {
    width: min(var(--container-max), calc(100% - (2 * var(--page-gutter))));
  }

  .main-nav, .mega-menu-shell {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: grid;
  }

  .mobile-menu {
    position: fixed;
    inset: var(--space-22) 0 0;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: hidden;
    border-top: var(--border-width) solid var(--border-subtle);
    background: var(--white);
    box-shadow: none;
  }

  .mobile-menu:not([hidden]) {
    display: block;
  }

  .mobile-menu-inner {
    width: min(calc(100% - 48px), var(--container-max));
    height: 100%;
    padding-block: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .mobile-nav-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-2) 0 var(--space-6);
    align-content: start;
  }

  .mobile-nav-group {
    align-self: start;
  }

  .mobile-menu-actions {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4) 0 max(var(--space-4), env(safe-area-inset-bottom));
    border-top: var(--border-width) solid var(--border-subtle);
    background: var(--white);
    box-shadow: 0 -12px 24px -24px rgb(1 31 46 / 55%);
  }

  .mobile-menu-actions > a:first-child {
    grid-column: auto;
    padding: 0 var(--space-3-5);
  }

  .mobile-menu-actions .btn {
    min-height: 48px;
  }

  .header-translator, .sign-in {
    display: none;
  }

  .topbar {
    grid-template-columns: auto 1fr;
    gap: var(--space-sm);
  }

  .header-actions {
    justify-self: end;
  }

  .split {
    grid-template-columns: 1fr;
    row-gap: var(--space-xl);
  }

  .split > * {
    grid-column: auto;
  }

  .cards > * {
    grid-column: span 6;
  }

  .announcement {
    grid-column: 1 / -1;
  }

  .benefit-strip {
    grid-template-columns: 1fr;
  }

  .report-media {
    width: min(576px, 100%);
  }

  .report-mini-card {
    width: min(210px, 42%);
    margin: var(--space-4) 0 0 var(--space-4);
    transform: scale(.82);
  }

  .floating-tag {
    margin-left: var(--space-4);
    margin-top: 0;
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-small);
  }

  .floating-tag--bottom, .floating-tag:last-of-type {
    margin-left: var(--space-8);
  }

  .cta-box > * {
    grid-column: 1 / -1;
  }

  .cta-box {
    row-gap: var(--space-lg);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .newsletter-card {
    max-width: 480px;
  }
}

@media (max-width: 640px) {
  .market-ticker {
    display: none;
  }

  .platform-shot-wrap {
    border-radius: var(--radius-sm);
  }

  .container {
    width: min(var(--container-max), calc(100% - (2 * var(--page-gutter))));
  }

  .header-actions > :not(.mobile-menu-toggle) {
    display: none;
  }

  .topbar {
    min-height: 72px;
    grid-template-columns: 1fr auto;
  }

  .brand-logo {
    width: min(190px, 58vw);
  }

  .mobile-menu {
    inset: var(--space-18) 0 0;
    max-height: none;
  }

  .mobile-menu-inner {
    width: min(var(--container-max), calc(100% - (2 * var(--page-gutter))));
  }

  .mobile-menu-actions {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .mobile-menu-actions > a:first-child {
    grid-column: auto;
  }

  .hero {
    --motion-hero-height: 680px;
    --motion-hero-overlay-height: 720px;
  }

  .hero::before {
    background-size: auto 680px;
  }

  .hero-background-video {
    display: none;
  }

  .hero-inner {
    padding-block: var(--space-8) var(--space-20);
    row-gap: var(--space-10);
  }

  .announcement {
    display: none;
  }

  .event-logo img {
    width: 80px;
  }

  .announcement-copy strong, .announcement-copy span {
    font-size: var(--font-size-small);
  }

  .hero-copy p, .hero-bottom > p:first-child {
    font-size: var(--font-size-body);
  }

  .trusted-label {
    margin-top: var(--space-8);
  }

  .clients-carousel {
    width: calc(100vw - 32px);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  }

  .clients-set {
    gap: var(--space-7);
    padding-right: var(--space-7);
  }

  .clients-set span {
    width: 116px;
    height: 58px;
    flex-basis: 116px;
  }

  .clients-set img {
    max-width: 106px;
    max-height: 44px;
  }

  .actions {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .actions .btn {
    width: 100%;
    padding-inline: var(--space-4);
    white-space: normal;
    font-size: var(--font-size-small);
    line-height: 1.2;
  }

  .actions .btn .btn-arrow {
    right: 9px;
    width: 13px;
    height: 13px;
  }

  .benefit-strip {
    min-height: 0;
    margin-top: var(--space-16);
    margin-bottom: -64px;
    padding: var(--space-8);
  }

  .coverage {
    padding-top: 90px;
  }

  .cards > *, .coverage .cards > * {
    grid-column: 1 / -1;
  }

  .market-card {
    min-height: 200px;
    padding: var(--space-6);
  }

  .market-card strong {
    font-size: var(--font-size-large);
  }

  /* On mobile, platform features become compact list-cards instead of tall tiles. */
  .platform .cards {
    gap: var(--space-3);
  }

  .feature-card {
    min-height: 0;
    padding: var(--space-5) var(--space-5-5);
    grid-template-columns: minmax(0, 1fr) 34px;
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    align-items: center;
  }

  .feature-card h3 {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--font-size-lead);
    line-height: var(--line-height-card);
  }

  .feature-card p {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: var(--font-size-small);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .feature-card > span {
    grid-column: 2;
    grid-row: 1 / -1;
    width: 34px;
    height: 34px;
    justify-self: end;
    align-self: center;
  }

  .role-panel {
    display: none;
  }

  .report-media {
    display: none;
  }

  .report-mini-card {
    display: none;
  }

  .floating-tag {
    margin-left: var(--space-2);
    font-size: var(--font-size-label);
  }

  .floating-tag--bottom, .floating-tag:last-of-type {
    margin: 0 0 var(--space-6) var(--space-4);
  }

  .insights-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .insights-menu {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: stretch;
    padding: var(--space-2);
  }

  .insights-menu button {
    min-width: 0;
    padding-inline: var(--space-2);
  }

  .article-card > div {
    padding: var(--space-6);
  }

  .insights-panel .article-card:nth-child(n + 3) {
    display: none;
  }

  .company blockquote {
    display: none;
  }

  .prefooter-cta {
    margin-bottom: -96px;
  }

  .cta-box {
    padding: var(--space-8);
  }

  .cta-copy strong {
    font-size: var(--font-size-card);
  }

  .cta-actions .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Mobile footer: navigation first, newsletter below the accordion menu. */
  .footer {
    padding-top: 152px;
    padding-bottom: var(--space-10);
  }

  .footer-grid {
    gap: var(--space-8);
  }

  .newsletter-card {
    order: 1;
    width: 100%;
    max-width: none;
    padding: var(--space-5-5);
  }

  .newsletter-card fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4-5);
  }

  .newsletter-card legend {
    width: 100%;
  }

  .newsletter-card fieldset label {
    margin: 0;
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: var(--border-width) solid rgba(255,255,255,.12);
  }

  .footer-group {
    border-bottom: var(--border-width) solid rgba(255,255,255,.12);
  }

  .footer-group summary {
    min-height: 58px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    line-height: 1.3;
    cursor: pointer;
  }

  .footer-accordion-icon {
    display: block;
  }

  .footer-group[open] .footer-accordion-icon {
    transform: rotate(180deg);
  }

  .footer-group-content {
    padding: 0 0 var(--space-5);
  }

  .footer-links .footer-subhead {
    margin-top: var(--space-4-5);
  }

  .footer-links a {
    line-height: var(--footer-link-line-height);
    margin-block-end: var(--footer-link-gap);
  }

  .footer-compliance {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-4);
  }

  .footer-iosco-badge img {
    width: min(15rem, 100%);
  }

  .footer-bottom {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (min-width: 641px) {
  .footer-group > summary {
    pointer-events: none;
  }
}

/* Reusable linked text and dark-section feature/check list. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--blue);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.inline-icon {
  width: 18px;
  height: 18px;
}

.connected-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-6-5);
}

.connected-points li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-4-5);
  align-items: start;
}

.connected-points > li > svg {
  width: 32px;
  height: 32px;
  padding: 5px;
  color: var(--blue-soft);
  border: var(--border-width-medium) solid var(--border-on-dark);
  border-radius: 50%;
  filter: drop-shadow(0 0 .35px currentColor);
}

.connected-points span {
  display: grid;
  gap: 3px;
}

.connected-points strong {
  font-size: var(--font-size-body);
  line-height: var(--line-height-small);
}

.connected-points small {
  color: var(--text-on-dark-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

/* Reusable key points for light-background hero and intro content. */
.key-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2-5);
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.key-points li {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}

.key-points li > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  padding: 3px;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  border-radius: 50%;
}

.key-points li > svg path {
  stroke-width: 2.7;
}

.key-points--plain {
  font-weight: var(--font-weight-medium);
}

.key-points--plain li {
  display: block;
}

.key-points--plain li > svg {
  display: none;
}

.key-points + .text-link {
  margin-top: var(--space-6);
}

/* Accent facts: reusable facts with the same vertical DCA-blue rule. */
.fact-grid {
  display: grid;
}

.fact-item {
  padding: var(--space-0-5) 0 var(--space-0-5) var(--space-4-5);
  display: grid;
  align-content: start;
  gap: var(--space-1-5);
  border-left: var(--border-width-accent) solid var(--blue);
}

.fact-item strong {
  font-size: var(--font-size-body);
  line-height: var(--line-height-small);
}

.fact-item span {
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

/* Image with an overlapping quote card; reusable on market/company stories. */
.media-quote {
  width: min(900px, 100%);
  margin: var(--space-2xl) auto 0;
  position: relative;
}

.media-quote > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  object-fit: cover;
  box-shadow: var(--shadow-card);
}

.media-quote > blockquote {
  width: min(440px, 52%);
  min-height: 220px;
  margin: 0;
  padding: var(--space-8-5) var(--space-9-5);
  position: absolute;
  left: -48px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: var(--radius-lg);
  color: var(--white);
  background: var(--blue);
  box-shadow: var(--shadow-floating);
}

.media-quote .quote-mark {
  display: block;
  margin-bottom: var(--space-2-5);
  color: var(--blue-soft);
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: .55;
}

.media-quote blockquote p {
  margin: 0;
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-small);
}

.media-quote blockquote footer {
  margin-top: var(--space-4-5);
  font-size: var(--font-size-small);
}

@media (max-width: 640px) {
  .media-quote {
    margin-top: var(--space-xl);
  }

  .media-quote > img {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
  }

  .media-quote > blockquote {
    width: min(var(--container-max), calc(100% - (2 * var(--page-gutter))));
    min-height: 0;
    margin: -56px auto 0;
    padding: var(--space-6-5);
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    border-radius: var(--radius-lg);
  }

  .media-quote blockquote p {
    font-size: var(--font-size-body);
  }
}

/* ---------------------------------------------------------
   Global content components: breadcrumbs and FAQ
   --------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 52px;
  color: var(--text-secondary);
  font-size: var(--font-size-label);
}

.breadcrumbs a {
  transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
  color: var(--blue);
}

.breadcrumbs [aria-current="page"] {
  color: var(--navy);
}

.section-dark .breadcrumbs [aria-current="page"],
section[class*="hero"][class*="--dark"] .breadcrumbs [aria-current="page"] {
  color: var(--white);
}

.breadcrumbs-separator {
  color: var(--muted);
}

.faq-section {
  background: var(--pale);
}

.faq-grid {
  align-items: start;
}

.faq-grid h2 span {
  display: block;
  color: var(--blue);
}

.faq-list {
  border-top: var(--border-width) solid var(--border-divider);
}

.faq-list details {
  border-bottom: var(--border-width) solid var(--border-divider);
}

.faq-list summary {
  min-height: var(--space-16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-4) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-small);
  transition: color var(--transition-fast);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary svg {
  width: var(--space-4-5);
  height: var(--space-4-5);
  flex: 0 0 auto;
  color: var(--blue);
  transition: transform var(--transition-fast);
}

.faq-list details[open] summary {
  color: var(--blue);
}

.faq-list details[open] summary svg {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .faq-list summary:hover {
    color: var(--blue);
  }
}

.faq-list details[open] p {
  animation: faq-answer-in 180ms ease-out both;
}

@keyframes faq-answer-in {
  from {
    opacity: 0;
    transform: translateY(calc(var(--space-1) * -1));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-list details p {
  max-width: var(--measure);
  margin: 0;
  padding: 0 var(--space-12) var(--space-5) 0;
  color: var(--text-secondary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.faq-section--dark {
  color: var(--white);
  background: var(--navy);
}

.faq-section--dark .eyebrow {
  color: var(--blue-soft);
}

.faq-section--dark .faq-grid h2 {
  color: var(--white);
}

.faq-section--dark .faq-list {
  border-top-color: var(--border-on-dark);
}

.faq-section--dark .faq-list details {
  border-bottom-color: var(--border-on-dark);
}

.faq-section--dark .faq-list summary {
  color: var(--white);
}

.faq-section--dark .faq-list details[open] summary {
  color: var(--blue-soft);
}

.faq-section--dark .faq-list details p {
  color: var(--text-on-dark-muted);
}

@media (hover: hover) {
  .faq-section--dark .faq-list summary:hover {
    color: var(--blue-soft);
  }
}

@media (max-width: 640px) {
  .breadcrumbs {
    margin-bottom: var(--space-7-5);
  }

  .faq-list summary {
    min-height: var(--space-12);
    padding-block: var(--space-3-5);
    font-size: var(--font-size-small);
  }

  .faq-list details p {
    padding-right: var(--space-8);
  }
}

/* Generic error page */
.error-page-inner {
  max-width: var(--measure-wide);
  text-align: center;
}

.error-page-inner h1 {
  font-size: var(--font-size-page-title);
}

.error-page-inner p:not(.eyebrow) {
  margin: 0 0 var(--space-lg);
  color: var(--text-secondary);
  font-size: var(--font-size-lead);
}

/* ---------------------------------------------------------
   Shared informational close: About DCA
   --------------------------------------------------------- */
.about-dca {
  background: var(--pale);
}

.about-dca-inner {
  max-width: 940px;
}

.about-dca h2 {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-large);
}

.about-dca p {
  max-width: 860px;
  margin: 0;
  color: var(--text-secondary);
}

.about-dca-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

@media (max-width: 640px) {
  .about-dca h2 {
    font-size: var(--font-size-card);
  }

  .about-dca-links {
    gap: var(--space-md);
  }
}

/* Homepage insight cards: compact mobile presentation */
@media (max-width: 640px) {
  .home .insights-panel {
    gap: var(--space-3-5);
  }

  .home .insights-panel .article-card {
    grid-template-rows: auto 1fr;
    overflow: visible;
  }

  .home .insights-panel .article-card img {
    aspect-ratio: 16 / 10;
    min-height: 0;
    max-height: 150px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .home .insights-panel .article-card > div {
    padding: var(--space-6-5) var(--space-5) var(--space-5);
    position: relative;
  }

  .home .insights-panel .article-card small {
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-50%);
    z-index: 2;
    box-shadow: var(--shadow-subtle);
  }

  .home .insights-panel .article-card h3 {
    margin: var(--space-2-5) 0 var(--space-3-5);
    font-size: var(--font-size-lead);
    line-height: 1.42;
  }

  .home .insights-panel .article-link {
    font-size: var(--font-size-small);
  }
}

/* Shared long-form content and FAQ directory */
.page-title {
  margin: 0;
  font-size: var(--font-size-page-title);
  line-height: var(--line-height-display);
}

.content-intro {
  background: var(--pale);
}

.lead-copy {
  max-width: var(--measure-wide);
  margin: var(--space-md) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-subtitle);
  line-height: var(--line-height-lead);
}

.faq-directory {
  background: var(--white);
}

.faq-directory .faq-answer ul {
  margin-block: var(--space-sm);
}

.faq-directory .faq-answer a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content-page {
  padding-bottom: var(--section-space);
}

.content-page > section {
  padding: var(--space-8-5) 0;
  border-top: var(--border-width) solid var(--border-divider);
}

.content-page > section:first-child {
  border-top: 0;
}

.content-page h2 {
  margin-bottom: var(--space-md);
}

.content-page h3 {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: var(--font-size-lead);
}

.content-page dl {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: var(--space-2-5) var(--space-6);
}

.content-page dt {
  font-weight: var(--font-weight-semibold);
}

.content-page dd {
  margin: 0;
}

.llm-information a {
  color: var(--blue);
}

.content-page pre {
  overflow-x: auto;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--surface-soft-blue);
}

@media (max-width: 640px) {
  .content-page dl {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .content-page dd + dt {
    margin-top: var(--space-sm);
  }
}

/* Dynamic homepage announcement media */
.announcement-media {
  width: 120px;
  height: 72px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-soft-blue);
}

.announcement-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FAQ overview — shared directory/filter treatment. */
.faq-page-intro {
  padding-top: var(--space-8-5);
}

.faq-page-intro .breadcrumbs {
  margin-bottom: 54px;
}

.faq-page-intro-grid {
  align-items: stretch;
}

.faq-page-intro-grid > div:first-child {
  align-self: center;
}

.faq-contact-card {
  align-self: stretch;
  padding: var(--space-8-5);
  border: var(--border-width) solid var(--border-divider);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-subtle);
}

.faq-contact-card .eyebrow {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-label);
}

.faq-contact-card h2 {
  margin: 0;
  font-size: var(--font-size-large);
}

.faq-contact-card > p:not(.eyebrow) {
  margin: var(--space-sm) 0 var(--space-lg);
  color: var(--text-secondary);
}

.faq-contact-card .actions {
  grid-template-columns: repeat(2, minmax(0, max-content));
}

.faq-directory-heading {
  margin-bottom: 54px;
}

.faq-directory-heading .eyebrow {
  margin-bottom: var(--space-sm);
}

.faq-directory-heading h2 {
  margin: 0;
}

.faq-filter, .team-filter {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-1-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
}

.faq-filter button, .team-filter button {
  min-height: 44px;
  padding: 0 var(--space-5-5);
  border: var(--border-width) solid var(--blue);
  border-radius: var(--radius-pill);
  color: var(--blue);
  background: var(--white);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.faq-filter button[aria-pressed="true"], .team-filter button[aria-pressed="true"] {
  color: var(--white);
  background: var(--blue);
}

@media (hover: hover) {
  .faq-filter button:hover, .team-filter button:hover {
    transform: translateY(-1px);
  }

  .faq-filter button:not([aria-pressed="true"]):hover, .team-filter button:not([aria-pressed="true"]):hover {
    background: var(--surface-soft-blue);
  }
}

.faq-filtered-list {
  max-width: none;
}

.faq-filtered-list details[hidden] {
  display: none;
}

.faq-filtered-list summary {
  min-height: 74px;
  padding: 19px 58px 19px var(--space-4-5);
  position: relative;
  font-size: var(--font-size-body);
}

.faq-filtered-list details[open] summary {
  padding-inline: var(--space-4-5) 58px;
  color: var(--navy);
  background: transparent;
}

@media (hover: hover) {
  .faq-filtered-list summary:hover {
    padding-inline: var(--space-4-5) 58px;
  }
}

.faq-plus {
  width: 32px;
  height: 32px;
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--navy);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.faq-plus::before, .faq-plus::after {
  content: "";
  width: 12px;
  height: 2px;
  position: absolute;
  left: var(--space-2-5);
  top: 15px;
  border-radius: var(--radius-pill);
  background: var(--white);
}

.faq-plus::after {
  transform: rotate(90deg);
  transition: transform var(--transition-fast);
}

.faq-filtered-list details[open] .faq-plus {
  background: var(--blue);
}

.faq-filtered-list details[open] .faq-plus::after {
  transform: rotate(0deg);
}

.faq-filtered-list .faq-answer {
  padding: 0 58px var(--space-6) var(--space-4-5);
  color: var(--text-secondary);
}

.faq-filtered-list .faq-answer p:last-child, .faq-filtered-list .faq-answer ul:last-child {
  margin-bottom: 0;
}

.faq-filter-empty {
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .faq-page-intro .breadcrumbs {
    margin-bottom: var(--space-9);
  }

  .faq-contact-card {
    padding: var(--space-6-5) var(--space-5-5);
  }

  .faq-contact-card .actions {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .faq-contact-card .btn {
    width: 100%;
  }

  .faq-directory-heading {
    margin-bottom: var(--space-8-5);
  }

  .faq-filter, .team-filter {
    margin-inline: -16px;
    padding-inline: var(--space-4);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .faq-filter::-webkit-scrollbar, .team-filter::-webkit-scrollbar {
    display: none;
  }

  .faq-filter button, .team-filter button {
    flex: 0 0 auto;
    min-height: 40px;
    padding-inline: var(--space-4);
  }

  .faq-filtered-list summary {
    min-height: 66px;
    padding: var(--space-4) 50px var(--space-4) var(--space-2);
    font-size: var(--font-size-small);
  }

  .faq-filtered-list details[open] summary {
    padding-inline: var(--space-2) 50px;
    color: var(--navy);
    background: transparent;
  }

  .faq-plus {
    width: 30px;
    height: 30px;
    right: var(--space-2);
  }

  .faq-plus::before, .faq-plus::after {
    left: 9px;
    top: var(--space-3-5);
  }

  .faq-filtered-list .faq-answer {
    padding: 0 var(--space-2) var(--space-5-5);
    font-size: var(--font-size-small);
  }
}


/* Bot trap used by all public forms. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------
   Cookie consent
   --------------------------------------------------------- */
.footer-legal-button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

@media (hover: hover) { .footer-legal-button:hover { color: var(--white); } }

.cookie-banner {
  position: fixed;
  z-index: 1200;
  left: 50%;
  bottom: var(--space-4);
  width: min(700px,calc(100% - (2 * var(--space-4))));
  transform: translateX(-50%);
  color: var(--navy);
}

.cookie-banner-inner {
  padding: var(--space-3-5) var(--space-4);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: var(--space-5);
  border: var(--border-width) solid var(--border-divider);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 10px 28px rgba(5,31,46,.12);
}

.cookie-banner-copy h2,.cookie-dialog h2 {
  margin: 0 0 var(--space-1-5);
  color: var(--navy);
  font-size: var(--font-size-body);
}

.cookie-banner-copy p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-body);
}

.cookie-banner-copy a,.cookie-policy-link {
  color: var(--blue);
  font-weight: var(--font-weight-semibold);
}

.cookie-kicker {
  color: var(--blue);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cookie-banner-actions,.cookie-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cookie-banner-actions { max-width: 15rem; }
.cookie-banner-actions .btn,.cookie-dialog-actions .btn { white-space: nowrap; }
.cookie-banner-actions .btn {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-meta);
}

.cookie-text-action {
  padding: var(--space-1) 0;
  border: 0;
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-label);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

@media (hover: hover) { .cookie-text-action:hover { color: var(--blue); } }

.cookie-banner-reject {
  margin-top: var(--space-1-5);
}


.cookie-dialog {
  width: min(650px,calc(100% - (2 * var(--space-5))));
  max-height: min(760px,calc(100vh - (2 * var(--space-5))));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--navy);
  background: var(--white);
  box-shadow: var(--shadow-floating);
}

.cookie-dialog::backdrop { background: rgba(5,31,46,.52); backdrop-filter: blur(2px); }
.cookie-dialog-card { padding: var(--space-6); }
.cookie-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.cookie-dialog-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--border-width) solid var(--border-divider);
  border-radius: 50%;
  color: var(--navy);
  background: var(--white);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.cookie-dialog-intro { margin: var(--space-2) 0 var(--space-5); color: var(--text-secondary); font-size: var(--font-size-small); }
.cookie-preference-list { border-top: var(--border-width) solid var(--border-divider); }
.cookie-preference-row {
  position: relative;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3-5) 0;
  border-bottom: var(--border-width) solid var(--border-divider);
  cursor: pointer;
}
.cookie-preference-row > div { display: flex; flex-direction: column; gap: var(--space-1); }
.cookie-preference-row strong { font-size: var(--font-size-small); }
.cookie-preference-row span { color: var(--text-secondary); font-size: var(--font-size-meta); line-height: var(--line-height-small); }
.cookie-preference-row input { position: absolute; opacity: 0; pointer-events: none; }
.cookie-switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--border-divider);
  transition: background-color var(--transition-fast);
}
.cookie-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(5,31,46,.22);
  transition: transform var(--transition-fast);
}
.cookie-preference-row input:checked + .cookie-switch { background: var(--blue); }
.cookie-preference-row input:checked + .cookie-switch::after { transform: translateX(18px); }
.cookie-preference-row input:focus-visible + .cookie-switch { outline: 3px solid rgba(24,105,255,.25); outline-offset: 3px; }
.cookie-preference-row.is-required { cursor: default; }
.cookie-required-label {
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-pill);
  color: var(--blue) !important;
  background: var(--surface-soft-blue);
  font-size: var(--font-size-label) !important;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.cookie-dialog-footer { margin-top: var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cookie-dialog-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.cookie-policy-link { font-size: var(--font-size-meta); }
.cookie-dialog-actions .btn { min-height: 36px; padding: var(--space-2) var(--space-4); font-size: var(--font-size-meta); }

@media (max-width: 760px) {
  .cookie-banner-inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .cookie-banner-actions { max-width: none; justify-content: flex-start; }
}

@media (max-width: 640px) {
  .cookie-banner { left: 50%; bottom: var(--space-3); width: calc(100% - (2 * var(--space-3))); transform: translateX(-50%); }
  .cookie-banner-inner,.cookie-dialog-card { padding: var(--space-4); }
  .cookie-banner-actions { display: flex; width: 100%; }
  .cookie-dialog { width: calc(100% - (2 * var(--space-3))); max-height: calc(100vh - (2 * var(--space-3))); }
  .cookie-preference-row { gap: var(--space-3); }
  .cookie-dialog-footer { align-items: flex-start; flex-direction: column; }
  .cookie-dialog-actions { justify-content: flex-start; width: 100%; }
}

/* Demo booking modal ------------------------------------------------------ */
body.demo-modal-open { overflow: hidden; }
.demo-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--space-6); }
.demo-modal[hidden] { display: none; }
.demo-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(1,31,46,.72); backdrop-filter: blur(6px); cursor: default; }
.demo-modal-panel { width: min(980px,100%); max-height: min(900px,calc(100vh - var(--space-12))); position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(420px,1fr) auto; overflow: hidden; border-radius: var(--radius-md); background: var(--white); box-shadow: 0 30px 70px rgba(1,31,46,.35); }
.demo-modal-header { display: flex; justify-content: space-between; gap: var(--space-8); padding: var(--space-6) var(--space-7) var(--space-5); border-bottom: var(--border-width) solid var(--border-divider); }
.demo-modal-header .eyebrow { margin-bottom: var(--space-1); }
.demo-modal-header h2 { margin: 0; font-size: var(--font-size-card); }
.demo-modal-header p:last-child { max-width: 44rem; margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--font-size-small); }
.demo-modal-close { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: var(--border-width) solid var(--border-divider); border-radius: 50%; color: var(--navy); background: var(--surface-subtle); font-size: 1.65rem; line-height: 1; cursor: pointer; }
.demo-modal-frame-wrap { min-height: 0; background: var(--surface-subtle); }
.demo-modal-frame-wrap iframe { width: 100%; height: min(650px,68vh); display: block; border: 0; background: var(--white); }
.demo-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-7); border-top: var(--border-width) solid var(--border-divider); color: var(--text-secondary); font-size: var(--font-size-small); }
.demo-modal-footer a { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--blue); font-weight: var(--font-weight-semibold); }
@media (max-width: 640px) {
  .demo-modal { padding: 0; }
  .demo-modal-panel { width: 100%; height: 100dvh; max-height: none; border-radius: 0; grid-template-rows: auto 1fr auto; }
  .demo-modal-header { padding: var(--space-4) var(--space-5); }
  .demo-modal-frame-wrap iframe { height: 100%; }
  .demo-modal-footer { align-items: flex-start; flex-direction: column; padding: var(--space-3) var(--space-5); }
}