/*!
Theme Name: DataJoint
Theme URI: https://datajoint.com
Author: Chek Creative
Author URI: https://chekcreative.com
Description: The DataJoint marketing site — a WordPress block theme built from InnerBlock-based ACF V3 blocks.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: datajoint
Tags: full-site-editing, blocks, custom-colors, custom-logo
*/

/* Site-wide chrome */

/* Announcement banner (rendered above the nav via wp_body_open). */

.datajoint-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  /* above the fixed nav (z-index 50) */
  background: var(--dj-banner-bg, #00a0df);
  color: var(--dj-banner-fg, #fff);
}

.datajoint-banner__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px var(--dj-gutter, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 44px;
}

.datajoint-banner__text {
  margin: 0;
  text-align: center;
  font: 500 14px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: var(--dj-banner-fg, #fff);
}

.datajoint-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  font-weight: 700;
  color: var(--dj-banner-fg, #fff);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.datajoint-banner__link:hover {
  opacity: 0.85;
}

.datajoint-banner__dismiss {
  position: absolute;
  right: var(--dj-gutter, 48px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 9999px;
  color: var(--dj-banner-fg, #fff);
  cursor: pointer;
  opacity: 0.8;
  line-height: 0;
}

.datajoint-banner__dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}

.datajoint-banner[hidden] {
  display: none;
}

/* When a banner is present, push the fixed nav (and its scroll behaviour)
   down by the banner height so they don't overlap. */

body.has-dj-banner .datajoint-nav {
  top: var(--dj-banner-height, 44px);
}

/* Light-hero pages: the nav is a solid (opaque) bar, not a transparent overlay,
   so the hero content must start below the fixed chrome (nav, plus banner when
   shown) with a comfortable gap — rather than tucking underneath it. */

body.dj-solid-nav .datajoint-book-discovery {
  padding-top: calc(var(--dj-nav-height, 73px) + 52px);
}

body.dj-solid-nav.has-dj-banner .datajoint-book-discovery {
  padding-top: calc(var(--dj-nav-height, 73px) + var(--dj-banner-height, 44px) + 52px);
}

body.dj-solid-nav {
  --dj-nav-height: 73px;
}

/* ---------------------------------------------------------------------------
   Interior (non-home) dark heroes sit under a transparent fixed nav. Their
   content was starting too close to the nav bar (the client flagged every
   interior hero as "cut short" vs the homepage). Give them a generous top
   clearance that accounts for the fixed nav — and, when present, the banner —
   plus a comfortable gap so they breathe like the homepage hero.
   --------------------------------------------------------------------------- */

.datajoint-platform-hero,
.datajoint-solutions-hero,
.datajoint-apps-hero,
.datajoint-about-hero,
.datajoint-services-hero,
.datajoint-ecosystem-hero,
.datajoint-blog-hero,
.datajoint-faqpage-hero,
.datajoint-team-hero {
  padding-top: calc(var(--dj-nav-height, 73px) + 72px) !important;
}

body.has-dj-banner .datajoint-platform-hero,
body.has-dj-banner .datajoint-solutions-hero,
body.has-dj-banner .datajoint-apps-hero,
body.has-dj-banner .datajoint-about-hero,
body.has-dj-banner .datajoint-services-hero,
body.has-dj-banner .datajoint-ecosystem-hero,
body.has-dj-banner .datajoint-blog-hero,
body.has-dj-banner .datajoint-faqpage-hero,
body.has-dj-banner .datajoint-team-hero {
  padding-top: calc(var(--dj-nav-height, 73px) + var(--dj-banner-height, 44px) + 72px) !important;
}

@media (max-width: 600px) {
  .datajoint-banner__inner {
    padding-right: 48px;
    /* room for the dismiss button */
    padding-left: 16px;
  }

  .datajoint-banner__dismiss {
    right: 8px;
  }

  .datajoint-banner__text {
    font-size: 13px;
    text-align: left;
  }
}

/* Single blog post layout (templates/single.html). */

.datajoint-single {
  background: #fff;
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-single__hero {
  padding-top: calc(var(--dj-nav-height, 73px) + 64px);
  padding-bottom: 32px;
}

body.has-dj-banner .datajoint-single__hero {
  padding-top: calc(var(--dj-nav-height, 73px) + var(--dj-banner-height, 44px) + 64px);
}

.datajoint-single__cat {
  margin: 0 0 16px;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

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

.datajoint-single__title {
  margin: 0;
  font: 700 clamp(32px, 5vw, 48px)/1.15 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: -0.01em;
}

.datajoint-single__date {
  margin: 16px 0 0;
  font: 300 15px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: var(--wp--preset--color--text-secondary, #808285);
}

.datajoint-single__feature {
  margin: 8px auto 40px;
  max-width: 1080px;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-single__feature img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

.datajoint-single__body {
  padding-bottom: 48px;
}

/* Rich-text article styling. */

.datajoint-single__body p,
.datajoint-single__body li {
  font: 300 18px/1.7 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #2d3748;
}

.datajoint-single__body p {
  margin: 0 0 1.4em;
}

.datajoint-single__body h2 {
  margin: 2em 0 0.6em;
  font: 700 28px/1.25 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-single__body h3 {
  margin: 1.6em 0 0.5em;
  font: 700 22px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-single__body a {
  color: var(--wp--preset--color--brand-blue, #00a0df);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.datajoint-single__body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1.5em 0;
}

.datajoint-single__body figure {
  margin: 2em 0;
}

.datajoint-single__body figcaption {
  margin-top: 10px;
  font: 300 italic 14px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: var(--wp--preset--color--text-secondary, #808285);
  text-align: center;
}

.datajoint-single__body blockquote {
  margin: 1.5em 0;
  padding: 16px 24px;
  border-left: 3px solid var(--wp--preset--color--brand-blue, #00a0df);
  background: var(--wp--preset--color--bg-light-grey, #f4f7fa);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}

.datajoint-single__body hr {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
}

.datajoint-single__back {
  padding-bottom: 80px;
}

.datajoint-single__back a {
  font: 700 16px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: var(--wp--preset--color--brand-blue, #00a0df);
  text-decoration: none;
}

/* Block styles (appended as blocks are built) */

.datajoint-hero {
  position: relative;
  min-height: 100vh;
  background: var(--wp--preset--color--bg-dark, #0a1628);
  color: #fff;
  overflow: hidden;
}

/* Subtle full-background grid */

.datajoint-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.datajoint-hero__inner {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 8rem var(--dj-gutter, 48px) 5rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 4rem;
}

@media (min-width: 1280px) {
  .datajoint-hero__inner {
    grid-template-columns: minmax(0, 1fr) 490px;
    gap: 3.5rem;
    padding-top: 10rem;
  }
}

/*
 * Stacked layout (below the 1280px two-column breakpoint): the diagram sits
 * BETWEEN the heading and the lede. `display: contents` lifts the content
 * children up to be siblings of the diagram so CSS `order` can interleave them.
 */

@media (max-width: 1279.98px) {
  .datajoint-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Clear the fixed nav (+ banner when shown) so the eyebrow isn't tucked
		   right under the top of the page on tablet/mobile (client feedback). */
    padding-top: calc(var(--dj-nav-height, 73px) + 72px);
  }

  body.has-dj-banner .datajoint-hero__inner {
    padding-top: calc(var(--dj-nav-height, 73px) + var(--dj-banner-height, 44px) + 72px);
  }

  .datajoint-hero__content {
    display: contents;
  }

  .datajoint-hero__eyebrow {
    order: 1;
  }

  .datajoint-hero__heading {
    order: 2;
  }

  /* More breathing room between the headline and the animation below it. */

  .datajoint-hero__diagram {
    order: 3;
    margin: 4rem 0 3rem;
  }

  .datajoint-hero__lede {
    order: 4;
  }

  .datajoint-hero__actions {
    order: 5;
  }
}

.datajoint-hero__eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-hero__heading {
  margin: 0;
  max-width: 820px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}

.datajoint-hero__accent {
  color: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-hero__lede {
  margin: 2rem 0 0;
  max-width: 704px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.datajoint-hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.datajoint-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  transition: transform 150ms ease;
}

.datajoint-hero__cta--primary {
  background: var(--wp--preset--color--brand-blue, #00a0df);
  padding: 0.875rem 1.5rem;
  border-radius: 9999px;
}

.datajoint-hero__cta--primary:hover {
  transform: scale(1.02);
}

.datajoint-hero__cta--secondary .datajoint-hero__cta-arrow {
  transition: transform 150ms ease;
}

.datajoint-hero__cta--secondary:hover .datajoint-hero__cta-arrow {
  transform: translateX(4px);
}

.datajoint-hero__diagram {
  /* Query container: descendants read its width via cqw. (A container
	   cannot consume its own cq units, so the scaling lives on the inner
	   wrapper below.) */
  container-type: inline-size;
  width: 100%;
}

/* Scale wrapper. Resolves the shrink factor against the container width and
   reserves the post-scale height so the layout hugs the diagram (no gap). */

.datajoint-hero__diagram-scale {
  /* Unitless ratio: length / length. Never exceeds 1 (no upscaling). */
  --dj-diagram-scale: min(1, 100cqw / 490px);
  height: calc(var(--dj-total-h, 296px) * var(--dj-diagram-scale));
}

/* PlatformHeroDiagram layout. The grid is intrinsically 490px wide; the wrapper
   above scales it down proportionally on narrow containers (no distortion).
   translateX(-50%) keeps it centred even when wider than the container. */

.datajoint-hero__diagram-grid {
  display: grid;
  grid-template-columns:
		var(--dj-bucket-w, 110px)
		var(--dj-connector-w, 60px)
		var(--dj-center-w, 150px)
		var(--dj-connector-w, 60px)
		var(--dj-bucket-w, 110px);
  align-items: stretch;
  width: 490px;
  height: var(--dj-total-h, 296px);
  position: relative;
  left: 50%;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--dj-diagram-scale, 1));
}

.datajoint-hero__flank {
  display: flex;
  align-items: center;
  justify-content: center;
}

.datajoint-hero__flank--mirror {
  transform: scaleX(-1);
}

.datajoint-hero__center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.datajoint-hero__bucket {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 12px;
}

.datajoint-hero__bucket.is-highlight {
  border-radius: 14px;
}

.datajoint-hero__halo {
  position: absolute;
  pointer-events: none;
  border-radius: 22px;
  transform-origin: center;
  animation: dj-hero-halo 4s ease-in-out infinite;
}

.datajoint-hero__halo--outer {
  inset: -16px;
  background: rgba(0, 160, 223, 0.1);
}

.datajoint-hero__halo--inner {
  inset: -4px;
  border-radius: 14px;
  background: rgba(0, 160, 223, 0.3);
}

@keyframes dj-hero-halo {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.04);
    opacity: 0.85;
  }
}

.datajoint-hero__bucket-icon {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.datajoint-hero__bucket-label {
  position: relative;
  margin-top: 8px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
}

.datajoint-hero__connector {
  display: block;
  width: var(--dj-connector-w, 60px);
  height: 100%;
  overflow: visible;
}

.datajoint-hero__vconnector {
  display: block;
  overflow: visible;
}

/* Scroll-down affordance */

.datajoint-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 200ms ease, border-color 200ms ease;
}

.datajoint-hero__scroll:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

/* The scroll-down affordance is irrelevant on the stacked mobile hero. */

@media (max-width: 1279.98px) {
  .datajoint-hero__scroll {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-hero__flow {
    display: none;
  }

  .datajoint-hero__halo {
    animation: none;
  }
}

.datajoint-where-acceleration {
  position: relative;
  background: var(--wp--preset--color--bg-light-grey, #f4f7fa);
  color: var(--wp--preset--color--text-on-light, #011627);
  /* Reference nests two paddings: <section> 32px + inner .wa-pad 0/44px.
	   Combined here: 32px below 1024px, 76px (32+44) at >=1024px. */
  padding-block: 32px;
  scroll-margin-top: 72px;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .datajoint-where-acceleration {
    padding-block: 76px;
  }
}

/* Subtle background grid (dark lines on the light surface). */

.datajoint-where-acceleration__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
		linear-gradient(to right, rgba(1, 22, 39, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(1, 22, 39, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.datajoint-where-acceleration__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-where-acceleration__eyebrow {
  margin: 0 0 1.5rem;
  text-align: center;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

/* Statement block carries the decorative accent line + dot on its left edge. */

.datajoint-where-acceleration__statement {
  position: relative;
}

.datajoint-where-acceleration__lines {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.datajoint-where-acceleration__line {
  margin: 0;
}

.datajoint-where-acceleration__line--strong {
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-where-acceleration__line--accent {
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

@media (min-width: 1024px) {
  .datajoint-where-acceleration__line--strong {
    font-size: 28px;
  }

  .datajoint-where-acceleration__line--accent {
    font-size: 22px;
  }
}

/* Decorative vertical accent line (desktop) at the left of the statement. */

.datajoint-where-acceleration__line-accent {
  position: absolute;
  left: -32px;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--wp--preset--color--brand-blue, #00a0df);
}

/* Glowing dot that travels down the accent line. */

.datajoint-where-acceleration__dot {
  position: absolute;
  left: -34px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  box-shadow: 0 0 12px rgba(0, 160, 223, 0.9), 0 0 24px rgba(0, 160, 223, 0.5);
  pointer-events: none;
  opacity: 0;
}

@keyframes dj-wa-dot-travel {
  0%   {
    top: 0%;
  }

  50%  {
    top: calc(100% - 8px);
  }

  100% {
    top: 0%;
  }
}

/* On narrow screens the vertical line becomes a short horizontal bar and the
   traveling dot is dropped. */

@media (max-width: 767px) {
  .datajoint-where-acceleration__eyebrow {
    text-align: left;
  }

  .datajoint-where-acceleration__line-accent {
    position: relative;
    left: 0;
    top: 0;
    width: 60px;
    height: 4px;
    margin-bottom: 24px;
  }

  .datajoint-where-acceleration__dot {
    display: none;
  }
}

/*
 * Progressive enhancement: only when the view script flags JS support do we
 * hide the lines / collapse the accent line for the scroll reveal. Without JS
 * (or before hydration) everything is fully visible.
 */

.datajoint-where-acceleration.is-js .datajoint-where-acceleration__line {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
  transition-delay: var(--dj-wa-delay, 0ms);
}

.datajoint-where-acceleration.is-js .datajoint-where-acceleration__line-accent {
  height: 0;
  transition: height 400ms ease-out;
}

@media (max-width: 767px) {
  .datajoint-where-acceleration.is-js .datajoint-where-acceleration__line-accent {
    width: 0;
    height: 4px;
    transition: width 400ms ease-out;
  }
}

/* Revealed state (added by the IntersectionObserver). */

.datajoint-where-acceleration.is-visible .datajoint-where-acceleration__line {
  opacity: 1;
  transform: none;
}

.datajoint-where-acceleration.is-visible .datajoint-where-acceleration__line-accent {
  height: 100%;
}

@media (max-width: 767px) {
  .datajoint-where-acceleration.is-visible .datajoint-where-acceleration__line-accent {
    width: 60px;
    height: 4px;
  }
}

.datajoint-where-acceleration.is-visible .datajoint-where-acceleration__dot {
  opacity: 1;
  animation: dj-wa-dot-travel 10s ease-in-out 600ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-where-acceleration.is-js .datajoint-where-acceleration__line {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .datajoint-where-acceleration__dot {
    display: none;
  }
}

.datajoint-problem {
  background: #fff;
  color: var(--wp--preset--color--text-on-light, #011627);
  /* Reference: dj-section top (64/120px) with pb-10/lg:pb-14 bottom (40/56px). */
  padding-top: 64px;
  padding-bottom: 40px;
}

@media (min-width: 1024px) {
  .datajoint-problem {
    padding-top: 120px;
    padding-bottom: 56px;
  }
}

.datajoint-problem__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-problem__eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-problem__heading {
  margin: 0 0 2rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 1024px) {
  .datajoint-problem__heading {
    font-size: 44px;
  }
}

.datajoint-problem__heading-accent {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-problem__intro {
  margin: 0;
  max-width: 1040px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: #4a5568;
}

.datajoint-problem__cards {
  margin-top: 80px;
}

/*
 * ACF wraps InnerBlocks children in `.acf-innerblocks-container` (front end)
 * and `.block-editor-block-list__layout` (editor). The grid must live on that
 * wrapper, not on __cards, or the cards stack as one grid item.
 */

.datajoint-problem__cards > .acf-innerblocks-container,
.datajoint-problem__cards > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .datajoint-problem__cards > .acf-innerblocks-container,
	.datajoint-problem__cards > .block-editor-block-list__layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* Progressive-enhancement reveal: visible without JS. */

.datajoint-problem.is-js .datajoint-problem__head,
.datajoint-problem.is-js .datajoint-problem__intro,
.datajoint-problem.is-js .datajoint-problem__cards .datajoint-problem-card {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.datajoint-problem.is-js .datajoint-problem__head {
  transition-duration: 300ms;
  transition-delay: 0ms;
}

.datajoint-problem.is-js .datajoint-problem__intro {
  transition-delay: 150ms;
}

.datajoint-problem.is-js .datajoint-problem__cards .datajoint-problem-card:nth-child(1) {
  transition-delay: 350ms;
}

.datajoint-problem.is-js .datajoint-problem__cards .datajoint-problem-card:nth-child(2) {
  transition-delay: 450ms;
}

.datajoint-problem.is-js .datajoint-problem__cards .datajoint-problem-card:nth-child(3) {
  transition-delay: 550ms;
}

.datajoint-problem.is-visible .datajoint-problem__head,
.datajoint-problem.is-visible .datajoint-problem__intro,
.datajoint-problem.is-visible .datajoint-problem__cards .datajoint-problem-card {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-problem.is-js .datajoint-problem__head,
	.datajoint-problem.is-js .datajoint-problem__intro,
	.datajoint-problem.is-js .datajoint-problem__cards .datajoint-problem-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.datajoint-problem-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: #fff;
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
  border-radius: 24px;
  padding: 40px;
}

/* Top accent bar. */

.datajoint-problem-card__bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-problem-card__number {
  margin: 0 0 1.5rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-problem-card__title {
  margin: 0 0 1rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-problem-card__body {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.65;
  color: #4a5568;
}

.datajoint-flow-strip {
  position: relative;
  background: #fff;
}

/*
 * The flow strip is a wide three-channel "convergence" diagram tuned for the
 * multi-column card layout above it. Below 1024px those cards stack to a single
 * column, so the converging-channels metaphor no longer reads — it just becomes
 * a squished squiggle. Hide it on mobile/tablet (a deliberate divergence from
 * the Lovable reference, which shows it at all widths). Purely decorative, so
 * nothing of value is lost.
 */

@media (max-width: 1023.98px) {
  .datajoint-flow-strip {
    display: none;
  }
}

.datajoint-flow-strip__wrap {
  max-width: 1280px;
  margin: 0 auto;
  /* Height scales with width at the SVG's native 1280:200 ratio so the
	   geometry never distorts as the container narrows (vs a fixed height +
	   preserveAspectRatio=none, which squished the channels/node). Caps at
	   200px once the box reaches its 1280px max-width. */
  aspect-ratio: 1280 / 200;
  max-height: 200px;
  overflow: visible;
}

.datajoint-flow-strip__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes dj-fs-ring-pulse {
  0%   {
    transform: scale(1);
  }

  12%  {
    transform: scale(1.08);
  }

  40%  {
    transform: scale(1);
  }

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

.datajoint-flow-strip__ring {
  transform-origin: center;
  transform-box: fill-box;
  animation: dj-fs-ring-pulse 2s ease-in-out infinite;
}

/* Static dots only appear under reduced motion. */

.datajoint-flow-strip__dot-static {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-flow-strip__dot-anim {
    display: none;
  }

  .datajoint-flow-strip__dot-static {
    display: inline;
  }

  .datajoint-flow-strip__ring {
    animation: none;
  }
}

.datajoint-difference {
  background: #fff;
  color: var(--wp--preset--color--text-on-light, #011627);
  padding-top: 48px;
  padding-bottom: 64px;
  scroll-margin-top: 80px;
}

.datajoint-difference__head {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-difference__eyebrow {
  margin: 0 0 2rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-difference__statement {
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.4;
  color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 768px) {
  .datajoint-difference__statement {
    font-size: 28px;
  }
}

@media (min-width: 1024px) {
  .datajoint-difference__statement {
    font-size: 36px;
  }
}

.datajoint-difference__statement .is-accent {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-difference__body {
  max-width: 1280px;
  margin: 80px auto 40px;
  padding: 0 var(--dj-gutter, 48px);
}

/* Benefit grid: 1 -> 2 (md) -> 4 (lg). Grid lives on the ACF InnerBlocks
   wrapper (see problem block note). */

.datajoint-difference__grid > .acf-innerblocks-container,
.datajoint-difference__grid > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .datajoint-difference__grid > .acf-innerblocks-container,
	.datajoint-difference__grid > .block-editor-block-list__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .datajoint-difference__grid > .acf-innerblocks-container,
	.datajoint-difference__grid > .block-editor-block-list__layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* CTA */

.datajoint-difference__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .datajoint-difference__cta-wrap {
    margin-top: 48px;
  }
}

@media (min-width: 1024px) {
  .datajoint-difference__cta-wrap {
    margin-top: 56px;
  }
}

.datajoint-difference__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}

.datajoint-difference__cta:hover {
  border-bottom-color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-difference__cta:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-blue, #00a0df);
  outline-offset: 4px;
  border-radius: 2px;
}

.datajoint-difference__cta-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.datajoint-difference__cta:hover .datajoint-difference__cta-arrow {
  transform: translateX(4px);
}

/* Progressive-enhancement reveal. */

.datajoint-difference.is-js .datajoint-difference__statement,
.datajoint-difference.is-js .datajoint-difference-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.datajoint-difference.is-js .datajoint-difference__statement {
  transition-delay: 150ms;
}

.datajoint-difference.is-js .datajoint-difference-item:nth-child(1) {
  transition-delay: 250ms;
}

.datajoint-difference.is-js .datajoint-difference-item:nth-child(2) {
  transition-delay: 330ms;
}

.datajoint-difference.is-js .datajoint-difference-item:nth-child(3) {
  transition-delay: 410ms;
}

.datajoint-difference.is-js .datajoint-difference-item:nth-child(4) {
  transition-delay: 490ms;
}

.datajoint-difference.is-visible .datajoint-difference__statement,
.datajoint-difference.is-visible .datajoint-difference-item {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-difference.is-js .datajoint-difference__statement,
	.datajoint-difference.is-js .datajoint-difference-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.datajoint-difference-item {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: #fff;
  border: 1.5px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
  text-align: left;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

@media (min-width: 768px) {
  .datajoint-difference-item {
    padding: 24px;
  }
}

@media (min-width: 1024px) {
  .datajoint-difference-item {
    padding: 28px;
  }
}

.datajoint-difference-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-difference-item:hover {
  border-color: var(--wp--preset--color--brand-blue, #00a0df);
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(1, 22, 39, 0.08);
}

.datajoint-difference-item__icon {
  display: block;
  margin-bottom: 20px;
}

.datajoint-difference-item__benefit {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--wp--preset--color--text-on-light, #011627);
  /* Reserve two lines so cards align regardless of headline length. */
  min-height: calc(18px * 1.3 * 2);
}

.datajoint-difference-item__divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 20px 0;
  background: var(--wp--preset--color--border-light, #e2e2e2);
}

.datajoint-difference-item__proof {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: #4a5568;
}

.datajoint-four-pillars {
  background: var(--wp--preset--color--bg-dark, #0a1628);
  color: var(--wp--preset--color--text-on-dark, #fff);
  padding-block: 64px;
}

@media (min-width: 1024px) {
  .datajoint-four-pillars {
    padding-block: 120px;
  }
}

.datajoint-four-pillars__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-four-pillars__eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-four-pillars__heading {
  margin: 0 0 1.5rem;
  max-width: 48rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #fff;
}

@media (min-width: 1024px) {
  .datajoint-four-pillars__heading {
    font-size: 40px;
    /* Reference keeps the headline on one line at desktop. */
    white-space: nowrap;
    max-width: none;
  }
}

.datajoint-four-pillars__intro {
  margin: 0 0 5rem;
  max-width: 820px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* Grid lives on the ACF InnerBlocks wrapper. 1 -> 2 (md) -> 4 (lg). */

.datajoint-four-pillars__grid > .acf-innerblocks-container,
.datajoint-four-pillars__grid > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .datajoint-four-pillars__grid > .acf-innerblocks-container,
	.datajoint-four-pillars__grid > .block-editor-block-list__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .datajoint-four-pillars__grid > .acf-innerblocks-container,
	.datajoint-four-pillars__grid > .block-editor-block-list__layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Progressive-enhancement reveal (stagger handled per-item nth-child). */

.datajoint-four-pillars.is-js .datajoint-pillar-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.datajoint-four-pillars.is-js .datajoint-pillar-item:nth-child(1) {
  transition-delay: 0ms;
}

.datajoint-four-pillars.is-js .datajoint-pillar-item:nth-child(2) {
  transition-delay: 100ms;
}

.datajoint-four-pillars.is-js .datajoint-pillar-item:nth-child(3) {
  transition-delay: 200ms;
}

.datajoint-four-pillars.is-js .datajoint-pillar-item:nth-child(4) {
  transition-delay: 300ms;
}

.datajoint-four-pillars.is-visible .datajoint-pillar-item {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-four-pillars.is-js .datajoint-pillar-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.datajoint-pillar-item {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 40px;
}

.datajoint-pillar-item__bar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-pillar-item__number {
  margin: 0 0 1.5rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-pillar-item__name {
  margin: 0 0 1rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: #fff;
}

.datajoint-pillar-item__headline {
  margin: 0 0 1rem;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.35;
  text-wrap: balance;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-pillar-item.is-accent .datajoint-pillar-item__headline {
  color: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-pillar-item__body {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

.datajoint-logo-wall {
  background: var(--wp--preset--color--bg-dark, #0a1628);
  color: #fff;
  padding-top: 16px;
  padding-bottom: 120px;
}

.datajoint-logo-wall__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

/* Eyebrow flanked by fading rules. */

.datajoint-logo-wall__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.datajoint-logo-wall__rule {
  flex: 0 1 120px;
  height: 1px;
}

.datajoint-logo-wall__rule--left {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
}

.datajoint-logo-wall__rule--right {
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
}

.datajoint-logo-wall__eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  text-align: center;
  white-space: nowrap;
}

.datajoint-logo-wall__intro {
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* Marquee viewport with faded edges. */

.datajoint-logo-wall__viewport {
  margin-top: 56px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

@keyframes dj-lw-marquee {
  0%   {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.datajoint-logo-wall__track {
  display: flex;
  gap: 64px;
  width: -moz-max-content;
  width: max-content;
  animation: dj-lw-marquee 75s linear infinite;
}

.datajoint-logo-wall__cell {
  flex-shrink: 0;
  width: 200px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.datajoint-logo-wall__logo {
  max-height: 48px;
  max-width: 180px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.92;
  transition: opacity 200ms ease;
}

.datajoint-logo-wall__logo:hover {
  opacity: 1;
}

/* Tablet: smaller logo cells (marquee still runs). */

@media (max-width: 1024px) {
  .datajoint-logo-wall__cell {
    width: 160px;
    height: 36px;
    padding: 0 14px;
  }

  .datajoint-logo-wall__logo {
    max-height: 36px;
    max-width: 140px;
  }
}

/*
 * Mobile (<768px): a 75s auto-scrolling marquee is poor UX on a phone — drop it
 * for a calm, static, centred grid that shows every logo at once. We hide the
 * duplicate (aria-hidden) marquee pass so each institution appears exactly once.
 * Deliberate divergence from Lovable (which marquees at all widths).
 */

@media (max-width: 767.98px) {
  .datajoint-logo-wall {
    padding-bottom: 64px;
  }

  .datajoint-logo-wall__viewport {
    margin-top: 40px;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
    padding: 0 var(--dj-gutter, 24px);
  }

  .datajoint-logo-wall__track {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px 32px;
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    animation: none;
  }

  .datajoint-logo-wall__cell {
    width: 130px;
    height: 40px;
    padding: 0;
  }

  .datajoint-logo-wall__logo {
    max-height: 40px;
    max-width: 130px;
    opacity: 1;
  }

  /* Show each logo once: drop the duplicate marquee pass. */

  .datajoint-logo-wall__cell[aria-hidden="true"] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-logo-wall__track {
    animation: none;
  }
}

.datajoint-wwf {
  background: #fff;
  color: var(--wp--preset--color--text-on-light, #011627);
  padding-top: 120px;
  padding-bottom: 120px;
}

.datajoint-wwf__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

/* Header */

.datajoint-wwf__eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  line-height: 1;
}

.datajoint-wwf__heading {
  margin: 24px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 1024px) {
  .datajoint-wwf__heading {
    font-size: 48px;
  }
}

.datajoint-wwf__intro {
  margin: 32px 0 0;
  max-width: 1240px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  color: #4a5568;
}

/* Diagram grid */

.datajoint-wwf__diagram {
  margin-top: 72px;
}

.datajoint-wwf__grid {
  display: grid;
  grid-template-columns: 17fr 3.5fr 59fr 3.5fr 17fr;
  gap: 0;
  align-items: stretch;
}

.datajoint-wwf__flow-cell {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.datajoint-wwf__flow-cell--mirror {
  transform: scaleX(-1);
}

/* Flank columns (Source / Outcomes) */

.datajoint-wwf__flank {
  display: flex;
  flex-direction: column;
  background: rgba(255, 81, 19, 0.04);
  border: 2px solid var(--wp--preset--color--brand-orange, #ff5113);
  border-radius: 8px;
  padding: 20px;
}

.datajoint-wwf__flank-title {
  margin: 0 0 16px;
  text-align: center;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-wwf__flank-boxes {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

/* Equal-height boxes (client decision): every Source Systems / Research Outcomes
   box grows to the same height regardless of 1 vs 2 lines of text, so the column
   reads uniform rather than ragged. */

.datajoint-wwf__flank-boxes > * {
  flex: 1 1 0;
}

.datajoint-wwf__box {
  background: #fff;
  border: 1.5px solid var(--wp--preset--color--brand-orange, #ff5113);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-wwf__flank-caption {
  margin: 16px 0 0;
  min-height: 36px;
  text-align: center;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 81, 19, 0.9);
}

.datajoint-wwf__flank-caption--neutral {
  color: #4a5568;
}

/* The Downstream tier's caption sits inside a fixed-padding card, so it doesn't
   need the tall reserved height the flank captions use for column alignment. */

.datajoint-wwf__tier--ds .datajoint-wwf__flank-caption {
  margin-top: 10px;
  min-height: 0;
}

/* Center stacked column */

.datajoint-wwf__center {
  display: flex;
  flex-direction: column;
}

.datajoint-wwf__tier {
  border-radius: 8px;
}

.datajoint-wwf__tier--dj {
  background: rgba(0, 160, 223, 0.04);
  border: 2px solid var(--wp--preset--color--brand-blue, #00a0df);
  padding: 14px;
}

.datajoint-wwf__tier--ds {
  background: var(--wp--preset--color--bg-light-grey, #f4f7fa);
  border: 2px solid #4a5568;
  /* Tighten the bottom so the Downstream card's lower whitespace matches the
	   DataJoint card above it (client feedback). */
  padding: 12px 20px 14px;
}

.datajoint-wwf__tier-title {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  text-transform: uppercase;
}

.datajoint-wwf__tier-title--dj {
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-wwf__tier-title--ds {
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--text-on-light, #011627);
  margin-bottom: 10px;
}

.datajoint-wwf__sep {
  opacity: 0.6;
}

/* DataJoint step cards */

.datajoint-wwf__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.datajoint-wwf__step {
  background: #fff;
  border: 1.5px solid var(--wp--preset--color--brand-blue, #00a0df);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.datajoint-wwf__step.is-accent {
  border-color: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-wwf__step-bar {
  display: block;
  height: 3px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-wwf__step.is-accent .datajoint-wwf__step-bar {
  background: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-wwf__step-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.datajoint-wwf__step-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.datajoint-wwf__step-num {
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-wwf__step.is-accent .datajoint-wwf__step-num {
  color: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-wwf__step-name {
  margin: 0 0 6px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--wp--preset--color--text-on-light, #011627);
  text-align: left;
}

.datajoint-wwf__step-text {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 10.5px;
  line-height: 1.45;
  color: #4a5568;
  text-align: left;
}

.datajoint-wwf__step-div {
  display: block;
  height: 1px;
  background: var(--wp--preset--color--border-light, #e2e2e2);
  /* Keep the divider a true 1px hairline. Push it DOWN using auto top margin
	   (transparent) so it never paints as a thick grey bar (client: "not thick
	   grey bars, just the same thin line, pushed down"). The 20px min gap above
	   it comes from the text block's margin-bottom below, since margin-top can't
	   be both `auto` and a fixed minimum. */
  margin: 0 0 10px;
  margin-top: auto;
}

/* Guaranteed breathing room above the hairline on every card. */

.datajoint-wwf__step-text {
  margin-bottom: 20px;
}

.datajoint-wwf__step-pillar {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  text-align: left;
  line-height: 1.35;
  min-height: calc(8.5px * 1.35 * 3);
}

.datajoint-wwf__step.is-accent .datajoint-wwf__step-pillar {
  color: var(--wp--preset--color--brand-orange, #ff5113);
}

/* Scientist-in-the-loop bar */

.datajoint-wwf__sitl {
  margin-top: 12px;
  background: #fff;
  border: 1.5px solid var(--wp--preset--color--brand-blue, #00a0df);
  border-radius: 8px;
  padding: 8px 20px;
  text-align: center;
}

.datajoint-wwf__sitl-title {
  margin: 0 0 2px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-wwf__sitl-text {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-style: italic;
  font-size: 13px;
  color: #4a5568;
}

/* Vertical connector */

.datajoint-wwf__vconnector {
  width: 100%;
  height: 40px;
}

/* Downstream boxes */

.datajoint-wwf__dp-boxes {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.datajoint-wwf__dp-box {
  flex: 1;
  background: #fff;
  border: 1.5px solid var(--wp--preset--color--brand-blue, #00a0df);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--wp--preset--color--text-on-light, #011627);
  line-height: 1.3;
}

/* Progression pill */

.datajoint-wwf__progression {
  margin-top: 64px;
  text-align: center;
}

.datajoint-wwf__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  background: var(--wp--preset--color--bg-dark, #0a1628);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
  padding: 20px 32px;
}

.datajoint-wwf__stage {
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.datajoint-wwf__stage--white {
  color: #fff;
}

.datajoint-wwf__stage--blue {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-wwf__stage--orange {
  color: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-wwf__pill-arrow {
  flex-shrink: 0;
}

/* Closing statement */

.datajoint-wwf__closing {
  margin: 24px auto 0;
  max-width: 960px;
  text-align: center;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.35;
  color: var(--wp--preset--color--text-on-light, #011627);
  padding-top: 12px;
}

.datajoint-wwf__closing .is-accent {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

/* CTA */

.datajoint-wwf__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.datajoint-wwf__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}

.datajoint-wwf__cta:hover {
  border-bottom-color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-wwf__cta-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.datajoint-wwf__cta:hover .datajoint-wwf__cta-arrow {
  transform: translateX(4px);
}

/*
 * Collapse the horizontal flow connectors and stack the diagram below 1199px.
 * The flow cells only make sense in the 5-column desktop layout.
 */

@media (max-width: 1199px) {
  .datajoint-wwf__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .datajoint-wwf__flow-cell {
    display: none;
  }

  /* When the diagram stacks vertically the curved horizontal connectors are
	   hidden; hide the middle DataJoint<->Downstream connector too so we don't
	   show a single orphan flow strip with the others gone (client feedback). */

  .datajoint-wwf__vconnector {
    display: none;
  }

  .datajoint-wwf__center {
    gap: 16px;
  }

  .datajoint-wwf__flank-boxes {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .datajoint-wwf__flank-boxes > * {
    flex: 1 1 calc(20% - 12px);
    min-width: 140px;
  }
}

@media (max-width: 1199px) and (min-width: 768px) {
  .datajoint-wwf__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .datajoint-wwf {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .datajoint-wwf__flank-boxes > * {
    flex: 1 1 calc(50% - 12px);
  }

  .datajoint-wwf__steps {
    grid-template-columns: 1fr;
  }

  .datajoint-wwf__dp-boxes {
    flex-wrap: wrap;
  }

  .datajoint-wwf__dp-box {
    flex: 1 1 calc(50% - 12px);
  }

  .datajoint-wwf__closing {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-wwf__diagram .wwf-dot {
    animation: none;
  }
}

.datajoint-wyg {
  background: var(--wp--preset--color--bg-light-grey, #f4f7fa);
  color: var(--wp--preset--color--text-on-light, #011627);
  padding-top: 96px;
  padding-bottom: 96px;
}

@media (max-width: 767px) {
  .datajoint-wyg {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.datajoint-wyg__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-wyg__head {
  text-align: center;
}

.datajoint-wyg__eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  line-height: 1;
}

.datajoint-wyg__heading {
  margin: 24px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 1024px) {
  .datajoint-wyg__heading {
    font-size: 48px;
  }
}

.datajoint-wyg__sub {
  margin: 24px 0 0;
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  color: #4a5568;
}

@media (max-width: 767px) {
  .datajoint-wyg__heading {
    font-size: 32px;
  }

  .datajoint-wyg__sub {
    white-space: normal;
    font-size: 18px;
  }
}

/* Outcome grid: 3 -> 2 (1024) -> 1 (768). Grid on the ACF innerblocks wrapper. */

.datajoint-wyg__grid {
  margin-top: 56px;
}

.datajoint-wyg__grid > .acf-innerblocks-container,
.datajoint-wyg__grid > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1024px) {
  .datajoint-wyg__grid > .acf-innerblocks-container,
	.datajoint-wyg__grid > .block-editor-block-list__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .datajoint-wyg__grid > .acf-innerblocks-container,
	.datajoint-wyg__grid > .block-editor-block-list__layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Statement */

.datajoint-wyg__statement {
  margin: 56px auto 0;
  max-width: 720px;
  text-align: center;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

/* CTA */

.datajoint-wyg__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.datajoint-wyg__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--wp--preset--color--text-on-light, #011627);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms ease;
}

.datajoint-wyg__cta:hover {
  border-bottom-color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-wyg__cta-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.datajoint-wyg__cta:hover .datajoint-wyg__cta-arrow {
  transform: translateX(4px);
}

/* Reveal */

.datajoint-wyg.is-js .datajoint-outcome-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.datajoint-wyg.is-js .datajoint-outcome-item:nth-child(1) {
  transition-delay: 0ms;
}

.datajoint-wyg.is-js .datajoint-outcome-item:nth-child(2) {
  transition-delay: 100ms;
}

.datajoint-wyg.is-js .datajoint-outcome-item:nth-child(3) {
  transition-delay: 200ms;
}

.datajoint-wyg.is-js .datajoint-outcome-item:nth-child(4) {
  transition-delay: 300ms;
}

.datajoint-wyg.is-js .datajoint-outcome-item:nth-child(5) {
  transition-delay: 400ms;
}

.datajoint-wyg.is-js .datajoint-outcome-item:nth-child(6) {
  transition-delay: 500ms;
}

.datajoint-wyg.is-visible .datajoint-outcome-item {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-wyg.is-js .datajoint-outcome-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.datajoint-outcome-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 40, 80, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.datajoint-outcome-item__bar {
  display: block;
  height: 4px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-outcome-item__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.datajoint-outcome-item__icon {
  display: block;
  margin-bottom: 16px;
}

.datajoint-outcome-item__headline {
  margin: 0 0 12px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-outcome-item__text {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: #4a5568;
}

.datajoint-cs {
  background: var(--wp--preset--color--bg-dark, #0a1628);
  color: #fff;
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 768px) {
  .datajoint-cs {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}

.datajoint-cs__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

/* Header */

.datajoint-cs__eyebrow {
  margin: 0 0 24px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-cs__heading {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: #fff;
  /* Balance line lengths to avoid single-word orphans when each line wraps
	   on tablet/mobile (client: "two orphan texts"). */
  text-wrap: balance;
}

@media (min-width: 768px) {
  .datajoint-cs__heading {
    font-size: 48px;
  }
}

.datajoint-cs__heading-accent {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-cs__intro {
  margin: 32px 0 80px;
  max-width: 880px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* Tabs */

.datajoint-cs__tabs {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Let the scrollable tab row breathe to the section edges so the last tab
	   isn't visually clipped by the container on tablet/mobile (client: "tabs
	   are being cut off in tablet view"). */
  margin-inline: calc(var(--dj-gutter, 48px) * -1);
  padding-inline: var(--dj-gutter, 48px);
  scroll-padding-inline: var(--dj-gutter, 48px);
}

.datajoint-cs__tabs::-webkit-scrollbar {
  display: none;
}

/* Phones: stack the three case-study tabs full-width so all are visible at once,
   rather than a horizontal scroll that clipped "Shriners" and pushed the third
   tab off-screen (client 5:09). */

@media (max-width: 767px) {
  .datajoint-cs__tabs {
    flex-direction: column;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: 10px;
  }

  .datajoint-cs__tab {
    width: 100%;
    flex-shrink: 1;
    border-radius: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .datajoint-cs__tab.is-active {
    border-bottom-color: var(--wp--preset--color--brand-blue, #00a0df);
  }

  .datajoint-cs__tab-bar {
    border-radius: 8px 8px 0 0;
  }
}

@media (min-width: 768px) {
  .datajoint-cs__tabs {
    justify-content: center;
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
  }
}

.datajoint-cs__tab {
  position: relative;
  flex-shrink: 0;
  text-align: left;
  padding: 16px 32px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.datajoint-cs__tab:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.02);
}

.datajoint-cs__tab.is-active {
  border-color: var(--wp--preset--color--brand-blue, #00a0df);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.datajoint-cs__tab-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  opacity: 0;
}

.datajoint-cs__tab.is-active .datajoint-cs__tab-bar {
  opacity: 1;
}

.datajoint-cs__tab-title {
  display: block;
  font-weight: 700;
  font-size: 16px;
}

/* Tablet: tighten tab padding/type so all tabs fit one centered row without
   being clipped (client feedback). */

@media (min-width: 768px) and (max-width: 1023.98px) {
  .datajoint-cs__tab {
    padding: 12px 16px;
  }

  .datajoint-cs__tab-title {
    font-size: 14px;
  }

  .datajoint-cs__tab-sub {
    font-size: 11px;
  }
}

.datajoint-cs__tab-sub {
  display: block;
  margin-top: 4px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 13px;
}

/* Panel */

.datajoint-cs__panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(0, 160, 223, 0.3);
  border-radius: 0 16px 16px 16px;
  padding: 32px;
  animation: dj-cs-fade 250ms ease;
}

.datajoint-cs__panel[hidden] {
  display: none;
}

@keyframes dj-cs-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .datajoint-cs__panel {
    padding: 48px;
  }
}

.datajoint-cs__panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 1024px) {
  .datajoint-cs__panel-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

/* Story column */

.datajoint-cs__case-eyebrow {
  margin: 0 0 16px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-cs__case-headline {
  margin: 0 0 32px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: #fff;
}

@media (min-width: 768px) {
  .datajoint-cs__case-headline {
    font-size: 32px;
  }
}

.datajoint-cs__quote {
  position: relative;
  margin: 0;
  padding-top: 24px;
}

.datajoint-cs__quote-mark {
  position: absolute;
  top: -12px;
  left: -8px;
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 1;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  opacity: 0.4;
  pointer-events: none;
}

.datajoint-cs__quote-text {
  position: relative;
  margin: 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}

@media (min-width: 768px) {
  .datajoint-cs__quote-text {
    font-size: 24px;
  }
}

.datajoint-cs__attr-name {
  margin: 32px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.datajoint-cs__attr-title {
  margin: 4px 0 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.datajoint-cs__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.datajoint-cs__stat {
  flex: 1 1 120px;
  min-width: 120px;
}

.datajoint-cs__stat-n {
  display: block;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-cs__stat-label {
  display: block;
  margin-top: 8px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

/* Timeline */

.datajoint-cs__timeline {
  position: relative;
  padding-left: 8px;
}

.datajoint-cs__timeline-line {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 21.25px;
  width: 1.5px;
  background: rgba(0, 160, 223, 0.4);
}

.datajoint-cs__milestones {
  list-style: none;
  margin: 0;
  padding: 0;
}

.datajoint-cs__milestone {
  position: relative;
  padding-left: 56px;
  margin-bottom: 24px;
}

.datajoint-cs__milestone:last-child {
  margin-bottom: 0;
}

.datajoint-cs__milestone-dot {
  position: absolute;
  left: 8px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  box-shadow: 0 0 0 4px var(--wp--preset--color--bg-dark, #0a1628);
}

.datajoint-cs__milestone.is-accent .datajoint-cs__milestone-dot {
  background: var(--wp--preset--color--brand-orange, #ff5113);
}

.datajoint-cs__milestone-tick {
  position: absolute;
  left: 20px;
  top: 9px;
  width: 16px;
  height: 2px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  opacity: 0.5;
}

.datajoint-cs__milestone-time {
  display: block;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-cs__milestone-name {
  display: block;
  margin-top: 6px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.datajoint-cs__milestone-desc {
  margin: 6px 0 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}

/* Funders */

.datajoint-cs__funders {
  margin-top: 80px;
}

.datajoint-cs__funders-label {
  margin: 0;
  text-align: center;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-cs__builtwith {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 40px 0 32px;
}

.datajoint-cs__rule {
  flex: 0 1 80px;
  height: 1px;
}

.datajoint-cs__rule--left {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.datajoint-cs__rule--right {
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.datajoint-cs__builtwith-text {
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.datajoint-cs__funder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (min-width: 768px) {
  .datajoint-cs__funder-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.datajoint-cs__funder {
  text-align: center;
}

.datajoint-cs__funder-short {
  display: block;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
}

.datajoint-cs__funder-full {
  display: block;
  margin-top: 6px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* CTA */

.datajoint-cs__cta-wrap {
  margin-top: 32px;
  text-align: center;
}

@media (min-width: 1024px) {
  .datajoint-cs__cta-wrap {
    margin-top: 48px;
  }
}

.datajoint-cs__cta {
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.datajoint-cs__cta:hover {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--brand-blue, #00a0df);
  text-underline-offset: 4px;
}

.datajoint-cs__cta-arrow {
  display: inline-block;
  margin-left: 6px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  transition: transform 200ms ease;
}

.datajoint-cs__cta:hover .datajoint-cs__cta-arrow {
  transform: translateX(4px);
}

.datajoint-engagement {
  background: #fff;
  color: var(--wp--preset--color--text-on-light, #011627);
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 768px) {
  .datajoint-engagement {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 1024px) {
  .datajoint-engagement {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.datajoint-engagement__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.datajoint-engagement__eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-engagement__heading {
  margin: 0;
  max-width: 920px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 768px) {
  .datajoint-engagement__heading {
    font-size: 28px;
  }
}

@media (min-width: 1024px) {
  .datajoint-engagement__heading {
    font-size: 36px;
  }
}

.datajoint-engagement__body {
  margin: 1.5rem 0 0;
  max-width: 720px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: #4a5568;
}

@media (min-width: 768px) {
  .datajoint-engagement__body {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .datajoint-engagement__body {
    font-size: 18px;
  }
}

.datajoint-engagement__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2.5rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-engagement__cta:hover {
  text-decoration: underline;
}

.datajoint-engagement__cta-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.datajoint-engagement__cta:hover .datajoint-engagement__cta-arrow {
  transform: translateX(4px);
}

.datajoint-apps-hero {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--bg-dark, #0a1628);
  color: var(--wp--preset--color--text-on-dark, #fff);
  padding-block: 140px 100px;
}

.datajoint-apps-hero__grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

.datajoint-apps-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 1024px) {
  .datajoint-apps-hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
  }
}

/* Tablet/mobile: place the icon grid between the headline and the lede (matches
   the homepage hero), and keep it compact. */

@media (max-width: 1023.98px) {
  .datajoint-apps-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .datajoint-apps-hero__content {
    display: contents;
  }

  .datajoint-apps-hero__eyebrow {
    order: 1;
  }

  .datajoint-apps-hero__title {
    order: 2;
  }

  .datajoint-apps-hero__visual {
    order: 3;
    margin: 2.5rem 0;
  }

  .datajoint-apps-hero__lede {
    order: 4;
  }

  .datajoint-apps-hero__stats {
    order: 5;
  }

  .datajoint-apps-hero__ctas {
    order: 6;
  }

  .datajoint-apps-hero__grid {
    width: min(100%, 340px);
  }
}

.datajoint-apps-hero__eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-hero__title {
  margin: 20px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  color: #fff;
}

.datajoint-apps-hero__title span {
  display: block;
}

.datajoint-apps-hero__title-accent {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

@media (min-width: 768px) {
  .datajoint-apps-hero__title {
    font-size: 52px;
  }
}

.datajoint-apps-hero__lede {
  margin: 24px 0 0;
  max-width: 580px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.datajoint-apps-hero__stats {
  margin-top: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 16px;
}

.datajoint-apps-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.datajoint-apps-hero__stat strong,
.datajoint-apps-hero__stat svg {
  height: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 28px;
}

.datajoint-apps-hero__stat p {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.datajoint-apps-hero__stat-divider {
  width: 1px;
  height: 44px;
  margin-inline: 28px;
  background: rgba(255, 255, 255, 0.15);
}

.datajoint-apps-hero__ctas {
  margin-top: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.datajoint-apps-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 24px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  color: #fff;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 15px;
  transition: transform 150ms ease;
}

.datajoint-apps-hero__cta-primary:hover {
  transform: scale(1.02);
}

.datajoint-apps-hero__cta-secondary {
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}

.datajoint-apps-hero__visual {
  align-self: stretch;
  display: grid;
  place-items: center;
}

.datajoint-apps-hero__grid {
  width: min(100%, 400px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.datajoint-apps-hero__tile {
  position: relative;
  aspect-ratio: 96 / 80;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(0, 160, 223, 0.6);
  transition: background 600ms ease, border-color 600ms ease, color 600ms ease, box-shadow 600ms ease, transform 600ms ease;
  will-change: transform, background, box-shadow;
}

.datajoint-apps-hero__tile svg {
  width: 50%;
  max-width: 28px;
  aspect-ratio: 1;
}

.datajoint-apps-hero__tile[data-state="blue"] {
  color: #00a0df;
  background: rgba(0, 160, 223, 0.12);
  border: 1.5px solid #00a0df;
  box-shadow: 0 0 16px rgba(0, 160, 223, 0.3);
  animation: datajoint-apps-hero-pulse 2s ease-in-out infinite;
}

.datajoint-apps-hero__tile[data-state="orange"] {
  color: #ff5113;
  background: rgba(255, 81, 19, 0.12);
  border: 1.5px solid #ff5113;
  box-shadow: 0 0 16px rgba(255, 81, 19, 0.3);
  animation: datajoint-apps-hero-pulse 2s ease-in-out infinite;
}

@keyframes datajoint-apps-hero-pulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-apps-hero__tile,
	.datajoint-apps-hero__tile[data-state="blue"],
	.datajoint-apps-hero__tile[data-state="orange"] {
    animation: none !important;
    transition: none !important;
  }
}

.datajoint-apps-story {
  background: #fff;
  color: var(--wp--preset--color--text-on-light, #011627);
  padding-block: 80px;
}

.datajoint-apps-story__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-apps-story__header {
  text-align: left;
  max-width: 980px;
}

.datajoint-apps-story__eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-story__heading {
  margin: 16px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
}

.datajoint-apps-story__intro {
  margin: 20px 0 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 300;
  color: #4a5568;
}

.datajoint-apps-story__grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 960px) {
  .datajoint-apps-story__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .datajoint-apps-story__heading {
    font-size: 40px;
  }
}

.datajoint-apps-story__card {
  position: relative;
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-radius: 16px;
  padding: 32px 28px 28px;
  background: #fff;
  overflow: hidden;
}

/* Colored top bar matching the catalog card color-coding below: the Elements
   card (left) gets a blue bar; the Tools card (right) gets a dark-grey bar. */

.datajoint-apps-story__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.datajoint-apps-story__card:nth-child(1)::before {
  background: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-story__card:nth-child(2)::before {
  background: #3a4452;
}

/* Keep the Tools label grey to echo its bar, like the catalog cards. */

.datajoint-apps-story__card:nth-child(2) .datajoint-apps-story__label {
  color: #3a4452;
}

.datajoint-apps-story__label {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-story__card h3 {
  margin: 10px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: #011627;
}

.datajoint-apps-story__card p:last-child {
  margin: 12px 0 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 300;
  color: #4a5568;
}

.datajoint-apps-catalog {
  background: #fff;
  color: var(--wp--preset--color--text-on-light, #011627);
  padding-block: 80px 100px;
}

.datajoint-apps-catalog__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-apps-catalog__head {
  text-align: center;
}

.datajoint-apps-catalog__eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__heading {
  margin: 16px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 1024px) {
  .datajoint-apps-catalog__heading {
    font-size: 40px;
  }
}

.datajoint-apps-catalog__sentinel {
  height: 1px;
  margin-top: 48px;
}

.datajoint-apps-catalog__filters {
  position: sticky;
  /* Lock just under the fixed nav (and the banner when it's shown). */
  top: var(--dj-nav-height, 73px);
  z-index: 20;
  padding-block: 16px;
  /* Break the grey bar out to the full viewport width so the background runs
	   margin-to-margin like the FAQ filter bar / the nav (client: grey was
	   cutting off left+right inside the 1280px container on wide screens). The
	   inner padding keeps the controls aligned to the page's content column:
	   the container gutter plus half of any space beyond 1280px. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: max(var(--dj-gutter, 48px), calc((100vw - 1280px) / 2 + var(--dj-gutter, 48px)));
  border-block: 1px solid transparent;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

body.has-dj-banner .datajoint-apps-catalog__filters {
  top: calc(var(--dj-nav-height, 73px) + var(--dj-banner-height, 44px));
}

/* When stuck under the nav, switch to a light-grey bar with a subtle shadow
   (matches the Lovable behaviour). */

.datajoint-apps-catalog__filters.is-stuck {
  background: var(--wp--preset--color--bg-light-grey, #f4f7fa);
  border-block-color: var(--wp--preset--color--border-light, #e2e2e2);
  box-shadow: 0 4px 12px rgba(1, 22, 39, 0.06);
}

/* Mobile: keep the type pills (All / Elements / Tools) and the category dropdown
   on one row, with the search field on its own row below (client 5:26). */

@media (max-width: 1023.98px) {
  .datajoint-apps-catalog__filters {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px 12px;
  }

  .datajoint-apps-catalog__type-group {
    grid-column: 1;
  }

  .datajoint-apps-catalog__category-wrap {
    grid-column: 2;
    justify-self: start;
  }

  .datajoint-apps-catalog__search {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .datajoint-apps-catalog__filters {
    grid-template-columns: auto auto minmax(280px, 1fr);
    align-items: center;
    gap: 20px;
  }
}

/* Pill buttons (matching the Blog filter style) instead of a joined segmented
   control — the segmented box left an orphan white area on mobile. */

.datajoint-apps-catalog__type-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.datajoint-apps-catalog__type-group button {
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-radius: 9999px;
  padding: 8px 18px;
  background: #fff;
  color: #4a5568;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.datajoint-apps-catalog__type-group button:hover {
  border-color: var(--wp--preset--color--brand-blue, #00a0df);
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__type-group button.is-active {
  background: var(--wp--preset--color--brand-blue, #00a0df);
  border-color: var(--wp--preset--color--brand-blue, #00a0df);
  color: #fff;
}

.datajoint-apps-catalog__category-wrap {
  position: relative;
}

.datajoint-apps-catalog__category-toggle {
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-radius: 8px;
  padding: 8px 20px;
  background: #fff;
  color: #011627;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.datajoint-apps-catalog__category-count {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__category-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: min(280px, 78vw);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(1, 22, 39, 0.1);
}

.datajoint-apps-catalog__category-menu[hidden] {
  display: none;
}

/* Checkbox category options (client: "should be check boxes"). */

.datajoint-apps-catalog__category-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  color: #011627;
}

.datajoint-apps-catalog__category-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--wp--preset--color--brand-blue, #00a0df);
  cursor: pointer;
  flex: 0 0 auto;
}

.datajoint-apps-catalog__category-menu button {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  color: #011627;
  cursor: pointer;
}

.datajoint-apps-catalog__category-menu button.is-active {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__clear-cats {
  margin-top: 8px;
  font-size: 12px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__search input {
  width: 100%;
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 13px;
  color: #011627;
}

.datajoint-apps-catalog__active {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.datajoint-apps-catalog__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 4px 12px;
  background: rgba(0, 160, 223, 0.08);
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 12px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__chip button,
.datajoint-apps-catalog__clear-all {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__result-count {
  margin: 48px 0 0;
  text-align: right;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 14px;
  color: #4a5568;
}

.datajoint-apps-catalog__grid {
  margin-top: 16px;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.datajoint-apps-catalog__item[hidden] {
  display: none;
}

.datajoint-apps-catalog__empty {
  margin-top: 64px;
  padding: 48px 0;
  text-align: center;
}

.datajoint-apps-catalog__empty h3 {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 24px;
  line-height: 1.2;
}

.datajoint-apps-catalog__empty p {
  margin: 12px auto 0;
  max-width: 480px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: #4a5568;
}

.datajoint-apps-catalog__empty button {
  margin-top: 24px;
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  color: #fff;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.datajoint-apps-catalog__load-more-wrap {
  margin-top: 48px;
  text-align: center;
}

.datajoint-apps-catalog__load-more {
  border: 1.5px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-radius: 8px;
  padding: 12px 24px;
  background: #fff;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease;
}

.datajoint-apps-catalog__load-more:hover {
  border-color: var(--wp--preset--color--brand-blue, #00a0df);
  transform: scale(1.02);
}

.datajoint-apps-catalog__no-posts {
  margin-top: 32px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-size: 16px;
  color: #4a5568;
}

.datajoint-apps-community {
  background: var(--wp--preset--color--bg-deep, #011627);
  color: #fff;
  padding-block: 80px;
}

.datajoint-apps-community__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-apps-community__eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-community__heading {
  margin: 16px auto 0;
  max-width: 760px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
}

.datajoint-apps-community__body {
  margin: 20px auto 0;
  max-width: 720px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.datajoint-apps-community__body.is-secondary {
  margin-top: 20px;
  font-size: 16px;
  /* Was #4a5568 then 0.6 white — client still read it as greyed out (5:25).
	   Brighten to 0.85 for clear legibility on the dark background. */
  color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 1024px) {
  /* Desktop: this short sentence should sit on a single line, not wrap (client
	   5:25/2:06 — wanted one line, not the balanced two lines). Lift the 720px
	   body cap and let it size to its content. */

  .datajoint-apps-community__body.is-secondary {
    max-width: none;
    white-space: nowrap;
  }
}

.datajoint-apps-community__cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 24px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  color: #fff;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 15px;
  font-weight: 700;
  transition: transform 150ms ease;
}

.datajoint-apps-community__cta:hover {
  transform: scale(1.02);
}

@media (min-width: 1024px) {
  .datajoint-apps-community__heading {
    font-size: 40px;
  }
}

.datajoint-apps-final-cta {
  background: var(--wp--preset--color--bg-dark, #0a1628);
  color: #fff;
  padding-block: 84px;
}

.datajoint-apps-final-cta__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-apps-final-cta__eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-final-cta__heading {
  margin: 16px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  color: #fff;
}

.datajoint-apps-final-cta__heading span {
  display: block;
}

.datajoint-apps-final-cta__heading-accent {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-final-cta__links {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.datajoint-apps-final-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 24px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  color: #fff;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 15px;
  transition: transform 150ms ease;
}

.datajoint-apps-final-cta__btn:hover {
  transform: scale(1.02);
}

.datajoint-apps-final-cta__link {
  padding-bottom: 2px;
  color: #fff;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 15px;
}

.datajoint-apps-final-cta__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 768px) {
  .datajoint-apps-final-cta__heading {
    font-size: 52px;
  }
}

.datajoint-platform-hero {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--bg-dark, #0a1628);
  color: #fff;
  padding-block: 140px 120px;
}

.datajoint-platform-hero__grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

.datajoint-platform-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}

@media (min-width: 1024px) {
  .datajoint-platform-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: 56px;
  }
}

/* Foundation circle diagram */

.datajoint-platform-hero__diagram {
  width: 100%;
  /* Smaller than before so it doesn't dominate the hero / squeeze the left
	   content column (client: "animation is way too big"). Matches the more
	   compact Lovable proportion. */
  max-width: 500px;
  margin: 0 auto;
}

.datajoint-platform-hero__diagram svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.datajoint-platform-hero__diagram .fc-halo-1 {
  transform-origin: 320px 320px;
  animation: dj-fc-halo-a 4s ease-in-out infinite;
}

.datajoint-platform-hero__diagram .fc-halo-2 {
  transform-origin: 320px 320px;
  animation: dj-fc-halo-b 4s ease-in-out infinite;
}

@keyframes dj-fc-halo-a {
  0%, 100% {
    transform: scale(1);
    opacity: 0.25;
  }

  50% {
    transform: scale(1.04);
    opacity: 0.15;
  }
}

@keyframes dj-fc-halo-b {
  0%, 100% {
    transform: scale(1);
    opacity: 0.10;
  }

  50% {
    transform: scale(1.04);
    opacity: 0.05;
  }
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-platform-hero__diagram .fc-halo-1,
	.datajoint-platform-hero__diagram .fc-halo-2 {
    animation: none;
  }
}

.datajoint-platform-hero__eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-platform-hero__title {
  margin: 24px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.15;
}

.datajoint-platform-hero__title span {
  display: block;
}

.datajoint-platform-hero__title-accent {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-platform-hero__lede {
  margin: 32px 0 0;
  max-width: 560px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.datajoint-platform-hero__stats {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
}

.datajoint-platform-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.datajoint-platform-hero__stat strong {
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  /* Keep each metric value (e.g. "<60 DAYS") on a single line. */
  white-space: nowrap;
}

.datajoint-platform-hero__stat p {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.datajoint-platform-hero__stat-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.datajoint-platform-hero__ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.datajoint-platform-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  color: #fff;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 15px;
  font-weight: 700;
  transition: transform 150ms ease;
}

.datajoint-platform-hero__cta-primary:hover {
  transform: scale(1.02);
}

.datajoint-platform-hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 15px;
  font-weight: 700;
}

/*
 * Tablet/mobile: place the diagram BETWEEN the headline and the lede (matching
 * the homepage hero), and make it smaller so it doesn't dominate. `display:
 * contents` lifts the content children so CSS order can interleave the diagram.
 */

@media (max-width: 1023.98px) {
  .datajoint-platform-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .datajoint-platform-hero__content {
    display: contents;
  }

  .datajoint-platform-hero__eyebrow {
    order: 1;
  }

  .datajoint-platform-hero__title {
    order: 2;
    /* Match the homepage hero's tight eyebrow->headline spacing on mobile
		   (client 5:13: headline was sitting too far below the eyebrow). */
    margin-top: 16px;
  }

  .datajoint-platform-hero__diagram {
    order: 3;
    margin: 3rem auto 1rem;
    max-width: 300px;
  }

  .datajoint-platform-hero__lede {
    order: 4;
  }

  .datajoint-platform-hero__stats {
    order: 5;
  }

  .datajoint-platform-hero__ctas {
    order: 6;
  }
}

.datajoint-platform-computational {
  background: #fff;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-platform-computational__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-platform-computational__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-platform-computational__heading {
  margin: 24px 0 0;
  font: 700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-platform-computational__intro {
  margin: 24px 0 0;
  max-width: 1200px;
  font: 300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-platform-computational__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 900px) {
  .datajoint-platform-computational__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }
}

.datajoint-platform-computational__card {
  padding: 24px;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  background: #fff;
}

.datajoint-platform-computational__card.is-compute {
  border-width: 1.5px;
  border-color: #00a0df;
}

.datajoint-platform-computational__label {
  margin: 0 0 16px;
  font: 700 12px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a5568;
}

.datajoint-platform-computational__card.is-compute .datajoint-platform-computational__label {
  color: #00a0df;
}

.datajoint-platform-computational table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--wp--preset--font-family--mono, "Source Code Pro", monospace);
  font-size: 13px;
}

/* On narrow screens the monospace tables can be wider than the card and were
   clipped on the right. Let the card body scroll horizontally instead. */

.datajoint-platform-computational__card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 560px) {
  /* Shrink the comparison tables so the wider "Computational Database" table
	   fits its card without a horizontal slider, and reads at the same size as
	   the "Traditional Database" table (client 5:14). */

  .datajoint-platform-computational__card {
    overflow-x: hidden;
  }

  .datajoint-platform-computational table {
    font-size: 10.5px;
    table-layout: fixed;
    width: 100%;
  }

  .datajoint-platform-computational th,
	.datajoint-platform-computational td {
    padding: 6px 5px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

.datajoint-platform-computational th,
.datajoint-platform-computational td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #ececec;
}

.datajoint-platform-computational th {
  font-weight: 700;
  border-bottom-color: #e2e2e2;
}

.datajoint-platform-computational td.is-formula {
  color: #00a0df;
  background: rgba(0, 160, 223, 0.06);
}

.datajoint-platform-computational__caption {
  margin: 16px 0 0;
  font: italic 300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-platform-computational__why {
  margin-top: 48px;
  padding: 32px;
  border: 1.5px solid #00a0df;
  border-radius: 12px;
  background: #eaf6fc;
  text-align: center;
}

.datajoint-platform-computational__why-eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-platform-computational__why-intro {
  margin: 16px auto 0;
  max-width: 920px;
  font: 300 17px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-platform-computational__why ul {
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  max-width: 980px;
}

@media (min-width: 900px) {
  .datajoint-platform-computational__why ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
}

.datajoint-platform-computational__why li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font: 700 16px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

/* Keep each caption to two balanced lines so the final phrase ("Same result.",
   "one command.", "and environment.") never wraps to a lonely orphan on wider
   desktops (client 5:11). text-wrap:balance evens the two lines; the cap stops
   the text from going full-width on large screens. */

.datajoint-platform-computational__why li > span:last-child {
  max-width: 22ch;
  text-wrap: balance;
}

.datajoint-platform-computational__why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.datajoint-platform-computational__why-close {
  margin: 40px auto 0;
  max-width: 920px;
  font: 300 22px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-platform-computational__why-close strong {
  color: #00a0df;
  font-weight: 500;
}

.datajoint-platform-architecture {
  background: #f4f7fa;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-platform-architecture__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-platform-architecture__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-platform-architecture__heading {
  margin: 24px 0 0;
  font: 700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-platform-architecture__intro {
  margin: 24px 0 0;
  max-width: 1100px;
  font: 300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-platform-architecture__intro strong {
  color: #00a0df;
  font-weight: 700;
}

.datajoint-platform-architecture__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .datajoint-platform-architecture__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.datajoint-platform-architecture__card {
  position: relative;
  padding: 32px;
  border: 1.5px solid #e2e2e2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
}

.datajoint-platform-architecture__card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #00a0df;
}

.datajoint-platform-architecture__icon {
  position: absolute;
  top: 32px;
  right: 32px;
  display: inline-flex;
}

.datajoint-platform-architecture__index {
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.08em;
  color: #00a0df;
}

.datajoint-platform-architecture__card h3 {
  margin: 16px 0 0;
  font: 700 20px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-platform-architecture__card p {
  margin: 12px 0 0;
  font: 300 14px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-platform-architecture__policy {
  margin-top: 64px;
  padding-left: 32px;
  border-left: 3px solid #ff5113;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .datajoint-platform-architecture__policy {
    grid-template-columns: 3fr 2fr;
    gap: 48px;
  }
}

.datajoint-platform-architecture__policy-eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff5113;
}

.datajoint-platform-architecture__policy-copy {
  margin: 14px 0 0;
  font: 300 19px/1.55 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-platform-architecture__policy-note {
  margin: 0 0 10px;
  font: italic 300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-platform-architecture__policy a {
  font: 700 13px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #ff5113;
}

.datajoint-platform-steps {
  background: #fff;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-platform-steps__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-platform-steps__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-platform-steps__heading {
  margin: 24px 0 0;
  font: 700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-platform-steps__intro {
  margin: 24px 0 0;
  max-width: 980px;
  font: 300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-platform-steps__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .datajoint-platform-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .datajoint-platform-steps__grid {
    grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
    align-items: stretch;
  }
}

.datajoint-platform-steps__card {
  display: flex;
  flex-direction: column;
  border: 1.5px solid #e2e2e2;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.datajoint-platform-steps__card.is-orange {
  border-color: #ff5113;
}

.datajoint-platform-steps__card::before {
  content: "";
  display: block;
  height: 3px;
  background: #00a0df;
}

.datajoint-platform-steps__card.is-orange::before {
  background: #ff5113;
}

.datajoint-platform-steps__index,
.datajoint-platform-steps__icon,
.datajoint-platform-steps__card h3,
.datajoint-platform-steps__tagline,
.datajoint-platform-steps__rule,
.datajoint-platform-steps__desc {
  margin-inline: 32px;
}

.datajoint-platform-steps__index {
  margin-top: 28px;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.08em;
  color: #00a0df;
}

.datajoint-platform-steps__icon {
  margin-top: 12px;
  display: inline-flex;
  color: #00a0df;
}

.datajoint-platform-steps__card.is-orange .datajoint-platform-steps__index,
.datajoint-platform-steps__card.is-orange .datajoint-platform-steps__icon,
.datajoint-platform-steps__card.is-orange .datajoint-platform-steps__tagline {
  color: #ff5113;
}

.datajoint-platform-steps__card h3 {
  margin-top: 16px;
  font: 700 24px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-platform-steps__tagline {
  margin-top: 8px;
  font: 700 11px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-platform-steps__rule {
  margin-top: 16px;
  width: 40px;
  height: 1px;
  background: #e2e2e2;
}

.datajoint-platform-steps__desc {
  margin-top: 16px;
  margin-bottom: 24px;
  font: 300 14px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
  flex: 1;
}

.datajoint-platform-steps__pillar {
  margin: 0;
  padding: 12px 16px;
  font: 700 11px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: #00a0df;
}

.datajoint-platform-steps__card.is-orange .datajoint-platform-steps__pillar {
  background: #ff5113;
}

.datajoint-platform-steps__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  font: 700 24px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #ff5113;
  animation: datajoint-platform-steps-pulse 2s ease-in-out infinite;
}

@media (min-width: 1024px) {
  .datajoint-platform-steps__arrow {
    display: flex;
  }
}

@keyframes datajoint-platform-steps-pulse {
  0%,
	100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.datajoint-platform-steps__close {
  margin: 48px auto 0;
  max-width: 880px;
  text-align: center;
  font: italic 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #00a0df;
}

.datajoint-platform-steps__cta-wrap {
  margin: 40px 0 0;
  text-align: center;
}

.datajoint-platform-steps__cta {
  font: 700 16px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-platform-fnl-quote {
  background: #0a1628;
  color: #fff;
  padding-block: 100px;
}

.datajoint-platform-fnl-quote__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .datajoint-platform-fnl-quote__inner {
    grid-template-columns: 70% 30%;
    gap: 48px;
  }
}

.datajoint-platform-fnl-quote__eyebrow {
  margin: 0 0 40px;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-platform-fnl-quote__quote {
  margin: 0;
  max-width: 720px;
  font: 300 32px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #fff;
}

.datajoint-platform-fnl-quote__source {
  margin: 24px 0 0;
  font: 700 16px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-platform-fnl-quote__meta {
  margin: 8px 0 0;
  font: italic 300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.7);
}

.datajoint-platform-fnl-quote__logo-wrap {
  display: flex;
  justify-content: center;
}

@media (min-width: 900px) {
  .datajoint-platform-fnl-quote__logo-wrap {
    justify-content: flex-end;
  }
}

.datajoint-platform-fnl-quote__logo-wrap img {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.datajoint-platform-enterprise {
  background: #fff;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-platform-enterprise__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-platform-enterprise__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-platform-enterprise__heading {
  margin: 24px 0 0;
  font: 700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-platform-enterprise__intro {
  margin: 24px 0 0;
  max-width: 920px;
  font: 300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-platform-enterprise__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .datajoint-platform-enterprise__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.datajoint-platform-enterprise__card {
  position: relative;
  padding: 32px;
  border: 1.5px solid #e2e2e2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
}

.datajoint-platform-enterprise__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #00a0df;
}

.datajoint-platform-enterprise__icon {
  display: inline-flex;
  margin-bottom: 24px;
}

.datajoint-platform-enterprise__card h3 {
  margin: 0;
  font: 700 18px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.datajoint-platform-enterprise__card ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.datajoint-platform-enterprise__card li {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
  font: 300 14px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-platform-enterprise__card li span:first-child {
  color: #00a0df;
  font-weight: 700;
}

.datajoint-platform-enterprise__cta-wrap {
  margin: 56px 0 0;
  text-align: center;
}

.datajoint-platform-enterprise__cta {
  font: 700 16px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-platform-environment {
  background: #f4f7fa;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-platform-environment__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-platform-environment__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-platform-environment__heading {
  margin: 24px 0 0;
  font: 700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-platform-environment__intro {
  margin: 24px 0 0;
  max-width: 920px;
  font: 300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-platform-environment__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .datajoint-platform-environment__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .datajoint-platform-environment__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.datajoint-platform-environment__card {
  position: relative;
  padding: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #0a1628;
  transition: transform 200ms ease;
}

.datajoint-platform-environment__card:hover {
  transform: translateY(-4px);
}

.datajoint-platform-environment__icon {
  display: block;
  line-height: 0;
}

.datajoint-platform-environment__card h3 {
  margin: 16px 0 0;
  font: 700 18px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #fff;
}

.datajoint-platform-environment__card p {
  margin: 12px 0 0;
  font: 300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.75);
}

.datajoint-platform-environment__new {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  font: 700 9px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #00a0df;
  color: #fff;
}

.datajoint-platform-environment__cta-wrap {
  margin: 56px 0 0;
  text-align: center;
}

.datajoint-platform-environment__cta {
  font: 700 16px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-solutions-hero {
  position: relative;
  overflow: hidden;
  background: #0a1628;
  color: #fff;
  padding-block: 140px 120px;
}

.datajoint-solutions-hero__grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.datajoint-solutions-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  align-items: center;
}

@media (min-width: 1280px) {
  .datajoint-solutions-hero__inner {
    grid-template-columns: minmax(0,640px) minmax(360px,1fr);
    gap: 56px;
  }
}

/* Tablet/mobile: place the sector visual between the headline and the lede
   (consistent with the homepage hero), instead of below the CTAs. */

@media (max-width: 1279.98px) {
  .datajoint-solutions-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .datajoint-solutions-hero__content {
    display: contents;
  }

  .datajoint-solutions-hero__eyebrow {
    order: 1;
  }

  .datajoint-solutions-hero__heading {
    order: 2;
  }

  .datajoint-solutions-hero__visual {
    order: 3;
    margin: 2.5rem 0;
  }

  .datajoint-solutions-hero__lede {
    order: 4;
  }

  .datajoint-solutions-hero__ctas {
    order: 5;
  }
}

.datajoint-solutions-hero__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  color:#00a0df;
}

.datajoint-solutions-hero__heading {
  margin: 24px 0 0;
  font:700 clamp(36px,5.2vw,56px)/1.15 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-hero__heading span {
  display:block;
}

.datajoint-solutions-hero__heading-accent {
  color:#00a0df;
}

.datajoint-solutions-hero__lede {
  margin: 28px 0 0;
  max-width:580px;
  font:300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color:rgba(255,255,255,.8);
}

.datajoint-solutions-hero__ctas {
  margin-top:40px;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
}

.datajoint-solutions-hero__cta-primary {
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:12px 24px;
  border-radius:999px;
  background:#00a0df;
  color:#fff;
  font:700 15px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  transition:transform 150ms ease;
}

.datajoint-solutions-hero__cta-primary:hover {
  transform:scale(1.02);
}

.datajoint-solutions-hero__cta-secondary {
  color:#fff;
  opacity:.9;
  font:700 15px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-hero__cta-secondary:hover {
  opacity:1;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Right column: sector tiles + converging flow */

.datajoint-solutions-hero__visual {
  position:relative;
}

.datajoint-solutions-hero__tiles {
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:12px;
}

@media (min-width: 768px) {
  .datajoint-solutions-hero__tiles {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}

.datajoint-solutions-hero__tile {
  min-height: 200px;
  border:1.5px solid rgba(255,255,255,.2);
  border-radius: 8px;
  padding: 28px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.datajoint-solutions-hero__tile:hover {
  border-color:#00a0df;
  background:rgba(0,160,223,.06);
}

.datajoint-solutions-hero__tile-icon {
  display:inline-flex;
}

.datajoint-solutions-hero__tile-title {
  margin:20px 0 0;
  font:700 14px/1.25 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color:#fff;
}

.datajoint-solutions-hero__tile-tag {
  margin:auto 0 0;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(0,160,223,.35);
  background:rgba(0,160,223,.06);
  color:rgba(0,160,223,.95);
  font:600 8.5px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Converging flow strip (desktop only: once tiles wrap to a grid on mobile the
   converge animation no longer reads, so it is hidden below the 4-up breakpoint). */

.datajoint-solutions-hero__converge {
  margin-top:8px;
}

.datajoint-solutions-hero__converge svg {
  display:block;
  width:100%;
  height:112px;
  overflow:visible;
}

@media (max-width: 767px) {
  .datajoint-solutions-hero__converge {
    display:none;
  }
}

.datajoint-solutions-hero__converge-ring {
  transform-origin:center;
  transform-box:fill-box;
  animation: dj-sol-ring-pulse 2.4s ease-out infinite;
}

@keyframes dj-sol-ring-pulse {
  0%   {
    transform: scale(1);
    opacity: 0.7;
  }

  50%  {
    transform: scale(1.25);
    opacity: 0;
  }

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

@media (prefers-reduced-motion: reduce) {
  .datajoint-solutions-hero__converge-ring {
    animation: none;
  }
}

.datajoint-solutions-sectors {
  color:#011627;
}

.datajoint-solutions-sectors__inner {
  background:#fff;
  max-width:1280px;
  margin:0 auto;
  padding:120px var(--dj-gutter,48px) 100px;
}

.datajoint-solutions-sectors__head {
  text-align:center;
}

.datajoint-solutions-sectors__eyebrow {
  margin:0;
  color:#00a0df;
  font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.datajoint-solutions-sectors__heading {
  margin:24px auto 0;
  max-width:1040px;
  font:700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-sectors__intro {
  margin:24px auto 0;
  max-width:980px;
  color:#4a5568;
  font:300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

/* Chip grid */

.datajoint-solutions-sectors__chips {
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

@media (max-width:1024px) {
  .datajoint-solutions-sectors__chips {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:768px) {
  .datajoint-solutions-sectors__chips {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:8px;
  }
}

.datajoint-solutions-sectors__chip {
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 24px;
  background:#011627;
  border:1.5px solid #011627;
  border-radius:12px;
  text-decoration:none;
  transition:all 200ms ease;
}

@media (max-width:768px) {
  .datajoint-solutions-sectors__chip {
    flex:0 0 78%;
    scroll-snap-align:start;
  }
}

.datajoint-solutions-sectors__chip:hover {
  border-color:#00a0df;
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(1,22,39,.2);
}

.datajoint-solutions-sectors__chip-icon {
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:8px;
  background:rgba(0,160,223,.15);
  display:flex;
  align-items:center;
  justify-content:center;
}

.datajoint-solutions-sectors__chip-name {
  display:block;
  color:#fff;
  font:700 15px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-sectors__chip-desc {
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.7);
  font:300 12px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

/* Sector sections */

.datajoint-solutions-sectors__sector.is-dark {
  background:#0a1628;
  color:#fff;
}

.datajoint-solutions-sectors__sector.is-light {
  background:#fff;
  color:#011627;
}

.datajoint-solutions-sectors__sector.is-light .datajoint-solutions-sectors__sector-lead {
  color:#4a5568;
}

.datajoint-solutions-sectors__sector.is-grey {
  background:#f4f7fa;
}

.datajoint-solutions-sectors__adjacent {
  background:#0a1628;
  color:#fff;
}

.datajoint-solutions-sectors__sector-inner {
  max-width:1280px;
  margin:0 auto;
  padding:120px var(--dj-gutter,48px) 100px;
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
}

@media (min-width:1024px) {
  .datajoint-solutions-sectors__sector-inner:not(.is-stacked) {
    grid-template-columns:1fr 1fr;
  }
}

.datajoint-solutions-sectors__sector-inner.is-stacked {
  display:block;
}

/* Adjacent Industries lede spans the full stacked column instead of the narrow
   480px used in the two-column sectors, so it isn't squished (client). */

.datajoint-solutions-sectors__sector-inner.is-stacked .datajoint-solutions-sectors__sector-lead {
  max-width:880px;
}

.datajoint-solutions-sectors__sector-kicker {
  margin:0;
  color:#00a0df;
  font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.datajoint-solutions-sectors__sector-name {
  margin:14px 0 0;
  font:700 36px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-sectors__sector-lead {
  margin:16px 0 0;
  max-width:480px;
  font:300 18px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color:inherit;
}

.datajoint-solutions-sectors__sector.is-grey .datajoint-solutions-sectors__sector-lead {
  color:#4a5568;
}

.datajoint-solutions-sectors__sector-cta {
  display:inline-block;
  margin-top:24px;
  color:#00a0df;
  font:700 16px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

/* Capabilities column */

.datajoint-solutions-sectors__caps-label {
  margin:0 0 16px;
  font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4a5568;
}

.datajoint-solutions-sectors__sector.is-dark .datajoint-solutions-sectors__caps-label {
  color:rgba(255,255,255,.8);
}

.datajoint-solutions-sectors__caps-list {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.datajoint-solutions-sectors__cap {
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:20px;
  border-radius:8px;
  border:1px solid rgba(1,22,39,.12);
  background:#fff;
  transition:border-color 200ms ease, transform 200ms ease;
}

.datajoint-solutions-sectors__sector.is-dark .datajoint-solutions-sectors__cap {
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.15);
}

.datajoint-solutions-sectors__cap:hover {
  border-color:#00a0df;
  transform:translateY(-2px);
}

.datajoint-solutions-sectors__cap-icon {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.datajoint-solutions-sectors__cap-name {
  margin:0;
  font:700 16px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-sectors__cap-desc {
  margin:6px 0 0;
  font:300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color:#4a5568;
}

.datajoint-solutions-sectors__sector.is-dark .datajoint-solutions-sectors__cap-desc {
  color:rgba(255,255,255,.75);
}

.datajoint-solutions-sectors__proof {
  margin-top:24px;
  padding:16px 20px;
  border-radius:8px;
  border:1px solid rgba(0,160,223,.35);
  background:rgba(0,160,223,.06);
}

.datajoint-solutions-sectors__sector.is-dark .datajoint-solutions-sectors__proof {
  border-color:rgba(0,160,223,.3);
  background:rgba(0,160,223,.08);
}

.datajoint-solutions-sectors__proof-label {
  margin:0;
  color:#00a0df;
  font:700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.datajoint-solutions-sectors__proof-text {
  margin:8px 0 0;
  font:300 14px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color:#011627;
}

.datajoint-solutions-sectors__sector.is-dark .datajoint-solutions-sectors__proof-text {
  color:rgba(255,255,255,.9);
}

/* Adjacent industries */

.datajoint-solutions-sectors__adjacent-grid {
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}

@media (max-width:1024px) {
  .datajoint-solutions-sectors__adjacent-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:768px) {
  .datajoint-solutions-sectors__adjacent-grid {
    grid-template-columns:1fr;
  }
}

.datajoint-solutions-sectors__adjacent-card {
  padding:32px;
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  transition:border-color 200ms ease, transform 200ms ease, background-color 200ms ease;
}

.datajoint-solutions-sectors__adjacent-card:hover {
  border-color:#00a0df;
  transform:translateY(-4px);
  background:rgba(0,160,223,.06);
}

.datajoint-solutions-sectors__adjacent-icon {
  display:inline-flex;
}

.datajoint-solutions-sectors__adjacent-card h3 {
  margin:24px 0 0;
  font:700 20px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color:#fff;
}

.datajoint-solutions-sectors__adjacent-card p {
  margin:12px 0 0;
  font:300 14px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color:rgba(255,255,255,.75);
}

.datajoint-solutions-sectors__adjacent-note {
  margin:48px 0 0;
  color:#00a0df;
  font:italic 300 18px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-solutions-sectors__adjacent-cta {
  display:inline-block;
  margin-top:24px;
  color:#00a0df;
  font:700 16px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-pharma {
  color:#011627;
}

.datajoint-solutions-pharma__inner {
  max-width:1280px;
  margin:0 auto;
  padding:0 var(--dj-gutter,48px);
}

/* Foundation applied (chip grid) */

.datajoint-solutions-pharma__applied {
  background:#fff;
  padding:120px 0 100px;
  text-align:center;
}

.datajoint-solutions-pharma__applied-eyebrow {
  margin:0;
  color:#00a0df;
  font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.datajoint-solutions-pharma__applied-heading {
  margin:24px auto 0;
  max-width:1040px;
  font:700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-pharma__applied-intro {
  margin:24px auto 0;
  max-width:980px;
  color:#4a5568;
  font:300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-solutions-pharma__chips {
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  text-align:left;
}

@media (max-width:1024px) {
  .datajoint-solutions-pharma__chips {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px) {
  .datajoint-solutions-pharma__chips {
    grid-template-columns:1fr;
  }
}

.datajoint-solutions-pharma__chip {
  display:flex;
  align-items:center;
  gap:12px;
  padding:20px 24px;
  background:#011627;
  border:1.5px solid #011627;
  border-radius:12px;
  text-decoration:none;
  transition:all 200ms ease;
}

.datajoint-solutions-pharma__chip:hover {
  border-color:#00a0df;
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(1,22,39,.2);
}

.datajoint-solutions-pharma__chip-icon {
  flex:0 0 auto;
  width:36px;
  height:36px;
  border-radius:8px;
  background:rgba(0,160,223,.15);
  display:flex;
  align-items:center;
  justify-content:center;
}

.datajoint-solutions-pharma__chip-name {
  display:block;
  color:#fff;
  font:700 15px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-pharma__chip-desc {
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.7);
  font:300 12px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-solutions-pharma__header {
  background:#f4f7fa;
  padding:120px 0 32px;
}

.datajoint-solutions-pharma__kicker {
  margin:0;
  color:#00a0df;
  font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.datajoint-solutions-pharma__name {
  margin:14px 0 0;
  font:700 48px/1.15 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

@media (max-width:768px) {
  .datajoint-solutions-pharma__name {
    font-size:32px;
  }
}

.datajoint-solutions-pharma__intro {
  margin:16px 0 0;
  max-width:920px;
  color:#4a5568;
  font:300 20px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-solutions-pharma__body {
  background:#f4f7fa;
  padding:24px 0 100px;
}

/* Tabs (desktop only). On mobile a custom dropdown replaces the tab row.
   Styled as connected folder-tabs that join the panel below — matching the
   homepage "Proven at Scale" (customer story) tab pattern so the tabs read as
   part of the same surface as the content they filter (client feedback). */

.datajoint-solutions-pharma__tabs {
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

@media (min-width:1000px) {
  /* Lovable parity: one connected segmented bar across the top of the content
	   panel (no gaps), so it reads as a single line of tabs (client 5:18). */

  .datajoint-solutions-pharma__tabs {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    align-items:stretch;
    margin-bottom:-1px;
    /* overlap the panel's top border so the active tab merges in */
    position:relative;
    z-index:1;
  }
}

@media (max-width:999px) and (min-width:768px) {
  .datajoint-solutions-pharma__tabs {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
  }
}

@media (max-width:767px) {
  .datajoint-solutions-pharma__tabs {
    display:none;
  }
}

.datajoint-solutions-pharma__tab {
  position:relative;
  text-align:left;
  border:1.5px solid #00a0df;
  background:#fff;
  border-radius:10px;
  padding:16px;
  cursor:pointer;
  transition:background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

@media (min-width:768px) {
  /* Segmented bar: a single blue-outlined row with a continuous blue line along
	   the BOTTOM that delineates the tabs from the changing body copy below
	   (client: "blue horizontal line across the bottom of the tabs"). Neighbours
	   share vertical borders; only the outer top corners are rounded so the row
	   and the panel beneath read as one connected rectangle (no open curve). */

  .datajoint-solutions-pharma__tabs {
    border-bottom:1.5px solid #00a0df;
  }

  .datajoint-solutions-pharma__tab {
    border-radius:0;
    border-right-width:0;
    border-bottom-color:transparent;
    /* the wrapper draws the shared bottom line */
  }

  .datajoint-solutions-pharma__tab:last-child {
    border-right-width:1.5px;
  }
}

@media (min-width:1000px) {
  .datajoint-solutions-pharma__tab:first-child {
    border-top-left-radius:10px;
  }

  .datajoint-solutions-pharma__tab:last-child {
    border-top-right-radius:10px;
  }
}

.datajoint-solutions-pharma__tab:hover {
  background:rgba(0,160,223,.06);
}

/* Active stage: solid blue fill with white text (Lovable parity), instead of the
   previous faint shade, so the selected stage is unmistakable. */

.datajoint-solutions-pharma__tab.is-active {
  background:#00a0df;
}

.datajoint-solutions-pharma__tab.is-active .datajoint-solutions-pharma__tab-stage {
  color:#fff;
}

.datajoint-solutions-pharma__tab.is-active .datajoint-solutions-pharma__tab-title {
  color:#fff;
}

.datajoint-solutions-pharma__tab.is-active .datajoint-solutions-pharma__tab-short {
  color:rgba(255,255,255,.85);
}

.datajoint-solutions-pharma__tab-stage {
  display:block;
  color:#00a0df;
  font:700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.datajoint-solutions-pharma__tab-title {
  display:block;
  margin-top:8px;
  color:#011627;
  font:700 15px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-pharma__tab-short {
  display:block;
  margin-top:6px;
  color:#4a5568;
  font:300 12px/1.3 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

/* Mobile stage dropdown (deliberate deviation from Lovable's mobile tab row). */

.datajoint-solutions-pharma__select {
  display:none;
  position:relative;
  margin-bottom:16px;
}

@media (max-width:767px) {
  .datajoint-solutions-pharma__select {
    display:block;
  }
}

.datajoint-solutions-pharma__select-toggle {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border:1.5px solid #00a0df;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  text-align:left;
}

.datajoint-solutions-pharma__select-current {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.datajoint-solutions-pharma__select-stage {
  color:#00a0df;
  font:700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.datajoint-solutions-pharma__select-name {
  color:#011627;
  font:700 15px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-pharma__select-chevron {
  color:#00a0df;
}

.datajoint-solutions-pharma__select-menu {
  list-style:none;
  margin:8px 0 0;
  padding:8px;
  position:absolute;
  left:0;
  right:0;
  z-index:20;
  background:#fff;
  border:1.5px solid #e2e2e2;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(1,22,39,.12);
}

.datajoint-solutions-pharma__select-menu[hidden] {
  display:none;
}

.datajoint-solutions-pharma__select-menu button {
  width:100%;
  text-align:left;
  border:0;
  background:none;
  padding:12px;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.datajoint-solutions-pharma__select-menu button:hover {
  background:rgba(0,160,223,.06);
}

.datajoint-solutions-pharma__select-menu button span:first-child {
  color:#00a0df;
  font:700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.datajoint-solutions-pharma__select-menu button span:last-child {
  color:#011627;
  font:700 15px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-pharma__select-menu [aria-selected="true"] button {
  background:rgba(0,160,223,.08);
}

/* Stage pager (mobile only) */

.datajoint-solutions-pharma__pager {
  display:none;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #e2e2e2;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

@media (max-width:767px) {
  .datajoint-solutions-pharma__pager {
    display:flex;
  }
}

.datajoint-solutions-pharma__pager-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1.5px solid #e2e2e2;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  color:#00a0df;
  font:700 18px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-pharma__pager-btn:hover {
  border-color:#00a0df;
}

.datajoint-solutions-pharma__pager-count {
  color:#4a5568;
  font:700 12px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Panels — joined directly beneath the tab row (no gap) so the active tab and
   the panel read as one connected surface (client feedback). */

.datajoint-solutions-pharma__panels {
  margin-top:0;
}

/* Square top corners so the panel sits flush under the tab row's bottom line as
   one rectangle (no open curve in the top-right). Only the bottom is rounded. */

.datajoint-solutions-pharma__panel {
  border:1.5px solid #00a0df;
  border-top:none;
  background:#fff;
  border-radius:0 0 16px 16px;
  padding:32px;
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
}

@media (max-width:767px) {
  /* No connected tabs on mobile (dropdown instead) — restore full rounding + top border. */

  .datajoint-solutions-pharma__panel {
    border-top:1.5px solid #00a0df;
    border-radius:16px;
  }
}

@media (min-width:1024px) {
  .datajoint-solutions-pharma__panel {
    grid-template-columns:1fr 1fr;
    padding:48px;
    gap:64px;
  }
}

.datajoint-solutions-pharma__panel[hidden] {
  display:none;
}

.datajoint-solutions-pharma__panel-index {
  margin:0;
  color:#00a0df;
  font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.08em;
}

.datajoint-solutions-pharma__panel-title {
  margin:12px 0 0;
  font:700 32px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

@media (max-width:768px) {
  .datajoint-solutions-pharma__panel-title {
    font-size:24px;
  }
}

.datajoint-solutions-pharma__panel-lead {
  margin:16px 0 0;
  color:#4a5568;
  font:300 18px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-solutions-pharma__caps-label {
  margin:0 0 16px;
  color:#4a5568;
  font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.datajoint-solutions-pharma__caps-list {
  display:flex;
  flex-direction:column;
  gap:12px;
}

.datajoint-solutions-pharma__cap {
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:20px;
  border:1px solid rgba(1,22,39,.12);
  border-radius:8px;
  background:#fff;
  transition:border-color 200ms ease, transform 200ms ease;
}

.datajoint-solutions-pharma__cap:hover {
  border-color:#00a0df;
  transform:translateY(-2px);
}

.datajoint-solutions-pharma__cap-icon {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.datajoint-solutions-pharma__cap-name {
  margin:0;
  font:700 16px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-pharma__cap-desc {
  margin:6px 0 0;
  color:#4a5568;
  font:300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-solutions-pharma__proof {
  margin-top:24px;
  padding:16px 20px;
  border:1px solid rgba(0,160,223,.35);
  border-radius:8px;
  background:rgba(0,160,223,.06);
}

.datajoint-solutions-pharma__proof-label {
  margin:0;
  color:#00a0df;
  font:700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.datajoint-solutions-pharma__proof-text {
  margin:8px 0 0;
  color:#011627;
  font:300 14px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

/* Gold standard callout */

.datajoint-solutions-pharma__gold {
  margin-top:48px;
  padding-left:32px;
  border-left:3px solid #ff5113;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

@media (min-width:768px) {
  .datajoint-solutions-pharma__gold {
    grid-template-columns:3fr 2fr;
    gap:48px;
    padding-left:32px;
  }
}

@media (max-width:768px) {
  .datajoint-solutions-pharma__gold {
    padding-left:20px;
  }
}

.datajoint-solutions-pharma__gold-label {
  margin:0 0 14px;
  color:#ff5113;
  font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.datajoint-solutions-pharma__gold-copy {
  margin:0;
  color:#011627;
  font:300 19px/1.55 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-solutions-pharma__gold-note {
  margin:0 0 10px;
  color:#4a5568;
  font:italic 300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-solutions-pharma__gold-link {
  color:#ff5113;
  font:700 13px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-testimonials {
  background:#0a1628;
  color:#fff;
  padding:96px 0;
}

.datajoint-solutions-testimonials__inner {
  max-width:900px;
  margin:0 auto;
  padding:0 var(--dj-gutter,48px);
}

/* Header */

.datajoint-solutions-testimonials__head {
  text-align:center;
  margin-bottom:56px;
}

.datajoint-solutions-testimonials__eyebrow {
  margin:0 0 12px;
  color:#00a0df;
  font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.datajoint-solutions-testimonials__heading {
  margin:0 auto 8px;
  color:#fff;
  font:700 36px/1.15 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

@media (max-width:1024px) {
  .datajoint-solutions-testimonials__heading {
    font-size:32px;
  }
}

@media (max-width:768px) {
  .datajoint-solutions-testimonials__heading {
    font-size:22px;
  }
}

.datajoint-solutions-testimonials__intro {
  margin:0;
  color:rgba(255,255,255,.7);
  font:italic 300 15px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

/* Slider */

.datajoint-solutions-testimonials__slider {
  position:relative;
}

.datajoint-solutions-testimonials__viewport {
  position:relative;
}

.datajoint-solutions-testimonials__arrow {
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.datajoint-solutions-testimonials__arrow:hover {
  background:rgba(255,255,255,.16);
}

.datajoint-solutions-testimonials__arrow.is-prev {
  left:-56px;
}

.datajoint-solutions-testimonials__arrow.is-next {
  right:-56px;
}

@media (min-width:768px) {
  .datajoint-solutions-testimonials__arrow {
    display:flex;
  }
}

.datajoint-solutions-testimonials__slide {
  margin:0;
  text-align:center;
  animation:dj-tc-fade 400ms ease-out;
}

.datajoint-solutions-testimonials__slide[hidden] {
  display:none;
}

@keyframes dj-tc-fade {
  from {
    opacity:0;
    transform:translateY(6px);
  }

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

.datajoint-solutions-testimonials__mark {
  display:block;
  color:#ff5113;
  font:700 72px/0.6 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  margin-bottom:20px;
}

.datajoint-solutions-testimonials__quote {
  margin:0 auto 32px;
  max-width:780px;
  color:#fff;
  font:italic 300 22px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

@media (max-width:768px) {
  .datajoint-solutions-testimonials__quote {
    font-size:18px;
  }
}

.datajoint-solutions-testimonials__person {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.datajoint-solutions-testimonials__person img {
  width:56px;
  height:56px;
  border-radius:50%;
  -o-object-fit:cover;
     object-fit:cover;
  border:2px solid #00a0df;
  flex-shrink:0;
  display:block;
}

.datajoint-solutions-testimonials__person-meta {
  display:flex;
  flex-direction:column;
  text-align:left;
}

.datajoint-solutions-testimonials__name {
  color:#fff;
  font:700 14px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-testimonials__role {
  color:rgba(255,255,255,.6);
  font:300 12px/1.3 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

/* Dots */

.datajoint-solutions-testimonials__dots {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:24px;
}

.datajoint-solutions-testimonials__dot {
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  cursor:pointer;
  transition:background 200ms ease;
}

.datajoint-solutions-testimonials__dot.is-active {
  background:#00a0df;
}

.datajoint-solutions-audience {
  background:#f4f7fa;
  color:#011627;
  padding-block:120px 100px;
}

.datajoint-solutions-audience__inner {
  max-width:1280px;
  margin:0 auto;
  padding:0 var(--dj-gutter,48px);
}

.datajoint-solutions-audience__eyebrow {
  margin:0 0 24px;
  color:#00a0df;
  font:700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.datajoint-solutions-audience__heading {
  margin:0 0 24px;
  font:700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-audience__intro {
  margin:0;
  max-width:1200px;
  color:#4a5568;
  font:300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-solutions-audience__grid {
  margin-top:64px;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

@media (min-width:768px) {
  .datajoint-solutions-audience__grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:1024px) {
  .datajoint-solutions-audience__grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.datajoint-solutions-audience__card {
  background:#fff;
  border:1.5px solid #e2e2e2;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(1,22,39,.06);
}

.datajoint-solutions-audience__accent {
  display:block;
  height:3px;
  background:#00a0df;
}

.datajoint-solutions-audience__card.is-orange .datajoint-solutions-audience__accent {
  background:#ff5113;
}

.datajoint-solutions-audience__card-body {
  padding:32px;
}

.datajoint-solutions-audience__persona {
  margin:0;
  color:#00a0df;
  font:700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.datajoint-solutions-audience__card.is-orange .datajoint-solutions-audience__persona {
  color:#ff5113;
}

.datajoint-solutions-audience__card-headline {
  margin:12px 0 0;
  color:#011627;
  font:700 20px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-solutions-audience__card-text {
  margin:12px 0 0;
  color:#4a5568;
  font:300 14px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
}

.datajoint-ecosystem-hero {
  position: relative;
  background: #011627;
  color: #fff;
  padding-block: 140px 120px;
  overflow: hidden;
}

.datajoint-ecosystem-hero__grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.datajoint-ecosystem-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 64px;
}

@media (min-width: 1024px) {
  .datajoint-ecosystem-hero__inner {
    grid-template-columns: 1.25fr 0.75fr;
  }
}

/* Tablet/mobile: place the diagram between the headline and the lede (matching
   the homepage hero) instead of below the CTAs. */

@media (max-width: 1023.98px) {
  .datajoint-ecosystem-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .datajoint-ecosystem-hero__content {
    display: contents;
  }

  .datajoint-ecosystem-hero__eyebrow {
    order: 1;
  }

  .datajoint-ecosystem-hero__title {
    order: 2;
  }

  .datajoint-ecosystem-hero__lede {
    order: 4;
  }

  .datajoint-ecosystem-hero__ctas {
    order: 5;
  }

  /* Smaller diagram, pushed well below the headline (client 11:59am: still too
	   big + too tight to the headline). Shrink the badge icons/labels and the
	   connector heights rather than the row width (the 4 icons need the width to
	   stay legible). Selector is extra-specific (.hero .hero__visual) so it wins
	   over the later base __visual rule regardless of source order. */

  .datajoint-ecosystem-hero .datajoint-ecosystem-hero__visual {
    order: 3;
    margin: 4rem auto 1.5rem;
    max-width: 320px;
    gap: 16px;
  }

  .datajoint-ecosystem-hero__badge-icon {
    width: 38px;
    height: 38px;
  }

  .datajoint-ecosystem-hero__badge-icon svg {
    width: 18px;
    height: 18px;
  }

  .datajoint-ecosystem-hero__badge-label {
    font-size: 9px;
  }

  .datajoint-ecosystem-hero__connectors {
    height: 22px;
  }

  .datajoint-ecosystem-hero__pill {
    padding-block: 18px;
  }
}

.datajoint-ecosystem-hero__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-ecosystem-hero__title {
  margin: 24px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.15;
  color: #fff;
}

.datajoint-ecosystem-hero__title span {
  display: block;
}

.datajoint-ecosystem-hero__title-accent {
  color: #00a0df;
}

.datajoint-ecosystem-hero__lede {
  margin: 28px 0 0;
  max-width: 660px;
  font: 300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.8);
}

.datajoint-ecosystem-hero__ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.datajoint-ecosystem-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00a0df;
  color: #fff;
  border-radius: 9999px;
  padding: 14px 24px;
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  transition: transform 150ms ease;
}

.datajoint-ecosystem-hero__cta-primary:hover {
  transform: scale(1.02);
}

.datajoint-ecosystem-hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-ecosystem-hero__cta-secondary:hover {
  text-decoration: underline;
}

/* ---- Flow-diagram teaser ---- */

.datajoint-ecosystem-hero__visual {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* More vertical breathing room between the diagram rows (client: "graphic
	   can be spaced out vertically more"). */
  gap: 28px;
}

.datajoint-ecosystem-hero__badge-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  justify-items: center;
}

.datajoint-ecosystem-hero__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.datajoint-ecosystem-hero__badge-icon {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.datajoint-ecosystem-hero__badge-label {
  font: 700 10px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.datajoint-ecosystem-hero__connectors {
  height: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.datajoint-ecosystem-hero__connectors span {
  position: relative;
  justify-self: center;
  width: 1px;
  height: 100%;
  background: rgba(0, 160, 223, 0.35);
}

.datajoint-ecosystem-hero__connectors span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: #00a0df;
  box-shadow: 0 0 6px rgba(0, 160, 223, 0.9);
  opacity: 0;
  animation: dj-eco-hero-flow 4s linear infinite;
}

.datajoint-ecosystem-hero__connectors span:nth-child(1)::after {
  animation-delay: 0s;
}

.datajoint-ecosystem-hero__connectors span:nth-child(2)::after {
  animation-delay: 1s;
}

.datajoint-ecosystem-hero__connectors span:nth-child(3)::after {
  animation-delay: 2s;
}

.datajoint-ecosystem-hero__connectors span:nth-child(4)::after {
  animation-delay: 3s;
}

@keyframes dj-eco-hero-flow {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(32px);
    opacity: 0;
  }
}

.datajoint-ecosystem-hero__pill {
  background: #00a0df;
  border-radius: 32px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0, 160, 223, 0.35);
}

.datajoint-ecosystem-hero__pill-name {
  font: 700 18px/1.1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #fff;
}

.datajoint-ecosystem-hero__pill-sub {
  margin-top: 2px;
  font: 700 10px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
}

.datajoint-ecosystem-approach {
  background: #fff;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-ecosystem-approach__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-ecosystem-approach__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-ecosystem-approach__heading {
  margin: 24px 0 0;
  max-width: none;
  font: 700 clamp(26px, 3.4vw, 34px)/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  text-wrap: balance;
}

@media (min-width: 1000px) {
  /* Force the full sentence onto a single line on desktop (client request,
	   no orphan wrap). The size is tuned so the ~66-char sentence fits the
	   1280px container without wrapping. */

  .datajoint-ecosystem-approach__heading {
    white-space: nowrap;
    font-size: clamp(28px, 2.5vw, 34px);
  }
}

.datajoint-ecosystem-approach__intro {
  margin: 24px 0 0;
  max-width: 1200px;
  font: 300 22px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-ecosystem-approach__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .datajoint-ecosystem-approach__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.datajoint-ecosystem-approach__icon {
  display: block;
  line-height: 0;
}

.datajoint-ecosystem-approach__pillar h3 {
  margin: 16px 0 0;
  font: 700 16px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #011627;
}

.datajoint-ecosystem-approach__pillar p {
  margin: 12px 0 0;
  font: 300 15px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-ecosystem-logowall {
  background: #f4f7fa;
  padding-block: 96px;
  color: #011627;
}

.datajoint-ecosystem-logowall__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-ecosystem-logowall__head {
  text-align: center;
}

.datajoint-ecosystem-logowall__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-ecosystem-logowall__heading {
  margin: 20px 0 0;
  font: 700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-ecosystem-logowall__intro {
  margin: 20px auto 0;
  max-width: 1100px;
  font: 300 18px/1.55 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-ecosystem-logowall__cards {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
}

.datajoint-ecosystem-logowall__card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 16px;
  padding: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.datajoint-ecosystem-logowall__accent {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: #00a0df;
}

.datajoint-ecosystem-logowall__card-eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-ecosystem-logowall__card-desc {
  margin: 8px 0 0;
  font: 300 15px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-ecosystem-logowall__grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

@media (max-width: 560px) {
  .datajoint-ecosystem-logowall__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.datajoint-ecosystem-logowall__tile {
  min-height: 72px;
  padding: 16px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f4f7fa;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  font: 700 13px/1.25 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: -0.01em;
  color: #011627;
  transition: border-color 200ms ease, color 200ms ease;
}

.datajoint-ecosystem-logowall__tile:hover {
  border-color: #00a0df;
  color: #00a0df;
}

.datajoint-ecosystem-logowall__chips {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.datajoint-ecosystem-logowall__chip {
  padding: 8px 12px;
  background: #f4f7fa;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  font: 700 14px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: -0.01em;
  color: #011627;
  transition: border-color 200ms ease, color 200ms ease;
}

.datajoint-ecosystem-logowall__chip:hover {
  border-color: #00a0df;
  color: #00a0df;
}

.datajoint-ecosystem-flow {
  background: #fff;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-ecosystem-flow__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-ecosystem-flow__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-ecosystem-flow__heading {
  margin: 24px 0 0;
  font: 700 clamp(28px, 4vw, 44px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-ecosystem-flow__sub {
  margin: 24px 0 0;
  max-width: 920px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-ecosystem-flow__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .datajoint-ecosystem-flow__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .datajoint-ecosystem-flow__grid {
    grid-template-columns: 1fr;
  }
}

.datajoint-ecosystem-flow__card {
  position: relative;
  background: #fff;
  border: 1.5px solid #e2e2e2;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
  overflow: hidden;
  color: #00a0df;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.datajoint-ecosystem-flow__card:hover {
  border-color: #00a0df;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(1, 22, 39, 0.1);
}

.datajoint-ecosystem-flow__card.is-catchall {
  color: #ff5113;
}

.datajoint-ecosystem-flow__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #00a0df;
}

.datajoint-ecosystem-flow__card.is-catchall .datajoint-ecosystem-flow__accent {
  background: linear-gradient(to right, #ff5113, rgba(255, 81, 19, 0.4));
}

.datajoint-ecosystem-flow__card-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  line-height: 0;
  color: inherit;
}

.datajoint-ecosystem-flow__num {
  display: block;
  font: 700 13px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-ecosystem-flow__card.is-catchall .datajoint-ecosystem-flow__num {
  visibility: hidden;
}

.datajoint-ecosystem-flow__name {
  margin: 48px 0 0;
  padding-right: 40px;
  font: 700 20px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-ecosystem-flow__tagline {
  margin: 12px 0 0;
  font: 700 16px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-ecosystem-flow__card.is-catchall .datajoint-ecosystem-flow__tagline {
  color: #ff5113;
}

.datajoint-ecosystem-flow__desc {
  margin: 16px 0 0;
  white-space: pre-line;
  font: 300 14px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-ecosystem-flow__tools {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  -moz-column-gap: 16px;
       column-gap: 16px;
  align-items: center;
}

.datajoint-ecosystem-flow__tools span {
  font: 700 12px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: -0.01em;
  color: #94a3b8;
}

.datajoint-ecosystem-flow__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
  font: 700 14px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #ff5113;
}

.datajoint-ecosystem-flow__cta:hover {
  text-decoration: underline;
}

.datajoint-ecosystem-foundation {
  background: #00a0df;
  padding-block: 100px;
}

.datajoint-ecosystem-foundation__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-ecosystem-foundation__eyebrow {
  margin: 0 0 24px;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #011627;
}

.datajoint-ecosystem-foundation__quote {
  margin: 0 auto;
  max-width: 1100px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.3;
  color: #fff;
}

.datajoint-ecosystem-foundation__body {
  margin: 32px auto 0;
  max-width: 880px;
  font: 300 18px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.92);
}

.datajoint-ecosystem-foundation__link-wrap {
  margin: 32px 0 0;
}

.datajoint-ecosystem-foundation__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 16px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #fff;
}

.datajoint-ecosystem-foundation__link:hover {
  text-decoration: underline;
}

.datajoint-ecosystem-partner {
  background: #0a1628;
  padding-block: 100px;
  color: #fff;
}

.datajoint-ecosystem-partner__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-ecosystem-partner__eyebrow {
  margin: 0 0 24px;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-ecosystem-partner__heading {
  margin: 0 0 24px;
  font: 700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #fff;
}

.datajoint-ecosystem-partner__body {
  margin: 0 auto;
  max-width: 980px;
  font: 300 18px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.75);
}

.datajoint-ecosystem-partner__ctas {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.datajoint-ecosystem-partner__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00a0df;
  color: #fff;
  border-radius: 9999px;
  padding: 14px 24px;
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  transition: transform 150ms ease;
}

.datajoint-ecosystem-partner__cta-primary:hover {
  transform: scale(1.02);
}

.datajoint-ecosystem-partner__cta-secondary {
  font: 700 16px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-ecosystem-partner__cta-secondary:hover {
  text-decoration: underline;
}

.datajoint-team-hero {
  position: relative;
  background: #0a1628;
  color: #fff;
  padding-block: 140px 80px;
  overflow: hidden;
}

.datajoint-team-hero__grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.datajoint-team-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 64px;
}

@media (min-width: 1024px) {
  .datajoint-team-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  }
}

.datajoint-team-hero__content {
  max-width: 820px;
}

.datajoint-team-hero__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-team-hero__title {
  margin: 20px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.15;
  color: #fff;
}

.datajoint-team-hero__title span {
  display: block;
}

.datajoint-team-hero__title-accent {
  color: #00a0df;
}

.datajoint-team-hero__lede {
  margin: 28px 0 0;
  max-width: 720px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.85);
}

.datajoint-team-hero__ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.datajoint-team-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00a0df;
  color: #fff;
  border-radius: 9999px;
  padding: 12px 24px;
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  transition: transform 150ms ease;
}

.datajoint-team-hero__cta-primary:hover {
  transform: scale(1.02);
}

.datajoint-team-hero__cta-secondary {
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #fff;
  opacity: 0.9;
  white-space: nowrap;
}

.datajoint-team-hero__cta-secondary:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- Mosaic visual ---- */

.datajoint-team-hero__visual {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide the team mosaic image on tablet/mobile (client feedback). */

@media (max-width: 1023.98px) {
  .datajoint-team-hero__visual {
    display: none;
  }
}

.datajoint-team-hero__glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 160, 223, 0.55) 0%, rgba(0, 160, 223, 0.25) 35%, rgba(0, 160, 223, 0) 70%);
  filter: blur(30px);
  opacity: 0.22;
  animation: dj-team-glow 6s ease-in-out infinite;
  pointer-events: none;
}

.datajoint-team-hero__mosaic {
  position: relative;
  width: 82%;
  height: 82%;
  -o-object-fit: contain;
     object-fit: contain;
  animation: dj-team-float 6s ease-in-out infinite;
}

@keyframes dj-team-glow {
  0%, 100% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes dj-team-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-team-hero__glow,
	.datajoint-team-hero__mosaic {
    animation: none;
  }
}

.datajoint-team-roster {
  background: #fff;
  padding-block: 100px;
  color: #011627;
}

.datajoint-team-roster__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-team-roster__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .datajoint-team-roster__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .datajoint-team-roster__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .datajoint-team-roster__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.datajoint-team-roster__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  background: #fff;
  border: 1.5px solid #e2e2e2;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

@media (min-width: 768px) {
  .datajoint-team-roster__card {
    padding: 24px;
  }
}

.datajoint-team-roster__card:hover {
  transform: translateY(-4px);
  border-color: #00a0df;
  box-shadow: 0 12px 24px rgba(1, 22, 39, 0.1);
}

.datajoint-team-roster__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #00a0df;
  background: #fff;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .datajoint-team-roster__photo {
    width: 120px;
    height: 120px;
  }
}

.datajoint-team-roster__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.datajoint-team-roster__name {
  margin: 0;
  font: 700 18px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-team-roster__role {
  margin: 4px 0 0;
  font: 700 13px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-team-roster__bio {
  margin: 16px 0 0;
  font: 300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #011627;
}

.datajoint-team-roster__credentials {
  margin: 12px 0 0;
  font: 300 italic 12px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-team-roster__socials {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.datajoint-team-roster__social {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #e2e2e2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00a0df;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.datajoint-team-roster__social:hover {
  background: #00a0df;
  color: #fff;
  border-color: #00a0df;
}

.datajoint-team-backedby {
  background: #f4f7fa;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-team-backedby__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-team-backedby__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-team-backedby__heading {
  margin: 16px 0 0;
  max-width: 1200px;
  font: 700 40px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-team-backedby__intro {
  margin: 24px 0 0;
  max-width: 720px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-team-backedby__group {
  margin-top: 64px;
}

.datajoint-team-backedby__sublabel {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-team-backedby__investors {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.datajoint-team-backedby__investor {
  width: 220px;
  height: 88px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.datajoint-team-backedby__investor img {
  max-width: 100%;
  max-height: 56px;
  -o-object-fit: contain;
     object-fit: contain;
}

.datajoint-team-backedby__advisors {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 1024px) {
  .datajoint-team-backedby__advisors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.datajoint-team-backedby__advisor {
  height: 100%;
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 24px;
}

.datajoint-team-backedby__advisor-photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e2e2e2;
}

.datajoint-team-backedby__advisor-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.datajoint-team-backedby__advisor-body {
  min-width: 0;
}

.datajoint-team-backedby__advisor-name {
  margin: 0;
  font: 700 16px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-team-backedby__advisor-role {
  margin: 4px 0 0;
  font: 700 13px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-team-backedby__advisor-desc {
  margin: 8px 0 0;
  font: 300 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-team-join {
  background: #fff;
  padding-block: 100px;
  color: #011627;
}

.datajoint-team-join__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-team-join__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-team-join__heading {
  margin: 16px auto 0;
  max-width: 880px;
  font: 700 clamp(28px, 4vw, 36px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-team-join__body {
  margin: 24px auto 0;
  max-width: 720px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-team-join__ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

.datajoint-team-join__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00a0df;
  color: #fff;
  border-radius: 9999px;
  padding: 14px 24px;
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  transition: transform 150ms ease;
}

.datajoint-team-join__cta-primary:hover {
  transform: scale(1.02);
}

.datajoint-team-join__cta-secondary {
  font: 700 16px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-team-join__cta-secondary:hover {
  text-decoration: underline;
}

.datajoint-about-hero {
  position: relative;
  background: #0a1628;
  color: #fff;
  padding-block: 140px 120px;
  overflow: hidden;
}

.datajoint-about-hero__grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.datajoint-about-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 48px;
}

@media (min-width: 1024px) {
  .datajoint-about-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  }
}

.datajoint-about-hero__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-about-hero__title {
  margin: 20px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.15;
  color: #fff;
}

.datajoint-about-hero__title span {
  display: block;
}

.datajoint-about-hero__title-accent {
  color: #00a0df;
}

.datajoint-about-hero__lede {
  margin: 32px 0 0;
  max-width: 720px;
  font: 300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.85);
}

.datajoint-about-hero__ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.datajoint-about-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00a0df;
  color: #fff;
  border-radius: 9999px;
  padding: 12px 24px;
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  transition: transform 150ms ease;
}

.datajoint-about-hero__cta-primary:hover {
  transform: scale(1.02);
}

.datajoint-about-hero__cta-secondary {
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #fff;
  opacity: 0.9;
  white-space: nowrap;
}

.datajoint-about-hero__cta-secondary:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.datajoint-about-hero__visual {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.datajoint-about-hero__glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 160, 223, 0.55) 0%, rgba(0, 160, 223, 0.25) 35%, rgba(0, 160, 223, 0) 70%);
  filter: blur(30px);
  opacity: 0.22;
  animation: dj-about-glow 6s ease-in-out infinite;
  pointer-events: none;
}

.datajoint-about-hero__mark {
  position: relative;
  width: 72%;
  height: 72%;
  -o-object-fit: contain;
     object-fit: contain;
  animation: dj-about-float 6s ease-in-out infinite;
}

@keyframes dj-about-glow {
  0%, 100% {
    opacity: 0.18;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes dj-about-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

/* Remove the hero mark on mobile (client: "remove the image for mobile only,
   as we did with the Our Team page"). Kept on tablet/desktop. */

@media (max-width: 767px) {
  .datajoint-about-hero__visual {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-about-hero__glow,
	.datajoint-about-hero__mark {
    animation: none;
  }
}

.datajoint-about-origin {
  background: #fff;
  padding-block: 120px 24px;
  color: #011627;
}

.datajoint-about-origin__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-about-origin__head {
  max-width: 1120px;
}

.datajoint-about-origin__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-about-origin__eyebrow--center {
  text-align: center;
}

.datajoint-about-origin__heading {
  margin: 24px 0 0;
  font: 700 clamp(28px, 4vw, 40px) / 1.25 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-about-origin__heading span {
  color: #00a0df;
}

.datajoint-about-origin__cols {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 1024px) {
  .datajoint-about-origin__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.datajoint-about-origin__lead {
  margin: 0;
  font: 300 19px/1.7 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #011627;
}

.datajoint-about-origin__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.datajoint-about-origin__points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: 300 17px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #011627;
}

.datajoint-about-origin__point-icon {
  flex-shrink: 0;
  margin-top: 4px;
  line-height: 0;
}

.datajoint-about-origin__funders {
  margin-top: 24px;
  background: #f4f7fa;
  border: 1px solid #e2e2e2;
  border-radius: 16px;
  padding: 48px 32px;
}

.datajoint-about-origin__funders-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  font: 700 12px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-about-origin__rule {
  height: 1px;
  width: 48px;
  background: #e2e2e2;
}

.datajoint-about-origin__funders-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.datajoint-about-origin__funder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}

.datajoint-about-origin__funder-name {
  font: 700 22px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.04em;
  color: #011627;
}

.datajoint-about-origin__funder-sub {
  margin-top: 4px;
  font: 500 10px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a5568;
}

/* Flow strip */

.datajoint-about-origin__flow {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.datajoint-about-origin__node--top {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00a0df;
  box-shadow: 0 0 8px rgba(0, 160, 223, 0.6);
}

.datajoint-about-origin__trunk {
  width: 1px;
  height: 80px;
  background: rgba(0, 160, 223, 0.4);
}

.datajoint-about-origin__flow-text {
  max-width: 720px;
  /* Give the eyebrow room below the vertical connector line so it isn't
	   touching it (client: Lovable has it breathing more). */
  margin: 40px auto 0;
  text-align: center;
}

.datajoint-about-origin__flow-quote {
  margin: 16px 0 0;
  font: 300 italic clamp(22px, 3vw, 32px) / 1.3 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #011627;
}

.datajoint-about-origin__split {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.datajoint-about-origin__split-svg {
  width: 320px;
  height: 120px;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-about-origin__flow-dot {
    display: none;
  }
}

.datajoint-about-problem {
  background: #fff;
  padding-block: 0 120px;
  color: #011627;
}

.datajoint-about-problem__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-about-problem__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .datajoint-about-problem__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.datajoint-about-problem__card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1.5px solid #e2e2e2;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
  overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.datajoint-about-problem__card:hover {
  border-color: #00a0df;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(1, 22, 39, 0.1);
}

.datajoint-about-problem__accent {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: #00a0df;
}

.datajoint-about-problem__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 160, 223, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00a0df;
}

.datajoint-about-problem__title {
  margin: 20px 0 0;
  font: 700 clamp(22px, 3vw, 26px) / 1.25 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-about-problem__card p {
  margin: 16px 0 0;
  font: 300 16px/1.7 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #011627;
}

.datajoint-about-problem__card p:first-of-type {
  margin-top: 8px;
}

/* Bold + blue highlight for the "upstream, experiment-first foundation" phrase
   in the Outcome card (client feedback). */

.datajoint-about-problem__hl {
  font-weight: 700;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-about-mission {
  background: #0a1628;
  padding-block: 100px;
  color: #fff;
}

.datajoint-about-mission__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-about-mission__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-about-mission__quote {
  margin: 24px 0 0;
  font: 300 italic clamp(24px, 3.6vw, 36px) / 1.3 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #fff;
}

.datajoint-about-mission__body {
  /* Size the box to the text and centre that box, so the single-line statement
	   is truly centred under OUR MISSION / the quote. Previously nowrap text in a
	   fixed-width box overflowed asymmetrically and read as skewed right (5:32). */
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin: 32px auto 0;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

@media (min-width: 1024px) {
  /* On desktop keep it to one line. The single line is slightly wider than the
	   920px inner cap, so centre it on the viewport (not the inner) to keep it
	   visually centred under OUR MISSION instead of skewing right (5:32). */

  .datajoint-about-mission__body {
    white-space: nowrap;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

.datajoint-about-pedigree {
  background: #fff;
  padding-block: 120px;
  color: #011627;
}

.datajoint-about-pedigree__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-about-pedigree__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-about-pedigree__heading {
  margin: 24px 0 0;
  font: 700 clamp(28px, 4.4vw, 44px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-about-pedigree__heading span {
  display: block;
}

.datajoint-about-pedigree__heading-accent {
  color: #00a0df;
}

.datajoint-about-pedigree__intro {
  margin: 32px 0 80px;
  max-width: 980px;
  font: 300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

/* Metrics panel: a bordered card with vertical dividers between the four
   headline stats (client: graphic "is not showing... no lines"). */

.datajoint-about-pedigree__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 40px;
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-radius: 12px 12px 0 0;
  background: #fff;
  overflow: hidden;
}

@media (min-width: 768px) {
  .datajoint-about-pedigree__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.datajoint-about-pedigree__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px;
  border-top: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-left: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
}

/* First row top edge + first column left edge sit on the panel border. */

.datajoint-about-pedigree__stat:nth-child(1),
.datajoint-about-pedigree__stat:nth-child(2) {
  border-top: 0;
}

.datajoint-about-pedigree__stat:nth-child(odd) {
  border-left: 0;
}

@media (min-width: 768px) {
  .datajoint-about-pedigree__stat {
    border-top: 0;
  }

  .datajoint-about-pedigree__stat:nth-child(odd) {
    border-left: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  }

  .datajoint-about-pedigree__stat:first-child {
    border-left: 0;
  }
}

.datajoint-about-pedigree__stat-num {
  font: 700 clamp(44px, 5vw, 56px) / 1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-about-pedigree__stat-label {
  margin-top: 8px;
  font: 700 12px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a5568;
}

.datajoint-about-pedigree__secondary {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #f4f7fa;
  overflow: hidden;
}

@media (min-width: 768px) {
  .datajoint-about-pedigree__secondary {
    grid-template-columns: repeat(3, 1fr);
  }
}

.datajoint-about-pedigree__sec-stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
}

@media (min-width: 768px) {
  .datajoint-about-pedigree__sec-stat {
    border-top: 0;
    border-left: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  }

  .datajoint-about-pedigree__sec-stat:first-child {
    border-left: 0;
  }
}

.datajoint-about-pedigree__sec-num {
  font: 700 24px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-about-pedigree__sec-label {
  font: 300 15px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-about-pedigree__trusted-label {
  margin: 80px 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font: 700 12px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
  text-align: center;
}

.datajoint-about-pedigree__rule {
  flex: 0 1 120px;
  height: 1px;
  background: linear-gradient(to right, rgba(0, 160, 223, 0) 0%, rgba(0, 160, 223, 0.35) 100%);
}

.datajoint-about-pedigree__trusted-label .datajoint-about-pedigree__rule:last-child {
  background: linear-gradient(to left, rgba(0, 160, 223, 0) 0%, rgba(0, 160, 223, 0.35) 100%);
}

/* Infinite marquee (same behaviour as the homepage logo wall), with the
   dark-logo variants. Mobile drops the auto-scroll for a static wrap. */

.datajoint-about-pedigree__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.datajoint-about-pedigree__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: -moz-max-content;
  width: max-content;
  animation: dj-pedigree-marquee 75s linear infinite;
}

@keyframes dj-pedigree-marquee {
  0%   {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.datajoint-about-pedigree__marquee:hover .datajoint-about-pedigree__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-about-pedigree__track {
    animation: none;
  }
}

/* Mobile: drop the marquee; wrap into a static centred grid showing each logo
   once (hide the duplicate a11y pass). */

@media (max-width: 767.98px) {
  .datajoint-about-pedigree__marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .datajoint-about-pedigree__track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 24px;
    width: auto;
    animation: none;
  }

  .datajoint-about-pedigree__logo[aria-hidden="true"] {
    display: none;
  }
}

.datajoint-about-pedigree__logo {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.datajoint-about-pedigree__logo img {
  max-height: 48px;
  max-width: 160px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.85;
  transition: opacity 200ms ease;
}

.datajoint-about-pedigree__logo img:hover {
  opacity: 1;
}

.datajoint-about-journey {
  background: #f4f7fa;
  padding-block: 120px;
  color: #011627;
}

/* Mobile: the timeline stacks vertically and runs long, so the last cards
   (2026 / 2025) read as crowding the dark section below. Add generous bottom
   breathing room beyond the base 120px (client 11:59am: still too close). */

@media (max-width: 1023.98px) {
  .datajoint-about-journey {
    padding-bottom: 200px;
  }
}

.datajoint-about-journey__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-about-journey__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-about-journey__heading {
  margin: 16px 0 0;
  font: 700 clamp(28px, 4vw, 40px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-about-journey__intro {
  margin: 24px 0 0;
  max-width: 920px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

/* --- Base (tablet/mobile): vertical timeline --- */

.datajoint-about-journey__timeline {
  list-style: none;
  margin: 56px 0 0;
  padding: 0 0 0 24px;
  position: relative;
}

.datajoint-about-journey__timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(0, 160, 223, 0.4);
}

.datajoint-about-journey__item {
  position: relative;
  padding-left: 16px;
}

.datajoint-about-journey__item + .datajoint-about-journey__item {
  margin-top: 24px;
}

.datajoint-about-journey__dot {
  position: absolute;
  left: -24px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #00a0df;
}

/* The connector stem is only used in the desktop horizontal layout. */

.datajoint-about-journey__stem {
  display: none;
}

.datajoint-about-journey__card {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 16px;
  max-width: 520px;
}

/* --- Desktop: horizontal zigzag timeline (matches Lovable) --- */

@media (min-width: 1024px) {
  .datajoint-about-journey__timeline {
    margin-top: 120px;
    padding: 0 12px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 360px;
  }

  /* Centre horizontal line. */

  .datajoint-about-journey__timeline::before {
    left: 12px;
    right: 12px;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .datajoint-about-journey__item {
    position: relative;
    padding-left: 0;
    height: 0;
    display: flex;
    justify-content: center;
  }

  .datajoint-about-journey__item + .datajoint-about-journey__item {
    margin-top: 0;
  }

  /* Dot centred on the line. */

  .datajoint-about-journey__dot {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  /* Vertical connector stem between the dot and its card. */

  .datajoint-about-journey__stem {
    display: block;
    position: absolute;
    left: 50%;
    width: 1px;
    height: 72px;
    background: rgba(0, 160, 223, 0.4);
  }

  .datajoint-about-journey__item.is-above .datajoint-about-journey__stem {
    bottom: 50%;
  }

  .datajoint-about-journey__item.is-below .datajoint-about-journey__stem {
    top: 50%;
  }

  .datajoint-about-journey__card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    max-width: 200px;
    padding: 14px;
  }

  .datajoint-about-journey__item.is-above .datajoint-about-journey__card {
    bottom: calc(50% + 80px);
  }

  .datajoint-about-journey__item.is-below .datajoint-about-journey__card {
    top: calc(50% + 80px);
  }
}

.datajoint-about-journey__year {
  display: block;
  font: 700 13px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-about-journey__title {
  display: block;
  margin-top: 8px;
  font: 700 15px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-about-journey__desc {
  display: block;
  margin-top: 8px;
  font: 300 12px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-about-journey__logos {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.datajoint-about-journey__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  background: rgba(0, 160, 223, 0.06);
  border-radius: 4px;
  font: 700 10px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
  white-space: nowrap;
}

.datajoint-about-vision {
  background: #0a1628;
  padding-block: 120px;
  color: #fff;
}

.datajoint-about-vision__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-about-vision__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-about-vision__heading {
  margin: 32px auto 0;
  max-width: 1100px;
  font: 300 italic clamp(28px, 4.4vw, 44px) / 1.3 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #fff;
}

.datajoint-about-vision__body {
  margin: 40px auto 0;
  max-width: 1100px;
  font: 300 18px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.85);
}

.datajoint-about-vision__divider {
  display: block;
  width: 60px;
  height: 3px;
  background: #ff5113;
  margin: 48px auto 16px;
}

.datajoint-about-vision__footer {
  margin: 0 auto;
  max-width: 720px;
  font: 300 italic 16px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.7);
}

.datajoint-about-team-engage {
  background: #fff;
  padding-block: 100px;
  color: #011627;
}

.datajoint-about-team-engage__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-about-team-engage__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
}

@media (min-width: 1024px) {
  .datajoint-about-team-engage__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.datajoint-about-team-engage__col {
  display: flex;
  flex-direction: column;
}

.datajoint-about-team-engage__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-about-team-engage__heading {
  margin: 16px 0 0;
  font: 700 clamp(24px, 3vw, 32px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-about-team-engage__heading span {
  display: block;
}

.datajoint-about-team-engage__body {
  margin: 24px 0 0;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-about-team-engage__link {
  margin-top: auto;
  padding-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 16px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-about-team-engage__link:hover {
  text-decoration: underline;
}

.datajoint-services-hero {
  position: relative;
  background: #0a1628;
  color: #fff;
  padding-block: 120px 100px;
  overflow: hidden;
}

.datajoint-services-hero__grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.datajoint-services-hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 48px;
}

@media (min-width: 1024px) {
  .datajoint-services-hero__inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  }
}

/* Tablet/mobile: place the orbit between the headline and the lede (matching
   the homepage hero). */

@media (max-width: 1023.98px) {
  .datajoint-services-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .datajoint-services-hero__content {
    display: contents;
  }

  .datajoint-services-hero__eyebrow {
    order: 1;
  }

  .datajoint-services-hero__title {
    order: 2;
  }

  /* Smaller orbit with a generous gap below the headline (client 11:59am:
	   "still too large and too close to the headline"). The badges/halo sit at
	   the circle's edge so the visual footprint is ~the full max-width — keep it
	   well under the ~294px mobile content width. Extra-specific selector so it
	   wins over the later base __visual rule regardless of source order. */

  .datajoint-services-hero .datajoint-services-hero__visual {
    order: 3;
    margin: 4.5rem auto 2.5rem;
    max-width: 200px;
  }

  /* Scale the centre "DataJoint" label down with the smaller orbit so it fits
	   inside the core circle with padding (it was overflowing the edges). */

  .datajoint-services-hero .datajoint-services-hero__core {
    font-size: 12px;
  }

  .datajoint-services-hero__lede {
    order: 4;
  }

  .datajoint-services-hero__lede + .datajoint-services-hero__lede {
    order: 5;
  }

  .datajoint-services-hero__ctas {
    order: 6;
  }
}

.datajoint-services-hero__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-services-hero__title {
  margin: 16px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.15;
}

.datajoint-services-hero__title span {
  display: block;
}

.datajoint-services-hero__title-accent {
  color: #00a0df;
}

.datajoint-services-hero__lede {
  margin: 24px 0 0;
  max-width: 640px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.85);
}

.datajoint-services-hero__ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.datajoint-services-hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00a0df;
  color: #fff;
  border-radius: 9999px;
  padding: 14px 26px;
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  transition: transform 150ms ease;
}

.datajoint-services-hero__cta-primary:hover {
  transform: scale(1.02);
}

.datajoint-services-hero__cta-secondary {
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
}

/* Orbit visual */

.datajoint-services-hero__visual {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

/* Pulsing halos behind the orbit. */

.datajoint-services-hero__halo {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: dj-svc-halo 4s ease-in-out infinite;
  pointer-events: none;
}

.datajoint-services-hero__halo--outer {
  width: 58%;
  aspect-ratio: 1 / 1;
  background: rgba(0, 160, 223, 0.10);
}

.datajoint-services-hero__halo--inner {
  width: 42%;
  aspect-ratio: 1 / 1;
  background: rgba(0, 160, 223, 0.25);
}

/* Dashed ring + spokes. */

.datajoint-services-hero__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Center DataJoint badge. */

.datajoint-services-hero__core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 37%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #00a0df;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 700 18px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  box-shadow: 0 10px 40px rgba(0, 160, 223, 0.35);
  z-index: 2;
}

/* Orbiting badges: the orbit container rotates slowly; each icon
   counter-rotates so it stays upright (matches Lovable). */

.datajoint-services-hero__orbit {
  position: absolute;
  inset: 0;
  animation: dj-svc-orbit 60s linear infinite;
  transform-origin: 50% 50%;
}

.datajoint-services-hero__orbit-badge {
  position: absolute;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  /* center on the (left, top) percentage point */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

.datajoint-services-hero__orbit-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dj-svc-orbit-rev 60s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes dj-svc-orbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes dj-svc-orbit-rev {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes dj-svc-halo {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-services-hero__orbit,
	.datajoint-services-hero__orbit-counter,
	.datajoint-services-hero__halo {
    animation: none;
  }
}

.datajoint-services-sciops {
  background: #fff;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-services-sciops__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-services-sciops__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-services-sciops__heading {
  margin: 16px 0 0;
  font: 700 clamp(28px, 4vw, 44px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-services-sciops__intro {
  margin: 24px 0 0;
  max-width: 920px;
  font: 300 20px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-services-sciops__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 641px) {
  .datajoint-services-sciops__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .datajoint-services-sciops__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.datajoint-services-sciops__card {
  background: #fff;
  border: 1.5px solid #e2e2e2;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
  transition: border-color 200ms ease, transform 200ms ease;
}

.datajoint-services-sciops__card:hover {
  border-color: #00a0df;
  transform: translateY(-4px);
}

.datajoint-services-sciops__icon {
  display: block;
  line-height: 0;
}

.datajoint-services-sciops__card h3 {
  margin: 16px 0 12px;
  font: 700 20px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-services-sciops__card p {
  margin: 0;
  font: 300 14px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-services-engagement {
  background: #f4f7fa;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-services-engagement__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-services-engagement__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-services-engagement__heading {
  margin: 16px 0 0;
  font: 700 clamp(28px, 4vw, 44px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-services-engagement__intro {
  margin: 24px 0 0;
  max-width: 920px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-services-engagement__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 769px) {
  .datajoint-services-engagement__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.datajoint-services-engagement__card {
  position: relative;
  background: #fff;
  border: 1.5px solid #e2e2e2;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(1, 22, 39, 0.06);
  padding: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #00a0df;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

@media (max-width: 768px) {
  .datajoint-services-engagement__card {
    padding: 24px;
  }
}

.datajoint-services-engagement__card.is-orange {
  color: #ff5113;
}

.datajoint-services-engagement__card:hover {
  border-color: #00a0df;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(1, 22, 39, 0.1);
}

.datajoint-services-engagement__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: currentColor;
}

.datajoint-services-engagement__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #00a0df;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font: 700 18px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-services-engagement__card.is-orange .datajoint-services-engagement__num {
  background: #ff5113;
}

.datajoint-services-engagement__name {
  margin: 0;
  font: 700 24px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-services-engagement__descriptor {
  margin: 12px 0 0;
  font: 700 13px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a5568;
}

.datajoint-services-engagement__summary {
  margin: 24px 0 0;
  font: 300 15px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #011627;
}

.datajoint-services-engagement__outcome {
  margin-top: 24px;
  border-radius: 8px;
  padding: 16px;
  background: rgba(0, 160, 223, 0.06);
  border: 1px solid rgba(0, 160, 223, 0.2);
}

.datajoint-services-engagement__card.is-orange .datajoint-services-engagement__outcome {
  background: rgba(255, 81, 19, 0.06);
  border-color: rgba(255, 81, 19, 0.25);
}

.datajoint-services-engagement__outcome-label {
  display: block;
  font: 700 10px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: currentColor;
}

.datajoint-services-engagement__outcome-text {
  display: block;
  margin-top: 6px;
  font: 300 italic 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #011627;
}

.datajoint-services-engagement__whlabel {
  margin: 24px 0 8px;
  font: 700 11px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: currentColor;
}

.datajoint-services-engagement__stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.datajoint-services-engagement__stages li {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}

.datajoint-services-engagement__stages li span:first-child {
  color: currentColor;
  font: 700 16px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-services-engagement__stages li span:last-child {
  font: 700 14px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-services-engagement__closer {
  margin: 48px auto 0;
  max-width: 920px;
  text-align: center;
  font: 300 italic 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #00a0df;
}

.datajoint-services-outcomes {
  background: #fff;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-services-outcomes__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-services-outcomes__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-services-outcomes__heading {
  margin: 16px 0 0;
  font: 700 clamp(28px, 4vw, 44px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-services-outcomes__intro {
  margin: 24px 0 0;
  max-width: 920px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-services-outcomes__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 769px) {
  .datajoint-services-outcomes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.datajoint-services-outcomes__card {
  background: #011627;
  border-radius: 8px;
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.datajoint-services-outcomes__check {
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 0;
}

.datajoint-services-outcomes__card h3 {
  margin: 0 0 6px;
  font: 700 18px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #fff;
}

.datajoint-services-outcomes__card p {
  margin: 0;
  font: 300 14px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.75);
}

.datajoint-services-outcomes__cta-wrap {
  margin-top: 56px;
  text-align: center;
}

.datajoint-services-outcomes__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 16px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-services-outcomes__cta:hover {
  text-decoration: underline;
}

.datajoint-services-disciplines {
  background: #f4f7fa;
  padding-block: 120px 100px;
  color: #011627;
}

.datajoint-services-disciplines__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-services-disciplines__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-services-disciplines__heading {
  margin: 16px 0 0;
  font: 700 clamp(28px, 4vw, 44px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-services-disciplines__intro {
  margin: 24px 0 0;
  max-width: 920px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-services-disciplines__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 641px) and (max-width: 1024px) {
  .datajoint-services-disciplines__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .datajoint-services-disciplines__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.datajoint-services-disciplines__card {
  position: relative;
  background: #fff;
  border: 1.5px solid #e2e2e2;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
  overflow: hidden;
}

.datajoint-services-disciplines__accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #00a0df;
}

.datajoint-services-disciplines__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.datajoint-services-disciplines__num {
  font: 700 13px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  color: #00a0df;
}

.datajoint-services-disciplines__icon {
  line-height: 0;
}

.datajoint-services-disciplines__card h3 {
  margin: 0 0 12px;
  font: 700 20px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-services-disciplines__card p {
  margin: 0;
  font: 300 14px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-blog-hero {
  position: relative;
  background: #0a1628;
  color: #fff;
  padding-block: 160px 120px;
  overflow: hidden;
}

.datajoint-blog-hero__grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.datajoint-blog-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-blog-hero__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-blog-hero__title {
  margin: 16px 0 0;
  max-width: 880px;
  font: 700 clamp(32px, 5vw, 48px) / 1.15 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #fff;
}

.datajoint-blog-hero__title span {
  display: block;
}

.datajoint-blog-hero__title-accent {
  color: #00a0df;
}

.datajoint-blog-hero__lede {
  margin: 24px 0 0;
  max-width: 860px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.8);
}

.datajoint-blog-hero__cta {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00a0df;
  color: #fff;
  border-radius: 9999px;
  padding: 14px 26px;
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  transition: transform 150ms ease;
}

.datajoint-blog-hero__cta:hover {
  transform: scale(1.02);
}

.datajoint-blog-featured {
  background: #f4f7fa;
  padding-block: 80px;
  color: #011627;
}

.datajoint-blog-featured__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-blog-featured__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-blog-featured__heading {
  margin: 12px 0 40px;
  font: 700 clamp(28px, 4vw, 40px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-blog-featured__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .datajoint-blog-featured__grid {
    grid-template-columns: 2fr 3fr;
  }
}

.datajoint-blog-featured__col-small {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.datajoint-blog-featured__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.datajoint-blog-featured__card:hover {
  transform: translateY(-4px);
  border-color: #00a0df;
  box-shadow: 0 12px 24px rgba(1, 22, 39, 0.1);
}

.datajoint-blog-featured__card--small {
  flex-direction: row;
}

.datajoint-blog-featured__img {
  display: block;
  background-size: cover;
}

/* Branded placeholder when a post has no hero image: centre the DataJoint mark
   on the category-tinted panel (mirrors the source blog's placeholder cards). */

.datajoint-blog-featured__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.datajoint-blog-featured__placeholder-mark {
  width: 42%;
  max-width: 220px;
  height: auto;
  opacity: 0.92;
}

.datajoint-blog-featured__card--small .datajoint-blog-featured__placeholder-mark {
  width: 60%;
  max-width: 140px;
}

.datajoint-blog-featured__card--large .datajoint-blog-featured__img {
  aspect-ratio: 16 / 10;
}

.datajoint-blog-featured__card--small .datajoint-blog-featured__img {
  flex: 0 0 38%;
  min-height: 160px;
}

.datajoint-blog-featured__body {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 8px;
}

.datajoint-blog-featured__tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(0, 160, 223, 0.08);
  font: 700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.04em;
  color: #00a0df;
}

.datajoint-blog-featured__date {
  font: 400 12px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #4a5568;
}

.datajoint-blog-featured__title {
  font: 700 20px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-blog-featured__card--large .datajoint-blog-featured__title {
  font-size: 24px;
}

.datajoint-blog-featured__excerpt {
  font: 300 14px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

@media (max-width: 600px) {
  .datajoint-blog-featured__card--small {
    flex-direction: column;
  }

  .datajoint-blog-featured__card--small .datajoint-blog-featured__img {
    min-height: 140px;
    aspect-ratio: 16 / 9;
  }
}

.datajoint-blog-catalog {
  background: #fff;
  padding-block: 80px 100px;
  color: #011627;
}

.datajoint-blog-catalog__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-blog-catalog__sentinel {
  height: 1px;
}

.datajoint-blog-catalog__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  /* Sticky filter bar: locks under the fixed nav (+ banner when shown) and
	   switches to a light-grey bar with a shadow when stuck (client). */
  position: sticky;
  top: var(--dj-nav-height, 73px);
  z-index: 20;
  padding-block: 16px;
  /* Full-viewport-width grey bar (margin-to-margin like the FAQ bar / nav), with
	   inner padding that keeps the controls aligned to the content column. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: max(var(--dj-gutter, 48px), calc((100vw - 1280px) / 2 + var(--dj-gutter, 48px)));
  background: #fff;
  border-block: 1px solid transparent;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

body.has-dj-banner .datajoint-blog-catalog__controls {
  top: calc(var(--dj-nav-height, 73px) + var(--dj-banner-height, 44px));
}

.datajoint-blog-catalog__controls.is-stuck {
  background: var(--wp--preset--color--bg-light-grey, #f4f7fa);
  border-block-color: var(--wp--preset--color--border-light, #e2e2e2);
  box-shadow: 0 4px 12px rgba(1, 22, 39, 0.06);
}

.datajoint-blog-catalog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.datajoint-blog-catalog__filter {
  padding: 8px 16px;
  border: 1px solid #e2e2e2;
  border-radius: 9999px;
  background: #fff;
  font: 700 13px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #4a5568;
  cursor: pointer;
  transition: all 150ms ease;
}

.datajoint-blog-catalog__filter:hover {
  border-color: #00a0df;
  color: #00a0df;
}

.datajoint-blog-catalog__filter.is-active {
  background: #00a0df;
  border-color: #00a0df;
  color: #fff;
}

.datajoint-blog-catalog__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #e2e2e2;
  border-radius: 9999px;
  color: #4a5568;
}

.datajoint-blog-catalog__search-input {
  border: none;
  outline: none;
  font: 400 14px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
  background: transparent;
  min-width: 180px;
}

.datajoint-blog-catalog__count {
  margin: 32px 0 24px;
  font: 400 14px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #4a5568;
}

.datajoint-blog-catalog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .datajoint-blog-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .datajoint-blog-catalog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.datajoint-blog-catalog__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.datajoint-blog-catalog__card:hover {
  transform: translateY(-4px);
  border-color: #00a0df;
  box-shadow: 0 12px 24px rgba(1, 22, 39, 0.1);
}

.datajoint-blog-catalog__img {
  display: block;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

.datajoint-blog-catalog__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.datajoint-blog-catalog__tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(0, 160, 223, 0.08);
  font: 700 11px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.04em;
  color: #00a0df;
}

.datajoint-blog-catalog__date {
  font: 400 12px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #4a5568;
}

.datajoint-blog-catalog__title {
  font: 700 18px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-blog-catalog__excerpt {
  font: 300 14px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-blog-catalog__empty {
  text-align: center;
  padding: 64px 0;
  color: #4a5568;
}

.datajoint-blog-catalog__clear {
  margin-top: 16px;
  padding: 10px 20px;
  border: 1px solid #00a0df;
  border-radius: 9999px;
  background: #fff;
  color: #00a0df;
  font: 700 14px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  cursor: pointer;
}

.datajoint-blog-newsletter {
  background: #f4f7fa;
  padding-block: 100px;
  color: #011627;
}

.datajoint-blog-newsletter__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-blog-newsletter__eyebrow {
  margin: 0;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-blog-newsletter__heading {
  margin: 12px auto 0;
  max-width: 720px;
  font: 700 clamp(28px, 4vw, 36px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-blog-newsletter__intro {
  margin: 16px auto 32px;
  max-width: 720px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(1, 22, 39, 0.75);
}

.datajoint-blog-newsletter__form {
  max-width: 720px;
  margin: 0 auto;
}

.datajoint-blog-newsletter__fallback {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .datajoint-blog-newsletter__fallback {
    flex-direction: row;
  }
}

.datajoint-blog-newsletter__fallback input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  font: 400 14px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  background: #fff;
}

.datajoint-blog-newsletter__fallback button {
  padding: 14px 28px;
  background: #00a0df;
  color: #fff;
  border: none;
  border-radius: 8px;
  font: 700 14px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Style the embedded WPForms newsletter form (Name + Email + Subscribe) to
   match the design — a horizontal row of inputs with a brand-blue button. */

.datajoint-blog-newsletter__form .wpforms-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

@media (min-width: 640px) {
  .datajoint-blog-newsletter__form .wpforms-form {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
}

.datajoint-blog-newsletter__form .wpforms-field {
  flex: 1 1 200px;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

.datajoint-blog-newsletter__form .wpforms-field-row,
.datajoint-blog-newsletter__form div.wpforms-container,
.datajoint-blog-newsletter__form .wpforms-field-container {
  margin: 0 !important;
  padding: 0 !important;
}

.datajoint-blog-newsletter__form .wpforms-field-label {
  display: none !important;
}

.datajoint-blog-newsletter__form input[type="text"],
.datajoint-blog-newsletter__form input[type="email"] {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 50px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2) !important;
  background: #fff !important;
  padding: 0 20px !important;
  margin: 0 !important;
  font: 400 14px/normal var(--wp--preset--font-family--sans, "Roboto", sans-serif) !important;
  color: var(--wp--preset--color--text-on-light, #011627) !important;
}

.datajoint-blog-newsletter__form input:focus {
  outline: none !important;
  border-color: var(--wp--preset--color--brand-blue, #00a0df) !important;
  box-shadow: none !important;
}

.datajoint-blog-newsletter__form .wpforms-submit-container {
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}

.datajoint-blog-newsletter__form button.wpforms-submit {
  box-sizing: border-box !important;
  height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  background: var(--wp--preset--color--brand-blue, #00a0df) !important;
  padding: 0 32px !important;
  margin: 0 !important;
  border: 0 !important;
  cursor: pointer;
  font: 700 14px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif) !important;
  color: #fff !important;
  white-space: nowrap;
}

.datajoint-faqpage-hero {
  position: relative;
  background: #0a1628;
  color: #fff;
  padding-block: 100px 80px;
  overflow: hidden;
}

.datajoint-faqpage-hero__grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.datajoint-faqpage-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-faqpage-hero__eyebrow {
  margin: 0 0 24px;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-faqpage-hero__title {
  margin: 0;
  font: 700 clamp(32px, 5vw, 56px) / 1.15 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #fff;
}

.datajoint-faqpage-hero__title span {
  display: block;
}

.datajoint-faqpage-hero__title-accent {
  color: #00a0df;
}

.datajoint-faqpage-hero__lede {
  margin: 24px auto 0;
  max-width: 960px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: rgba(255, 255, 255, 0.8);
}

.datajoint-faqpage-catalog {
  background: #fff;
  color: #011627;
}

.datajoint-faqpage-catalog__sentinel {
  height: 1px;
}

/* ---- Sticky filter bar ---- */

.datajoint-faqpage-catalog__filterbar {
  position: sticky;
  /* Lock just under the fixed nav (and the banner when it's shown) so the
	   filter bar pins correctly on scroll (client feedback). */
  top: var(--dj-nav-height, 73px);
  z-index: 40;
  background: #f4f7fa;
  border-bottom: 1px solid transparent;
  padding-block: 24px;
  transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

body.has-dj-banner .datajoint-faqpage-catalog__filterbar {
  top: calc(var(--dj-nav-height, 73px) + var(--dj-banner-height, 44px));
}

.datajoint-faqpage-catalog__filterbar.is-stuck {
  border-bottom-color: #e2e2e2;
  box-shadow: 0 2px 8px rgba(1, 22, 39, 0.06);
}

.datajoint-faqpage-catalog__filterbar-inner,
.datajoint-faqpage-catalog__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-faqpage-catalog__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* ---- Dropdowns ---- */

.datajoint-faqpage-catalog__dropdown {
  position: relative;
}

.datajoint-faqpage-catalog__dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1.5px solid #e2e2e2;
  background: #fff;
  font: 700 13px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
  cursor: pointer;
  transition: all 150ms ease;
}

.datajoint-faqpage-catalog__dropdown-btn:hover,
.datajoint-faqpage-catalog__dropdown.is-active .datajoint-faqpage-catalog__dropdown-btn {
  border-color: #808285;
}

.datajoint-faqpage-catalog__dropdown.is-open .datajoint-faqpage-catalog__dropdown-btn {
  background: #fafcfe;
  border-color: #808285;
}

.datajoint-faqpage-catalog__chevron {
  transition: transform 150ms ease;
}

.datajoint-faqpage-catalog__dropdown.is-open .datajoint-faqpage-catalog__chevron {
  transform: rotate(180deg);
}

.datajoint-faqpage-catalog__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  background: #fff;
  border: 1.5px solid #e2e2e2;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(1, 22, 39, 0.1);
  padding: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.datajoint-faqpage-catalog__menu[hidden] {
  display: none;
}

.datajoint-faqpage-catalog__option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
}

.datajoint-faqpage-catalog__checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #e2e2e2;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: all 120ms ease;
}

.datajoint-faqpage-catalog__checkbox svg {
  opacity: 0;
}

.datajoint-faqpage-catalog__cb {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.datajoint-faqpage-catalog__cb:checked + .datajoint-faqpage-catalog__option-label {
  /* label stays same; checkbox state handled by sibling combinator below */
}

.datajoint-faqpage-catalog__option:has(.datajoint-faqpage-catalog__cb:checked) .datajoint-faqpage-catalog__checkbox {
  border-color: #00a0df;
  background: #00a0df;
}

.datajoint-faqpage-catalog__option:has(.datajoint-faqpage-catalog__cb:checked) .datajoint-faqpage-catalog__checkbox svg {
  opacity: 1;
}

.datajoint-faqpage-catalog__option-label {
  font: 700 13px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-faqpage-catalog__menu-clear {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #e2e2e2;
}

.datajoint-faqpage-catalog__menu-clear[hidden] {
  display: none;
}

.datajoint-faqpage-catalog__group-clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: 700 12px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
}

.datajoint-faqpage-catalog__group-clear:hover {
  text-decoration: underline;
}

/* ---- Search ---- */

.datajoint-faqpage-catalog__search {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
  min-width: 220px;
}

.datajoint-faqpage-catalog__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #4a5568;
  pointer-events: none;
  line-height: 0;
}

.datajoint-faqpage-catalog__search-input {
  width: 100%;
  padding: 10px 16px 10px 38px;
  border-radius: 8px;
  border: 1.5px solid #e2e2e2;
  background: #fff;
  font: 300 13px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #011627;
  outline: none;
  transition: border-color 150ms ease;
}

.datajoint-faqpage-catalog__search-input:focus {
  border-color: #00a0df;
}

/* ---- Active filter chips ---- */

.datajoint-faqpage-catalog__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}

.datajoint-faqpage-catalog__chips[hidden] {
  display: none;
}

.datajoint-faqpage-catalog__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3f5;
  color: #4a5568;
  padding: 4px 10px 4px 12px;
  border-radius: 12px;
  font: 700 12px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-faqpage-catalog__chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #4a5568;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}

.datajoint-faqpage-catalog__chips-clear {
  margin-left: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font: 700 14px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #00a0df;
  padding: 0;
}

.datajoint-faqpage-catalog__chips-clear:hover {
  text-decoration: underline;
}

/* ---- List ---- */

.datajoint-faqpage-catalog__body {
  background: #fff;
  padding-block: 32px 80px;
}

.datajoint-faqpage-catalog__count {
  margin: 0 0 24px;
  text-align: right;
  font: 300 14px/1.2 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-faqpage-catalog__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.datajoint-faqpage-catalog__item {
  background: #fff;
  border: 1.5px solid #e2e2e2;
  border-radius: 12px;
  padding: 20px 24px;
  transition: background 200ms ease, border-color 200ms ease;
}

.datajoint-faqpage-catalog__item.is-open {
  background: rgba(0, 160, 223, 0.02);
  border-color: rgba(0, 160, 223, 0.4);
}

.datajoint-faqpage-catalog__question {
  margin: 0;
}

.datajoint-faqpage-catalog__trigger {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.datajoint-faqpage-catalog__q-main {
  flex: 1;
  min-width: 0;
}

.datajoint-faqpage-catalog__q-text {
  display: block;
  font: 700 17px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
  transition: color 150ms ease;
}

.datajoint-faqpage-catalog__trigger:hover .datajoint-faqpage-catalog__q-text,
.datajoint-faqpage-catalog__item.is-open .datajoint-faqpage-catalog__q-text {
  color: #00a0df;
}

.datajoint-faqpage-catalog__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.datajoint-faqpage-catalog__tag {
  display: inline-block;
  background: #f1f3f5;
  color: #4a5568;
  font: 700 10px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 10px;
}

.datajoint-faqpage-catalog__plus {
  color: #4a5568;
  flex-shrink: 0;
  margin-top: 2px;
  line-height: 0;
  transition: transform 200ms ease, color 200ms ease;
}

.datajoint-faqpage-catalog__item.is-open .datajoint-faqpage-catalog__plus {
  color: #00a0df;
  transform: rotate(45deg);
}

.datajoint-faqpage-catalog__panel[hidden] {
  display: none;
}

.datajoint-faqpage-catalog__divider {
  height: 1px;
  background: #e2e2e2;
  margin: 16px 0;
}

.datajoint-faqpage-catalog__answer {
  max-width: 920px;
  font: 300 15px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-faqpage-catalog__answer p {
  margin: 0 0 1em;
}

.datajoint-faqpage-catalog__answer p:last-child {
  margin-bottom: 0;
}

/* ---- Empty state ---- */

.datajoint-faqpage-catalog__empty {
  text-align: center;
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.datajoint-faqpage-catalog__empty[hidden] {
  display: none;
}

.datajoint-faqpage-catalog__empty-icon {
  color: #4a5568;
  line-height: 0;
}

.datajoint-faqpage-catalog__empty h3 {
  margin: 16px 0 0;
  font: 700 22px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-faqpage-catalog__empty p {
  margin: 12px 0 0;
  max-width: 480px;
  font: 300 16px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-faqpage-catalog__clear {
  margin-top: 24px;
  background: #00a0df;
  color: #fff;
  font: 700 14px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.datajoint-faqpage-questions {
  background: #f4f7fa;
  padding-block: 80px;
  color: #011627;
}

.datajoint-faqpage-questions__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-faqpage-questions__eyebrow {
  margin: 0 0 16px;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-faqpage-questions__heading {
  margin: 0 auto;
  max-width: 720px;
  font: 700 clamp(28px, 4vw, 36px) / 1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
}

.datajoint-faqpage-questions__body {
  margin: 16px auto 0;
  max-width: 720px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-book-discovery {
  background: #fff;
  padding-block: 120px 80px;
  color: #011627;
}

.datajoint-book-discovery__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 1024px) {
  .datajoint-book-discovery__inner {
    grid-template-columns: 1fr 1fr;
  }
}

.datajoint-book-discovery__eyebrow {
  margin: 0 0 20px;
  font: 700 13px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #00a0df;
}

.datajoint-book-discovery__title {
  margin: 0;
  font: 700 clamp(32px, 5vw, 48px) / 1.15 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-book-discovery__title span {
  display: block;
}

.datajoint-book-discovery__title-accent {
  color: #00a0df;
}

.datajoint-book-discovery__lede {
  margin: 24px 0 40px;
  max-width: 460px;
  font: 300 18px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-book-discovery__expect-label {
  margin: 0 0 24px;
  font: 700 12px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a5568;
}

.datajoint-book-discovery__expect {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.datajoint-book-discovery__expect li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 300 15px/1.6 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #011627;
}

.datajoint-book-discovery__expect li span:first-child {
  color: #00a0df;
  font-weight: 700;
  flex-shrink: 0;
}

.datajoint-book-discovery__closer {
  margin: 48px 0 0;
  font: 300 italic 13px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

/* Form card */

.datajoint-book-discovery__form-card {
  background: #f4f7fa;
  border: 1px solid #e2e2e2;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.04);
}

.datajoint-book-discovery__form-head {
  margin-bottom: 32px;
}

.datajoint-book-discovery__form-title {
  margin: 0;
  font: 700 22px/1.2 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-book-discovery__form-sub {
  margin: 8px 0 0;
  font: 300 14px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-book-discovery__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.datajoint-book-discovery__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.datajoint-book-discovery__helper {
  font: 300 12px/1.4 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-book-discovery__field label {
  font: 700 13px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
}

.datajoint-book-discovery__req {
  color: #ff5113;
}

.datajoint-book-discovery__field input,
.datajoint-book-discovery__field select,
.datajoint-book-discovery__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  font: 400 14px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
  background: #fff;
}

.datajoint-book-discovery__field input:focus,
.datajoint-book-discovery__field select:focus,
.datajoint-book-discovery__field textarea:focus {
  outline: none;
  border-color: #00a0df;
  box-shadow: 0 0 0 3px rgba(0, 160, 223, 0.12);
}

.datajoint-book-discovery__submit {
  margin-top: 6px;
  padding: 14px 26px;
  background: #00a0df;
  color: #fff;
  border: none;
  border-radius: 9999px;
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 150ms ease;
}

.datajoint-book-discovery__submit:hover {
  transform: scale(1.02);
}

/* ---- WPForms embed: align with the DataJoint design ---- */

.datajoint-book-discovery__form-card .wpforms-field-label {
  font: 700 13px/1.3 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
  margin-bottom: 6px;
}

.datajoint-book-discovery__form-card .wpforms-required-label {
  color: #ff5113;
}

.datajoint-book-discovery__form-card input[type="text"],
.datajoint-book-discovery__form-card input[type="email"],
.datajoint-book-discovery__form-card input[type="tel"],
.datajoint-book-discovery__form-card select,
.datajoint-book-discovery__form-card textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  font: 400 14px/1.4 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  color: #011627;
  background: #fff;
}

.datajoint-book-discovery__form-card input:focus,
.datajoint-book-discovery__form-card select:focus,
.datajoint-book-discovery__form-card textarea:focus {
  outline: none;
  border-color: #00a0df;
  box-shadow: 0 0 0 3px rgba(0, 160, 223, 0.12);
}

.datajoint-book-discovery__form-card .wpforms-submit {
  padding: 14px 28px;
  background: #00a0df !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  font: 700 15px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif) !important;
  cursor: pointer;
  transition: transform 150ms ease;
}

.datajoint-book-discovery__form-card .wpforms-submit:hover {
  transform: scale(1.02);
  background: #0090c8 !important;
}

.datajoint-book-discovery-trust {
  background: #f4f7fa;
  padding-block: 60px;
  color: #011627;
}

.datajoint-book-discovery-trust__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  text-align: center;
}

.datajoint-book-discovery-trust__eyebrow {
  margin: 0 0 24px;
  font: 700 12px/1 var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a5568;
}

/* Institution logo marquee (same behaviour as the homepage / about wall). */

.datajoint-book-discovery-trust__marquee {
  overflow: hidden;
  margin-bottom: 24px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.datajoint-book-discovery-trust__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: -moz-max-content;
  width: max-content;
  animation: dj-bdt-marquee 75s linear infinite;
}

@keyframes dj-bdt-marquee {
  0%   {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.datajoint-book-discovery-trust__marquee:hover .datajoint-book-discovery-trust__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .datajoint-book-discovery-trust__track {
    animation: none;
  }
}

@media (max-width: 767.98px) {
  .datajoint-book-discovery-trust__marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .datajoint-book-discovery-trust__track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 32px;
    width: auto;
    animation: none;
  }

  .datajoint-book-discovery-trust__logo[aria-hidden="true"] {
    display: none;
  }
}

.datajoint-book-discovery-trust__logo {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.datajoint-book-discovery-trust__logo img {
  max-height: 40px;
  max-width: 150px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.datajoint-book-discovery-trust__footer {
  margin: 0;
  font: 300 italic 14px/1.5 var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  color: #4a5568;
}

.datajoint-apps {
  background: var(--wp--preset--color--bg-light-grey, #f4f7fa);
  color: var(--wp--preset--color--text-on-light, #011627);
  padding-block: 64px;
}

@media (min-width: 1024px) {
  .datajoint-apps {
    padding-block: 120px;
  }
}

.datajoint-apps__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-apps__eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps__heading {
  margin: 0 0 1.5rem;
  max-width: 48rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 1024px) {
  .datajoint-apps__heading {
    font-size: 40px;
  }
}

.datajoint-apps__intro {
  margin: 0 0 3rem;
  max-width: 920px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: #4a5568;
}

/* Cards grid: the CPT-query wrapper (__cards) or the ACF innerblocks wrapper.
   1 -> 2 (sm) -> 4 (lg). */

.datajoint-apps__grid > .datajoint-apps__cards,
.datajoint-apps__grid > .acf-innerblocks-container,
.datajoint-apps__grid > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .datajoint-apps__grid > .datajoint-apps__cards,
	.datajoint-apps__grid > .acf-innerblocks-container,
	.datajoint-apps__grid > .block-editor-block-list__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .datajoint-apps__grid > .datajoint-apps__cards,
	.datajoint-apps__grid > .acf-innerblocks-container,
	.datajoint-apps__grid > .block-editor-block-list__layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.datajoint-apps__cta-wrap {
  margin-top: 3rem;
  text-align: center;
}

.datajoint-apps__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps__cta:hover {
  text-decoration: underline;
}

.datajoint-apps__cta-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.datajoint-apps__cta:hover .datajoint-apps__cta-arrow {
  transform: translateX(4px);
}

.datajoint-app-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1.5px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-radius: 12px;
  /* Padding now lives on the inner content; the type bar spans the full card
	   width at the top (client feedback). */
  padding: 0 32px 32px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(1, 22, 39, 0.06);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.datajoint-app-card:hover {
  border-color: var(--wp--preset--color--brand-blue, #00a0df);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(1, 22, 39, 0.12);
}

/* Full-width type bar across the top of the card, label centred vertically. */

.datajoint-app-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -32px 0;
  /* break out of the card's horizontal padding */
  min-height: 32px;
  padding: 6px 12px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}

.datajoint-app-card__badge.is-element {
  background: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-app-card__badge.is-tool {
  background: #3a4452;
}

.datajoint-app-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
}

.datajoint-app-card__cat {
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(0, 160, 223, 0.08);
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-app-card__icon {
  display: block;
  margin-top: 16px;
}

.datajoint-app-card__name {
  margin: 16px 0 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-app-card__desc {
  margin: 8px 0 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: #4a5568;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.datajoint-app-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}

.datajoint-app-card__provider {
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-style: italic;
  font-size: 12px;
  color: #4a5568;
}

.datajoint-personas {
  background: #fff;
  color: var(--wp--preset--color--text-on-light, #011627);
  padding-block: 64px;
}

@media (min-width: 1024px) {
  .datajoint-personas {
    padding-block: 120px;
  }
}

.datajoint-personas__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
}

.datajoint-personas__eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-personas__heading {
  margin: 0 0 3rem;
  max-width: 48rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 1024px) {
  .datajoint-personas__heading {
    font-size: 40px;
  }
}

/* Rows live in the ACF InnerBlocks wrapper; top border begins the list. */

.datajoint-personas__list > .acf-innerblocks-container,
.datajoint-personas__list > .block-editor-block-list__layout {
  border-top: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
}

.datajoint-personas__cta-wrap {
  margin-top: 3rem;
  text-align: center;
}

.datajoint-personas__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-personas__cta-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.datajoint-personas__cta:hover .datajoint-personas__cta-arrow {
  transform: translateX(4px);
}

.datajoint-persona-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  padding: 32px 24px;
  min-height: 100px;
  transition: background-color 200ms ease;
}

.datajoint-persona-item:hover {
  background: rgba(0, 160, 223, 0.04);
}

@media (min-width: 768px) {
  .datajoint-persona-item {
    grid-template-columns: 30% 55% 15%;
    gap: 24px;
    padding: 32px 40px;
  }
}

/* Left hover accent bar. */

.datajoint-persona-item__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms ease-out;
}

.datajoint-persona-item:hover .datajoint-persona-item__bar {
  transform: scaleY(1);
}

.datajoint-persona-item__name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.datajoint-persona-item__icon {
  flex-shrink: 0;
}

.datajoint-persona-item__name {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-persona-item__line {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(1, 22, 39, 0.85);
}

.datajoint-persona-item__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

@media (min-width: 768px) {
  .datajoint-persona-item__cta {
    justify-content: flex-end;
    text-align: right;
  }
}

.datajoint-persona-item__cta-arrow {
  display: inline-block;
  transition: transform 150ms ease;
}

.datajoint-persona-item:hover .datajoint-persona-item__cta-arrow {
  transform: translateX(4px);
}

.datajoint-close-cta {
  background: var(--wp--preset--color--bg-light-grey, #f4f7fa);
  color: var(--wp--preset--color--text-on-light, #011627);
  padding-block: 64px;
}

@media (min-width: 1024px) {
  .datajoint-close-cta {
    padding-block: 120px;
  }
}

.datajoint-close-cta__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--dj-gutter, 48px);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media (min-width: 1024px) {
  .datajoint-close-cta__inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
}

.datajoint-close-cta__main {
  width: 100%;
}

@media (min-width: 1024px) {
  .datajoint-close-cta__main {
    width: 60%;
  }
}

.datajoint-close-cta__eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-close-cta__heading {
  margin: 0 0 1.5rem;
  max-width: 48rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 1024px) {
  .datajoint-close-cta__heading {
    font-size: 40px;
  }
}

.datajoint-close-cta__lede {
  margin: 0 0 2.5rem;
  max-width: 42rem;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(1, 22, 39, 0.8);
}

.datajoint-close-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  padding: 16px 28px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  transition: transform 150ms ease;
}

.datajoint-close-cta__button:hover {
  transform: scale(1.02);
}

.datajoint-close-cta__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: 2.5rem;
}

.datajoint-close-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-close-cta__link .datajoint-close-cta__arrow {
  transition: transform 150ms ease;
}

.datajoint-close-cta__link:hover .datajoint-close-cta__arrow {
  transform: translateX(4px);
}

/* Newsletter */

.datajoint-close-cta__newsletter {
  margin-top: 4rem;
  /* Widen so the email input has room to breathe like the Lovable example
	   (the input was being squeezed to ~190px next to the submit button). */
  max-width: 46rem;
  border-top: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  padding-top: 2.5rem;
}

.datajoint-close-cta__nl-title {
  margin: 0 0 0.75rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-close-cta__nl-text {
  margin: 0 0 1.25rem;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(1, 22, 39, 0.75);
}

.datajoint-close-cta__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .datajoint-close-cta__form {
    flex-direction: row;
  }
}

.datajoint-close-cta__input {
  flex: 1;
  border-radius: 9999px;
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  background: #fff;
  padding: 12px 20px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 14px;
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-close-cta__input::-moz-placeholder {
  color: var(--wp--preset--color--text-secondary, #808285);
}

.datajoint-close-cta__input::placeholder {
  color: var(--wp--preset--color--text-secondary, #808285);
}

.datajoint-close-cta__input:focus {
  outline: none;
  border-color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-close-cta__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--wp--preset--color--text-on-light, #011627);
  padding: 12px 24px;
  border: 0;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  transition: transform 150ms ease;
}

.datajoint-close-cta__submit:hover {
  transform: scale(1.02);
}

/*
 * Restyle the embedded WPForms newsletter form to match the pill input + dark
 * submit button of the native form. WPForms ships its own base CSS; we override
 * the relevant pieces scoped to our wrapper.
 */

.datajoint-close-cta__wpforms .wpforms-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .datajoint-close-cta__wpforms .wpforms-form {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* WPForms wraps the field in a container with 15px block padding that shoves the
   input below the button — zero it and let the input define its own height. */

.datajoint-close-cta__wpforms .wpforms-field {
  flex: 1 1 320px;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 260px;
}

.datajoint-close-cta__wpforms .wpforms-field-row,
.datajoint-close-cta__wpforms div.wpforms-container,
.datajoint-close-cta__wpforms .wpforms-field-container {
  margin: 0 !important;
  padding: 0 !important;
}

.datajoint-close-cta__wpforms input[type="email"] {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 50px !important;
  border-radius: 9999px !important;
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2) !important;
  background: #fff !important;
  padding: 0 20px !important;
  margin: 0 !important;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif) !important;
  font-size: 14px !important;
  line-height: normal !important;
  color: var(--wp--preset--color--text-on-light, #011627) !important;
}

.datajoint-close-cta__wpforms input[type="email"]:focus {
  outline: none !important;
  border-color: var(--wp--preset--color--brand-blue, #00a0df) !important;
  box-shadow: none !important;
}

/* Hide the WPForms field label (the design uses a placeholder only). */

.datajoint-close-cta__wpforms .wpforms-field-label {
  display: none !important;
}

.datajoint-close-cta__wpforms .wpforms-submit-container {
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}

.datajoint-close-cta__wpforms button.wpforms-submit,
.datajoint-close-cta__wpforms .wpforms-submit {
  box-sizing: border-box !important;
  height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9999px !important;
  background: var(--wp--preset--color--text-on-light, #011627) !important;
  padding: 0 28px !important;
  margin: 0 !important;
  border: 0 !important;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: #fff !important;
  transition: transform 150ms ease;
}

.datajoint-close-cta__wpforms button.wpforms-submit:hover,
.datajoint-close-cta__wpforms .wpforms-submit:hover {
  transform: scale(1.02);
  background: var(--wp--preset--color--text-on-light, #011627) !important;
}

/* Hide WPForms' default field label/sublabel clutter for the single-field form. */

.datajoint-close-cta__wpforms .wpforms-field-label,
.datajoint-close-cta__wpforms .wpforms-field-sublabel {
  display: none !important;
}

/* Media column */

.datajoint-close-cta__media {
  display: none;
}

/* The scientist image only reads well alongside the form in the two-column
   desktop layout. On tablet it dangled below the stacked form, so only show it
   at >=1024px (client feedback). Mobile already hid it. */

@media (min-width: 1024px) {
  .datajoint-close-cta__media {
    display: flex;
    justify-content: flex-end;
    width: 40%;
    padding-left: 32px;
  }
}

.datajoint-close-cta__media-inner {
  position: relative;
}

.datajoint-close-cta__glow {
  position: absolute;
  inset: -24px;
  z-index: -1;
  border-radius: 24px;
  background: radial-gradient(closest-side, rgba(0, 160, 223, 0.35), transparent 70%);
  filter: blur(40px);
}

.datajoint-close-cta__accent {
  position: absolute;
  bottom: -16px;
  left: -16px;
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background: var(--wp--preset--color--brand-blue, #00a0df);
}

@media (min-width: 1024px) {
  .datajoint-close-cta__accent {
    width: 128px;
    height: 128px;
  }
}

.datajoint-close-cta__frame {
  position: relative;
  width: 300px;
  height: 380px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 20px 60px -15px rgba(1, 22, 39, 0.35);
}

@media (min-width: 1024px) {
  .datajoint-close-cta__frame {
    width: 380px;
    height: 480px;
  }
}

.datajoint-close-cta__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.datajoint-close-cta__duotone {
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  background: linear-gradient(135deg, rgba(0, 160, 223, 0.55) 0%, rgba(10, 22, 40, 0.55) 100%);
}

.datajoint-close-cta__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(1, 22, 39, 0.35) 100%);
}

.datajoint-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 200ms ease, border-color 200ms ease;
  background: transparent;
  border-bottom: 1px solid transparent;
}

.datajoint-nav.is-solid {
  background: #fff;
  border-bottom-color: var(--wp--preset--color--border-light, #e2e2e2);
}

.datajoint-nav__bar {
  max-width: 1280px;
  margin: 0 auto;
  height: 72px;
  padding: 0 var(--dj-gutter, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo crossfade */

.datajoint-nav__logo {
  position: relative;
  display: inline-block;
  height: 39px;
  aspect-ratio: 1781 / 558;
}

.datajoint-nav__logo img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: opacity 200ms ease;
}

.datajoint-nav__logo-dark {
  opacity: 0;
}

.datajoint-nav__logo-white {
  opacity: 1;
}

.datajoint-nav.is-solid .datajoint-nav__logo-dark {
  opacity: 1;
}

.datajoint-nav.is-solid .datajoint-nav__logo-white {
  opacity: 0;
}

/* Desktop menu */

.datajoint-nav__menu {
  display: none;
  align-items: center;
  gap: 1.75rem;
}

@media (min-width: 1024px) {
  .datajoint-nav__menu {
    display: flex;
  }
}

.datajoint-nav__item {
  position: relative;
}

.datajoint-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: opacity 150ms ease;
}

.datajoint-nav.is-solid .datajoint-nav__link {
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-nav__link:hover {
  opacity: 0.7;
}

.datajoint-nav__chevron {
  display: inline-block;
  flex-shrink: 0;
}

/* Dropdowns */

.datajoint-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* Gap below the link is bridged by transparent padding (see ::before) so the
	   hover state is never lost while moving the cursor into the panel. */
  padding-top: 0.75rem;
  width: 380px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease;
}

/* Transparent hover bridge spanning the gap between link and panel. */

.datajoint-nav__dropdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.datajoint-nav__dropdown-panel {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 40, 80, 0.12);
  overflow: hidden;
}

.datajoint-nav__dropdown--narrow {
  width: 280px;
  left: auto;
  right: 0;
  transform: none;
}

.datajoint-nav__dropdown--narrow .datajoint-nav__dropdown-panel {
  padding: 0.5rem 0;
}

.datajoint-nav__item.has-dropdown:hover .datajoint-nav__dropdown,
.datajoint-nav__item.has-dropdown:focus-within .datajoint-nav__dropdown {
  opacity: 1;
  visibility: visible;
}

.datajoint-nav__dd-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: #011627;
  border-bottom: 1px solid #e2e2e2;
}

.datajoint-nav__dd-overview:hover {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-nav__dd-item {
  display: block;
  padding: 14px 24px;
  transition: background 150ms ease;
}

.datajoint-nav__dropdown--narrow .datajoint-nav__dd-item {
  padding: 12px 16px;
}

.datajoint-nav__dd-item:hover {
  background: rgba(0, 160, 223, 0.04);
}

.datajoint-nav__dd-item--external {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.datajoint-nav__dd-label {
  display: block;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: #011627;
  transition: color 150ms ease;
}

.datajoint-nav__dd-item:hover .datajoint-nav__dd-label {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-nav__dd-desc {
  display: block;
  margin-top: 4px;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 12px;
  color: #4a5568;
  line-height: 1.4;
}

.datajoint-nav__dd-sep {
  margin: 8px 16px 12px;
  height: 1px;
  background: #e2e2e2;
}

.datajoint-nav__dd-heading {
  margin: 0;
  padding: 0 16px 4px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-nav__dd-arrow {
  color: var(--wp--preset--color--brand-blue, #00a0df);
  flex-shrink: 0;
  display: inline-flex;
}

.datajoint-nav__dd-overview svg {
  color: var(--wp--preset--color--brand-blue, #00a0df);
  flex-shrink: 0;
}

.datajoint-nav__cta svg {
  flex-shrink: 0;
}

/* CTA */

.datajoint-nav__cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 14px;
  font-weight: 700;
  transition: transform 150ms ease;
}

@media (min-width: 1024px) {
  .datajoint-nav__cta {
    display: inline-flex;
  }
}

.datajoint-nav__cta:hover {
  transform: scale(1.02);
}

/* Mobile toggle */

.datajoint-nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

@media (min-width: 1024px) {
  .datajoint-nav__toggle {
    display: none;
  }
}

.datajoint-nav__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  transition: background 200ms ease;
}

.datajoint-nav.is-solid .datajoint-nav__toggle-bar {
  background: var(--wp--preset--color--text-on-light, #011627);
}

/* Mobile menu */

.datajoint-nav__mobile {
  background: #fff;
  border-top: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  padding: 1rem var(--dj-gutter, 48px);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.datajoint-nav__mobile[hidden] {
  display: none;
}

/* Drill-down panels: only the active one is shown. */

.datajoint-nav__mobile-panel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

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

.datajoint-nav__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--wp--preset--color--text-on-light, #011627);
  text-align: left;
}

/* Parent items render as buttons; reset native button chrome. */

.datajoint-nav__mobile-link--parent {
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
}

.datajoint-nav__mobile-chevron {
  color: #4a5568;
  flex-shrink: 0;
}

/* Back button at the top of a sub-panel. */

.datajoint-nav__mobile-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 0;
  margin-bottom: 0.25rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  cursor: pointer;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--wp--preset--color--brand-blue, #00a0df);
  text-align: left;
}

/* Sub-menu links inside a drilled panel. */

.datajoint-nav__mobile-sublink {
  display: block;
  padding: 0.625rem 0;
}

.datajoint-nav__mobile-sublink.datajoint-nav__dd-item--external {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.datajoint-nav__mobile-cta {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--wp--preset--color--brand-blue, #00a0df);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 14px;
  font-weight: 700;
}

.datajoint-footer {
  background: var(--wp--preset--color--bg-deep, #011627);
  color: var(--wp--preset--color--text-on-dark, #fff);
}

.datajoint-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3.5rem var(--dj-gutter, 48px) 5rem;
}

/* Footer CTA banner ("Build on a foundation that holds up") */

.datajoint-footer__cta {
  /* Generous top padding so the headline isn't crammed against the top edge of
	   the dark footer band (client: "more spacing above Build on a Foundation,
	   too close to top of section"). Symmetric with the bottom padding. */
  padding-top: 6rem;
  padding-bottom: 6rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .datajoint-footer__cta {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.datajoint-footer__cta-eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-footer__cta-heading {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  color: #fff;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.1;
}

.datajoint-footer__cta-accent {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

/* Columns */

.datajoint-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .datajoint-footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.datajoint-footer__column-title {
  margin: 0 0 1.25rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.datajoint-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  transition: color 150ms ease;
}

.datajoint-footer__link:hover {
  color: #fff;
}

.datajoint-footer__external {
  color: var(--wp--preset--color--brand-blue, #00a0df);
  flex-shrink: 0;
  margin-left: 0.15rem;
  background: none;
  vertical-align: middle;
}

/* Badges */

.datajoint-footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--wp--custom--color--border-on-dark, rgba(255, 255, 255, 0.1));
}

.datajoint-footer__badge {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Bottom */

.datajoint-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--wp--custom--color--border-on-dark, rgba(255, 255, 255, 0.1));
}

@media (min-width: 768px) {
  .datajoint-footer__bottom {
    flex-direction: row;
    align-items: center;
  }
}

.datajoint-footer__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.datajoint-footer__logo {
  height: 28px;
  width: auto;
}

.datajoint-footer__copyright {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.datajoint-footer__social {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.datajoint-footer__social-link {
  color: rgba(255, 255, 255, 0.6);
  transition: color 200ms ease;
}

.datajoint-footer__social-link:hover {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-footer__social-link svg {
  height: 20px;
  width: 20px;
  display: block;
}

.datajoint-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}

.datajoint-cta.is-align-center {
  justify-content: center;
}

.datajoint-cta.is-align-right {
  justify-content: flex-end;
}

.datajoint-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 15px;
  transition: transform 150ms ease;
}

.datajoint-cta__button:hover {
  transform: scale(1.02);
}

.datajoint-cta__arrow {
  line-height: 1;
}

/* Primary — filled pill */

.datajoint-cta__button--primary {
  background: var(--wp--preset--color--brand-blue, #00a0df);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
}

/* Secondary — underlined text on dark */

.datajoint-cta__button--secondary-dark {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 0.25rem;
}

/* Secondary — underlined text on light */

.datajoint-cta__button--secondary-light {
  color: var(--wp--preset--color--text-on-light, #011627);
  border-bottom: 1px solid rgba(1, 22, 39, 0.3);
  padding-bottom: 0.25rem;
}

/* Only the rendered <section> carries section padding. ACF saves the block's
   editor wrapper as <div class="wp-block-acf-datajoint-faq datajoint-faq"> inside
   InnerBlocks; scoping to section.* prevents that nested div from adding 5rem. */

section.datajoint-faq {
  padding: 5rem 0;
  /* Always behave as a full-width section: some saved instances weren't set
	   to alignfull, which capped the whole section at 1280px and made the FAQ
	   read as narrow (~60%) between the full-bleed sections around it. Force a
	   true full-bleed regardless of parent width / stray alignfull margins, so
	   __inner caps the content at 1280px like every other section. */
  max-width: none !important;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

div.wp-block-acf-datajoint-faq.datajoint-faq {
  padding: 0;
}

/* All FAQ sections use the standard 1280px container so they line up with the
   page's other sections (client: the Apps FAQ width "is the width all the FAQs
   should be on each page"). */

.datajoint-faq__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

/* `is-wide` is retained for back-compat but is now the same as the default. */

.datajoint-faq.is-wide .datajoint-faq__inner {
  max-width: 1280px;
}

.datajoint-faq__header {
  margin-bottom: 2.5rem;
}

.datajoint-faq__eyebrow {
  margin: 0 0 1rem;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-faq__heading {
  margin: 0;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  color: var(--wp--preset--color--text-on-light, #011627);
}

.datajoint-faq__intro {
  margin: 1.25rem 0 0;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--wp--preset--color--text-secondary, #808285);
}

.datajoint-faq__list {
  border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
  border-radius: 12px;
  padding: 0 24px;
  background: #fff;
}

/* Inside the card the last row carries no divider. */

.datajoint-faq__list .datajoint-faq-item:last-child {
  border-bottom: 0;
}

.datajoint-faq__footer-link-wrap {
  margin: 3rem 0 0;
  text-align: center;
}

.datajoint-faq__footer-link {
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-faq__footer-link:hover {
  text-decoration: underline;
}

.datajoint-faq-item {
  border-bottom: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
}

.datajoint-faq-item__question {
  margin: 0;
}

.datajoint-faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--wp--preset--color--text-on-light, #011627);
  transition: color 150ms ease;
}

.datajoint-faq-item__trigger:hover {
  color: var(--wp--preset--color--brand-blue, #00a0df);
}

/* Plus / minus icon */

.datajoint-faq-item__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.datajoint-faq-item__icon::before,
.datajoint-faq-item__icon::after {
  content: "";
  position: absolute;
  /* Closed: gray plus. Open: blue minus (see aria-expanded rule below). */
  background: var(--wp--preset--color--text-secondary, #4a5568);
  transition: transform 200ms ease, opacity 200ms ease, background 200ms ease;
}

.datajoint-faq-item__trigger[aria-expanded="true"] .datajoint-faq-item__icon::before,
.datajoint-faq-item__trigger[aria-expanded="true"] .datajoint-faq-item__icon::after {
  background: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-faq-item__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.datajoint-faq-item__icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.datajoint-faq-item__trigger[aria-expanded="true"] .datajoint-faq-item__icon::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.datajoint-faq-item__panel[hidden] {
  display: none;
}

.datajoint-faq-item__answer {
  padding: 0 0 1.75rem;
  /* Match Lovable: the answer fills the card width like the question. A prior
	   70ch readability cap made the text wrap early (~633px) inside the wide
	   1280px FAQ card, which read as the answer being "too narrow". */
  max-width: none;
  font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--wp--preset--color--text-secondary, #808285);
}

.datajoint-faq-item__answer p {
  margin: 0 0 1em;
}

.datajoint-faq-item__answer p:last-child {
  margin-bottom: 0;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.top-10 {
  top: 2.5rem;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.border {
  border-width: 1px;
}

.italic {
  font-style: italic;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

:root {
  /* DataJoint brand tokens (mirrors theme.json + export src/styles.css) */
  --dj-bg-dark: #0a1628;
  --dj-bg-deep: #011627;
  --dj-bg-light-grey: #f4f7fa;
  --dj-brand-blue: #00a0df;
  --dj-brand-orange: #ff5113;
  --dj-text-on-dark: #ffffff;
  --dj-text-on-light: #011627;
  --dj-text-secondary: #808285;
  --dj-border-light: #e2e2e2;
  --dj-border-on-dark: rgba(255, 255, 255, 0.1);
  --dj-radius: 1rem;
  /* Responsive side gutter: 24px on mobile, 48px from the md breakpoint up
	   (mirrors the export's .dj-container padding-inline). */
  --dj-gutter: 24px;
}

@media (min-width: 768px) {
  :root {
    --dj-gutter: 48px;
  }
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--dj-text-on-light);
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 700;
  color: inherit;
}

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

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